Spaces:
Sleeping
Sleeping
@import (less) './themes/fonts/5e/fonts.less'; | |
@import (less) './themes/assets/assets.less'; | |
:root { | |
//Colors | |
--HB_Color_Background : #FFFFFF; // White | |
--HB_Color_WatercolorStain : #000000; // Black | |
} | |
@page { margin : 0; } | |
body { counter-reset : phb-page-numbers; } | |
* { -webkit-print-color-adjust : exact; } | |
//***************************** | |
// * MUSTACHE DIVS/SPANS | |
// *****************************/ | |
.page { | |
.block { | |
break-inside : avoid; | |
display : inline-block; | |
width : 100%; | |
img { z-index : 0; } | |
} | |
.inline-block { | |
display : inline-block; | |
text-indent : initial; | |
} | |
} | |
.useColumns(@multiplier : 1, @fillMode: auto) { | |
column-fill : @fillMode; | |
column-count : 2; | |
} | |
.columnWrapper { | |
column-gap : inherit; | |
max-height : 100%; | |
column-span : all; | |
columns : inherit; | |
column-fill : inherit; | |
} | |
.page { | |
.useColumns(); | |
position : relative; | |
z-index : 15; | |
box-sizing : border-box; | |
width : 215.9mm; | |
height : 279.4mm; | |
padding : 1.4cm 1.9cm 1.7cm; | |
overflow : hidden; | |
counter-increment : phb-page-numbers; | |
background-color : var(--HB_Color_Background); | |
text-rendering : optimizeLegibility; | |
contain : size; | |
} | |
//***************************** | |
// * BASE | |
// *****************************/ | |
.page { | |
p { | |
display : block; | |
overflow-wrap : break-word; | |
} | |
strong { font-weight : bold; } | |
em { font-style : italic; } | |
sup { | |
font-size : smaller; | |
line-height : 0; | |
vertical-align : super; | |
} | |
sub { | |
font-size : smaller; | |
line-height : 0; | |
vertical-align : sub; | |
} | |
ul { | |
padding-left : 1.4em; | |
list-style-position : outside; //Needed for multiline list items | |
list-style-type : disc; | |
} | |
ol { | |
padding-left : 1.4em; | |
list-style-position : outside; | |
list-style-type : decimal; | |
} | |
img { z-index : -1; } | |
//***************************** | |
// * HEADERS | |
// *****************************/ | |
h1,h2,h3,h4,h5,h6 { | |
font-weight : bold; | |
line-height : 1.2em; | |
} | |
h1 { font-size : 2em; } | |
h2 { font-size : 1.5em; } | |
h3 { font-size : 1.17em; } | |
h4 { font-size : 1em; } | |
h5 { font-size : 0.83em; } | |
//***************************** | |
// * TABLE | |
// *****************************/ | |
table { | |
width : 100%; | |
thead { | |
display : table-row-group; | |
font-weight : bold; | |
} | |
} | |
div:not(.columnWrapper) > table + table { // Side-by-side tables should not | |
margin-top : 0; // have vertical spacing. | |
} | |
//************************************ | |
// * CODE BLOCKS | |
// ************************************/ | |
code { | |
font-family : 'Courier New', "Courier", monospace; | |
overflow-wrap : break-word; | |
white-space : pre-wrap; | |
} | |
pre code { | |
display : inline-block; | |
width : 100%; | |
} | |
//***************************** | |
// * EXTRAS | |
// *****************************/ | |
.columnSplit { | |
margin-top : 0; | |
visibility : hidden; | |
-webkit-column-break-after : always; | |
break-after : always; | |
-moz-column-break-after : always; | |
& + * { margin-top : 0; } | |
} | |
//Avoid breaking up | |
blockquote,table { | |
z-index : 15; | |
-webkit-column-break-inside : avoid; | |
page-break-inside : avoid; | |
break-inside : avoid; | |
} | |
// Nested lists | |
ul ul,ol ol,ul ol,ol ul { | |
margin-bottom : 0px; | |
margin-left : 1.5em; | |
} | |
li { | |
-webkit-column-break-inside : avoid; | |
page-break-inside : avoid; | |
break-inside : avoid; | |
} | |
/* Watermark */ | |
.watermark { | |
position : absolute; | |
top : 0; | |
left : 0; | |
z-index : 500; | |
display : grid ; | |
place-items : center; | |
justify-content : center; | |
width : 100%; | |
height : 100%; | |
margin : 0; | |
font-size : 120px; | |
text-transform : uppercase; | |
mix-blend-mode : overlay; | |
opacity : 30%; | |
transform : rotate(-45deg); | |
p { margin-bottom : none; } | |
} | |
/* Watercolor */ | |
[class*='watercolor'] { | |
position : absolute; | |
z-index : -2; | |
width : 2000px; /* dimensions need to be real big so the user can set */ | |
height : 2000px; /* height or width and the image will maintain aspect ratio */ | |
background-color : var(--HB_Color_WatercolorStain); /* default color */ | |
background-size : cover; | |
-webkit-mask-image : var(--wc); | |
-webkit-mask-size : contain; | |
-webkit-mask-repeat : no-repeat; | |
mask-image : var(--wc); | |
mask-size : contain; | |
mask-repeat : no-repeat; | |
--wc : @watercolor1; /* default image */ | |
} | |
.watercolor1 { --wc : @watercolor1; } | |
.watercolor2 { --wc : @watercolor2; } | |
.watercolor3 { --wc : @watercolor3; } | |
.watercolor4 { --wc : @watercolor4; } | |
.watercolor5 { --wc : @watercolor5; } | |
.watercolor6 { --wc : @watercolor6; } | |
.watercolor7 { --wc : @watercolor7; } | |
.watercolor8 { --wc : @watercolor8; } | |
.watercolor9 { --wc : @watercolor9; } | |
.watercolor10 { --wc : @watercolor10; } | |
.watercolor11 { --wc : @watercolor11; } | |
.watercolor12 { --wc : @watercolor12; } | |
/* Image Masks */ | |
[class*='imageMask'] { | |
position : absolute; | |
bottom : 50%; | |
left : 50%; | |
z-index : -1; | |
width : 200%; | |
height : 200%; | |
background-image : var(--checkerboard); | |
background-size : 20px; | |
transform : translateY(50%) translateX(-50%) rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY)); | |
-webkit-mask-image : var(--wc), var(--revealer); | |
-webkit-mask-repeat : repeat-x; | |
-webkit-mask-size : 50%; //Scale only X to fit page width, leave height at aspect ratio, designed to hang off the edge | |
-webkit-mask-position : 50% calc(50% - var(--offset)); | |
mask-image : var(--wc); | |
mask-repeat : repeat-x; | |
mask-size : 50%; | |
mask-position : 50% calc(50% - var(--offset)); | |
--rotation : 0; | |
--revealer : none; | |
--checkerboard : none; | |
--scaleX : 1; | |
--scaleY : 1; | |
& > p:has(img) { | |
position : absolute; | |
bottom : 50%; | |
left : 50%; | |
width : 50%; | |
height : 50%; | |
transform : translateX(-50%) translateY(50%) rotate(calc(-1deg * var(--rotation))) scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY))); | |
} | |
& img { | |
position : absolute; | |
bottom : 0; | |
display : block; | |
} | |
&.bottom { | |
--rotation : 0; | |
& img {bottom : 0;} | |
} | |
&.top { | |
--rotation : 180; | |
& img {top : 0;} | |
} | |
&.left { | |
--rotation : 90; | |
& img {left : 0;} | |
} | |
&.right { | |
--rotation : -90; | |
& img {right : 0;} | |
} | |
&.revealImage { | |
--revealer : linear-gradient(0deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2)); | |
--checkerboard : url("/assets/waterColorMasks/missingImage.png"); //shows any masked regions not filled by image | |
} | |
} | |
.imageMaskEdge { | |
&1 { --wc : url("/assets/waterColorMasks/edge/0001.webp"); } | |
&2 { --wc : url("/assets/waterColorMasks/edge/0002.webp"); } | |
&3 { --wc : url("/assets/waterColorMasks/edge/0003.webp"); } | |
&4 { --wc : url("/assets/waterColorMasks/edge/0004.webp"); } | |
&5 { --wc : url("/assets/waterColorMasks/edge/0005.webp"); } | |
&6 { --wc : url("/assets/waterColorMasks/edge/0006.webp"); } | |
&7 { --wc : url("/assets/waterColorMasks/edge/0007.webp"); } | |
&8 { --wc : url("/assets/waterColorMasks/edge/0008.webp"); } | |
} | |
[class*='imageMaskCenter'] { | |
bottom : calc(var(--offsetY)); | |
left : calc(var(--offsetX)); | |
width : 100%; | |
height : 100%; | |
transform : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY)); | |
-webkit-mask-image : var(--wc), var(--revealer); | |
-webkit-mask-repeat : no-repeat; | |
-webkit-mask-size : 100% 100%; //Scale both dimensions to fit page size | |
-webkit-mask-position : 0% 0%; | |
mask-image : var(--wc), var(--revealer); | |
mask-repeat : no-repeat; | |
mask-size : 100% 100%; //Scale both dimensions to fit page size | |
mask-position : 50% 50%; | |
& > p:has(img) { | |
position : absolute; | |
bottom : 0; | |
left : 0; | |
width : 100%; | |
height : 100%; | |
transform : unset; | |
transform : scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY))) | |
rotate(calc(-1deg * var(--rotation))) | |
translateX(calc(-1 * var(--offsetX))) | |
translateY(calc(1 * var(--offsetY))); | |
} | |
} | |
.imageMaskCenter { | |
&1 { --wc : url("/assets/waterColorMasks/center/0001.webp"); } | |
&2 { --wc : url("/assets/waterColorMasks/center/0002.webp"); } | |
&3 { --wc : url("/assets/waterColorMasks/center/0003.webp"); } | |
&4 { --wc : url("/assets/waterColorMasks/center/0004.webp"); } | |
&5 { --wc : url("/assets/waterColorMasks/center/0005.webp"); } | |
&6 { --wc : url("/assets/waterColorMasks/center/0006.webp"); } | |
&7 { --wc : url("/assets/waterColorMasks/center/0007.webp"); } | |
&8 { --wc : url("/assets/waterColorMasks/center/0008.webp"); } | |
&9 { --wc : url("/assets/waterColorMasks/center/0009.webp"); } | |
&10 { --wc : url("/assets/waterColorMasks/center/0010.webp"); } | |
&11 { --wc : url("/assets/waterColorMasks/center/0011.webp"); } | |
&12 { --wc : url("/assets/waterColorMasks/center/0012.webp"); } | |
&13 { --wc : url("/assets/waterColorMasks/center/0013.webp"); } | |
&14 { --wc : url("/assets/waterColorMasks/center/0014.webp"); } | |
&15 { --wc : url("/assets/waterColorMasks/center/0015.webp"); } | |
&16 { --wc : url("/assets/waterColorMasks/center/0016.webp"); } | |
&special { --wc : url("/assets/waterColorMasks/center/special.webp"); } | |
} | |
[class*='imageMaskCorner'] { | |
bottom : calc(-50% + var(--offsetY)); | |
left : calc(-50% + var(--offsetX)); | |
width : 200%; | |
height : 200%; | |
transform : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY)); | |
-webkit-mask-image : var(--wc), var(--revealer); | |
-webkit-mask-repeat : no-repeat; | |
-webkit-mask-size : 100% 100%; //Scale both dimensions to fit page size | |
-webkit-mask-position : 50% 50%; | |
mask-image : var(--wc), var(--revealer); | |
mask-repeat : no-repeat; | |
mask-size : 100% 100%; //Scale both dimensions to fit page size | |
mask-position : 50% 50%; | |
& > p:has(img) { | |
bottom : 25%; | |
left : 25%; | |
width : 50%; | |
height : 50%; //Complex transform below to handle mix of % and cm offsets | |
transform : scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY))) | |
rotate(calc(-1deg * var(--rotation))) | |
translateX(calc(-1 * var(--offsetX))) | |
translateY(calc(1 * var(--offsetY))); | |
} | |
} | |
.imageMaskCorner { | |
&1 { --wc : url("/assets/waterColorMasks/corner/0001.webp"); } | |
&2 { --wc : url("/assets/waterColorMasks/corner/0002.webp"); } | |
&3 { --wc : url("/assets/waterColorMasks/corner/0003.webp"); } | |
&4 { --wc : url("/assets/waterColorMasks/corner/0004.webp"); } | |
&5 { --wc : url("/assets/waterColorMasks/corner/0005.webp"); } | |
&6 { --wc : url("/assets/waterColorMasks/corner/0006.webp"); } | |
&7 { --wc : url("/assets/waterColorMasks/corner/0007.webp"); } | |
&8 { --wc : url("/assets/waterColorMasks/corner/0008.webp"); } | |
&9 { --wc : url("/assets/waterColorMasks/corner/0009.webp"); } | |
&10 { --wc : url("/assets/waterColorMasks/corner/0010.webp"); } | |
&11 { --wc : url("/assets/waterColorMasks/corner/0011.webp"); } | |
&12 { --wc : url("/assets/waterColorMasks/corner/0012.webp"); } | |
&13 { --wc : url("/assets/waterColorMasks/corner/0013.webp"); } | |
&14 { --wc : url("/assets/waterColorMasks/corner/0014.webp"); } | |
&15 { --wc : url("/assets/waterColorMasks/corner/0015.webp"); } | |
&16 { --wc : url("/assets/waterColorMasks/corner/0016.webp"); } | |
&17 { --wc : url("/assets/waterColorMasks/corner/0017.webp"); } | |
&18 { --wc : url("/assets/waterColorMasks/corner/0018.webp"); } | |
&19 { --wc : url("/assets/waterColorMasks/corner/0019.webp"); } | |
&20 { --wc : url("/assets/waterColorMasks/corner/0020.webp"); } | |
&21 { --wc : url("/assets/waterColorMasks/corner/0021.webp"); } | |
&22 { --wc : url("/assets/waterColorMasks/corner/0022.webp"); } | |
&23 { --wc : url("/assets/waterColorMasks/corner/0023.webp"); } | |
&24 { --wc : url("/assets/waterColorMasks/corner/0024.webp"); } | |
&25 { --wc : url("/assets/waterColorMasks/corner/0025.webp"); } | |
&26 { --wc : url("/assets/waterColorMasks/corner/0026.webp"); } | |
&27 { --wc : url("/assets/waterColorMasks/corner/0027.webp"); } | |
&28 { --wc : url("/assets/waterColorMasks/corner/0028.webp"); } | |
&29 { --wc : url("/assets/waterColorMasks/corner/0029.webp"); } | |
&30 { --wc : url("/assets/waterColorMasks/corner/0030.webp"); } | |
&31 { --wc : url("/assets/waterColorMasks/corner/0031.webp"); } | |
&32 { --wc : url("/assets/waterColorMasks/corner/0032.webp"); } | |
&33 { --wc : url("/assets/waterColorMasks/corner/0033.webp"); } | |
&34 { --wc : url("/assets/waterColorMasks/corner/0034.webp"); } | |
&35 { --wc : url("/assets/waterColorMasks/corner/0035.webp"); } | |
&36 { --wc : url("/assets/waterColorMasks/corner/0036.webp"); } | |
&37 { --wc : url("/assets/waterColorMasks/corner/0037.webp"); } | |
} | |
} | |
//***************************** | |
// * DEFINITION LISTS | |
// *****************************/ | |
.page { | |
dl { | |
padding-left : 1em; | |
white-space : pre-line; | |
} | |
dt { | |
display : inline; | |
margin-right : 0.5ch; | |
margin-left : -1em; | |
} | |
dd { | |
display : inline; | |
margin-left : 0; | |
text-indent : 0; | |
} | |
} | |
//***************************** | |
// * BLANK LINE | |
// *****************************/ | |
.page { | |
.blank { | |
height : 1em; | |
margin-top : 0; | |
& + * { margin-top : 0; } | |
} | |
} | |
//***************************** | |
// * WIDE | |
// *****************************/ | |
.page { | |
.wide { | |
column-span : all; | |
display : block; | |
margin-bottom : 1em; | |
& + * { margin-top : 0; } | |
} | |
} | |
//***************************** | |
//* CREDITS | |
//*****************************/ | |
.page .homebreweryCredits { | |
p { | |
font-family : 'NodestoCapsWide'; | |
font-size : 0.4cm; | |
line-height : 1em; | |
text-align : center; | |
text-indent : 0; | |
letter-spacing : 0.08em; | |
} | |
a { | |
color : inherit; | |
text-decoration : none; | |
&:hover { text-decoration : underline; } | |
} | |
.homebreweryIcon { | |
display : block; | |
height : 1.5cm; | |
margin : 0 auto; | |
background-color : black; | |
-webkit-mask : url("/assets/naturalCritLogoWhite.svg") center / contain no-repeat; | |
mask : url("/assets/naturalCritLogoWhite.svg") center / contain no-repeat; | |
} | |
.homebreweryIcon.red { background-color : red; } | |
.homebreweryIcon.gold { background-image : linear-gradient(to top left, brown 22.5%, gold 40%, white 60%, gold 67.5%, brown 82.5%); } | |
} | |