From b464de69e36936a259df6538f626d05c71f33604 Mon Sep 17 00:00:00 2001 From: Scott Tolksdorf Date: Sat, 14 May 2016 12:09:08 -0400 Subject: [PATCH] Main page is fixed, figured out svgs, and cleaned up the core styles --- client/homebrew/homebrew.less | 13 +-- client/main/main.jsx | 37 +++++-- client/main/main.less | 109 ++++----------------- shared/naturalcrit/svg/combat.svg.jsx | 12 +-- shared/naturalcrit/svg/homebrew.svg.jsx | 15 ++- shared/naturalcrit/svg/naturalcrit.svg.jsx | 10 +- 6 files changed, 63 insertions(+), 133 deletions(-) diff --git a/client/homebrew/homebrew.less b/client/homebrew/homebrew.less index bd6ea4bb9..bd42707c5 100644 --- a/client/homebrew/homebrew.less +++ b/client/homebrew/homebrew.less @@ -1,15 +1,4 @@ - -@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{ - height : 100vh; - min-height : 100vh; - margin : 0; - font-family : 'Open Sans', sans-serif; -} +@import 'naturalcrit/styles/core.less'; .homebrew{ height : 100%; background-color : @steel; diff --git a/client/main/main.jsx b/client/main/main.jsx index 541db02d9..94d98eae3 100644 --- a/client/main/main.jsx +++ b/client/main/main.jsx @@ -4,6 +4,9 @@ var cx = require('classnames'); var Router = require('pico-router'); +var NaturalCritIcon = require('naturalcrit/svg/naturalcrit.svg.jsx'); +var HomebrewIcon = require('naturalcrit/svg/homebrew.svg.jsx'); + var Main = React.createClass({ getDefaultProps: function() { return { @@ -12,25 +15,41 @@ var Main = React.createClass({ id : 'homebrew', path : '/homebrew', name : 'The Homebrewery', - icon : - - - - , + icon : , desc : 'Make authentic-looking 5e homebrews using Markdown', show : true, beta : false + }, + { + id : 'homebrew2', + path : '/homebrew', + name : 'The Homebrewery', + icon : , + desc : 'Make authentic-looking 5e homebrews using Markdown', + + show : true, + beta : true + }, + { + id : 'homebrewfg2', + path : '/homebrew', + name : 'The Homebrewery', + icon : , + desc : 'Make authentic-looking 5e homebrews using Markdown', + + show : false, + beta : false } ] }; }, - naturalCritLogo : , - renderTool : function(tool){ - return + if(!tool.show) return null; + + return
{tool.icon}

{tool.name}

@@ -49,7 +68,7 @@ var Main = React.createClass({ return
- {this.naturalCritLogo} + Natural Crit diff --git a/client/main/main.less b/client/main/main.less index 76d7db4a5..39a27661b 100644 --- a/client/main/main.less +++ b/client/main/main.less @@ -1,30 +1,4 @@ -/* -@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'; - -@font-face { - font-family : CodeLight; - src : url('/assets/naturalcrit/logo/CODE Light.otf'); -} -@font-face { - font-family : CodeBold; - src : url('/assets/naturalcrit/logo/CODE Bold.otf'); -} -html,body, #reactContainer{ - min-height: 100vh; - height: 100vh; - margin: 0; - font-family : 'Open Sans', sans-serif; -} - -*/ - @import 'naturalcrit/styles/core.less'; - - .main{ height : 100vh; background-color : white; @@ -38,15 +12,15 @@ html,body, #reactContainer{ font-size : 4em; color : black; svg{ - fill : black; - height: .9em; - margin-right: .2em; - cursor: pointer; + height : .9em; + margin-right : .2em; + cursor : pointer; + fill : black; } .name{ - font-family: 'CodeLight'; + font-family : 'CodeLight'; .crit{ - font-family: 'CodeBold'; + font-family : 'CodeBold'; } } } @@ -64,23 +38,21 @@ html,body, #reactContainer{ .sequentialDelay(0.5s, 1s); .fadeInDown(1s); .keep(); - display : inline-block; - cursor : pointer; - opacity : 0; - text-align : center; - text-decoration: none; - color : black; - + display : inline-block; + cursor : pointer; + opacity : 0; + color : black; + text-align : center; + text-decoration : none; &+.tool{ - border-left : 1px solid #333; + border-left : 1px solid #666; } - .content{ .addSketch(360px); .animateAll(0.5s); position : relative; - width : 500px; - padding : 40px; + width : 320px; + padding : 35px; &:hover{ svg, h2{ .transform(scale(1.3)); @@ -101,19 +73,11 @@ html,body, #reactContainer{ height : 10em; } } - //Proejct specific styles - &.homebrew{ - .content:hover{ - background-color : fade(@teal, 20%); - } + .content:hover{ + background-color : fade(@teal, 20%); } - &.combat{ - .content:hover{ - background-color : fade(@red, 20%); - } - } - //Under Construction styles - &.underConstruction{ + //Beta styles + &.beta{ cursor : initial; .content{ &:hover{ @@ -126,7 +90,7 @@ html,body, #reactContainer{ } &:after{ .animateAll(); - content : "Under Construction"; + content : "beta!"; position : absolute; display : block; top : 120px; @@ -140,20 +104,6 @@ html,body, #reactContainer{ 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; - } } } } @@ -183,21 +133,4 @@ html,body, #reactContainer{ @-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();} -} -*/ \ No newline at end of file +} \ No newline at end of file diff --git a/shared/naturalcrit/svg/combat.svg.jsx b/shared/naturalcrit/svg/combat.svg.jsx index dcbc0a261..7323cba3b 100644 --- a/shared/naturalcrit/svg/combat.svg.jsx +++ b/shared/naturalcrit/svg/combat.svg.jsx @@ -1,9 +1,3 @@ -var React = require('react'); - -var Logo = React.createClass({ - render : function(){ - return - } -}); - -module.exports = Logo; +module.exports = function(props){ + return ; +} diff --git a/shared/naturalcrit/svg/homebrew.svg.jsx b/shared/naturalcrit/svg/homebrew.svg.jsx index bf863e5cb..cccd3a9a8 100644 --- a/shared/naturalcrit/svg/homebrew.svg.jsx +++ b/shared/naturalcrit/svg/homebrew.svg.jsx @@ -1,10 +1,9 @@ var React = require('react'); -var Logo = React.createClass({ - render : function(){ - return -

{tool.name}

- } -}); - -module.exports = Logo; +module.exports = function(props){ + return + + + + ; +}; diff --git a/shared/naturalcrit/svg/naturalcrit.svg.jsx b/shared/naturalcrit/svg/naturalcrit.svg.jsx index 9eba97054..74b4b677a 100644 --- a/shared/naturalcrit/svg/naturalcrit.svg.jsx +++ b/shared/naturalcrit/svg/naturalcrit.svg.jsx @@ -1,9 +1,5 @@ var React = require('react'); -var Logo = React.createClass({ - render : function(){ - - } -}); - -module.exports = Logo; +module.exports = function(props){ + return ; +};