mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-03-26 12:38:11 +00:00
Newlines
This commit is contained in:
Scott Tolksdorf
@@ -1,86 +1,86 @@
|
||||
var React = require('react');
|
||||
var _ = require('lodash');
|
||||
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 {
|
||||
tools : [
|
||||
{
|
||||
id : 'homebrew',
|
||||
path : '/homebrew',
|
||||
name : 'The Homebrewery',
|
||||
icon : <HomebrewIcon />,
|
||||
desc : 'Make authentic-looking 5e homebrews using Markdown',
|
||||
|
||||
show : true,
|
||||
beta : false
|
||||
},
|
||||
{
|
||||
id : 'homebrew2',
|
||||
path : '/homebrew',
|
||||
name : 'The Homebrewery',
|
||||
icon : <HomebrewIcon />,
|
||||
desc : 'Make authentic-looking 5e homebrews using Markdown',
|
||||
|
||||
show : false,
|
||||
beta : true
|
||||
},
|
||||
{
|
||||
id : 'homebrewfg2',
|
||||
path : '/homebrew',
|
||||
name : 'The Homebrewery',
|
||||
icon : <HomebrewIcon />,
|
||||
desc : 'Make authentic-looking 5e homebrews using Markdown',
|
||||
|
||||
show : false,
|
||||
beta : false
|
||||
}
|
||||
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
renderTool : function(tool){
|
||||
if(!tool.show) return null;
|
||||
|
||||
return <a href={tool.path} className={cx('tool', tool.id, {beta : tool.beta})} key={tool.id}>
|
||||
<div className='content'>
|
||||
{tool.icon}
|
||||
<h2>{tool.name}</h2>
|
||||
<p>{tool.desc}</p>
|
||||
</div>
|
||||
</a>;
|
||||
},
|
||||
|
||||
renderTools : function(){
|
||||
return _.map(this.props.tools, (tool)=>{
|
||||
return this.renderTool(tool);
|
||||
});
|
||||
},
|
||||
|
||||
render : function(){
|
||||
return <div className='main'>
|
||||
<div className='top'>
|
||||
<div className='logo'>
|
||||
<NaturalCritIcon />
|
||||
<span className='name'>
|
||||
Natural
|
||||
<span className='crit'>Crit</span>
|
||||
</span>
|
||||
</div>
|
||||
<p>Top-tier tools for the discerning DM</p>
|
||||
</div>
|
||||
<div className='tools'>
|
||||
{this.renderTools()}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = Main;
|
||||
var React = require('react');
|
||||
var _ = require('lodash');
|
||||
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 {
|
||||
tools : [
|
||||
{
|
||||
id : 'homebrew',
|
||||
path : '/homebrew',
|
||||
name : 'The Homebrewery',
|
||||
icon : <HomebrewIcon />,
|
||||
desc : 'Make authentic-looking 5e homebrews using Markdown',
|
||||
|
||||
show : true,
|
||||
beta : false
|
||||
},
|
||||
{
|
||||
id : 'homebrew2',
|
||||
path : '/homebrew',
|
||||
name : 'The Homebrewery',
|
||||
icon : <HomebrewIcon />,
|
||||
desc : 'Make authentic-looking 5e homebrews using Markdown',
|
||||
|
||||
show : false,
|
||||
beta : true
|
||||
},
|
||||
{
|
||||
id : 'homebrewfg2',
|
||||
path : '/homebrew',
|
||||
name : 'The Homebrewery',
|
||||
icon : <HomebrewIcon />,
|
||||
desc : 'Make authentic-looking 5e homebrews using Markdown',
|
||||
|
||||
show : false,
|
||||
beta : false
|
||||
}
|
||||
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
renderTool : function(tool){
|
||||
if(!tool.show) return null;
|
||||
|
||||
return <a href={tool.path} className={cx('tool', tool.id, {beta : tool.beta})} key={tool.id}>
|
||||
<div className='content'>
|
||||
{tool.icon}
|
||||
<h2>{tool.name}</h2>
|
||||
<p>{tool.desc}</p>
|
||||
</div>
|
||||
</a>;
|
||||
},
|
||||
|
||||
renderTools : function(){
|
||||
return _.map(this.props.tools, (tool)=>{
|
||||
return this.renderTool(tool);
|
||||
});
|
||||
},
|
||||
|
||||
render : function(){
|
||||
return <div className='main'>
|
||||
<div className='top'>
|
||||
<div className='logo'>
|
||||
<NaturalCritIcon />
|
||||
<span className='name'>
|
||||
Natural
|
||||
<span className='crit'>Crit</span>
|
||||
</span>
|
||||
</div>
|
||||
<p>Top-tier tools for the discerning DM</p>
|
||||
</div>
|
||||
<div className='tools'>
|
||||
{this.renderTools()}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = Main;
|
||||
|
||||
@@ -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();}
|
||||
}
|
||||
Reference in New Issue
Block a user