f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-27 09:22:44 +00:00
Code Wiki Activity

Merge upstream 'master' into back-cover-snippet

Browse Source
This commit is contained in:
Victor Losada Hernandez
2023-03-01 17:10:34 +01:00
parent a5a59ac058 cc89ad1c7d
commit 9b4577c65b
14 changed files with 611 additions and 476 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
changelog.md
View File

@@ -1,4 +1,23 @@
```css
.beta {
color : white;
padding : 4px 6px;
line-height : 1em;
background : grey;
border-radius : 12px;
font-family : monospace;
font-size : 10px;
font-weight : 800;
margin-top : -5px;
margin-bottom : -5px;
}
.fac {
height: 1em;
line-height: 2em;
margin-bottom: -0.05cm
}
h5 {
font-size: .35cm !important;
}
@@ -61,6 +80,32 @@ pre {
## changelog
For a full record of development, visit our [Github Page](https://github.com/naturalcrit/homebrewery).
### Tuesday 28/02/2023 - v3.7.0
{{taskList
{{note
**NOTE:** Some new snippets will now show a {{beta BETA}} tag. Feel free to use them, but be aware we may change how they work depending on your feedback.
}}
##### Calculuschild
* [x] New {{openSans **IMAGES → WATERCOLOR EDGE** {{fac,mask-edge}} }} and {{openSans **WATERCOLOR CORNER** {{fac,mask-corner}} }} snippets for V3, which adds a stylish watercolor texture to the edge of your images! (Thanks to /u/flamableconcrete on Reddit for providing these image masks!)
* [x] Fix site not displaying on iOS devices
##### 5e-Cleric
* [x] New {{openSans **PHB → COVER PAGE** {{fac,book-front-cover}} }} snippet for V3, which adds a stylish coverpage to your brew! (Thanks to /u/Kaiburr_Kath-Hound on Reddit for providing some of these resources!)
##### MichielDeMey (new contribuor!)
* [x] Fix typo in testing scripts
* [x] Fix "mug" image not using HTTPS
Fixes issues [#2687](https://github.com/naturalcrit/homebrewery/issues/2687)
}}
### Saturday 18/02/2023 - v3.6.1
{{taskList
##### G-Ambatte
@@ -71,7 +116,7 @@ Fixes issues [#2674](https://github.com/naturalcrit/homebrewery/issues/2674)
}}
### Friday 23/01/2023 - v3.6.0
### Monday 23/01/2023 - v3.6.0
{{taskList
##### calculuschild
@@ -96,6 +141,8 @@ Fixes issues [#2583](https://github.com/naturalcrit/homebrewery/issues/2583)
* [x] Fix cloned brews inheriting the parent view count
}}
\column
### Friday 23/12/2022 - v3.5.0
{{taskList

3
client/homebrew/editor/snippetbar/snippetbar.jsx
View File

@@ -171,7 +171,8 @@ const SnippetGroup = createClass({
return _.map(snippets, (snippet)=>{
return <div className='snippet' key={snippet.name} onClick={(e)=>this.handleSnippetClick(e, snippet)}>
<i className={snippet.icon} />
{snippet.name}
<span className='name'>{snippet.name}</span>
{snippet.experimental && <span className='beta'>beta</span>}
{snippet.subsnippets && <>
<i className='fas fa-caret-right'></i>
<div className='dropdown side'>

25
client/homebrew/editor/snippetbar/snippetbar.less
View File

@@ -97,19 +97,34 @@
background-color : #ddd;
.snippet{
.animate(background-color);
min-width : max-content;
padding : 5px;
cursor : pointer;
font-size : 10px;
display : flex;
align-items : center;
min-width : max-content;
padding : 5px;
cursor : pointer;
font-size : 10px;
i{
margin-right : 8px;
font-size : 1.2em;
height : 1.2em;
&~i{
margin-right: 0;
margin-left: 8px;
margin-left: 5px;
}
}
.name {
margin-right : auto;
}
.beta {
color : white;
padding : 4px 6px;
line-height : 1em;
margin-left : 5px;
align-self : center;
background : grey;
border-radius : 12px;
font-family : monospace;
}
&:hover{
background-color : #999;
&>.dropdown{

2
client/homebrew/pages/basePages/listPage/listPage.jsx
View File

@@ -219,7 +219,7 @@ const ListPage = createClass({
render : function(){
return <div className='listPage sitePage'>
<style>@layer V3_5ePHB, bundle;</style>
//<style>@layer V3_5ePHB, bundle;</style>
<link href='/themes/V3/5ePHB/style.css' rel='stylesheet'/>
{this.props.navItems}
{this.renderSortOptions()}

2
client/homebrew/pages/homePage/welcome_msg.md
View File

@@ -36,7 +36,7 @@ After clicking the "Print" item in the navbar a new page will open and a print d
If you want to save ink or have a monochrome printer, add the **PRINT → {{fas,fa-tint}} Ink Friendly** snippet to your brew!
}}
![homebrew mug](http://i.imgur.com/hMna6G0.png) {position:absolute,bottom:20px,left:130px,width:220px}
![homebrew mug](https://i.imgur.com/hMna6G0.png) {position:absolute,bottom:20px,left:130px,width:220px}
{{artist,bottom:160px,left:100px
##### Homebrew Mug

48
client/icons/book-front-cover.svg Normal file
View File

@@ -0,0 +1,48 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
viewBox="0 0 541.53217 512"
version="1.1"
id="svg22127"
sodipodi:docname="book-front-cover.svg"
width="541.53217"
height="512"
inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs22131" />
<sodipodi:namedview
id="namedview22129"
pagecolor="#ffffff"
bordercolor="#111111"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="1"
inkscape:deskcolor="#d1d1d1"
showgrid="false"
inkscape:zoom="0.39257813"
inkscape:cx="-263.64179"
inkscape:cy="444.49751"
inkscape:window-width="1920"
inkscape:window-height="991"
inkscape:window-x="-9"
inkscape:window-y="-9"
inkscape:window-maximized="1"
inkscape:current-layer="svg22127" />
<!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<g
id="g20308"
transform="matrix(3.7795276,0,0,3.7795276,-201.76367,-251.58203)">
<path
id="rect20232"
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:17.9;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill;stop-color:#000000"
d="m 78.783305,66.564412 c -14.022889,0 -25.4,11.377111 -25.4,25.4 v 84.666668 c 0,14.02289 11.377111,25.4 25.4,25.4 h 76.199995 8.46667 c 4.68312,0 8.46667,-3.78355 8.46667,-8.46667 0,-4.68311 -3.78355,-8.46666 -8.46667,-8.46666 v -16.93334 c 4.68312,0 8.46667,-3.78355 8.46667,-8.46666 v -1.9327 c -0.0322,-0.27545 -0.0652,-0.54693 -0.0946,-0.83923 -0.17511,-1.74441 -0.30542,-3.81626 -0.37672,-6.02909 -0.18285,-5.67612 -0.29322,-5.86808 -0.63459,-6.62698 -0.74838,-1.66366 -2.65792,-3.64941 -4.38681,-4.49844 -1.41973,-0.69716 -0.72585,-0.45434 -1.20923,-0.51934 -0.47548,-0.0639 -2.54581,-0.13856 -6.47454,-0.14056 -0.0907,2.9929 -0.0862,4.81682 -0.58601,7.244 -0.28023,1.36071 -0.97957,3.42078 -2.40812,5.10356 -1.42519,1.67884 -2.81498,2.35811 -3.28145,2.61896 -3.14428,1.76375 -5.09549,2.43427 -9.41597,1.33997 -2.05224,-0.5197 -2.32631,-0.92288 -2.76159,-1.19527 -0.43528,-0.27239 -0.71007,-0.47684 -0.97461,-0.67593 -0.52909,-0.39816 -0.97871,-0.77171 -1.48622,-1.20664 -1.015,-0.86987 -2.20927,-1.95397 -3.6096,-3.26182 -2.80065,-2.61568 -6.38094,-6.09226 -10.18335,-9.90844 -6.19117,-6.21357 -9.5466,-9.59164 -11.7874,-12.16412 -1.1204,-1.28623 -2.03413,-2.38181 -2.90576,-4.03127 -0.87162,-1.64948 -1.40664,-4.21493 -1.40664,-5.61103 0,-1.4012 0.54783,-3.99366 1.42989,-5.64668 0.88206,-1.65304 1.8039,-2.74855 2.94142,-4.04679 2.27504,-2.59646 5.70131,-6.03358 12.03699,-12.369267 7.37691,-7.376888 10.87768,-11.090687 14.75208,-13.810527 1.45289,-1.019939 3.46378,-2.249133 6.08386,-2.580204 0.87337,-0.110323 1.8133,-0.120299 2.82412,0.0098 4.0433,0.520471 6.12413,2.832857 7.01973,3.728454 1.29782,1.297845 3.1373,4.826955 3.46852,7.049182 0.29817,2.00025 0.26393,3.770666 0.25993,6.212541 0.57954,0.0034 0.50388,0.0217 1.17564,0.0217 4.54211,0 8.44363,0.111537 11.991,0.50953 v -21.41004 c 0,-4.683115 -3.78355,-8.466667 -8.46667,-8.466667 h -8.46667 z m 0,101.599998 h 67.733335 v 16.93334 H 78.783305 c -4.683115,0 -8.466667,-3.78357 -8.466667,-8.46667 0,-4.68313 3.783552,-8.46667 8.466667,-8.46667 z" />
<path
style="color:#000000;fill:#000000;stroke-width:17.9;stroke-linejoin:round;-inkscape-stroke:none;paint-order:stroke markers fill"
d="m 186.69094,157.95633 c 2.67243,-2.24871 7.17957,-9.39389 8.63888,-13.69528 1.03796,-3.05942 1.31928,-5.13546 1.33362,-9.84167 0.0278,-9.1246 -2.25302,-14.5915 -8.79325,-21.07662 -6.8535,-6.79576 -12.35348,-8.46107 -27.94423,-8.46107 -8.05417,0 -9.45684,-0.12924 -9.75203,-0.89852 -0.18964,-0.49417 -0.34479,-3.81715 -0.34479,-7.384389 0,-5.728497 -0.13266,-6.618534 -1.13607,-7.621956 -2.57777,-2.57775 -3.29907,-2.07141 -18.02212,12.651595 -12.64444,12.64444 -13.78771,13.94921 -13.78771,15.73575 0,1.78396 1.13629,3.08846 13.49078,15.48766 7.47518,7.50224 14.10644,13.69554 14.8715,13.88928 0.78576,0.19902 2.0096,-0.002 2.84016,-0.46789 1.42969,-0.80092 1.46523,-0.97351 1.74346,-8.46583 l 0.28402,-7.64825 h 8.52049 c 8.16738,0 8.65373,0.0655 11.73586,1.579 3.72428,1.82893 6.9202,5.12058 8.60236,8.86006 0.94352,2.09748 1.22898,4.1112 1.41901,10.01012 0.13083,4.06143 0.49647,7.70394 0.81253,8.09446 0.94895,1.17251 3.64241,0.80611 5.48753,-0.74645 z"
id="path20297" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

10
client/icons/customIcons.less
View File

@@ -31,9 +31,15 @@
.mask-corner {
content: url('../icons/mask-corner.svg');
}
.fa-file-c {
content: url('../icons/fa-file-c.svg');
.book-front-cover {
content: url('../icons/book-front-cover.svg');
}
.fa-file-b {
content: url('../icons/fa-file-b.svg');
}
.fa-file-b {
content: url('../icons/fa-file-b.svg');
}
.book-front-cover {
content: url('../icons/book-front-cover.svg');
}

141
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "homebrewery",
"version": "3.6.1",
"version": "3.7.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "homebrewery",
"version": "3.6.1",
"version": "3.7.0",
"hasInstallScript": true,
"license": "MIT",
"dependencies": {
@@ -40,13 +40,13 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-frame-component": "4.1.3",
"react-router-dom": "6.8.1",
"react-router-dom": "6.8.2",
"sanitize-filename": "1.6.3",
"superagent": "^6.1.0",
"vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
},
"devDependencies": {
"eslint": "^8.34.0",
"eslint": "^8.35.0",
"eslint-plugin-react": "^7.32.2",
"jest": "^29.4.3",
"supertest": "^6.3.3"
@@ -3119,9 +3119,9 @@
"dev": true
},
"node_modules/@eslint/eslintrc": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.1.tgz",
"integrity": "sha512-XXrH9Uarn0stsyldqDYq8r++mROmWRI1xKMXa640Bb//SY1+ECYX6VzT6Lcx5frD0V30XieqJ0oX9I2Xj5aoMA==",
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.0.0.tgz",
"integrity": "sha512-fluIaaV+GyV24CCu/ggiHdV+j4RNh85yQnAYS/G2mZODZgGmmlrgCydjUcV3YvxCm9x8nMAfThsqTni4KiXT4A==",
"dev": true,
"dependencies": {
"ajv": "^6.12.4",
@@ -3142,9 +3142,9 @@
}
},
"node_modules/@eslint/eslintrc/node_modules/globals": {
"version": "13.19.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-13.19.0.tgz",
"integrity": "sha512-dkQ957uSRWHw7CFXLUtUHQI3g3aWApYhfNR2O6jn/907riyTYKVBmxYVROkBcY614FSSeSJh7Xm7SrUWCxvJMQ==",
"version": "13.20.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
"integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==",
"dev": true,
"dependencies": {
"type-fest": "^0.20.2"
@@ -3168,6 +3168,15 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@eslint/js": {
"version": "8.35.0",
"resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.35.0.tgz",
"integrity": "sha512-JXdzbRiWclLVoD8sNUjR443VVlYqiYmDVT6rGUEIEHU5YJW0gaVZwV2xgM7D4arkvASqD0IlLUVjHiFuxaftRw==",
"dev": true,
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
}
},
"node_modules/@humanwhocodes/config-array": {
"version": "0.11.8",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
@@ -4021,9 +4030,9 @@
}
},
"node_modules/@remix-run/router": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.2.tgz",
"integrity": "sha512-t54ONhl/h75X94SWsHGQ4G/ZrCEguKSRQr7DrjTciJXW0YU1QhlwYeycvK5JgkzlxmvrK7wq1NB/PLtHxoiDcA==",
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.3.tgz",
"integrity": "sha512-YRHie1yQEj0kqqCTCJEfHqYSSNlZQ696QJG+MMiW4mxSl9I0ojz/eRhJS4fs88Z5i6D1SmoF9d3K99/QOhI8/w==",
"engines": {
"node": ">=14"
}
@@ -4190,9 +4199,9 @@
}
},
"node_modules/acorn": {
"version": "8.8.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz",
"integrity": "sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==",
"version": "8.8.2",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
"integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
"dev": true,
"bin": {
"acorn": "bin/acorn"
@@ -6187,12 +6196,13 @@
}
},
"node_modules/eslint": {
"version": "8.34.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.34.0.tgz",
"integrity": "sha512-1Z8iFsucw+7kSqXNZVslXS8Ioa4u2KM7GPwuKtkTFAqZ/cHMcEaR+1+Br0wLlot49cNxIiZk5wp8EAbPcYZxTg==",
"version": "8.35.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.35.0.tgz",
"integrity": "sha512-BxAf1fVL7w+JLRQhWl2pzGeSiGqbWumV4WNvc9Rhp6tiCtm4oHnyPBSEtMGZwrQgudFQ+otqzWoPB7x+hxoWsw==",
"dev": true,
"dependencies": {
"@eslint/eslintrc": "^1.4.1",
"@eslint/eslintrc": "^2.0.0",
"@eslint/js": "8.35.0",
"@humanwhocodes/config-array": "^0.11.8",
"@humanwhocodes/module-importer": "^1.0.1",
"@nodelib/fs.walk": "^1.2.8",
@@ -6206,7 +6216,7 @@
"eslint-utils": "^3.0.0",
"eslint-visitor-keys": "^3.3.0",
"espree": "^9.4.0",
"esquery": "^1.4.0",
"esquery": "^1.4.2",
"esutils": "^2.0.2",
"fast-deep-equal": "^3.1.3",
"file-entry-cache": "^6.0.1",
@@ -6489,9 +6499,9 @@
}
},
"node_modules/esquery": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz",
"integrity": "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==",
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.2.tgz",
"integrity": "sha512-JVSoLdTlTDkmjFmab7H/9SL9qGSyjElT3myyKp7krqjVFQCDLmj1QFaCLRFBszBKI0XVZaiiXvuPIX3ZwHe1Ng==",
"dev": true,
"dependencies": {
"estraverse": "^5.1.0"
@@ -13958,11 +13968,11 @@
"dev": true
},
"node_modules/react-router": {
"version": "6.8.1",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.8.1.tgz",
"integrity": "sha512-Jgi8BzAJQ8MkPt8ipXnR73rnD7EmZ0HFFb7jdQU24TynGW1Ooqin2KVDN9voSC+7xhqbbCd2cjGUepb6RObnyg==",
"version": "6.8.2",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.8.2.tgz",
"integrity": "sha512-lF7S0UmXI5Pd8bmHvMdPKI4u4S5McxmHnzJhrYi9ZQ6wE+DA8JN5BzVC5EEBuduWWDaiJ8u6YhVOCmThBli+rw==",
"dependencies": {
"@remix-run/router": "1.3.2"
"@remix-run/router": "1.3.3"
},
"engines": {
"node": ">=14"
@@ -13972,12 +13982,12 @@
}
},
"node_modules/react-router-dom": {
"version": "6.8.1",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.8.1.tgz",
"integrity": "sha512-67EXNfkQgf34P7+PSb6VlBuaacGhkKn3kpE51+P6zYSG2kiRoumXEL6e27zTa9+PGF2MNXbgIUHTVlleLbIcHQ==",
"version": "6.8.2",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.8.2.tgz",
"integrity": "sha512-N/oAF1Shd7g4tWy+75IIufCGsHBqT74tnzHQhbiUTYILYF0Blk65cg+HPZqwC+6SqEyx033nKqU7by38v3lBZg==",
"dependencies": {
"@remix-run/router": "1.3.2",
"react-router": "6.8.1"
"@remix-run/router": "1.3.3",
"react-router": "6.8.2"
},
"engines": {
"node": ">=14"
@@ -18993,9 +19003,9 @@
"dev": true
},
"@eslint/eslintrc": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.1.tgz",
"integrity": "sha512-XXrH9Uarn0stsyldqDYq8r++mROmWRI1xKMXa640Bb//SY1+ECYX6VzT6Lcx5frD0V30XieqJ0oX9I2Xj5aoMA==",
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.0.0.tgz",
"integrity": "sha512-fluIaaV+GyV24CCu/ggiHdV+j4RNh85yQnAYS/G2mZODZgGmmlrgCydjUcV3YvxCm9x8nMAfThsqTni4KiXT4A==",
"dev": true,
"requires": {
"ajv": "^6.12.4",
@@ -19010,9 +19020,9 @@
},
"dependencies": {
"globals": {
"version": "13.19.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-13.19.0.tgz",
"integrity": "sha512-dkQ957uSRWHw7CFXLUtUHQI3g3aWApYhfNR2O6jn/907riyTYKVBmxYVROkBcY614FSSeSJh7Xm7SrUWCxvJMQ==",
"version": "13.20.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
"integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==",
"dev": true,
"requires": {
"type-fest": "^0.20.2"
@@ -19026,6 +19036,12 @@
}
}
},
"@eslint/js": {
"version": "8.35.0",
"resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.35.0.tgz",
"integrity": "sha512-JXdzbRiWclLVoD8sNUjR443VVlYqiYmDVT6rGUEIEHU5YJW0gaVZwV2xgM7D4arkvASqD0IlLUVjHiFuxaftRw==",
"dev": true
},
"@humanwhocodes/config-array": {
"version": "0.11.8",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
@@ -19673,9 +19689,9 @@
}
},
"@remix-run/router": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.2.tgz",
"integrity": "sha512-t54ONhl/h75X94SWsHGQ4G/ZrCEguKSRQr7DrjTciJXW0YU1QhlwYeycvK5JgkzlxmvrK7wq1NB/PLtHxoiDcA=="
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.3.tgz",
"integrity": "sha512-YRHie1yQEj0kqqCTCJEfHqYSSNlZQ696QJG+MMiW4mxSl9I0ojz/eRhJS4fs88Z5i6D1SmoF9d3K99/QOhI8/w=="
},
"@sinclair/typebox": {
"version": "0.25.22",
@@ -19836,9 +19852,9 @@
}
},
"acorn": {
"version": "8.8.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz",
"integrity": "sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==",
"version": "8.8.2",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
"integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
"dev": true
},
"acorn-jsx": {
@@ -21457,12 +21473,13 @@
"integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
},
"eslint": {
"version": "8.34.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.34.0.tgz",
"integrity": "sha512-1Z8iFsucw+7kSqXNZVslXS8Ioa4u2KM7GPwuKtkTFAqZ/cHMcEaR+1+Br0wLlot49cNxIiZk5wp8EAbPcYZxTg==",
"version": "8.35.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.35.0.tgz",
"integrity": "sha512-BxAf1fVL7w+JLRQhWl2pzGeSiGqbWumV4WNvc9Rhp6tiCtm4oHnyPBSEtMGZwrQgudFQ+otqzWoPB7x+hxoWsw==",
"dev": true,
"requires": {
"@eslint/eslintrc": "^1.4.1",
"@eslint/eslintrc": "^2.0.0",
"@eslint/js": "8.35.0",
"@humanwhocodes/config-array": "^0.11.8",
"@humanwhocodes/module-importer": "^1.0.1",
"@nodelib/fs.walk": "^1.2.8",
@@ -21476,7 +21493,7 @@
"eslint-utils": "^3.0.0",
"eslint-visitor-keys": "^3.3.0",
"espree": "^9.4.0",
"esquery": "^1.4.0",
"esquery": "^1.4.2",
"esutils": "^2.0.2",
"fast-deep-equal": "^3.1.3",
"file-entry-cache": "^6.0.1",
@@ -21671,9 +21688,9 @@
"dev": true
},
"esquery": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz",
"integrity": "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==",
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.2.tgz",
"integrity": "sha512-JVSoLdTlTDkmjFmab7H/9SL9qGSyjElT3myyKp7krqjVFQCDLmj1QFaCLRFBszBKI0XVZaiiXvuPIX3ZwHe1Ng==",
"dev": true,
"requires": {
"estraverse": "^5.1.0"
@@ -27107,20 +27124,20 @@
"dev": true
},
"react-router": {
"version": "6.8.1",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.8.1.tgz",
"integrity": "sha512-Jgi8BzAJQ8MkPt8ipXnR73rnD7EmZ0HFFb7jdQU24TynGW1Ooqin2KVDN9voSC+7xhqbbCd2cjGUepb6RObnyg==",
"version": "6.8.2",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.8.2.tgz",
"integrity": "sha512-lF7S0UmXI5Pd8bmHvMdPKI4u4S5McxmHnzJhrYi9ZQ6wE+DA8JN5BzVC5EEBuduWWDaiJ8u6YhVOCmThBli+rw==",
"requires": {
"@remix-run/router": "1.3.2"
"@remix-run/router": "1.3.3"
}
},
"react-router-dom": {
"version": "6.8.1",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.8.1.tgz",
"integrity": "sha512-67EXNfkQgf34P7+PSb6VlBuaacGhkKn3kpE51+P6zYSG2kiRoumXEL6e27zTa9+PGF2MNXbgIUHTVlleLbIcHQ==",
"version": "6.8.2",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.8.2.tgz",
"integrity": "sha512-N/oAF1Shd7g4tWy+75IIufCGsHBqT74tnzHQhbiUTYILYF0Blk65cg+HPZqwC+6SqEyx033nKqU7by38v3lBZg==",
"requires": {
"@remix-run/router": "1.3.2",
"react-router": "6.8.1"
"@remix-run/router": "1.3.3",
"react-router": "6.8.2"
}
},
"read-only-stream": {

8
package.json
View File

@@ -1,7 +1,7 @@
{
"name": "homebrewery",
"description": "Create authentic looking D&D homebrews using only markdown",
"version": "3.6.1",
"version": "3.7.0",
"engines": {
"node": "16.11.x"
},
@@ -39,7 +39,7 @@
"jest": {
"testTimeout": 15000,
"modulePaths": [
"mode_modules",
"node_modules",
"shared",
"server"
],
@@ -98,13 +98,13 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-frame-component": "4.1.3",
"react-router-dom": "6.8.1",
"react-router-dom": "6.8.2",
"sanitize-filename": "1.6.3",
"superagent": "^6.1.0",
"vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
},
"devDependencies": {
"eslint": "^8.34.0",
"eslint": "^8.35.0",
"eslint-plugin-react": "^7.32.2",
"jest": "^29.4.3",
"supertest": "^6.3.3"

4
scripts/buildHomebrew.js
View File

@@ -20,8 +20,8 @@ const transforms = {
};
const build = async ({ bundle, render, ssr })=>{
let css = await lessTransform.generate({ paths: './shared' });
css = `@layer bundle {\n${css}\n}`;
const css = await lessTransform.generate({ paths: './shared' });
//css = `@layer bundle {\n${css}\n}`;
await fs.outputFile('./build/homebrew/bundle.css', css);
await fs.outputFile('./build/homebrew/bundle.js', bundle);
await fs.outputFile('./build/homebrew/ssr.js', ssr);

7
themes/V3/5ePHB/snippets.js
View File

@@ -170,9 +170,10 @@ module.exports = [
gen : MonsterBlockGen.monster('monster,frame,wide', 4),
},
{
name : 'Cover Page',
icon : 'fac fa-file-c',
gen : CoverPageGen,
name : 'Cover Page',
icon : 'fac book-front-cover',
gen : CoverPageGen,
experimental : true
},
{
name : 'Back Cover Page',

18
themes/V3/Blank/snippets.js
View File

@@ -102,10 +102,11 @@ module.exports = [
gen : WatercolorGen,
},
{
name : 'Watercolor Image Mask Edge',
icon : 'fac mask-edge',
gen : ImageMaskGen.edge('bottom'),
subsnippets : [
name : 'Watercolor Edge',
icon : 'fac mask-edge',
gen : ImageMaskGen.edge('bottom'),
experimental : true,
subsnippets : [
{
name : 'Top',
icon : 'fac position-top',
@@ -129,10 +130,11 @@ module.exports = [
]
},
{
name : 'Watercolor Image Mask Corner',
icon : 'fac mask-corner',
gen : ImageMaskGen.corner,
subsnippets : [
name : 'Watercolor Corner',
icon : 'fac mask-corner',
gen : ImageMaskGen.corner,
experimental : true,
subsnippets : [
{
name : 'Top-Left',
icon : 'fac position-top-left',

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

@@ -1,412 +1,410 @@
@layer V3_Blank {
@import (less) './themes/fonts/5e/fonts.less';
@import (less) './themes/assets/assets.less';
@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
}
:root {
//Colors
--HB_Color_Background : #FFFFFF; // White
--HB_Color_WatercolorStain : #000000; // Black
}
@page { margin: 0; }
body {
counter-reset : phb-page-numbers;
@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%;
}
*{
-webkit-print-color-adjust : exact;
.inline-block {
display : inline-block;
text-indent : initial;
}
}
.useColumns(@multiplier : 1, @fillMode: balance){
column-fill : @fillMode;
column-count : 2;
}
.columnWrapper{
max-height : 100%;
column-span : all;
columns : inherit;
column-gap : inherit;
}
.page{
.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;
z-index : 15;
box-sizing : border-box;
overflow : hidden;
text-rendering : optimizeLegibility;
page-break-before : always;
page-break-after : always;
contain : size;
}
//*****************************
// * BASE
// *****************************/
.page{
p{
overflow-wrap : break-word;
display : block;
}
strong{
font-weight : bold;
}
em{
font-style : italic;
}
sup{
vertical-align : super;
font-size : smaller;
line-height : 0;
}
sub{
vertical-align : sub;
font-size : smaller;
line-height : 0;
}
ul {
list-style-position : outside; //Needed for multiline list items
list-style-type : disc;
padding-left : 1.4em;
}
ol {
list-style-position : outside;
list-style-type : decimal;
padding-left : 1.4em;
}
img{
z-index : -1;
}
//*****************************
// * MUSTACHE DIVS/SPANS
// * HEADERS
// *****************************/
.page {
.block {
break-inside : avoid;
display : inline-block;
width : 100%;
}
.inline-block {
display : inline-block;
text-indent : initial;
}
h1,h2,h3,h4,h5,h6{
font-weight : bold;
line-height : 1.2em;
}
.useColumns(@multiplier : 1, @fillMode: balance){
column-fill : @fillMode;
column-count : 2;
h1{
font-size : 2em;
}
.columnWrapper{
max-height : 100%;
column-span : all;
columns : inherit;
column-gap : inherit;
h2{
font-size : 1.5em;
}
.page{
.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;
z-index : 15;
box-sizing : border-box;
overflow : hidden;
text-rendering : optimizeLegibility;
page-break-before : always;
page-break-after : always;
contain : size;
h3{
font-size : 1.17em;
}
//*****************************
// * BASE
// *****************************/
.page{
p{
overflow-wrap : break-word;
display : block;
}
strong{
h4{
font-size : 1em;
}
h5{
font-size : 0.83em;
}
//*****************************
// * TABLE
// *****************************/
table{
width : 100%;
thead{
display : table-row-group;
font-weight : bold;
}
em{
font-style : italic;
}
sup{
vertical-align : super;
font-size : smaller;
line-height : 0;
}
sub{
vertical-align : sub;
font-size : smaller;
line-height : 0;
}
ul {
list-style-position : outside; //Needed for multiline list items
list-style-type : disc;
padding-left : 1.4em;
}
ol {
list-style-position : outside;
list-style-type : decimal;
padding-left : 1.4em;
}
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;
white-space : pre-wrap;
overflow-wrap : break-word;
}
pre code{
width : 100%;
display : inline-block;
}
//*****************************
// * EXTRAS
// *****************************/
.columnSplit {
visibility : hidden;
-webkit-column-break-after : always;
break-after : always;
-moz-column-break-after : always;
margin-top : 0;
& + * {
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 {
display : grid !important;
place-items : center;
justify-content : center;
position : absolute;
margin : 0;
top : 0;
left : 0;
width : 100%;
height : 100%;
font-size : 120px;
text-transform : uppercase;
color : black;
mix-blend-mode : overlay;
opacity : 30%;
transform : rotate(-45deg);
z-index : 500;
p {
margin-bottom : none;
}
}
/* Watercolor */
[class*="watercolor"] {
position : absolute;
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 */
-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;
background-size : cover;
background-color : var(--HB_Color_WatercolorStain); /*default color*/
--wc : @watercolor1; /*default image*/
z-index : -2;
}
.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;
height : 200%;
width : 200%;
left : 50%;
bottom : 50%;
--rotation : 0;
--revealer : none;
--checkerboard : none;
--scaleX : 1;
--scaleY : 1;
-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));
background-image : var(--checkerboard);
background-size : 20px;
z-index : -1;
transform : translateY(50%) translateX(-50%) rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
transition : transform 2s;
& > p:has(img) {
position : absolute;
width : 50%;
height : 50%;
bottom : 50%;
left : 50%;
transform : translateX(-50%) translateY(50%) rotate(calc(-1deg * var(--rotation))) scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY)));
transition : transform 2s;
}
& img {
position : absolute;
display : block;
bottom : 0;
}
&.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,.2) 0%, rgba(0,0,0,0.2));
--checkerboard : url(/assets/waterColorMasks/missingImage.png); //shows any masked regions not filled by image
}
}
.imageMaskEdge1 { --wc : url(/assets/waterColorMasks/edge/0001.webp); }
.imageMaskEdge2 { --wc : url(/assets/waterColorMasks/edge/0002.webp); }
.imageMaskEdge3 { --wc : url(/assets/waterColorMasks/edge/0003.webp); }
.imageMaskEdge4 { --wc : url(/assets/waterColorMasks/edge/0004.webp); }
.imageMaskEdge5 { --wc : url(/assets/waterColorMasks/edge/0005.webp); }
.imageMaskEdge6 { --wc : url(/assets/waterColorMasks/edge/0006.webp); }
.imageMaskEdge7 { --wc : url(/assets/waterColorMasks/edge/0007.webp); }
.imageMaskEdge8 { --wc : url(/assets/waterColorMasks/edge/0008.webp); }
[class*="imageMaskCorner"] {
height : 200%;
width : 200%;
left : calc(-50% + var(--offsetX));
bottom : calc(-50% + var(--offsetY));
-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%;
transform : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));;
& > p:has(img) {
width : 50%;
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)))
rotate(calc(-1deg * var(--rotation)))
translateX(calc(-1 * var(--offsetX)))
translateY(calc(1 * var(--offsetY)));
}
}
.imageMaskCorner1 { --wc : url(/assets/waterColorMasks/corner/0001.webp); }
.imageMaskCorner2 { --wc : url(/assets/waterColorMasks/corner/0002.webp); }
.imageMaskCorner3 { --wc : url(/assets/waterColorMasks/corner/0003.webp); }
.imageMaskCorner4 { --wc : url(/assets/waterColorMasks/corner/0004.webp); }
.imageMaskCorner5 { --wc : url(/assets/waterColorMasks/corner/0005.webp); }
.imageMaskCorner6 { --wc : url(/assets/waterColorMasks/corner/0006.webp); }
.imageMaskCorner7 { --wc : url(/assets/waterColorMasks/corner/0007.webp); }
.imageMaskCorner8 { --wc : url(/assets/waterColorMasks/corner/0008.webp); }
.imageMaskCorner9 { --wc : url(/assets/waterColorMasks/corner/0009.webp); }
.imageMaskCorner10 { --wc : url(/assets/waterColorMasks/corner/0010.webp); }
.imageMaskCorner11 { --wc : url(/assets/waterColorMasks/corner/0011.webp); }
.imageMaskCorner12 { --wc : url(/assets/waterColorMasks/corner/0012.webp); }
.imageMaskCorner13 { --wc : url(/assets/waterColorMasks/corner/0013.webp); }
.imageMaskCorner14 { --wc : url(/assets/waterColorMasks/corner/0014.webp); }
.imageMaskCorner15 { --wc : url(/assets/waterColorMasks/corner/0015.webp); }
.imageMaskCorner16 { --wc : url(/assets/waterColorMasks/corner/0016.webp); }
.imageMaskCorner17 { --wc : url(/assets/waterColorMasks/corner/0017.webp); }
.imageMaskCorner18 { --wc : url(/assets/waterColorMasks/corner/0018.webp); }
.imageMaskCorner19 { --wc : url(/assets/waterColorMasks/corner/0019.webp); }
.imageMaskCorner20 { --wc : url(/assets/waterColorMasks/corner/0020.webp); }
.imageMaskCorner21 { --wc : url(/assets/waterColorMasks/corner/0021.webp); }
.imageMaskCorner22 { --wc : url(/assets/waterColorMasks/corner/0022.webp); }
.imageMaskCorner23 { --wc : url(/assets/waterColorMasks/corner/0023.webp); }
.imageMaskCorner24 { --wc : url(/assets/waterColorMasks/corner/0024.webp); }
.imageMaskCorner25 { --wc : url(/assets/waterColorMasks/corner/0025.webp); }
.imageMaskCorner26 { --wc : url(/assets/waterColorMasks/corner/0026.webp); }
.imageMaskCorner27 { --wc : url(/assets/waterColorMasks/corner/0027.webp); }
.imageMaskCorner28 { --wc : url(/assets/waterColorMasks/corner/0028.webp); }
.imageMaskCorner29 { --wc : url(/assets/waterColorMasks/corner/0029.webp); }
.imageMaskCorner30 { --wc : url(/assets/waterColorMasks/corner/0030.webp); }
.imageMaskCorner31 { --wc : url(/assets/waterColorMasks/corner/0031.webp); }
.imageMaskCorner32 { --wc : url(/assets/waterColorMasks/corner/0032.webp); }
.imageMaskCorner33 { --wc : url(/assets/waterColorMasks/corner/0033.webp); }
.imageMaskCorner34 { --wc : url(/assets/waterColorMasks/corner/0034.webp); }
.imageMaskCorner35 { --wc : url(/assets/waterColorMasks/corner/0035.webp); }
.imageMaskCorner36 { --wc : url(/assets/waterColorMasks/corner/0036.webp); }
.imageMaskCorner37 { --wc : url(/assets/waterColorMasks/corner/0037.webp); }
}
div:not(.columnWrapper) > table + table { // Side-by-side tables should not
margin-top : 0; // have vertical spacing.
}
//*****************************
// * 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;
}
//************************************
// * CODE BLOCKS
// ************************************/
code{
font-family : "Courier New", Courier, monospace;
white-space : pre-wrap;
overflow-wrap : break-word;
}
pre code{
width : 100%;
display : inline-block;
}
//*****************************
// * BLANK LINE
// * EXTRAS
// *****************************/
.page {
.blank {
height : 1em;
.columnSplit {
visibility : hidden;
-webkit-column-break-after : always;
break-after : always;
-moz-column-break-after : always;
margin-top : 0;
& + * {
margin-top : 0;
& + * {
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 {
display : grid !important;
place-items : center;
justify-content : center;
position : absolute;
margin : 0;
top : 0;
left : 0;
width : 100%;
height : 100%;
font-size : 120px;
text-transform : uppercase;
color : black;
mix-blend-mode : overlay;
opacity : 30%;
transform : rotate(-45deg);
z-index : 500;
p {
margin-bottom : none;
}
}
//*****************************
// * WIDE
// *****************************/
.page {
.wide{
column-span : all;
display : block;
margin-bottom : 1em;
&+* {
margin-top : 0;
}
/* Watercolor */
[class*="watercolor"] {
position : absolute;
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 */
-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;
background-size : cover;
background-color : var(--HB_Color_WatercolorStain); /*default color*/
--wc : @watercolor1; /*default image*/
z-index : -2;
}
.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;
height : 200%;
width : 200%;
left : 50%;
bottom : 50%;
--rotation : 0;
--revealer : none;
--checkerboard : none;
--scaleX : 1;
--scaleY : 1;
-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));
background-image : var(--checkerboard);
background-size : 20px;
z-index : -1;
transform : translateY(50%) translateX(-50%) rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
transition : transform 2s;
& > p:has(img) {
position : absolute;
width : 50%;
height : 50%;
bottom : 50%;
left : 50%;
transform : translateX(-50%) translateY(50%) rotate(calc(-1deg * var(--rotation))) scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY)));
transition : transform 2s;
}
& img {
position : absolute;
display : block;
bottom : 0;
}
&.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,.2) 0%, rgba(0,0,0,0.2));
--checkerboard : url(/assets/waterColorMasks/missingImage.png); //shows any masked regions not filled by image
}
}
.imageMaskEdge1 { --wc : url(/assets/waterColorMasks/edge/0001.webp); }
.imageMaskEdge2 { --wc : url(/assets/waterColorMasks/edge/0002.webp); }
.imageMaskEdge3 { --wc : url(/assets/waterColorMasks/edge/0003.webp); }
.imageMaskEdge4 { --wc : url(/assets/waterColorMasks/edge/0004.webp); }
.imageMaskEdge5 { --wc : url(/assets/waterColorMasks/edge/0005.webp); }
.imageMaskEdge6 { --wc : url(/assets/waterColorMasks/edge/0006.webp); }
.imageMaskEdge7 { --wc : url(/assets/waterColorMasks/edge/0007.webp); }
.imageMaskEdge8 { --wc : url(/assets/waterColorMasks/edge/0008.webp); }
[class*="imageMaskCorner"] {
height : 200%;
width : 200%;
left : calc(-50% + var(--offsetX));
bottom : calc(-50% + var(--offsetY));
-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%;
transform : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));;
& > p:has(img) {
width : 50%;
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)))
rotate(calc(-1deg * var(--rotation)))
translateX(calc(-1 * var(--offsetX)))
translateY(calc(1 * var(--offsetY)));
}
}
.imageMaskCorner1 { --wc : url(/assets/waterColorMasks/corner/0001.webp); }
.imageMaskCorner2 { --wc : url(/assets/waterColorMasks/corner/0002.webp); }
.imageMaskCorner3 { --wc : url(/assets/waterColorMasks/corner/0003.webp); }
.imageMaskCorner4 { --wc : url(/assets/waterColorMasks/corner/0004.webp); }
.imageMaskCorner5 { --wc : url(/assets/waterColorMasks/corner/0005.webp); }
.imageMaskCorner6 { --wc : url(/assets/waterColorMasks/corner/0006.webp); }
.imageMaskCorner7 { --wc : url(/assets/waterColorMasks/corner/0007.webp); }
.imageMaskCorner8 { --wc : url(/assets/waterColorMasks/corner/0008.webp); }
.imageMaskCorner9 { --wc : url(/assets/waterColorMasks/corner/0009.webp); }
.imageMaskCorner10 { --wc : url(/assets/waterColorMasks/corner/0010.webp); }
.imageMaskCorner11 { --wc : url(/assets/waterColorMasks/corner/0011.webp); }
.imageMaskCorner12 { --wc : url(/assets/waterColorMasks/corner/0012.webp); }
.imageMaskCorner13 { --wc : url(/assets/waterColorMasks/corner/0013.webp); }
.imageMaskCorner14 { --wc : url(/assets/waterColorMasks/corner/0014.webp); }
.imageMaskCorner15 { --wc : url(/assets/waterColorMasks/corner/0015.webp); }
.imageMaskCorner16 { --wc : url(/assets/waterColorMasks/corner/0016.webp); }
.imageMaskCorner17 { --wc : url(/assets/waterColorMasks/corner/0017.webp); }
.imageMaskCorner18 { --wc : url(/assets/waterColorMasks/corner/0018.webp); }
.imageMaskCorner19 { --wc : url(/assets/waterColorMasks/corner/0019.webp); }
.imageMaskCorner20 { --wc : url(/assets/waterColorMasks/corner/0020.webp); }
.imageMaskCorner21 { --wc : url(/assets/waterColorMasks/corner/0021.webp); }
.imageMaskCorner22 { --wc : url(/assets/waterColorMasks/corner/0022.webp); }
.imageMaskCorner23 { --wc : url(/assets/waterColorMasks/corner/0023.webp); }
.imageMaskCorner24 { --wc : url(/assets/waterColorMasks/corner/0024.webp); }
.imageMaskCorner25 { --wc : url(/assets/waterColorMasks/corner/0025.webp); }
.imageMaskCorner26 { --wc : url(/assets/waterColorMasks/corner/0026.webp); }
.imageMaskCorner27 { --wc : url(/assets/waterColorMasks/corner/0027.webp); }
.imageMaskCorner28 { --wc : url(/assets/waterColorMasks/corner/0028.webp); }
.imageMaskCorner29 { --wc : url(/assets/waterColorMasks/corner/0029.webp); }
.imageMaskCorner30 { --wc : url(/assets/waterColorMasks/corner/0030.webp); }
.imageMaskCorner31 { --wc : url(/assets/waterColorMasks/corner/0031.webp); }
.imageMaskCorner32 { --wc : url(/assets/waterColorMasks/corner/0032.webp); }
.imageMaskCorner33 { --wc : url(/assets/waterColorMasks/corner/0033.webp); }
.imageMaskCorner34 { --wc : url(/assets/waterColorMasks/corner/0034.webp); }
.imageMaskCorner35 { --wc : url(/assets/waterColorMasks/corner/0035.webp); }
.imageMaskCorner36 { --wc : url(/assets/waterColorMasks/corner/0036.webp); }
.imageMaskCorner37 { --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;
}
}
}

BIN
themes/fonts/5e/Alkalami-Regular.woff2
View File

Binary file not shown.