f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-13 08:42:42 +00:00
Code Wiki Activity

Pseudo element borders are working, holy shit

Browse Source
This commit is contained in:
Scott Tolksdorf
2017-03-19 13:17:33 -04:00
parent 393df1b181
commit 30d3fcf168
7 changed files with 127 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
shared/homebrewery/brew.actions.js
View File

@@ -70,8 +70,9 @@ const Actions = {
},
localPrint : ()=>{
localStorage.setItem('print', Store.getBrewText());
window.open('/print?dialog=true&local=print','_blank');
const key = 'print';
localStorage.setItem(key, JSON.stringify(Store.getBrew()));
window.open(`/print?dialog=true&local=${key}`,'_blank');
},
print : ()=>{
window.open(`/print/${Store.getBrew().shareId}?dialog=true`, '_blank').focus();

4
shared/homebrewery/markdown.js
View File

@@ -13,11 +13,11 @@ renderer.paragraph = function(text){
if(text) r.push(Markdown(text, {renderer : renderer, sanitize: true}));
const block = matches[matchIndex];
if(block && block[0] == '{'){
r.push(`\n\n<div class="block ${block.substring(2).split(',').join(' ')}"><div class="internal">`);
r.push(`\n\n<div class="block ${block.substring(2).split(',').join(' ')}">`);
blockCount++;
}
if(block == '}}' && blockCount !== 0){
r.push('</div></div>\n\n');
r.push('</div>\n\n');
blockCount--;
}
matchIndex++;

125
shared/homebrewery/phb_style/phb.blocks.less
View File

@@ -1,4 +1,23 @@
.breakAvoid(){
column-break-inside : avoid;
-webkit-column-break-inside : avoid;
}
.pseudoBorder(){
position : relative;
&:before{
content : '';
position : absolute;
box-sizing : border-box;
width : 100%;
border-style : solid;
z-index : -1;
}
}
///////////////////
.spell{
ul:first-of-type{
margin-top : -0.5em;
@@ -14,60 +33,58 @@
.monster{
-webkit-column-break-inside : avoid;
column-break-inside : avoid;
&>.internal{
//background-color : @monsterStatBackground;
background-image: @monsterBG;
background-image : @monsterBG;
border-style : solid;
border-width : 10px;
border-image : @monsterBorder 10;
table{
color : @headerText;
}
ul:nth-of-type(1),ul:nth-of-type(2){
background-color: red;
background-color : red;
}
}
}
.note{
.useSansSerif();
margin: 9px 0px;
&>.internal{
margin-bottom : 1em;
padding : 5px 10px;
.breakAvoid();
.pseudoBorder();
margin : 9px 0px;
padding : 12px 0px;
&:before{
top : 9px;
bottom : 9px;
left : 0px;
background-color : @green;
border-style : solid;
border-width : 11px;
border-image : @noteBorder 11;
border-image-outset : 9px 0px;
box-shadow : 1px 4px 14px #888;
h2,h3,h4{
.useSansSerif();
color : black;
}
p, ul{
font-size : 0.352cm;
line-height : 1.1em;
}
}
&.alt>.internal{
border-style : solid;
border-width : 7px;
border-image : @descriptiveBorder 12 round;
border-image-outset : 4px;
h2,h3,h4{
.useSansSerif();
color : black;
}
p, ul{
font-size : 0.352cm;
line-height : 1.1em;
}
&.alt{
&:before{
border-style : solid;
border-width : 7px;
border-image : @descriptiveBorder 12 round;
border-image-outset : 4px;
}
}
}
.frame{
margin-top : 26px;
margin-bottom : 37px;
margin-left : 17px;
margin-right: 17px;
margin-top : 26px;
margin-right : 17px;
margin-bottom : 37px;
margin-left : 17px;
&>.internal{
box-sizing : border-box;
background-color : white;
@@ -85,58 +102,48 @@
-webkit-column-span : all;
-moz-column-span : all;
}
.oneColumn{
column-count : 1;
column-gap : 1cm;
column-count : 1;
column-gap : 1cm;
}
.twoColumn{
column-count : 2;
column-gap : 1cm;
column-count : 2;
column-gap : 1cm;
}
.threeColumn{
column-count : 3;
column-gap : 1cm;
column-count : 3;
column-gap : 1cm;
}
.fourColumn{
column-count : 4;
column-gap : 1cm;
column-count : 4;
column-gap : 1cm;
}
.columnSplit{
visibility : hidden;
-webkit-column-break-after : always;
break-after : always;
-moz-column-break-after : always;
}
.brushed{
border-image-source : url('http://i.imgur.com/nzPYZyD.png');
border-image-outset : 25px 17px;
border-image-repeat : round;
border-image-slice : 1250 1250 1250 1250;
border-image-width : 1250px;
border-image-outset : 25px 17px;
border-image-repeat : round;
border-image-slice : 1250 1250 1250 1250;
border-image-width : 1250px;
border-image-source : url('http : //i.imgur.com/nzPYZyD.png');
}
//basics
.left{
text-align: left;
text-align : left;
}
.right{
text-align: right;
text-align : right;
}
.center{
text-align: center;
text-align : center;
}
.bold{
font-weight: 800;
font-weight : 800;
}
.sansSerif{
.useSansSerif();
}

2
shared/homebrewery/phb_style/phb.colors.less
View File

@@ -15,7 +15,7 @@
background-color : @color;
}
}
&.note{
&.note:before{
background-color: @color;
}
}