mirror of
https://github.com/stolksdorf/homebrewery.git
synced 2025-12-13 18:45:57 +00:00
136 lines
3.1 KiB
Plaintext
136 lines
3.1 KiB
Plaintext
@import 'naturalcrit/styles/core.less';
|
|
.main{
|
|
height : 100vh;
|
|
background-color : white;
|
|
.top{
|
|
.fadeInTop(1s);
|
|
.delay(0.5);
|
|
margin-bottom : 100px;
|
|
padding-top : 100px;
|
|
text-align : center;
|
|
.logo{
|
|
font-size : 4em;
|
|
color : black;
|
|
svg{
|
|
height : .9em;
|
|
margin-right : .2em;
|
|
cursor : pointer;
|
|
fill : black;
|
|
}
|
|
.name{
|
|
font-family : 'CodeLight';
|
|
.crit{
|
|
font-family : 'CodeBold';
|
|
}
|
|
}
|
|
}
|
|
p{
|
|
margin-top : 10px;
|
|
font-size : 1.3em;
|
|
font-style : italic;
|
|
color : @grey;
|
|
}
|
|
}
|
|
.tools{
|
|
width : 100%;
|
|
text-align : center;
|
|
.tool{
|
|
.sequentialDelay(0.5s, 1s);
|
|
.fadeInDown(1s);
|
|
.keep();
|
|
display : inline-block;
|
|
cursor : pointer;
|
|
opacity : 0;
|
|
color : black;
|
|
text-align : center;
|
|
text-decoration : none;
|
|
&+.tool{
|
|
border-left : 1px solid #666;
|
|
}
|
|
.content{
|
|
.addSketch(360px);
|
|
.animateAll(0.5s);
|
|
position : relative;
|
|
width : 320px;
|
|
padding : 35px;
|
|
&:hover{
|
|
svg, h2{
|
|
.transform(scale(1.3));
|
|
}
|
|
}
|
|
h2{
|
|
.animateAll(0.5s);
|
|
font-family : 'CodeBold';
|
|
font-size : 2em;
|
|
}
|
|
p{
|
|
max-width : 300px;
|
|
margin : 20px auto;
|
|
line-height : 1.5em;
|
|
}
|
|
svg{
|
|
.animateAll(0.5s);
|
|
height : 10em;
|
|
}
|
|
}
|
|
.content:hover{
|
|
background-color : fade(@teal, 20%);
|
|
}
|
|
//Beta styles
|
|
&.beta{
|
|
cursor : initial;
|
|
.content{
|
|
&:hover{
|
|
svg, h2{
|
|
.transform(scale(1.0));
|
|
}
|
|
}
|
|
svg, h2{
|
|
opacity : 0.3;
|
|
}
|
|
&:after{
|
|
.animateAll();
|
|
content : "beta!";
|
|
position : absolute;
|
|
display : block;
|
|
top : 120px;
|
|
left : 0px;
|
|
width : 100%;
|
|
padding : 10px 0px;
|
|
//opacity : 0;
|
|
background-color : fade(@grey, 50%);
|
|
font-size : 2em;
|
|
font-weight : 800;
|
|
text-align : center;
|
|
text-transform : uppercase;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.addSketch(@length, @color : black){
|
|
path, line, polyline, circle, rect, polygon {
|
|
.sketch(@length, @color, 4s);
|
|
stroke-dasharray : @length;
|
|
stroke-dashoffset : 0px;
|
|
stroke : @color;
|
|
stroke-width : 0.5px;
|
|
fill : @color;
|
|
//.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();}
|
|
} |