diff --git a/README.md b/README.md index 35f0150d1..df7f41503 100644 --- a/README.md +++ b/README.md @@ -21,24 +21,29 @@ below. First, install three programs that The Homebrewery requires to run and retrieve updates: -1. install [node](https://nodejs.org/en/) +1. install [node](https://nodejs.org/en/), version v16 or higher. 1. install [mongodb](https://www.mongodb.com/try/download/community) (Community version) For the easiest installation, follow these steps: 1. In the installer, uncheck the option to run as a service. 1. You can install MongoDB Compass if you want a GUI to view your database documents. + 1. If you install any version over 6.0, you will have to install [MongoDB Shell](https://www.mongodb.com/try/download/shell). 1. Go to the C:\ drive and create a folder called "data". 1. Inside the "data" folder, create a new folder called "db". - 1. Open a command prompt or other terminal and navigate to your MongoDB install folder (C:\Program Files\Mongo\Server\4.4\bin). + 1. Open a command prompt or other terminal and navigate to your MongoDB install folder (C:\Program Files\Mongo\Server\6.0\bin). 1. In the command prompt, run "mongod", which will start up your local database server. 1. While MongoD is running, open a second command prompt and navigate to the MongoDB install folder. - 1. In the second command prompt, run "mongo", which allows you to edit the database. - 1. Type `use homebrewery` to create The Homebrewery database. You should see `switched to db homebrewery`. - 1. Type `db.brews.insert({"title":"test"})` to create a blank document. You should see `WriteResult({ "nInserted" : 1 })`. 1. Search in Windows for "Advanced system settings" and open it. 1. Click "Environment variables", find the "path" variable, and double-click to open it. 1. Click "New" and paste in the path to the MongoDB "bin" folder. 1. Click "OK" three times to close all the windows. + 1. In the second command prompt, run "mongo", which allows you to edit the database. + 1. Type `use homebrewery` to create The Homebrewery database. You should see `switched to db homebrewery`. + 1. Type `db.brews.insertOne({"title":"test"})` to create a blank document. You should see `{ +acknowledged: true, +insertedId: ObjectId("63c2fce9e5ac5a94fe2410cf") +}` + 1. install [git](https://git-scm.com/downloads) (select the option that allows Git to run from the command prompt). Checkout the repo ([documentation][github-clone-repo-docs-url]): @@ -51,11 +56,19 @@ git clone https://github.com/naturalcrit/homebrewery.git Second, you will need to add the environment variable `NODE_ENV=local` to allow the project to run locally. -You can set this temporarily in your shell of choice: +You can set this **temporarily** (until you close the terminal) in your shell of choice with admin privileges: * Windows Powershell: `$env:NODE_ENV="local"` * Windows CMD: `set NODE_ENV=local` * Linux / macOS: `export NODE_ENV=local` +If you want to add this variable **permanently** the steps are as follows: + 1. Search in Windows for "Advanced system settings" and open it. + 1. Click "Environment variables". + 1. In System Variables, click "New" + 1. Click "New" and write `NODE_ENV` as a name and `local` as the value. + 1. Click "OK" three times to close all the windows. + This can be undone at any time if needed. + Third, you will need to install the Node dependencies, compile the app, and run it using the two commands: @@ -65,6 +78,13 @@ it using the two commands: You should now be able to go to [http://localhost:8000](http://localhost:8000) in your browser and use The Homebrewery offline. +If you had any issue at all, here are some links that may be useful: +- [Course](https://learn.mongodb.com/courses/m103-basic-cluster-administration) on cluster administration, useful for beginners +- [Mongo community forums](https://www.mongodb.com/community/forums/) +- Useful Stack Overflow links for your most probable errors: [1](https://stackoverflow.com/questions/44962540/mongod-and-mongo-commands-not-working-on-windows-10), [2](https://stackoverflow.com/questions/15053893/mongo-command-not-recognized-when-trying-to-connect-to-a-mongodb-server/41507803#41507803), [3](https://stackoverflow.com/questions/51224959/mongo-is-not-recognized-as-an-internal-or-external-command-operable-program-o) + +If you still have problems, post in [Our Subreddit](https://www.reddit.com/r/homebrewery/) and we will help you. + ### Running the application via Docker Please see the docs here: [README.DOCKER.md](./README.DOCKER.md) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 654806886..f8a5fce0a 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -134,7 +134,7 @@ const BrewRenderer = createClass({ renderStyle : function() { if(!this.props.style) return; - return
${this.props.style} ` }} />; + return
@layer styleTab {\n${this.props.style}\n} ` }} />; }, renderPage : function(pageText, index){ diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.jsx b/client/homebrew/editor/metadataEditor/metadataEditor.jsx index d16d7556b..3d77f557f 100644 --- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx +++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx @@ -37,7 +37,7 @@ const MetadataEditor = createClass({ renderer : 'legacy', theme : '5ePHB' }, - onChange : ()=>{}, + onChange : ()=>{}, reportError : ()=>{} }; }, diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx index 9dbee4280..c03c01212 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.jsx +++ b/client/homebrew/editor/snippetbar/snippetbar.jsx @@ -163,15 +163,22 @@ const SnippetGroup = createClass({ onSnippetClick : function(){}, }; }, - handleSnippetClick : function(snippet){ + handleSnippetClick : function(e, snippet){ + e.stopPropagation(); this.props.onSnippetClick(execute(snippet.gen, this.props.brew)); }, - renderSnippets : function(){ - return _.map(this.props.snippets, (snippet)=>{ - return
this.handleSnippetClick(snippet)}> + renderSnippets : function(snippets){ + return _.map(snippets, (snippet)=>{ + return
this.handleSnippetClick(e, snippet)}> {snippet.name} + {snippet.subsnippets && <> + +
+ {this.renderSnippets(snippet.subsnippets)} +
}
; + }); }, @@ -182,7 +189,7 @@ const SnippetGroup = createClass({ {this.props.groupName}
- {this.renderSnippets()} + {this.renderSnippets(this.props.snippets)}
; }, diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less index 371f51fda..57f868899 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.less +++ b/client/homebrew/editor/snippetbar/snippetbar.less @@ -1,4 +1,4 @@ - +@import (less) './client/icons/customIcons.less'; .snippetBar{ @menuHeight : 25px; position : relative; @@ -83,7 +83,7 @@ .snippetGroup{ border-right : 1px solid black; &:hover{ - .dropdown{ + &>.dropdown{ visibility : visible; } } @@ -97,15 +97,30 @@ background-color : #ddd; .snippet{ .animate(background-color); + 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; + } } &:hover{ background-color : #999; + &>.dropdown{ + visibility : visible; + &.side { + left: 100%; + top: 0%; + margin-left:0; + box-shadow: -1px 1px 2px 0px #999; + } + } } } } diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx index b80b04899..45fb30ac4 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.jsx +++ b/client/homebrew/pages/basePages/listPage/listPage.jsx @@ -219,12 +219,13 @@ const ListPage = createClass({ render : function(){ return
+ {this.props.navItems} {this.renderSortOptions()}
-
+
{this.renderBrewCollection(this.state.brewCollection)}
diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less index 7ee5a7e67..4e5557a3e 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.less +++ b/client/homebrew/pages/basePages/listPage/listPage.less @@ -10,14 +10,14 @@ -moz-column-width : auto; -webkit-column-gap : auto; -moz-column-gap : auto; + height : auto; + min-height : 279.4mm; + margin : 20px auto; } .listPage{ .content{ - .phb{ - .noColumns(); - height : auto; - min-height : 279.4mm; - margin : 20px auto; + .page{ + .noColumns() !important; //Needed to override PHB Theme since this is on a lower @layer &::after{ display : none; } diff --git a/client/homebrew/pages/printPage/printPage.jsx b/client/homebrew/pages/printPage/printPage.jsx index cff8ebe32..c2e8c9b7b 100644 --- a/client/homebrew/pages/printPage/printPage.jsx +++ b/client/homebrew/pages/printPage/printPage.jsx @@ -60,7 +60,7 @@ const PrintPage = createClass({ renderStyle : function() { if(!this.state.brew.style) return; - return
${this.state.brew.style} ` }} />; + return
@layer styleTab {\n${this.state.brew.style}\n} ` }} />; }, renderPages : function(){ diff --git a/client/icons/customIcons.less b/client/icons/customIcons.less new file mode 100644 index 000000000..f41a2fc83 --- /dev/null +++ b/client/icons/customIcons.less @@ -0,0 +1,15 @@ +.fac { + display : inline-block; +} +.position-top-left { + content: url('../icons/position-top-left.svg'); +} +.position-top-right { + content: url('../icons/position-top-right.svg'); +} +.position-bottom-left { + content: url('../icons/position-bottom-left.svg'); +} +.position-bottom-right { + content: url('../icons/position-bottom-right.svg'); +} diff --git a/client/icons/position-bottom-left.svg b/client/icons/position-bottom-left.svg new file mode 100644 index 000000000..eb0709d8e --- /dev/null +++ b/client/icons/position-bottom-left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/icons/position-bottom-right.svg b/client/icons/position-bottom-right.svg new file mode 100644 index 000000000..f9cb7250a --- /dev/null +++ b/client/icons/position-bottom-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/icons/position-top-left.svg b/client/icons/position-top-left.svg new file mode 100644 index 000000000..d8240d2a8 --- /dev/null +++ b/client/icons/position-top-left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/icons/position-top-right.svg b/client/icons/position-top-right.svg new file mode 100644 index 000000000..4e998b4be --- /dev/null +++ b/client/icons/position-top-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 4eb031596..a5bd399d2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -46,8 +46,8 @@ "vitreum": "git+https://git@github.com/calculuschild/vitreum.git" }, "devDependencies": { - "eslint": "^8.32.0", - "eslint-plugin-react": "^7.32.1", + "eslint": "^8.33.0", + "eslint-plugin-react": "^7.32.2", "jest": "^29.4.1", "supertest": "^6.3.3" }, @@ -6186,9 +6186,9 @@ } }, "node_modules/eslint": { - "version": "8.32.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.32.0.tgz", - "integrity": "sha512-nETVXpnthqKPFyuY2FNjz/bEd6nbosRgKbkgS/y1C7LJop96gYHWpiguLecMHQ2XCPxn77DS0P+68WzG6vkZSQ==", + "version": "8.33.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.33.0.tgz", + "integrity": "sha512-WjOpFQgKK8VrCnAtl8We0SUOy/oVZ5NHykyMiagV1M9r8IFpIJX7DduK6n1mpfhlG7T1NLWm2SuD8QB7KFySaA==", "dev": true, "dependencies": { "@eslint/eslintrc": "^1.4.1", @@ -6242,9 +6242,9 @@ } }, "node_modules/eslint-plugin-react": { - "version": "7.32.1", - "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.1.tgz", - "integrity": "sha512-vOjdgyd0ZHBXNsmvU+785xY8Bfe57EFbTYYk8XrROzWpr9QBvpjITvAXt9xqcE6+8cjR/g1+mfumPToxsl1www==", + "version": "7.32.2", + "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz", + "integrity": "sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg==", "dev": true, "dependencies": { "array-includes": "^3.1.6", @@ -21434,9 +21434,9 @@ "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==" }, "eslint": { - "version": "8.32.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.32.0.tgz", - "integrity": "sha512-nETVXpnthqKPFyuY2FNjz/bEd6nbosRgKbkgS/y1C7LJop96gYHWpiguLecMHQ2XCPxn77DS0P+68WzG6vkZSQ==", + "version": "8.33.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.33.0.tgz", + "integrity": "sha512-WjOpFQgKK8VrCnAtl8We0SUOy/oVZ5NHykyMiagV1M9r8IFpIJX7DduK6n1mpfhlG7T1NLWm2SuD8QB7KFySaA==", "dev": true, "requires": { "@eslint/eslintrc": "^1.4.1", @@ -21553,9 +21553,9 @@ } }, "eslint-plugin-react": { - "version": "7.32.1", - "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.1.tgz", - "integrity": "sha512-vOjdgyd0ZHBXNsmvU+785xY8Bfe57EFbTYYk8XrROzWpr9QBvpjITvAXt9xqcE6+8cjR/g1+mfumPToxsl1www==", + "version": "7.32.2", + "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz", + "integrity": "sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg==", "dev": true, "requires": { "array-includes": "^3.1.6", diff --git a/package.json b/package.json index e33e1d323..558d10dfa 100644 --- a/package.json +++ b/package.json @@ -104,8 +104,8 @@ "vitreum": "git+https://git@github.com/calculuschild/vitreum.git" }, "devDependencies": { - "eslint": "^8.32.0", - "eslint-plugin-react": "^7.32.1", + "eslint": "^8.33.0", + "eslint-plugin-react": "^7.32.2", "jest": "^29.4.1", "supertest": "^6.3.3" } diff --git a/scripts/buildHomebrew.js b/scripts/buildHomebrew.js index 9d632668f..a6120b144 100644 --- a/scripts/buildHomebrew.js +++ b/scripts/buildHomebrew.js @@ -20,7 +20,8 @@ const transforms = { }; const build = async ({ bundle, render, ssr })=>{ - const css = await lessTransform.generate({ paths: './shared' }); + let 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); @@ -96,6 +97,7 @@ fs.emptyDirSync('./build'); // Move assets await fs.copy('./themes/fonts', './build/fonts'); await fs.copy('./themes/assets', './build/assets'); + await fs.copy('./client/icons', './build/icons'); //v==----------------------------- BUNDLE PACKAGES --------------------------------==v// diff --git a/server/app.js b/server/app.js index 61dbbc21a..59aac2d9b 100644 --- a/server/app.js +++ b/server/app.js @@ -294,8 +294,15 @@ app.get('/edit/:id', asyncHandler(getBrew('edit')), (req, res, next)=>{ app.get('/new/:id', asyncHandler(getBrew('share')), (req, res, next)=>{ sanitizeBrew(req.brew, 'share'); splitTextStyleAndMetadata(req.brew); - req.brew.views = 0; - req.brew.title = `CLONE - ${req.brew.title}`; + const brew = { + shareId : req.brew.shareId, + title : `CLONE - ${req.brew.title}`, + text : req.brew.text, + style : req.brew.style, + renderer : req.brew.renderer, + theme : req.brew.theme + }; + req.brew = _.defaults(brew, DEFAULT_BREW); req.ogMeta = { ...defaultMetaTags, title : 'New', diff --git a/server/brewDefaults.js b/server/brewDefaults.js index 092f7070a..30798cea7 100644 --- a/server/brewDefaults.js +++ b/server/brewDefaults.js @@ -16,6 +16,7 @@ const DEFAULT_BREW = { tags : [], systems : [], thumbnail : '', + views : 0, published : false, pageCount : 1, gDrive : false, diff --git a/server/homebrew.api.spec.js b/server/homebrew.api.spec.js index 71d9bdcc7..22f80155c 100644 --- a/server/homebrew.api.spec.js +++ b/server/homebrew.api.spec.js @@ -71,7 +71,8 @@ describe('Tests for api', ()=>{ lastViewed : new Date(), version : 1, pageCount : 1, - textBin : '' + textBin : '', + views : 0 }; googleBrew = { ...hbBrew, @@ -261,7 +262,8 @@ If you believe you should have access to this brew, ask the file owner to invite gDrive : false, style : undefined, trashed : false, - updatedAt : undefined + updatedAt : undefined, + views : 0 }); expect(next).toHaveBeenCalled(); expect(api.getId).toHaveBeenCalledWith(req); @@ -452,7 +454,8 @@ brew`); thumbnail : '', title : 'asdf', trashed : false, - updatedAt : undefined + updatedAt : undefined, + views : 0 }); }); @@ -510,7 +513,8 @@ brew`); thumbnail : '', title : 'asdf', trashed : false, - updatedAt : undefined + updatedAt : undefined, + views : 0 }); }); diff --git a/themes/Legacy/5ePHB/style.less b/themes/Legacy/5ePHB/style.less index 2793958fe..2544ff77d 100644 --- a/themes/Legacy/5ePHB/style.less +++ b/themes/Legacy/5ePHB/style.less @@ -1,497 +1,499 @@ -@import (less) './themes/fonts/5e legacy/fonts.less'; -@import (less) './themes/assets/assets.less'; -@import (less) './themes/phb.depricated.less'; -//Colors -@background : #EEE5CE; // Light parchment -@noteGreen : #e0e5c1; // Pastel green -@headerUnderline : #c9ad6a; // Gold -@horizontalRule : #9c2b1b; // Maroon -@headerText : #58180D; // Dark maroon -@monsterStatBackground : #FDF1DC; // Lighter parchment -@captionText : #766649; // Brown -@page { margin: 0; } -body { - counter-reset : phb-page-numbers; -} -*{ - -webkit-print-color-adjust : exact; -} -.useSansSerif(){ - font-family : ScalySans; - em{ +@layer Legacy_5ePHB { + @import (less) './themes/fonts/5e legacy/fonts.less'; + @import (less) './themes/assets/assets.less'; + @import (less) './themes/phb.depricated.less'; + //Colors + @background : #EEE5CE; // Light parchment + @noteGreen : #e0e5c1; // Pastel green + @headerUnderline : #c9ad6a; // Gold + @horizontalRule : #9c2b1b; // Maroon + @headerText : #58180D; // Dark maroon + @monsterStatBackground : #FDF1DC; // Lighter parchment + @captionText : #766649; // Brown + @page { margin: 0; } + body { + counter-reset : phb-page-numbers; + } + *{ + -webkit-print-color-adjust : exact; + } + .useSansSerif(){ font-family : ScalySans; - font-style : italic; - } - strong{ - font-family : ScalySans; - font-weight : 800; - letter-spacing : -0.02em; - } -} -.useColumns(@multiplier : 1){ - column-count : 2; - column-fill : auto; - column-gap : 1cm; - column-width : 8cm * @multiplier; - -webkit-column-count : 2; - -moz-column-count : 2; - -webkit-column-width : 8cm * @multiplier; - -moz-column-width : 8cm * @multiplier; - -webkit-column-gap : 1cm; - -moz-column-gap : 1cm; -} -.phb{ - .useColumns(); - counter-increment : phb-page-numbers; - position : relative; - z-index : 15; - box-sizing : border-box; - overflow : hidden; - height : 279.4mm; - width : 215.9mm; - padding : 1.0cm 1.7cm; - padding-bottom : 1.5cm; - background-color : @background; - background-image : @backgroundImage; - font-family : BookSanity; - font-size : 0.317cm; - text-rendering : optimizeLegibility; - page-break-before : always; - page-break-after : always; - contain : size; - //***************************** - // * BASE - // *****************************/ - p{ - padding-bottom : 0.8em; - line-height : 1.269em; - &+p{ - margin-top : -0.8em; + em{ + font-family : ScalySans; + font-style : italic; + } + strong{ + font-family : ScalySans; + font-weight : 800; + letter-spacing : -0.02em; } } - ul{ - margin-bottom : 0.8em; - padding-left : 1.4em; - line-height : 1.269em; - list-style-position : outside; - list-style-type : disc; + .useColumns(@multiplier : 1){ + column-count : 2; + column-fill : auto; + column-gap : 1cm; + column-width : 8cm * @multiplier; + -webkit-column-count : 2; + -moz-column-count : 2; + -webkit-column-width : 8cm * @multiplier; + -moz-column-width : 8cm * @multiplier; + -webkit-column-gap : 1cm; + -moz-column-gap : 1cm; } - ol{ - margin-bottom : 0.8em; - padding-left : 1.4em; - line-height : 1.269em; - list-style-position : outside; - list-style-type : decimal; - } - //Indents after p or lists - p+p, ul+p, ol+p{ - text-indent : 1em; - } - img{ - z-index : -1; - } - strong{ - font-weight : bold; - letter-spacing : 0.03em; - } - em{ - font-style : italic; - } - sup{ - vertical-align : super; - font-size : smaller; - line-height : 0; - } - sub{ - vertical-align : sub; - font-size : smaller; - line-height : 0; - } - //***************************** - // * HEADERS - // *****************************/ - h1,h2,h3,h4{ - margin-top : 0.2em; - margin-bottom : 0.2em; - font-family : MrJeeves; - font-weight : 800; - color : @headerText; - } - h1{ - column-span : all; - font-size : 0.987cm; - -webkit-column-span : all; - -moz-column-span : all; - &+p::first-letter{ - float : left; - font-family : Solberry; - font-size : 10em; - color : #222; - line-height : 0.795em; - } - } - h2{ - font-size : 0.705cm; - } - h3{ - font-size : 0.529cm; - border-bottom : 2px solid @headerUnderline; - } - h4{ - margin-bottom : 0.00em; - font-size : 0.458cm; - } - h5{ - margin-bottom : 0.2em; - font-family : ScalySansSmallCaps; - font-size : 0.423cm; - font-weight : 900; - } - //***************************** - // * TABLE - // *****************************/ - table{ - .useSansSerif(); - width : 100%; - margin-bottom : 1em; - font-size : 10pt; - thead{ - display: table-row-group; - font-weight : 800; - th{ - vertical-align : bottom; - padding-bottom : 0.3em; - padding-right : 0.1em; - padding-left : 0.1em; - } - } - tbody{ - tr{ - td{ - padding : 0.3em 0.1em; - } - &:nth-child(odd){ - background-color : @noteGreen; - } - } - } - } - //***************************** - // * NOTE - // *****************************/ - blockquote{ - .useSansSerif(); - box-sizing : border-box; - margin-bottom : 1em; - padding : 5px 10px; - background-color : @noteGreen; - border-style : solid; - border-width : 11px; - border-image : @noteBorderImage 11; - border-image-outset : 9px 0px; - box-shadow : 1px 4px 14px #888; - p, ul{ - font-size : 0.352cm; - line-height : 1.083em; - } - } - //If a note starts a column, give it space at the top to render border - pre+blockquote, h2+blockquote, h3+blockquote, h4+blockquote, h5+blockquote { - margin-top : 13px; - } - //***************************** - // * MONSTER STAT BLOCK - // *****************************/ - hr+blockquote{ - position : relative; - padding-top : 15px; - background-color : @monsterStatBackground; - border-style : solid; - border-width : 10px; - border-image : @monsterBorderImageLegacy 10; - h2{ - margin-top : -8px; - margin-bottom : 0px; + .phb{ + .useColumns(); + counter-increment : phb-page-numbers; + position : relative; + z-index : 15; + box-sizing : border-box; + overflow : hidden; + height : 279.4mm; + width : 215.9mm; + padding : 1.0cm 1.7cm; + padding-bottom : 1.5cm; + background-color : @background; + background-image : @backgroundImage; + font-family : BookSanity; + font-size : 0.317cm; + text-rendering : optimizeLegibility; + page-break-before : always; + page-break-after : always; + contain : size; + //***************************** + // * BASE + // *****************************/ + p{ + padding-bottom : 0.8em; + line-height : 1.269em; &+p{ - padding-bottom : 0px; + margin-top : -0.8em; } } - h3{ - font-family : ScalySans; - font-weight : 400; - border-bottom : 1px solid @headerText; - } - hr+ul{ - color : @headerText; - } ul{ - .useSansSerif(); - padding-left : 1em; - font-size : 0.352cm; + margin-bottom : 0.8em; + padding-left : 1.4em; + line-height : 1.269em; + list-style-position : outside; + list-style-type : disc; } - // Monster Ability table - hr+table{ - margin : 0; - background-color : transparent; - border-style : none; - border-image : none; + ol{ + margin-bottom : 0.8em; + padding-left : 1.4em; + line-height : 1.269em; + list-style-position : outside; + list-style-type : decimal; + } + //Indents after p or lists + p+p, ul+p, ol+p{ + text-indent : 1em; + } + img{ + z-index : -1; + } + strong{ + font-weight : bold; + letter-spacing : 0.03em; + } + em{ + font-style : italic; + } + sup{ + vertical-align : super; + font-size : smaller; + line-height : 0; + } + sub{ + vertical-align : sub; + font-size : smaller; + line-height : 0; + } + //***************************** + // * HEADERS + // *****************************/ + h1,h2,h3,h4{ + margin-top : 0.2em; + margin-bottom : 0.2em; + font-family : MrJeeves; + font-weight : 800; + color : @headerText; + } + h1{ + column-span : all; + font-size : 0.987cm; + -webkit-column-span : all; + -moz-column-span : all; + &+p::first-letter{ + float : left; + font-family : Solberry; + font-size : 10em; + color : #222; + line-height : 0.795em; + } + } + h2{ + font-size : 0.705cm; + } + h3{ + font-size : 0.529cm; + border-bottom : 2px solid @headerUnderline; + } + h4{ + margin-bottom : 0.00em; + font-size : 0.458cm; + } + h5{ + margin-bottom : 0.2em; + font-family : ScalySansSmallCaps; + font-size : 0.423cm; + font-weight : 900; + } + //***************************** + // * TABLE + // *****************************/ + table{ + .useSansSerif(); + width : 100%; + margin-bottom : 1em; + font-size : 10pt; + thead{ + display: table-row-group; + font-weight : 800; + th{ + vertical-align : bottom; + padding-bottom : 0.3em; + padding-right : 0.1em; + padding-left : 0.1em; + } + } tbody{ - tr:nth-child(odd), tr:nth-child(even){ - background-color : transparent; + tr{ + td{ + padding : 0.3em 0.1em; + } + &:nth-child(odd){ + background-color : @noteGreen; + } } } } - table{ - color : @headerText; + //***************************** + // * NOTE + // *****************************/ + blockquote{ + .useSansSerif(); + box-sizing : border-box; + margin-bottom : 1em; + padding : 5px 10px; + background-color : @noteGreen; + border-style : solid; + border-width : 11px; + border-image : @noteBorderImage 11; + border-image-outset : 9px 0px; + box-shadow : 1px 4px 14px #888; + p, ul{ + font-size : 0.352cm; + line-height : 1.083em; + } } - p+p{ - margin-top : 0em; - padding-bottom : 0.5em; - text-indent : 0em; + //If a note starts a column, give it space at the top to render border + pre+blockquote, h2+blockquote, h3+blockquote, h4+blockquote, h5+blockquote { + margin-top : 13px; } - //Triangle dividers - hr{ - visibility : visible; - height : 6px; - margin : 4px 0px; - background-image : @redTriangleImage; - background-size : 100% 100%; - border : none; + //***************************** + // * MONSTER STAT BLOCK + // *****************************/ + hr+blockquote{ + position : relative; + padding-top : 15px; + background-color : @monsterStatBackground; + border-style : solid; + border-width : 10px; + border-image : @monsterBorderImageLegacy 10; + h2{ + margin-top : -8px; + margin-bottom : 0px; + &+p{ + padding-bottom : 0px; + } + } + h3{ + font-family : ScalySans; + font-weight : 400; + border-bottom : 1px solid @headerText; + } + hr+ul{ + color : @headerText; + } + ul{ + .useSansSerif(); + padding-left : 1em; + font-size : 0.352cm; + } + // Monster Ability table + hr+table{ + margin : 0; + background-color : transparent; + border-style : none; + border-image : none; + tbody{ + tr:nth-child(odd), tr:nth-child(even){ + background-color : transparent; + } + } + } + table{ + color : @headerText; + } + p+p{ + margin-top : 0em; + padding-bottom : 0.5em; + text-indent : 0em; + } + //Triangle dividers + hr{ + visibility : visible; + height : 6px; + margin : 4px 0px; + background-image : @redTriangleImage; + background-size : 100% 100%; + border : none; + } } - } - //Full Width - hr+hr+blockquote{ - .useColumns(0.96); - } - //***************************** - // * FOOTER - // *****************************/ - &:after{ - content : ""; - position : absolute; - bottom : 0px; - left : 0px; - z-index : 100; - height : 50px; - width : 100%; - background-image : @footerAccentImage; - background-size : cover; - } - &:nth-child(even){ + //Full Width + hr+hr+blockquote{ + .useColumns(0.96); + } + //***************************** + // * FOOTER + // *****************************/ &:after{ - transform : scaleX(-1); + content : ""; + position : absolute; + bottom : 0px; + left : 0px; + z-index : 100; + height : 50px; + width : 100%; + background-image : @footerAccentImage; + background-size : cover; + } + &:nth-child(even){ + &:after{ + transform : scaleX(-1); + } + .pageNumber{ + left : 2px; + } + .footnote{ + left : 80px; + text-align : left; + } } .pageNumber{ - left : 2px; + position : absolute; + right : 2px; + bottom : 22px; + width : 50px; + font-size : 0.9em; + color : #c9ad6a; + text-align : center; + &.auto::after { + content : counter(phb-page-numbers); + } } .footnote{ - left : 80px; - text-align : left; + position : absolute; + right : 80px; + bottom : 32px; + z-index : 150; + width : 200px; + font-size : 0.8em; + color : #c9ad6a; + text-align : right; } - } - .pageNumber{ - position : absolute; - right : 2px; - bottom : 22px; - width : 50px; - font-size : 0.9em; - color : #c9ad6a; - text-align : center; - &.auto::after { - content : counter(phb-page-numbers); + //***************************** + // * EXTRAS + // *****************************/ + hr{ + visibility : hidden; + margin : 0px; + } + //Modified unorder list, used in spells + hr+ul{ + margin-bottom : 0.5em; + padding-left : 1em; + text-indent : -1em; + list-style-type : none; + } + //Column Break + pre, code{ + visibility : hidden; + -webkit-column-break-after : always; + break-after : always; + -moz-column-break-after : always; + } + //Avoid breaking up + p,blockquote,table{ + z-index : 15; + -webkit-column-break-inside : avoid; + page-break-inside : avoid; + break-inside : avoid; + } + //Better spacing for spell blocks + h4+p+hr+ul{ + margin-top : -0.5em + } + //Text indent right after table + table+p{ + text-indent : 1em; + } + // 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; } - } - .footnote{ - position : absolute; - right : 80px; - bottom : 32px; - z-index : 150; - width : 200px; - font-size : 0.8em; - color : #c9ad6a; - text-align : right; } //***************************** - // * EXTRAS + // * SPELL LIST // *****************************/ - hr{ - visibility : hidden; - margin : 0px; + .phb .spellList{ + .useSansSerif(); + column-count : 4; + column-span : all; + -webkit-column-span : all; + -moz-column-span : all; + ul+h5{ + margin-top : 15px; + } + p, ul{ + font-size : 0.352cm; + line-height : 1.263em; + } + ul{ + margin-bottom : 0.5em; + padding-left : 1em; + text-indent : -1em; + list-style-type : none; + -webkit-column-break-inside : auto; + page-break-inside : auto; + break-inside : auto; + } } - //Modified unorder list, used in spells - hr+ul{ - margin-bottom : 0.5em; - padding-left : 1em; - text-indent : -1em; - list-style-type : none; + //***************************** + // * WIDE + // *****************************/ + .phb .wide{ + column-span : all; + -webkit-column-span : all; + -moz-column-span : all; } - //Column Break - pre, code{ - visibility : hidden; - -webkit-column-break-after : always; - break-after : always; - -moz-column-break-after : always; + //***************************** + // * CLASS TABLE + // *****************************/ + .phb .classTable{ + margin-top : 25px; + margin-bottom : 40px; + border-collapse : separate; + background-color : white; + border : initial; + border-style : solid; + border-image-outset : 25px 17px; + border-image-repeat : stretch; + border-image-slice : 150 200 150 200; + border-image-source : @frameBorderImage; + border-image-width : 47px; + h5{ + margin-bottom : 10px; + } } - //Avoid breaking up - p,blockquote,table{ - z-index : 15; - -webkit-column-break-inside : avoid; - page-break-inside : avoid; - break-inside : avoid; + //************************************ + // * DESCRIPTIVE TEXT BOX + // ************************************/ + .phb .descriptive{ + margin-bottom : 1em; + background-color : #faf7ea; + font-family : ScalySans; + border-style : solid; + border-width : 7px; + border-image : @descriptiveBoxImage 12 stretch; + border-image-outset : 4px; + box-shadow : 0px 0px 6px #faf7ea; + p{ + display : block; + padding-bottom : 0px; + line-height : 1.47em; + } + p + p { + padding-top : .8em; + } + em { + font-family : ScalySans; + font-style : italic; + } + strong { + font-family : ScalySans; + font-weight : 800; + letter-spacing : -0.02em; + } } - //Better spacing for spell blocks - h4+p+hr+ul{ - margin-top : -0.5em + .phb pre+.descriptive{ + margin-top : 8px; } - //Text indent right after table - table+p{ - text-indent : 1em; - } - // 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; - } -} -//***************************** -// * SPELL LIST -// *****************************/ -.phb .spellList{ - .useSansSerif(); - column-count : 4; - column-span : all; - -webkit-column-span : all; - -moz-column-span : all; - ul+h5{ - margin-top : 15px; - } - p, ul{ - font-size : 0.352cm; - line-height : 1.263em; - } - ul{ - margin-bottom : 0.5em; - padding-left : 1em; - text-indent : -1em; - list-style-type : none; - -webkit-column-break-inside : auto; - page-break-inside : auto; - break-inside : auto; - } -} -//***************************** -// * WIDE -// *****************************/ -.phb .wide{ - column-span : all; - -webkit-column-span : all; - -moz-column-span : all; -} -//***************************** -// * CLASS TABLE -// *****************************/ -.phb .classTable{ - margin-top : 25px; - margin-bottom : 40px; - border-collapse : separate; - background-color : white; - border : initial; - border-style : solid; - border-image-outset : 25px 17px; - border-image-repeat : stretch; - border-image-slice : 150 200 150 200; - border-image-source : @frameBorderImage; - border-image-width : 47px; - h5{ - margin-bottom : 10px; - } -} -//************************************ -// * DESCRIPTIVE TEXT BOX -// ************************************/ -.phb .descriptive{ - margin-bottom : 1em; - background-color : #faf7ea; - font-family : ScalySans; - border-style : solid; - border-width : 7px; - border-image : @descriptiveBoxImage 12 stretch; - border-image-outset : 4px; - box-shadow : 0px 0px 6px #faf7ea; - p{ - display : block; - padding-bottom : 0px; - line-height : 1.47em; - } - p + p { - padding-top : .8em; - } - em { - font-family : ScalySans; - font-style : italic; - } - strong { - font-family : ScalySans; - font-weight : 800; - letter-spacing : -0.02em; - } -} -.phb pre+.descriptive{ - margin-top : 8px; -} -//***************************** -// * ARTIST CREDIT BLOCK -// *****************************/ -.phb { - .artist { - position : absolute; - text-align : center; - font-family : WalterTurncoat; - font-size : 0.27cm; - color : @captionText; - p, p + p { - margin : unset; - text-indent : unset; - line-height : 0.941em; - } - h5 { - font-size : 1.3em; + //***************************** + // * ARTIST CREDIT BLOCK + // *****************************/ + .phb { + .artist { + position : absolute; + text-align : center; font-family : WalterTurncoat; + font-size : 0.27cm; + color : @captionText; + p, p + p { + margin : unset; + text-indent : unset; + line-height : 0.941em; + } + h5 { + font-size : 1.3em; + font-family : WalterTurncoat; + } + a{ + color : inherit; + text-decoration : unset; + &:hover { + text-decoration : underline; + } + } } + } + //***************************** + // * TABLE OF CONTENTS + // *****************************/ + .phb .toc{ + -webkit-column-break-inside : avoid; + page-break-inside : avoid; + break-inside : avoid; a{ - color : inherit; - text-decoration : unset; - &:hover { + color : black; + text-decoration : none; + &:hover{ text-decoration : underline; } } - } -} -//***************************** -// * TABLE OF CONTENTS -// *****************************/ -.phb .toc{ - -webkit-column-break-inside : avoid; - page-break-inside : avoid; - break-inside : avoid; - a{ - color : black; - text-decoration : none; - &:hover{ - text-decoration : underline; + ul{ + padding-left : 0; + list-style-type : none; + } + &>ul>li{ + margin-bottom : 10px; } } - ul{ - padding-left : 0; - list-style-type : none; - } - &>ul>li{ - margin-bottom : 10px; - } } diff --git a/themes/V3/5eDMG/style.less b/themes/V3/5eDMG/style.less index 50a3af0a3..02056a34b 100644 --- a/themes/V3/5eDMG/style.less +++ b/themes/V3/5eDMG/style.less @@ -1,19 +1,21 @@ -:root { - //Colors - --HB_Color_Accent : #EBCEC3; // Salmon - --HB_Color_Footnotes : #5C5C5C; // Dark gray -} - -.page { - background-image : url(/assets/DMG_background.png); - background-size : cover; - - &:after { - background-image : url(/assets/DMG_footerAccent.png); - height: 58px; +@layer V3_5eDMG { + :root { + //Colors + --HB_Color_Accent : #EBCEC3; // Salmon + --HB_Color_Footnotes : #5C5C5C; // Dark gray } - .footnote { - bottom : 40px; + .page { + background-image : url(/assets/DMG_background.png); + background-size : cover; + + &:after { + background-image : url(/assets/DMG_footerAccent.png); + height: 58px; + } + + .footnote { + bottom : 40px; + } } } diff --git a/themes/V3/5ePHB/style.less b/themes/V3/5ePHB/style.less index 17d78ee2b..8f8f232a2 100644 --- a/themes/V3/5ePHB/style.less +++ b/themes/V3/5ePHB/style.less @@ -1,624 +1,625 @@ -@import (less) './themes/fonts/5e/fonts.less'; -@import (less) './themes/assets/assets.less'; +@layer V3_5ePHB { + @import (less) './themes/fonts/5e/fonts.less'; + @import (less) './themes/assets/assets.less'; -:root { - //Colors - --HB_Color_Background : #EEE5CE; // Light parchment - --HB_Color_Accent : #E0E5C1; // Pastel green - --HB_Color_HeaderUnderline : #C0AD6A; // Gold - --HB_Color_HorizontalRule : #9C2B1B; // Maroon - --HB_Color_HeaderText : #58180D; // Dark Maroon - --HB_Color_MonsterStatBackground : #F2E5B5; // Light orange parchment - --HB_Color_CaptionText : #766649; // Brown - --HB_Color_WatercolorStain : #BBAD82; // Light brown - --HB_Color_Footnotes : #C9AD6A; // Gold -} + :root { + //Colors + --HB_Color_Background : #EEE5CE; // Light parchment + --HB_Color_Accent : #E0E5C1; // Pastel green + --HB_Color_HeaderUnderline : #C0AD6A; // Gold + --HB_Color_HorizontalRule : #9C2B1B; // Maroon + --HB_Color_HeaderText : #58180D; // Dark Maroon + --HB_Color_MonsterStatBackground : #F2E5B5; // Light orange parchment + --HB_Color_CaptionText : #766649; // Brown + --HB_Color_WatercolorStain : #BBAD82; // Light brown + --HB_Color_Footnotes : #C9AD6A; // Gold + } -@page { margin: 0; } -body { - counter-reset : phb-page-numbers; -} -*{ - -webkit-print-color-adjust : exact; -} -.useSansSerif(){ - font-family : ScalySansRemake; - font-size : 0.318cm; - line-height : 1.2em; - p,dl,ul,ol { + @page { margin: 0; } + body { + counter-reset : phb-page-numbers; + } + *{ + -webkit-print-color-adjust : exact; + } + .useSansSerif(){ + font-family : ScalySansRemake; + font-size : 0.318cm; line-height : 1.2em; - } - ul, ol { - padding-left : 1em; - } - em{ - font-style : italic; - } - strong{ - font-weight : 800; - letter-spacing : -0.02em; - } - h5 + * { - margin-top : 0.1cm; - } -} -.useColumns(@multiplier : 1, @fillMode: balance){ - column-count : 2; - column-fill : @fillMode; - column-gap : 0.9cm; - column-width : 8cm * @multiplier; - -webkit-column-count : 2; - -moz-column-count : 2; - -webkit-column-width : 8cm * @multiplier; - -moz-column-width : 8cm * @multiplier; - -webkit-column-gap : 0.9cm; - -moz-column-gap : 0.9cm; -} -.columnWrapper{ - max-height : 100%; - column-span : all; - columns : inherit; - column-gap : inherit; -} -.page{ - .useColumns(); - counter-increment : phb-page-numbers; - position : relative; - z-index : 15; - box-sizing : border-box; - overflow : hidden; - height : 279.4mm; - width : 215.9mm; - background-color : var(--HB_Color_Background); - background-image : @backgroundImage; - padding : 1.4cm 1.9cm 1.7cm; - font-family : BookInsanityRemake; - font-size : 0.34cm; - text-rendering : optimizeLegibility; - page-break-before : always; - page-break-after : always; -} - //***************************** - // * BASE - // *****************************/ - -.page{ - p{ - overflow-wrap : break-word; //TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS - display : block; - line-height : 1.25em; - &+* { - margin-top : 0.325cm; + p,dl,ul,ol { + line-height : 1.2em; } - &+p{ - margin-top : 0; + ul, ol { + padding-left : 1em; + } + em{ + font-style : italic; + } + strong{ + font-weight : 800; + letter-spacing : -0.02em; + } + h5 + * { + margin-top : 0.1cm; } } - ul{ - margin-bottom : 0.8em; - padding-left : 1.4em; - line-height : 1.25em; - list-style-position : outside; - list-style-type : disc; + .useColumns(@multiplier : 1, @fillMode: balance){ + column-count : 2; + column-fill : @fillMode; + column-gap : 0.9cm; + column-width : 8cm * @multiplier; + -webkit-column-count : 2; + -moz-column-count : 2; + -webkit-column-width : 8cm * @multiplier; + -moz-column-width : 8cm * @multiplier; + -webkit-column-gap : 0.9cm; + -moz-column-gap : 0.9cm; } - ol{ - margin-bottom : 0.8em; - padding-left : 1.4em; - line-height : 1.25em; - list-style-position : outside; - list-style-type : decimal; + .columnWrapper{ + max-height : 100%; + column-span : all; + columns : inherit; + column-gap : inherit; } - //Indents after p or lists - p+p, ul+p, ol+p{ - text-indent : 1em; - } - img{ - z-index : -1; - } - strong{ - font-weight : bold; - letter-spacing : -0.02em; - } - em{ - font-style : italic; - } - sup{ - vertical-align : super; - font-size : smaller; - line-height : 0; - } - sub{ - vertical-align : sub; - font-size : smaller; - line-height : 0; - } - //***************************** - // * HEADERS - // *****************************/ - h1,h2,h3,h4{ - font-family : MrEavesRemake; - font-weight : 800; - color : var(--HB_Color_HeaderText); - } - h1{ - margin-bottom : 0.18cm; //Margin-bottom only because this is WIDE - column-span : all; - font-size : 0.89cm; - line-height : 1em; - -webkit-column-span : all; - -moz-column-span : all; - &+p::first-letter{ - float : left; - font-family : SolberaImitationRemake; - line-height : 1em; - font-size : 3.5cm; - padding-left : 40px; //Allow background color to extend into margins - margin-left : -40px; - margin-top : -0.3cm; - padding-bottom : 2px; - margin-bottom : -20px; - background-image : linear-gradient(-45deg, #322814, #998250, #322814); - background-clip : text; - -webkit-background-clip : text; - color : rgba(0, 0, 0, 0); - } - &+p::first-line{ - font-variant : small-caps; - } - } - h2{ - //margin-top : 0px; //Font is misaligned. Shift up slightly - //margin-bottom : 0.05cm; - font-size : 0.75cm; - line-height : 0.988em; //Font is misaligned. Shift up slightly - } - h3{ - //margin-top : -0.1cm; //Font is misaligned. Shift up slightly - //margin-bottom : 0.1cm; - font-size : 0.575cm; - border-bottom : 2px solid var(--HB_Color_HeaderUnderline);; - line-height : 0.995em; //Font is misaligned. Shift up slightly - & + * { - margin-top: 0.17cm; - } - } - * + h3 { - margin-top : 0.155cm; //(0.325 - 0.17) - } - h4{ - //margin-top : -0.02cm; //Font is misaligned. Shift up slightly - //margin-bottom : 0.02cm; - font-size : 0.458cm; - line-height : 0.971em; //Font is misaligned. Shift up slightly - & + * { - margin-top: 0.09cm; - } - } - * + h4 { - margin-top : 0.235cm; //(0.325 - 0.09) - } - h5{ - //margin-top : -0.02cm; //Font is misaligned. Shift up slightly - //margin-bottom : 0.02cm; - font-family : ScalySansSmallCapsRemake; - font-size : 0.423cm; - font-weight : 900; - line-height : 0.951em; //Font is misaligned. Shift up slightly - & + * { - margin-top : 0.2cm; - } - } - //***************************** - // * TABLE - // *****************************/ - table{ - .useSansSerif(); - width : 100%; - line-height : 16px; - & + * { - margin-top : 0.325cm; - } - thead{ - display: table-row-group; - font-weight : 800; - th{ - vertical-align : bottom; - //padding : 0.14em 0.4em; - padding : 0px 1.5px; // Both of these are temporary, just to force - //line-height : 16px; // PDF to render at same height until Chrome 108 - } - } - tbody{ - tr{ - td{ - //padding : 0.14em 0.4em; - padding : 0px 1.5px; // Both of these are temporary, just to force - //line-height : 16px; // PDF to render at same height until Chrome 108 - } - &:nth-child(odd){ - background-color : var(--HB_Color_Accent); - } - } - } - } - //***************************** - // * NOTE - // *****************************/ - .note{ - .useSansSerif(); - background-color : var(--HB_Color_Accent); - border-style : solid; - border-width : 1px; - border-image : @noteBorderImage 12 stretch; - border-image-outset : 9px 0px; - border-image-width : 11px; - padding : 0.13cm 0.16cm; - filter : drop-shadow(1px 4px 6px #888); - .page :where(&) { - margin-top : 9px; //Prevent top border getting cut off on colbreak - } - & + * { - margin-top : 0.45cm; - } - h5 { - font-size : 0.375cm; - } - p{ - display : block; - padding-bottom : 0px; - } - :last-child { - margin-bottom : 0; - } - } - //************************************ - // * DESCRIPTIVE TEXT BOX - // ************************************/ - .descriptive{ - .useSansSerif(); - background-color : #faf7ea; - border-style : solid; - border-width : 7px; - border-image : @descriptiveBoxImage 12 stretch; - border-image-outset : 4px; - padding : 0.1em; - filter : drop-shadow(0 0 3px #faf7ea); - .page :where(&) { - margin-top : 4px; //Prevent top border getting cut off on colbreak - } - & + * { - margin-top : 0.45cm; - } - h5 { - font-size : 0.375cm; - } - p{ - display : block; - padding-bottom : 0px; - line-height : 1.5em; - } - :last-child { - margin-bottom : 0; - } - } - //***************************** - // * Images Snippets - // *****************************/ - - /* Arist Credit */ - .artist { - position : absolute; - width : auto; - text-align : center; - font-family : WalterTurncoat; - font-size : 0.27cm; - color : var(--HB_Color_CaptionText); - p, p + p { - margin : unset; - text-indent : unset; - line-height : 1em; - } - h5 { - font-size : 1.3em; - font-family : WalterTurncoat; - } - a{ - color : inherit; - text-decoration : unset; - &:hover { - text-decoration : underline; - } - } - } - - /* Watermark */ - .watermark { - display : grid !important; - place-items : center; - justify-content : center; - position : absolute; - 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; } - - //***************************** - // * MONSTER STAT BLOCK - // *****************************/ - .monster { - .useSansSerif(); - &.frame { - border-style : solid; - border-width : 7px 6px; - background-color : var(--HB_Color_MonsterStatBackground); - background-image : @monsterBlockBackground; - border-image : @monsterBorderImage 14 round; - border-image-outset : 0px 2px; - background-blend-mode : overlay; - background-attachment : fixed; - filter : drop-shadow(1px 4px 6px #888); - padding : 4px 2px; - margin-left : -0.16cm; - margin-right : -0.16cm; - width : calc(100% + 0.32cm); - } - + .page{ + .useColumns(); + counter-increment : phb-page-numbers; position : relative; - padding : 0px; - margin-bottom : 0.325cm; + z-index : 15; + box-sizing : border-box; + overflow : hidden; + height : 279.4mm; + width : 215.9mm; + background-color : var(--HB_Color_Background); + background-image : @backgroundImage; + padding : 1.4cm 1.9cm 1.7cm; + font-family : BookInsanityRemake; + font-size : 0.34cm; + text-rendering : optimizeLegibility; + page-break-before : always; + page-break-after : always; + } + //***************************** + // * BASE + // *****************************/ - //Headers + .page{ + p{ + overflow-wrap : break-word; //TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS + display : block; + line-height : 1.25em; + &+* { + margin-top : 0.325cm; + } + &+p{ + margin-top : 0; + } + } + ul{ + margin-bottom : 0.8em; + padding-left : 1.4em; + line-height : 1.25em; + list-style-position : outside; + list-style-type : disc; + } + ol{ + margin-bottom : 0.8em; + padding-left : 1.4em; + line-height : 1.25em; + list-style-position : outside; + list-style-type : decimal; + } + //Indents after p or lists + p+p, ul+p, ol+p{ + text-indent : 1em; + } + img{ + z-index : -1; + } + strong{ + font-weight : bold; + letter-spacing : -0.02em; + } + em{ + font-style : italic; + } + sup{ + vertical-align : super; + font-size : smaller; + line-height : 0; + } + sub{ + vertical-align : sub; + font-size : smaller; + line-height : 0; + } + //***************************** + // * HEADERS + // *****************************/ + h1,h2,h3,h4{ + font-family : MrEavesRemake; + font-weight : 800; + color : var(--HB_Color_HeaderText); + } + h1{ + margin-bottom : 0.18cm; //Margin-bottom only because this is WIDE + column-span : all; + font-size : 0.89cm; + line-height : 1em; + -webkit-column-span : all; + -moz-column-span : all; + &+p::first-letter{ + float : left; + font-family : SolberaImitationRemake; + line-height : 1em; + font-size : 3.5cm; + padding-left : 40px; //Allow background color to extend into margins + margin-left : -40px; + margin-top : -0.3cm; + padding-bottom : 2px; + margin-bottom : -20px; + background-image : linear-gradient(-45deg, #322814, #998250, #322814); + background-clip : text; + -webkit-background-clip : text; + color : rgba(0, 0, 0, 0); + } + &+p::first-line{ + font-variant : small-caps; + } + } h2{ - font-size : 0.62cm; - line-height : 1em; - margin : 0; - &+p { - font-size : 0.304cm; //Monster size and type subtext + //margin-top : 0px; //Font is misaligned. Shift up slightly + //margin-bottom : 0.05cm; + font-size : 0.75cm; + line-height : 0.988em; //Font is misaligned. Shift up slightly + } + h3{ + //margin-top : -0.1cm; //Font is misaligned. Shift up slightly + //margin-bottom : 0.1cm; + font-size : 0.575cm; + border-bottom : 2px solid var(--HB_Color_HeaderUnderline);; + line-height : 0.995em; //Font is misaligned. Shift up slightly + & + * { + margin-top: 0.17cm; + } + } + * + h3 { + margin-top : 0.155cm; //(0.325 - 0.17) + } + h4{ + //margin-top : -0.02cm; //Font is misaligned. Shift up slightly + //margin-bottom : 0.02cm; + font-size : 0.458cm; + line-height : 0.971em; //Font is misaligned. Shift up slightly + & + * { + margin-top: 0.09cm; + } + } + * + h4 { + margin-top : 0.235cm; //(0.325 - 0.09) + } + h5{ + //margin-top : -0.02cm; //Font is misaligned. Shift up slightly + //margin-bottom : 0.02cm; + font-family : ScalySansSmallCapsRemake; + font-size : 0.423cm; + font-weight : 900; + line-height : 0.951em; //Font is misaligned. Shift up slightly + & + * { + margin-top : 0.2cm; + } + } + //***************************** + // * TABLE + // *****************************/ + table{ + .useSansSerif(); + width : 100%; + line-height : 16px; + & + * { + margin-top : 0.325cm; + } + thead{ + display: table-row-group; + font-weight : 800; + th{ + vertical-align : bottom; + //padding : 0.14em 0.4em; + padding : 0px 1.5px; // Both of these are temporary, just to force + //line-height : 16px; // PDF to render at same height until Chrome 108 + } + } + tbody{ + tr{ + td{ + //padding : 0.14em 0.4em; + padding : 0px 1.5px; // Both of these are temporary, just to force + //line-height : 16px; // PDF to render at same height until Chrome 108 + } + &:nth-child(odd){ + background-color : var(--HB_Color_Accent); + } + } + } + } + //***************************** + // * NOTE + // *****************************/ + .note{ + .useSansSerif(); + background-color : var(--HB_Color_Accent); + border-style : solid; + border-width : 1px; + border-image : @noteBorderImage 12 stretch; + border-image-outset : 9px 0px; + border-image-width : 11px; + padding : 0.13cm 0.16cm; + filter : drop-shadow(1px 4px 6px #888); + .page :where(&) { + margin-top : 9px; //Prevent top border getting cut off on colbreak + } + & + * { + margin-top : 0.45cm; + } + h5 { + font-size : 0.375cm; + } + p{ + display : block; + padding-bottom : 0px; + } + :last-child { margin-bottom : 0; } } - h3{ - font-family : ScalySansRemake; - font-weight : 800; - font-variant : small-caps; - border-bottom : 2px solid var(--HB_Color_HeaderText); - // margin-top : 0.05cm; //Font is misaligned. Shift up slightly - padding-bottom : 0.05cm; - } - - //Triangle dividers - hr{ - visibility : visible; - height : 6px; - margin : 0.12cm 0cm; - background-image : @redTriangleImage; - background-size : 100% 100%; - border : none; - } - - //Attribute Lists - All text between HRs is red - hr ~ :is(dl,p) { - color : var(--HB_Color_HeaderText); - } - hr:last-of-type { - & ~ :is(dl,p) { - color : inherit; // After the HRs, reset text to black + //************************************ + // * DESCRIPTIVE TEXT BOX + // ************************************/ + .descriptive{ + .useSansSerif(); + background-color : #faf7ea; + border-style : solid; + border-width : 7px; + border-image : @descriptiveBoxImage 12 stretch; + border-image-outset : 4px; + padding : 0.1em; + filter : drop-shadow(0 0 3px #faf7ea); + .page :where(&) { + margin-top : 4px; //Prevent top border getting cut off on colbreak } & + * { - margin-top : 0.325cm; // Space after last HR + margin-top : 0.45cm; + } + h5 { + font-size : 0.375cm; + } + p{ + display : block; + padding-bottom : 0px; + line-height : 1.5em; + } + :last-child { + margin-bottom : 0; + } + } + //***************************** + // * Images Snippets + // *****************************/ + + /* Arist Credit */ + .artist { + position : absolute; + width : auto; + text-align : center; + font-family : WalterTurncoat; + font-size : 0.27cm; + color : var(--HB_Color_CaptionText); + p, p + p { + margin : unset; + text-indent : unset; + line-height : 1em; + } + h5 { + font-size : 1.3em; + font-family : WalterTurncoat; + } + a{ + color : inherit; + text-decoration : unset; + &:hover { + text-decoration : underline; + } } } - // Monster Ability table - hr + table:first-of-type{ - margin : 0; - column-span : none; - color : var(--HB_Color_HeaderText); - background-color : transparent; - border-style : none; - border-image : none; - -webkit-column-span : none; - tr { - background-color : transparent; - } - td,th { - padding: 0px; + /* Watermark */ + .watermark { + display : grid !important; + place-items : center; + justify-content : center; + position : absolute; + 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; } } - :last-child { - margin-bottom : 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; } - } - //Full Width - .monster.wide{ - .useColumns(0.96, @fillMode: balance); - } + .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; } - //***************************** - // * FOOTER - // *****************************/ - &:after{ - content : ""; - position : absolute; - bottom : 0px; - left : 0px; - z-index : 100; - height : 50px; - width : 100%; - background-image : @footerAccentImage; - background-size : cover; - } - &:nth-child(even){ + //***************************** + // * MONSTER STAT BLOCK + // *****************************/ + .monster { + .useSansSerif(); + &.frame { + border-style : solid; + border-width : 7px 6px; + background-color : var(--HB_Color_MonsterStatBackground); + background-image : @monsterBlockBackground; + border-image : @monsterBorderImage 14 round; + border-image-outset : 0px 2px; + background-blend-mode : overlay; + background-attachment : fixed; + filter : drop-shadow(1px 4px 6px #888); + padding : 4px 2px; + margin-left : -0.16cm; + margin-right : -0.16cm; + width : calc(100% + 0.32cm); + } + + position : relative; + padding : 0px; + margin-bottom : 0.325cm; + + //Headers + h2{ + font-size : 0.62cm; + line-height : 1em; + margin : 0; + &+p { + font-size : 0.304cm; //Monster size and type subtext + margin-bottom : 0; + } + } + h3{ + font-family : ScalySansRemake; + font-weight : 800; + font-variant : small-caps; + border-bottom : 2px solid var(--HB_Color_HeaderText); + // margin-top : 0.05cm; //Font is misaligned. Shift up slightly + padding-bottom : 0.05cm; + } + + //Triangle dividers + hr{ + visibility : visible; + height : 6px; + margin : 0.12cm 0cm; + background-image : @redTriangleImage; + background-size : 100% 100%; + border : none; + } + + //Attribute Lists - All text between HRs is red + hr ~ :is(dl,p) { + color : var(--HB_Color_HeaderText); + } + hr:last-of-type { + & ~ :is(dl,p) { + color : inherit; // After the HRs, reset text to black + } + & + * { + margin-top : 0.325cm; // Space after last HR + } + } + + // Monster Ability table + hr + table:first-of-type{ + margin : 0; + column-span : none; + color : var(--HB_Color_HeaderText); + background-color : transparent; + border-style : none; + border-image : none; + -webkit-column-span : none; + tr { + background-color : transparent; + } + td,th { + padding: 0px; + } + } + + :last-child { + margin-bottom : 0; + } + } + + //Full Width + .monster.wide{ + .useColumns(0.96, @fillMode: balance); + } + + //***************************** + // * FOOTER + // *****************************/ &:after{ - transform : scaleX(-1); + content : ""; + position : absolute; + bottom : 0px; + left : 0px; + z-index : 100; + height : 50px; + width : 100%; + background-image : @footerAccentImage; + background-size : cover; + } + &:nth-child(even){ + &:after{ + transform : scaleX(-1); + } + .pageNumber{ + left : 2px; + } + .footnote{ + left : 80px; + text-align : left; + } } .pageNumber{ - left : 2px; + position : absolute; + right : 2px; + bottom : 22px; + width : 50px; + font-size : 0.9em; + color : var(--HB_Color_Footnotes); + text-align : center; + text-indent : 0; + &.auto::after { + content : counter(phb-page-numbers); + } } .footnote{ - left : 80px; - text-align : left; + position : absolute; + right : 80px; + bottom : 32px; + z-index : 150; + width : 200px; + font-size : 0.8em; + color : var(--HB_Color_Footnotes); + text-align : right; } - } - .pageNumber{ - position : absolute; - right : 2px; - bottom : 22px; - width : 50px; - font-size : 0.9em; - color : var(--HB_Color_Footnotes); - text-align : center; - text-indent : 0; - &.auto::after { - content : counter(phb-page-numbers); + //************************************ + // * CODE BLOCKS + // ************************************/ + code{ + font-family : "Courier New", Courier, monospace; + font-size : 0.325; + padding : 0px 4px; + color : #58180d; + background-color : #faf7ea; + border-radius : 4px; + white-space : pre-wrap; + overflow-wrap : break-word; } - } - .footnote{ - position : absolute; - right : 80px; - bottom : 32px; - z-index : 150; - width : 200px; - font-size : 0.8em; - color : var(--HB_Color_Footnotes); - text-align : right; - } - //************************************ - // * CODE BLOCKS - // ************************************/ - code{ - font-family : "Courier New", Courier, monospace; - font-size : 0.325; - padding : 0px 4px; - color : #58180d; - background-color : #faf7ea; - border-radius : 4px; - white-space : pre-wrap; - overflow-wrap : break-word; - } - pre code{ - width : 100%; - display : inline-block; - border-style : solid; - border-width : 1px; - border-image : @codeBorderImage 26 stretch; - border-image-width : 10px; - border-image-outset : 2px; - border-radius : 12px; - margin-bottom : 2px; - padding : 0.15cm; - .page :where(&) { - margin-top : 2px; //Prevent top border getting cut off on colbreak + pre code{ + width : 100%; + display : inline-block; + border-style : solid; + border-width : 1px; + border-image : @codeBorderImage 26 stretch; + border-image-width : 10px; + border-image-outset : 2px; + border-radius : 12px; + margin-bottom : 2px; + padding : 0.15cm; + .page :where(&) { + margin-top : 2px; //Prevent top border getting cut off on colbreak + } + & + * { + margin-top : 0.325cm; + } } - & + * { - margin-top : 0.325cm; + //***************************** + // * EXTRAS + // *****************************/ + hr{ + visibility : hidden; + margin : 0px; + } + .columnSplit { + visibility : hidden; + -webkit-column-break-after : always; + break-after : always; + -moz-column-break-after : always; + } + //Avoid breaking up + blockquote,table{ + z-index : 15; + -webkit-column-break-inside : avoid; + page-break-inside : avoid; + break-inside : avoid; + } + //Text indent right after table + table+p{ + text-indent : 1em; + } + // 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; } } //***************************** - // * EXTRAS + // * SPELL LIST // *****************************/ - hr{ - visibility : hidden; - margin : 0px; + .page .spellList{ + .useSansSerif(); + column-count : 2; + ul+h5{ + margin-top : 15px; + } + p, ul{ + font-size : 0.352cm; + line-height : 1.265em; + } + ul{ + margin-bottom : 0.5em; + padding-left : 1em; + text-indent : -1em; + list-style-type : none; + -webkit-column-break-inside : auto; + page-break-inside : auto; + break-inside : auto; + } + &.wide{ + column-count : 4; + } } - .columnSplit { - visibility : hidden; - -webkit-column-break-after : always; - break-after : always; - -moz-column-break-after : always; - } - //Avoid breaking up - blockquote,table{ - z-index : 15; - -webkit-column-break-inside : avoid; - page-break-inside : avoid; - break-inside : avoid; - } - //Text indent right after table - table+p{ - text-indent : 1em; - } - // 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; - } -} -//***************************** -// * SPELL LIST -// *****************************/ -.page .spellList{ - .useSansSerif(); - column-count : 2; - ul+h5{ - margin-top : 15px; - } - p, ul{ - font-size : 0.352cm; - line-height : 1.265em; - } - ul{ - margin-bottom : 0.5em; - padding-left : 1em; - text-indent : -1em; - list-style-type : none; - -webkit-column-break-inside : auto; - page-break-inside : auto; - break-inside : auto; - } - &.wide{ - column-count : 4; - } -} //***************************** // * CLASS TABLE @@ -883,43 +884,44 @@ body { } } -//***************************** -// * DEFINITION LISTS -// *****************************/ -.page { - dl { - line-height : 1.25em; - padding-left : 1em; - white-space : pre-line; - & + * { - margin-top : 0.28cm; + //***************************** + // * DEFINITION LISTS + // *****************************/ + .page { + dl { + line-height : 1.25em; + padding-left : 1em; + white-space : pre-line; + & + * { + margin-top : 0.28cm; + } } + dl + * { + margin-top : 0.17cm; + } + p + dl { + margin-top: 0.17cm; + } + dt { + display : inline; + margin-right : 5px; + margin-left : -1em; + } + dd { + display : inline; + margin-left : 0px; + text-indent : 0px; + } } - dl + * { - margin-top : 0.17cm; - } - p + dl { - margin-top: 0.17cm; + + //***************************** + // * WIDE + // *****************************/ + .page .wide{ + margin-bottom : 0.325cm; } - dt { - display : inline; - margin-right : 5px; - margin-left : -1em; - } - dd { - display : inline; - margin-left : 0px; - text-indent : 0px; - } -} -//***************************** -// * WIDE -// *****************************/ -.page .wide{ - margin-bottom : 0.325cm; -} - -.page h1 + *{ - margin-top : 0; + .page h1 + *{ + margin-top : 0; + } } diff --git a/themes/V3/Blank/style.less b/themes/V3/Blank/style.less index 985a34528..387b6612f 100644 --- a/themes/V3/Blank/style.less +++ b/themes/V3/Blank/style.less @@ -1,276 +1,278 @@ -@import (less) './themes/fonts/5e/fonts.less'; -@import (less) './themes/assets/assets.less'; +@layer V3_Blank { + @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 -} - -@page { margin: 0; } -body { - counter-reset : phb-page-numbers; -} -*{ - -webkit-print-color-adjust : exact; -} - -.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; + :root { + //Colors + --HB_Color_Background : #FFFFFF; // White + --HB_Color_WatercolorStain : #000000; // Black } - //***************************** - // * HEADERS - // *****************************/ - h1,h2,h3,h4,h5,h6{ - font-weight : bold; - line-height : 1.2em; + @page { margin: 0; } + body { + counter-reset : phb-page-numbers; } - h1{ - font-size : 2em; + *{ + -webkit-print-color-adjust : exact; } - h2{ - font-size : 1.5em; + + .useColumns(@multiplier : 1, @fillMode: balance){ + column-fill : @fillMode; + column-count : 2; } - h3{ - font-size : 1.17em; + .columnWrapper{ + max-height : 100%; + column-span : all; + columns : inherit; + column-gap : inherit; } - h4{ - font-size : 1em; + .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; } - h5{ - font-size : 0.83em; - } - //***************************** - // * TABLE - // *****************************/ - table{ - width : 100%; - thead{ - display : table-row-group; + //***************************** + // * BASE + // *****************************/ + .page{ + p{ + overflow-wrap : break-word; + display : block; + } + strong{ font-weight : bold; } - } - div:not(.columnWrapper) > table + table { // Side-by-side tables should not - margin-top : 0; // have vertical spacing. - } + 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; + } - /* 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; + //***************************** + // * 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. + } + + /* 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; } + + //************************************ + // * 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; } } - /* 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; } - - //************************************ - // * 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 + // * MUSTACHE DIVS/SPANS // *****************************/ - .columnSplit { - visibility : hidden; - -webkit-column-break-after : always; - break-after : always; - -moz-column-break-after : always; - margin-top : 0; - & + * { - margin-top : 0; + .page { + .block { + break-inside : avoid; + display : inline-block; + width : 100%; + } + .inline-block { + display : inline-block; + text-indent : initial; } } - //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; - } -} -//***************************** -// * MUSTACHE DIVS/SPANS -// *****************************/ -.page { - .block { - break-inside : avoid; - display : inline-block; - width : 100%; + //***************************** + // * 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; + } } - .inline-block { - display : inline-block; - text-indent : initial; - } -} -//***************************** -// * 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; - &+* { + //***************************** + // * 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/V3/Journal/style.less b/themes/V3/Journal/style.less index 2e2ada5c8..f3b70cec2 100644 --- a/themes/V3/Journal/style.less +++ b/themes/V3/Journal/style.less @@ -1,559 +1,561 @@ -@import (less) './themes/fonts/Journal/fonts.less'; -@import (less) './themes/assets/assets.less'; +@layer V3_Journal { + @import (less) './themes/fonts/Journal/fonts.less'; + @import (less) './themes/assets/assets.less'; -:root { - //Colors - --HB_Color_Background : unset; // Light parchment - --HB_Color_Text : #412121; // Dark Maroon Brown - --HB_Color_Text2 : #261C13CC; //Dark Brown - --HB_Color_HeaderText : #58180D; // Dark Maroon - --HB_Color_CaptionText : #766649; // Brown - --HB_Color_WatercolorStain : #BBAD82; // Light brown -} + :root { + //Colors + --HB_Color_Background : unset; // Light parchment + --HB_Color_Text : #412121; // Dark Maroon Brown + --HB_Color_Text2 : #261C13CC; //Dark Brown + --HB_Color_HeaderText : #58180D; // Dark Maroon + --HB_Color_CaptionText : #766649; // Brown + --HB_Color_WatercolorStain : #BBAD82; // Light brown + } -.useSansSerif(){ - font-family : PermanentMarker; - font-size : 0.3cm; - line-height : 1.2em; - color : var(--HB_Color_Text2); - p,dl,ul,ol { + .useSansSerif(){ + font-family : PermanentMarker; + font-size : 0.3cm; line-height : 1.2em; - } - ul, ol { - padding-left : 1em; - } - em{ - font-style : italic; - } - strong{ - font-weight : 800; - font-size : 1.1em; - } - h5 + * { - margin-top : 0.1cm; - } -} -.useColumns(@multiplier : 1, @fillMode: balance){ - column-gap : 0.5cm; -} - -.page{ - background-size : 200% 100%; - background-repeat : no-repeat; - filter : drop-shadow(1px 4px 14px black); - background-image : url(/assets/Journal/Background1.webp); - padding : 2.1cm 1.9cm 1.7cm 3.8cm; - &:nth-of-type(2n + 1) { - background-position : left; - } - &:nth-of-type(2n) { - background-position : right; - padding : 2.1cm 3.9cm 1.7cm 1.8cm; - } - &:nth-of-type(2) { - background-image : url(/assets/Journal/Background2.webp); //Only first page should show ribbon - } - - & .columnWrapper { - //transform: rotate(-0.5deg); // Breaks absolute positioning of images/footers. Wait for Chrome fix - } -} - - //***************************** - // * BASE - // *****************************/ -.page{ - color : var(--HB_Color_Text); - font-family : ReenieBeanie; - font-size : 0.53cm; - line-height : 0.8em; - p + * { - margin-top : 0.325cm; - } - p + p{ - margin-top : 0; - } - ul{ - margin-bottom : 0.8em; - } - ol{ - margin-bottom : 0.8em; - } - em{ - text-decoration : underline; - font-style : unset; - } - del{ - text-decoration-style: double; - } - - //Indents after p or lists - p+p, ul+p, ol+p{ - text-indent : 1em; - } - //***************************** - // * HEADERS - // *****************************/ - h1,h2,h3,h4,h5{ - font-family : FrederickaTheGreat; - font-weight : unset; - color : var(--HB_Color_HeaderText); - } - h1{ - margin-bottom : 0.18cm; //Margin-bottom only because this is WIDE - font-size : 0.89cm; - line-height : 1em; - font-variant : small-caps; - &+p::first-letter{ - float : left; - font-family : FrederickaTheGreat; - line-height : 1em; - font-size : 1.9em; - padding-left : 40px; //Allow background color to extend into margins - margin-top : -0.3cm; - margin-bottom : -20px; - margin-left : -40px; - margin-right : 0.1em; - padding-top : 0.3em; - padding-bottom : 2px; + color : var(--HB_Color_Text2); + p,dl,ul,ol { + line-height : 1.2em; } - &+p::first-line{ - font-variant : small-caps; + ul, ol { + padding-left : 1em; + } + em{ + font-style : italic; + } + strong{ + font-weight : 800; + font-size : 1.1em; + } + h5 + * { + margin-top : 0.1cm; } } - h2{ - font-size : 0.62cm; - line-height : 0.988em; //Font is misaligned. Shift up slightly + .useColumns(@multiplier : 1, @fillMode: balance){ + column-gap : 0.5cm; } - h3{ - font-size : 0.575cm; - line-height : 0.995em; //Font is misaligned. Shift up slightly - margin-left : -0.9em; - } - h4{ - font-size : 0.55cm; - line-height : 0.971em; //Font is misaligned. Shift up slightly - color : var(--HB_Color_Text); - padding-bottom : 5px; - transform:rotate(0deg); + + .page{ + background-size : 200% 100%; + background-repeat : no-repeat; + filter : drop-shadow(1px 4px 14px black); + background-image : url(/assets/Journal/Background1.webp); + padding : 2.1cm 1.9cm 1.7cm 3.8cm; + &:nth-of-type(2n + 1) { + background-position : left; + } &:nth-of-type(2n) { - transform:rotate(1deg); + background-position : right; + padding : 2.1cm 3.9cm 1.7cm 1.8cm; } - &:nth-of-type(3n) { - transform:rotate(-1.5deg); + &:nth-of-type(2) { + background-image : url(/assets/Journal/Background2.webp); //Only first page should show ribbon + } + + & .columnWrapper { + //transform: rotate(-0.5deg); // Breaks absolute positioning of images/footers. Wait for Chrome fix } } - h5{ - font-family : PermanentMarker; - font-size : 0.4cm; - color : var(--HB_Color_Text2); - font-weight : bold; - line-height : 0.951em; //Font is misaligned. Shift up slightly - & + * { + + //***************************** + // * BASE + // *****************************/ + .page{ + color : var(--HB_Color_Text); + font-family : ReenieBeanie; + font-size : 0.53cm; + line-height : 0.8em; + p + * { + margin-top : 0.325cm; + } + p + p{ + margin-top : 0; + } + ul{ + margin-bottom : 0.8em; + } + ol{ + margin-bottom : 0.8em; + } + em{ + text-decoration : underline; + font-style : unset; + } + del{ + text-decoration-style: double; + } + + //Indents after p or lists + p+p, ul+p, ol+p{ + text-indent : 1em; + } + //***************************** + // * HEADERS + // *****************************/ + h1,h2,h3,h4,h5{ + font-family : FrederickaTheGreat; + font-weight : unset; + color : var(--HB_Color_HeaderText); + } + h1{ + margin-bottom : 0.18cm; //Margin-bottom only because this is WIDE + font-size : 0.89cm; + line-height : 1em; + font-variant : small-caps; + &+p::first-letter{ + float : left; + font-family : FrederickaTheGreat; + line-height : 1em; + font-size : 1.9em; + padding-left : 40px; //Allow background color to extend into margins + margin-top : -0.3cm; + margin-bottom : -20px; + margin-left : -40px; + margin-right : 0.1em; + padding-top : 0.3em; + padding-bottom : 2px; + } + &+p::first-line{ + font-variant : small-caps; + } + } + h2{ + font-size : 0.62cm; + line-height : 0.988em; //Font is misaligned. Shift up slightly + } + h3{ + font-size : 0.575cm; + line-height : 0.995em; //Font is misaligned. Shift up slightly + margin-left : -0.9em; + } + h4{ + font-size : 0.55cm; + line-height : 0.971em; //Font is misaligned. Shift up slightly + color : var(--HB_Color_Text); + padding-bottom : 5px; + transform:rotate(0deg); + &:nth-of-type(2n) { + transform:rotate(1deg); + } + &:nth-of-type(3n) { + transform:rotate(-1.5deg); + } + } + h5{ + font-family : PermanentMarker; + font-size : 0.4cm; + color : var(--HB_Color_Text2); + font-weight : bold; + line-height : 0.951em; //Font is misaligned. Shift up slightly + & + * { + margin-top : 0.2cm; + } + } + //***************************** + // * TABLE + // *****************************/ + table{ + .useSansSerif(); + & + * { + margin-top : 0.325cm; + } + thead{ + th{ + vertical-align : bottom; + padding : 0.14em 0; + } + } + tbody{ + tr{ + td{ + padding : 0.14em 0; + } + &:nth-child(odd){ + background-image : linear-gradient(to left, #41212100, #41212122, #41212100); + } + } + } + } + //***************************** + // * NOTE + // *****************************/ + .note{ + .useSansSerif(); + border-style : solid; + border-width : 1px; + border-image-source : url(/assets/Journal/Border1.png); + border-image-slice : 18 18 18 18; + border-image-width : 6px 6px 6px 6px; + border-image-outset : 5px 5px 5px 5px; + border-image-repeat : stretch stretch; + background-image : url(/assets/Journal/HashMarks.png), + linear-gradient(to bottom right, #ff000000, #a36a4e14, #41212100); + background-size : 120% 120%; + background-repeat : no-repeat; + background-position : center; + padding : 0.2cm; + :where(&) { + margin-top : 9px; //Prevent top border getting cut off on colbreak + } + & + * { + margin-top : 0.45cm; + } + h5 { + font-size : 0.375cm; + } + p{ + padding-bottom : 0px; + } + :last-child { + margin-bottom : 0; + } + } + //************************************ + // * DESCRIPTIVE TEXT BOX + // ************************************/ + * + .descriptive { + margin-top : 0.6cm; + } + .descriptive{ + .useSansSerif(); + border-style : solid; + border-width : 1px; + border-image-source : url('/assets/Journal/Border2.png'); + border-image-slice : 48 48 48 48; + border-image-width : 20px; + border-image-outset : 16px 20px 16px 20px; + border-image-repeat : stretch stretch; + background-image : url(/assets/Journal/HashMarks.png), + linear-gradient(to bottom right, #ff000000, #41212114, #41212100); + background-size : 120% 120%; + background-repeat : no-repeat; + background-position : center; + padding : 0.2cm; + :where(&) { + margin-top : 4px; //Prevent top border getting cut off on colbreak + } + & + * { + margin-top : 0.45cm; + } + h5 { + font-size : 0.375cm; + } + p{ + padding-bottom : 0px; + } + :last-child { + margin-bottom : 0; + } + } + //***************************** + // * Images Snippets + // *****************************/ + + /* Arist Credit */ + .artist { + position : absolute; + width : auto; + text-align : center; + font-family : WalterTurncoat; + font-size : 0.27cm; + color : var(--HB_Color_CaptionText); + p, p + p { + margin : unset; + text-indent : unset; + line-height : 1em; + } + h5 { + font-size : 1.3em; + font-family : WalterTurncoat; + } + a{ + color : inherit; + text-decoration : unset; + &:hover { + text-decoration : underline; + } + } + } + + //***************************** + // * MONSTER STAT BLOCK + // *****************************/ + .monster { + .useSansSerif(); + &.frame { + border-style : solid; + border-width : 7px 6px; + border-image-source : url('/assets/Journal/Border3.png'); + border-image-slice : 63 74 63 74; + border-image-width : 15px 20px 15px 20px; + border-image-outset : 12px 12px 12px 12px; + border-image-repeat : stretch round; + background-image : url('/assets/Journal/HashMarks.png'), + linear-gradient(to bottom right, #ff000000, #a36a4e14, #41212100); + background-blend-mode : screen multiply; + background-size : 100%; + padding : 0.2cm; + } + + color: var(--HB_Color_Text); + position : relative; + padding : 0px; + margin-bottom : 0.325cm; + + //Headers + h2{ + font-size : 0.62cm; + line-height : 1em; + margin : 0; + &+p { + margin-bottom : 0; //Monster size and type subtext + } + } + h3{ + margin-left : 0; + font-variant : small-caps; + padding-bottom : 0.05cm; + } + hr{ + visibility : visible; + height : 6px; + margin : 0.12cm 0cm; + background-image : url('/assets/Journal/HorizontalRule.png'); + background-size : 100% 100%; + } + hr:last-of-type + * { + margin-top : 0.325cm; // Space after last HR + } + + // Monster Ability table + hr + table:first-of-type{ + margin : 0; + column-span : none; + background-image : none; + border-style : none; + border-image : none; + color : inherit; + tr { + background-image : none; + } + td,th { + padding: 0px; + } + } + + :last-child { + margin-bottom : 0; + } + + strong, em { + font-style : normal; + text-decoration : none; + } + } + + //Full Width + .monster.wide{ + .useColumns(0.96, @fillMode: balance); + } + + //***************************** + // * FOOTER + // *****************************/ + &:nth-child(odd){ + .pageNumber{ + left : 3cm; + } + .footnote{ + left : 4.5cm; + text-align : left; + } + } + .pageNumber{ + font-family : FrederickaTheGreat; + position : absolute; + right : 3cm; + bottom : 1.25cm; + width : 50px; + font-size : 0.9em; + color : var(--HB_Color_HeaderText); + text-align : center; + text-indent : 0; + &.auto::after { + content : counter(phb-page-numbers); + } + } + .footnote{ + position : absolute; + right : 4.5cm; + bottom : 1.25cm; + z-index : 150; + width : 200px; + font-size : 0.8em; + color : var(--HB_Color_HeaderText); + text-align : right; + } + //************************************ + // * CODE BLOCKS + // ************************************/ + code{ + font-size : 0.3cm; + padding : 0px 4px; + color : var(--HB_Color_Text); + vertical-align : middle; + background-color : #faf7ea; + border-radius : 4px; + } + + pre code{ + border-style : solid; + border-width : 1px; + border-image : @codeBorderImage 26 stretch; + border-image-width : 10px; + border-image-outset : 2px; + border-radius : 12px; + margin-bottom : 2px; + padding : 0.15cm; + .page :where(&) { + margin-top : 2px; //Prevent top border getting cut off on colbreak + } + & + * { + margin-top : 0.325cm; + } + } + //***************************** + // * EXTRAS + // *****************************/ + hr{ + visibility : hidden; + border : none; + margin : 0px; + } + //Text indent right after table + table+p{ + text-indent : 1em; + } + a, a:visited, a:hover { + color: var(--HB_Color_Text); + transition:all 1s ease; + } + a:hover { + color:red; + } + } + //***************************** + // * SPELL LIST + // *****************************/ + + .page .spellList{ + .useSansSerif(); + font-family : PermanentMarker; + column-count : 2; + ul+h5{ + margin-top : 15px; + } + ul{ + margin-bottom : 0.5em; + padding-left : 1em; + text-indent : -1em; + list-style-type : none; + -webkit-column-break-inside : auto; + page-break-inside : auto; + break-inside : auto; + } + &.wide{ + column-count : 4; + } + } + + //***************************** + // * CLASS TABLE + // *****************************/ + .page .classTable{ + th[colspan]:not([rowspan]) { + white-space : nowrap; + } + h5 + table{ margin-top : 0.2cm; } } //***************************** - // * TABLE + // * TABLE OF CONTENTS // *****************************/ - table{ - .useSansSerif(); - & + * { - margin-top : 0.325cm; - } - thead{ - th{ - vertical-align : bottom; - padding : 0.14em 0; - } - } - tbody{ - tr{ - td{ - padding : 0.14em 0; - } - &:nth-child(odd){ - background-image : linear-gradient(to left, #41212100, #41212122, #41212100); - } - } - } - } - //***************************** - // * NOTE - // *****************************/ - .note{ - .useSansSerif(); - border-style : solid; - border-width : 1px; - border-image-source : url(/assets/Journal/Border1.png); - border-image-slice : 18 18 18 18; - border-image-width : 6px 6px 6px 6px; - border-image-outset : 5px 5px 5px 5px; - border-image-repeat : stretch stretch; - background-image : url(/assets/Journal/HashMarks.png), - linear-gradient(to bottom right, #ff000000, #a36a4e14, #41212100); - background-size : 120% 120%; - background-repeat : no-repeat; - background-position : center; - padding : 0.2cm; - :where(&) { - margin-top : 9px; //Prevent top border getting cut off on colbreak - } - & + * { - margin-top : 0.45cm; - } - h5 { - font-size : 0.375cm; - } - p{ - padding-bottom : 0px; - } - :last-child { - margin-bottom : 0; - } - } - //************************************ - // * DESCRIPTIVE TEXT BOX - // ************************************/ - * + .descriptive { - margin-top : 0.6cm; - } - .descriptive{ - .useSansSerif(); - border-style : solid; - border-width : 1px; - border-image-source : url('/assets/Journal/Border2.png'); - border-image-slice : 48 48 48 48; - border-image-width : 20px; - border-image-outset : 16px 20px 16px 20px; - border-image-repeat : stretch stretch; - background-image : url(/assets/Journal/HashMarks.png), - linear-gradient(to bottom right, #ff000000, #41212114, #41212100); - background-size : 120% 120%; - background-repeat : no-repeat; - background-position : center; - padding : 0.2cm; - :where(&) { - margin-top : 4px; //Prevent top border getting cut off on colbreak - } - & + * { - margin-top : 0.45cm; - } - h5 { - font-size : 0.375cm; - } - p{ - padding-bottom : 0px; - } - :last-child { - margin-bottom : 0; - } - } - //***************************** - // * Images Snippets - // *****************************/ - - /* Arist Credit */ - .artist { - position : absolute; - width : auto; - text-align : center; - font-family : WalterTurncoat; - font-size : 0.27cm; - color : var(--HB_Color_CaptionText); - p, p + p { - margin : unset; - text-indent : unset; - line-height : 1em; - } - h5 { - font-size : 1.3em; - font-family : WalterTurncoat; + .page .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 : unset; - &:hover { + text-decoration : none; + &:hover{ text-decoration : underline; } } - } - - //***************************** - // * MONSTER STAT BLOCK - // *****************************/ - .monster { - .useSansSerif(); - &.frame { - border-style : solid; - border-width : 7px 6px; - border-image-source : url('/assets/Journal/Border3.png'); - border-image-slice : 63 74 63 74; - border-image-width : 15px 20px 15px 20px; - border-image-outset : 12px 12px 12px 12px; - border-image-repeat : stretch round; - background-image : url('/assets/Journal/HashMarks.png'), - linear-gradient(to bottom right, #ff000000, #a36a4e14, #41212100); - background-blend-mode : screen multiply; - background-size : 100%; - padding : 0.2cm; - } - - color: var(--HB_Color_Text); - position : relative; - padding : 0px; - margin-bottom : 0.325cm; - - //Headers - h2{ - font-size : 0.62cm; - line-height : 1em; - margin : 0; - &+p { - margin-bottom : 0; //Monster size and type subtext + h4 { + margin-top : 0.2cm; + line-height : 0.4cm; + & + ul li { + line-height: 1.2em; } } - h3{ - margin-left : 0; - font-variant : small-caps; - padding-bottom : 0.05cm; - } - hr{ - visibility : visible; - height : 6px; - margin : 0.12cm 0cm; - background-image : url('/assets/Journal/HorizontalRule.png'); - background-size : 100% 100%; - } - hr:last-of-type + * { - margin-top : 0.325cm; // Space after last HR - } - - // Monster Ability table - hr + table:first-of-type{ - margin : 0; - column-span : none; - background-image : none; - border-style : none; - border-image : none; - color : inherit; - tr { - background-image : none; + ul{ + padding-left : 0; + list-style-type : none; + li + li h3 { + margin-top : 0.26cm; + line-height : 1em } - td,th { - padding: 0px; + h3 span:first-child::after { + border : none; } - } - - :last-child { - margin-bottom : 0; - } - - strong, em { - font-style : normal; - text-decoration : none; - } - } - - //Full Width - .monster.wide{ - .useColumns(0.96, @fillMode: balance); - } - - //***************************** - // * FOOTER - // *****************************/ - &:nth-child(odd){ - .pageNumber{ - left : 3cm; - } - .footnote{ - left : 4.5cm; - text-align : left; - } - } - .pageNumber{ - font-family : FrederickaTheGreat; - position : absolute; - right : 3cm; - bottom : 1.25cm; - width : 50px; - font-size : 0.9em; - color : var(--HB_Color_HeaderText); - text-align : center; - text-indent : 0; - &.auto::after { - content : counter(phb-page-numbers); - } - } - .footnote{ - position : absolute; - right : 4.5cm; - bottom : 1.25cm; - z-index : 150; - width : 200px; - font-size : 0.8em; - color : var(--HB_Color_HeaderText); - text-align : right; - } - //************************************ - // * CODE BLOCKS - // ************************************/ - code{ - font-size : 0.3cm; - padding : 0px 4px; - color : var(--HB_Color_Text); - vertical-align : middle; - background-color : #faf7ea; - border-radius : 4px; - } - - pre code{ - border-style : solid; - border-width : 1px; - border-image : @codeBorderImage 26 stretch; - border-image-width : 10px; - border-image-outset : 2px; - border-radius : 12px; - margin-bottom : 2px; - padding : 0.15cm; - .page :where(&) { - margin-top : 2px; //Prevent top border getting cut off on colbreak - } - & + * { - margin-top : 0.325cm; - } - } - //***************************** - // * EXTRAS - // *****************************/ - hr{ - visibility : hidden; - border : none; - margin : 0px; - } - //Text indent right after table - table+p{ - text-indent : 1em; - } - a, a:visited, a:hover { - color: var(--HB_Color_Text); - transition:all 1s ease; - } - a:hover { - color:red; - } -} -//***************************** -// * SPELL LIST -// *****************************/ - -.page .spellList{ - .useSansSerif(); - font-family : PermanentMarker; - column-count : 2; - ul+h5{ - margin-top : 15px; - } - ul{ - margin-bottom : 0.5em; - padding-left : 1em; - text-indent : -1em; - list-style-type : none; - -webkit-column-break-inside : auto; - page-break-inside : auto; - break-inside : auto; - } - &.wide{ - column-count : 4; - } -} - -//***************************** -// * CLASS TABLE -// *****************************/ -.page .classTable{ - th[colspan]:not([rowspan]) { - white-space : nowrap; - } - h5 + table{ - margin-top : 0.2cm; - } -} -//***************************** -// * TABLE OF CONTENTS -// *****************************/ -.page .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; - li + li h3 { - margin-top : 0.26cm; - line-height : 1em - } - h3 span:first-child::after { - border : none; - } - span { - display : table-cell; - &:first-child { - position : relative; - overflow : hidden; - &::after { - content : ""; - position : absolute; - bottom : 0.08cm; - margin-left : 0.06cm; /* Spacing before dot leaders */ - width : 100%; - border-bottom : 0.05cm dotted #000; + span { + display : table-cell; + &:first-child { + position : relative; + overflow : hidden; + &::after { + content : ""; + position : absolute; + bottom : 0.08cm; + margin-left : 0.06cm; /* Spacing before dot leaders */ + width : 100%; + border-bottom : 0.05cm dotted #000; + } + } + &:last-child { + font-family : ReenieBeanie; + font-size : 0.34cm; + font-weight : normal; + color : black; + text-align : right; + vertical-align : bottom; /* Keep page number bottom-aligned */ + width : 1%; + padding-left : 0.06cm; /* Spacing after dot leaders */ + /*white-space : nowrap; /* Uncomment if needed */ } } - &:last-child { - font-family : ReenieBeanie; - font-size : 0.34cm; - font-weight : normal; - color : black; - text-align : right; - vertical-align : bottom; /* Keep page number bottom-aligned */ - width : 1%; - padding-left : 0.06cm; /* Spacing after dot leaders */ - /*white-space : nowrap; /* Uncomment if needed */ + ul { /*List indent*/ + margin-left : 1em; } } - ul { /*List indent*/ - margin-left : 1em; + &.wide{ + .useColumns(0.96, @fillMode: balance); } } - &.wide{ - .useColumns(0.96, @fillMode: balance); + + //***************************** + // * WIDE + // *****************************/ + .page .wide { + margin-bottom : 0.45cm; } } - -//***************************** -// * WIDE -// *****************************/ -.page .wide { - margin-bottom : 0.45cm; -}