f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-07 16:22:42 +00:00
Code Wiki Activity

Styled the homepage a bit better

Browse Source
This commit is contained in:
Scott Tolksdorf
2016-01-11 14:39:01 -05:00
parent c359805679
commit 9bc2eb70b2
3 changed files with 68 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
client/naturalCrit/home/home.less
View File

@@ -29,56 +29,60 @@
.sequentialDelay(0.5s, 1s);
.fadeInDown(1s);
.keep();
opacity : 0;
display : inline-block;
cursor : pointer;
opacity : 0;
text-align : center;
border-right : 5px solid @silver;
border-right : 1px solid #333;
&:last-child{
border : none;
}
.content{
.addSketch(360px);
.animate(background-color, 0.5s);
padding : 40px;
width : 500px;
width : 500px;
padding : 40px;
&:hover{
background-color: fade(@red, 20%);
svg, h2{
.transform(scale(1.3));
}
}
h2{
.animateAll(0.5s);
font-family : 'CodeBold';
font-size : 2em;
.animateAll(0.5s);
}
p{
max-width : 300px;
margin : 20px auto;
line-height: 1.5em;
}
svg{
.animateAll(0.5s);
height : 10em;
}
}
//Proejct specific styles
&.homebrew{
.content:hover{
background-color : fade(@teal, 20%);
}
}
&.combat{
.content:hover{
background-color : fade(@red, 20%);
}
}
}
}
}
.addSketch(@length, @color : black){
&:hover{
path, line, polyline, circle, rect, polygon{
.sketch(@length, @color, 2s)
}
}
path, line, polyline, circle, rect, polygon {
.sketch(@length, @color, 4s);
stroke-dasharray : @length;
stroke-dashoffset : 0px;
stroke : @color;
@@ -87,6 +91,21 @@
//.animateAll(3s);
}
}
.sketch(@length, @color : black, @duration : 3s, @easing : @defaultEasing){
.createAnimation(sketch, @duration, @easing);
.sketchKeyFrames(){
0% { stroke-dashoffset : @length; fill: transparent;}
50% { stroke-dashoffset : @length; fill: transparent;}
80% { stroke-dashoffset : 0px; fill: transparent;}
100% { stroke-dashoffset : 0px; fill:@color;}
}
@-webkit-keyframes sketch {.sketchKeyFrames();}
@-moz-keyframes sketch {.sketchKeyFrames();}
@-ms-keyframes sketch {.sketchKeyFrames();}
@-o-keyframes sketch {.sketchKeyFrames();}
@keyframes sketch {.sketchKeyFrames();}
}
/*
.sketch(@length, @color : black, @duration : 3s, @easing : @defaultEasing){
.createAnimation(bounce, @duration, @easing);
.sketchKeyFrames(){
@@ -101,4 +120,5 @@
@-ms-keyframes bounce {.sketchKeyFrames();}
@-o-keyframes bounce {.sketchKeyFrames();}
@keyframes bounce {.sketchKeyFrames();}
}
}
*/