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:
BIN
client/homebrew/assets/accent.png
Normal file
BIN
client/homebrew/assets/accent.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
@@ -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"
|
||||
}
|
||||
|
||||
|
||||
]
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,6 +4,12 @@ var cx = require('classnames');
|
||||
|
||||
var Statusbar = React.createClass({
|
||||
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
render : function(){
|
||||
var self = this;
|
||||
return(
|
||||
|
||||
Reference in New Issue
Block a user