|
@import (less) './themes/fonts/5e/fonts.less'; |
|
@import (less) './themes/assets/assets.less'; |
|
|
|
:root { |
|
|
|
--HB_Color_Background : #FFFFFF; |
|
--HB_Color_WatercolorStain : #000000; |
|
} |
|
|
|
@page { margin : 0; } |
|
body { counter-reset : phb-page-numbers; } |
|
* { -webkit-print-color-adjust : exact; } |
|
|
|
|
|
|
|
|
|
.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; |
|
} |
|
|
|
|
|
|
|
.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; |
|
list-style-type : disc; |
|
} |
|
ol { |
|
padding-left : 1.4em; |
|
list-style-position : outside; |
|
list-style-type : decimal; |
|
} |
|
img { z-index : -1; } |
|
|
|
|
|
|
|
|
|
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 { |
|
width : 100%; |
|
thead { |
|
display : table-row-group; |
|
font-weight : bold; |
|
} |
|
} |
|
div:not(.columnWrapper) > table + table { |
|
margin-top : 0; |
|
} |
|
|
|
|
|
|
|
|
|
code { |
|
font-family : 'Courier New', "Courier", monospace; |
|
overflow-wrap : break-word; |
|
white-space : pre-wrap; |
|
} |
|
|
|
pre code { |
|
display : inline-block; |
|
width : 100%; |
|
} |
|
|
|
|
|
|
|
.columnSplit { |
|
margin-top : 0; |
|
visibility : hidden; |
|
-webkit-column-break-after : always; |
|
break-after : always; |
|
-moz-column-break-after : always; |
|
& + * { margin-top : 0; } |
|
} |
|
|
|
blockquote,table { |
|
z-index : 15; |
|
-webkit-column-break-inside : avoid; |
|
page-break-inside : avoid; |
|
break-inside : avoid; |
|
} |
|
|
|
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 { |
|
position : absolute; |
|
top : 0; |
|
left : 0; |
|
z-index : 500; |
|
display : grid !important; |
|
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; } |
|
} |
|
|
|
|
|
[class*='watercolor'] { |
|
position : absolute; |
|
z-index : -2; |
|
width : 2000px; |
|
height : 2000px; |
|
background-color : var(--HB_Color_WatercolorStain); |
|
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; |
|
} |
|
|
|
.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; } |
|
|
|
|
|
|
|
[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%; |
|
-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"); |
|
} |
|
} |
|
|
|
.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%; |
|
-webkit-mask-position : 0% 0%; |
|
mask-image : var(--wc), var(--revealer); |
|
mask-repeat : no-repeat; |
|
mask-size : 100% 100%; |
|
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%; |
|
-webkit-mask-position : 50% 50%; |
|
mask-image : var(--wc), var(--revealer); |
|
mask-repeat : no-repeat; |
|
mask-size : 100% 100%; |
|
mask-position : 50% 50%; |
|
& > p:has(img) { |
|
bottom : 25%; |
|
left : 25%; |
|
width : 50%; |
|
height : 50%; |
|
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"); } |
|
} |
|
} |
|
|
|
|
|
|
|
|
|
.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; |
|
} |
|
} |
|
|
|
|
|
|
|
|
|
.page { |
|
.blank { |
|
height : 1em; |
|
margin-top : 0; |
|
& + * { margin-top : 0; } |
|
} |
|
} |
|
|
|
|
|
|
|
|
|
.page { |
|
.wide { |
|
column-span : all; |
|
display : block; |
|
margin-bottom : 1em; |
|
& + * { margin-top : 0; } |
|
} |
|
} |
|
|
|
|
|
|
|
|
|
.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%); } |
|
} |
|
|