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

Merge branch 'master' into pr/3078

Browse Source
This commit is contained in:
Trevor Buckner
2023-12-11 15:13:39 -05:00
parent 5c5230e64e e7d0741139
commit 75ed555de1
4 changed files with 234 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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",

4
package.json
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",

15
themes/V3/Blank/snippets.js
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`;
},
}
] ]
}, },
{ {

417
themes/V3/Blank/style.less
View File

@@ -7,13 +7,9 @@
--HB_Color_WatercolorStain : #000000; // Black --HB_Color_WatercolorStain : #000000; // Black
} }
@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;
@@ -33,97 +27,81 @@ body {
} }
} }
.useColumns(@multiplier : 1, @fillMode: auto){ .useColumns(@multiplier : 1, @fillMode: auto) {
column-fill : @fillMode; column-fill : @fillMode;
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;
} }
//***************************** //*****************************
// * BASE // * BASE
// *****************************/ // *****************************/
.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; }
} sup {
em{ font-size : smaller;
font-style : italic; line-height : 0;
}
sup{
vertical-align : super; vertical-align : super;
font-size : smaller;
line-height : 0;
} }
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
// *****************************/ // *****************************/
h1,h2,h3,h4,h5,h6{ h1,h2,h3,h4,h5,h6 {
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
// *****************************/ // *****************************/
table{ table {
width : 100%; width : 100%;
thead{ thead {
display : table-row-group; display : table-row-group;
font-weight : bold; font-weight : bold;
} }
@@ -135,42 +113,40 @@ 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 {
z-index : 15; z-index : 15;
-webkit-column-break-inside : avoid; -webkit-column-break-inside : avoid;
page-break-inside : avoid; page-break-inside : avoid;
break-inside : avoid; break-inside : avoid;
} }
// Nested lists // Nested lists
ul ul,ol ol,ul ol,ol ul{ ul ul,ol ol,ul ol,ol ul {
margin-bottom : 0px; margin-bottom : 0px;
margin-left : 1.5em; margin-left : 1.5em;
} }
li{ li {
-webkit-column-break-inside : avoid; -webkit-column-break-inside : avoid;
page-break-inside : avoid; page-break-inside : avoid;
break-inside : avoid; break-inside : avoid;
@@ -178,69 +154,66 @@ body {
/* Watermark */ /* Watermark */
.watermark { .watermark {
display : grid !important;
place-items : center;
justify-content : center;
position : absolute; position : absolute;
margin : 0;
top : 0; top : 0;
left : 0; left : 0;
z-index : 500;
display : grid !important;
place-items : center;
justify-content : center;
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; --wc : @watercolor1; /* default image */
background-color : var(--HB_Color_WatercolorStain); /*default color*/
--wc : @watercolor1; /*default image*/
z-index : -2;
} }
.watercolor1 { --wc : @watercolor1; } .watercolor1 { --wc : @watercolor1; }
.watercolor2 { --wc : @watercolor2; } .watercolor2 { --wc : @watercolor2; }
.watercolor3 { --wc : @watercolor3; } .watercolor3 { --wc : @watercolor3; }
.watercolor4 { --wc : @watercolor4; } .watercolor4 { --wc : @watercolor4; }
.watercolor5 { --wc : @watercolor5; } .watercolor5 { --wc : @watercolor5; }
.watercolor6 { --wc : @watercolor6; } .watercolor6 { --wc : @watercolor6; }
.watercolor7 { --wc : @watercolor7; } .watercolor7 { --wc : @watercolor7; }
.watercolor8 { --wc : @watercolor8; } .watercolor8 { --wc : @watercolor8; }
.watercolor9 { --wc : @watercolor9; } .watercolor9 { --wc : @watercolor9; }
.watercolor10 { --wc : @watercolor10; } .watercolor10 { --wc : @watercolor10; }
.watercolor11 { --wc : @watercolor11; } .watercolor11 { --wc : @watercolor11; }
.watercolor12 { --wc : @watercolor12; } .watercolor12 { --wc : @watercolor12; }
/* 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,61 +222,63 @@ 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;
& img {bottom: 0;} & img {bottom : 0;}
} }
&.top { &.top {
--rotation : 180; --rotation : 180;
& img {top: 0;} & img {top : 0;}
} }
&.left { &.left {
--rotation : 90; --rotation : 90;
& img {left: 0;} & img {left : 0;}
} }
&.right { &.right {
--rotation : -90; --rotation : -90;
& 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,48 +287,48 @@ 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)))
translateX(calc(-1 * var(--offsetX))) translateX(calc(-1 * var(--offsetX)))
translateY(calc(1 * var(--offsetY))); translateY(calc(1 * var(--offsetY)));
} }
} }
.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,56 +337,55 @@ 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)))
translateY(calc(1 * var(--offsetY))); translateY(calc(1 * var(--offsetY)));
} }
} }
.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"); }
} }
} }
@@ -423,16 +397,16 @@ body {
padding-left : 1em; padding-left : 1em;
white-space : pre-line; white-space : pre-line;
} }
dt { dt {
display : inline; display : inline;
margin-right : 0.5ch; margin-right : 0.5ch;
margin-left : -1em; margin-left : -1em;
} }
dd { dd {
display : inline; display : inline;
margin-left : 0; margin-left : 0;
text-indent : 0; text-indent : 0;
} }
} }
//***************************** //*****************************
@@ -442,9 +416,7 @@ body {
.blank { .blank {
height : 1em; height : 1em;
margin-top : 0; margin-top : 0;
& + * { & + * { margin-top : 0; }
margin-top : 0;
}
} }
} }
@@ -452,12 +424,39 @@ body {
// * WIDE // * WIDE
// *****************************/ // *****************************/
.page { .page {
.wide{ .wide {
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%); }
}