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

Changed project structure to have the root page into main and subbed out the pages into their own folder

Browse Source
This commit is contained in:
Scott Tolksdorf
2016-05-06 15:59:18 -04:00
parent 34a93a6151
commit 62654102b8
43 changed files with 320 additions and 1448 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
client/main/main.less Normal file
View File

@@ -0,0 +1,178 @@
@import 'naturalcrit/styles/reset.less';
//@import 'naturalcrit/styles/elements.less';
@import 'naturalcrit/styles/animations.less';
@import 'naturalcrit/styles/colors.less';
@import 'naturalcrit/styles/tooltip.less';
html,body, #reactContainer{
min-height: 100vh;
height: 100vh;
margin: 0;
font-family : 'Open Sans', sans-serif;
}
.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{
fill : black;
}
}
p{
margin-top : 10px;
font-size : 1.3em;
font-style : italic;
color : @grey;
}
}
.tools{
width : 100%;
text-align : center;
.toolContainer{
.sequentialDelay(0.5s, 1s);
.fadeInDown(1s);
.keep();
display : inline-block;
cursor : pointer;
opacity : 0;
text-align : center;
border-right : 1px solid #333;
&:last-child{
border : none;
}
.content{
.addSketch(360px);
.animateAll(0.5s);
position : relative;
width : 500px;
padding : 40px;
&: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;
}
}
//Proejct specific styles
&.homebrew{
.content:hover{
background-color : fade(@teal, 20%);
}
}
&.combat{
.content:hover{
background-color : fade(@red, 20%);
}
}
//Under Construction styles
&.underConstruction{
cursor : initial;
.content{
&:hover{
svg, h2{
.transform(scale(1.0));
}
}
svg, h2{
opacity : 0.3;
}
&:after{
.animateAll();
content : "Under Construction";
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;
}
&:before{
content : "";
position : absolute;
display : block;
top : 130px;
right : 30px;
height : 50px;
width : 40px;
//opacity : 0;
background-image : url('/assets/naturalCrit/home/bulldozer.png');
background-repeat : no-repeat;
background-size : contain;
animation-iteration-count : infinite;
}
}
}
}
}
}
.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();}
}
/*
.sketch(@length, @color : black, @duration : 3s, @easing : @defaultEasing){
.createAnimation(bounce, @duration, @easing);
.sketchKeyFrames(){
0% { stroke-dashoffset : 0px; fill:@color;}
15% { stroke-dashoffset : 0px; fill : transparent}
50% { stroke-dashoffset : @length; fill: transparent}
85% { stroke-dashoffset : 0px; fill:transparent;}
100% { stroke-dashoffset : 0px; fill:@color;}
}
@-webkit-keyframes bounce {.sketchKeyFrames();}
@-moz-keyframes bounce {.sketchKeyFrames();}
@-ms-keyframes bounce {.sketchKeyFrames();}
@-o-keyframes bounce {.sketchKeyFrames();}
@keyframes bounce {.sketchKeyFrames();}
}
*/