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

Merge branch 'master' of https://github.com/naturalcrit/homebrewery into SnippetsReorg

Browse Source
This commit is contained in:
Víctor Losada Hernández
2025-03-24 13:07:16 +01:00
parent 712ee111d4 bbd95ffe2a
commit ea4dd5defd
100 changed files with 2722 additions and 2614 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.circleci/config.yml
View File

@@ -73,9 +73,6 @@ jobs:
- run:
name: Test - Non-Breaking Spaces
command: npm run test:non-breaking-spaces
- run:
name: Test - Paragraph Justification
command: npm run test:paragraph-justification
- run:
name: Test - Variables
command: npm run test:variables

68
changelog.md
View File

@@ -88,6 +88,70 @@ pre {
## changelog
For a full record of development, visit our [Github Page](https://github.com/naturalcrit/homebrewery).
### Tuesday 03/18/2025 - v3.18.1
{{taskList
##### G-Ambatte
* [x] Revert colon rendering from br elements to blank divs
##### 5e-Cleric
* [x] Allow for local connections within a same network when running a local version
Fixes issue [#4094](https://github.com/naturalcrit/homebrewery/issues/4094)
* [x] Add US Letter size page snippet
Fixes issue [#3893](https://github.com/naturalcrit/homebrewery/issues/3893)
}}
### Monday 03/10/2025 - v3.18.0
{{taskList
##### dbolack
* [x] Add ability to paste in any Share ID/URL into a brew's {{openSans :fas_circle_info: **Properties** :fas_arrow_right: **THEMES**}} selection, as long as that brew has been tagged as `meta:theme`. You can now share your custom brew themes without needing to make a personal copy.
* [x] Begin migration of custom Markdown extensions into their own NPM packages, for easier adoption by other users or projects
* [x] Fix external HTML appearing in open codeblocks
Fixes issue [#3206](https://github.com/naturalcrit/homebrewery/issues/3206)
* [x] Fix tables not rendering when directly after text
##### G-Ambatte
* [x] Cleanup of "cover pages" in the {{openSans :fas_rectangle_list: **NAVIGATION**}} list
* [x] Fix autosave triggering when no changes are present
Fixes issue [#4051](https://github.com/naturalcrit/homebrewery/issues/4051)
* [x] Remove empty table rows resulting from rowspan
Fixes issue [#1729](https://github.com/naturalcrit/homebrewery/issues/1729)
##### 5e-Cleric
* [x] Style fixes for covers art and logos on A4 size pages
* [x] Fix crash when trying to open brews that don't exist
* [x] Tweaks and style update styling on {{openSans **VAULT** :fas_dungeon:}} page.
Fixes issue [#4079](https://github.com/naturalcrit/homebrewery/issues/4079)
##### Calculuschild
* [x] `꞉꞉꞉꞉` now produces `<br>` instead of a `<div>`
* [x] Fix typos in tables freezing the editor
Fixes issue [#4059](https://github.com/naturalcrit/homebrewery/issues/4059)
##### MollyMaclachlan (New Contributor!)
* [x] Fixed typos in the Monster Stat Block snippet
Fixes issue [#4073](https://github.com/naturalcrit/homebrewery/issues/4073)
##### All
* [x] Update dependencies and scripts
* [x] Refactor components and backend tools
}}
\column
### Thursday 01/30/2025 - v3.17.0
{{taskList
@@ -169,7 +233,7 @@ Fixes issue [#3824](https://github.com/naturalcrit/homebrewery/issues/3824)
* [x] Refactor components and fix various errors
}}
\column
\page
### Wednesday 11/27/2024 - v3.16.1
@@ -217,8 +281,6 @@ Fixes issue [#3744](https://github.com/naturalcrit/homebrewery/issues/3744)
* [x] Multiple code refactors, cleanups, and security fixes
}}
\page
### Saturday 10/12/2024 - v3.16.0
{{taskList

59
client/admin/admin.jsx
View File

@@ -1,47 +1,48 @@
require('./admin.less');
const React = require('react');
const createClass = require('create-react-class');
import './admin.less';
import React, { useEffect, useState } from 'react';
const BrewUtils = require('./brewUtils/brewUtils.jsx');
const NotificationUtils = require('./notificationUtils/notificationUtils.jsx');
import AuthorUtils from './authorUtils/authorUtils.jsx';
const tabGroups = ['brew', 'notifications'];
const tabGroups = ['brew', 'notifications', 'authors'];
const Admin = createClass({
getDefaultProps : function() {
return {};
},
const Admin = ()=>{
const [currentTab, setCurrentTab] = useState('brew');
getInitialState : function(){
return ({
currentTab : 'brew'
});
},
useEffect(()=>{
setCurrentTab(localStorage.getItem('hbAdminTab'));
}, []);
handleClick : function(newTab){
if(this.state.currentTab === newTab) return;
this.setState({
currentTab : newTab
});
},
useEffect(()=>{
localStorage.setItem('hbAdminTab', currentTab);
}, [currentTab]);
render : function(){
return <div className='admin'>
return (
<div className='admin'>
<header>
<div className='container'>
<i className='fas fa-rocket' />
homebrewery admin
The Homebrewery Admin Page
<a href='/'>back to homepage</a>
</div>
</header>
<main className='container'>
<nav className='tabs'>
{tabGroups.map((tab, idx)=>{ return <button className={tab===this.state.currentTab ? 'active' : ''} key={idx} onClick={()=>{ return this.handleClick(tab); }}>{tab.toUpperCase()}</button>; })}
{tabGroups.map((tab, idx)=>(
<button
className={tab === currentTab ? 'active' : ''}
key={idx}
onClick={()=>setCurrentTab(tab)}>
{tab.toUpperCase()}
</button>
))}
</nav>
{this.state.currentTab==='brew' && <BrewUtils />}
{this.state.currentTab==='notifications' && <NotificationUtils />}
{currentTab === 'brew' && <BrewUtils />}
{currentTab === 'notifications' && <NotificationUtils />}
{currentTab === 'authors' && <AuthorUtils />}
</main>
</div>;
}
});
</div>
);
};
module.exports = Admin;

63
client/admin/admin.less
View File

@@ -22,7 +22,7 @@ body {
}
:where(.admin) {
padding-bottom : 50px;
header {
padding : 20px 0px;
margin-bottom : 30px;
@@ -30,6 +30,7 @@ body {
color : white;
background-color : @red;
i { margin-right : 30px; }
a { float : right; }
}
hr { margin : 30px 0px; }
@@ -48,19 +49,21 @@ body {
}
dl {
@maxItemWidth : 132px;
display : grid;
grid-template-columns : 120px 1fr;
row-gap : 10px;
align-items : center;
justify-items : start;
padding-top : 0.5em;
dt {
float : left;
width : @maxItemWidth;
clear : left;
height : fit-content;
font-weight : 900;
text-align : right;
&::after { content : ' : '; }
}
dd {
height : 1em;
padding : 0 0 0.5em 0;
margin-left : @maxItemWidth + 6px;
}
dd { height : fit-content; }
}
.tabs button {
@@ -90,11 +93,45 @@ body {
}
}
.error {
background: rgb(178, 54, 54);
color:white;
font-weight: 900;
margin-block:10px;
table {
padding : 10px;
tr {
border-bottom : 1px solid;
&:last-of-type { border : none; }
&:nth-child(even) { background : #DDDDDD; }
}
thead {
background : rgb(193,236,230);
border-bottom : 2px solid;
}
th, td {
padding : 5px 10px;
vertical-align : middle;
text-align : center;
border-right : 1px solid;
&:last-child { border-right : none; }
}
th { font-weight : 900; }
td {
&:first-child {
font-weight : 900;
text-align : left;
}
}
}
.error {
float : right;
padding : 10px;
margin-block : 10px;
font-weight : 900;
color : white;
background : rgb(178, 54, 54);
}
}

87
client/admin/authorUtils/authorLookup/authorLookup.jsx Normal file
View File

@@ -0,0 +1,87 @@
import './authorLookup.less';
import React from 'react';
import request from 'superagent';
const authorLookup = ()=>{
const [author, setAuthor] = React.useState('');
const [searching, setSearching] = React.useState(false);
const [results, setResults] = React.useState([]);
const lookup = async ()=>{
if(!author) return;
setSearching(true);
setResults([]);
const brews = await request.get(`/admin/user/list/${author}`);
setResults(brews.body);
setSearching(false);
};
const renderResults = ()=>{
if(results.length == 0) return <>
<h2>Results</h2>
<p>None found.</p>
</>;
return <>
<h2>{`Results - ${results.length} brews` }</h2>
<table className='resultsTable'>
<thead>
<tr>
<th>Title</th>
<th>Share</th>
<th>Edit</th>
<th>Last Update</th>
<th>Storage</th>
</tr>
</thead>
<tbody>
{results
.sort((a, b)=>{ // Sort brews from most recently updated
if(a.updatedAt > b.updatedAt) return -1;
return 1;
})
.map((brew, idx)=>{
return <tr key={idx}>
<td><strong>{brew.title}</strong></td>
<td><a href={`/share/${brew.shareId}`}>{brew.shareId}</a></td>
<td>{brew.editId}</td>
<td style={{ width: '200px' }}>{brew.updatedAt}</td>
<td>{brew.googleId ? 'Google' : 'Homebrewery'}</td>
</tr>;
})}
</tbody>
</table>
</>;
};
const handleKeyPress = (evt)=>{
if(evt.key === 'Enter') return lookup();
};
const handleChange = (evt)=>{
setAuthor(evt.target.value);
};
return (
<div className='authorLookup'>
<div className='authorLookupInputs'>
<h2>Author Lookup</h2>
<label className='field'>
Author Name:
<input className='fieldInput' value={author} onKeyDown={handleKeyPress} onChange={handleChange} />
<button onClick={lookup}>
<i className={`fas ${searching ? 'fa-spin fa-spinner' : 'fa-search'}`} />
</button>
</label>
</div>
<div className='authorLookupResults'>
{renderResults()}
</div>
</div>
);
};
module.exports = authorLookup;

29
client/admin/authorUtils/authorLookup/authorLookup.less Normal file
View File

@@ -0,0 +1,29 @@
.authorLookup {
position : relative;
display : flex;
flex-direction : column;
.field {
display : flex;
gap : 5px;
align-items : center;
justify-items : stretch;
width : 100%;
margin-bottom : 20px;
input {
height : 33px;
padding : 0px 10px;
margin-bottom : unset;
font-family : monospace;
}
button {
width : 50px;
i { margin-right : 10px; }
}
}
}

13
client/admin/authorUtils/authorUtils.jsx Normal file
View File

@@ -0,0 +1,13 @@
import React from 'react';
import AuthorLookup from './authorLookup/authorLookup.jsx';
const authorUtils = ()=>{
return (
<section className='authorUtils'>
<AuthorLookup />
</section>
);
};
module.exports = authorUtils;

10
client/admin/brewUtils/brewCleanup/brewCleanup.jsx
View File

@@ -1,10 +1,8 @@
require('./brewCleanup.less');
const React = require('react');
const createClass = require('create-react-class');
const request = require('superagent');
const BrewCleanup = createClass({
displayName : 'BrewCleanup',
getDefaultProps(){
@@ -39,9 +37,9 @@ const BrewCleanup = createClass({
if(!this.state.primed) return;
if(!this.state.count){
return <div className='removeBox'>No Matching Brews found.</div>;
return <div className='result noBrews'>No Matching Brews found.</div>;
}
return <div className='removeBox'>
return <div className='result'>
<button onClick={this.cleanup} className='remove'>
{this.state.pending
? <i className='fas fa-spin fa-spinner' />
@@ -52,7 +50,7 @@ const BrewCleanup = createClass({
</div>;
},
render(){
return <div className='BrewCleanup'>
return <div className='brewUtil brewCleanup'>
<h2> Brew Cleanup </h2>
<p>Removes very short brews to tidy up the database</p>
@@ -65,7 +63,7 @@ const BrewCleanup = createClass({
{this.renderPrimed()}
{this.state.error
&& <div className='error'>{this.state.error.toString()}</div>
&& <div className='error noBrews'>{this.state.error.toString()}</div>
}
</div>;
}

9
client/admin/brewUtils/brewCleanup/brewCleanup.less
View File

@@ -1,9 +0,0 @@
.BrewCleanup {
.removeBox {
margin-top : 20px;
button {
margin-right : 10px;
background-color : @red;
}
}
}

9
client/admin/brewUtils/brewCompress/brewCompress.jsx
View File

@@ -1,10 +1,7 @@
require('./brewCompress.less');
const React = require('react');
const createClass = require('create-react-class');
const request = require('superagent');
const BrewCompress = createClass({
displayName : 'BrewCompress',
getDefaultProps(){
@@ -53,9 +50,9 @@ const BrewCompress = createClass({
if(!this.state.primed) return;
if(!this.state.count){
return <div className='removeBox'>No Matching Brews found.</div>;
return <div className='result noBrews'>No Matching Brews found.</div>;
}
return <div className='removeBox'>
return <div className='result'>
<button onClick={this.cleanup} className='remove'>
{this.state.pending
? <i className='fas fa-spin fa-spinner' />
@@ -69,7 +66,7 @@ const BrewCompress = createClass({
</div>;
},
render(){
return <div className='BrewCompress'>
return <div className='brewUtil brewCompress'>
<h2> Brew Compression </h2>
<p>Compresses the text in brews to binary</p>

9
client/admin/brewUtils/brewCompress/brewCompress.less
View File

@@ -1,9 +0,0 @@
.BrewCompress {
.removeBox {
margin-top : 20px;
button {
margin-right : 10px;
background-color : @red;
}
}
}

8
client/admin/brewUtils/brewLookup/brewLookup.jsx
View File

@@ -1,5 +1,3 @@
require('./brewLookup.less');
const React = require('react');
const createClass = require('create-react-class');
const cx = require('classnames');
@@ -55,7 +53,7 @@ const BrewLookup = createClass({
renderFoundBrew(){
const brew = this.state.foundBrew;
return <div className='foundBrew'>
return <div className='result'>
<dl>
<dt>Title</dt>
<dd>{brew.title}</dd>
@@ -90,7 +88,7 @@ const BrewLookup = createClass({
},
render(){
return <div className='brewLookup'>
return <div className='brewUtil brewLookup'>
<h2>Brew Lookup</h2>
<input type='text' value={this.state.query} onChange={this.handleChange} placeholder='edit or share id' />
<button onClick={this.lookup}>
@@ -106,7 +104,7 @@ const BrewLookup = createClass({
{this.state.foundBrew
? this.renderFoundBrew()
: <div className='noBrew'>No brew found.</div>
: <div className='result noBrew'>No brew found.</div>
}
</div>;
}

6
client/admin/brewUtils/brewLookup/brewLookup.less
View File

@@ -1,6 +0,0 @@
.brewLookup {
.cleanButton {
display : inline-block;
width : 100%;
}
}

2
client/admin/brewUtils/brewUtils.jsx
View File

@@ -1,6 +1,6 @@
const React = require('react');
const createClass = require('create-react-class');
require('./brewUtils.less');
const BrewCleanup = require('./brewCleanup/brewCleanup.jsx');
const BrewLookup = require('./brewLookup/brewLookup.jsx');

29
client/admin/brewUtils/brewUtils.less Normal file
View File

@@ -0,0 +1,29 @@
.brewUtil {
.result {
margin-top : 20px;
button {
margin-right : 10px;
background-color : @red;
}
}
.cleanButton {
display : inline-block;
width : 100%;
}
}
.stats {
position : relative;
.pending {
position : absolute;
top : 0.5em;
left : 100px;
width : 100%;
height : 100%;
}
&:has(.pending) { opacity : 0.5; }
dl { grid-template-columns : 200px 250px; }
}

10
client/admin/brewUtils/stats/stats.jsx
View File

@@ -1,11 +1,8 @@
require('./stats.less');
const React = require('react');
const createClass = require('create-react-class');
const cx = require('classnames');
const request = require('superagent');
const Stats = createClass({
displayName : 'Stats',
getDefaultProps(){
@@ -14,7 +11,8 @@ const Stats = createClass({
getInitialState(){
return {
stats : {
totalBrews : 0
totalBrews : 0,
totalPublishedBrews : 0
},
fetching : false
};
@@ -29,11 +27,13 @@ const Stats = createClass({
.finally(()=>this.setState({ fetching: false }));
},
render(){
return <div className='Stats'>
return <div className='brewUtil stats'>
<h2> Stats </h2>
<dl>
<dt>Total Brew Count</dt>
<dd>{this.state.stats.totalBrews}</dd>
<dt>Total Brews Published</dt>
<dd>{this.state.stats.totalPublishedBrews}</dd>
</dl>
{this.state.fetching

13
client/admin/brewUtils/stats/stats.less
View File

@@ -1,13 +0,0 @@
.Stats {
position : relative;
.pending {
position : absolute;
top : 0px;
left : 0px;
width : 100%;
height : 100%;
background-color : rgba(238,238,238, 0.5);
}
}

7
client/admin/notificationUtils/notificationAdd/notificationAdd.less
View File

@@ -6,26 +6,27 @@
.field {
display : grid;
grid-template-columns : 120px 150px;
grid-template-columns : 120px 200px;
align-items : center;
justify-items : stretch;
width : 100%;
margin-bottom : 20px;
input {
height : 33px;
padding : 0px 10px;
margin-bottom : unset;
font-family : monospace;
&[type='date'] { width : 14ch; }
}
textarea {
width : 50ch;
min-height : 7em;
max-height : 20em;
resize : vertical;
padding : 10px;
resize : vertical;
}
}

7
client/admin/notificationUtils/notificationLookup/notificationLookup.less
View File

@@ -1,8 +1,8 @@
.notificationLookup {
width : 450px;
height : fit-content;
.noNotification { margin-block : 20px; }
.notificationList {
display : flex;
flex-direction : column;
@@ -30,11 +30,6 @@
font-size : 20px;
font-weight : 900;
}
dl dt{
font-weight: 900;
}
}
}
.noNotification { margin-block : 20px; }
}

8
client/components/Anchored.less
View File

@@ -2,12 +2,10 @@
.anchored-box {
position : absolute;
visibility : hidden;
justify-self : anchor-center;
@supports (inset-block-start: anchor(bottom)) {
inset-block-start : anchor(bottom);
}
justify-self: anchor-center;
visibility: hidden;
&.active {
visibility: visible;
}
&.active { visibility : visible; }
}

3
client/components/combobox.jsx
View File

@@ -45,6 +45,7 @@ const Combobox = createClass({
},
handleDropdown : function(show){
this.setState({
value : show ? '' : this.props.default,
showDropdown : show,
inputFocused : this.props.autoSuggest.clearAutoSuggestOnClick ? show : false
});
@@ -78,7 +79,7 @@ const Combobox = createClass({
if(!e.target.checkValidity()){
this.setState({
value : this.props.default
}, ()=>this.props.onEntry(e));
});
}
}}
/>

2
client/components/combobox.less
View File

@@ -27,7 +27,7 @@
position : relative;
padding : 5px;
margin : 0 3px;
font-family : "Open Sans";
font-family : 'Open Sans';
font-size : 11px;
cursor : default;
&:hover {

3
client/homebrew/brewRenderer/brewRenderer.jsx
View File

@@ -39,7 +39,7 @@ const BrewPage = (props)=>{
...props
};
const pageRef = useRef(null);
const cleanText = safeHTML(props.contents);
const cleanText = safeHTML(`${props.contents}\n<div class="columnSplit"></div>\n`);
useEffect(()=>{
if(!pageRef.current) return;
@@ -196,7 +196,6 @@ const BrewRenderer = (props)=>{
pageText = pageText.includes('\n') ? pageText.substring(pageText.indexOf('\n') + 1) : ''; // Remove the \page line
}
pageText += `\n\n&nbsp;\n\\column\n&nbsp;`; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
const html = Markdown.render(pageText, index);
return <BrewPage className={classes} index={index} key={index} contents={html} style={styles} attributes={attributes} onVisibilityChange={handlePageVisibilityChange} />;

26
client/homebrew/brewRenderer/brewRenderer.less
View File

@@ -1,21 +1,17 @@
@import (multiple, less) 'shared/naturalcrit/styles/reset.less';
.brewRenderer {
height : 100vh;
padding-top : 60px;
overflow-y : scroll;
will-change : transform;
padding-top : 60px;
height : 100vh;
&:has(.facing, .flow) {
padding : 60px 30px;
}
&.deployment {
background-color: darkred;
}
&:has(.facing, .flow) { padding : 60px 30px; }
&.deployment { background-color : darkred; }
:where(.pages) {
&.facing {
display : grid;
grid-template-columns: repeat(2, auto);
grid-template-rows : repeat(3, auto);
grid-template-columns : repeat(2, auto);
gap : 10px 10px;
justify-content : safe center;
&.recto .page:first-child {
@@ -24,8 +20,8 @@
grid-column-start : 2;
}
& :where(.page) {
margin-left: unset !important;
margin-right : unset !important;
margin-left : unset !important;
}
}
@@ -36,8 +32,8 @@
justify-content : safe center;
& :where(.page) {
flex : 0 0 auto;
margin-left: unset !important;
margin-right : unset !important;
margin-left : unset !important;
}
}
@@ -50,9 +46,7 @@
margin-left : auto;
box-shadow : 1px 4px 14px #000000;
}
*[id] {
scroll-margin-top:100px;
}
*[id] { scroll-margin-top : 100px; }
}
&::-webkit-scrollbar {
width : 20px;
@@ -83,7 +77,5 @@
& > .page { box-shadow : unset; }
}
}
.headerNav {
visibility: hidden;
}
.headerNav { visibility : hidden; }
}

73
client/homebrew/brewRenderer/headerNav/headerNav.jsx
View File

@@ -3,7 +3,6 @@ require('./headerNav.less');
import * as React from 'react';
import * as _ from 'lodash';
const MAX_TEXT_LENGTH = 40;
const HeaderNav = React.forwardRef(({}, pagesRef)=>{
@@ -11,11 +10,30 @@ const HeaderNav = React.forwardRef(({}, pagesRef)=>{
const renderHeaderLinks = ()=>{
if(!pagesRef.current) return;
// Top Level Pages
// Pages that contain an element with a specified class (e.g. cover pages, table of contents)
// will NOT have its content scanned for navigation headers, instead displaying a custom label
// ---
// The property name is class that will be used for detecting the page is a top level page
// The property value is a function that returns the text to be used
const topLevelPages = {
'.frontCover' : (el, pageType)=>{ const text = getHeaderContent(el); return text ? `Cover: ${text}` : 'Cover Page'; },
'.insideCover' : (el, pageType)=>{ const text = getHeaderContent(el); return text ? `Interior: ${text}` : 'Interior Cover Page'; },
'.partCover' : (el, pageType)=>{ const text = getHeaderContent(el); return text ? `Section: ${text}` : 'Section Cover Page'; },
'.backCover' : (el, pageType)=>{ const text = getHeaderContent(el); return text ? `Back: ${text}` : 'Rear Cover Page'; },
'.toc' : ()=>{ return 'Table of Contents'; },
};
const getHeaderContent = (el)=>el.querySelector('h1')?.textContent;
const topLevelPageSelector = Object.keys(topLevelPages).join(',');
const selector = [
'.pages > .page', // All page elements, which by definition have IDs
'.page:not(:has(.toc)) > [id]', // All direct children of non-ToC .page with an ID (Legacy)
'.page:not(:has(.toc)) > .columnWrapper > [id]', // All direct children of non-ToC .page > .columnWrapper with an ID (V3)
'.page:not(:has(.toc)) h2', // All non-ToC H2 titles, like Monster frame titles
`.page:not(:has(${topLevelPageSelector})) > [id]`, // All direct children of non-excluded .pages with an ID (Legacy)
`.page:not(:has(${topLevelPageSelector})) > .columnWrapper > [id]`, // All direct children of non-excluded .page > .columnWrapper with an ID (V3)
`.page:not(:has(${topLevelPageSelector})) h2`, // All non-excluded H2 titles, like Monster frame titles
];
const elements = pagesRef.current.querySelectorAll(selector.join(','));
if(!elements) return;
@@ -30,38 +48,28 @@ const HeaderNav = React.forwardRef(({}, pagesRef)=>{
// }
elements.forEach((el)=>{
if(el.className.match(/\bpage\b/)) {
let text = `Page ${el.id.slice(1)}`; // The ID of a page *should* always be equal to `p` followed by the page number
if(el.querySelector('.toc')){ // If the page contains a table of contents, add "- Contents" to the display text
text += ' - Contents';
};
navList.push({
depth : 0, // Pages are always at the least indented level
text : text,
link : el.id,
className : 'pageLink'
});
return;
}
if(el.localName.match(/^h[1-6]/)){ // Header elements H1 through H6
navList.push({
depth : el.localName[1], // Depth is set by the header level
text : el.textContent, // Use `textContent` because `innerText` is affected by rendering, e.g. 'content-visibility: auto'
link : el.id
});
return;
}
navList.push({
const navEntry = { // Default structure of a navList entry
depth : 7, // All unmatched elements with IDs are set to the maximum depth (7)
text : el.textContent, // Use `textContent` because `innerText` is affected by rendering, e.g. 'content-visibility: auto'
link : el.id
});
});
return _.map(navList, (navItem, index)=>{
return <HeaderNavItem {...navItem} key={index} />;
};
if(el.classList.contains('page')) {
let text = `Page ${el.id.slice(1)}`; // Get the page # by trimming off the 'p' from the ID
const pageType = Object.keys(topLevelPages).find((pageType)=>el.querySelector(pageType));
if(pageType)
text += ` - ${topLevelPages[pageType](el, pageType)}`; // If a Top Level Page, add extra label
navEntry.depth = 0; // Pages are always at the least indented level
navEntry.text = text;
navEntry.className = 'pageLink';
} else if(el.localName.match(/^h[1-6]/)){ // Header elements H1 through H6
navEntry.depth = el.localName[1]; // Depth is set by the header level
}
navList.push(navEntry);
});
return _.map(navList, (navItem, index)=><HeaderNavItem {...navItem} key={index} />
);
};
return <nav className='headerNav'>
@@ -69,8 +77,7 @@ const HeaderNav = React.forwardRef(({}, pagesRef)=>{
{renderHeaderLinks()}
</ul>
</nav>;
}
);
});
const HeaderNavItem = ({ link, text, depth, className })=>{

30
client/homebrew/brewRenderer/headerNav/headerNav.less
View File

@@ -2,44 +2,36 @@
position : fixed;
top : 32px;
left : 0px;
padding: 5px 10px;
background-color: #ccc;
border-radius: 5px;
max-height: calc(100vh - 32px);
max-width : 40vw;
max-height : calc(100vh - 32px);
padding : 5px 10px;
overflow-y : auto;
background-color : #CCCCCC;
border-radius : 5px;
&.active {
padding-bottom : 10px;
.navIcon {
padding-bottom: 10px;
}
}
.navIcon {
cursor: pointer;
.navIcon { padding-bottom : 10px; }
}
.navIcon { cursor : pointer; }
li {
list-style-type : none;
a {
display : inline-block;
width : 100%;
padding : 2px;
font-family : 'Open Sans';
font-size : 12px;
padding: 2px;
color : inherit;
text-decoration : none;
cursor : pointer;
&:hover {
text-decoration: underline;
}
&.pageLink {
font-weight: 900;
}
&:hover { text-decoration : underline; }
&.pageLink { font-weight : 900; }
@depths: 1,2,3,4,5,6,7;
@depths: 0,1,2,3,4,5,6,7;
each(@depths, {
&.depth-@{value} {
padding-left: ((@value - 1) * 0.5em);
padding-left: ((@value) * 0.5em);
}
});
}

4
client/homebrew/brewRenderer/toolBar/toolBar.less
View File

@@ -156,7 +156,7 @@
min-width : 46px;
height : 100%;
&:hover { background-color : #444444; }
&:focus { border : 1px solid #D3D3D3;outline : none;}
&:focus {outline : none; border : 1px solid #D3D3D3;}
&:disabled {
color : #777777;
background-color : unset !important;
@@ -182,8 +182,8 @@
position : absolute;
left : 0;
z-index : 5;
display : flex;
width : 32px;
min-width : unset;
height : 100%;
display : flex;
}

1
client/homebrew/editor/editor.jsx
View File

@@ -456,6 +456,7 @@ const Editor = createClass({
rerenderParent={this.rerenderParent} />
<MetadataEditor
metadata={this.props.brew}
themeBundle={this.props.themeBundle}
onChange={this.props.onMetaChange}
reportError={this.props.reportError}
userThemes={this.props.userThemes}/>

24
client/homebrew/editor/editor.less
View File

@@ -45,26 +45,26 @@
color : green;
}
.emoji:not(.cm-comment) {
margin-left : 2px;
color : #360034;
background : #ffc8ff;
border-radius : 6px;
font-weight : bold;
padding-bottom : 1px;
margin-left : 2px;
font-weight : bold;
color : #360034;
outline : solid 2px #FF96FC;
outline-offset : -2px;
outline : solid 2px #ff96fc;
background : #FFC8FF;
border-radius : 6px;
}
.superscript:not(.cm-comment) {
font-weight : bold;
color : goldenrod;
vertical-align : super;
font-size : 0.9em;
font-weight : bold;
vertical-align : super;
color : goldenrod;
}
.subscript:not(.cm-comment) {
font-weight : bold;
color : rgb(123, 123, 15);
vertical-align : sub;
font-size : 0.9em;
font-weight : bold;
vertical-align : sub;
color : rgb(123, 123, 15);
}
.dl-highlight {
&.dl-colon-highlight {

67
client/homebrew/editor/metadataEditor/metadataEditor.jsx
View File

@@ -4,7 +4,6 @@ const React = require('react');
const createClass = require('create-react-class');
const _ = require('lodash');
import request from '../../utils/request-middleware.js';
const Nav = require('naturalcrit/nav/nav.jsx');
const Combobox = require('client/components/combobox.jsx');
const TagInput = require('../tagInput/tagInput.jsx');
@@ -40,6 +39,7 @@ const MetadataEditor = createClass({
theme : '5ePHB',
lang : 'en'
},
onChange : ()=>{},
reportError : ()=>{}
};
@@ -67,6 +67,11 @@ const MetadataEditor = createClass({
const inputRules = validations[name] ?? [];
const validationErr = inputRules.map((rule)=>rule(e.target.value)).filter(Boolean);
const debouncedReportValidity = _.debounce((target, errMessage)=>{
callIfExists(target, 'setCustomValidity', errMessage);
callIfExists(target, 'reportValidity');
}, 300); // 300ms debounce delay, adjust as needed
// if no validation rules, save to props
if(validationErr.length === 0){
callIfExists(e.target, 'setCustomValidity', '');
@@ -74,14 +79,16 @@ const MetadataEditor = createClass({
...this.props.metadata,
[name] : e.target.value
});
return true;
} else {
// if validation issues, display built-in browser error popup with each error.
const errMessage = validationErr.map((err)=>{
return `- ${err}`;
}).join('\n');
callIfExists(e.target, 'setCustomValidity', errMessage);
callIfExists(e.target, 'reportValidity');
debouncedReportValidity(e.target, errMessage);
return false;
}
},
@@ -102,6 +109,7 @@ const MetadataEditor = createClass({
}
this.props.onChange(this.props.metadata, 'renderer');
},
handlePublish : function(val){
this.props.onChange({
...this.props.metadata,
@@ -112,6 +120,14 @@ const MetadataEditor = createClass({
handleTheme : function(theme){
this.props.metadata.renderer = theme.renderer;
this.props.metadata.theme = theme.path;
this.props.onChange(this.props.metadata, 'theme');
},
handleThemeWritein : function(e) {
const shareId = e.target.value.split('/').pop(); //Extract just the ID if a URL was pasted in
this.props.metadata.theme = shareId;
this.props.onChange(this.props.metadata, 'theme');
},
@@ -200,7 +216,7 @@ const MetadataEditor = createClass({
if(theme.path == this.props.metadata.shareId) return;
const preview = theme.thumbnail || `/themes/${theme.renderer}/${theme.path}/dropdownPreview.png`;
const texture = theme.thumbnail || `/themes/${theme.renderer}/${theme.path}/dropdownTexture.png`;
return <div className='item' key={`${renderer}_${theme.name}`} onClick={()=>this.handleTheme(theme)} title={''}>
return <div className='item' key={`${renderer}_${theme.name}`} value={`${theme.author ?? renderer} : ${theme.name}`} data={theme} title={''}>
{theme.author ?? renderer} : {theme.name}
<div className='texture-container'>
<img src={texture}/>
@@ -210,26 +226,40 @@ const MetadataEditor = createClass({
<img src={preview}/>
</div>
</div>;
});
}).filter(Boolean);
};
const currentRenderer = this.props.metadata.renderer;
const currentTheme = mergedThemes[`${_.upperFirst(this.props.metadata.renderer)}`][this.props.metadata.theme]
?? { name: `!!! THEME MISSING !!! ID=${this.props.metadata.theme}` };
const currentThemeDisplay = this.props.themeBundle?.name ? `${this.props.themeBundle.author ?? currentRenderer} : ${this.props.themeBundle.name}` : 'No Theme Selected';
let dropdown;
if(currentRenderer == 'legacy') {
dropdown =
<Nav.dropdown className='disabled value' trigger='disabled'>
<div> {`Themes are not supported in the Legacy Renderer`} <i className='fas fa-caret-down'></i> </div>
</Nav.dropdown>;
<div className='disabled value' trigger='disabled'>
<div> Themes are not supported in the Legacy Renderer </div>
</div>;
} else {
dropdown =
<Nav.dropdown className='value' trigger='click'>
<div> {currentTheme.author ?? _.upperFirst(currentRenderer)} : {currentTheme.name} <i className='fas fa-caret-down'></i> </div>
{listThemes(currentRenderer)}
</Nav.dropdown>;
<div className='value'>
<Combobox trigger='click'
className='themes-dropdown'
default={currentThemeDisplay}
placeholder='Select from below, or enter the Share URL or ID of a brew with the meta:theme tag'
onSelect={(value)=>this.handleTheme(value)}
onEntry={(e)=>{
e.target.setCustomValidity(''); //Clear the validation popup while typing
if(this.handleFieldChange('theme', e))
this.handleThemeWritein(e);
}}
options={listThemes(currentRenderer)}
autoSuggest={{
suggestMethod : 'includes',
clearAutoSuggestOnClick : true,
filterOn : ['value', 'title']
}}
/>
<small>Select from the list below (built-in themes and brews you have tagged "meta:theme"), or paste in the Share URL or Share ID of any brew.</small>
</div>;
}
return <div className='field themes'>
@@ -251,8 +281,6 @@ const MetadataEditor = createClass({
});
};
const debouncedHandleFieldChange = _.debounce(this.handleFieldChange, 500);
return <div className='field language'>
<label>language</label>
<div className='value'>
@@ -263,7 +291,7 @@ const MetadataEditor = createClass({
onSelect={(value)=>this.handleLanguage(value)}
onEntry={(e)=>{
e.target.setCustomValidity(''); //Clear the validation popup while typing
debouncedHandleFieldChange('lang', e);
this.handleFieldChange('lang', e);
}}
options={listLanguages()}
autoSuggest={{
@@ -271,8 +299,7 @@ const MetadataEditor = createClass({
clearAutoSuggestOnClick : true,
filterOn : ['value', 'detail', 'title']
}}
>
</Combobox>
/>
<small>Sets the HTML Lang property for your brew. May affect hyphenation or spellcheck.</small>
</div>

73
client/homebrew/editor/metadataEditor/metadataEditor.less
View File

@@ -1,16 +1,19 @@
@import 'naturalcrit/styles/colors.less';
.userThemeName {
padding-right : 10px;
padding-left : 10px;
}
.metadataEditor {
position : absolute;
z-index : 5;
box-sizing : border-box;
width : 100%;
height : calc(100vh - 54px); // 54px is the height of the navbar + snippet bar. probably a better way to dynamic get this.
padding : 25px;
overflow-y : auto;
background-color : #999999;
font-size : 13px;
background-color : #999999;
h1 {
margin : 0 0 40px;
@@ -21,8 +24,8 @@
h2 {
margin : 20px 0;
font-weight : bold;
color : #555555;
border-bottom : 2px solid gray;
color: #555;
}
& > div { margin-bottom : 10px; }
@@ -51,10 +54,10 @@
min-width : 200px;
& > label {
width : 80px;
font-size : 0.9em;
font-weight : 800;
line-height : 1.8em;
text-transform : uppercase;
font-size: .9em;
}
& > .value {
flex : 1 1 auto;
@@ -71,8 +74,7 @@
border : 1px solid gray;
&:focus { outline : 1px solid #444444; }
}
&.thumbnail {
height : 1.4em;
&.thumbnail, &.themes {
label { line-height : 2.0em; }
.value {
overflow : hidden;
@@ -88,6 +90,17 @@
}
}
&.themes {
.value {
overflow : visible;
text-overflow : auto;
}
button {
padding-right : 5px;
padding-left : 5px;
}
}
&.description {
flex : 1;
textarea.value {
@@ -123,8 +136,8 @@
margin-right : 15px;
font-size : 0.9em;
font-weight : 800;
white-space : nowrap;
vertical-align : middle;
white-space : nowrap;
cursor : pointer;
user-select : none;
}
@@ -151,41 +164,20 @@
.colorButton(@red);
}
}
.authors.field .value {
line-height : 1.5em;
}
.authors.field .value { line-height : 1.5em; }
.themes.field {
.navDropdownContainer {
& .dropdown-container {
position : relative;
z-index : 100;
background-color : white;
&.disabled {
}
& .dropdown-options { overflow-y : visible; }
.disabled {
font-style : italic;
color : dimgray;
background-color : darkgray;
}
& > div:first-child {
padding : 3px 3px;
background-color : inherit;
border : 1px solid gray;
i { float : right; }
&:hover {
color : white;
background-color : @blue;
}
}
.navDropdown .item > p {
width : 45%;
height : 1.1em;
overflow : hidden;
text-overflow : ellipsis;
white-space : nowrap;
}
.navDropdown {
position : absolute;
width : 100%;
box-shadow : 0px 5px 10px rgba(0, 0, 0, 0.3);
.item {
position : relative;
padding : 3px 3px;
@@ -214,11 +206,7 @@
border-bottom : 2px solid hsl(0,0%,40%);
}
}
&:hover {
color : white;
background-color : @blue;
}
&:hover > .preview { opacity : 1; }
.texture-container {
position : absolute;
top : 0;
@@ -229,7 +217,7 @@
overflow : hidden;
> img {
position : absolute;
top : 0px;
top : 0;
right : 0;
width : 50%;
min-height : 100%;
@@ -237,8 +225,13 @@
mask-image : linear-gradient(90deg, transparent, black 20%);
}
}
&:hover {
color : white;
background-color : @blue;
filter : unset;
}
}
&:hover > .preview { opacity : 1; }
}
}

13
client/homebrew/editor/metadataEditor/validations.js
View File

@@ -27,6 +27,19 @@ module.exports = {
(value)=>{
return new RegExp(/^([a-zA-Z]{2,3})(-[a-zA-Z]{4})?(-(?:[0-9]{3}|[a-zA-Z]{2}))?$/).test(value) === false && (value.length > 0) ? 'Invalid language code.' : null;
}
],
theme : [
(value)=>{
const URL = global.config.baseUrl.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'); //Escape any regex characters
const shareIDPattern = '[a-zA-Z0-9-_]{12}';
const shareURLRegex = new RegExp(`^${URL}\\/share\\/${shareIDPattern}$`);
const shareIDRegex = new RegExp(`^${shareIDPattern}$`);
if(value?.length === 0) return null;
if(shareURLRegex.test(value)) return null;
if(shareIDRegex.test(value)) return null;
return 'Must be a valid Share URL or a 12-character ID.';
}
]
};

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

@@ -259,7 +259,7 @@ const Snippetbar = createClass({
</div>
</div>
)
);
},
render : function(){

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

@@ -22,7 +22,7 @@
justify-content : flex-end;
min-width : 225px;
&:only-child { margin-left : auto;min-width:unset;}
&:only-child {min-width : unset; margin-left : auto;}
>div {
display : flex;
@@ -39,9 +39,7 @@
text-align : center;
cursor : pointer;
&.editorTool:not(.active) {
cursor:not-allowed;
}
&.editorTool:not(.active) { cursor : not-allowed; }
&:hover,&.selected { background-color : #999999; }
&.text {
@@ -151,9 +149,9 @@
position : absolute;
top : 100%;
z-index : 1000;
visibility : hidden;
padding : 0px;
margin-left : -5px;
visibility : hidden;
background-color : #DDDDDD;
.snippet {
position : relative;

10
client/homebrew/editor/tagInput/tagInput.jsx
View File

@@ -8,13 +8,13 @@ const TagInput = ({ unique = true, values = [], ...props }) => {
const [tagList, setTagList] = useState(values.map((value)=>({ value, editing: false })));
useEffect(()=>{
handleChange(tagList.map((context)=>context.value))
}, [tagList])
handleChange(tagList.map((context)=>context.value));
}, [tagList]);
const handleChange = (value)=>{
props.onChange({
target : { value }
})
});
};
const handleInputKeyDown = ({ evt, value, index, options = {} })=>{
@@ -35,7 +35,7 @@ const TagInput = ({ unique = true, values = [], ...props }) => {
}
// add new tag
if(originalValue === null){
return [...prevContext, { value: newValue, editing: false }]
return [...prevContext, { value: newValue, editing: false }];
}
// update existing tag
return prevContext.map((context, i)=>{
@@ -65,7 +65,7 @@ const TagInput = ({ unique = true, values = [], ...props }) => {
className='tag'
onClick={()=>editTag(index)}>
{context.value}
<button onClick={(evt)=>{evt.stopPropagation(); submitTag(null, context.value, index)}}><i className='fa fa-times fa-fw'/></button>
<button onClick={(evt)=>{evt.stopPropagation(); submitTag(null, context.value, index);}}><i className='fa fa-times fa-fw'/></button>
</li>
);
};

18
client/homebrew/homebrew.less
View File

@@ -3,14 +3,14 @@
height : 100%;
.sitePage {
display : flex;
height : 100%;
background-color : @steel;
flex-direction : column;
height : 100%;
overflow-y : hidden;
background-color : @steel;
.content {
position : relative;
height : calc(~"100% - 29px"); //Navbar height
flex : auto;
height : calc(~'100% - 29px'); //Navbar height
overflow-y : hidden;
}
&.listPage .content {
@@ -19,18 +19,14 @@
&::-webkit-scrollbar {
width : 20px;
&:horizontal {
height: 20px;
width : auto;
height : 20px;
}
&-thumb {
background: linear-gradient(90deg, #d3c1af 15px, #00000000 15px);
&:horizontal{
background: linear-gradient(0deg, #d3c1af 15px, #00000000 15px);
}
}
&-corner {
visibility: hidden;
background : linear-gradient(90deg, #D3C1AF 15px, #00000000 15px);
&:horizontal { background : linear-gradient(0deg, #D3C1AF 15px, #00000000 15px); }
}
&-corner { visibility : hidden; }
}
}
}

13
client/homebrew/navbar/error-navitem.jsx
View File

@@ -116,6 +116,19 @@ const ErrorNavItem = createClass({
</Nav.item>;
}
if(HBErrorCode === '10') {
return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
Oops!
<div className='errorContainer' onClick={clearError}>
Looks like the brew you have selected
as a theme is not tagged for use as a
theme. Verify that
brew <a className='lowercase' target='_blank' rel='noopener noreferrer' href={`/share/${response.body.brewId}`}>
{response.body.brewId}</a> has the <span className='lowercase'>meta:theme</span> tag!
</div>
</Nav.item>;
}
return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
Oops!
<div className='errorContainer'>

84
client/homebrew/navbar/error-navitem.less
View File

@@ -4,75 +4,67 @@
}
.errorContainer {
animation-name: glideDown;
animation-duration: 0.4s;
position : absolute;
top : 100%;
left : 50%;
z-index : 1000;
width : 140px;
padding : 3px;
color : white;
background-color : #333;
border : 3px solid #444;
border-radius : 5px;
transform : translate(-50% + 3px, 10px);
text-align : center;
font-size : 10px;
font-weight : 800;
color : white;
text-align : center;
text-transform : uppercase;
.lowercase {
text-transform : none;
}
a{
color : @teal;
}
&:before {
content: "";
width: 0px;
height: 0px;
background-color : #333333;
border : 3px solid #444444;
border-radius : 5px;
transform : translate(-50% + 3px, 10px);
animation-name : glideDown;
animation-duration : 0.4s;
.lowercase { text-transform : none; }
a { color : @teal; }
&::before {
position : absolute;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 10px solid #444;
left: 53px;
top : -23px;
}
&:after {
content: "";
left : 53px;
width : 0px;
height : 0px;
position: absolute;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
content : '';
border-top : 10px solid transparent;
border-bottom: 10px solid #333;
left: 53px;
border-right : 10px solid transparent;
border-bottom : 10px solid #444444;
border-left : 10px solid transparent;
}
&::after {
position : absolute;
top : -19px;
left : 53px;
width : 0px;
height : 0px;
content : '';
border-top : 10px solid transparent;
border-right : 10px solid transparent;
border-bottom : 10px solid #333333;
border-left : 10px solid transparent;
}
.deny {
width : 48%;
margin : 1px;
padding : 5px;
background-color : #333;
display : inline-block;
border-left : 1px solid #666;
width : 48%;
padding : 5px;
margin : 1px;
background-color : #333333;
border-left : 1px solid #666666;
.animate(background-color);
&:hover{
background-color : red;
}
&:hover { background-color : red; }
}
.confirm {
width : 48%;
margin : 1px;
padding : 5px;
background-color : #333;
display : inline-block;
width : 48%;
padding : 5px;
margin : 1px;
color : white;
background-color : #333333;
.animate(background-color);
&:hover{
background-color : teal;
}
&:hover { background-color : teal; }
}
}

12
client/homebrew/navbar/navbar.less
View File

@@ -24,11 +24,11 @@
}
.homebrew nav {
background-color : #333333;
position : relative;
z-index : 2;
display : flex;
justify-content : space-between;
background-color : #333333;
.navSection {
display : flex;
@@ -82,8 +82,8 @@
font-weight : 800;
line-height : 13px;
color : white;
text-decoration : none;
text-transform : uppercase;
text-decoration : none;
cursor : pointer;
background-color : #333333;
i {
@@ -106,11 +106,11 @@
display : block;
width : 100%;
overflow : hidden;
text-overflow : ellipsis;
font-size : 12px;
font-weight : 800;
color : white;
text-align : center;
text-overflow : ellipsis;
text-transform : initial;
white-space : nowrap;
background-color : transparent;
@@ -170,16 +170,16 @@
h4 {
box-sizing : border-box;
display : block;
flex-basis : 20%;
flex-grow : 1;
flex-basis : 20%;
min-width : 76px;
padding : 5px 0;
color : #BBBBBB;
text-align : center;
}
p {
flex-basis : 80%;
flex-grow : 1;
flex-basis : 80%;
padding : 5px 0;
font-family : 'Open Sans', sans-serif;
font-size : 10px;
@@ -215,10 +215,10 @@
z-index : 10000;
box-sizing : border-box;
display : block;
visibility : hidden;
width : 100%;
padding : 13px 5px;
text-align : center;
visibility : hidden;
background-color : #333333;
}
}

105
client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
View File

@@ -1,37 +1,36 @@
.brewItem {
position : relative;
box-sizing : border-box;
display : inline-block;
vertical-align : top;
box-sizing : border-box;
box-sizing : border-box;
overflow : hidden;
width : 48%;
min-height : 105px;
margin-right : 15px;
margin-bottom : 15px;
padding : 5px 15px 2px 6px;
padding-right : 15px;
border : 1px solid #c9ad6a;
margin-right : 15px;
margin-bottom : 15px;
overflow : hidden;
vertical-align : top;
background-color : #CAB2802E;
border : 1px solid #C9AD6A;
border-radius : 5px;
box-shadow : 0px 4px 5px 0px #333333;
break-inside : avoid;
-webkit-column-break-inside : avoid;
page-break-inside : avoid;
break-inside : avoid;
box-shadow : 0px 4px 5px 0px #333;
background-color : #cab2802e;
.thumbnail {
position : absolute;
width: 150px;
height: 100%;
top : 0;
right : 0;
z-index : -1;
background-size: contain;
width : 150px;
height : 100%;
background-repeat : no-repeat;
background-position : right top;
mask-image: linear-gradient(80deg, #0000 20%, #050 40%);
-webkit-mask-image: linear-gradient(80deg, #0000 20%, #050 40%);
background-size : contain;
opacity : 50%;
-webkit-mask-image : linear-gradient(80deg, #00000000 20%, #005500 40%);
mask-image : linear-gradient(80deg, #00000000 20%, #005500 40%);
}
.text {
min-height : 54px;
@@ -43,94 +42,76 @@
.info {
position : initial;
bottom : 2px;
font-family : ScalySansRemake;
font-family : "ScalySansRemake";
font-size : 1.2em;
& > span {
margin-right : 12px;
line-height : 1.5em;
a {
color:inherit;
}
a { color : inherit; }
}
}
.brewTags span {
background-color: #c8ac6e3b;
margin: 2px;
padding: 2px;
border: 1px solid #c8ac6e;
border-radius: 4px;
white-space: nowrap;
display : inline-block;
padding : 2px;
margin : 2px;
font-weight : bold;
border-color: currentColor;
white-space : nowrap;
cursor : pointer;
&:before {
background-color : #C8AC6E3B;
border : 1px solid #C8AC6E;
border-color : currentColor;
border-radius : 4px;
&::before {
margin-right : 3px;
font-family : 'Font Awesome 5 Free';
font-size : 12px;
margin-right: 3px;
}
&.type {
background-color: #0080003b;
color : #008000;
&:before{
content: '\f0ad';
}
background-color : #0080003B;
&::before { content : '\f0ad'; }
}
&.group {
background-color: #5050503b;
color : #000000;
&:before{
content: '\f500';
}
background-color : #5050503B;
&::before { content : '\f500'; }
}
&.meta {
background-color: #0000803b;
color : #000080;
&:before{
content: '\f05a';
}
background-color : #0000803B;
&::before { content : '\f05a'; }
}
&.system {
background-color: #8000003b;
color : #800000;
&:before{
content: '\f518';
}
background-color : #8000003B;
&::before { content : '\f518'; }
}
}
&:hover {
.links{
opacity : 1;
}
}
&:nth-child(2n + 1){
margin-right : 0px;
.links { opacity : 1; }
}
&:nth-child(2n + 1) { margin-right : 0px; }
.links {
.animate(opacity);
position : absolute;
top : 0px;
right : 0px;
height : 100%;
width : 2em;
opacity : 0;
background-color : fade(black, 60%);
height : 100%;
text-align : center;
background-color : fade(black, 60%);
opacity : 0;
a {
.animate(opacity);
display : block;
margin : 8px 0px;
opacity : 0.6;
font-size : 1.3em;
color : white;
text-decoration : unset;
&:hover{
opacity : 1;
}
i{
cursor : pointer;
}
opacity : 0.6;
&:hover { opacity : 1; }
i { cursor : pointer; }
}
}
.googleDriveIcon {
@@ -139,10 +120,10 @@
margin : -5px;
}
.homebreweryIcon {
mix-blend-mode : darken;
height : 24px;
position : relative;
top : 5px;
left : -5px;
height : 24px;
mix-blend-mode : darken;
}
}

152
client/homebrew/pages/basePages/listPage/listPage.less
View File

@@ -20,170 +20,144 @@
z-index : 1;
.page {
.noColumns() !important; //Needed to override PHB Theme since this is on a lower @layer
&::after{
display : none;
}
&::after { display : none; }
.noBrews {
margin : 10px 0px;
font-size : 1.3em;
font-style : italic;
}
.brewCollection {
h1:hover{
cursor: pointer;
}
h1:hover { cursor : pointer; }
.active::before, .inactive::before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 0.6cm;
padding-right : 0.5em;
font-family : 'Font Awesome 5 Free';
font-size : 0.6cm;
font-weight : 900;
}
.active {
color: var(--HB_Color_HeaderText);
}
.active::before {
content: '\f107';
}
.inactive {
color: #707070;
}
.inactive::before {
content: '\f105';
}
.active { color : var(--HB_Color_HeaderText); }
.active::before { content : '\f107'; }
.inactive { color : #707070; }
.inactive::before { content : '\f105'; }
}
}
}
.sort-container {
font-family : 'Open Sans', sans-serif;
position : sticky;
top : 0;
left : 0;
width : 100%;
height : 30px;
background-color : #555;
border-top : 1px solid #666;
border-bottom : 1px solid #666;
color : white;
text-align : center;
z-index : 1;
display : flex;
justify-content : center;
align-items : baseline;
column-gap : 15px;
row-gap : 5px;
flex-wrap : wrap;
row-gap : 5px;
column-gap : 15px;
align-items : baseline;
justify-content : center;
width : 100%;
height : 30px;
font-family : 'Open Sans', sans-serif;
color : white;
text-align : center;
background-color : #555555;
border-top : 1px solid #666666;
border-bottom : 1px solid #666666;
h6 {
text-transform : uppercase;
font-family : 'Open Sans', sans-serif;
font-size : 11px;
font-weight : bold;
text-transform : uppercase;
}
.sort-option {
display : flex;
align-items : center;
padding: 0 8px;
color: #ccc;
height : 100%;
padding : 0 8px;
color : #CCCCCC;
&:hover{
background-color : #444;
}
&:hover { background-color : #444444; }
&.active {
font-weight : bold;
color: #ddd;
background-color: #333;
color : #DDDDDD;
background-color : #333333;
button {
color: white;
font-weight: 800;
height : 100%;
& + .sortDir {
padding-left: 5px;
}
font-weight : 800;
color : white;
& + .sortDir { padding-left : 5px; }
}
}
}
.filter-option {
margin-left : 20px;
background-color : transparent !important;
font-size : 11px;
i{
padding-right : 5px;
}
background-color : transparent !important;
i { padding-right : 5px; }
}
button {
background-color : transparent;
font-family : 'Open Sans', sans-serif;
text-transform : uppercase;
font-weight : normal;
font-size : 11px;
color : #ccc;
padding : 0;
font-family : 'Open Sans', sans-serif;
font-size : 11px;
font-weight : normal;
color : #CCCCCC;
text-transform : uppercase;
background-color : transparent;
}
}
.tags-container {
height : 30px;
background-color : #555;
border-top : 1px solid #666;
border-bottom : 1px solid #666;
color : white;
display : flex;
justify-content : center;
align-items : center;
column-gap : 15px;
row-gap : 5px;
flex-wrap : wrap;
row-gap : 5px;
column-gap : 15px;
align-items : center;
justify-content : center;
height : 30px;
color : white;
background-color : #555555;
border-top : 1px solid #666666;
border-bottom : 1px solid #666666;
span {
padding : 3px;
font-family : 'Open Sans', sans-serif;
font-size : 11px;
font-weight : bold;
color : #DFDFDF;
cursor : pointer;
border : 1px solid;
border-radius : 3px;
padding : 3px;
cursor : pointer;
color: #dfdfdf;
&:before {
font-family: 'Font Awesome 5 Free';
font-size: 12px;
&::before {
margin-right : 3px;
}
&:after {
content: '\f00d';
font-family : 'Font Awesome 5 Free';
font-size : 12px;
}
&::after {
margin-left : 3px;
font-family : 'Font Awesome 5 Free';
font-size : 12px;
content : '\f00d';
}
&.type {
background-color : #008000;
border-color: #00a000;
&:before{
content: '\f0ad';
}
border-color : #00A000;
&::before { content : '\f0ad'; }
}
&.group {
background-color : #505050;
border-color : #000000;
&:before{
content: '\f500';
}
&::before { content : '\f500'; }
}
&.meta {
background-color : #000080;
border-color: #0000a0;
&:before{
content: '\f05a';
}
border-color : #0000A0;
&::before { content : '\f05a'; }
}
&.system {
background-color : #800000;
border-color: #a00000;
&:before{
content: '\f518';
}
border-color : #A00000;
&::before { content : '\f518'; }
}
}
}

16
client/homebrew/pages/basePages/uiPage/uiPage.less
View File

@@ -1,7 +1,7 @@
.homebrew {
.uiPage.sitePage {
.content {
width : ~"min(90vw, 1000px)";
width : ~'min(90vw, 1000px)';
padding : 2% 4%;
margin-top : 25px;
margin-right : auto;
@@ -17,19 +17,19 @@
border : 2px solid black;
border-radius : 5px;
button {
width : 125px;
margin-right : 5px;
color : black;
background-color : transparent;
border : 1px solid black;
border-radius : 5px;
width : 125px;
color : black;
margin-right : 5px;
&.active {
background-color: #0007;
color : white;
&:before {
content: '\f00c';
font-family: 'FONT AWESOME 5 FREE';
background-color : #00000077;
&::before {
margin-right : 5px;
font-family : 'FONT AWESOME 5 FREE';
content : '\f00c';
}
}
}

61
client/homebrew/pages/editPage/editPage.jsx
View File

@@ -102,6 +102,14 @@ const EditPage = createClass({
window.onbeforeunload = function(){};
document.removeEventListener('keydown', this.handleControlKeys);
},
componentDidUpdate : function(){
const hasChange = this.hasChanges();
if(this.state.isPending != hasChange){
this.setState({
isPending : hasChange
});
}
},
handleControlKeys : function(e){
if(!(e.ctrlKey || e.metaKey)) return;
@@ -138,15 +146,13 @@ const EditPage = createClass({
this.setState((prevState)=>({
brew : { ...prevState.brew, text: text },
isPending : true,
htmlErrors : htmlErrors,
}), ()=>{if(this.state.autoSave) this.trySave();});
},
handleStyleChange : function(style){
this.setState((prevState)=>({
brew : { ...prevState.brew, style: style },
isPending : true
brew : { ...prevState.brew, style: style }
}), ()=>{if(this.state.autoSave) this.trySave();});
},
@@ -158,8 +164,7 @@ const EditPage = createClass({
brew : {
...prevState.brew,
...metadata
},
isPending : true,
}
}), ()=>{if(this.state.autoSave) this.trySave();});
},
@@ -247,16 +252,17 @@ const EditPage = createClass({
});
if(!res) return;
this.savedBrew = res.body;
this.savedBrew = {
...this.state.brew,
googleId : res.body.googleId ? res.body.googleId : null,
editId : res.body.editId,
shareId : res.body.shareId,
version : res.body.version
};
history.replaceState(null, null, `/edit/${this.savedBrew.editId}`);
this.setState((prevState)=>({
brew : { ...prevState.brew,
googleId : this.savedBrew.googleId ? this.savedBrew.googleId : null,
editId : this.savedBrew.editId,
shareId : this.savedBrew.shareId,
version : this.savedBrew.version
},
this.setState(()=>({
brew : this.savedBrew,
isPending : false,
isSaving : false,
unsavedTime : new Date()
@@ -311,7 +317,14 @@ const EditPage = createClass({
},
renderSaveButton : function(){
if(this.state.autoSaveWarning && this.hasChanges()){
// #1 - Currently saving, show SAVING
if(this.state.isSaving){
return <Nav.item className='save' icon='fas fa-spinner fa-spin'>saving...</Nav.item>;
}
// #2 - Unsaved changes exist, autosave is OFF and warning timer has expired, show AUTOSAVE WARNING
if(this.state.isPending && this.state.autoSaveWarning){
this.setAutosaveWarning();
const elapsedTime = Math.round((new Date() - this.state.unsavedTime) / 1000 / 60);
const text = elapsedTime == 0 ? 'Autosave is OFF.' : `Autosave is OFF, and you haven't saved for ${elapsedTime} minutes.`;
@@ -324,18 +337,17 @@ const EditPage = createClass({
</Nav.item>;
}
if(this.state.isSaving){
return <Nav.item className='save' icon='fas fa-spinner fa-spin'>saving...</Nav.item>;
// #3 - Unsaved changes exist, click to save, show SAVE NOW
// Use trySave(true) instead of save() to use debounced save function
if(this.state.isPending){
return <Nav.item className='save' onClick={()=>this.trySave(true)} color='blue' icon='fas fa-save'>Save Now</Nav.item>;
}
if(this.state.isPending && this.hasChanges()){
return <Nav.item className='save' onClick={this.save} color='blue' icon='fas fa-save'>Save Now</Nav.item>;
}
if(!this.state.isPending && !this.state.isSaving && this.state.autoSave){
// #4 - No unsaved changes, autosave is ON, show AUTO-SAVED
if(this.state.autoSave){
return <Nav.item className='save saved'>auto-saved.</Nav.item>;
}
if(!this.state.isPending && !this.state.isSaving){
// DEFAULT - No unsaved changes, show SAVED
return <Nav.item className='save saved'>saved.</Nav.item>;
}
},
handleAutoSave : function(){
@@ -379,7 +391,7 @@ const EditPage = createClass({
const title = `${this.props.brew.title} ${systems}`;
const text = `Hey guys! I've been working on this homebrew. I'd love your feedback. Check it out.
**[Homebrewery Link](${global.config.publicUrl}/share/${shareLink})**`;
**[Homebrewery Link](${global.config.baseUrl}/share/${shareLink})**`;
return `https://www.reddit.com/r/UnearthedArcana/submit?title=${encodeURIComponent(title.toWellFormed())}&text=${encodeURIComponent(text)}`;
},
@@ -410,7 +422,7 @@ const EditPage = createClass({
<Nav.item color='blue' href={`/share/${shareLink}`}>
view
</Nav.item>
<Nav.item color='blue' onClick={()=>{navigator.clipboard.writeText(`${global.config.publicUrl}/share/${shareLink}`);}}>
<Nav.item color='blue' onClick={()=>{navigator.clipboard.writeText(`${global.config.baseUrl}/share/${shareLink}`);}}>
copy url
</Nav.item>
<Nav.item color='blue' href={this.getRedditLink()} newTab={true} rel='noopener noreferrer'>
@@ -443,6 +455,7 @@ const EditPage = createClass({
reportError={this.errorReported}
renderer={this.state.brew.renderer}
userThemes={this.props.userThemes}
themeBundle={this.state.themeBundle}
snippetBundle={this.state.themeBundle.snippets}
updateBrew={this.updateBrew}
onCursorPageChange={this.handleEditorCursorPageChange}

20
client/homebrew/pages/editPage/editPage.less
View File

@@ -1,29 +1,25 @@
@keyframes glideDown {
0% {transform : translate(-50% + 3px, 0px);
opacity : 0;}
100% {transform : translate(-50% + 3px, 10px);
opacity : 1;}
0% {
opacity : 0;transform : translate(-50% + 3px, 0px);}
100% {
opacity : 1;transform : translate(-50% + 3px, 10px);}
}
.editPage {
.navItem.save {
position : relative;
width : 106px;
text-align : center;
position : relative;
&.saved {
color : #666666;
cursor : initial;
color : #666;
}
}
.googleDriveStorage {
position : relative;
}
.googleDriveStorage { position : relative; }
.googleDriveStorage img {
height : 18px;
padding : 0px;
margin : -5px;
&.inactive {
filter: grayscale(1);
}
&.inactive { filter : grayscale(1); }
}
}

8
client/homebrew/pages/errorPage/errors/errorIndex.js
View File

@@ -168,6 +168,14 @@ const errorIndex = (props)=>{
**Brew ID:** ${props.brew.brewId}`,
// Theme Not Valid
'10' : dedent`
## The selected theme is not tagged as a theme.
The brew selected as a theme exists, but has not been marked for use as a theme with the \`theme:meta\` tag.
If the selected brew is your document, you may designate it as a theme by adding the \`theme:meta\` tag.`,
//account page when account is not defined
'50' : dedent`
## You are not signed in

2
client/homebrew/pages/homePage/homePage.jsx
View File

@@ -100,7 +100,7 @@ const HomePage = createClass({
return <div className='homePage sitePage'>
<Meta name='google-site-verification' content='NwnAQSSJZzAT7N-p5MY6ydQ7Njm67dtbu73ZSyE5Fy4' />
{this.renderNavbar()}
<div className="content">
<div className='content'>
<SplitPane onDragFinish={this.handleSplitMove}>
<Editor
ref={this.editor}

28
client/homebrew/pages/homePage/homePage.less
View File

@@ -3,48 +3,38 @@
a.floatingNewButton {
.animate(background-color);
position : absolute;
display : block;
right : 70px;
bottom : 50px;
z-index : 100;
z-index : 5001;
display : block;
padding : 1em;
background-color : @orange;
font-size : 1.5em;
color : white;
text-decoration : none;
background-color : @orange;
box-shadow : 3px 3px 15px black;
&:hover{
background-color : darken(@orange, 20%);
}
&:hover { background-color : darken(@orange, 20%); }
}
.floatingSaveButton {
.animateAll();
position : absolute;
display : block;
right : 200px;
bottom : 70px;
z-index : 100;
z-index : 5000;
display : block;
padding : 0.8em;
cursor : pointer;
background-color : @blue;
font-size : 0.8em;
color : white;
text-decoration : none;
cursor : pointer;
background-color : @blue;
box-shadow : 3px 3px 15px black;
&:hover{
background-color : darken(@blue, 20%);
}
&.show{
right : 350px;
}
&:hover { background-color : darken(@blue, 20%); }
&.show { right : 350px; }
}
.navItem.save {
background-color : @orange;
&:hover{
background-color: @green;
}
&:hover { background-color : @green; }
}
}

3
client/homebrew/pages/newPage/newPage.jsx
View File

@@ -223,7 +223,7 @@ const NewPage = createClass({
render : function(){
return <div className='newPage sitePage'>
{this.renderNavbar()}
<div className="content">
<div className='content'>
<SplitPane onDragFinish={this.handleSplitMove}>
<Editor
ref={this.editor}
@@ -233,6 +233,7 @@ const NewPage = createClass({
onMetaChange={this.handleMetaChange}
renderer={this.state.brew.renderer}
userThemes={this.props.userThemes}
themeBundle={this.state.themeBundle}
snippetBundle={this.state.themeBundle.snippets}
onCursorPageChange={this.handleEditorCursorPageChange}
onViewPageChange={this.handleEditorViewPageChange}

4
client/homebrew/pages/newPage/newPage.less
View File

@@ -1,8 +1,6 @@
.newPage {
.navItem.save {
background-color : @orange;
&:hover{
background-color: @green;
}
&:hover { background-color : @green; }
}
}

4
client/homebrew/pages/sharePage/sharePage.less
View File

@@ -3,7 +3,5 @@
flex-grow : 1;
justify-content : center;
}
.content{
overflow-y : hidden;
}
.content { overflow-y : hidden; }
}

9
client/homebrew/pages/vaultPage/vaultPage.jsx
View File

@@ -286,9 +286,9 @@ const VaultPage = (props)=>{
};
const renderPaginationControls = ()=>{
if(!totalBrews) return null;
if(!totalBrews || totalBrews < 10) return null;
const countInt = parseInt(props.query.count || 20);
const countInt = parseInt(brewCollection.length || 20);
const totalPages = Math.ceil(totalBrews / countInt);
let startPage, endPage;
@@ -355,7 +355,7 @@ const VaultPage = (props)=>{
};
const renderFoundBrews = ()=>{
if(searching) {
if(searching && !brewCollection) {
return (
<div className='foundBrews searching'>
<h3 className='searchAnim'>Searching</h3>
@@ -395,6 +395,7 @@ const VaultPage = (props)=>{
{`Brews found: `}
<span>{totalBrews}</span>
</span>
{brewCollection.length > 10 && renderPaginationControls()}
{brewCollection.map((brew, index)=>{
return (
<BrewItem
@@ -415,7 +416,7 @@ const VaultPage = (props)=>{
<link href='/themes/V3/Blank/style.css' rel='stylesheet' />
<link href='/themes/V3/5ePHB/style.css' rel='stylesheet' />
{renderNavItems()}
<div className="content">
<div className='content'>
<SplitPane showDividerButtons={false}>
<div className='form dataGroup'>{renderForm()}</div>
<div className='resultsContainer dataGroup'>

25
client/homebrew/pages/vaultPage/vaultPage.less
View File

@@ -5,7 +5,7 @@
*:not(input) { user-select : none; }
.content .dataGroup {
:where(.content .dataGroup) {
width : 100%;
height : 100%;
background : white;
@@ -169,9 +169,10 @@
width : 100%;
height : 100%;
max-height : 100%;
padding : 50px 50px 70px 50px;
padding : 70px 50px;
overflow-y : scroll;
background-color : #2C3E50;
container-type : inline-size;
h3 { font-size : 25px; }
@@ -236,6 +237,7 @@
margin-right : 40px;
color : black;
isolation : isolate;
transition : width 0.5s;
&::after {
position : absolute;
@@ -269,8 +271,8 @@
.links { z-index : 2; }
hr {
margin : 0px;
visibility : hidden;
margin : 0px;
}
.thumbnail { z-index : -1; }
@@ -278,30 +280,37 @@
.paginationControls {
position : absolute;
top : 35px;
left : 50%;
display : grid;
grid-template-areas : 'previousPage currentPage nextPage';
grid-template-columns : 50px 1fr 50px;
gap : 20px;
place-items : center;
width : auto;
font-size : 15px;
translate : -50%;
&:last-child { top : unset; }
.pages {
display : flex;
grid-area : currentPage;
gap : 1em;
justify-content : space-evenly;
width : 100%;
height : 100%;
padding : 5px 8px;
text-align : center;
.pageNumber {
margin-inline : 1vw;
place-content : center;
width : fit-content;
min-width : 2em;
font-family : 'Open Sans';
font-weight : 900;
color : white;
text-underline-position : under;
text-wrap : nowrap;
text-underline-position : under;
cursor : pointer;
&.currentPage {
@@ -329,7 +338,6 @@
}
}
}
}
@keyframes trailingDots {
@@ -344,8 +352,7 @@
100% { content : ' ...'; }
}
// media query for when the page is smaller than 1079 px in width
@media screen and (max-width : 1079px) {
@container (width < 670px) {
.vaultPage {
.dataGroup.form .brewLookup { padding : 1px 20px 20px 10px; }

108
client/icons/customIcons.less
View File

@@ -1,84 +1,34 @@
.fac {
display : inline-block;
background-color : currentColor;
mask-size : contain;
mask-repeat : no-repeat;
mask-position : center;
width : 1em;
aspect-ratio : 1;
background-color : currentColor;
mask-repeat : no-repeat;
mask-position : center;
mask-size : contain;
}
.position-top-left {
mask-image: url('../icons/position-top-left.svg');
}
.position-top-right {
mask-image: url('../icons/position-top-right.svg');
}
.position-bottom-left {
mask-image: url('../icons/position-bottom-left.svg');
}
.position-bottom-right {
mask-image: url('../icons/position-bottom-right.svg');
}
.position-top {
mask-image: url('../icons/position-top.svg');
}
.position-right {
mask-image: url('../icons/position-right.svg');
}
.position-bottom {
mask-image: url('../icons/position-bottom.svg');
}
.position-left {
mask-image: url('../icons/position-left.svg');
}
.mask-edge {
mask-image: url('../icons/mask-edge.svg');
}
.mask-corner {
mask-image: url('../icons/mask-corner.svg');
}
.mask-center {
mask-image: url('../icons/mask-center.svg');
}
.book-front-cover {
mask-image: url('../icons/book-front-cover.svg');
}
.book-back-cover {
mask-image: url('../icons/book-back-cover.svg');
}
.book-inside-cover {
mask-image: url('../icons/book-inside-cover.svg');
}
.book-part-cover {
mask-image: url('../icons/book-part-cover.svg');
}
.image-wrap-left {
mask-image: url('../icons/image-wrap-left.svg');
}
.image-wrap-right {
mask-image: url('../icons/image-wrap-right.svg');
}
.davek {
mask-image: url('../icons/Davek.svg');
}
.rellanic {
mask-image: url('../icons/Rellanic.svg');
}
.iokharic {
mask-image: url('../icons/Iokharic.svg');
}
.zoom-to-fit {
mask-image: url('../icons/zoom-to-fit.svg');
}
.fit-width {
mask-image: url('../icons/fit-width.svg');
}
.single-spread {
mask-image: url('../icons/single-spread.svg');
}
.facing-spread {
mask-image: url('../icons/facing-spread.svg');
}
.flow-spread {
mask-image: url('../icons/flow-spread.svg');
}
.position-top-left { mask-image : url('../icons/position-top-left.svg'); }
.position-top-right { mask-image : url('../icons/position-top-right.svg'); }
.position-bottom-left { mask-image : url('../icons/position-bottom-left.svg'); }
.position-bottom-right { mask-image : url('../icons/position-bottom-right.svg'); }
.position-top { mask-image : url('../icons/position-top.svg'); }
.position-right { mask-image : url('../icons/position-right.svg'); }
.position-bottom { mask-image : url('../icons/position-bottom.svg'); }
.position-left { mask-image : url('../icons/position-left.svg'); }
.mask-edge { mask-image : url('../icons/mask-edge.svg'); }
.mask-corner { mask-image : url('../icons/mask-corner.svg'); }
.mask-center { mask-image : url('../icons/mask-center.svg'); }
.book-front-cover { mask-image : url('../icons/book-front-cover.svg'); }
.book-back-cover { mask-image : url('../icons/book-back-cover.svg'); }
.book-inside-cover { mask-image : url('../icons/book-inside-cover.svg'); }
.book-part-cover { mask-image : url('../icons/book-part-cover.svg'); }
.image-wrap-left { mask-image : url('../icons/image-wrap-left.svg'); }
.image-wrap-right { mask-image : url('../icons/image-wrap-right.svg'); }
.davek { mask-image : url('../icons/Davek.svg'); }
.rellanic { mask-image : url('../icons/Rellanic.svg'); }
.iokharic { mask-image : url('../icons/Iokharic.svg'); }
.zoom-to-fit { mask-image : url('../icons/zoom-to-fit.svg'); }
.fit-width { mask-image : url('../icons/fit-width.svg'); }
.single-spread { mask-image : url('../icons/single-spread.svg'); }
.facing-spread { mask-image : url('../icons/facing-spread.svg'); }
.flow-spread { mask-image : url('../icons/flow-spread.svg'); }

551
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

33
package.json
View File

@@ -1,7 +1,7 @@
{
"name": "homebrewery",
"description": "Create authentic looking D&D homebrews using only markdown",
"version": "3.17.0",
"version": "3.18.1",
"type": "module",
"engines": {
"npm": "^10.2.x",
@@ -39,7 +39,6 @@
"test:definition-lists": "jest tests/markdown/definition-lists.test.js --verbose --noStackTrace",
"test:hard-breaks": "jest tests/markdown/hard-breaks.test.js --verbose --noStackTrace",
"test:non-breaking-spaces": "jest tests/markdown/non-breaking-spaces.test.js --verbose --noStackTrace",
"test:paragraph-justification": "jest tests/markdown/paragraph-justification.test.js --verbose --noStackTrace",
"test:emojis": "jest tests/markdown/emojis.test.js --verbose --noStackTrace",
"test:route": "jest tests/routes/static-pages.test.js --verbose",
"test:safehtml": "jest tests/html/safeHTML.test.js --verbose",
@@ -85,20 +84,19 @@
]
},
"dependencies": {
"@babel/core": "^7.26.8",
"@babel/plugin-transform-runtime": "^7.26.8",
"@babel/preset-env": "^7.26.8",
"@babel/core": "^7.26.9",
"@babel/plugin-transform-runtime": "^7.26.9",
"@babel/preset-env": "^7.26.9",
"@babel/preset-react": "^7.26.3",
"@googleapis/drive": "^8.14.0",
"@googleapis/drive": "^8.16.0",
"body-parser": "^1.20.2",
"classnames": "^2.5.1",
"codemirror": "^5.65.6",
"cookie-parser": "^1.4.7",
"core-js": "^3.40.0",
"core-js": "^3.41.0",
"cors": "^2.8.5",
"create-react-class": "^15.7.0",
"dedent-tabs": "^0.10.3",
"dompurify": "^3.2.4",
"expr-eval": "^2.0.2",
"express": "^4.21.2",
"express-async-handler": "^1.2.0",
@@ -109,20 +107,21 @@
"jwt-simple": "^0.5.6",
"less": "^3.13.1",
"lodash": "^4.17.21",
"marked": "13.0.3",
"marked-emoji": "^1.4.3",
"marked-extended-tables": "^1.1.0",
"marked": "14.0.0",
"marked-emoji": "^2.0.0",
"marked-extended-tables": "^2.0.1",
"marked-gfm-heading-id": "^4.0.1",
"marked-smartypants-lite": "^1.0.3",
"marked-subsuper-text": "^1.0.3",
"markedLegacy": "npm:marked@^0.3.19",
"moment": "^2.30.1",
"mongoose": "^8.10.0",
"nanoid": "5.0.9",
"mongoose": "^8.12.1",
"nanoid": "5.1.3",
"nconf": "^0.12.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-frame-component": "^4.1.3",
"react-router": "^7.1.5",
"react-router": "^7.3.0",
"sanitize-filename": "1.6.3",
"superagent": "^10.1.1",
"vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
@@ -130,15 +129,15 @@
"devDependencies": {
"@stylistic/stylelint-plugin": "^3.1.2",
"babel-plugin-transform-import-meta": "^2.3.2",
"eslint": "^9.20.0",
"eslint": "^9.22.0",
"eslint-plugin-jest": "^28.11.0",
"eslint-plugin-react": "^7.37.4",
"globals": "^15.14.0",
"globals": "^16.0.0",
"jest": "^29.7.0",
"jest-expect-message": "^1.1.3",
"jsdom-global": "^3.0.2",
"postcss-less": "^6.0.0",
"stylelint": "^16.14.1",
"stylelint": "^16.16.0",
"stylelint-config-recess-order": "^6.0.0",
"stylelint-config-recommended": "^15.0.0",
"supertest": "^7.0.0"

6
scripts/buildHomebrew.js
View File

@@ -53,7 +53,7 @@ fs.emptyDirSync('./build');
const themes = { Legacy: {}, V3: {} };
let themeFiles = fs.readdirSync('./themes/Legacy');
for (let dir of themeFiles) {
for (const dir of themeFiles) {
const themeData = JSON.parse(fs.readFileSync(`./themes/Legacy/${dir}/settings.json`).toString());
themeData.path = dir;
themes.Legacy[dir] = (themeData);
@@ -70,7 +70,7 @@ fs.emptyDirSync('./build');
}
themeFiles = fs.readdirSync('./themes/V3');
for (let dir of themeFiles) {
for (const dir of themeFiles) {
const themeData = JSON.parse(fs.readFileSync(`./themes/V3/${dir}/settings.json`).toString());
themeData.path = dir;
themes.V3[dir] = (themeData);
@@ -113,7 +113,7 @@ fs.emptyDirSync('./build');
const stream = fs.createWriteStream(editorThemeFile, { flags: 'a' });
stream.write('[\n"default"');
for (let themeFile of editorThemeFiles) {
for (const themeFile of editorThemeFiles) {
stream.write(`,\n"${themeFile.slice(0, -4)}"`);
}
stream.write('\n]\n');

15
server/admin.api.js
View File

@@ -93,7 +93,7 @@ router.get('/admin/finduncompressed', mw.adminOnly, (req, res)=>{
/* Cleans `<script` and `</script>` from the "text" field of a brew */
router.put('/admin/clean/script/:id', asyncHandler(HomebrewAPI.getBrew('admin', false)), async (req, res)=>{
console.log(`[ADMIN] Cleaning script tags from ShareID ${req.params.id}`);
console.log(`[ADMIN: ${req.account?.username || 'Not Logged In'}] Cleaning script tags from ShareID ${req.params.id}`);
function cleanText(text){return text.replaceAll(/(<\/?s)cript/gi, '');};
@@ -114,6 +114,18 @@ router.put('/admin/clean/script/:id', asyncHandler(HomebrewAPI.getBrew('admin',
return await HomebrewAPI.updateBrew(req, res);
});
/* Get list of a user's documents */
router.get('/admin/user/list/:user', mw.adminOnly, async (req, res)=>{
const username = req.params.user;
const fields = { _id: 0, text: 0, textBin: 0 }; // Remove unnecessary fields from document lists
console.log(`[ADMIN: ${req.account?.username || 'Not Logged In'}] Get brew list for ${username}`);
const brews = await HomebrewModel.getByUser(username, true, fields);
return res.json(brews);
});
/* Compresses the "text" field of a brew to binary */
router.put('/admin/compress/:id', (req, res)=>{
HomebrewModel.findOne({ _id: req.params.id })
@@ -135,7 +147,6 @@ router.put('/admin/compress/:id', (req, res)=>{
});
});
router.get('/admin/stats', mw.adminOnly, async (req, res)=>{
try {
const totalBrewsCount = await HomebrewModel.countDocuments({});

2
server/admin.api.spec.js
View File

@@ -75,7 +75,7 @@ describe('Tests for admin api', ()=>{
const response = await app
.post('/admin/notification/add')
.set('Authorization', 'Basic ' + Buffer.from('admin:password3').toString('base64'))
.set('Authorization', `Basic ${Buffer.from('admin:password3').toString('base64')}`)
.send(inputNotification);
expect(response.status).toBe(500);

8
server/app.js
View File

@@ -11,7 +11,6 @@ const version = packageJSON.version;
import _ from 'lodash';
import jwt from 'jwt-simple';
import express from 'express';
import yaml from 'js-yaml';
import config from './config.js';
import fs from 'fs-extra';
@@ -70,13 +69,11 @@ const corsOptions = {
'https://homebrewery-stage.herokuapp.com',
];
if(isLocalEnvironment) {
allowedOrigins.push('http://localhost:8000', 'http://localhost:8010');
}
const localNetworkRegex = /^http:\/\/(localhost|127\.0\.0\.1|10\.\d+\.\d+\.\d+|192\.168\.\d+\.\d+|172\.(1[6-9]|2\d|3[0-1])\.\d+\.\d+):\d+$/;
const herokuRegex = /^https:\/\/(?:homebrewery-pr-\d+\.herokuapp\.com|naturalcrit-pr-\d+\.herokuapp\.com)$/; // Matches any Heroku app
if(!origin || allowedOrigins.includes(origin) || herokuRegex.test(origin)) {
if(!origin || allowedOrigins.includes(origin) || herokuRegex.test(origin) || (isLocalEnvironment && localNetworkRegex.test(origin))) {
callback(null, true);
} else {
console.log(origin, 'not allowed');
@@ -552,6 +549,7 @@ const renderPage = async (req, res)=>{
const configuration = {
local : isLocalEnvironment,
publicUrl : config.get('publicUrl') ?? '',
baseUrl : `${req.protocol}://${req.get('host')}`,
environment : nodeEnv,
deployment : config.get('heroku_app_name') ?? ''
};

12
server/homebrew.api.js
View File

@@ -181,6 +181,7 @@ const api = {
`${text}`;
return text;
},
getGoodBrewTitle : (text)=>{
const tokens = Markdown.marked.lexer(text);
return (tokens.find((token)=>token.type === 'heading' || token.type === 'paragraph')?.text || 'No Title')
@@ -279,6 +280,8 @@ const api = {
let currentTheme;
const completeStyles = [];
const completeSnippets = [];
let themeName;
let themeAuthor;
while (req.params.id) {
//=== User Themes ===//
@@ -292,6 +295,10 @@ const api = {
currentTheme = req.brew;
splitTextStyleAndMetadata(currentTheme);
if(!currentTheme.tags.some((tag)=>tag === 'meta:theme' || tag === 'meta:Theme'))
throw { brewId: req.params.id, name: 'Invalid Theme Selected', message: 'Selected theme does not have the meta:theme tag', status: 422, HBErrorCode: '10' };
themeName ??= currentTheme.title;
themeAuthor ??= currentTheme.authors?.[0];
// If there is anything in the snippets or style members, append them to the appropriate array
if(currentTheme?.snippets) completeSnippets.push(JSON.parse(currentTheme.snippets));
@@ -301,6 +308,7 @@ const api = {
req.params.renderer = currentTheme.renderer;
} else {
//=== Static Themes ===//
themeName ??= req.params.id;
const localSnippets = `${req.params.renderer}_${req.params.id}`; // Just log the name for loading on client
const localStyle = `@import url(\"/themes/${req.params.renderer}/${req.params.id}/style.css\");`;
completeSnippets.push(localSnippets);
@@ -313,7 +321,9 @@ const api = {
const returnObj = {
// Reverse the order of the arrays so they are listed oldest parent to youngest child.
styles : completeStyles.reverse(),
snippets : completeSnippets.reverse()
snippets : completeSnippets.reverse(),
name : themeName,
author : themeAuthor
};
res.setHeader('Content-Type', 'application/json');

47
server/homebrew.api.spec.js
View File

@@ -576,7 +576,7 @@ brew`);
describe('Theme bundle', ()=>{
it('should return Theme Bundle for a User Theme', async ()=>{
const brews = {
userThemeAID : { title: 'User Theme A', renderer: 'V3', theme: null, shareId: 'userThemeAID', style: 'User Theme A Style' }
userThemeAID : { title: 'User Theme A', renderer: 'V3', theme: null, shareId: 'userThemeAID', style: 'User Theme A Style', tags: ['meta:theme'], authors: ['authorName'] }
};
const toBrewPromise = (brew)=>new Promise((res)=>res({ toObject: ()=>brew }));
@@ -587,6 +587,8 @@ brew`);
expect(res.status).toHaveBeenCalledWith(200);
expect(res.send).toHaveBeenCalledWith({
name : 'User Theme A',
author : 'authorName',
styles : ['/* From Brew: https://localhost/share/userThemeAID */\n\nUser Theme A Style'],
snippets : []
});
@@ -594,9 +596,9 @@ brew`);
it('should return Theme Bundle for nested User Themes', async ()=>{
const brews = {
userThemeAID : { title: 'User Theme A', renderer: 'V3', theme: 'userThemeBID', shareId: 'userThemeAID', style: 'User Theme A Style' },
userThemeBID : { title: 'User Theme B', renderer: 'V3', theme: 'userThemeCID', shareId: 'userThemeBID', style: 'User Theme B Style' },
userThemeCID : { title: 'User Theme C', renderer: 'V3', theme: null, shareId: 'userThemeCID', style: 'User Theme C Style' }
userThemeAID : { title: 'User Theme A', renderer: 'V3', theme: 'userThemeBID', shareId: 'userThemeAID', style: 'User Theme A Style', tags: ['meta:theme'], authors: ['authorName'] },
userThemeBID : { title: 'User Theme B', renderer: 'V3', theme: 'userThemeCID', shareId: 'userThemeBID', style: 'User Theme B Style', tags: ['meta:theme'], authors: ['authorName'] },
userThemeCID : { title: 'User Theme C', renderer: 'V3', theme: null, shareId: 'userThemeCID', style: 'User Theme C Style', tags: ['meta:theme'], authors: ['authorName'] }
};
const toBrewPromise = (brew)=>new Promise((res)=>res({ toObject: ()=>brew }));
@@ -607,6 +609,8 @@ brew`);
expect(res.status).toHaveBeenCalledWith(200);
expect(res.send).toHaveBeenCalledWith({
name : 'User Theme A',
author : 'authorName',
styles : [
'/* From Brew: https://localhost/share/userThemeCID */\n\nUser Theme C Style',
'/* From Brew: https://localhost/share/userThemeBID */\n\nUser Theme B Style',
@@ -623,6 +627,8 @@ brew`);
expect(res.status).toHaveBeenCalledWith(200);
expect(res.send).toHaveBeenCalledWith({
name : '5ePHB',
author : undefined,
styles : [
`/* From Theme Blank */\n\n@import url("/themes/V3/Blank/style.css");`,
`/* From Theme 5ePHB */\n\n@import url("/themes/V3/5ePHB/style.css");`
@@ -636,9 +642,9 @@ brew`);
it('should return Theme Bundle for nested User and Static Themes together', async ()=>{
const brews = {
userThemeAID : { title: 'User Theme A', renderer: 'V3', theme: 'userThemeBID', shareId: 'userThemeAID', style: 'User Theme A Style' },
userThemeBID : { title: 'User Theme B', renderer: 'V3', theme: 'userThemeCID', shareId: 'userThemeBID', style: 'User Theme B Style' },
userThemeCID : { title: 'User Theme C', renderer: 'V3', theme: '5eDMG', shareId: 'userThemeCID', style: 'User Theme C Style' }
userThemeAID : { title: 'User Theme A', renderer: 'V3', theme: 'userThemeBID', shareId: 'userThemeAID', style: 'User Theme A Style', tags: ['meta:theme'], authors: ['authorName'] },
userThemeBID : { title: 'User Theme B', renderer: 'V3', theme: 'userThemeCID', shareId: 'userThemeBID', style: 'User Theme B Style', tags: ['meta:theme'], authors: ['authorName'] },
userThemeCID : { title: 'User Theme C', renderer: 'V3', theme: '5eDMG', shareId: 'userThemeCID', style: 'User Theme C Style', tags: ['meta:theme'], authors: ['authorName'] }
};
const toBrewPromise = (brew)=>new Promise((res)=>res({ toObject: ()=>brew }));
@@ -649,6 +655,8 @@ brew`);
expect(res.status).toHaveBeenCalledWith(200);
expect(res.send).toHaveBeenCalledWith({
name : 'User Theme A',
author : 'authorName',
styles : [
`/* From Theme Blank */\n\n@import url("/themes/V3/Blank/style.css");`,
`/* From Theme 5ePHB */\n\n@import url("/themes/V3/5ePHB/style.css");`,
@@ -665,9 +673,9 @@ brew`);
});
});
it('should fail for an invalid Theme in the chain', async()=>{
it('should fail for a missing Theme in the chain', async()=>{
const brews = {
userThemeAID : { title: 'User Theme A', renderer: 'V3', theme: 'missingTheme', shareId: 'userThemeAID', style: 'User Theme A Style' },
userThemeAID : { title: 'User Theme A', renderer: 'V3', theme: 'missingTheme', shareId: 'userThemeAID', style: 'User Theme A Style', tags: ['meta:theme'], authors: ['authorName'] },
};
const toBrewPromise = (brew)=>new Promise((res)=>res({ toObject: ()=>brew }));
@@ -686,6 +694,27 @@ brew`);
name : 'ThemeLoad Error',
status : 404 });
});
it('should fail for a User Theme not tagged with meta:theme', async ()=>{
const brews = {
userThemeAID : { title: 'User Theme A', renderer: 'V3', theme: null, shareId: 'userThemeAID', style: 'User Theme A Style' }
};
const toBrewPromise = (brew)=>new Promise((res)=>res({ toObject: ()=>brew }));
model.get = jest.fn((getParams)=>toBrewPromise(brews[getParams.shareId]));
const req = { params: { renderer: 'V3', id: 'userThemeAID' }, get: ()=>{ return 'localhost'; }, protocol: 'https' };
let err;
await api.getThemeBundle(req, res)
.catch((e)=>err = e);
expect(err).toEqual({
HBErrorCode : '10',
brewId : 'userThemeAID',
message : 'Selected theme does not have the meta:theme tag',
name : 'Invalid Theme Selected',
status : 422 });
});
});
describe('deleteBrew', ()=>{

12
shared/helpers.js
View File

@@ -44,13 +44,19 @@ const fetchThemeBundle = async (obj, renderer, theme)=>{
.catch((err)=>{
obj.setState({ error: err });
});
if(!res) return;
if(!res) {
obj.setState((prevState)=>({
...prevState,
themeBundle : {}
}));
return;
}
const themeBundle = res.body;
themeBundle.joinedStyles = themeBundle.styles.map((style)=>`<style>${style}</style>`).join('\n\n');
obj.setState((prevState)=>({
...prevState,
themeBundle : themeBundle
themeBundle : themeBundle,
error : null
}));
};

74
shared/naturalcrit/markdown.js
View File

@@ -7,6 +7,7 @@ import MarkedExtendedTables from 'marked-extended-tables';
import { markedSmartypantsLite as MarkedSmartypantsLite } from 'marked-smartypants-lite';
import { gfmHeadingId as MarkedGFMHeadingId, resetHeadings as MarkedGFMResetHeadingIDs } from 'marked-gfm-heading-id';
import { markedEmoji as MarkedEmojis } from 'marked-emoji';
import MarkedSubSuperText from 'marked-subsuper-text';
//Icon fonts included so they can appear in emoji autosuggest dropdown
import diceFont from '../../themes/fonts/iconFonts/diceFont.js';
@@ -59,8 +60,14 @@ mathParser.functions.signed = function (a) {
return `${a}`;
};
// Normalize variable names; trim edge spaces and shorten blocks of whitespace to 1 space
const normalizeVarNames = (label)=>{
return label.trim().replace(/\s+/g, ' ');
};
//Processes the markdown within an HTML block if it's just a class-wrapper
renderer.html = function (html) {
renderer.html = function (token) {
let html = token.text;
if(_.startsWith(_.trim(html), '<div') && _.endsWith(_.trim(html), '</div>')){
const openTag = html.substring(0, html.indexOf('>')+1);
html = html.substring(html.indexOf('>')+1);
@@ -71,18 +78,21 @@ renderer.html = function (html) {
};
// Don't wrap {{ Spans alone on a line, or {{ Divs in <p> tags
renderer.paragraph = function(text){
renderer.paragraph = function(token){
let match;
const text = this.parser.parseInline(token.tokens);
if(text.startsWith('<div') || text.startsWith('</div'))
return `${text}`;
else if(match = text.match(/(^|^.*?\n)<span class="inline-block(.*?<\/span>)$/)) {
else if(match = text.match(/(^|^.*?\n)<span class="inline-block(.*?<\/span>)$/))
return `${match[1].trim() ? `<p>${match[1]}</p>` : ''}<span class="inline-block${match[2]}`;
} else
else
return `<p>${text}</p>\n`;
};
//Fix local links in the Preview iFrame to link inside the frame
renderer.link = function (href, title, text) {
renderer.link = function (token) {
let { href, title, tokens } = token;
const text = this.parser.parseInline(tokens);
let self = false;
if(href[0] == '#') {
self = true;
@@ -104,8 +114,8 @@ renderer.link = function (href, title, text) {
};
// Expose `src` attribute as `--HB_src` to make the URL accessible via CSS
renderer.image = function (href, title, text) {
href = cleanUrl(href);
renderer.image = function (token) {
const { href, title, text } = token;
if(href === null)
return text;
@@ -333,35 +343,6 @@ const mustacheInjectBlock = {
}
};
const superSubScripts = {
name : 'superSubScript',
level : 'inline',
start(src) { return src.match(/\^/m)?.index; }, // Hint to Marked.js to stop and check for a match
tokenizer(src, tokens) {
const superRegex = /^\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^/m;
const subRegex = /^\^\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^\^/m;
let isSuper = false;
let match = subRegex.exec(src);
if(!match){
match = superRegex.exec(src);
if(match)
isSuper = true;
}
if(match?.length) {
return {
type : 'superSubScript', // Should match "name" above
raw : match[0], // Text to consume from the source
tag : isSuper ? 'sup' : 'sub',
tokens : this.lexer.inlineTokens(match[1])
};
}
},
renderer(token) {
return `<${token.tag}>${this.parser.parseInline(token.tokens)}</${token.tag}>`;
}
};
const justifiedParagraphClasses = [];
justifiedParagraphClasses[2] = 'Left';
justifiedParagraphClasses[4] = 'Right';
@@ -415,7 +396,7 @@ const forcedParagraphBreaks = {
}
},
renderer(token) {
return `<div class='blank'></div>`.repeat(token.length).concat('\n');
return `<div class='blank'></div>\n`.repeat(token.length);
}
};
@@ -533,7 +514,7 @@ const replaceVar = function(input, hoist=false, allowUnresolved=false) {
const match = regex.exec(input);
const prefix = match[1];
const label = match[2];
const label = normalizeVarNames(match[2]); // Ensure the label name is normalized as it should be in the var stack.
//v=====--------------------< HANDLE MATH >-------------------=====v//
const mathRegex = /[a-z]+\(|[+\-*/^(),]/g;
@@ -688,8 +669,8 @@ function MarkedVariables() {
});
}
if(match[3]) { // Block Definition
const label = match[4] ? match[4].trim().replace(/\s+/g, ' ') : null; // Trim edge spaces and shorten blocks of whitespace to 1 space
const content = match[5] ? match[5].trim().replace(/[ \t]+/g, ' ') : null; // Trim edge spaces and shorten blocks of whitespace to 1 space
const label = match[4] ? normalizeVarNames(match[4]) : null;
const content = match[5] ? match[5].trim().replace(/[ \t]+/g, ' ') : null; // Normalize text content (except newlines for block-level content)
varsQueue.push(
{ type : 'varDefBlock',
@@ -698,7 +679,7 @@ function MarkedVariables() {
});
}
if(match[6]) { // Block Call
const label = match[7] ? match[7].trim().replace(/\s+/g, ' ') : null; // Trim edge spaces and shorten blocks of whitespace to 1 space
const label = match[7] ? normalizeVarNames(match[7]) : null;
varsQueue.push(
{ type : 'varCallBlock',
@@ -707,7 +688,7 @@ function MarkedVariables() {
});
}
if(match[8]) { // Inline Definition
const label = match[10] ? match[10].trim().replace(/\s+/g, ' ') : null; // Trim edge spaces and shorten blocks of whitespace to 1 space
const label = match[10] ? normalizeVarNames(match[10]) : null;
let content = match[11] || null;
// In case of nested (), find the correct matching end )
@@ -739,7 +720,7 @@ function MarkedVariables() {
});
}
if(match[12]) { // Inline Call
const label = match[13] ? match[13].trim().replace(/\s+/g, ' ') : null; // Trim edge spaces and shorten blocks of whitespace to 1 space
const label = match[13] ? normalizeVarNames(match[13]) : null;
varsQueue.push(
{ type : 'varCallInline',
@@ -796,10 +777,11 @@ const tableTerminators = [
Marked.use(MarkedVariables());
Marked.use({ extensions : [justifiedParagraphs, definitionListsMultiLine, definitionListsSingleLine, forcedParagraphBreaks,
nonbreakingSpaces, superSubScripts, mustacheSpans, mustacheDivs, mustacheInjectInline] });
nonbreakingSpaces, mustacheSpans, mustacheDivs, mustacheInjectInline] });
Marked.use(mustacheInjectBlock);
Marked.use(MarkedSubSuperText());
Marked.use({ renderer: renderer, tokenizer: tokenizer, mangle: false });
Marked.use(MarkedExtendedTables(tableTerminators), MarkedGFMHeadingId({ globalSlugs: true }),
Marked.use(MarkedExtendedTables({ interruptPatterns: tableTerminators }), MarkedGFMHeadingId({ globalSlugs: true }),
MarkedSmartypantsLite(), MarkedEmojis(MarkedEmojiOptions));
function cleanUrl(href) {
@@ -896,7 +878,7 @@ const extractHTMLStyleTags = (htmlString)=>{
?.filter((attr)=>!attr.startsWith('class="') && !attr.startsWith('style="') && !attr.startsWith('id="'))
.reduce((obj, attr)=>{
const index = attr.indexOf('=');
let [key, value] = [attr.substring(0, index), attr.substring(index + 1)];
const [key, value] = [attr.substring(0, index), attr.substring(index + 1)];
obj[key.trim()] = value.replace(/"/g, '');
return obj;
}, {}) || null;

2
shared/naturalcrit/splitPane/splitPane.less
View File

@@ -21,8 +21,8 @@
background-color : #BBBBBB;
.dots {
display : table-cell;
text-align : center;
vertical-align : middle;
text-align : center;
i {
display : block !important;
margin : 10px 0px;

46
shared/naturalcrit/styles/animations.less
View File

@@ -60,10 +60,10 @@
.delay(@delay) {
animation-delay:@delay;
-webkit-animation-delay:@delay;
transition-delay:@delay;
-webkit-transition-delay : @delay;
transition-delay : @delay;
-webkit-animation-delay : @delay;
animation-delay : @delay;
}
.keep() {
-webkit-animation-fill-mode : forwards;
@@ -75,26 +75,26 @@
.sequentialDelay(@delayInc : 0.2s, @initialDelay : 0s) {
&:nth-child(1){.delay(0*@delayInc + @initialDelay)}
&:nth-child(2){.delay(1*@delayInc + @initialDelay)}
&:nth-child(3){.delay(2*@delayInc + @initialDelay)}
&:nth-child(4){.delay(3*@delayInc + @initialDelay)}
&:nth-child(5){.delay(4*@delayInc + @initialDelay)}
&:nth-child(6){.delay(5*@delayInc + @initialDelay)}
&:nth-child(7){.delay(6*@delayInc + @initialDelay)}
&:nth-child(8){.delay(7*@delayInc + @initialDelay)}
&:nth-child(9){.delay(8*@delayInc + @initialDelay)}
&:nth-child(10){.delay(9*@delayInc + @initialDelay)}
&:nth-child(11){.delay(10*@delayInc + @initialDelay)}
&:nth-child(12){.delay(11*@delayInc + @initialDelay)}
&:nth-child(13){.delay(12*@delayInc + @initialDelay)}
&:nth-child(14){.delay(13*@delayInc + @initialDelay)}
&:nth-child(15){.delay(14*@delayInc + @initialDelay)}
&:nth-child(16){.delay(15*@delayInc + @initialDelay)}
&:nth-child(17){.delay(16*@delayInc + @initialDelay)}
&:nth-child(18){.delay(17*@delayInc + @initialDelay)}
&:nth-child(19){.delay(18*@delayInc + @initialDelay)}
&:nth-child(20){.delay(19*@delayInc + @initialDelay)}
&:nth-child(1) {.delay(0*@delayInc + @initialDelay); }
&:nth-child(2) {.delay(1*@delayInc + @initialDelay); }
&:nth-child(3) {.delay(2*@delayInc + @initialDelay); }
&:nth-child(4) {.delay(3*@delayInc + @initialDelay); }
&:nth-child(5) {.delay(4*@delayInc + @initialDelay); }
&:nth-child(6) {.delay(5*@delayInc + @initialDelay); }
&:nth-child(7) {.delay(6*@delayInc + @initialDelay); }
&:nth-child(8) {.delay(7*@delayInc + @initialDelay); }
&:nth-child(9) {.delay(8*@delayInc + @initialDelay); }
&:nth-child(10) {.delay(9*@delayInc + @initialDelay); }
&:nth-child(11) {.delay(10*@delayInc + @initialDelay); }
&:nth-child(12) {.delay(11*@delayInc + @initialDelay); }
&:nth-child(13) {.delay(12*@delayInc + @initialDelay); }
&:nth-child(14) {.delay(13*@delayInc + @initialDelay); }
&:nth-child(15) {.delay(14*@delayInc + @initialDelay); }
&:nth-child(16) {.delay(15*@delayInc + @initialDelay); }
&:nth-child(17) {.delay(16*@delayInc + @initialDelay); }
&:nth-child(18) {.delay(17*@delayInc + @initialDelay); }
&:nth-child(19) {.delay(18*@delayInc + @initialDelay); }
&:nth-child(20) {.delay(19*@delayInc + @initialDelay); }
}

80
shared/naturalcrit/styles/colors.less
View File

@@ -23,47 +23,47 @@
@grey : #7F8C8D;
#backgroundColors {
&.tealLight{ background-color : @tealLight };
&.teal{ background-color : @teal };
&.greenLight{ background-color : @greenLight };
&.green{ background-color : @green };
&.blueLight{ background-color : @blueLight };
&.blue{ background-color : @blue };
&.purpleLight{ background-color : @purpleLight };
&.purple{ background-color : @purple };
&.steelLight{ background-color : @steelLight };
&.steel{ background-color : @steel };
&.yellowLight{ background-color : @yellowLight };
&.yellow{ background-color : @yellow };
&.orangeLight{ background-color : @orangeLight };
&.orange{ background-color : @orange };
&.redLight{ background-color : @redLight };
&.red{ background-color : @red };
&.silverLight{ background-color : @silverLight };
&.silver{ background-color : @silver };
&.greyLight{ background-color : @greyLight };
&.grey{ background-color : @grey };
&.tealLight { background-color : @tealLight; };
&.teal { background-color : @teal; };
&.greenLight { background-color : @greenLight; };
&.green { background-color : @green; };
&.blueLight { background-color : @blueLight; };
&.blue { background-color : @blue; };
&.purpleLight { background-color : @purpleLight; };
&.purple { background-color : @purple; };
&.steelLight { background-color : @steelLight; };
&.steel { background-color : @steel; };
&.yellowLight { background-color : @yellowLight; };
&.yellow { background-color : @yellow; };
&.orangeLight { background-color : @orangeLight; };
&.orange { background-color : @orange; };
&.redLight { background-color : @redLight; };
&.red { background-color : @red; };
&.silverLight { background-color : @silverLight; };
&.silver { background-color : @silver; };
&.greyLight { background-color : @greyLight; };
&.grey { background-color : @grey; };
}
#backgroundColorsHover {
&.tealLight:hover{ background-color : @tealLight };
&.teal:hover{ background-color : @teal };
&.greenLight:hover{ background-color : @greenLight };
&.green:hover{ background-color : @green };
&.blueLight:hover{ background-color : @blueLight };
&.blue:hover{ background-color : @blue };
&.purpleLight:hover{ background-color : @purpleLight };
&.purple:hover{ background-color : @purple };
&.steelLight:hover{ background-color : @steelLight };
&.steel:hover{ background-color : @steel };
&.yellowLight:hover{ background-color : @yellowLight };
&.yellow:hover{ background-color : @yellow };
&.orangeLight:hover{ background-color : @orangeLight };
&.orange:hover{ background-color : @orange };
&.redLight:hover{ background-color : @redLight };
&.red:hover{ background-color : @red };
&.silverLight:hover{ background-color : @silverLight };
&.silver:hover{ background-color : @silver };
&.greyLight:hover{ background-color : @greyLight };
&.grey:hover{ background-color : @grey };
&.tealLight:hover { background-color : @tealLight; };
&.teal:hover { background-color : @teal; };
&.greenLight:hover { background-color : @greenLight; };
&.green:hover { background-color : @green; };
&.blueLight:hover { background-color : @blueLight; };
&.blue:hover { background-color : @blue; };
&.purpleLight:hover { background-color : @purpleLight; };
&.purple:hover { background-color : @purple; };
&.steelLight:hover { background-color : @steelLight; };
&.steel:hover { background-color : @steel; };
&.yellowLight:hover { background-color : @yellowLight; };
&.yellow:hover { background-color : @yellow; };
&.orangeLight:hover { background-color : @orangeLight; };
&.orange:hover { background-color : @orange; };
&.redLight:hover { background-color : @redLight; };
&.red:hover { background-color : @red; };
&.silverLight:hover { background-color : @silverLight; };
&.silver:hover { background-color : @silver; };
&.greyLight:hover { background-color : @greyLight; };
&.grey:hover { background-color : @grey; };
}

22
shared/naturalcrit/styles/core.less
View File

@@ -18,31 +18,25 @@ html,body, #reactRoot{
margin : 0;
font-family : 'Open Sans', sans-serif;
}
*{
box-sizing : border-box;
}
* { box-sizing : border-box; }
.colorButton(@backgroundColor : @green) {
.animate(background-color);
display : inline-block;
padding : 0.6em 1.2em;
cursor : pointer;
background-color : @backgroundColor;
font-family : 'Open Sans', sans-serif;
font-size : 0.8em;
font-weight : 800;
color : white;
text-decoration : none;
text-transform : uppercase;
border : none;
text-decoration : none;
cursor : pointer;
outline : none;
&:hover{
background-color : darken(@backgroundColor, 5%);
}
&:active{
background-color : darken(@backgroundColor, 10%);
}
background-color : @backgroundColor;
border : none;
&:hover { background-color : darken(@backgroundColor, 5%); }
&:active { background-color : darken(@backgroundColor, 10%); }
&:disabled {
background-color : @silver !important;
cursor : not-allowed;
background-color : @silver !important;
}
}

42
shared/naturalcrit/styles/elements.less
View File

@@ -5,16 +5,16 @@ html, body{
position : relative;
height : 100%;
min-height : 100%;
background-color : #eee;
font-family : 'Lato', sans-serif;
color : @copyGrey;
background-color : #EEEEEE;
}
.container {
position : relative;
max-width : @containerWidth;
margin : 0 auto;
padding-right : 20px;
padding-left : 20px;
margin : 0 auto;
}
h1 {
margin-top : 10px;
@@ -36,21 +36,17 @@ h3{
p {
margin-bottom : 1em;
font-size : 16px;
color : @copyGrey;
line-height : 1.5em;
color : @copyGrey;
}
code {
background-color : #F8F8F8;
font-family : 'Courier', mono;
font-family : 'Courier', "mono";
color : black;
white-space : pre;
background-color : #F8F8F8;
}
a{
color : inherit;
}
strong{
font-weight : bold;
}
a { color : inherit; }
strong { font-weight : bold; }
button {
.button();
}
@@ -58,29 +54,23 @@ button{
.animate(background-color);
display : inline-block;
padding : 0.6em 1.2em;
cursor : pointer;
background-color : @backgroundColor;
font-family : "Lato", Helvetica, Arial, sans-serif;
font-family : 'Lato', "Helvetica", "Arial", sans-serif;
font-size : 15px;
color : white;
text-decoration : none;
border : none;
cursor : pointer;
outline : none;
&:hover{
background-color : darken(@backgroundColor, 5%);
}
&:active{
background-color : darken(@backgroundColor, 10%);
}
&:disabled{
background-color : @silver !important;
}
background-color : @backgroundColor;
border : none;
&:hover { background-color : darken(@backgroundColor, 5%); }
&:active { background-color : darken(@backgroundColor, 10%); }
&:disabled { background-color : @silver !important; }
}
.iconButton(@backgroundColor : @green) {
padding : 0.6em;
cursor : pointer;
background-color : @backgroundColor;
font-size : 14px;
color : white;
text-align : center;
cursor : pointer;
background-color : @backgroundColor;
}

32
shared/naturalcrit/styles/reset.less
View File

@@ -1,33 +1,23 @@
:where(html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,button,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video){
border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0
:where(html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,button,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video) {padding : 0;margin : 0;font : inherit;font-size : 100%;vertical-align : baseline;
border : 0;
}
:where(article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section){
display:block
}
:where(article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section) { display : block; }
:where(body){
line-height:1
}
:where(body) { line-height : 1; }
:where(ol,ul){
list-style:none
}
:where(ol,ul) { list-style : none; }
:where(blockquote,q){
quotes:none
}
:where(blockquote,q) { quotes : none; }
:where(blockquote:before,blockquote:after,q:before,q:after){
content:none
}
:where(blockquote::before,blockquote::after,q::before,q::after) { content : none; }
:where(table){
border-collapse:collapse;border-spacing:0
:where(table) {border-spacing : 0;
border-collapse : collapse;
}
:where(button) {
background-color: unset;
text-transform: unset;
color : unset;
text-transform : unset;
background-color : unset;
}

53
shared/naturalcrit/styles/tooltip.less
View File

@@ -22,96 +22,95 @@
}
.tooltipTop(@content) {
.tooltipBase(@content);
&:before {
&::before {
margin-bottom : -@arrowSize * 2;
border-top-color : @tooltipColor;
}
&:after{ margin-left: -18px; }
&:before, &:after{
&::after { margin-left : -18px; }
&::before, &::after {
bottom : 100%;
left : 50%;
}
&:hover:after, &:hover:before, &:focus:after, &:focus:before {
&:hover::after, &:hover::before, &:focus::after, &:focus::before {
.transform(translateY(-(@arrowSize + 2)));
}
}
.tooltipBottom(@content) {
.tooltipBase(@content);
&:before {
&::before {
margin-top : -@arrowSize * 2;
border-bottom-color : @tooltipColor;
}
&:after{ margin-left: -18px; }
&:before, &:after{
&::after { margin-left : -18px; }
&::before, &::after {
top : 100%;
left : 50%;
}
&:hover:after, &:hover:before, &:focus:after, &:focus:before {
&:hover::after, &:hover::before, &:focus::after, &:focus::before {
.transform(translateY(@arrowSize + 2));
}
}
.tooltipLeft(@content) {
.tooltipBase(@content);
&:before {
&::before {
margin-right : -@arrowSize * 2;
margin-bottom : -@arrowSize;
border-left-color : @tooltipColor;
}
&:after{ margin-bottom: -14px;}
&:before, &:after {
&::after { margin-bottom : -14px;}
&::before, &::after {
right : 100%;
bottom : 50%;
}
&:hover:after, &:hover:before, &:focus:after, &:focus:before {
&:hover::after, &:hover::before, &:focus::after, &:focus::before {
.transform(translateX(-(@arrowSize + 2)));
}
}
.tooltipRight(@content) {
.tooltipBase(@content);
&:before {
&::before {
margin-bottom : -@arrowSize;
margin-left : -@arrowSize * 2;
border-right-color : @tooltipColor;
}
&:after{ margin-bottom: -14px;}
&:before, &:after {
&::after { margin-bottom : -14px;}
&::before, &::after {
bottom : 50%;
left : 100%;
}
&:hover:after, &:hover:before, &:focus:after, &:focus:before {
&:hover::after, &:hover::before, &:focus::after, &:focus::before {
.transform(translateX(@arrowSize + 2));
}
}
.tooltipShow(){
}
.tooltipShow(){ }
.tooltipBase(@content) {
//position: relative;
&:before, &:after{
&::before, &::after {
.animateAll();
position : absolute;
z-index : 1000000;
opacity : 0;
pointer-events : none;
opacity : 0;
}
//Arrow
&:before{
content : '';
&::before {
z-index : 1000001;
content : '';
background : transparent;
border : @arrowSize solid transparent;
}
//Box
&:after{
content : @content;
&::after {
visibility : hidden;
padding : 8px 10px;
background : @tooltipColor;
font-size : 12px;
color : white;
line-height : 12px;
color : white;
white-space : nowrap;
content : @content;
background : @tooltipColor;
}
&:hover:before, &:hover:after {
&:hover::before, &:hover::after {
visibility : visible;
opacity : 1;
}

2
tests/markdown/basic.test.js
View File

@@ -1,4 +1,4 @@
/* eslint-disable max-lines */
import Markdown from 'naturalcrit/markdown.js';

6
tests/markdown/definition-lists.test.js
View File

@@ -1,4 +1,4 @@
/* eslint-disable max-lines */
import Markdown from 'naturalcrit/markdown.js';
@@ -92,12 +92,12 @@ describe('Multiline Definition Lists', ()=>{
test('Multiline Definition Term must have at least one non-empty Definition', function() {
const source = 'Term 1\n::';
const rendered = Markdown.render(source).trim();
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>Term 1</p>\n<div class='blank'></div><div class='blank'></div>`);
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>Term 1</p>\n<div class='blank'></div>\n<div class='blank'></div>`);
});
test('Multiline Definition List must have at least one non-newline character after ::', function() {
const source = 'Term 1\n::\nDefinition 1\n\n';
const rendered = Markdown.render(source).trim();
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>Term 1</p>\n<div class='blank'></div><div class='blank'></div>\n<p>Definition 1</p>`);
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>Term 1</p>\n<div class='blank'></div>\n<div class='blank'></div>\n<p>Definition 1</p>`);
});
});

12
tests/markdown/hard-breaks.test.js
View File

@@ -1,4 +1,4 @@
/* eslint-disable max-lines */
import Markdown from 'naturalcrit/markdown.js';
@@ -12,31 +12,31 @@ describe('Hard Breaks', ()=>{
test('Double Break', function() {
const source = '::\n\n';
const rendered = Markdown.render(source).trim();
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class='blank'></div><div class='blank'></div>`);
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class='blank'></div>\n<div class='blank'></div>`);
});
test('Triple Break', function() {
const source = ':::\n\n';
const rendered = Markdown.render(source).trim();
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class='blank'></div><div class='blank'></div><div class='blank'></div>`);
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>`);
});
test('Many Break', function() {
const source = '::::::::::\n\n';
const rendered = Markdown.render(source).trim();
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class='blank'></div><div class='blank'></div><div class='blank'></div><div class='blank'></div><div class='blank'></div><div class='blank'></div><div class='blank'></div><div class='blank'></div><div class='blank'></div><div class='blank'></div>`);
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>`);
});
test('Multiple sets of Breaks', function() {
const source = ':::\n:::\n:::';
const rendered = Markdown.render(source).trim();
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class='blank'></div><div class='blank'></div><div class='blank'></div>\n<div class='blank'></div><div class='blank'></div><div class='blank'></div>\n<div class='blank'></div><div class='blank'></div><div class='blank'></div>`);
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>`);
});
test('Break directly between two paragraphs', function() {
const source = 'Line 1\n::\nLine 2';
const rendered = Markdown.render(source).trim();
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>Line 1</p>\n<div class='blank'></div><div class='blank'></div>\n<p>Line 2</p>`);
expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>Line 1</p>\n<div class='blank'></div>\n<div class='blank'></div>\n<p>Line 2</p>`);
});
test('Ignored inside a code block', function() {

2
tests/markdown/non-breaking-spaces.test.js
View File

@@ -1,4 +1,4 @@
/* eslint-disable max-lines */
import Markdown from 'naturalcrit/markdown.js';

2
tests/markdown/paragraph-justification.test.js
View File

@@ -1,4 +1,4 @@
/* eslint-disable max-lines */
import Markdown from 'naturalcrit/markdown.js';

25
tests/markdown/variables.test.js
View File

@@ -410,4 +410,29 @@ describe('Regression Tests', ()=>{
const rendered = Markdown.render(source).trimReturns();
expect(rendered).toBe('<table><thead><tr><th>title 1</th><th>title 2</th><th>title 3</th><th>title 4</th></tr></thead><tbody><tr><td><a href=\"bar\">foo</a></td><td>Ipsum</td><td>)</td><td>)</td></tr></tbody></table>');
});
it('Handle Extra spaces in image alt-text 1', function(){
const source='![ where is my image??](http://i.imgur.com/hMna6G0.png)';
const rendered = Markdown.render(source).trimReturns();
expect(rendered).toBe('<p><img src=\"http://i.imgur.com/hMna6G0.png\" alt=\"where is my image??\" style=\"--HB_src:url(http://i.imgur.com/hMna6G0.png);\"></p>');
});
it('Handle Extra spaces in image alt-text 2', function(){
const source='![where is my image??](http://i.imgur.com/hMna6G0.png)';
const rendered = Markdown.render(source).trimReturns();
expect(rendered).toBe('<p><img src=\"http://i.imgur.com/hMna6G0.png\" alt=\"where is my image??\" style=\"--HB_src:url(http://i.imgur.com/hMna6G0.png);\"></p>');
});
it('Handle Extra spaces in image alt-text 3', function(){
const source='![where is my image?? ](http://i.imgur.com/hMna6G0.png)';
const rendered = Markdown.render(source).trimReturns();
expect(rendered).toBe('<p><img src=\"http://i.imgur.com/hMna6G0.png\" alt=\"where is my image??\" style=\"--HB_src:url(http://i.imgur.com/hMna6G0.png);\"></p>');
});
it('Handle Extra spaces in image alt-text 4', function(){
const source='![where is my image??](http://i.imgur.com/hMna6G0.png){height=20%,width=20%}';
const rendered = Markdown.render(source).trimReturns();
expect(rendered).toBe('<p><img style=\"--HB_src:url(http://i.imgur.com/hMna6G0.png);\" src=\"http://i.imgur.com/hMna6G0.png\" alt=\"where is my image??\" height=\"20%\" width=\"20%\"></p>');
});
});

192
themes/Legacy/5ePHB/style.less
View File

@@ -10,20 +10,16 @@
@monsterStatBackground : #FDF1DC; // Lighter parchment
@captionText : #766649; // Brown
@page { margin : 0; }
body {
counter-reset : phb-page-numbers;
}
*{
-webkit-print-color-adjust : exact;
}
body { counter-reset : phb-page-numbers; }
* { -webkit-print-color-adjust : exact; }
.useSansSerif() {
font-family : ScalySans;
font-family : "ScalySans";
em {
font-family : ScalySans;
font-family : "ScalySans";
font-style : italic;
}
strong {
font-family : ScalySans;
font-family : "ScalySans";
font-weight : 800;
letter-spacing : -0.02em;
}
@@ -42,19 +38,19 @@ body {
}
.phb, .page {
.useColumns();
counter-increment : phb-page-numbers;
position : relative;
z-index : 15;
box-sizing : border-box;
overflow : hidden;
height : 279.4mm;
width : 215.9mm;
height : 279.4mm;
padding : 1.0cm 1.7cm;
padding-bottom : 1.5cm;
overflow : hidden;
font-family : "BookSanity";
font-size : 0.317cm;
counter-increment : phb-page-numbers;
background-color : @background;
background-image : @backgroundImage;
font-family : BookSanity;
font-size : 0.317cm;
text-rendering : optimizeLegibility;
page-break-before : always;
page-break-after : always;
@@ -70,47 +66,39 @@ body {
p {
padding-bottom : 0.8em;
line-height : 1.269em;
&+p{
margin-top : -0.8em;
}
& + p { margin-top : -0.8em; }
}
ul {
margin-bottom : 0.8em;
padding-left : 1.4em;
margin-bottom : 0.8em;
line-height : 1.269em;
list-style-position : outside;
list-style-type : disc;
}
ol {
margin-bottom : 0.8em;
padding-left : 1.4em;
margin-bottom : 0.8em;
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;
}
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;
}
em { font-style : italic; }
sup {
vertical-align : super;
font-size : smaller;
line-height : 0;
vertical-align : super;
}
sub {
vertical-align : sub;
font-size : smaller;
line-height : 0;
vertical-align : sub;
}
//*****************************
// * HEADERS
@@ -118,7 +106,7 @@ body {
h1,h2,h3,h4 {
margin-top : 0.2em;
margin-bottom : 0.2em;
font-family : MrJeeves;
font-family : "MrJeeves";
font-weight : 800;
color : @headerText;
}
@@ -129,15 +117,13 @@ body {
-moz-column-span : all;
& + p::first-letter {
float : left;
font-family : Solberry;
font-family : "Solberry";
font-size : 10em;
color : #222;
line-height : 0.795em;
color : #222222;
}
}
h2{
font-size : 0.705cm;
}
h2 { font-size : 0.705cm; }
h3 {
font-size : 0.529cm;
border-bottom : 2px solid @headerUnderline;
@@ -148,7 +134,7 @@ body {
}
h5 {
margin-bottom : 0.2em;
font-family : ScalySansSmallCaps;
font-family : "ScalySansSmallCaps";
font-size : 0.423cm;
font-weight : 900;
}
@@ -164,20 +150,16 @@ body {
display : table-row-group;
font-weight : 800;
th {
vertical-align : bottom;
padding-bottom : 0.3em;
padding-right : 0.1em;
padding-bottom : 0.3em;
padding-left : 0.1em;
vertical-align : bottom;
}
}
tbody {
tr {
td{
padding : 0.3em 0.1em;
}
&:nth-child(odd){
background-color : @noteGreen;
}
td { padding : 0.3em 0.1em; }
&:nth-child(odd) { background-color : @noteGreen; }
}
}
}
@@ -187,23 +169,21 @@ body {
blockquote {
.useSansSerif();
box-sizing : border-box;
margin-bottom : 1em;
padding : 5px 10px;
margin-bottom : 1em;
background-color : @noteGreen;
border-style : solid;
border-width : 11px;
border-image : @noteBorderImage 11;
border-image-outset : 9px 0px;
box-shadow : 1px 4px 14px #888;
box-shadow : 1px 4px 14px #888888;
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;
}
pre + blockquote, h2 + blockquote, h3 + blockquote, h4 + blockquote, h5 + blockquote { margin-top : 13px; }
//*****************************
// * MONSTER STAT BLOCK
// *****************************/
@@ -217,18 +197,14 @@ body {
h2 {
margin-top : -8px;
margin-bottom : 0px;
&+p{
padding-bottom : 0px;
}
& + p { padding-bottom : 0px; }
}
h3 {
font-family : ScalySans;
font-weight : 400;
font-family : "ScalySans";
font-weight : normal;
border-bottom : 1px solid @headerText;
}
hr+ul{
color : @headerText;
}
hr + ul { color : @headerText; }
ul {
.useSansSerif();
padding-left : 1em;
@@ -241,17 +217,13 @@ body {
border-style : none;
border-image : none;
tbody {
tr:nth-child(odd), tr:nth-child(even){
background-color : transparent;
tr:nth-child(odd), tr:nth-child(even) { background-color : transparent; }
}
}
}
table{
color : @headerText;
}
table { color : @headerText; }
p + p {
margin-top : 0em;
padding-bottom : 0.5em;
margin-top : 0em;
text-indent : 0em;
}
//Triangle dividers
@@ -273,23 +245,19 @@ body {
// * FOOTER
// *****************************/
&:after {
content : "";
position : absolute;
bottom : 0px;
left : 0px;
z-index : 100;
height : 50px;
width : 100%;
height : 50px;
content : '';
background-image : @footerAccentImage;
background-size : cover;
}
&:nth-child(even) {
&:after{
transform : scaleX(-1);
}
.pageNumber{
left : 2px;
}
&::after { transform : scaleX(-1); }
.pageNumber { left : 2px; }
.footnote {
left : 80px;
text-align : left;
@@ -301,11 +269,9 @@ body {
bottom : 22px;
width : 50px;
font-size : 0.9em;
color : #c9ad6a;
color : #C9AD6A;
text-align : center;
&.auto::after {
content : counter(phb-page-numbers);
}
&.auto::after { content : counter(phb-page-numbers); }
}
.footnote {
position : absolute;
@@ -314,7 +280,7 @@ body {
z-index : 150;
width : 200px;
font-size : 0.8em;
color : #c9ad6a;
color : #C9AD6A;
text-align : right;
}
//*****************************
@@ -326,8 +292,8 @@ body {
}
//Modified unorder list, used in spells
hr + ul {
margin-bottom : 0.5em;
padding-left : 1em;
margin-bottom : 0.5em;
text-indent : -1em;
list-style-type : none;
}
@@ -346,13 +312,9 @@ body {
break-inside : avoid;
}
//Better spacing for spell blocks
h4+p+hr+ul{
margin-top : -0.5em
}
h4 + p + hr + ul { margin-top : -0.5em; }
//Text indent right after table
table+p{
text-indent : 1em;
}
table + p { text-indent : 1em; }
// Nested lists
ul ul,ol ol,ul ol,ol ul {
margin-bottom : 0px;
@@ -370,33 +332,31 @@ body {
.phb .spellList {
.useSansSerif();
column-count : 4;
column-span : all;
-webkit-column-span : all;
-moz-column-span : all;
ul+h5{
margin-top : 15px;
}
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;
margin-bottom : 0.5em;
text-indent : -1em;
list-style-type : none;
break-inside : auto;
-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;
column-span : all;
}
//*****************************
// * CLASS TABLE
@@ -408,48 +368,42 @@ body {
background-color : white;
border : initial;
border-style : solid;
border-image-source : @frameBorderImage;
border-image-slice : 150 200 150 200;
border-image-width : 47px;
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;
}
h5 { margin-bottom : 10px; }
}
//************************************
// * DESCRIPTIVE TEXT BOX
// ************************************/
.phb .descriptive {
margin-bottom : 1em;
background-color : #faf7ea;
font-family : ScalySans;
font-family : "ScalySans";
background-color : #FAF7EA;
border-style : solid;
border-width : 7px;
border-image : @descriptiveBoxImage 12 stretch;
border-image-outset : 4px;
box-shadow : 0px 0px 6px #faf7ea;
box-shadow : 0px 0px 6px #FAF7EA;
p {
display : block;
padding-bottom : 0px;
line-height : 1.47em;
}
p + p {
padding-top : .8em;
}
p + p { padding-top : 0.8em; }
em {
font-family : ScalySans;
font-family : "ScalySans";
font-style : italic;
}
strong {
font-family : ScalySans;
font-family : "ScalySans";
font-weight : 800;
letter-spacing : -0.02em;
}
}
.phb pre+.descriptive{
margin-top : 8px;
}
.phb pre + .descriptive { margin-top : 8px; }
//*****************************
// * ARTIST CREDIT BLOCK
@@ -457,25 +411,23 @@ body {
.phb {
.artist {
position : absolute;
text-align : center;
font-family : WalterTurncoat;
font-family : "WalterTurncoat";
font-size : 0.27cm;
color : @captionText;
text-align : center;
p, p + p {
margin : unset;
text-indent : unset;
line-height : 0.941em;
text-indent : unset;
}
h5 {
font-family : "WalterTurncoat";
font-size : 1.3em;
font-family : WalterTurncoat;
}
a {
color : inherit;
text-decoration : unset;
&:hover {
text-decoration : underline;
}
&:hover { text-decoration : underline; }
}
}
}
@@ -489,15 +441,11 @@ body {
a {
color : black;
text-decoration : none;
&:hover{
text-decoration : underline;
}
&:hover { text-decoration : underline; }
}
ul {
padding-left : 0;
list-style-type : none;
}
&>ul>li{
margin-bottom : 10px;
}
& > ul > li { margin-bottom : 10px; }
}

2
themes/V3/5eDMG/snippets.js
View File

@@ -1,4 +1,4 @@
/* eslint-disable max-lines */
module.exports = [
];

24
themes/V3/5eDMG/style.less
View File

@@ -7,37 +7,29 @@
}
.page {
background-image : url(/assets/DMG_background.png);
background-image : url("/assets/DMG_background.png");
background-size : cover;
/* TABLES WITHIN NOTES */
.note table tbody tr:nth-child(odd) {
background:#fff;
}
.note table tbody tr:nth-child(odd) { background : #FFFFFF; }
/* DROP CAP */
h1 + p::first-letter {
background-image: unset;
color : black;
background-image : unset;
}
.quote p:first-child::first-line {
all: unset;
}
.quote p:first-child::first-line { all : unset; }
&:after {
background-image : url(/assets/DMG_footerAccent.png);
&::after {
height : 58px;
background-image : url("/assets/DMG_footerAccent.png");
}
.footnote {
bottom : 40px;
}
.footnote { bottom : 40px; }
}
.page:has(.partCover) {
.partCover {
background-image: @partCoverHeaderDMG;
}
.partCover { background-image : @partCoverHeaderDMG; }
}

2
themes/V3/5ePHB/snippets/monsterblock.gen.js
View File

@@ -148,7 +148,7 @@ const genAction = function(){
'Turnbuckle Roll'
]);
return `***${name}.*** *Melee Weapon Attack:* +4 to hit, reach 5ft., one target. *Hit* 5 (1d6 + 2) `;
return `***${name}.*** *Melee Weapon Attack:* +4 to hit, reach 5 ft., one target. *Hit:* 5 (1d6 + 2) `;
};

52
themes/V3/5ePHB/style.less
View File

@@ -17,7 +17,6 @@
.useSansSerif() {
font-family : 'ScalySansRemake';
font-size : 0.318cm;
line-height : 1.2em;
p,dl,ul,ol { line-height : 1.2em; }
ul, ol { padding-left : 1em; }
em { font-style : italic; }
@@ -306,12 +305,12 @@
margin-left : -0.16cm;
background-color : var(--HB_Color_MonsterStatBackground);
background-image : @monsterBlockBackground;
background-blend-mode : overlay;
border-style : solid;
border-width : 7px 6px;
border-image : @monsterBorderImage 14 round;
border-image-outset : 0px 2px;
box-shadow : 1px 4px 14px #888888;
background-blend-mode : overlay;
}
position : relative;
@@ -336,9 +335,9 @@
//Triangle dividers
hr {
visibility : visible;
height : 6px;
margin : 0.12cm 0cm;
visibility : visible;
background-image : @redTriangleImage;
background-size : 100% 100%;
border : none;
@@ -457,8 +456,8 @@
// * EXTRAS
// *****************************/
hr {
margin : 0px;
visibility : hidden;
margin : 0px;
}
//Text indent right after table
table + p { text-indent : 1em; }
@@ -526,10 +525,10 @@
content : '';
background-image : @classTableDecoration,
@classTableDecoration;
filter : drop-shadow(0px 0px 1px #C8C5C080);
background-repeat : no-repeat, no-repeat;
background-position : top, bottom;
background-size : contain, contain;
filter : drop-shadow(0px 0px 1px #C8C5C080);
transform : translateY(-50%) translateX(-50%);
}
&.decoration.wide::before {
@@ -546,16 +545,17 @@
columns : 1;
text-align : center;
&::after { display : none; }
.frontCover { position : absolute; }
h1 {
margin-top : 1.2cm;
margin-top : 1.55cm;
margin-bottom : 0;
font-family : 'NodestoCapsCondensed';
font-size : 2.245cm;
font-weight : normal;
line-height : 1.9cm;
color : white;
text-shadow : unset;
text-transform : uppercase;
text-shadow : unset;
-webkit-text-stroke : 0.2cm black;
paint-order : stroke;
}
@@ -571,14 +571,14 @@
hr {
position : relative;
display : block;
visibility : visible;
width : 12cm;
height : 0.5cm;
margin : auto;
visibility : visible;
background-image : @horizontalRule;
filter : drop-shadow(0 0 3px black);
background-size : 100% 100%;
border : none;
filter : drop-shadow(0 0 3px black);
}
.banner {
position : absolute;
@@ -621,10 +621,7 @@
right : 0;
left : 0;
filter : drop-shadow(0 0 0.075cm black);
img {
width : 100%;
height : 2cm;
}
img { height : 2cm; }
}
}
// *****************************
@@ -634,8 +631,9 @@
columns : 1;
text-align : center;
&::after { display : none; }
.insideCover { position : absolute; }
h1 {
margin-top : 1.2cm;
margin-top : 1.55cm;
margin-bottom : 0;
font-family : 'NodestoCapsCondensed';
font-size : 2.1cm;
@@ -652,10 +650,10 @@
hr {
position : relative;
display : block;
visibility : visible;
width : 12cm;
height : 0.5cm;
margin : auto;
visibility : visible;
background-image : @horizontalRule;
background-size : 100% 100%;
border : none;
@@ -666,10 +664,7 @@
bottom : 1cm;
left : 0;
height : 2cm;
img {
width : 100%;
height : 2cm;
}
img { height : 2cm; }
}
}
// *****************************
@@ -677,6 +672,7 @@
// *****************************/
.page:has(.backCover) {
padding : 2.25cm 1.3cm 2cm 1.3cm;
line-height : 1.4em;
color : #FFFFFF;
columns : 1;
&::after { display : none; }
@@ -685,7 +681,6 @@
position : absolute;
inset : 0;
z-index : -1;
width : 11cm;
background-image : @backCover;
background-repeat : no-repeat;
background-size : contain;
@@ -708,12 +703,12 @@
height : 100%;
}
hr {
visibility : visible;
width : 4.5cm;
height : 0.53cm;
margin-top : 1.1cm;
margin-right : auto;
margin-left : auto;
visibility : visible;
background-image : @horizontalRule;
background-size : 100% 100%;
border : none;
@@ -737,7 +732,6 @@
img {
position : relative;
z-index : 0;
width : 100%;
height : 1.5cm;
}
p {
@@ -802,9 +796,7 @@
.page:has(.partCover) {
--TOC : exclude;
& h1 {
--TOC: include;
}
& h1 { --TOC : include; }
}
.page {
@@ -871,9 +863,7 @@
.useColumns(0.96, @fillMode: balance);
}
}
.toc.wide li {
break-inside: auto;
}
.toc.wide li { break-inside : auto; }
}
// *****************************
@@ -898,9 +888,7 @@
.page h1 + * { margin-top : 0; }
.page .descriptive.wide + * {
margin-top: 0;
}
.page .descriptive.wide + * { margin-top : 0; }
//*****************************
// * RUNE TABLE
@@ -915,8 +903,8 @@
width : 1.3cm;
height : 1.3cm;
font-weight : normal;
text-transform : uppercase;
vertical-align : middle;
text-transform : uppercase;
outline : 1px solid #000000;
}
th {

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

@@ -486,6 +486,15 @@ module.exports = [
icon : 'fas fa-print',
view : 'style',
snippets : [
{
name : 'US Letter Page Size',
icon : 'far fa-file',
gen : dedent`/* US Letter Page Size */
.page {
width : 215.9mm; /* 8.5in */
height : 279.4mm; /* 11in */
}\n\n`,
},
{
name : 'A3 Page Size',
icon : 'far fa-file',

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

@@ -22,9 +22,9 @@ body { counter-reset : page-numbers 0; }
// *****************************/
.page {
.block {
break-inside : avoid;
display : inline-block;
width : 100%;
break-inside : avoid;
img { z-index : 0; }
}
.inline-block {
@@ -121,7 +121,7 @@ body { counter-reset : page-numbers 0; }
// * CODE BLOCKS
// ************************************/
code {
font-family : 'Courier New', "Courier", monospace;
font-family : 'Courier New', 'Courier', monospace;
overflow-wrap : break-word;
white-space : pre-wrap;
}
@@ -134,10 +134,10 @@ body { counter-reset : page-numbers 0; }
// * EXTRAS
// *****************************/
.columnSplit {
margin-top : 0;
visibility : hidden;
-webkit-column-break-after : always;
margin-top : 0;
break-after : always;
-webkit-column-break-after : always;
-moz-column-break-after : always;
& + * { margin-top : 0; }
}
@@ -200,11 +200,11 @@ body { counter-reset : page-numbers 0; }
background-color : var(--HB_Color_WatercolorStain); /* default color */
background-size : cover;
-webkit-mask-image : var(--wc);
-webkit-mask-size : contain;
-webkit-mask-repeat : no-repeat;
mask-image : var(--wc);
mask-size : contain;
-webkit-mask-repeat : no-repeat;
mask-repeat : no-repeat;
-webkit-mask-size : contain;
mask-size : contain;
--wc : @watercolor1; /* default image */
}
@@ -232,15 +232,15 @@ body { counter-reset : page-numbers 0; }
height : 200%;
background-image : var(--checkerboard);
background-size : 20px;
transform : translateY(50%) translateX(-50%) rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
-webkit-mask-image : var(--wc), var(--revealer);
-webkit-mask-repeat : repeat-x;
-webkit-mask-size : 50%; //Scale only X to fit page width, leave height at aspect ratio, designed to hang off the edge
-webkit-mask-position : 50% calc(50% - var(--offset));
mask-image : var(--wc);
-webkit-mask-repeat : repeat-x;
mask-repeat : repeat-x;
mask-size : 50%;
-webkit-mask-position : 50% calc(50% - var(--offset));
mask-position : 50% calc(50% - var(--offset));
-webkit-mask-size : 50%; //Scale only X to fit page width, leave height at aspect ratio, designed to hang off the edge
mask-size : 50%;
transform : translateY(50%) translateX(-50%) rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
--rotation : 0;
--revealer : none;
--checkerboard : none;
@@ -277,19 +277,19 @@ body { counter-reset : page-numbers 0; }
}
&.revealImage {
--revealer : linear-gradient(0deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2));
--checkerboard : url("/assets/waterColorMasks/missingImage.png"); //shows any masked regions not filled by image
--checkerboard : url('/assets/waterColorMasks/missingImage.png'); //shows any masked regions not filled by image
}
}
.imageMaskEdge {
&1 { --wc : url("/assets/waterColorMasks/edge/0001.webp"); }
&2 { --wc : url("/assets/waterColorMasks/edge/0002.webp"); }
&3 { --wc : url("/assets/waterColorMasks/edge/0003.webp"); }
&4 { --wc : url("/assets/waterColorMasks/edge/0004.webp"); }
&5 { --wc : url("/assets/waterColorMasks/edge/0005.webp"); }
&6 { --wc : url("/assets/waterColorMasks/edge/0006.webp"); }
&7 { --wc : url("/assets/waterColorMasks/edge/0007.webp"); }
&8 { --wc : url("/assets/waterColorMasks/edge/0008.webp"); }
&1 { --wc : url('/assets/waterColorMasks/edge/0001.webp'); }
&2 { --wc : url('/assets/waterColorMasks/edge/0002.webp'); }
&3 { --wc : url('/assets/waterColorMasks/edge/0003.webp'); }
&4 { --wc : url('/assets/waterColorMasks/edge/0004.webp'); }
&5 { --wc : url('/assets/waterColorMasks/edge/0005.webp'); }
&6 { --wc : url('/assets/waterColorMasks/edge/0006.webp'); }
&7 { --wc : url('/assets/waterColorMasks/edge/0007.webp'); }
&8 { --wc : url('/assets/waterColorMasks/edge/0008.webp'); }
}
[class*='imageMaskCenter'] {
@@ -297,15 +297,15 @@ body { counter-reset : page-numbers 0; }
left : calc(var(--offsetX));
width : 100%;
height : 100%;
transform : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
-webkit-mask-image : var(--wc), var(--revealer);
-webkit-mask-repeat : no-repeat;
-webkit-mask-size : 100% 100%; //Scale both dimensions to fit page size
-webkit-mask-position : 0% 0%;
mask-image : var(--wc), var(--revealer);
-webkit-mask-repeat : no-repeat;
mask-repeat : no-repeat;
mask-size : 100% 100%; //Scale both dimensions to fit page size
-webkit-mask-position : 0% 0%;
mask-position : 50% 50%;
-webkit-mask-size : 100% 100%; //Scale both dimensions to fit page size
mask-size : 100% 100%; //Scale both dimensions to fit page size
transform : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
& > p:has(img) {
position : absolute;
@@ -322,23 +322,23 @@ body { counter-reset : page-numbers 0; }
}
.imageMaskCenter {
&1 { --wc : url("/assets/waterColorMasks/center/0001.webp"); }
&2 { --wc : url("/assets/waterColorMasks/center/0002.webp"); }
&3 { --wc : url("/assets/waterColorMasks/center/0003.webp"); }
&4 { --wc : url("/assets/waterColorMasks/center/0004.webp"); }
&5 { --wc : url("/assets/waterColorMasks/center/0005.webp"); }
&6 { --wc : url("/assets/waterColorMasks/center/0006.webp"); }
&7 { --wc : url("/assets/waterColorMasks/center/0007.webp"); }
&8 { --wc : url("/assets/waterColorMasks/center/0008.webp"); }
&9 { --wc : url("/assets/waterColorMasks/center/0009.webp"); }
&10 { --wc : url("/assets/waterColorMasks/center/0010.webp"); }
&11 { --wc : url("/assets/waterColorMasks/center/0011.webp"); }
&12 { --wc : url("/assets/waterColorMasks/center/0012.webp"); }
&13 { --wc : url("/assets/waterColorMasks/center/0013.webp"); }
&14 { --wc : url("/assets/waterColorMasks/center/0014.webp"); }
&15 { --wc : url("/assets/waterColorMasks/center/0015.webp"); }
&16 { --wc : url("/assets/waterColorMasks/center/0016.webp"); }
&special { --wc : url("/assets/waterColorMasks/center/special.webp"); }
&1 { --wc : url('/assets/waterColorMasks/center/0001.webp'); }
&2 { --wc : url('/assets/waterColorMasks/center/0002.webp'); }
&3 { --wc : url('/assets/waterColorMasks/center/0003.webp'); }
&4 { --wc : url('/assets/waterColorMasks/center/0004.webp'); }
&5 { --wc : url('/assets/waterColorMasks/center/0005.webp'); }
&6 { --wc : url('/assets/waterColorMasks/center/0006.webp'); }
&7 { --wc : url('/assets/waterColorMasks/center/0007.webp'); }
&8 { --wc : url('/assets/waterColorMasks/center/0008.webp'); }
&9 { --wc : url('/assets/waterColorMasks/center/0009.webp'); }
&10 { --wc : url('/assets/waterColorMasks/center/0010.webp'); }
&11 { --wc : url('/assets/waterColorMasks/center/0011.webp'); }
&12 { --wc : url('/assets/waterColorMasks/center/0012.webp'); }
&13 { --wc : url('/assets/waterColorMasks/center/0013.webp'); }
&14 { --wc : url('/assets/waterColorMasks/center/0014.webp'); }
&15 { --wc : url('/assets/waterColorMasks/center/0015.webp'); }
&16 { --wc : url('/assets/waterColorMasks/center/0016.webp'); }
&special { --wc : url('/assets/waterColorMasks/center/special.webp'); }
}
@@ -347,15 +347,15 @@ body { counter-reset : page-numbers 0; }
left : calc(-50% + var(--offsetX));
width : 200%;
height : 200%;
transform : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
-webkit-mask-image : var(--wc), var(--revealer);
-webkit-mask-repeat : no-repeat;
-webkit-mask-size : 100% 100%; //Scale both dimensions to fit page size
-webkit-mask-position : 50% 50%;
mask-image : var(--wc), var(--revealer);
-webkit-mask-repeat : no-repeat;
mask-repeat : no-repeat;
mask-size : 100% 100%; //Scale both dimensions to fit page size
-webkit-mask-position : 50% 50%;
mask-position : 50% 50%;
-webkit-mask-size : 100% 100%; //Scale both dimensions to fit page size
mask-size : 100% 100%; //Scale both dimensions to fit page size
transform : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
& > p:has(img) {
bottom : 25%;
left : 25%;
@@ -368,43 +368,43 @@ body { counter-reset : page-numbers 0; }
}
}
.imageMaskCorner {
&1 { --wc : url("/assets/waterColorMasks/corner/0001.webp"); }
&2 { --wc : url("/assets/waterColorMasks/corner/0002.webp"); }
&3 { --wc : url("/assets/waterColorMasks/corner/0003.webp"); }
&4 { --wc : url("/assets/waterColorMasks/corner/0004.webp"); }
&5 { --wc : url("/assets/waterColorMasks/corner/0005.webp"); }
&6 { --wc : url("/assets/waterColorMasks/corner/0006.webp"); }
&7 { --wc : url("/assets/waterColorMasks/corner/0007.webp"); }
&8 { --wc : url("/assets/waterColorMasks/corner/0008.webp"); }
&9 { --wc : url("/assets/waterColorMasks/corner/0009.webp"); }
&10 { --wc : url("/assets/waterColorMasks/corner/0010.webp"); }
&11 { --wc : url("/assets/waterColorMasks/corner/0011.webp"); }
&12 { --wc : url("/assets/waterColorMasks/corner/0012.webp"); }
&13 { --wc : url("/assets/waterColorMasks/corner/0013.webp"); }
&14 { --wc : url("/assets/waterColorMasks/corner/0014.webp"); }
&15 { --wc : url("/assets/waterColorMasks/corner/0015.webp"); }
&16 { --wc : url("/assets/waterColorMasks/corner/0016.webp"); }
&17 { --wc : url("/assets/waterColorMasks/corner/0017.webp"); }
&18 { --wc : url("/assets/waterColorMasks/corner/0018.webp"); }
&19 { --wc : url("/assets/waterColorMasks/corner/0019.webp"); }
&20 { --wc : url("/assets/waterColorMasks/corner/0020.webp"); }
&21 { --wc : url("/assets/waterColorMasks/corner/0021.webp"); }
&22 { --wc : url("/assets/waterColorMasks/corner/0022.webp"); }
&23 { --wc : url("/assets/waterColorMasks/corner/0023.webp"); }
&24 { --wc : url("/assets/waterColorMasks/corner/0024.webp"); }
&25 { --wc : url("/assets/waterColorMasks/corner/0025.webp"); }
&26 { --wc : url("/assets/waterColorMasks/corner/0026.webp"); }
&27 { --wc : url("/assets/waterColorMasks/corner/0027.webp"); }
&28 { --wc : url("/assets/waterColorMasks/corner/0028.webp"); }
&29 { --wc : url("/assets/waterColorMasks/corner/0029.webp"); }
&30 { --wc : url("/assets/waterColorMasks/corner/0030.webp"); }
&31 { --wc : url("/assets/waterColorMasks/corner/0031.webp"); }
&32 { --wc : url("/assets/waterColorMasks/corner/0032.webp"); }
&33 { --wc : url("/assets/waterColorMasks/corner/0033.webp"); }
&34 { --wc : url("/assets/waterColorMasks/corner/0034.webp"); }
&35 { --wc : url("/assets/waterColorMasks/corner/0035.webp"); }
&36 { --wc : url("/assets/waterColorMasks/corner/0036.webp"); }
&37 { --wc : url("/assets/waterColorMasks/corner/0037.webp"); }
&1 { --wc : url('/assets/waterColorMasks/corner/0001.webp'); }
&2 { --wc : url('/assets/waterColorMasks/corner/0002.webp'); }
&3 { --wc : url('/assets/waterColorMasks/corner/0003.webp'); }
&4 { --wc : url('/assets/waterColorMasks/corner/0004.webp'); }
&5 { --wc : url('/assets/waterColorMasks/corner/0005.webp'); }
&6 { --wc : url('/assets/waterColorMasks/corner/0006.webp'); }
&7 { --wc : url('/assets/waterColorMasks/corner/0007.webp'); }
&8 { --wc : url('/assets/waterColorMasks/corner/0008.webp'); }
&9 { --wc : url('/assets/waterColorMasks/corner/0009.webp'); }
&10 { --wc : url('/assets/waterColorMasks/corner/0010.webp'); }
&11 { --wc : url('/assets/waterColorMasks/corner/0011.webp'); }
&12 { --wc : url('/assets/waterColorMasks/corner/0012.webp'); }
&13 { --wc : url('/assets/waterColorMasks/corner/0013.webp'); }
&14 { --wc : url('/assets/waterColorMasks/corner/0014.webp'); }
&15 { --wc : url('/assets/waterColorMasks/corner/0015.webp'); }
&16 { --wc : url('/assets/waterColorMasks/corner/0016.webp'); }
&17 { --wc : url('/assets/waterColorMasks/corner/0017.webp'); }
&18 { --wc : url('/assets/waterColorMasks/corner/0018.webp'); }
&19 { --wc : url('/assets/waterColorMasks/corner/0019.webp'); }
&20 { --wc : url('/assets/waterColorMasks/corner/0020.webp'); }
&21 { --wc : url('/assets/waterColorMasks/corner/0021.webp'); }
&22 { --wc : url('/assets/waterColorMasks/corner/0022.webp'); }
&23 { --wc : url('/assets/waterColorMasks/corner/0023.webp'); }
&24 { --wc : url('/assets/waterColorMasks/corner/0024.webp'); }
&25 { --wc : url('/assets/waterColorMasks/corner/0025.webp'); }
&26 { --wc : url('/assets/waterColorMasks/corner/0026.webp'); }
&27 { --wc : url('/assets/waterColorMasks/corner/0027.webp'); }
&28 { --wc : url('/assets/waterColorMasks/corner/0028.webp'); }
&29 { --wc : url('/assets/waterColorMasks/corner/0029.webp'); }
&30 { --wc : url('/assets/waterColorMasks/corner/0030.webp'); }
&31 { --wc : url('/assets/waterColorMasks/corner/0031.webp'); }
&32 { --wc : url('/assets/waterColorMasks/corner/0032.webp'); }
&33 { --wc : url('/assets/waterColorMasks/corner/0033.webp'); }
&34 { --wc : url('/assets/waterColorMasks/corner/0034.webp'); }
&35 { --wc : url('/assets/waterColorMasks/corner/0035.webp'); }
&36 { --wc : url('/assets/waterColorMasks/corner/0036.webp'); }
&37 { --wc : url('/assets/waterColorMasks/corner/0037.webp'); }
}
}
@@ -428,17 +428,6 @@ body { counter-reset : page-numbers 0; }
}
}
//*****************************
// * BLANK LINE
// *****************************/
.page {
.blank {
height : 1em;
margin-top : 0;
& + * { margin-top : 0; }
}
}
//*****************************
// * WIDE
// *****************************/
@@ -449,6 +438,11 @@ body { counter-reset : page-numbers 0; }
margin-bottom : 1em;
& + * { margin-top : 0; }
}
.blank {
height : 1em;
margin-top : 0;
& + * { margin-top : 0; }
}
}
//*****************************
@@ -473,8 +467,8 @@ body { counter-reset : page-numbers 0; }
height : 1.5cm;
margin : 0 auto;
background-color : black;
-webkit-mask : url("/assets/naturalCritLogoWhite.svg") center / contain no-repeat;
mask : url("/assets/naturalCritLogoWhite.svg") center / contain no-repeat;
-webkit-mask : url('/assets/naturalCritLogoWhite.svg') center / contain no-repeat;
mask : url('/assets/naturalCritLogoWhite.svg') center / contain no-repeat;
}
.homebreweryIcon.red { background-color : red; }
.homebreweryIcon.gold { background-image : linear-gradient(to top left, brown 22.5%, gold 40%, white 60%, gold 67.5%, brown 82.5%); }
@@ -498,13 +492,9 @@ body { counter-reset : page-numbers 0; }
.pageNumber { left : 30px; }
}
.resetCounting {
counter-set : page-numbers 1;
}
.resetCounting { counter-set : page-numbers 1; }
&:not(:has(.skipCounting)) {
counter-increment : page-numbers;
}
&:not(:has(.skipCounting)) { counter-increment : page-numbers; }
}

2
themes/V3/Journal/snippets.js
View File

@@ -1,4 +1,4 @@
/* eslint-disable max-lines */
module.exports = [
];

326
themes/V3/Journal/style.less
View File

@@ -12,46 +12,34 @@
}
.useSansSerif() {
font-family : PermanentMarker;
font-family : "PermanentMarker";
font-size : 0.3cm;
line-height : 1.2em;
color : var(--HB_Color_Text2);
p,dl,ul,ol {
line-height : 1.2em;
}
ul, ol {
padding-left : 1em;
}
em{
font-style : italic;
}
p,dl,ul,ol { line-height : 1.2em; }
ul, ol { padding-left : 1em; }
em { font-style : italic; }
strong {
font-weight : 800;
font-size : 1.1em;
font-weight : 800;
}
h5 + * {
margin-top : 0.1cm;
}
}
.useColumns(@multiplier : 1, @fillMode: balance){
column-gap : 0.5cm;
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;
}
background-image : url("/assets/Journal/Background1.webp");
background-repeat : no-repeat;
background-size : 200% 100%;
filter : drop-shadow(1px 4px 14px black);
&:nth-of-type(2n + 1) { background-position : left; }
&:nth-of-type(2n) {
background-position : right;
padding : 2.1cm 3.9cm 1.7cm 1.8cm;
background-position : right;
}
&:nth-of-type(2) {
background-image : url(/assets/Journal/Background2.webp); //Only first page should show ribbon
background-image : url("/assets/Journal/Background2.webp"); //Only first page should show ribbon
}
& .columnWrapper {
@@ -63,118 +51,92 @@
// * BASE
// *****************************/
.page {
color : var(--HB_Color_Text);
font-family : ReenieBeanie;
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;
}
color : var(--HB_Color_Text);
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;
text-decoration : underline;
}
del{
text-decoration-style: double;
}
del { text-decoration-style : double; }
//Indents after p or lists
p+p, ul+p, ol+p{
text-indent : 1em;
}
p + p, ul + p, ol + p { text-indent : 1em; }
//*****************************
// * HEADERS
// *****************************/
h1,h2,h3,h4,h5 {
font-family : FrederickaTheGreat;
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;
line-height : 1em;
& + 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;
padding-left : 40px; //Allow background color to extend into margins
margin-top : -0.3cm;
margin-right : 0.1em;
margin-bottom : -20px;
margin-left : -40px;
font-family : "FrederickaTheGreat";
font-size : 1.9em;
line-height : 1em;
}
&+p::first-line{
font-variant : small-caps;
}
& + p::first-line { font-variant : small-caps; }
}
h2 {
font-size : 0.62cm;
line-height : 0.988em; //Font is misaligned. Shift up slightly
}
h3 {
margin-left : -0.9em;
font-size : 0.575cm;
line-height : 0.995em; //Font is misaligned. Shift up slightly
margin-left : -0.9em;
}
h4 {
padding-bottom : 5px;
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);
}
&:nth-of-type(2n) { transform : rotate(1deg); }
&:nth-of-type(3n) { transform : rotate(-1.5deg); }
}
h5 {
font-family : PermanentMarker;
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;
}
color : var(--HB_Color_Text2);
& + * { margin-top : 0.2cm; }
}
//*****************************
// * TABLE
// *****************************/
table {
.useSansSerif();
& + * {
margin-top : 0.325cm;
}
& + * { margin-top : 0.325cm; }
thead {
th {
vertical-align : bottom;
padding : 0.14em 0;
vertical-align : bottom;
}
}
tbody {
tr {
td{
padding : 0.14em 0;
}
&:nth-child(odd){
background-image : linear-gradient(to left, #41212100, #41212122, #41212100);
}
td { padding : 0.14em 0; }
&:nth-child(odd) { background-image : linear-gradient(to left, #41212100, #41212122, #41212100); }
}
}
}
@@ -183,43 +145,39 @@
// *****************************/
.note {
.useSansSerif();
padding : 0.2cm;
background-image : url("/assets/Journal/HashMarks.png"),
linear-gradient(to bottom right, #FF000000, #A36A4E14, #41212100);
background-repeat : no-repeat;
background-position : center;
background-size : 120% 120%;
border-style : solid;
border-width : 1px;
border-image-source : url(/assets/Journal/Border1.png);
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;
}
& + * { 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 { margin-top : 0.6cm; }
.descriptive {
.useSansSerif();
padding : 0.2cm;
background-image : url("/assets/Journal/HashMarks.png"),
linear-gradient(to bottom right, #FF000000, #41212114, #41212100);
background-repeat : no-repeat;
background-position : center;
background-size : 120% 120%;
border-style : solid;
border-width : 1px;
border-image-source : url('/assets/Journal/Border2.png');
@@ -227,27 +185,13 @@
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;
}
& + * { margin-top : 0.45cm; }
h5 { font-size : 0.375cm; }
p { padding-bottom : 0px; }
:last-child { margin-bottom : 0; }
}
//*****************************
// * Images Snippets
@@ -257,25 +201,23 @@
.artist {
position : absolute;
width : auto;
text-align : center;
font-family : WalterTurncoat;
font-family : "WalterTurncoat";
font-size : 0.27cm;
color : var(--HB_Color_CaptionText);
text-align : center;
p, p + p {
margin : unset;
text-indent : unset;
line-height : 1em;
text-indent : unset;
}
h5 {
font-family : "WalterTurncoat";
font-size : 1.3em;
font-family : WalterTurncoat;
}
a {
color : inherit;
text-decoration : unset;
&:hover {
text-decoration : underline;
}
&:hover { text-decoration : underline; }
}
}
@@ -285,6 +227,10 @@
.monster {
.useSansSerif();
&.frame {
padding : 0.2cm;
background-image : url('/assets/Journal/HashMarks.png'),
linear-gradient(to bottom right, #FF000000, #A36A4E14, #41212100);
background-size : 100%;
border-style : solid;
border-width : 7px 6px;
border-image-source : url('/assets/Journal/Border3.png');
@@ -292,31 +238,27 @@
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;
color : var(--HB_Color_Text);
//Headers
h2 {
margin : 0;
font-size : 0.62cm;
line-height : 1em;
margin : 0;
& + p {
margin-bottom : 0; //Monster size and type subtext
}
}
h3 {
padding-bottom : 0.05cm;
margin-left : 0;
font-variant : small-caps;
padding-bottom : 0.05cm;
}
hr {
visibility : visible;
@@ -332,22 +274,16 @@
// Monster Ability table
hr + table:first-of-type {
margin : 0;
column-span : none;
color : inherit;
background-image : none;
border-style : none;
border-image : none;
color : inherit;
tr {
background-image : none;
}
td,th {
padding: 0px;
}
column-span : none;
tr { background-image : none; }
td,th { padding : 0px; }
}
:last-child {
margin-bottom : 0;
}
:last-child { margin-bottom : 0; }
strong, em {
font-style : normal;
@@ -364,18 +300,16 @@
// * FOOTER
// *****************************/
&:nth-child(odd) {
.pageNumber{
left : 3cm;
}
.pageNumber { left : 3cm; }
.footnote {
left : 4.5cm;
text-align : left;
}
}
.pageNumber {
font-family : FrederickaTheGreat;
right : 3cm;
bottom : 1.25cm;
font-family : "FrederickaTheGreat";
color : var(--HB_Color_HeaderText);
}
.footnote {
@@ -392,49 +326,43 @@
// * CODE BLOCKS
// ************************************/
code {
font-size : 0.3cm;
padding : 0px 4px;
color : var(--HB_Color_Text);
font-size : 0.3cm;
vertical-align : middle;
background-color : #faf7ea;
color : var(--HB_Color_Text);
background-color : #FAF7EA;
border-radius : 4px;
}
pre code {
padding : 0.15cm;
margin-bottom : 2px;
border-style : solid;
border-width : 1px;
border-radius : 12px;
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;
border : none;
margin : 0px;
border : none;
}
//Text indent right after table
table+p{
text-indent : 1em;
}
table + p { text-indent : 1em; }
a, a:visited, a:hover {
color : var(--HB_Color_Text);
transition : all 1s ease;
}
a:hover {
color:red;
}
a:hover { color : red; }
}
//*****************************
// * SPELL LIST
@@ -442,35 +370,27 @@
.page .spellList {
.useSansSerif();
font-family : PermanentMarker;
font-family : "PermanentMarker";
column-count : 2;
ul+h5{
margin-top : 15px;
}
ul + h5 { margin-top : 15px; }
ul {
margin-bottom : 0.5em;
padding-left : 1em;
margin-bottom : 0.5em;
text-indent : -1em;
list-style-type : none;
break-inside : auto;
-webkit-column-break-inside : auto;
page-break-inside : auto;
break-inside : auto;
}
&.wide{
column-count : 4;
}
&.wide { column-count : 4; }
}
//*****************************
// * CLASS TABLE
// *****************************/
.page .classTable {
th[colspan]:not([rowspan]) {
white-space : nowrap;
}
h5 + table{
margin-top : 0.2cm;
}
th[colspan]:not([rowspan]) { white-space : nowrap; }
h5 + table { margin-top : 0.2cm; }
}
//*****************************
// * TABLE OF CONTENTS
@@ -480,57 +400,51 @@
page-break-inside : avoid;
break-inside : avoid;
h1 {
text-align : center;
margin-bottom : 0.3cm;
text-align : center;
}
a {
display : inline;
color : inherit;
text-decoration : none;
&:hover{
text-decoration : underline;
}
&:hover { text-decoration : underline; }
}
h4 {
margin-top : 0.2cm;
line-height : 0.4cm;
& + ul li {
line-height: 1.2em;
}
& + 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;
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;
margin-left : 0.06cm; /* Spacing before dot leaders */
content : '';
border-bottom : 0.05cm dotted #000000;
}
}
&: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 */
font-family : "ReenieBeanie";
font-size : 0.34cm;
font-weight : normal;
vertical-align : bottom; /* Keep page number bottom-aligned */
color : black;
text-align : right;
/* white-space : nowrap; /* Uncomment if needed */
}
}
@@ -546,6 +460,4 @@
//*****************************
// * WIDE
// *****************************/
.page .wide {
margin-bottom : 0.45cm;
}
.page .wide { margin-bottom : 0.45cm; }

11
themes/codeMirror/customEditorStyles.less
View File

@@ -47,21 +47,16 @@
&.cm-s-vibrant-ink,
&.cm-s-xq-dark,
&.cm-s-yonce,
&.cm-s-zenburn
{
&.cm-s-zenburn {
.CodeMirror-code {
.block:not(.cm-comment) {
color: magenta;
}
.block:not(.cm-comment) { color : magenta; }
.columnSplit {
color : black;
background-color : rgba(35,153,153,0.5);
}
.pageLine {
background-color : rgba(255,255,255,0.5);
& ~ pre.CodeMirror-line {
color: black;
}
& ~ pre.CodeMirror-line { color : black; }
}
}
}

54
themes/fonts/5e legacy/fonts.less
View File

@@ -1,61 +1,61 @@
/* Main Font, serif */
@font-face {
font-family: BookSanity;
font-family : "BookSanity";
font-style : normal;
font-weight : normal;
src : url('../../../fonts/5e legacy/Bookinsanity.woff2');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: BookSanity;
font-family : "BookSanity";
font-style : normal;
font-weight : bold;
src : url('../../../fonts/5e legacy/Bookinsanity Bold.woff2');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: BookSanity;
src: url('../../../fonts/5e legacy/Bookinsanity Italic.woff2');
font-family : "BookSanity";
font-style : italic;
font-weight : normal;
font-style: italic;
src : url('../../../fonts/5e legacy/Bookinsanity Italic.woff2');
}
@font-face {
font-family: BookSanity;
src: url('../../../fonts/5e legacy/Bookinsanity Bold Italic.woff2');
font-weight: bold;
font-family : "BookSanity";
font-style : italic;
font-weight : bold;
src : url('../../../fonts/5e legacy/Bookinsanity Bold Italic.woff2');
}
/* Notes and Tables, sans-serif */
@font-face {
font-family: ScalySans;
font-family : "ScalySans";
font-style : normal;
font-weight : normal;
src : url('../../../fonts/5e legacy/Scaly Sans.woff2');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: ScalySansSmallCaps;
font-family : "ScalySansSmallCaps";
font-style : normal;
font-weight : normal;
src : url('../../../fonts/5e legacy/Scaly Sans Caps.woff2');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: WalterTurncoat;
src: url('../../../fonts/5e legacy/WalterTurncoat-Regular.woff2');
font-weight: normal;
font-family : "WalterTurncoat";
font-style : normal;
font-weight : normal;
src : url('../../../fonts/5e legacy/WalterTurncoat-Regular.woff2');
}
/* Headers */
@font-face {
font-family: MrJeeves;
src: url('../../../fonts/5e legacy/Mr Eaves Small Caps.woff2');
font-weight: normal;
font-family : "MrJeeves";
font-style : normal;
font-weight : normal;
src : url('../../../fonts/5e legacy/Mr Eaves Small Caps.woff2');
}
/* Fancy Drop Cap */
@font-face {
font-family: Solberry;
src: url('../../../fonts/5e legacy/Solbera Imitation.woff2');
font-weight: normal;
font-family : "Solberry";
font-style : normal;
font-weight : normal;
src : url('../../../fonts/5e legacy/Solbera Imitation.woff2');
}

126
themes/fonts/5e/fonts.less
View File

@@ -1,143 +1,143 @@
/* Main Font, serif */
@font-face {
font-family: BookInsanityRemake;
font-family : "BookInsanityRemake";
font-style : normal;
font-weight : normal;
src : url('../../../fonts/5e/Bookinsanity.woff2');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: BookInsanityRemake;
font-family : "BookInsanityRemake";
font-style : normal;
font-weight : bold;
src : url('../../../fonts/5e/Bookinsanity Bold.woff2');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: BookInsanityRemake;
src: url('../../../fonts/5e/Bookinsanity Italic.woff2');
font-family : "BookInsanityRemake";
font-style : italic;
font-weight : normal;
font-style: italic;
src : url('../../../fonts/5e/Bookinsanity Italic.woff2');
}
@font-face {
font-family: BookInsanityRemake;
src: url('../../../fonts/5e/Bookinsanity Bold Italic.woff2');
font-weight: bold;
font-family : "BookInsanityRemake";
font-style : italic;
font-weight : bold;
src : url('../../../fonts/5e/Bookinsanity Bold Italic.woff2');
}
/* Notes and Tables, sans-serif */
@font-face {
font-family: ScalySansRemake;
font-family : "ScalySansRemake";
font-style : normal;
font-weight : normal;
src : url('../../../fonts/5e/Scaly Sans.woff2');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: ScalySansRemake;
font-family : "ScalySansRemake";
font-style : normal;
font-weight : bold;
src : url('../../../fonts/5e/Scaly Sans Bold.woff2');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: ScalySansRemake;
font-family : "ScalySansRemake";
font-style : italic;
font-weight : normal;
src : url('../../../fonts/5e/Scaly Sans Italic.woff2');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: ScalySansRemake;
src: url('../../../fonts/5e/Scaly Sans Bold Italic.woff2');
font-family : "ScalySansRemake";
font-style : italic;
font-weight : bold;
font-style: italic;
src : url('../../../fonts/5e/Scaly Sans Bold Italic.woff2');
}
@font-face {
font-family: ScalySansSmallCapsRemake;
font-family : "ScalySansSmallCapsRemake";
font-style : normal;
font-weight : normal;
src : url('../../../fonts/5e/Scaly Sans Caps.woff2');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: WalterTurncoat;
src: url('../../../fonts/5e/WalterTurncoat-Regular.woff2');
font-weight: normal;
font-family : "WalterTurncoat";
font-style : normal;
font-weight : normal;
src : url('../../../fonts/5e/WalterTurncoat-Regular.woff2');
}
/* Headers */
@font-face {
font-family: MrEavesRemake;
src: url('../../../fonts/5e/Mr Eaves Small Caps.woff2');
font-weight: normal;
font-family : "MrEavesRemake";
font-style : normal;
font-weight : normal;
src : url('../../../fonts/5e/Mr Eaves Small Caps.woff2');
}
/* Fancy Drop Cap */
@font-face {
font-family: SolberaImitationRemake; //Tweaked 5e version
src: url('../../../fonts/5e/Solbera Imitation Tweak.woff2');
font-weight: 100 1000;
font-family : "SolberaImitationRemake"; //Tweaked 5e version
font-style : normal;
font-style : italic;
font-weight : 100 1000;
src : url('../../../fonts/5e/Solbera Imitation Tweak.woff2');
}
/* Cover Page */
@font-face {
font-family: NodestoCapsCondensed;
font-family : "NodestoCapsCondensed";
font-style : normal;
font-weight : normal;
src : url('../../../fonts/5e/Nodesto Caps Condensed.woff2');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: NodestoCapsCondensed;
font-family : "NodestoCapsCondensed";
font-style : normal;
font-weight : bold;
src : url('../../../fonts/5e/Nodesto Caps Condensed Bold.woff2');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: NodestoCapsCondensed;
font-family : "NodestoCapsCondensed";
font-style : italic;
font-weight : normal;
src : url('../../../fonts/5e/Nodesto Caps Condensed Italic.woff2');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: NodestoCapsCondensed;
src: url('../../../fonts/5e/Nodesto Caps Condensed Bold Italic.woff2');
font-family : "NodestoCapsCondensed";
font-style : italic;
font-weight : bold;
font-style: italic;
src : url('../../../fonts/5e/Nodesto Caps Condensed Bold Italic.woff2');
}
@font-face {
font-family: NodestoCapsWide;
src: url('../../../fonts/5e/Nodesto Caps Wide.woff2');
font-family : "NodestoCapsWide";
font-style : normal;
font-weight : normal;
font-style: normal
src : url('../../../fonts/5e/Nodesto Caps Wide.woff2');
}
@font-face {
font-family: Overpass;
font-family : "Overpass";
font-style : normal;
font-weight : 500;
src : url('../../../fonts/5e/Overpass Medium.woff2');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: Davek;
font-family : "Davek";
font-style : normal;
font-weight : 500;
src : url('../../../fonts/5e/Davek.woff2');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: Iokharic;
src: url('../../../fonts/5e/Iokharic.woff2');
font-weight: 500;
font-family : "Iokharic";
font-style : normal;
font-weight : 500;
src : url('../../../fonts/5e/Iokharic.woff2');
}
@font-face {
font-family: Rellanic;
src: url('../../../fonts/5e/Rellanic.woff2');
font-weight: 500;
font-family : "Rellanic";
font-style : normal;
font-weight : 500;
src : url('../../../fonts/5e/Rellanic.woff2');
}

24
themes/fonts/Blank/fonts.less
View File

@@ -18,29 +18,29 @@ License:
*/
@font-face {
font-family: Pagella;
font-family : "Pagella";
font-style : normal;
font-weight : normal;
src : url('../../../fonts/Blank/texgyrepagella-regular.woff2');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: Pagella;
font-family : "Pagella";
font-style : normal;
font-weight : bold;
src : url('../../../fonts/Blank/texgyrepagella-bold.woff2');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: Pagella;
src: url('../../../fonts/Blank/texgyrepagella-italic.woff2');
font-family : "Pagella";
font-style : italic;
font-weight : normal;
font-style: italic;
src : url('../../../fonts/Blank/texgyrepagella-italic.woff2');
}
@font-face {
font-family: Pagella;
src: url('../../../fonts/Blank/texgyrepagella-bolditalic.woff2');
font-weight: bold;
font-family : "Pagella";
font-style : italic;
font-weight : bold;
src : url('../../../fonts/Blank/texgyrepagella-bolditalic.woff2');
}

48
themes/fonts/Journal/fonts.less
View File

@@ -1,58 +1,58 @@
/* Main Font, serif */
@font-face {
font-family: ReenieBeanie;
src: url('../../../fonts/Journal/ReenieBeanie-Regular.woff2');
font-weight: normal;
font-family : "ReenieBeanie";
font-style : normal;
font-weight : normal;
src : url('../../../fonts/Journal/ReenieBeanie-Regular.woff2');
}
/* Notes and Tables, sans-serif */
@font-face {
font-family: PermanentMarker;
src: url('../../../fonts/Journal/PermanentMarker-Regular.woff2');
font-weight: normal;
font-family : "PermanentMarker";
font-style : normal;
font-weight : normal;
src : url('../../../fonts/Journal/PermanentMarker-Regular.woff2');
}
@font-face {
font-family: WalterTurncoat;
src: url('../../../fonts/5e/WalterTurncoat-Regular.woff2');
font-weight: normal;
font-family : "WalterTurncoat";
font-style : normal;
font-weight : normal;
src : url('../../../fonts/5e/WalterTurncoat-Regular.woff2');
}
/* Headers */
@font-face {
font-family: FrederickaTheGreat;
src: url('../../../fonts/Journal/FrederickaTheGreat-Regular.woff2');
font-weight: normal;
font-family : "FrederickaTheGreat";
font-style : normal;
font-weight : normal;
src : url('../../../fonts/Journal/FrederickaTheGreat-Regular.woff2');
}
/* Cover Page */
@font-face {
font-family: NodestoCapsCondensed;
font-family : "NodestoCapsCondensed";
font-style : normal;
font-weight : normal;
src : url('../fonts/5e/Nodesto Caps Condensed.woff2');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: NodestoCapsCondensed;
font-family : "NodestoCapsCondensed";
font-style : normal;
font-weight : bold;
src : url('../fonts/5e/Nodesto Caps Condensed Bold.woff2');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: NodestoCapsCondensed;
src: url('../fonts/5e/Nodesto Caps Condensed Italic.woff2');
font-family : "NodestoCapsCondensed";
font-style : italic;
font-weight : normal;
font-style: italic;
src : url('../fonts/5e/Nodesto Caps Condensed Italic.woff2');
}
@font-face {
font-family: NodestoCapsCondensed;
src: url('../fonts/5e/Nodesto Caps Condensed Bold Italic.woff2');
font-weight: bold;
font-family : "NodestoCapsCondensed";
font-style : italic;
font-weight : bold;
src : url('../fonts/5e/Nodesto Caps Condensed Bold Italic.woff2');
}

2
themes/fonts/iconFonts/diceFont.less
View File

@@ -13,8 +13,8 @@
font-weight : normal;
font-variant : normal;
line-height : 1;
text-decoration : inherit;
text-transform : none;
text-decoration : inherit;
text-rendering : optimizeLegibility;
/* Better Font Rendering =========== */

2
themes/fonts/iconFonts/fontAwesome.js
View File

@@ -1,3 +1,5 @@
/* eslint-disable max-lines */
const fontAwesome = {
// FONT-AWESOME SOLID
'fas_0' : 'fas fa-0',

12
themes/phb.depricated.less
View File

@@ -1,31 +1,31 @@
.phb {
//Double hr for full width elements
hr + hr + blockquote {
column-span : all;
-webkit-column-span : all;
-moz-column-span : all;
column-span : all;
}
//*****************************
// * CLASS TABLE
// *****************************/
hr+table {
padding-top : 10px;
margin-top : -5px;
margin-bottom : 50px;
padding-top : 10px;
border-collapse : separate;
background-color : white;
border : initial;
border-style : solid;
border-image-source : @frameBorderImage;
border-image-slice : 150 200 150 200;
border-image-width : 47px;
border-image-outset : 37px 17px;
border-image-repeat : round;
border-image-slice : 150 200 150 200;
border-image-source : @frameBorderImage;
border-image-width : 47px;
}
h5 + hr + table {
column-span : all;
-webkit-column-span : all;
-moz-column-span : all;
column-span : all;
}
}