diff --git a/changelog.md b/changelog.md index 10899a485..0260a1f44 100644 --- a/changelog.md +++ b/changelog.md @@ -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 diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx index c03c01212..cfd2d5e91 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.jsx +++ b/client/homebrew/editor/snippetbar/snippetbar.jsx @@ -171,7 +171,8 @@ const SnippetGroup = createClass({ return _.map(snippets, (snippet)=>{ return
this.handleSnippetClick(e, snippet)}> - {snippet.name} + {snippet.name} + {snippet.experimental && beta} {snippet.subsnippets && <>
diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less index 9c6bf3f08..80444a7e4 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.less +++ b/client/homebrew/editor/snippetbar/snippetbar.less @@ -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{ diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx index 45fb30ac4..86570ec46 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.jsx +++ b/client/homebrew/pages/basePages/listPage/listPage.jsx @@ -219,7 +219,7 @@ const ListPage = createClass({ render : function(){ return
- + {/**/} {this.props.navItems} {this.renderSortOptions()} diff --git a/client/homebrew/pages/homePage/welcome_msg.md b/client/homebrew/pages/homePage/welcome_msg.md index deee966ea..3332dfc39 100644 --- a/client/homebrew/pages/homePage/welcome_msg.md +++ b/client/homebrew/pages/homePage/welcome_msg.md @@ -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 diff --git a/client/icons/book-front-cover.svg b/client/icons/book-front-cover.svg new file mode 100644 index 000000000..4c4ec39bc --- /dev/null +++ b/client/icons/book-front-cover.svg @@ -0,0 +1,48 @@ + + + + + + + + + + diff --git a/client/icons/customIcons.less b/client/icons/customIcons.less index b04d16684..28cbcdf24 100644 --- a/client/icons/customIcons.less +++ b/client/icons/customIcons.less @@ -31,3 +31,9 @@ .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'); +} diff --git a/client/icons/fa-file-c.svg b/client/icons/fa-file-c.svg new file mode 100644 index 000000000..3e914decf --- /dev/null +++ b/client/icons/fa-file-c.svg @@ -0,0 +1,30 @@ + + + + +fa-file-c + + + + + + + + + + diff --git a/package.json b/package.json index 05417871a..6a6f5963c 100644 --- a/package.json +++ b/package.json @@ -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" diff --git a/scripts/buildHomebrew.js b/scripts/buildHomebrew.js index a6120b144..96ce3fded 100644 --- a/scripts/buildHomebrew.js +++ b/scripts/buildHomebrew.js @@ -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); diff --git a/themes/V3/5ePHB/snippets.js b/themes/V3/5ePHB/snippets.js index bea2a1da3..5ccd2db9e 100644 --- a/themes/V3/5ePHB/snippets.js +++ b/themes/V3/5ePHB/snippets.js @@ -169,9 +169,10 @@ module.exports = [ gen : MonsterBlockGen.monster('monster,frame,wide', 4), }, { - name : 'Cover Page', - icon : 'fas fa-file-word', - gen : CoverPageGen, + name : 'Cover Page', + icon : 'fac book-front-cover', + gen : CoverPageGen, + experimental : true }, { name : 'Magic Item', diff --git a/themes/V3/5ePHB/snippets/coverpage.gen.js b/themes/V3/5ePHB/snippets/coverpage.gen.js index 0fb8ba7a4..5351f5db5 100644 --- a/themes/V3/5ePHB/snippets/coverpage.gen.js +++ b/themes/V3/5ePHB/snippets/coverpage.gen.js @@ -1,55 +1,46 @@ const _ = require('lodash'); +const dedent = require('dedent-tabs').default; const titles = [ - 'The Burning Gallows', - 'The Ring of Nenlast', - 'Below the Blind Tavern', - 'Below the Hungering River', - 'Before Bahamut\'s Land', - 'The Cruel Grave from Within', - 'The Strength of Trade Road', - 'Through The Raven Queen\'s Worlds', - 'Within the Settlement', - 'The Crown from Within', - 'The Merchant Within the Battlefield', - 'Ioun\'s Fading Traveler', - 'The Legion Ingredient', - 'The Explorer Lure', - 'Before the Charming Badlands', - 'The Living Dead Above the Fearful Cage', - 'Vecna\'s Hidden Sage', - 'Bahamut\'s Demonspawn', - 'Across Gruumsh\'s Elemental Chaos', - 'The Blade of Orcus', - 'Beyond Revenge', - 'Brain of Insanity', - 'Breed Battle!, A New Beginning', - 'Evil Lake, A New Beginning', - 'Invasion of the Gigantic Cat, Part II', - 'Kraken War 2020', - 'The Body Whisperers', - 'The Diabolical Tales of the Ape-Women', - 'The Doctor Immortal', - 'The Doctor from Heaven', - 'The Graveyard', - 'Azure Core', - 'Core Battle', - 'Core of Heaven: The Guardian of Amazement', - 'Deadly Amazement III', - 'Dry Chaos IX', - 'Gate Thunder', - 'Guardian: Skies of the Dark Wizard', - 'Lute of Eternity', - 'Mercury\'s Planet: Brave Evolution', - 'Ruby of Atlantis: The Quake of Peace', - 'Sky of Zelda: The Thunder of Force', - 'Vyse\'s Skies', - 'White Greatness III', - 'Yellow Divinity', - 'Zidane\'s Ghost' + 'The Burning Gallows', 'The Ring of Nenlast', + 'Below the Blind Tavern', 'Below the Hungering River', + 'Before Bahamut\'s Land', 'The Cruel Grave from Within', + 'The Strength of Trade Road', 'Through The Raven Queen\'s Worlds', + 'Within the Settlement', 'The Crown from Within', + 'The Merchant Within the Battlefield', 'Ioun\'s Fading Traveler', + 'The Legion Ingredient', 'The Explorer Lure', + 'Before the Charming Badlands', 'Vecna\'s Hidden Sage', + 'The Living Dead Above the Fearful Cage', 'Bahamut\'s Demonspawn', + 'Across Gruumsh\'s Elemental Chaos', 'The Blade of Orcus', + 'Beyond Revenge', 'Brain of Insanity', + 'Breed Battle!, A New Beginning', 'Evil Lake, A New Beginning', + 'Invasion of the Gigantic Cat, Part II', 'Kraken War 2020', + 'The Body Whisperers', 'The Doctor from Heaven', + 'The Diabolical Tales of the Ape-Women', 'The Doctor Immortal', + 'Core of Heaven: Guardian of Amazement', 'The Graveyard', + 'Guardian: Skies of the Dark Wizard', 'Lute of Eternity', + 'Mercury\'s Planet: Brave Evolution', 'Azure Core', + 'Sky of Zelda: The Thunder of Force', 'Core Battle', + 'Ruby of Atlantis: The Quake of Peace', 'Deadly Amazement III', + 'Dry Chaos IX', 'Gate Thunder', + 'Vyse\'s Skies', 'White Greatness III', + 'Yellow Divinity', 'Zidane\'s Ghost' ]; const subtitles = [ + 'Tomb of Shadows', 'Dragon\'s Lair', + 'Lost Caverns', 'The Necromancer', + 'Mystic Forest', 'Cursed Ruins', + 'The Dark Abyss', 'Enchanted Maze', + 'Haunted Castle', 'Sands of Fate', + 'Dragon\'s Hoard', 'Undead Menace', + 'Lost City Ruins', 'Goblin Ambush', + 'Enchanted Forest', 'Darkness Rising', + 'Quest for Glory', 'Ancient Prophecy', + 'Shadowy Depths', 'Mystic Isles' +]; + +const footnote = [ 'In an ominous universe, a botanist opposes terrorism.', 'In a demon-haunted city, in an age of lies and hate, a physicist tries to find an ancient treasure and battles a mob of aliens.', 'In a land of corruption, two cyberneticists and a dungeon delver search for freedom.', @@ -74,51 +65,26 @@ const subtitles = [ 'On a planet of mysticism, three travelers and a fire fighter quest for the ultimate weapon and oppose evil.', 'In a wicked universe, five seers fight lawlessness.', 'In a kingdom of death, in an era of illusion and blood, four colonists search for fame.', - 'In an amazing kingdom, in an age of sorcery and lost souls, eight space pirates quest for freedom.', - 'In a cursed empire, five inventors oppose terrorism.', - 'On a crime-ridden planet of conspiracy, a watchman and an artificial intelligence try to find love and oppose lawlessness.', - 'In a forgotten land, a reporter and a spy try to stop the apocalypse.', - 'In a forbidden land of prophecy, a scientist and an archivist oppose a cabal of barbarians intent on stealing the souls of the innocent.', - 'On an infernal world of illusion, a grave robber and a watchman try to find revenge and combat a syndicate of mages intent on stealing the source of all magic.', - 'In a galaxy of dark magic, four fighters seek freedom.', - 'In an empire of deception, six tomb-robbers quest for the ultimate weapon and combat an army of raiders.', - 'In a kingdom of corruption and lost souls, in an age of panic, eight planetologists oppose evil.', - 'In a galaxy of misery and hopelessness, in a time of agony and pain, five planetologists search for vengance.', - 'In a universe of technology and insanity, in a time of sorcery, a computer techician quests for hope.', - 'On a planet of dark magic and barbarism, in an age of horror and blasphemy, seven librarians search for fame.', - 'In an empire of dark magic, in a time of blood and illusions, four monks try to find the ultimate weapon and combat terrorism.', - 'In a forgotten empire of dark magic, six kings try to prevent the destruction of mankind.', - 'In a galaxy of dark magic and horror, in an age of hopelessness, four marines and an outlaw combat evil.', - 'In a mysterious city of illusion, in an age of computerization, a witch-hunter tries to find the ultimate weapon and opposes an evil corporation.', - 'In a damned kingdom of technology, a virtual reality programmer and a fighter seek fame.', - 'In a hellish kingdom, in an age of blasphemy and blasphemy, an astrologer searches for fame.', - 'In a damned world of devils, an alien and a ranger quest for love and oppose a syndicate of demons.', - 'In a cursed galaxy, in a time of pain, seven librarians hope to avert the apocalypse.', - 'In a crime-infested galaxy, in an era of hopelessness and panic, three champions and a grave robber try to solve the ultimate crime.' + 'In an amazing kingdom, in an age of sorcery and lost souls, eight space pirates quest for freedom.' ]; - module.exports = ()=>{ - return ` + return dedent` + {{coverPage }} -{{margin-top:225px}} + {{logo ![](/assets/naturalCritLogo.svg)}} -# ${_.sample(titles)} + # ${_.sample(titles)} + ## ${_.sample(subtitles)} + __________ -{{margin-top:25px}} + {{banner HOMEBREW}} -{{wide -##### ${_.sample(subtitles)} -}} + {{footnote + ${_.sample(footnote)} + }} -\\page`; -}; \ No newline at end of file + ![background image](https://i.imgur.com/Mqx8Vf7.png) + + \page`; +}; diff --git a/themes/V3/5ePHB/style.less b/themes/V3/5ePHB/style.less index 09f0dc790..61c9900fe 100644 --- a/themes/V3/5ePHB/style.less +++ b/themes/V3/5ePHB/style.less @@ -624,134 +624,242 @@ body { // * CLASS TABLE // *****************************/ .page .classTable{ - th[colspan]:not([rowspan]) { - white-space : nowrap; +th[colspan]:not([rowspan]) { + white-space : nowrap; +} +&.frame { + margin-top : 0.7cm; + margin-bottom : 0.9cm; + margin-left : -0.1cm; + margin-right : -0.1cm; + width : calc(100% + 0.2cm); + border-collapse : separate; + background-color : white; + border : initial; + border-style : solid; + border-image-outset : 0.4cm 0.3cm; + border-image-repeat : stretch; + border-image-slice : 200; + border-image-source : @frameBorderImage; + border-image-width : 47px; + &.wide:first-child { + margin-top: 0.12cm; } - &.frame { - margin-top : 0.7cm; - margin-bottom : 0.9cm; - margin-left : -0.1cm; - margin-right : -0.1cm; - width : calc(100% + 0.2cm); - border-collapse : separate; - background-color : white; - border : initial; - border-style : solid; - border-image-outset : 0.4cm 0.3cm; - border-image-repeat : stretch; - border-image-slice : 200; - border-image-source : @frameBorderImage; - border-image-width : 47px; - &.wide:first-child { - margin-top: 0.12cm; - } - & + * { - margin-top: 0; - } - } - &.decoration { - position:relative; - } - &.decoration::before { - content :''; - position : absolute; - background-image : @classTableDecoration, - @classTableDecoration; - background-size : contain, contain; - background-repeat : no-repeat, no-repeat; - background-position : top, bottom; - width : 7.75cm; - height : calc(100% + 3.3cm); - top : 50%; - left : 50%; - transform : translateY(-50%) translateX(-50%); - filter : drop-shadow(0px 0px 1px #C8C5C080); - z-index : -1; - } - &.decoration.wide::before { - width : calc(100% + 3.3cm); - height : 7.75cm; - background-position : left, right; - } - h5 + table{ - margin-top : 0.2cm; + & + * { + margin-top: 0; } } +&.decoration { + position:relative; +} +&.decoration::before { + content :''; + position : absolute; + background-image : @classTableDecoration, + @classTableDecoration; + background-size : contain, contain; + background-repeat : no-repeat, no-repeat; + background-position : top, bottom; + width : 7.75cm; + height : calc(100% + 3.3cm); + top : 50%; + left : 50%; + transform : translateY(-50%) translateX(-50%); + filter : drop-shadow(0px 0px 1px #C8C5C080); + z-index : -1; +} +&.decoration.wide::before { + width : calc(100% + 3.3cm); + height : 7.75cm; + background-position : left, right; +} +h5 + table{ + margin-top : 0.2cm; +} +} +//***************************** +// * COVER PAGE +// *****************************/ +.page:has(.coverPage) { + columns : 1; + text-align : center; + &:after { + all: unset; + } + .logo { + position : absolute; + top : 0.5cm; + left : 0; + right : 0; + filter : drop-shadow(0 0 0.075cm black); + img { + height : 2cm; + width : 100%; + } + } + .columnWrapper > p img { + position : absolute; + bottom : 0; + left : 0; + height : 100%; + min-width : 100%; + z-index : -1; + } + h1 { + --shadow-x0 : #000 0px 0px 0.1cm; + --shadow-x1 : var(--shadow-x0), var(--shadow-x0), var(--shadow-x0); + --shadow-x2 : var(--shadow-x1), var(--shadow-x1), var(--shadow-x1); + --shadow-x3 : var(--shadow-x2), var(--shadow-x2), var(--shadow-x2); + text-shadow : var(--shadow-x3), var(--shadow-x3), var(--shadow-x3); + text-transform : uppercase; + font-weight : normal; + display : block; + margin-top : 1.2cm; + margin-bottom : 0; + color : white; + font-family : NodestoCapsCondensed; + font-size : 2.245cm; + line-height : 0.85em; + } + h2 { + --shadow-x0 : #000 0px 0px 2.5px; + --shadow-x1 : var(--shadow-x0), var(--shadow-x0), var(--shadow-x0); + --shadow-x2 : var(--shadow-x1), var(--shadow-x1), var(--shadow-x1); + --shadow-x3 : var(--shadow-x2), var(--shadow-x2), var(--shadow-x2); + text-shadow : var(--shadow-x3), var(--shadow-x3), var(--shadow-x3); + font-family : NodestoCapsCondensed; + font-weight : normal; + font-size : 0.85cm; + letter-spacing : 0.1cm; + color : white; + } + hr { + display : block; + position : relative; + background-image : @horizontalRule; + background-size : 100% 100%; + visibility : visible; + height : 0.5cm; + width : 12cm; + border : none; + margin : auto; + filter : drop-shadow(0 0 3px black); + } + .banner { + filter : drop-shadow(2px 2px 2px #000); + position : absolute; + left : 0; + bottom : 4.2cm; + background-image : url('/assets/coverPageBanner.svg'); + height : 1.7cm; + width : 10.5cm; + color : white; + font-family : NodestoCapsCondensed; + font-weight : normal; + font-size : 1cm; + letter-spacing : 0.014cm; + text-align : left; + padding-left : 1cm; + display : flex; + justify-content : center; + flex-direction : column; + padding-top : 0.1cm; + } + .footnote { + --shadow-x0 : #000 0px 0px 0.05cm; + --shadow-x1 : var(--shadow-x0), var(--shadow-x0), var(--shadow-x0); + --shadow-x2 : var(--shadow-x1), var(--shadow-x1), var(--shadow-x1); + text-shadow : var(--shadow-x2), var(--shadow-x2), var(--shadow-x2); + position : absolute; + text-align : center; + color : white; + font-size : 0.496cm; + bottom : 1.3cm; + left : 0; + right : 0; + margin-left : auto; + margin-right : auto; + width : 70%; + font-family : Overpass; + } +} + + //***************************** // * TABLE OF CONTENTS // *****************************/ .page { - &:has(.toc):after { - display: none; +&:has(.toc):after { + display: none; +} +.toc { +-webkit-column-break-inside : avoid; +page-break-inside : avoid; +break-inside : avoid; + h1 { + text-align : center; + margin-bottom : 0.3cm; } - .toc { - -webkit-column-break-inside : avoid; - page-break-inside : avoid; - break-inside : avoid; - h1 { - text-align : center; - margin-bottom : 0.3cm; - } - a{ - display : inline; - color : inherit; - text-decoration : none; - &:hover{ - text-decoration : underline; - } - } - h4 { - margin-top : 0.2cm; - line-height : 0.4cm; - & + ul li { - line-height: 1.2em; - } - } - ul{ - padding-left : 0; - list-style-type : none; - margin-top : 0; - a { - width : 100%; - display : flex; - flex-flow : row nowrap; - justify-content : space-between; - } - li + li h3 { - margin-top : 0.26cm; - line-height : 1em - } - h3 span:first-child::after { - border : none; - } - span { - display : contents; - &:first-child::after { - content : ""; - bottom : 0.08cm; - flex : 1; - margin-left : 0.08cm; /* Spacing before dot leaders */ - margin-right : 0.16cm; - border-bottom : 0.05cm dotted #000; - margin-bottom : 0.08cm; - } - &:last-child { - display : inline-block; - align-self : flex-end; - font-family : "BookInsanityRemake"; - font-size : 0.34cm; - font-weight : normal; - color : #000; - } - } - ul { /*List indent*/ - margin-left : 1em; - } - } - &.wide{ - .useColumns(0.96, @fillMode: balance); + a{ + display : inline; + color : inherit; + text-decoration : none; + &:hover{ + text-decoration : underline; } } + h4 { + margin-top : 0.2cm; + line-height : 0.4cm; + & + ul li { + line-height: 1.2em; + } + } + ul{ + padding-left : 0; + list-style-type : none; + margin-top : 0; + a { + width : 100%; + display : flex; + flex-flow : row nowrap; + justify-content : space-between; + } + li + li h3 { + margin-top : 0.26cm; + line-height : 1em + } + h3 span:first-child::after { + border : none; + } + span { + display : contents; + &:first-child::after { + content : ""; + bottom : 0.08cm; + flex : 1; + margin-left : 0.08cm; /* Spacing before dot leaders */ + margin-right : 0.16cm; + border-bottom : 0.05cm dotted #000; + margin-bottom : 0.08cm; + } + &:last-child { + display : inline-block; + align-self : flex-end; + font-family : "BookInsanityRemake"; + font-size : 0.34cm; + font-weight : normal; + color : #000; + } + } + ul { /*List indent*/ + margin-left : 1em; + } + } + &.wide{ + .useColumns(0.96, @fillMode: balance); + } +} } //***************************** diff --git a/themes/V3/Blank/snippets.js b/themes/V3/Blank/snippets.js index a8fd2fa2c..33b819057 100644 --- a/themes/V3/Blank/snippets.js +++ b/themes/V3/Blank/snippets.js @@ -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', diff --git a/themes/V3/Blank/style.less b/themes/V3/Blank/style.less index 9efa7c0b7..6dda308e9 100644 --- a/themes/V3/Blank/style.less +++ b/themes/V3/Blank/style.less @@ -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; } } } diff --git a/themes/assets/assets.less b/themes/assets/assets.less index 7df5db0f6..1f61bf89e 100644 --- a/themes/assets/assets.less +++ b/themes/assets/assets.less @@ -10,6 +10,9 @@ @monsterBorderImage : url('/assets/monsterBorderFancy.png'); @codeBorderImage : url('/assets/codeBorder.png'); @classTableDecoration : url('/assets/classTableDecoration.png'); +@naturalCritLogo : url('/assets/naturalCritLogo.svg'); +@coverPageBanner : url('/assets/coverPageBanner.svg'); +@horizontalRule : url('/assets/horizontalRule.svg'); // Watercolor Images @watercolor1 : url('/assets/watercolor/watercolor1.png'); diff --git a/themes/assets/coverPageBanner.svg b/themes/assets/coverPageBanner.svg new file mode 100644 index 000000000..8e7c4acc2 --- /dev/null +++ b/themes/assets/coverPageBanner.svg @@ -0,0 +1 @@ +Asset 2 \ No newline at end of file diff --git a/themes/assets/horizontalRule.svg b/themes/assets/horizontalRule.svg new file mode 100644 index 000000000..9fce47809 --- /dev/null +++ b/themes/assets/horizontalRule.svg @@ -0,0 +1 @@ +Asset 2 \ No newline at end of file diff --git a/themes/assets/naturalCritLogo.svg b/themes/assets/naturalCritLogo.svg new file mode 100644 index 000000000..71cc40a97 --- /dev/null +++ b/themes/assets/naturalCritLogo.svg @@ -0,0 +1 @@ +NaturalCritLogo \ No newline at end of file diff --git a/themes/fonts/5e/Nodesto Caps Condensed.woff2 b/themes/fonts/5e/Nodesto Caps Condensed.woff2 index bdb21d4cd..335079b7e 100644 Binary files a/themes/fonts/5e/Nodesto Caps Condensed.woff2 and b/themes/fonts/5e/Nodesto Caps Condensed.woff2 differ diff --git a/themes/fonts/5e/Overpass Medium.woff2 b/themes/fonts/5e/Overpass Medium.woff2 new file mode 100644 index 000000000..74951a813 Binary files /dev/null and b/themes/fonts/5e/Overpass Medium.woff2 differ diff --git a/themes/fonts/5e/fonts.less b/themes/fonts/5e/fonts.less index f5118a7cc..5257dfce4 100644 --- a/themes/fonts/5e/fonts.less +++ b/themes/fonts/5e/fonts.less @@ -106,3 +106,10 @@ font-weight: bold; font-style: italic; } + +@font-face { + font-family: Overpass; + src: url('../../../fonts/5e/Overpass Medium.woff2'); + font-weight: 500; + font-style: normal; +}