f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-03 14:52:38 +00:00
Code Wiki Activity

Newlines

Browse Source
This commit is contained in:
Scott Tolksdorf
2016-05-28 09:41:05 -04:00
parent 14b7d60856
commit 626cba6062
190 changed files with 31097 additions and 31097 deletions
Download Patch File Download Diff File Expand all files Collapse all files

270
client/main/main.less
View File

@@ -1,136 +1,136 @@
@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();}
@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();}
}