0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-26 13:52:38 +00:00

Added page accents, page shadow, and spacing

This commit is contained in:
Scott
2015-12-22 21:11:08 -05:00
parent 8a4d840717
commit ecd17a22c7
5 changed files with 46 additions and 6 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

View File

@@ -51,6 +51,11 @@ var Icons = [
snippet : "\\pagen\n\n",
tooltip : "New Page"
},
{
icon : 'fa-arrows-v',
snippet : "<div style='margin-top:140px'></div>\n\n",
tooltip : "Vertical Spacing"
}
]

View File

@@ -2,6 +2,7 @@ var React = require('react');
var _ = require('lodash');
var cx = require('classnames');
var Statusbar = require('../statusbar/statusbar.jsx');
var PHB = require('../phb/phb.jsx');
var Editor = require('../editor/editor.jsx');
@@ -36,6 +37,7 @@ var HomePage = React.createClass({
var self = this;
return(
<div className='homePage'>
<Statusbar />
<Editor text={this.state.text} onChange={this.handleTextChange} />
<PHB text={this.state.text} />
</div>

View File

@@ -2,7 +2,10 @@
.pbhPages{
&>.phb{
margin-bottom : 40px;
margin-top : 40px;
margin-left : 400px;
box-shadow : 1px 4px 14px #000;
}
}
@font-face {
@@ -66,9 +69,32 @@
-moz-column-width : 8cm;
-webkit-column-gap : 1cm;
text-rendering : optimizeLegibility;
position : relative;
overflow: hidden;
//Accents
&:before, &:after{
content : "";
position: absolute;
height: 50px;
width: 100%;
left: 0px;
background-size: cover;
width : 100%;
background-image : url('/assets/homebrew/assets/accent.png');
}
&:before{
top: 0px;
}
&:after{
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
bottom : 0px;
}
p,ul,blockquote{
-webkit-column-break-inside : avoid;
@@ -295,11 +321,12 @@
-webkit-column-span : all;
&+p{
&::first-letter{
float : left;
margin-top : 20px;
margin-bottom : 15px;
font-family : Solbera;
font-size : 7em;
float: left;
margin-top: 0.3em;
margin-bottom: 0.3em;
font-family: Solbera;
font-size: 10em;
color : #222;
}
}
}

View File

@@ -4,6 +4,12 @@ var cx = require('classnames');
var Statusbar = React.createClass({
getDefaultProps: function() {
return {
};
},
render : function(){
var self = this;
return(