0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-15 14:52:39 +00:00

Merge branch 'master' into pr/3078

This commit is contained in:
Trevor Buckner
2023-12-11 15:13:39 -05:00
4 changed files with 234 additions and 220 deletions

18
package-lock.json generated
View File

@@ -30,12 +30,12 @@
"less": "^3.13.1", "less": "^3.13.1",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"marked": "5.1.1", "marked": "5.1.1",
"marked-extended-tables": "^1.0.7", "marked-extended-tables": "^1.0.8",
"marked-gfm-heading-id": "^3.1.2", "marked-gfm-heading-id": "^3.1.2",
"marked-smartypants-lite": "^1.0.1", "marked-smartypants-lite": "^1.0.1",
"markedLegacy": "npm:marked@^0.3.19", "markedLegacy": "npm:marked@^0.3.19",
"moment": "^2.29.4", "moment": "^2.29.4",
"mongoose": "^8.0.2", "mongoose": "^8.0.3",
"nanoid": "3.3.4", "nanoid": "3.3.4",
"nconf": "^0.12.1", "nconf": "^0.12.1",
"react": "^18.2.0", "react": "^18.2.0",
@@ -10052,11 +10052,11 @@
} }
}, },
"node_modules/marked-extended-tables": { "node_modules/marked-extended-tables": {
"version": "1.0.7", "version": "1.0.8",
"resolved": "https://registry.npmjs.org/marked-extended-tables/-/marked-extended-tables-1.0.7.tgz", "resolved": "https://registry.npmjs.org/marked-extended-tables/-/marked-extended-tables-1.0.8.tgz",
"integrity": "sha512-DwURXYCPxhIdEP6y0rI9Od3qPM6ieXK7ce6hqR0/9MpkSmBUMrrBtoH3fMp6+oEXjfmIq4YBGPi9Ios80N3Q2w==", "integrity": "sha512-GcVQP7EnfQ98o09ooqM4t4M0qfpKdKuk7/z4qZfgkLyXTXsIyFS1eeBmfC36o1NbR6aSq8ynL/LeTz3w4RS27Q==",
"peerDependencies": { "peerDependencies": {
"marked": ">=3 <10" "marked": ">=3 <12"
} }
}, },
"node_modules/marked-gfm-heading-id": { "node_modules/marked-gfm-heading-id": {
@@ -10453,9 +10453,9 @@
} }
}, },
"node_modules/mongoose": { "node_modules/mongoose": {
"version": "8.0.2", "version": "8.0.3",
"resolved": "https://registry.npmjs.org/mongoose/-/mongoose-8.0.2.tgz", "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-8.0.3.tgz",
"integrity": "sha512-Vsi9GzTXjdBVzheT1HZOZ2jHNzzR9Xwb5OyLz/FvDEAhlwrRnXnuqJf0QHINUOQSm7aoyvnPks0q85HJkd6yDw==", "integrity": "sha512-LJRT0yP4TW14HT4r2RkxqyvoTylMSzWpl5QOeVHTnRggCLQSpkoBdgbUtORFq/mSL2o9cLCPJz+6uzFj25qbHw==",
"dependencies": { "dependencies": {
"bson": "^6.2.0", "bson": "^6.2.0",
"kareem": "2.5.1", "kareem": "2.5.1",

View File

@@ -99,12 +99,12 @@
"less": "^3.13.1", "less": "^3.13.1",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"marked": "5.1.1", "marked": "5.1.1",
"marked-extended-tables": "^1.0.7", "marked-extended-tables": "^1.0.8",
"marked-gfm-heading-id": "^3.1.2", "marked-gfm-heading-id": "^3.1.2",
"marked-smartypants-lite": "^1.0.1", "marked-smartypants-lite": "^1.0.1",
"markedLegacy": "npm:marked@^0.3.19", "markedLegacy": "npm:marked@^0.3.19",
"moment": "^2.29.4", "moment": "^2.29.4",
"mongoose": "^8.0.2", "mongoose": "^8.0.3",
"nanoid": "3.3.4", "nanoid": "3.3.4",
"nconf": "^0.12.1", "nconf": "^0.12.1",
"react": "^18.2.0", "react": "^18.2.0",

View File

@@ -111,6 +111,21 @@ module.exports = [
icon : 'fas fa-code', icon : 'fas fa-code',
gen : '<!-- This is a comment that will not be rendered into your brew. Hotkey (Ctrl/Cmd + /). -->' gen : '<!-- This is a comment that will not be rendered into your brew. Hotkey (Ctrl/Cmd + /). -->'
}, },
{
name : 'Homebrewery Credit',
icon : 'fas fa-dice-d20',
gen : function(){
return dedent`
{{homebreweryCredits
Made With
{{homebreweryIcon}}
The Homebrewery
[Homebrewery.Naturalcrit.com](https://homebrewery.naturalcrit.com)
}}\n\n`;
},
}
] ]
}, },
{ {

View File

@@ -8,12 +8,8 @@
} }
@page { margin : 0; } @page { margin : 0; }
body { body { counter-reset : phb-page-numbers; }
counter-reset : phb-page-numbers; * { -webkit-print-color-adjust : exact; }
}
*{
-webkit-print-color-adjust : exact;
}
//***************************** //*****************************
// * MUSTACHE DIVS/SPANS // * MUSTACHE DIVS/SPANS
@@ -23,9 +19,7 @@ body {
break-inside : avoid; break-inside : avoid;
display : inline-block; display : inline-block;
width : 100%; width : 100%;
img { img { z-index : 0; }
z-index : 0;
}
} }
.inline-block { .inline-block {
display : inline-block; display : inline-block;
@@ -38,23 +32,23 @@ body {
column-count : 2; column-count : 2;
} }
.columnWrapper { .columnWrapper {
column-gap : inherit;
max-height : 100%; max-height : 100%;
column-span : all; column-span : all;
columns : inherit; columns : inherit;
column-gap : inherit;
column-fill : inherit; column-fill : inherit;
} }
.page { .page {
.useColumns(); .useColumns();
height : 279.4mm;
width : 215.9mm;
padding : 1.4cm 1.9cm 1.7cm;
counter-increment : phb-page-numbers;
background-color : var(--HB_Color_Background);
position : relative; position : relative;
z-index : 15; z-index : 15;
box-sizing : border-box; box-sizing : border-box;
width : 215.9mm;
height : 279.4mm;
padding : 1.4cm 1.9cm 1.7cm;
overflow : hidden; overflow : hidden;
counter-increment : phb-page-numbers;
background-color : var(--HB_Color_Background);
text-rendering : optimizeLegibility; text-rendering : optimizeLegibility;
contain : size; contain : size;
} }
@@ -63,38 +57,32 @@ body {
// *****************************/ // *****************************/
.page { .page {
p { p {
overflow-wrap : break-word;
display : block; display : block;
overflow-wrap : break-word;
} }
strong{ strong { font-weight : bold; }
font-weight : bold; em { font-style : italic; }
}
em{
font-style : italic;
}
sup { sup {
vertical-align : super;
font-size : smaller; font-size : smaller;
line-height : 0; line-height : 0;
vertical-align : super;
} }
sub { sub {
vertical-align : sub;
font-size : smaller; font-size : smaller;
line-height : 0; line-height : 0;
vertical-align : sub;
} }
ul { ul {
padding-left : 1.4em;
list-style-position : outside; //Needed for multiline list items list-style-position : outside; //Needed for multiline list items
list-style-type : disc; list-style-type : disc;
padding-left : 1.4em;
} }
ol { ol {
padding-left : 1.4em;
list-style-position : outside; list-style-position : outside;
list-style-type : decimal; list-style-type : decimal;
padding-left : 1.4em;
}
img{
z-index : -1;
} }
img { z-index : -1; }
//***************************** //*****************************
// * HEADERS // * HEADERS
@@ -103,21 +91,11 @@ body {
font-weight : bold; font-weight : bold;
line-height : 1.2em; line-height : 1.2em;
} }
h1{ h1 { font-size : 2em; }
font-size : 2em; h2 { font-size : 1.5em; }
} h3 { font-size : 1.17em; }
h2{ h4 { font-size : 1em; }
font-size : 1.5em; h5 { font-size : 0.83em; }
}
h3{
font-size : 1.17em;
}
h4{
font-size : 1em;
}
h5{
font-size : 0.83em;
}
//***************************** //*****************************
// * TABLE // * TABLE
// *****************************/ // *****************************/
@@ -136,27 +114,25 @@ body {
// * CODE BLOCKS // * CODE BLOCKS
// ************************************/ // ************************************/
code { code {
font-family : "Courier New", Courier, monospace; font-family : 'Courier New', "Courier", monospace;
white-space : pre-wrap;
overflow-wrap : break-word; overflow-wrap : break-word;
white-space : pre-wrap;
} }
pre code { pre code {
width : 100%;
display : inline-block; display : inline-block;
width : 100%;
} }
//***************************** //*****************************
// * EXTRAS // * EXTRAS
// *****************************/ // *****************************/
.columnSplit { .columnSplit {
margin-top : 0;
visibility : hidden; visibility : hidden;
-webkit-column-break-after : always; -webkit-column-break-after : always;
break-after : always; break-after : always;
-moz-column-break-after : always; -moz-column-break-after : always;
margin-top : 0; & + * { margin-top : 0; }
& + * {
margin-top : 0;
}
} }
//Avoid breaking up //Avoid breaking up
blockquote,table { blockquote,table {
@@ -178,41 +154,39 @@ body {
/* Watermark */ /* Watermark */
.watermark { .watermark {
position : absolute;
top : 0;
left : 0;
z-index : 500;
display : grid !important; display : grid !important;
place-items : center; place-items : center;
justify-content : center; justify-content : center;
position : absolute;
margin : 0;
top : 0;
left : 0;
width : 100%; width : 100%;
height : 100%; height : 100%;
margin : 0;
font-size : 120px; font-size : 120px;
text-transform : uppercase; text-transform : uppercase;
mix-blend-mode : overlay; mix-blend-mode : overlay;
opacity : 30%; opacity : 30%;
transform : rotate(-45deg); transform : rotate(-45deg);
z-index : 500; p { margin-bottom : none; }
p {
margin-bottom : none;
}
} }
/* Watercolor */ /* Watercolor */
[class*="watercolor"] { [class*='watercolor'] {
position : absolute; position : absolute;
z-index : -2;
width : 2000px; /* dimensions need to be real big so the user can set */ 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 */ 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-image : var(--wc);
-webkit-mask-size : contain; -webkit-mask-size : contain;
-webkit-mask-repeat : no-repeat; -webkit-mask-repeat : no-repeat;
mask-image : var(--wc); mask-image : var(--wc);
mask-size : contain; mask-size : contain;
mask-repeat : no-repeat; mask-repeat : no-repeat;
background-size : cover;
background-color : var(--HB_Color_WatercolorStain); /*default color*/
--wc : @watercolor1; /* default image */ --wc : @watercolor1; /* default image */
z-index : -2;
} }
.watercolor1 { --wc : @watercolor1; } .watercolor1 { --wc : @watercolor1; }
@@ -230,17 +204,16 @@ body {
/* Image Masks */ /* Image Masks */
[class*="imageMask"] { [class*='imageMask'] {
position : absolute; position : absolute;
height : 200%;
width : 200%;
left : 50%;
bottom : 50%; bottom : 50%;
--rotation : 0; left : 50%;
--revealer : none; z-index : -1;
--checkerboard : none; width : 200%;
--scaleX : 1; height : 200%;
--scaleY : 1; 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-image : var(--wc), var(--revealer);
-webkit-mask-repeat : repeat-x; -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-size : 50%; //Scale only X to fit page width, leave height at aspect ratio, designed to hang off the edge
@@ -249,22 +222,23 @@ body {
mask-repeat : repeat-x; mask-repeat : repeat-x;
mask-size : 50%; mask-size : 50%;
mask-position : 50% calc(50% - var(--offset)); mask-position : 50% calc(50% - var(--offset));
background-image : var(--checkerboard); --rotation : 0;
background-size : 20px; --revealer : none;
z-index : -1; --checkerboard : none;
transform : translateY(50%) translateX(-50%) rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY)); --scaleX : 1;
--scaleY : 1;
& > p:has(img) { & > p:has(img) {
position : absolute; position : absolute;
width : 50%;
height : 50%;
bottom : 50%; bottom : 50%;
left : 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))); transform : translateX(-50%) translateY(50%) rotate(calc(-1deg * var(--rotation))) scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY)));
} }
& img { & img {
position : absolute; position : absolute;
display : block;
bottom : 0; bottom : 0;
display : block;
} }
&.bottom { &.bottom {
--rotation : 0; --rotation : 0;
@@ -283,27 +257,28 @@ body {
& img {right : 0;} & img {right : 0;}
} }
&.revealImage { &.revealImage {
--revealer : linear-gradient(0deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,0.2)); --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 --checkerboard : url("/assets/waterColorMasks/missingImage.png"); //shows any masked regions not filled by image
} }
} }
.imageMaskEdge { .imageMaskEdge {
&1 { --wc : url(/assets/waterColorMasks/edge/0001.webp); } &1 { --wc : url("/assets/waterColorMasks/edge/0001.webp"); }
&2 { --wc : url(/assets/waterColorMasks/edge/0002.webp); } &2 { --wc : url("/assets/waterColorMasks/edge/0002.webp"); }
&3 { --wc : url(/assets/waterColorMasks/edge/0003.webp); } &3 { --wc : url("/assets/waterColorMasks/edge/0003.webp"); }
&4 { --wc : url(/assets/waterColorMasks/edge/0004.webp); } &4 { --wc : url("/assets/waterColorMasks/edge/0004.webp"); }
&5 { --wc : url(/assets/waterColorMasks/edge/0005.webp); } &5 { --wc : url("/assets/waterColorMasks/edge/0005.webp"); }
&6 { --wc : url(/assets/waterColorMasks/edge/0006.webp); } &6 { --wc : url("/assets/waterColorMasks/edge/0006.webp"); }
&7 { --wc : url(/assets/waterColorMasks/edge/0007.webp); } &7 { --wc : url("/assets/waterColorMasks/edge/0007.webp"); }
&8 { --wc : url(/assets/waterColorMasks/edge/0008.webp); } &8 { --wc : url("/assets/waterColorMasks/edge/0008.webp"); }
} }
[class*="imageMaskCenter"] { [class*='imageMaskCenter'] {
bottom : calc(var(--offsetY));
left : calc(var(--offsetX));
width : 100%; width : 100%;
height : 100%; height : 100%;
left : calc(var(--offsetX)); transform : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
bottom : calc(var(--offsetY));
-webkit-mask-image : var(--wc), var(--revealer); -webkit-mask-image : var(--wc), var(--revealer);
-webkit-mask-repeat : no-repeat; -webkit-mask-repeat : no-repeat;
-webkit-mask-size : 100% 100%; //Scale both dimensions to fit page size -webkit-mask-size : 100% 100%; //Scale both dimensions to fit page size
@@ -312,14 +287,13 @@ body {
mask-repeat : no-repeat; mask-repeat : no-repeat;
mask-size : 100% 100%; //Scale both dimensions to fit page size mask-size : 100% 100%; //Scale both dimensions to fit page size
mask-position : 50% 50%; mask-position : 50% 50%;
transform : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
& > p:has(img) { & > p:has(img) {
position : absolute; position : absolute;
width : 100%;
height : 100%;
bottom : 0; bottom : 0;
left : 0; left : 0;
width : 100%;
height : 100%;
transform : unset; transform : unset;
transform : scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY))) transform : scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY)))
rotate(calc(-1deg * var(--rotation))) rotate(calc(-1deg * var(--rotation)))
@@ -329,31 +303,32 @@ body {
} }
.imageMaskCenter { .imageMaskCenter {
&1 { --wc : url(/assets/waterColorMasks/center/0001.webp); } &1 { --wc : url("/assets/waterColorMasks/center/0001.webp"); }
&2 { --wc : url(/assets/waterColorMasks/center/0002.webp); } &2 { --wc : url("/assets/waterColorMasks/center/0002.webp"); }
&3 { --wc : url(/assets/waterColorMasks/center/0003.webp); } &3 { --wc : url("/assets/waterColorMasks/center/0003.webp"); }
&4 { --wc : url(/assets/waterColorMasks/center/0004.webp); } &4 { --wc : url("/assets/waterColorMasks/center/0004.webp"); }
&5 { --wc : url(/assets/waterColorMasks/center/0005.webp); } &5 { --wc : url("/assets/waterColorMasks/center/0005.webp"); }
&6 { --wc : url(/assets/waterColorMasks/center/0006.webp); } &6 { --wc : url("/assets/waterColorMasks/center/0006.webp"); }
&7 { --wc : url(/assets/waterColorMasks/center/0007.webp); } &7 { --wc : url("/assets/waterColorMasks/center/0007.webp"); }
&8 { --wc : url(/assets/waterColorMasks/center/0008.webp); } &8 { --wc : url("/assets/waterColorMasks/center/0008.webp"); }
&9 { --wc : url(/assets/waterColorMasks/center/0009.webp); } &9 { --wc : url("/assets/waterColorMasks/center/0009.webp"); }
&10 { --wc : url(/assets/waterColorMasks/center/0010.webp); } &10 { --wc : url("/assets/waterColorMasks/center/0010.webp"); }
&11 { --wc : url(/assets/waterColorMasks/center/0011.webp); } &11 { --wc : url("/assets/waterColorMasks/center/0011.webp"); }
&12 { --wc : url(/assets/waterColorMasks/center/0012.webp); } &12 { --wc : url("/assets/waterColorMasks/center/0012.webp"); }
&13 { --wc : url(/assets/waterColorMasks/center/0013.webp); } &13 { --wc : url("/assets/waterColorMasks/center/0013.webp"); }
&14 { --wc : url(/assets/waterColorMasks/center/0014.webp); } &14 { --wc : url("/assets/waterColorMasks/center/0014.webp"); }
&15 { --wc : url(/assets/waterColorMasks/center/0015.webp); } &15 { --wc : url("/assets/waterColorMasks/center/0015.webp"); }
&16 { --wc : url(/assets/waterColorMasks/center/0016.webp); } &16 { --wc : url("/assets/waterColorMasks/center/0016.webp"); }
&special { --wc : url(/assets/waterColorMasks/center/special.webp); } &special { --wc : url("/assets/waterColorMasks/center/special.webp"); }
} }
[class*="imageMaskCorner"] { [class*='imageMaskCorner'] {
height : 200%;
width : 200%;
left : calc(-50% + var(--offsetX));
bottom : calc(-50% + var(--offsetY)); 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-image : var(--wc), var(--revealer);
-webkit-mask-repeat : no-repeat; -webkit-mask-repeat : no-repeat;
-webkit-mask-size : 100% 100%; //Scale both dimensions to fit page size -webkit-mask-size : 100% 100%; //Scale both dimensions to fit page size
@@ -362,12 +337,11 @@ body {
mask-repeat : no-repeat; mask-repeat : no-repeat;
mask-size : 100% 100%; //Scale both dimensions to fit page size mask-size : 100% 100%; //Scale both dimensions to fit page size
mask-position : 50% 50%; mask-position : 50% 50%;
transform : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
& > p:has(img) { & > p:has(img) {
bottom : 25%;
left : 25%;
width : 50%; width : 50%;
height : 50%; //Complex transform below to handle mix of % and cm offsets height : 50%; //Complex transform below to handle mix of % and cm offsets
left : 25%;
bottom : 25%;
transform : scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY))) transform : scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY)))
rotate(calc(-1deg * var(--rotation))) rotate(calc(-1deg * var(--rotation)))
translateX(calc(-1 * var(--offsetX))) translateX(calc(-1 * var(--offsetX)))
@@ -375,43 +349,43 @@ body {
} }
} }
.imageMaskCorner { .imageMaskCorner {
&1 { --wc : url(/assets/waterColorMasks/corner/0001.webp); } &1 { --wc : url("/assets/waterColorMasks/corner/0001.webp"); }
&2 { --wc : url(/assets/waterColorMasks/corner/0002.webp); } &2 { --wc : url("/assets/waterColorMasks/corner/0002.webp"); }
&3 { --wc : url(/assets/waterColorMasks/corner/0003.webp); } &3 { --wc : url("/assets/waterColorMasks/corner/0003.webp"); }
&4 { --wc : url(/assets/waterColorMasks/corner/0004.webp); } &4 { --wc : url("/assets/waterColorMasks/corner/0004.webp"); }
&5 { --wc : url(/assets/waterColorMasks/corner/0005.webp); } &5 { --wc : url("/assets/waterColorMasks/corner/0005.webp"); }
&6 { --wc : url(/assets/waterColorMasks/corner/0006.webp); } &6 { --wc : url("/assets/waterColorMasks/corner/0006.webp"); }
&7 { --wc : url(/assets/waterColorMasks/corner/0007.webp); } &7 { --wc : url("/assets/waterColorMasks/corner/0007.webp"); }
&8 { --wc : url(/assets/waterColorMasks/corner/0008.webp); } &8 { --wc : url("/assets/waterColorMasks/corner/0008.webp"); }
&9 { --wc : url(/assets/waterColorMasks/corner/0009.webp); } &9 { --wc : url("/assets/waterColorMasks/corner/0009.webp"); }
&10 { --wc : url(/assets/waterColorMasks/corner/0010.webp); } &10 { --wc : url("/assets/waterColorMasks/corner/0010.webp"); }
&11 { --wc : url(/assets/waterColorMasks/corner/0011.webp); } &11 { --wc : url("/assets/waterColorMasks/corner/0011.webp"); }
&12 { --wc : url(/assets/waterColorMasks/corner/0012.webp); } &12 { --wc : url("/assets/waterColorMasks/corner/0012.webp"); }
&13 { --wc : url(/assets/waterColorMasks/corner/0013.webp); } &13 { --wc : url("/assets/waterColorMasks/corner/0013.webp"); }
&14 { --wc : url(/assets/waterColorMasks/corner/0014.webp); } &14 { --wc : url("/assets/waterColorMasks/corner/0014.webp"); }
&15 { --wc : url(/assets/waterColorMasks/corner/0015.webp); } &15 { --wc : url("/assets/waterColorMasks/corner/0015.webp"); }
&16 { --wc : url(/assets/waterColorMasks/corner/0016.webp); } &16 { --wc : url("/assets/waterColorMasks/corner/0016.webp"); }
&17 { --wc : url(/assets/waterColorMasks/corner/0017.webp); } &17 { --wc : url("/assets/waterColorMasks/corner/0017.webp"); }
&18 { --wc : url(/assets/waterColorMasks/corner/0018.webp); } &18 { --wc : url("/assets/waterColorMasks/corner/0018.webp"); }
&19 { --wc : url(/assets/waterColorMasks/corner/0019.webp); } &19 { --wc : url("/assets/waterColorMasks/corner/0019.webp"); }
&20 { --wc : url(/assets/waterColorMasks/corner/0020.webp); } &20 { --wc : url("/assets/waterColorMasks/corner/0020.webp"); }
&21 { --wc : url(/assets/waterColorMasks/corner/0021.webp); } &21 { --wc : url("/assets/waterColorMasks/corner/0021.webp"); }
&22 { --wc : url(/assets/waterColorMasks/corner/0022.webp); } &22 { --wc : url("/assets/waterColorMasks/corner/0022.webp"); }
&23 { --wc : url(/assets/waterColorMasks/corner/0023.webp); } &23 { --wc : url("/assets/waterColorMasks/corner/0023.webp"); }
&24 { --wc : url(/assets/waterColorMasks/corner/0024.webp); } &24 { --wc : url("/assets/waterColorMasks/corner/0024.webp"); }
&25 { --wc : url(/assets/waterColorMasks/corner/0025.webp); } &25 { --wc : url("/assets/waterColorMasks/corner/0025.webp"); }
&26 { --wc : url(/assets/waterColorMasks/corner/0026.webp); } &26 { --wc : url("/assets/waterColorMasks/corner/0026.webp"); }
&27 { --wc : url(/assets/waterColorMasks/corner/0027.webp); } &27 { --wc : url("/assets/waterColorMasks/corner/0027.webp"); }
&28 { --wc : url(/assets/waterColorMasks/corner/0028.webp); } &28 { --wc : url("/assets/waterColorMasks/corner/0028.webp"); }
&29 { --wc : url(/assets/waterColorMasks/corner/0029.webp); } &29 { --wc : url("/assets/waterColorMasks/corner/0029.webp"); }
&30 { --wc : url(/assets/waterColorMasks/corner/0030.webp); } &30 { --wc : url("/assets/waterColorMasks/corner/0030.webp"); }
&31 { --wc : url(/assets/waterColorMasks/corner/0031.webp); } &31 { --wc : url("/assets/waterColorMasks/corner/0031.webp"); }
&32 { --wc : url(/assets/waterColorMasks/corner/0032.webp); } &32 { --wc : url("/assets/waterColorMasks/corner/0032.webp"); }
&33 { --wc : url(/assets/waterColorMasks/corner/0033.webp); } &33 { --wc : url("/assets/waterColorMasks/corner/0033.webp"); }
&34 { --wc : url(/assets/waterColorMasks/corner/0034.webp); } &34 { --wc : url("/assets/waterColorMasks/corner/0034.webp"); }
&35 { --wc : url(/assets/waterColorMasks/corner/0035.webp); } &35 { --wc : url("/assets/waterColorMasks/corner/0035.webp"); }
&36 { --wc : url(/assets/waterColorMasks/corner/0036.webp); } &36 { --wc : url("/assets/waterColorMasks/corner/0036.webp"); }
&37 { --wc : url(/assets/waterColorMasks/corner/0037.webp); } &37 { --wc : url("/assets/waterColorMasks/corner/0037.webp"); }
} }
} }
@@ -442,9 +416,7 @@ body {
.blank { .blank {
height : 1em; height : 1em;
margin-top : 0; margin-top : 0;
& + * { & + * { margin-top : 0; }
margin-top : 0;
}
} }
} }
@@ -456,8 +428,35 @@ body {
column-span : all; column-span : all;
display : block; display : block;
margin-bottom : 1em; margin-bottom : 1em;
&+* { & + * { margin-top : 0; }
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%); }
} }