mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2025-12-28 07:02:38 +00:00
Fix "block"s to be inline-block, width 100%
* Use border-image-width to allow border to encroach into text area without using ::before element for the border. * Rearrange things so .wide is last; makes sure wide is always displayed as `block` with priority over mustache divs default `inline-block` * Fix main page column-gap * adjust font size inside .note and .descriptive
This commit is contained in:
Trevor Buckner
@@ -19,7 +19,7 @@ body {
|
||||
}
|
||||
.useSansSerif(){
|
||||
font-family : ScalySansRemake;
|
||||
font-size : 0.325cm;
|
||||
font-size : 0.318cm;
|
||||
line-height : 1.2em;
|
||||
p,dl,ul,ol {
|
||||
line-height : 1.2em;
|
||||
@@ -51,6 +51,7 @@ body {
|
||||
max-height : 100%;
|
||||
column-span : all;
|
||||
columns : inherit;
|
||||
column-gap : inherit;
|
||||
}
|
||||
.page{
|
||||
.useColumns();
|
||||
@@ -209,29 +210,21 @@ body {
|
||||
// * NOTE
|
||||
// *****************************/
|
||||
.note{
|
||||
&::before{
|
||||
content : "";
|
||||
box-sizing : border-box;
|
||||
border-style : solid;
|
||||
border-width : 11px;
|
||||
border-image : @noteBorderImage 12;
|
||||
border-image-outset : 9px 0px;
|
||||
position : absolute;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
top : 0;
|
||||
left : 0;
|
||||
}
|
||||
.useSansSerif();
|
||||
position : relative;
|
||||
margin-top : 1.3em;
|
||||
margin-left : -0.1em;
|
||||
margin-right : -0.1em;
|
||||
background-color : @noteGreen;
|
||||
border-style : solid;
|
||||
border-width : 1px;
|
||||
border-image : @noteBorderImage 12 stretch;
|
||||
border-image-outset : 9px 0px;
|
||||
border-image-width : 11px;
|
||||
margin-top : 9px; //Prevent top border getting cut off on colbreak
|
||||
padding : 0.13cm 0.16cm;
|
||||
filter : drop-shadow(1px 4px 6px #888);
|
||||
padding : 0.5em 0.6em;
|
||||
& + * {
|
||||
margin-top : 1.3em;
|
||||
margin-top : 0.45cm;
|
||||
}
|
||||
h5 {
|
||||
font-size : 0.375cm;
|
||||
}
|
||||
p{
|
||||
display : block;
|
||||
@@ -241,7 +234,7 @@ body {
|
||||
padding-top : .8em;
|
||||
}
|
||||
:last-child {
|
||||
margin-bottom : 0em;
|
||||
margin-bottom : 0;
|
||||
}
|
||||
}
|
||||
//************************************
|
||||
@@ -249,18 +242,19 @@ body {
|
||||
// ************************************/
|
||||
.descriptive{
|
||||
.useSansSerif();
|
||||
display : inline-block;
|
||||
margin-top : 1.4em;
|
||||
background-color : #faf7ea;
|
||||
font-family : ScalySansRemake;
|
||||
border-style : solid;
|
||||
border-width : 7px;
|
||||
border-image : @descriptiveBoxImage 12 stretch;
|
||||
border-image-outset : 4px;
|
||||
filter : drop-shadow(0 0 3px #faf7ea);
|
||||
margin-top : 4px; //Prevent top border getting cut off on colbreak
|
||||
padding : 0.1em;
|
||||
filter : drop-shadow(0 0 3px #faf7ea);
|
||||
& + * {
|
||||
margin-top : 1.4em;
|
||||
margin-top : 0.45cm;
|
||||
}
|
||||
h5 {
|
||||
font-size : 0.375cm;
|
||||
}
|
||||
p{
|
||||
display : block;
|
||||
@@ -271,7 +265,7 @@ body {
|
||||
padding-top : .8em;
|
||||
}
|
||||
:last-child {
|
||||
margin-bottom : 0em;
|
||||
margin-bottom : 0;
|
||||
}
|
||||
}
|
||||
//*****************************
|
||||
@@ -380,7 +374,6 @@ body {
|
||||
margin : 0px -6px 1em;
|
||||
}
|
||||
|
||||
//-webkit-transform : translateZ(0); //Prevents shadows from breaking across columns, but breaks internal columns...
|
||||
position : relative;
|
||||
padding : 0px;
|
||||
margin-bottom : 1em;
|
||||
@@ -520,12 +513,15 @@ body {
|
||||
|
||||
pre code{
|
||||
width : 100%;
|
||||
display : block;
|
||||
border : 4px solid;
|
||||
display : inline-block;
|
||||
border-style : solid;
|
||||
border-width : 1px;
|
||||
border-image : @codeBorderImage 26 stretch;
|
||||
border-image-width : 10px;
|
||||
border-image-outset : 2px;
|
||||
border-radius : 12px;
|
||||
margin-top : 2px; //Prevent top border getting cut off on colbreak
|
||||
margin-bottom : 2px;
|
||||
& + * {
|
||||
margin-top : 1em;
|
||||
}
|
||||
@@ -543,9 +539,6 @@ body {
|
||||
break-after : always;
|
||||
-moz-column-break-after : always;
|
||||
break-before : column;
|
||||
&+* {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
//Avoid breaking up
|
||||
blockquote,table{
|
||||
@@ -595,19 +588,7 @@ body {
|
||||
break-inside : auto;
|
||||
}
|
||||
}
|
||||
//*****************************
|
||||
// * WIDE
|
||||
// *****************************/
|
||||
.page .wide{
|
||||
column-span : all;
|
||||
-webkit-column-span : all;
|
||||
-moz-column-span : all;
|
||||
display : block;
|
||||
margin-bottom : 0.34cm;
|
||||
&+* {
|
||||
margin-top : 0;
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
// * CLASS TABLE
|
||||
// *****************************/
|
||||
@@ -733,16 +714,15 @@ body {
|
||||
// *****************************/
|
||||
.page {
|
||||
.block {
|
||||
break-inside : avoid;
|
||||
-webkit-transform : translateZ(0); //Prevents shadows from breaking across columns
|
||||
break-inside : avoid;
|
||||
display : inline-block;
|
||||
min-width : 100%;
|
||||
-webkit-transform : translateZ(0); //Prevents shadows from breaking across columns
|
||||
}
|
||||
.inline-block {
|
||||
display : inline-block;
|
||||
text-indent : initial;
|
||||
}
|
||||
div {
|
||||
column-gap : 0.5cm; //Default spacing if a div uses multicolumns
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
@@ -788,3 +768,17 @@ body {
|
||||
margin-top: -1em;
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
// * WIDE
|
||||
// *****************************/
|
||||
.page .wide{
|
||||
column-span : all;
|
||||
-webkit-column-span : all;
|
||||
-moz-column-span : all;
|
||||
display : block;
|
||||
margin-bottom : 0.34cm;
|
||||
&+* {
|
||||
margin-top : 0;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user