mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2025-12-24 20:42:43 +00:00
Styled the homepage a bit better
This commit is contained in:
@@ -14,7 +14,7 @@ var Homebrew = React.createClass({
|
||||
return {
|
||||
url : "",
|
||||
text : "",
|
||||
entry : {
|
||||
brew : {
|
||||
text : "",
|
||||
shareId : null,
|
||||
editId : null,
|
||||
@@ -26,10 +26,10 @@ var Homebrew = React.createClass({
|
||||
componentWillMount: function() {
|
||||
Router = CreateRouter({
|
||||
'/homebrew/edit/:id' : (args) => {
|
||||
return <EditPage id={args.id} entry={this.props.entry} />
|
||||
return <EditPage id={args.id} entry={this.props.brew} />
|
||||
},
|
||||
'/homebrew/share/:id' : (args) => {
|
||||
return <SharePage id={args.id} entry={this.props.entry} />
|
||||
return <SharePage id={args.id} entry={this.props.brew} />
|
||||
},
|
||||
'/homebrew*' : <HomePage />,
|
||||
});
|
||||
|
||||
@@ -29,56 +29,60 @@
|
||||
.sequentialDelay(0.5s, 1s);
|
||||
.fadeInDown(1s);
|
||||
.keep();
|
||||
opacity : 0;
|
||||
display : inline-block;
|
||||
|
||||
|
||||
cursor : pointer;
|
||||
|
||||
opacity : 0;
|
||||
text-align : center;
|
||||
border-right : 5px solid @silver;
|
||||
border-right : 1px solid #333;
|
||||
&:last-child{
|
||||
border : none;
|
||||
}
|
||||
.content{
|
||||
.addSketch(360px);
|
||||
.animate(background-color, 0.5s);
|
||||
padding : 40px;
|
||||
width : 500px;
|
||||
|
||||
width : 500px;
|
||||
padding : 40px;
|
||||
&:hover{
|
||||
background-color: fade(@red, 20%);
|
||||
svg, h2{
|
||||
.transform(scale(1.3));
|
||||
}
|
||||
}
|
||||
|
||||
h2{
|
||||
.animateAll(0.5s);
|
||||
font-family : 'CodeBold';
|
||||
font-size : 2em;
|
||||
.animateAll(0.5s);
|
||||
}
|
||||
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%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.addSketch(@length, @color : black){
|
||||
&:hover{
|
||||
path, line, polyline, circle, rect, polygon{
|
||||
.sketch(@length, @color, 2s)
|
||||
}
|
||||
}
|
||||
path, line, polyline, circle, rect, polygon {
|
||||
.sketch(@length, @color, 4s);
|
||||
stroke-dasharray : @length;
|
||||
stroke-dashoffset : 0px;
|
||||
stroke : @color;
|
||||
@@ -87,6 +91,21 @@
|
||||
//.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(){
|
||||
@@ -101,4 +120,5 @@
|
||||
@-ms-keyframes bounce {.sketchKeyFrames();}
|
||||
@-o-keyframes bounce {.sketchKeyFrames();}
|
||||
@keyframes bounce {.sketchKeyFrames();}
|
||||
}
|
||||
}
|
||||
*/
|
||||
@@ -12,31 +12,6 @@ module.exports = function(app){
|
||||
})
|
||||
|
||||
|
||||
//Edit Page
|
||||
app.get('/homebrew/edit/:id', function(req, res){
|
||||
HomebrewModel.find({editId : req.params.id}, function(err, objs){
|
||||
var resObj = null;
|
||||
var errObj = {text: "# oops\nCould not find the homebrew."}
|
||||
if(objs.length){
|
||||
resObj = objs[0];
|
||||
}
|
||||
|
||||
vitreumRender({
|
||||
page: './build/homebrew/bundle.dot',
|
||||
globals:{},
|
||||
prerenderWith : './client/homebrew/homebrew.jsx',
|
||||
initialProps: {
|
||||
url: req.originalUrl,
|
||||
entry : resObj || errObj
|
||||
},
|
||||
clearRequireCache : true,
|
||||
}, function (err, page) {
|
||||
return res.send(page)
|
||||
});
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
//Updating
|
||||
app.put('/homebrew/update/:id', function(req, res){
|
||||
HomebrewModel.find({editId : req.params.id}, function(err, objs){
|
||||
@@ -68,6 +43,32 @@ module.exports = function(app){
|
||||
|
||||
|
||||
|
||||
|
||||
//Edit Page
|
||||
app.get('/homebrew/edit/:id', function(req, res){
|
||||
HomebrewModel.find({editId : req.params.id}, function(err, objs){
|
||||
var resObj = null;
|
||||
var errObj = {text: "# oops\nCould not find the homebrew."}
|
||||
if(objs.length){
|
||||
resObj = objs[0];
|
||||
}
|
||||
|
||||
vitreumRender({
|
||||
page: './build/homebrew/bundle.dot',
|
||||
globals:{},
|
||||
prerenderWith : './client/homebrew/homebrew.jsx',
|
||||
initialProps: {
|
||||
url: req.originalUrl,
|
||||
brew : resObj || errObj
|
||||
},
|
||||
clearRequireCache : true,
|
||||
}, function (err, page) {
|
||||
return res.send(page)
|
||||
});
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
//Share Page
|
||||
app.get('/homebrew/share/:id', function(req, res){
|
||||
HomebrewModel.find({shareId : req.params.id}, function(err, objs){
|
||||
@@ -87,7 +88,7 @@ module.exports = function(app){
|
||||
prerenderWith : './client/homebrew/homebrew.jsx',
|
||||
initialProps: {
|
||||
url: req.originalUrl,
|
||||
entry : resObj || errObj
|
||||
brew : resObj || errObj
|
||||
},
|
||||
clearRequireCache : true,
|
||||
}, function (err, page) {
|
||||
|
||||
Reference in New Issue
Block a user