diff --git a/client/admin/authorUtils/authorLookup/authorLookup.less b/client/admin/authorUtils/authorLookup/authorLookup.less index 8fdd56d04..8c37e80d1 100644 --- a/client/admin/authorUtils/authorLookup/authorLookup.less +++ b/client/admin/authorUtils/authorLookup/authorLookup.less @@ -20,7 +20,7 @@ } button { - width: 50px; + width : 50px; i { margin-right : 10px; } } diff --git a/client/admin/notificationUtils/notificationAdd/notificationAdd.less b/client/admin/notificationUtils/notificationAdd/notificationAdd.less index 9256b43cb..14bdabd03 100644 --- a/client/admin/notificationUtils/notificationAdd/notificationAdd.less +++ b/client/admin/notificationUtils/notificationAdd/notificationAdd.less @@ -18,22 +18,20 @@ margin-bottom : unset; font-family : monospace; - &[type="date"] { - width:14ch; - } + &[type='date'] { width : 14ch; } } textarea { width : 50ch; min-height : 7em; max-height : 20em; - resize : vertical; padding : 10px; + resize : vertical; } } button { - width: 200px; + width : 200px; i { margin-right : 10px; } } diff --git a/client/admin/notificationUtils/notificationLookup/notificationLookup.less b/client/admin/notificationUtils/notificationLookup/notificationLookup.less index 830467368..65903213c 100644 --- a/client/admin/notificationUtils/notificationLookup/notificationLookup.less +++ b/client/admin/notificationUtils/notificationLookup/notificationLookup.less @@ -1,6 +1,6 @@ .notificationLookup { width : 450px; - height : fit-content; + height : fit-content; .noNotification { margin-block : 20px; } .notificationList { diff --git a/client/components/Anchored.less b/client/components/Anchored.less index 4f0e2fa8f..aeb9f1d5f 100644 --- a/client/components/Anchored.less +++ b/client/components/Anchored.less @@ -1,13 +1,11 @@ .anchored-box { - position:absolute; - @supports (inset-block-start: anchor(bottom)){ - inset-block-start: anchor(bottom); - } - justify-self: anchor-center; - visibility: hidden; - &.active { - visibility: visible; + position : absolute; + visibility : hidden; + justify-self : anchor-center; + @supports (inset-block-start: anchor(bottom)) { + inset-block-start : anchor(bottom); } + &.active { visibility : visible; } } \ No newline at end of file diff --git a/client/components/combobox.less b/client/components/combobox.less index d58019f6f..27f78356b 100644 --- a/client/components/combobox.less +++ b/client/components/combobox.less @@ -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 { diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 10d94c5ac..21c0608bd 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -189,14 +189,14 @@ const BrewRenderer = (props)=>{ const injectedTags = firstLineTokens.find((obj)=>obj.injectedTags !== undefined)?.injectedTags; if(injectedTags) { styles = { ...styles, ...injectedTags.styles }; - styles = _.mapKeys(styles, (v, k) => k.startsWith('--') ? k : _.camelCase(k)); // Convert CSS to camelCase for React + styles = _.mapKeys(styles, (v, k)=>k.startsWith('--') ? k : _.camelCase(k)); // Convert CSS to camelCase for React classes = [classes, injectedTags.classes].join(' ').trim(); attributes = injectedTags.attributes; } pageText = pageText.includes('\n') ? pageText.substring(pageText.indexOf('\n') + 1) : ''; // Remove the \page line } - let html = Markdown.render(pageText, index); + const html = Markdown.render(pageText, index); return ; } diff --git a/client/homebrew/brewRenderer/brewRenderer.less b/client/homebrew/brewRenderer/brewRenderer.less index 68c688fb6..128c419be 100644 --- a/client/homebrew/brewRenderer/brewRenderer.less +++ b/client/homebrew/brewRenderer/brewRenderer.less @@ -1,43 +1,39 @@ @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); - gap: 10px 10px; - justify-content: safe center; + display : grid; + grid-template-rows : repeat(3, auto); + grid-template-columns : repeat(2, auto); + gap : 10px 10px; + justify-content : safe center; &.recto .page:first-child { // sets first page on 'right' ('recto') of the preview, as if for a Cover page. // todo: add a checkbox to toggle this setting - grid-column-start: 2; + grid-column-start : 2; } & :where(.page) { - margin-left: unset !important; - margin-right: unset !important; + margin-right : unset !important; + margin-left : unset !important; } } &.flow { - display: flex; - flex-wrap: wrap; - gap: 10px; - justify-content: safe center; + display : flex; + flex-wrap : wrap; + gap : 10px; + justify-content : safe center; & :where(.page) { - flex: 0 0 auto; - margin-left: unset !important; - margin-right: unset !important; + flex : 0 0 auto; + 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; @@ -79,11 +73,9 @@ overflow-y : unset; .pages { margin : 0px; - zoom: 100% !important; + zoom : 100% !important; & > .page { box-shadow : unset; } } } - .headerNav { - visibility: hidden; - } + .headerNav { visibility : hidden; } } \ No newline at end of file diff --git a/client/homebrew/brewRenderer/headerNav/headerNav.jsx b/client/homebrew/brewRenderer/headerNav/headerNav.jsx index cfc10bbd6..04ced2585 100644 --- a/client/homebrew/brewRenderer/headerNav/headerNav.jsx +++ b/client/homebrew/brewRenderer/headerNav/headerNav.jsx @@ -25,7 +25,7 @@ const HeaderNav = React.forwardRef(({}, pagesRef)=>{ '.toc' : ()=>{ return 'Table of Contents'; }, }; - const getHeaderContent = el => el.querySelector('h1')?.textContent; + const getHeaderContent = (el)=>el.querySelector('h1')?.textContent; const topLevelPageSelector = Object.keys(topLevelPages).join(','); @@ -52,25 +52,23 @@ const HeaderNav = React.forwardRef(({}, pagesRef)=>{ 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 - } + }; 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 + 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 + } 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)=> - + return _.map(navList, (navItem, index)=> ); }; diff --git a/client/homebrew/brewRenderer/headerNav/headerNav.less b/client/homebrew/brewRenderer/headerNav/headerNav.less index a5769ef99..a5fd11f5e 100644 --- a/client/homebrew/brewRenderer/headerNav/headerNav.less +++ b/client/homebrew/brewRenderer/headerNav/headerNav.less @@ -1,39 +1,31 @@ .headerNav { - position: fixed; - top: 32px; - left: 0px; - padding: 5px 10px; - background-color: #ccc; - border-radius: 5px; - max-height: calc(100vh - 32px); - max-width: 40vw; - overflow-y: auto; - &.active { - padding-bottom: 10px; - .navIcon { - padding-bottom: 10px; - } - } - .navIcon { - cursor: pointer; + position : fixed; + top : 32px; + left : 0px; + 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; } li { - list-style-type: none; + list-style-type : none; a { - display: inline-block; - width: 100%; - font-family: 'Open Sans'; - font-size: 12px; - padding: 2px; - color: inherit; - text-decoration: none; - cursor: pointer; - &:hover { - text-decoration: underline; - } - &.pageLink { - font-weight: 900; - } + display : inline-block; + width : 100%; + padding : 2px; + font-family : 'Open Sans'; + font-size : 12px; + color : inherit; + text-decoration : none; + cursor : pointer; + &:hover { text-decoration : underline; } + &.pageLink { font-weight : 900; } @depths: 0,1,2,3,4,5,6,7; diff --git a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less index 9e5a4a73b..85d4c8365 100644 --- a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less +++ b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less @@ -86,8 +86,8 @@ width : 100%; } .blank { - height : 1em; - margin-top: 0; - & + * { margin-top: 0; } + height : 1em; + margin-top : 0; + & + * { margin-top : 0; } } } \ No newline at end of file diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.less b/client/homebrew/brewRenderer/toolBar/toolBar.less index a24731489..8f1464c8f 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.less +++ b/client/homebrew/brewRenderer/toolBar/toolBar.less @@ -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; } \ No newline at end of file diff --git a/client/homebrew/editor/editor.less b/client/homebrew/editor/editor.less index b2e96683e..5511bee6e 100644 --- a/client/homebrew/editor/editor.less +++ b/client/homebrew/editor/editor.less @@ -1,8 +1,8 @@ @import 'themes/codeMirror/customEditorStyles.less'; .editor { - position : relative; - width : 100%; - container: editor / inline-size; + position : relative; + width : 100%; + container : editor / inline-size; .codeEditor { height : 100%; @@ -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 { diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.jsx b/client/homebrew/editor/metadataEditor/metadataEditor.jsx index 2a65d9384..8f256922f 100644 --- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx +++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx @@ -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'); @@ -48,7 +47,7 @@ const MetadataEditor = createClass({ getInitialState : function(){ return { - showThumbnail : true + showThumbnail : true }; }, @@ -68,7 +67,7 @@ const MetadataEditor = createClass({ const inputRules = validations[name] ?? []; const validationErr = inputRules.map((rule)=>rule(e.target.value)).filter(Boolean); - const debouncedReportValidity = _.debounce((target, errMessage) => { + const debouncedReportValidity = _.debounce((target, errMessage)=>{ callIfExists(target, 'setCustomValidity', errMessage); callIfExists(target, 'reportValidity'); }, 300); // 300ms debounce delay, adjust as needed @@ -87,7 +86,7 @@ const MetadataEditor = createClass({ return `- ${err}`; }).join('\n'); - + debouncedReportValidity(e.target, errMessage); return false; } @@ -110,6 +109,7 @@ const MetadataEditor = createClass({ } this.props.onChange(this.props.metadata, 'renderer'); }, + handlePublish : function(val){ this.props.onChange({ ...this.props.metadata, diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.less b/client/homebrew/editor/metadataEditor/metadataEditor.less index c5658a796..fd04f07d9 100644 --- a/client/homebrew/editor/metadataEditor/metadataEditor.less +++ b/client/homebrew/editor/metadataEditor/metadataEditor.less @@ -1,8 +1,8 @@ @import 'naturalcrit/styles/colors.less'; .userThemeName { - padding-left: 10px; - padding-right: 10px; + padding-right : 10px; + padding-left : 10px; } .metadataEditor { @@ -12,20 +12,20 @@ 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; + font-size : 13px; background-color : #999999; - font-size : 13px; h1 { - margin: 0 0 40px; - font-weight: bold; - text-transform: uppercase; + margin : 0 0 40px; + font-weight : bold; + text-transform : uppercase; } h2 { - margin : 20px 0; - font-weight : bold; - border-bottom: 2px solid gray; - color: #555; + margin : 20px 0; + font-weight : bold; + color : #555555; + border-bottom : 2px solid gray; } & > div { margin-bottom : 10px; } @@ -54,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; @@ -74,7 +74,7 @@ border : 1px solid gray; &:focus { outline : 1px solid #444444; } } - &.thumbnail, &.themes{ + &.thumbnail, &.themes { label { line-height : 2.0em; } .value { overflow : hidden; @@ -90,14 +90,14 @@ } } - &.themes{ + &.themes { .value { overflow : visible; text-overflow : auto; } button { - padding-left: 5px; - padding-right: 5px; + padding-right : 5px; + padding-left : 5px; } } @@ -136,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; } @@ -164,9 +164,7 @@ .colorButton(@red); } } - .authors.field .value { - line-height : 1.5em; - } + .authors.field .value { line-height : 1.5em; } .themes.field { & .dropdown-container { @@ -174,9 +172,7 @@ z-index : 100; background-color : white; } - & .dropdown-options { - overflow-y : visible; - } + & .dropdown-options { overflow-y : visible; } .disabled { font-style : italic; color : dimgray; diff --git a/client/homebrew/editor/metadataEditor/validations.js b/client/homebrew/editor/metadataEditor/validations.js index b475783a4..858fca6c4 100644 --- a/client/homebrew/editor/metadataEditor/validations.js +++ b/client/homebrew/editor/metadataEditor/validations.js @@ -28,18 +28,18 @@ module.exports = { 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) => { + 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; + 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.'; - } + } ] }; diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx index f7d9508f8..4d702bfdf 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.jsx +++ b/client/homebrew/editor/snippetbar/snippetbar.jsx @@ -207,59 +207,59 @@ const Snippetbar = createClass({ renderEditorButtons : function(){ if(!this.props.showEditButtons) return; - + return ( -
- {this.props.view !== 'meta' && <>
-
- - { this.state.showHistory && this.renderHistoryItems() } +
+ {this.props.view !== 'meta' && <>
+
+ + { this.state.showHistory && this.renderHistoryItems() } +
+
+ +
+
+ +
-
- -
-
- -
-
-
-
- -
-
- -
-
- - {this.state.themeSelector && this.renderThemeSelector()} -
-
} - +
+
+ +
+
+ +
+
+ + {this.state.themeSelector && this.renderThemeSelector()} +
+
} -
-
this.props.onViewChange('text')}> - -
-
this.props.onViewChange('style')}> - -
-
this.props.onViewChange('meta')}> - -
-
-
- ) +
+
this.props.onViewChange('text')}> + +
+
this.props.onViewChange('style')}> + +
+
this.props.onViewChange('meta')}> + +
+
+ +
+ ); }, render : function(){ diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less index 7d56dc718..0860a44bf 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.less +++ b/client/homebrew/editor/snippetbar/snippetbar.less @@ -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; diff --git a/client/homebrew/editor/tagInput/tagInput.jsx b/client/homebrew/editor/tagInput/tagInput.jsx index 816541167..d60e23b1b 100644 --- a/client/homebrew/editor/tagInput/tagInput.jsx +++ b/client/homebrew/editor/tagInput/tagInput.jsx @@ -3,43 +3,43 @@ const React = require('react'); const { useState, useEffect } = React; const _ = require('lodash'); -const TagInput = ({ unique = true, values = [], ...props }) => { +const TagInput = ({ unique = true, values = [], ...props })=>{ const [tempInputText, setTempInputText] = useState(''); - const [tagList, setTagList] = useState(values.map((value) => ({ value, editing: false }))); + 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 = {} }) => { - if (_.includes(['Enter', ','], evt.key)) { + const handleInputKeyDown = ({ evt, value, index, options = {} })=>{ + if(_.includes(['Enter', ','], evt.key)) { evt.preventDefault(); submitTag(evt.target.value, value, index); - if (options.clear) { + if(options.clear) { setTempInputText(''); } } }; - const submitTag = (newValue, originalValue, index) => { - setTagList((prevContext) => { + const submitTag = (newValue, originalValue, index)=>{ + setTagList((prevContext)=>{ // remove existing tag if(newValue === null){ return [...prevContext].filter((context, i)=>i !== index); } // 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) => { - if (i === index) { + return prevContext.map((context, i)=>{ + if(i === index) { return { ...context, value: newValue, editing: false }; } return context; @@ -47,10 +47,10 @@ const TagInput = ({ unique = true, values = [], ...props }) => { }); }; - const editTag = (index) => { - setTagList((prevContext) => { - return prevContext.map((context, i) => { - if (i === index) { + const editTag = (index)=>{ + setTagList((prevContext)=>{ + return prevContext.map((context, i)=>{ + if(i === index) { return { ...context, editing: true }; } return { ...context, editing: false }; @@ -58,25 +58,25 @@ const TagInput = ({ unique = true, values = [], ...props }) => { }); }; - const renderReadTag = (context, index) => { + const renderReadTag = (context, index)=>{ return (
  • editTag(index)}> + onClick={()=>editTag(index)}> {context.value} - +
    • ); }; - const renderWriteTag = (context, index) => { + const renderWriteTag = (context, index)=>{ return ( handleInputKeyDown({evt, value: context.value, index: index})} - autoFocus + defaultValue={context.value} + onKeyDown={(evt)=>handleInputKeyDown({ evt, value: context.value, index: index })} + autoFocus /> ); }; @@ -86,7 +86,7 @@ const TagInput = ({ unique = true, values = [], ...props }) => {
      - {tagList.map((context, index) => { return context.editing ? renderWriteTag(context, index) : renderReadTag(context, index); })} + {tagList.map((context, index)=>{ return context.editing ? renderWriteTag(context, index) : renderReadTag(context, index); })}
    { className='value' placeholder={props.placeholder} value={tempInputText} - onChange={(e) => setTempInputText(e.target.value)} - onKeyDown={(evt) => handleInputKeyDown({ evt, value: null, options: { clear: true } })} + onChange={(e)=>setTempInputText(e.target.value)} + onKeyDown={(evt)=>handleInputKeyDown({ evt, value: null, options: { clear: true } })} />
    diff --git a/client/homebrew/homebrew.less b/client/homebrew/homebrew.less index 828de796f..e265c2941 100644 --- a/client/homebrew/homebrew.less +++ b/client/homebrew/homebrew.less @@ -1,36 +1,32 @@ @import 'naturalcrit/styles/core.less'; -.homebrew{ +.homebrew { height : 100%; - .sitePage{ + .sitePage { display : flex; - height : 100%; - background-color : @steel; flex-direction : column; + height : 100%; overflow-y : hidden; - .content{ + 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 { overflow-y : scroll; &::-webkit-scrollbar { - width: 20px; - &:horizontal{ - height: 20px; - width:auto; + width : 20px; + &:horizontal { + 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; } } } } diff --git a/client/homebrew/navbar/error-navitem.less b/client/homebrew/navbar/error-navitem.less index be138dca4..637ddac95 100644 --- a/client/homebrew/navbar/error-navitem.less +++ b/client/homebrew/navbar/error-navitem.less @@ -1,78 +1,70 @@ .navItem.error { - position : relative; - background-color : @red; + position : relative; + background-color : @red; } -.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; - text-transform : uppercase; - .lowercase { - text-transform : none; +.errorContainer { + position : absolute; + top : 100%; + left : 50%; + z-index : 1000; + width : 140px; + padding : 3px; + font-size : 10px; + font-weight : 800; + color : white; + text-align : center; + text-transform : uppercase; + 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; + top : -23px; + left : 53px; + width : 0px; + height : 0px; + content : ''; + border-top : 10px solid transparent; + 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 { + display : inline-block; + width : 48%; + padding : 5px; + margin : 1px; + background-color : #333333; + border-left : 1px solid #666666; + .animate(background-color); + &:hover { background-color : red; } + } + .confirm { + display : inline-block; + width : 48%; + padding : 5px; + margin : 1px; + color : white; + background-color : #333333; + .animate(background-color); + &:hover { background-color : teal; } } - a{ - color : @teal; - } - &:before { - content: ""; - width: 0px; - height: 0px; - 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: ""; - width: 0px; - height: 0px; - position: absolute; - border-left: 10px solid transparent; - border-right: 10px solid transparent; - border-top: 10px solid transparent; - border-bottom: 10px solid #333; - left: 53px; - top: -19px; - } - .deny { - width : 48%; - margin : 1px; - padding : 5px; - background-color : #333; - display : inline-block; - border-left : 1px solid #666; - .animate(background-color); - &:hover{ - background-color : red; - } - } - .confirm { - width : 48%; - margin : 1px; - padding : 5px; - background-color : #333; - display : inline-block; - color : white; - .animate(background-color); - &:hover{ - background-color : teal; - } - } } diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less index ae11c1e7e..aa233d631 100644 --- a/client/homebrew/navbar/navbar.less +++ b/client/homebrew/navbar/navbar.less @@ -24,11 +24,11 @@ } .homebrew nav { + position : relative; + z-index : 2; + display : flex; + justify-content : space-between; background-color : #333333; - position : relative; - z-index : 2; - display : flex; - justify-content : space-between; .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; } } diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx index ef98e8425..ef309a613 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx @@ -30,11 +30,11 @@ const BrewItem = ({ } request.delete(`/api/${brew.googleId ?? ''}${brew.editId}`).send().end((err, res)=>{ - if (err) reportError(err); else window.location.reload(); - }); + if(err) reportError(err); else window.location.reload(); + }); }, [brew, reportError]); - const updateFilter = useCallback((type, term)=> updateListFilter(type, term), [updateListFilter]); + const updateFilter = useCallback((type, term)=>updateListFilter(type, term), [updateListFilter]); const renderDeleteBrewLink = ()=>{ if(!brew.editId) return null; diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less index a3c17215e..0d45e8537 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less @@ -1,148 +1,129 @@ -.brewItem{ +.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; - 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%); - opacity: 50%; + .thumbnail { + position : absolute; + top : 0; + right : 0; + z-index : -1; + width : 150px; + height : 100%; + background-repeat : no-repeat; + background-position : right top; + 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; - h4{ + h4 { margin-bottom : 5px; font-size : 2.2em; } } - .info{ - position: initial; - bottom: 2px; - font-family : ScalySansRemake; + .info { + position : initial; + bottom : 2px; + font-family : "ScalySansRemake"; font-size : 1.2em; - &>span{ + & > 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; - font-weight: bold; - border-color: currentColor; - cursor : pointer; - &:before { - font-family: 'Font Awesome 5 Free'; - font-size: 12px; - margin-right: 3px; + display : inline-block; + padding : 2px; + margin : 2px; + font-weight : bold; + white-space : nowrap; + cursor : pointer; + 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; } &.type { - background-color: #0080003b; - color: #008000; - &:before{ - content: '\f0ad'; - } + color : #008000; + background-color : #0080003B; + &::before { content : '\f0ad'; } } &.group { - background-color: #5050503b; - color: #000000; - &:before{ - content: '\f500'; - } + color : #000000; + background-color : #5050503B; + &::before { content : '\f500'; } } &.meta { - background-color: #0000803b; - color: #000080; - &:before{ - content: '\f05a'; - } + color : #000080; + background-color : #0000803B; + &::before { content : '\f05a'; } } &.system { - background-color: #8000003b; - color: #800000; - &:before{ - content: '\f518'; - } + color : #800000; + background-color : #8000003B; + &::before { content : '\f518'; } } } - &:hover{ - .links{ - opacity : 1; - } + &:hover { + .links { opacity : 1; } } - &:nth-child(2n + 1){ - margin-right : 0px; - } - .links{ + &: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; - a{ + 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 { - height : 18px; + height : 18px; padding : 0px; margin : -5px; } .homebreweryIcon { - mix-blend-mode : darken; - height : 24px; position : relative; top : 5px; left : -5px; + height : 24px; + mix-blend-mode : darken; } } diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less index 0aa4a278d..bf899bc71 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.less +++ b/client/homebrew/pages/basePages/listPage/listPage.less @@ -1,5 +1,5 @@ -.noColumns(){ +.noColumns() { column-count : auto; column-fill : auto; column-gap : normal; @@ -13,177 +13,151 @@ height : auto; min-height : 279.4mm; margin : 20px auto; - contain : unset; + contain : unset; } -.listPage{ - .content{ +.listPage { + .content { z-index : 1; - .page{ + .page { .noColumns() !important; //Needed to override PHB Theme since this is on a lower @layer - &::after{ - display : none; - } - .noBrews{ + &::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; - } - .active { - color: var(--HB_Color_HeaderText); - } - .active::before { - content: '\f107'; - } - .inactive { - color: #707070; - } - .inactive::before { - content: '\f105'; + 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'; } } } } .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; - h6{ - text-transform : uppercase; + position : sticky; + top : 0; + left : 0; + z-index : 1; + display : flex; + 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 { 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%; + display : flex; + align-items : center; + height : 100%; + padding : 0 8px; + color : #CCCCCC; - &:hover{ - background-color : #444; - } + &:hover { background-color : #444444; } &.active { - font-weight: bold; - color: #ddd; - background-color: #333; + font-weight : bold; + color : #DDDDDD; + background-color : #333333; - button { - color: white; - font-weight: 800; - height: 100%; - & + .sortDir { - padding-left: 5px; + button { + height : 100%; + font-weight : 800; + color : white; + & + .sortDir { padding-left : 5px; } } } - } } .filter-option { - margin-left: 20px; - background-color : transparent !important; + margin-left : 20px; font-size : 11px; - i{ - padding-right : 5px; - } + background-color : transparent !important; + i { padding-right : 5px; } + } + button { + padding : 0; + font-family : 'Open Sans', sans-serif; + font-size : 11px; + font-weight : normal; + color : #CCCCCC; + text-transform : uppercase; + background-color : transparent; } - button{ - background-color : transparent; - font-family : 'Open Sans', sans-serif; - text-transform : uppercase; - font-weight : normal; - font-size : 11px; - color : #ccc; - padding : 0; - } } .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; - margin-right: 3px; + &::before { + margin-right : 3px; + font-family : 'Font Awesome 5 Free'; + font-size : 12px; } - &:after { - content: '\f00d'; - font-family: 'Font Awesome 5 Free'; - font-size: 12px; - margin-left: 3px; + &::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'; - } + background-color : #008000; + border-color : #00A000; + &::before { content : '\f0ad'; } } &.group { - background-color: #505050; - border-color: #000000; - &:before{ - content: '\f500'; - } + background-color : #505050; + border-color : #000000; + &::before { content : '\f500'; } } &.meta { - background-color: #000080; - border-color: #0000a0; - &:before{ - content: '\f05a'; - } + background-color : #000080; + border-color : #0000A0; + &::before { content : '\f05a'; } } &.system { - background-color: #800000; - border-color: #a00000; - &:before{ - content: '\f518'; - } + background-color : #800000; + border-color : #A00000; + &::before { content : '\f518'; } } } } diff --git a/client/homebrew/pages/basePages/uiPage/uiPage.less b/client/homebrew/pages/basePages/uiPage/uiPage.less index e1013fa81..27f079e20 100644 --- a/client/homebrew/pages/basePages/uiPage/uiPage.less +++ b/client/homebrew/pages/basePages/uiPage/uiPage.less @@ -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'; - margin-right: 5px; + color : white; + background-color : #00000077; + &::before { + margin-right : 5px; + font-family : 'FONT AWESOME 5 FREE'; + content : '\f00c'; } } } @@ -60,11 +60,9 @@ list-style : square; } .blank { - height: 1em; - margin-top: 0; - & + * { - margin-top: 0; - } + height : 1em; + margin-top : 0; + & + * { margin-top : 0; } } } } diff --git a/client/homebrew/pages/editPage/editPage.less b/client/homebrew/pages/editPage/editPage.less index f94b60c1b..184aaa1f7 100644 --- a/client/homebrew/pages/editPage/editPage.less +++ b/client/homebrew/pages/editPage/editPage.less @@ -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{ +.editPage { + .navItem.save { + position : relative; width : 106px; text-align : center; - position : relative; - &.saved{ + &.saved { + color : #666666; cursor : initial; - color : #666; } } - .googleDriveStorage { - position : relative; - } - .googleDriveStorage img{ - height : 18px; + .googleDriveStorage { position : relative; } + .googleDriveStorage img { + height : 18px; padding : 0px; margin : -5px; - &.inactive { - filter: grayscale(1); - } + &.inactive { filter : grayscale(1); } } } diff --git a/client/homebrew/pages/errorPage/errors/errorIndex.js b/client/homebrew/pages/errorPage/errors/errorIndex.js index c2c49f958..9584a14b9 100644 --- a/client/homebrew/pages/errorPage/errors/errorIndex.js +++ b/client/homebrew/pages/errorPage/errors/errorIndex.js @@ -167,7 +167,7 @@ const errorIndex = (props)=>{ **Requested access:** ${props.brew.accessType} **Brew ID:** ${props.brew.brewId}`, - + // Theme Not Valid '10' : dedent` ## The selected theme is not tagged as a theme. diff --git a/client/homebrew/pages/homePage/homePage.jsx b/client/homebrew/pages/homePage/homePage.jsx index 00d0c801d..b9c1b7371 100644 --- a/client/homebrew/pages/homePage/homePage.jsx +++ b/client/homebrew/pages/homePage/homePage.jsx @@ -100,32 +100,32 @@ const HomePage = createClass({ return
    {this.renderNavbar()} -
    - - - - +
    + + + +
    Save current diff --git a/client/homebrew/pages/homePage/homePage.less b/client/homebrew/pages/homePage/homePage.less index a7523bd3c..4cf9ff4fe 100644 --- a/client/homebrew/pages/homePage/homePage.less +++ b/client/homebrew/pages/homePage/homePage.less @@ -1,50 +1,40 @@ -.homePage{ +.homePage { position : relative; - a.floatingNewButton{ + 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{ + .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; - } + .navItem.save { + background-color : @orange; + &:hover { background-color : @green; } } } diff --git a/client/homebrew/pages/newPage/newPage.jsx b/client/homebrew/pages/newPage/newPage.jsx index 1d5887b8a..7aaeb3fd3 100644 --- a/client/homebrew/pages/newPage/newPage.jsx +++ b/client/homebrew/pages/newPage/newPage.jsx @@ -223,39 +223,39 @@ const NewPage = createClass({ render : function(){ return
    {this.renderNavbar()} -
    - - - - +
    + + + +
    ; } diff --git a/client/homebrew/pages/newPage/newPage.less b/client/homebrew/pages/newPage/newPage.less index f83827ffb..ebc44d543 100644 --- a/client/homebrew/pages/newPage/newPage.less +++ b/client/homebrew/pages/newPage/newPage.less @@ -1,8 +1,6 @@ -.newPage{ - .navItem.save{ - background-color: @orange; - &:hover{ - background-color: @green; - } +.newPage { + .navItem.save { + background-color : @orange; + &:hover { background-color : @green; } } } diff --git a/client/homebrew/pages/sharePage/sharePage.less b/client/homebrew/pages/sharePage/sharePage.less index 754108506..b76dc50f9 100644 --- a/client/homebrew/pages/sharePage/sharePage.less +++ b/client/homebrew/pages/sharePage/sharePage.less @@ -1,9 +1,7 @@ -.sharePage{ +.sharePage { nav .navSection.titleSection { - flex-grow: 1; - justify-content: center; - } - .content{ - overflow-y : hidden; + flex-grow : 1; + justify-content : center; } + .content { overflow-y : hidden; } } diff --git a/client/icons/customIcons.less b/client/icons/customIcons.less index 1c8d1bd47..a2caffc57 100644 --- a/client/icons/customIcons.less +++ b/client/icons/customIcons.less @@ -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'); } diff --git a/scripts/buildHomebrew.js b/scripts/buildHomebrew.js index 656714d87..4d55a4176 100644 --- a/scripts/buildHomebrew.js +++ b/scripts/buildHomebrew.js @@ -10,7 +10,7 @@ import babel from '@babel/core'; import babelConfig from '../babel.config.json' with { type : 'json' }; import less from 'less'; -const isDev = !!process.argv.find((arg) => arg === '--dev'); +const isDev = !!process.argv.find((arg)=>arg === '--dev'); const babelify = async (code)=>(await babel.transformAsync(code, babelConfig)).code; @@ -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'); diff --git a/server/admin.api.spec.js b/server/admin.api.spec.js index 6a23393b1..036c238c9 100644 --- a/server/admin.api.spec.js +++ b/server/admin.api.spec.js @@ -1,6 +1,6 @@ import supertest from 'supertest'; import HBApp from './app.js'; -import {model as NotificationModel } from './notifications.model.js'; +import { model as NotificationModel } from './notifications.model.js'; // Mimic https responses to avoid being redirected all the time @@ -16,7 +16,7 @@ describe('Tests for admin api', ()=>{ const testNotifications = ['a', 'b']; jest.spyOn(NotificationModel, 'find') - .mockImplementationOnce(() => { + .mockImplementationOnce(()=>{ return { exec: jest.fn().mockResolvedValue(testNotifications) }; }); @@ -59,7 +59,7 @@ describe('Tests for admin api', ()=>{ expect(response.body).toEqual(savedNotification); }); - it('should handle error adding a notification without dismissKey', async () => { + it('should handle error adding a notification without dismissKey', async ()=>{ const inputNotification = { title : 'Test Notification', text : 'This is a test notification', @@ -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); @@ -86,14 +86,14 @@ describe('Tests for admin api', ()=>{ const dismissKey = 'testKey'; jest.spyOn(NotificationModel, 'findOneAndDelete') - .mockImplementationOnce((key) => { + .mockImplementationOnce((key)=>{ return { exec: jest.fn().mockResolvedValue(key) }; }); const response = await app .delete(`/admin/notification/delete/${dismissKey}`) .set('Authorization', `Basic ${Buffer.from('admin:password3').toString('base64')}`); - expect(NotificationModel.findOneAndDelete).toHaveBeenCalledWith({'dismissKey': 'testKey'}); + expect(NotificationModel.findOneAndDelete).toHaveBeenCalledWith({ 'dismissKey': 'testKey' }); expect(response.status).toBe(200); expect(response.body).toEqual({ dismissKey: 'testKey' }); }); @@ -102,14 +102,14 @@ describe('Tests for admin api', ()=>{ const dismissKey = 'testKey'; jest.spyOn(NotificationModel, 'findOneAndDelete') - .mockImplementationOnce(() => { + .mockImplementationOnce(()=>{ return { exec: jest.fn().mockResolvedValue() }; }); const response = await app .delete(`/admin/notification/delete/${dismissKey}`) .set('Authorization', `Basic ${Buffer.from('admin:password3').toString('base64')}`); - expect(NotificationModel.findOneAndDelete).toHaveBeenCalledWith({'dismissKey': 'testKey'}); + expect(NotificationModel.findOneAndDelete).toHaveBeenCalledWith({ 'dismissKey': 'testKey' }); expect(response.status).toBe(500); expect(response.body).toEqual({ message: 'Notification not found' }); }); diff --git a/server/app.js b/server/app.js index 12fe21a1d..079f5e03c 100644 --- a/server/app.js +++ b/server/app.js @@ -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'; diff --git a/server/googleActions.js b/server/googleActions.js index 2c2cbac73..0ca7556ba 100644 --- a/server/googleActions.js +++ b/server/googleActions.js @@ -27,12 +27,12 @@ if(!config.get('service_account')){ const defaultAuth = serviceAuth || config.get('google_api_key'); const retryConfig = { - retry: 3, // Number of retry attempts - retryDelay: 100, // Initial delay in milliseconds - retryDelayMultiplier: 2, // Multiplier for exponential backoff - maxRetryDelay: 32000, // Maximum delay in milliseconds - httpMethodsToRetry: ['PATCH'], // Only retry PATCH requests - statusCodesToRetry: [[429, 429]], // Only retry on 429 status code + retry : 3, // Number of retry attempts + retryDelay : 100, // Initial delay in milliseconds + retryDelayMultiplier : 2, // Multiplier for exponential backoff + maxRetryDelay : 32000, // Maximum delay in milliseconds + httpMethodsToRetry : ['PATCH'], // Only retry PATCH requests + statusCodesToRetry : [[429, 429]], // Only retry on 429 status code }; const GoogleActions = { @@ -177,8 +177,8 @@ const GoogleActions = { mimeType : 'text/plain', body : brew.text }, - headers: { - 'X-Forwarded-For': userIp, // Set the X-Forwarded-For header + headers : { + 'X-Forwarded-For' : userIp, // Set the X-Forwarded-For header }, retryConfig }) diff --git a/server/homebrew.api.js b/server/homebrew.api.js index 7bd88cbdb..af408e579 100644 --- a/server/homebrew.api.js +++ b/server/homebrew.api.js @@ -92,7 +92,7 @@ const api = { const accessMap = { edit : { editId: id }, share : { shareId: id }, - admin : { $or : [{ editId: id }, { shareId: id }] } + admin : { $or: [{ editId: id }, { shareId: id }] } }; // Try to find the document in the Homebrewery database -- if it doesn't exist, that's fine. @@ -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') @@ -294,7 +295,7 @@ const api = { currentTheme = req.brew; splitTextStyleAndMetadata(currentTheme); - if(!currentTheme.tags.some(tag => tag === "meta:theme" || tag === "meta:Theme")) + 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]; diff --git a/server/homebrew.model.js b/server/homebrew.model.js index adeac0d5d..15341f5d8 100644 --- a/server/homebrew.model.js +++ b/server/homebrew.model.js @@ -63,7 +63,7 @@ HomebrewSchema.statics.getByUser = async function(username, allowAccess=false, f const Homebrew = mongoose.model('Homebrew', HomebrewSchema); -export { +export { HomebrewSchema as schema, Homebrew as model }; diff --git a/shared/naturalcrit/markdown.js b/shared/naturalcrit/markdown.js index 3334b026c..a8b877f4b 100644 --- a/shared/naturalcrit/markdown.js +++ b/shared/naturalcrit/markdown.js @@ -86,8 +86,8 @@ renderer.paragraph = function(token){ //Fix local links in the Preview iFrame to link inside the frame renderer.link = function (token) { - let {href, title, tokens} = token; - const text = this.parser.parseInline(tokens) + let { href, title, tokens } = token; + const text = this.parser.parseInline(tokens); let self = false; if(href[0] == '#') { self = true; @@ -110,7 +110,7 @@ renderer.link = function (token) { // Expose `src` attribute as `--HB_src` to make the URL accessible via CSS renderer.image = function (token) { - let {href, title, text} = token; + const { href, title, text } = token; if(href === null) return text; @@ -776,7 +776,7 @@ Marked.use({ extensions : [justifiedParagraphs, definitionListsMultiLine, defini Marked.use(mustacheInjectBlock); Marked.use(MarkedSubSuperText()); Marked.use({ renderer: renderer, tokenizer: tokenizer, mangle: false }); -Marked.use(MarkedExtendedTables({interruptPatterns : tableTerminators}), MarkedGFMHeadingId({ globalSlugs: true }), +Marked.use(MarkedExtendedTables({ interruptPatterns: tableTerminators }), MarkedGFMHeadingId({ globalSlugs: true }), MarkedSmartypantsLite(), MarkedEmojis(MarkedEmojiOptions)); function cleanUrl(href) { @@ -841,12 +841,12 @@ const processStyleTags = (string)=>{ obj[key.trim()] = value.trim(); return obj; }, {}) || null; - const styles = tags?.length ? tags.reduce((styleObj, style) => { - const index = style.indexOf(':'); - const [key, value] = [style.substring(0, index), style.substring(index + 1)]; - styleObj[key.trim()] = value.replace(/"?([^"]*)"?/g, '$1').trim(); - return styleObj; - }, {}) : null; + const styles = tags?.length ? tags.reduce((styleObj, style)=>{ + const index = style.indexOf(':'); + const [key, value] = [style.substring(0, index), style.substring(index + 1)]; + styleObj[key.trim()] = value.replace(/"?([^"]*)"?/g, '$1').trim(); + return styleObj; + }, {}) : null; return { id : id, @@ -862,8 +862,8 @@ const extractHTMLStyleTags = (htmlString)=>{ const id = firstElementOnly.match(/id="([^"]*)"/)?.[1] || null; const classes = firstElementOnly.match(/class="([^"]*)"/)?.[1] || null; const styles = firstElementOnly.match(/style="([^"]*)"/)?.[1] - ?.split(';').reduce((styleObj, style) => { - if (style.trim() === '') return styleObj; + ?.split(';').reduce((styleObj, style)=>{ + if(style.trim() === '') return styleObj; const index = style.indexOf(':'); const [key, value] = [style.substring(0, index), style.substring(index + 1)]; styleObj[key.trim()] = value.trim(); @@ -873,7 +873,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; @@ -886,7 +886,7 @@ const extractHTMLStyleTags = (htmlString)=>{ }; }; -const mergeHTMLTags = (originalTags, newTags) => { +const mergeHTMLTags = (originalTags, newTags)=>{ return { id : newTags.id || originalTags.id || null, classes : [originalTags.classes, newTags.classes].join(' ').trim() || null, diff --git a/shared/naturalcrit/nav/nav.jsx b/shared/naturalcrit/nav/nav.jsx index d9b403239..50dff4c33 100644 --- a/shared/naturalcrit/nav/nav.jsx +++ b/shared/naturalcrit/nav/nav.jsx @@ -12,8 +12,8 @@ const Nav = { displayName : 'Nav.base', render : function(){ return ; + {this.props.children} + ; } }), logo : function(){ diff --git a/shared/naturalcrit/splitPane/splitPane.jsx b/shared/naturalcrit/splitPane/splitPane.jsx index 1500c759f..4c77d81a5 100644 --- a/shared/naturalcrit/splitPane/splitPane.jsx +++ b/shared/naturalcrit/splitPane/splitPane.jsx @@ -29,8 +29,8 @@ const SplitPane = (props)=>{ const limitPosition = (x, min = 1, max = window.innerWidth - 13)=>Math.round(Math.min(max, Math.max(min, x))); //when resizing, the divider should grow smaller if less space is given, then grow back if the space is restored, to the original position - const handleResize = () =>setDividerPos(limitPosition(window.localStorage.getItem(storageKey), 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13))); - + const handleResize = ()=>setDividerPos(limitPosition(window.localStorage.getItem(storageKey), 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13))); + const handleUp =(e)=>{ e.preventDefault(); if(isDragging) { diff --git a/shared/naturalcrit/splitPane/splitPane.less b/shared/naturalcrit/splitPane/splitPane.less index 8b61097be..80a8695af 100644 --- a/shared/naturalcrit/splitPane/splitPane.less +++ b/shared/naturalcrit/splitPane/splitPane.less @@ -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; diff --git a/shared/naturalcrit/styles/animations.less b/shared/naturalcrit/styles/animations.less index 69aac3e09..5757df151 100644 --- a/shared/naturalcrit/styles/animations.less +++ b/shared/naturalcrit/styles/animations.less @@ -3,127 +3,127 @@ @defaultEasing : ease; //Animates all properties on an element -.animateAll(@duration : @defaultDuration, @easing : @defaultEasing){ - -webkit-transition: all @duration @easing; - -moz-transition: all @duration @easing; - -o-transition: all @duration @easing; - transition: all @duration @easing; +.animateAll(@duration : @defaultDuration, @easing : @defaultEasing) { + -webkit-transition : all @duration @easing; + -moz-transition : all @duration @easing; + -o-transition : all @duration @easing; + transition : all @duration @easing; } //Animates Specific property -.animate(@prop, @duration : @defaultDuration, @easing : @defaultEasing){ - -webkit-transition: @prop @duration @easing; - -moz-transition: @prop @duration @easing; - -o-transition: @prop @duration @easing; - transition: @prop @duration @easing; +.animate(@prop, @duration : @defaultDuration, @easing : @defaultEasing) { + -webkit-transition : @prop @duration @easing; + -moz-transition : @prop @duration @easing; + -o-transition : @prop @duration @easing; + transition : @prop @duration @easing; } -.animateMany(...){ +.animateMany(...) { @value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`; - -webkit-transition-property: @value; - -moz-transition-property: @value; - -o-transition-property: @value; - transition-property: @value; + -webkit-transition-property : @value; + -moz-transition-property : @value; + -o-transition-property : @value; + transition-property : @value; .animateDuration(); .animateEasing(); } -.animateDuration(@duration : @defaultDuration){ - -webkit-transition-duration: @duration; - -moz-transition-duration: @duration; - -o-transition-duration: @duration; - transition-duration: @duration; +.animateDuration(@duration : @defaultDuration) { + -webkit-transition-duration : @duration; + -moz-transition-duration : @duration; + -o-transition-duration : @duration; + transition-duration : @duration; } -.animateEasing(@easing : @defaultEasing){ - -webkit-transition-timing-function: @easing; - -moz-transition-timing-function: @easing; - -o-transition-timing-function: @easing; - transition-timing-function: @easing; +.animateEasing(@easing : @defaultEasing) { + -webkit-transition-timing-function : @easing; + -moz-transition-timing-function : @easing; + -o-transition-timing-function : @easing; + transition-timing-function : @easing; } .transition (@prop, @duration: @defaultDuration) { - -webkit-transition: @prop @duration, -webkit-transform @duration; - -moz-transition: @prop @duration, -moz-transform @duration; - -o-transition: @prop @duration, -o-transform @duration; - -ms-transition: @prop @duration, -ms-transform @duration; - transition: @prop @duration, transform @duration; + -webkit-transition : @prop @duration, -webkit-transform @duration; + -moz-transition : @prop @duration, -moz-transform @duration; + -o-transition : @prop @duration, -o-transform @duration; + -ms-transition : @prop @duration, -ms-transform @duration; + transition : @prop @duration, transform @duration; } .transform (@transform) { - -webkit-transform: @transform; - -moz-transform: @transform; - -o-transform: @transform; - -ms-transform: @transform; - transform: @transform; + -webkit-transform : @transform; + -moz-transform : @transform; + -o-transform : @transform; + -ms-transform : @transform; + transform : @transform; } -.delay(@delay){ - animation-delay:@delay; - -webkit-animation-delay:@delay; - transition-delay:@delay; - -webkit-transition-delay:@delay; +.delay(@delay) { + -webkit-transition-delay : @delay; + transition-delay : @delay; + -webkit-animation-delay : @delay; + animation-delay : @delay; } -.keep(){ - -webkit-animation-fill-mode:forwards; - -moz-animation-fill-mode:forwards; - -ms-animation-fill-mode:forwards; - -o-animation-fill-mode:forwards; - animation-fill-mode:forwards; +.keep() { + -webkit-animation-fill-mode : forwards; + -moz-animation-fill-mode : forwards; + -ms-animation-fill-mode : forwards; + -o-animation-fill-mode : forwards; + animation-fill-mode : forwards; } -.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)} +.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); } } -.createFrames(@name, @from, @to){ +.createFrames(@name, @from, @to) { @frames: { from { @from(); } to { @to(); } }; - @-webkit-keyframes @name {@frames();} - @-moz-keyframes @name {@frames();} - @-ms-keyframes @name {@frames();} - @-o-keyframes @name {@frames();} - @keyframes @name {@frames();} + @-webkit-keyframes @name {@frames();} + @-moz-keyframes @name {@frames();} + @-ms-keyframes @name {@frames();} + @-o-keyframes @name {@frames();} + @keyframes @name {@frames();} } -.createAnimation(@name, @duration : @defaultDuration, @easing : @defaultEasing){ - -webkit-animation-name: @name; - -moz-animation-name: @name; - -ms-animation-name: @name; - animation-name: @name; - -webkit-animation-duration: @duration; - -moz-animation-duration: @duration; - -ms-animation-duration: @duration; - animation-duration: @duration; - -webkit-animation-timing-function: @easing; - -moz-animation-timing-function: @easing; - -ms-animation-timing-function: @easing; - animation-timing-function: @easing; +.createAnimation(@name, @duration : @defaultDuration, @easing : @defaultEasing) { + -webkit-animation-name : @name; + -moz-animation-name : @name; + -ms-animation-name : @name; + animation-name : @name; + -webkit-animation-duration : @duration; + -moz-animation-duration : @duration; + -ms-animation-duration : @duration; + animation-duration : @duration; + -webkit-animation-timing-function : @easing; + -moz-animation-timing-function : @easing; + -ms-animation-timing-function : @easing; + animation-timing-function : @easing; } @@ -132,82 +132,82 @@ Standard Animations ****************************/ -.fadeIn(@duration : @defaultDuration, @easing : @defaultEasing){ +.fadeIn(@duration : @defaultDuration, @easing : @defaultEasing) { .createAnimation(fadeIn; @duration; @easing); .createFrames(fadeIn, - { opacity : 0; }, + { opacity : 0; }, { opacity : 1; } ); } -.fadeInDown(@duration : @defaultDuration, @easing : @defaultEasing){ +.fadeInDown(@duration : @defaultDuration, @easing : @defaultEasing) { .createAnimation(fadeInDown; @duration; @easing); .createFrames(fadeInDown, - { opacity : 0; .transform(translateY(20px));}, + { opacity : 0; .transform(translateY(20px));}, { opacity : 1; .transform(translateY(0px));} ); } -.fadeInTop(@duration : @defaultDuration, @easing : @defaultEasing){ +.fadeInTop(@duration : @defaultDuration, @easing : @defaultEasing) { .createAnimation(fadeInTop; @duration; @easing); .createFrames(fadeInTop, - { opacity : 0; .transform(translateY(-20px)); }, + { opacity : 0; .transform(translateY(-20px)); }, { opacity : 1; .transform(translateY(0px));} ); } -.fadeInLeft(@duration : @defaultDuration, @easing : @defaultEasing){ +.fadeInLeft(@duration : @defaultDuration, @easing : @defaultEasing) { .createAnimation(fadeInLeft; @duration; @easing); .createFrames(fadeInLeft, - { opacity: 0; .transform(translateX(-20px));}, + { opacity: 0; .transform(translateX(-20px));}, { opacity: 1; .transform(translateX(0));} ); } -.fadeInRight(@duration : @defaultDuration, @easing : @defaultEasing){ +.fadeInRight(@duration : @defaultDuration, @easing : @defaultEasing) { .createAnimation(fadeInRight; @duration; @easing); .createFrames(fadeInRight, - { opacity: 0; .transform(translateX(20px));}, + { opacity: 0; .transform(translateX(20px));}, { opacity: 1; .transform(translateX(0));} ); } -.fadeOut(@duration : @defaultDuration, @easing : @defaultEasing){ +.fadeOut(@duration : @defaultDuration, @easing : @defaultEasing) { .createAnimation(fadeOut; @duration; @easing); .createFrames(fadeOut, - { opacity : 1; }, + { opacity : 1; }, { opacity : 0; } ); } -.fadeOutDown(@duration : @defaultDuration, @easing : @defaultEasing){ +.fadeOutDown(@duration : @defaultDuration, @easing : @defaultEasing) { .createAnimation(fadeOutDown; @duration; @easing); .createFrames(fadeOutDown, - { opacity : 1; .transform(translateY(0)); visibility: visible;}, + { opacity : 1; .transform(translateY(0)); visibility: visible;}, { opacity : 0; .transform(translateY(20px)); visibility: hidden;} ); } -.fadeOutTop(@duration : @defaultDuration, @easing : @defaultEasing){ +.fadeOutTop(@duration : @defaultDuration, @easing : @defaultEasing) { .createAnimation(fadeOutTop; @duration; @easing); .createFrames(fadeOutTop, - { opacity : 1; .transform(translateY(0)); }, + { opacity : 1; .transform(translateY(0)); }, { opacity : 0; .transform(translateY(-20px)); } ); } -.fadeOutLeft(@duration : @defaultDuration, @easing : @defaultEasing){ +.fadeOutLeft(@duration : @defaultDuration, @easing : @defaultEasing) { .createAnimation(fadeOutLeft; @duration; @easing); .createFrames(fadeOutLeft, - { opacity : 1; .transform(translateX(0));}, + { opacity : 1; .transform(translateX(0));}, { opacity : 0; .transform(translateX(-20px));} ); } -.fadeOutRight(@duration : @defaultDuration, @easing : @defaultEasing){ +.fadeOutRight(@duration : @defaultDuration, @easing : @defaultEasing) { .createAnimation(fadeOutRight; @duration; @easing); .createFrames(fadeOutRight, - { opacity : 1; .transform(translateX(0));}, + { opacity : 1; .transform(translateX(0));}, { opacity : 0; .transform(translateX(20px));} ); } @@ -219,50 +219,50 @@ Fun Animations ****************************/ -.spin(@duration : @defaultDuration, @easing : @defaultEasing){ +.spin(@duration : @defaultDuration, @easing : @defaultEasing) { .createAnimation(spin, @duration, @easing); - .spinKeyFrames(){ + .spinKeyFrames() { from { .transform(rotate(0deg)); } - to { .transform(rotate(360deg)); } + to { .transform(rotate(360deg)); } } @-webkit-keyframes spin {.spinKeyFrames();} - @-moz-keyframes spin {.spinKeyFrames();} - @-ms-keyframes spin {.spinKeyFrames();} - @-o-keyframes spin {.spinKeyFrames();} - @keyframes spin {.spinKeyFrames();} + @-moz-keyframes spin {.spinKeyFrames();} + @-ms-keyframes spin {.spinKeyFrames();} + @-o-keyframes spin {.spinKeyFrames();} + @keyframes spin {.spinKeyFrames();} } -.bounce(@duration : @defaultDuration, @easing : @defaultEasing){ +.bounce(@duration : @defaultDuration, @easing : @defaultEasing) { .createAnimation(bounce, @duration, @easing); - .bounceKeyFrames(){ + .bounceKeyFrames() { 0%, 20%, 50%, 80%, 100% { .transform(translateY(0));} 40% { .transform(translateY(-30px));} 60% { .transform(translateY(-15px));} } @-webkit-keyframes bounce {.bounceKeyFrames();} - @-moz-keyframes bounce {.bounceKeyFrames();} - @-ms-keyframes bounce {.bounceKeyFrames();} - @-o-keyframes bounce {.bounceKeyFrames();} - @keyframes bounce {.bounceKeyFrames();} + @-moz-keyframes bounce {.bounceKeyFrames();} + @-ms-keyframes bounce {.bounceKeyFrames();} + @-o-keyframes bounce {.bounceKeyFrames();} + @keyframes bounce {.bounceKeyFrames();} } -.pulse(@duration : @defaultDuration, @easing : @defaultEasing){ +.pulse(@duration : @defaultDuration, @easing : @defaultEasing) { .createAnimation(pulse, @duration, @easing); - .pulseKeyFrames(){ - 0% { .transform(scale(1));} - 50% { .transform(scale(1.4));} + .pulseKeyFrames() { + 0% { .transform(scale(1));} + 50% { .transform(scale(1.4));} 100% { .transform(scale(1));} } @-webkit-keyframes pulse {.pulseKeyFrames();} - @-moz-keyframes pulse {.pulseKeyFrames();} - @-ms-keyframes pulse {.pulseKeyFrames();} - @-o-keyframes pulse {.pulseKeyFrames();} - @keyframes pulse {.pulseKeyFrames();} + @-moz-keyframes pulse {.pulseKeyFrames();} + @-ms-keyframes pulse {.pulseKeyFrames();} + @-o-keyframes pulse {.pulseKeyFrames();} + @keyframes pulse {.pulseKeyFrames();} } -.rubberBand(@duration : @defaultDuration, @easing : @defaultEasing){ +.rubberBand(@duration : @defaultDuration, @easing : @defaultEasing) { .createAnimation(rubberBand, @duration, @easing); - .rubberBandKeyFrames(){ + .rubberBandKeyFrames() { 0% {.transform(scale(1));} 30% {.transform(scaleX(1.25) scaleY(0.75));} 40% {.transform(scaleX(0.75) scaleY(1.25));} @@ -270,32 +270,32 @@ 100% {.transform(scale(1));} } @-webkit-keyframes rubberBand {.rubberBandKeyFrames();} - @-moz-keyframes rubberBand {.rubberBandKeyFrames();} - @-ms-keyframes rubberBand {.rubberBandKeyFrames();} - @-o-keyframes rubberBand {.rubberBandKeyFrames();} - @keyframes rubberBand {.rubberBandKeyFrames();} + @-moz-keyframes rubberBand {.rubberBandKeyFrames();} + @-ms-keyframes rubberBand {.rubberBandKeyFrames();} + @-o-keyframes rubberBand {.rubberBandKeyFrames();} + @keyframes rubberBand {.rubberBandKeyFrames();} } -.shake(@duration : @defaultDuration, @easing : @defaultEasing){ +.shake(@duration : @defaultDuration, @easing : @defaultEasing) { .createAnimation(shake, @duration, @easing); - .shakeKeyFrames(){ + .shakeKeyFrames() { 0%, 100% {.transform( translateX(0));} 10%, 30%, 50%, 70%, 90% {.transform( translateX(-10px));} 20%, 40%, 60%, 80% {.transform( translateX(10px));} } @-webkit-keyframes shake {.shakeKeyFrames();} - @-moz-keyframes shake {.shakeKeyFrames();} - @-ms-keyframes shake {.shakeKeyFrames();} - @-o-keyframes shake {.shakeKeyFrames();} - @keyframes shake {.shakeKeyFrames();} + @-moz-keyframes shake {.shakeKeyFrames();} + @-ms-keyframes shake {.shakeKeyFrames();} + @-o-keyframes shake {.shakeKeyFrames();} + @keyframes shake {.shakeKeyFrames();} } -.swing(@duration : @defaultDuration, @easing : @defaultEasing){ - -webkit-transform-origin: top center; - -ms-transform-origin: top center; - transform-origin: top center; +.swing(@duration : @defaultDuration, @easing : @defaultEasing) { + -webkit-transform-origin : top center; + -ms-transform-origin : top center; + transform-origin : top center; .createAnimation(swing, @duration, @easing); - .swingKeyFrames(){ + .swingKeyFrames() { 20% {.transform(rotate(15deg));} 40% {.transform(rotate(-10deg));} 60% {.transform(rotate(5deg));} @@ -303,18 +303,18 @@ 100% {.transform(rotate(0deg));} } @-webkit-keyframes swing {.swingKeyFrames();} - @-moz-keyframes swing {.swingKeyFrames();} - @-ms-keyframes swing {.swingKeyFrames();} - @-o-keyframes swing {.swingKeyFrames();} - @keyframes swing {.swingKeyFrames();} + @-moz-keyframes swing {.swingKeyFrames();} + @-ms-keyframes swing {.swingKeyFrames();} + @-o-keyframes swing {.swingKeyFrames();} + @keyframes swing {.swingKeyFrames();} } -.twist(@duration : @defaultDuration, @easing : @defaultEasing){ - -webkit-transform-origin: center center; - -ms-transform-origin: center center; - transform-origin: center center; +.twist(@duration : @defaultDuration, @easing : @defaultEasing) { + -webkit-transform-origin : center center; + -ms-transform-origin : center center; + transform-origin : center center; .createAnimation(swing, @duration, @easing); - .swingKeyFrames(){ + .swingKeyFrames() { 20% {.transform(rotate(15deg));} 40% {.transform(rotate(-10deg));} 60% {.transform(rotate(5deg));} @@ -322,15 +322,15 @@ 100% {.transform(rotate(0deg));} } @-webkit-keyframes swing {.swingKeyFrames();} - @-moz-keyframes swing {.swingKeyFrames();} - @-ms-keyframes swing {.swingKeyFrames();} - @-o-keyframes swing {.swingKeyFrames();} - @keyframes swing {.swingKeyFrames();} + @-moz-keyframes swing {.swingKeyFrames();} + @-ms-keyframes swing {.swingKeyFrames();} + @-o-keyframes swing {.swingKeyFrames();} + @keyframes swing {.swingKeyFrames();} } -.wobble(@duration : @defaultDuration, @easing : @defaultEasing){ +.wobble(@duration : @defaultDuration, @easing : @defaultEasing) { .createAnimation(wobble, @duration, @easing); - .wobbleKeyFrames(){ + .wobbleKeyFrames() { 0% {.transform(translateX(0%));} 15% {.transform(translateX(-25%) rotate(-5deg));} 30% {.transform(translateX(20%) rotate(3deg));} @@ -340,22 +340,22 @@ 100% {.transform(translateX(0%));} } @-webkit-keyframes wobble {.wobbleKeyFrames();} - @-moz-keyframes wobble {.wobbleKeyFrames();} - @-ms-keyframes wobble {.wobbleKeyFrames();} - @-o-keyframes wobble {.wobbleKeyFrames();} - @keyframes wobble {.wobbleKeyFrames();} + @-moz-keyframes wobble {.wobbleKeyFrames();} + @-ms-keyframes wobble {.wobbleKeyFrames();} + @-o-keyframes wobble {.wobbleKeyFrames();} + @keyframes wobble {.wobbleKeyFrames();} } -.popIn(@duration : @defaultDuration, @easing : @defaultEasing){ +.popIn(@duration : @defaultDuration, @easing : @defaultEasing) { .createAnimation(popIn, @duration, @easing); - .popInKeyFrames(){ - 0% { .transform(scale(0));} - 70% { .transform(scale(1.4));} + .popInKeyFrames() { + 0% { .transform(scale(0));} + 70% { .transform(scale(1.4));} 100% { .transform(scale(1));} } @-webkit-keyframes popIn {.popInKeyFrames();} - @-moz-keyframes popIn {.popInKeyFrames();} - @-ms-keyframes popIn {.popInKeyFrames();} - @-o-keyframes popIn {.popInKeyFrames();} - @keyframes popIn {.popInKeyFrames();} + @-moz-keyframes popIn {.popInKeyFrames();} + @-ms-keyframes popIn {.popInKeyFrames();} + @-o-keyframes popIn {.popInKeyFrames();} + @keyframes popIn {.popInKeyFrames();} } diff --git a/shared/naturalcrit/styles/colors.less b/shared/naturalcrit/styles/colors.less index 30a7610a2..c096b9b4f 100644 --- a/shared/naturalcrit/styles/colors.less +++ b/shared/naturalcrit/styles/colors.less @@ -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; }; } \ No newline at end of file diff --git a/shared/naturalcrit/styles/core.less b/shared/naturalcrit/styles/core.less index 3248269c5..02db5db18 100644 --- a/shared/naturalcrit/styles/core.less +++ b/shared/naturalcrit/styles/core.less @@ -12,37 +12,31 @@ font-family : 'CodeBold'; src : data-uri('naturalcrit/styles/CODE Bold.otf') format('opentype'); } -html,body, #reactRoot{ +html,body, #reactRoot { height : 100vh; min-height : 100vh; margin : 0; font-family : 'Open Sans', sans-serif; } -*{ - box-sizing : border-box; -} -.colorButton(@backgroundColor : @green){ +* { 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%); - } - &:disabled{ + background-color : @backgroundColor; + border : none; + &:hover { background-color : darken(@backgroundColor, 5%); } + &:active { background-color : darken(@backgroundColor, 10%); } + &:disabled { + cursor : not-allowed; background-color : @silver !important; - cursor:not-allowed; } } diff --git a/shared/naturalcrit/styles/elements.less b/shared/naturalcrit/styles/elements.less index e7f8b05f5..ca4574f26 100644 --- a/shared/naturalcrit/styles/elements.less +++ b/shared/naturalcrit/styles/elements.less @@ -1,86 +1,76 @@ @containerWidth : 1000px; -html, body{ +html, body { position : relative; height : 100%; min-height : 100%; - background-color : #eee; font-family : 'Lato', sans-serif; color : @copyGrey; + background-color : #EEEEEE; } -.container{ +.container { position : relative; max-width : @containerWidth; - margin : 0 auto; padding-right : 20px; padding-left : 20px; + margin : 0 auto; } -h1{ +h1 { margin-top : 10px; margin-bottom : 15px; font-size : 2em; } -h2{ +h2 { margin-top : 10px; margin-bottom : 15px; font-size : 1.5em; font-weight : 900; } -h3{ +h3 { margin-top : 5px; margin-bottom : 7px; font-size : 1em; font-weight : 900; } -p{ +p { margin-bottom : 1em; font-size : 16px; - color : @copyGrey; line-height : 1.5em; + color : @copyGrey; } -code{ - background-color : #F8F8F8; - font-family : 'Courier', mono; +code { + font-family : 'Courier', "mono"; color : black; white-space : pre; + background-color : #F8F8F8; } -a{ - color : inherit; -} -strong{ - font-weight : bold; -} -button{ +a { color : inherit; } +strong { font-weight : bold; } +button { .button(); } -.button(@backgroundColor : @green){ +.button(@backgroundColor : @green) { .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; - outline : 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; + outline : none; 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; font-size : 14px; color : white; text-align : center; + cursor : pointer; + background-color : @backgroundColor; } \ No newline at end of file diff --git a/shared/naturalcrit/styles/reset.less b/shared/naturalcrit/styles/reset.less index df5564a21..21e07a1c0 100644 --- a/shared/naturalcrit/styles/reset.less +++ b/shared/naturalcrit/styles/reset.less @@ -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; + color : unset; + text-transform : unset; + background-color : unset; } diff --git a/shared/naturalcrit/styles/tooltip.less b/shared/naturalcrit/styles/tooltip.less index 078cfd0c1..b21439486 100644 --- a/shared/naturalcrit/styles/tooltip.less +++ b/shared/naturalcrit/styles/tooltip.less @@ -2,116 +2,115 @@ @tooltipColor : #383838; @arrowSize : 6px; @arrowPosition : 18px; -[data-tooltip]{ +[data-tooltip] { .tooltip(attr(data-tooltip)); } -[data-tooltip-top]{ +[data-tooltip-top] { .tooltipTop(attr(data-tooltip-top)); } -[data-tooltip-bottom]{ +[data-tooltip-bottom] { .tooltipBottom(attr(data-tooltip-bottom)); } -[data-tooltip-left]{ +[data-tooltip-left] { .tooltipLeft(attr(data-tooltip-left)); } -[data-tooltip-right]{ +[data-tooltip-right] { .tooltipRight(attr(data-tooltip-right)); } -.tooltip(@content){ +.tooltip(@content) { .tooltipBottom(@content); } -.tooltipTop(@content){ +.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){ +.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){ +.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){ +.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(){ -} -.tooltipBase(@content){ +.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; } diff --git a/tests/markdown/basic.test.js b/tests/markdown/basic.test.js index e5feec0b3..aaa2adf58 100644 --- a/tests/markdown/basic.test.js +++ b/tests/markdown/basic.test.js @@ -1,4 +1,4 @@ -/* eslint-disable max-lines */ + import Markdown from 'naturalcrit/markdown.js'; diff --git a/tests/markdown/non-breaking-spaces.test.js b/tests/markdown/non-breaking-spaces.test.js index 9dad4eb0f..c4f36554a 100644 --- a/tests/markdown/non-breaking-spaces.test.js +++ b/tests/markdown/non-breaking-spaces.test.js @@ -1,4 +1,4 @@ -/* eslint-disable max-lines */ + import Markdown from 'naturalcrit/markdown.js'; diff --git a/tests/markdown/paragraph-justification.test.js b/tests/markdown/paragraph-justification.test.js index 48b311e85..7876f5a26 100644 --- a/tests/markdown/paragraph-justification.test.js +++ b/tests/markdown/paragraph-justification.test.js @@ -1,4 +1,4 @@ -/* eslint-disable max-lines */ + import Markdown from 'naturalcrit/markdown.js'; diff --git a/themes/Legacy/5ePHB/style.less b/themes/Legacy/5ePHB/style.less index 4ebfbf840..56d1bed94 100644 --- a/themes/Legacy/5ePHB/style.less +++ b/themes/Legacy/5ePHB/style.less @@ -9,26 +9,22 @@ @headerText : #58180D; // Dark maroon @monsterStatBackground : #FDF1DC; // Lighter parchment @captionText : #766649; // Brown -@page { margin: 0; } -body { - counter-reset : phb-page-numbers; -} -*{ - -webkit-print-color-adjust : exact; -} -.useSansSerif(){ - font-family : ScalySans; - em{ - font-family : ScalySans; +@page { margin : 0; } +body { counter-reset : phb-page-numbers; } +* { -webkit-print-color-adjust : exact; } +.useSansSerif() { + font-family : "ScalySans"; + em { + font-family : "ScalySans"; font-style : italic; } - strong{ - font-family : ScalySans; + strong { + font-family : "ScalySans"; font-weight : 800; letter-spacing : -0.02em; } } -.useColumns(@multiplier : 1){ +.useColumns(@multiplier : 1) { column-count : 2; column-fill : auto; column-gap : 1cm; @@ -40,21 +36,21 @@ body { -webkit-column-gap : 1cm; -moz-column-gap : 1cm; } -.phb, .page{ +.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; @@ -63,199 +59,175 @@ body { contain-intrinsic-size : auto none; } -.phb{ +.phb { //***************************** // * BASE // *****************************/ - p{ + p { padding-bottom : 0.8em; line-height : 1.269em; - &+p{ - margin-top : -0.8em; - } + & + p { margin-top : -0.8em; } } - ul{ - margin-bottom : 0.8em; + ul { 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; + ol { 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; - } - strong{ + p + p, ul + p, ol + p { text-indent : 1em; } + img { z-index : -1; } + strong { font-weight : bold; letter-spacing : 0.03em; } - em{ - font-style : italic; - } - sup{ + em { font-style : italic; } + sup { + font-size : smaller; + line-height : 0; vertical-align : super; - font-size : smaller; - line-height : 0; } - sub{ - vertical-align : sub; + sub { font-size : smaller; line-height : 0; + vertical-align : sub; } //***************************** // * HEADERS // *****************************/ - h1,h2,h3,h4{ + h1,h2,h3,h4 { margin-top : 0.2em; margin-bottom : 0.2em; - font-family : MrJeeves; + font-family : "MrJeeves"; font-weight : 800; color : @headerText; } - h1{ + h1 { column-span : all; font-size : 0.987cm; -webkit-column-span : all; -moz-column-span : all; - &+p::first-letter{ + & + 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; - } - h3{ + h2 { font-size : 0.705cm; } + h3 { font-size : 0.529cm; border-bottom : 2px solid @headerUnderline; } - h4{ + h4 { margin-bottom : 0.00em; font-size : 0.458cm; } - h5{ + h5 { margin-bottom : 0.2em; - font-family : ScalySansSmallCaps; + font-family : "ScalySansSmallCaps"; font-size : 0.423cm; font-weight : 900; } //***************************** // * TABLE // *****************************/ - table{ + table { .useSansSerif(); width : 100%; margin-bottom : 1em; font-size : 10pt; - thead{ - display: table-row-group; + thead { + display : table-row-group; font-weight : 800; - th{ - vertical-align : bottom; - padding-bottom : 0.3em; + th { 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; - } + tbody { + tr { + td { padding : 0.3em 0.1em; } + &:nth-child(odd) { background-color : @noteGreen; } } } } //***************************** // * NOTE // *****************************/ - blockquote{ + 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; - p, ul{ + 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 // *****************************/ - hr+blockquote{ + hr+blockquote { position : relative; padding-top : 15px; background-color : @monsterStatBackground; border-style : solid; border-width : 10px; border-image : @monsterBorderImageLegacy 10; - h2{ + h2 { margin-top : -8px; margin-bottom : 0px; - &+p{ - padding-bottom : 0px; - } + & + p { padding-bottom : 0px; } } - h3{ - font-family : ScalySans; - font-weight : 400; + h3 { + font-family : "ScalySans"; + font-weight : normal; border-bottom : 1px solid @headerText; } - hr+ul{ - color : @headerText; - } - ul{ + hr + ul { color : @headerText; } + ul { .useSansSerif(); padding-left : 1em; font-size : 0.352cm; } // Monster Ability table - hr+table{ + hr + table { margin : 0; background-color : transparent; border-style : none; border-image : none; - tbody{ - tr:nth-child(odd), tr:nth-child(even){ - background-color : transparent; - } + tbody { + tr:nth-child(odd), tr:nth-child(even) { background-color : transparent; } } } - table{ - color : @headerText; - } - p+p{ - margin-top : 0em; + table { color : @headerText; } + p + p { padding-bottom : 0.5em; + margin-top : 0em; text-indent : 0em; } //Triangle dividers - hr{ + hr { visibility : visible; height : 6px; margin : 4px 0px; @@ -265,100 +237,90 @@ body { } } //Full Width - hr+hr+blockquote{ + hr + hr + blockquote { .useColumns(0.96); column-fill : balance; } //***************************** // * FOOTER // *****************************/ - &:after{ - content : ""; + &:after { 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; - } - .footnote{ + &:nth-child(even) { + &::after { transform : scaleX(-1); } + .pageNumber { left : 2px; } + .footnote { left : 80px; text-align : left; } } - .pageNumber{ + .pageNumber { position : absolute; right : 2px; 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{ + .footnote { position : absolute; right : 80px; bottom : 32px; z-index : 150; width : 200px; font-size : 0.8em; - color : #c9ad6a; + color : #C9AD6A; text-align : right; } //***************************** // * EXTRAS // *****************************/ - hr{ + hr { visibility : hidden; margin : 0px; } //Modified unorder list, used in spells - hr+ul{ - margin-bottom : 0.5em; + hr + ul { padding-left : 1em; + margin-bottom : 0.5em; text-indent : -1em; list-style-type : none; } //Column Break - pre, code{ + pre, code { visibility : hidden; -webkit-column-break-after : always; break-after : always; -moz-column-break-after : always; } //Avoid breaking up - p,blockquote,table{ + p,blockquote,table { z-index : 15; -webkit-column-break-inside : avoid; page-break-inside : avoid; break-inside : avoid; } //Better spacing for spell blocks - h4+p+hr+ul{ - margin-top : -0.5em - } + 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{ + ul ul,ol ol,ul ol,ol ul { margin-bottom : 0px; margin-left : 1.5em; } - li{ + li { -webkit-column-break-inside : avoid; page-break-inside : avoid; break-inside : avoid; @@ -367,89 +329,81 @@ body { //***************************** // * SPELL LIST // *****************************/ -.phb .spellList{ +.phb .spellList { .useSansSerif(); column-count : 4; - column-span : all; -webkit-column-span : all; -moz-column-span : all; - ul+h5{ - margin-top : 15px; - } - p, ul{ + column-span : all; + ul + h5 { margin-top : 15px; } + p, ul { font-size : 0.352cm; line-height : 1.263em; } - ul{ - margin-bottom : 0.5em; + ul { 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; +.phb .wide { -webkit-column-span : all; -moz-column-span : all; + column-span : all; } //***************************** // * CLASS TABLE // *****************************/ -.phb .classTable{ +.phb .classTable { margin-top : 25px; margin-bottom : 40px; 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 : 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{ +.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; - p{ + 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,47 +411,41 @@ 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 { + h5 { + font-family : "WalterTurncoat"; font-size : 1.3em; - font-family : WalterTurncoat; } - a{ + a { color : inherit; text-decoration : unset; - &:hover { - text-decoration : underline; - } + &:hover { text-decoration : underline; } } } } //***************************** // * TABLE OF CONTENTS // *****************************/ -.phb .toc{ +.phb .toc { -webkit-column-break-inside : avoid; page-break-inside : avoid; break-inside : avoid; - a{ + a { color : black; text-decoration : none; - &:hover{ - text-decoration : underline; - } + &:hover { text-decoration : underline; } } - ul{ + ul { padding-left : 0; list-style-type : none; } - &>ul>li{ - margin-bottom : 10px; - } + & > ul > li { margin-bottom : 10px; } } diff --git a/themes/V3/5eDMG/snippets.js b/themes/V3/5eDMG/snippets.js index 636befb60..bad5e8e6a 100644 --- a/themes/V3/5eDMG/snippets.js +++ b/themes/V3/5eDMG/snippets.js @@ -1,4 +1,4 @@ -/* eslint-disable max-lines */ + module.exports = [ ]; diff --git a/themes/V3/5eDMG/style.less b/themes/V3/5eDMG/style.less index 2ced98312..cbc3fa890 100644 --- a/themes/V3/5eDMG/style.less +++ b/themes/V3/5eDMG/style.less @@ -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; - } + /* TABLES WITHIN NOTES */ + .note table tbody tr:nth-child(odd) { background : #FFFFFF; } - /*DROP CAP*/ + /* DROP CAP */ h1 + p::first-letter { - background-image: unset; - color:black; + color : black; + background-image : unset; } - .quote p:first-child::first-line { - all: unset; + .quote p:first-child::first-line { all : unset; } + + &::after { + height : 58px; + background-image : url("/assets/DMG_footerAccent.png"); } - &:after { - background-image : url(/assets/DMG_footerAccent.png); - height: 58px; - } - - .footnote { - bottom : 40px; - } + .footnote { bottom : 40px; } } .page:has(.partCover) { - .partCover { - background-image: @partCoverHeaderDMG; - } + .partCover { background-image : @partCoverHeaderDMG; } } diff --git a/themes/V3/5ePHB/style.less b/themes/V3/5ePHB/style.less index 1a751b18d..93cfdf719 100644 --- a/themes/V3/5ePHB/style.less +++ b/themes/V3/5ePHB/style.less @@ -305,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; @@ -335,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; @@ -355,8 +355,8 @@ } .bonus { - float: right; - padding-right: 0.5em; + float : right; + padding-right : 0.5em; } // Monster Ability table @@ -456,8 +456,8 @@ // * EXTRAS // *****************************/ hr { - margin : 0px; visibility : hidden; + margin : 0px; } //Text indent right after table table + p { text-indent : 1em; } @@ -525,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 { @@ -547,38 +547,38 @@ &::after { display : none; } .frontCover { position : absolute; } h1 { - 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; - -webkit-text-stroke: 0.2cm black; - paint-order:stroke; + margin-top : 1.55cm; + margin-bottom : 0; + font-family : 'NodestoCapsCondensed'; + font-size : 2.245cm; + font-weight : normal; + line-height : 1.9cm; + color : white; + text-transform : uppercase; + text-shadow : unset; + -webkit-text-stroke : 0.2cm black; + paint-order : stroke; } h2 { - font-family : 'NodestoCapsCondensed'; - font-size : 0.85cm; - font-weight : normal; - color : white; - letter-spacing : 0.1cm; - -webkit-text-stroke: 0.14cm black; - paint-order:stroke; + font-family : 'NodestoCapsCondensed'; + font-size : 0.85cm; + font-weight : normal; + color : white; + letter-spacing : 0.1cm; + -webkit-text-stroke : 0.14cm black; + paint-order : stroke; } 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; @@ -601,19 +601,19 @@ filter : drop-shadow(2px 2px 2px black); } .footnote { - position : absolute; - right : 0; - bottom : 1.3cm; - left : 0; - width : 70%; - margin-right : auto; - margin-left : auto; - font-family : 'Overpass'; - font-size : 0.496cm; - color : white; - text-align : center; - -webkit-text-stroke: 0.1cm black; - paint-order:stroke; + position : absolute; + right : 0; + bottom : 1.3cm; + left : 0; + width : 70%; + margin-right : auto; + margin-left : auto; + font-family : 'Overpass'; + font-size : 0.496cm; + color : white; + text-align : center; + -webkit-text-stroke : 0.1cm black; + paint-order : stroke; } .logo { position : absolute; @@ -621,9 +621,7 @@ right : 0; left : 0; filter : drop-shadow(0 0 0.075cm black); - img { - height : 2cm; - } + img { height : 2cm; } } } // ***************************** @@ -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,19 +664,17 @@ bottom : 1cm; left : 0; height : 2cm; - img { - height : 2cm; - } + img { height : 2cm; } } } // ***************************** // * BACK COVER // *****************************/ .page:has(.backCover) { - padding : 2.25cm 1.3cm 2cm 1.3cm; - color : #FFFFFF; - columns : 1; + padding : 2.25cm 1.3cm 2cm 1.3cm; line-height : 1.4em; + color : #FFFFFF; + columns : 1; &::after { display : none; } .columnWrapper { width : 7.6cm; } .backCover { @@ -689,7 +685,7 @@ background-repeat : no-repeat; background-size : contain; } - .blank { height: 1.4em; } + .blank { height : 1.4em; } h1 { margin-bottom : 0.3cm; font-family : 'NodestoCapsCondensed'; @@ -707,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; @@ -805,7 +801,7 @@ h6, .page:has(.insideCover), .monster, .noToC, -.toc { --TOC: exclude; } +.toc { --TOC : exclude; } // Brew level default inclusion changes. @@ -815,34 +811,32 @@ h6, // Block level inclusion changes // These include either a single (include) or a range (depth) -.tocIncludeH1 h1 {--TOC: include; } -.tocIncludeH2 h2 {--TOC: include; } -.tocIncludeH3 h3 {--TOC: include; } -.tocIncludeH4 h4 {--TOC: include; } -.tocIncludeH5 h5 {--TOC: include; } -.tocIncludeH6 h6 {--TOC: include; } +.tocIncludeH1 h1 {--TOC : include; } +.tocIncludeH2 h2 {--TOC : include; } +.tocIncludeH3 h3 {--TOC : include; } +.tocIncludeH4 h4 {--TOC : include; } +.tocIncludeH5 h5 {--TOC : include; } +.tocIncludeH6 h6 {--TOC : include; } -.tocDepthH2 :is(h1, h2) {--TOC: include; } -.tocDepthH3 :is(h1, h2, h3) {--TOC: include; } -.tocDepthH4 :is(h1, h2, h3, h4) {--TOC: include; } -.tocDepthH5 :is(h1, h2, h3, h4, h5) {--TOC: include; } -.tocDepthH6 :is(h1, h2, h3, h4, h5, h6) {--TOC: include; } +.tocDepthH2 :is(h1, h2) {--TOC : include; } +.tocDepthH3 :is(h1, h2, h3) {--TOC : include; } +.tocDepthH4 :is(h1, h2, h3, h4) {--TOC : include; } +.tocDepthH5 :is(h1, h2, h3, h4, h5) {--TOC : include; } +.tocDepthH6 :is(h1, h2, h3, h4, h5, h6) {--TOC : include; } // Block level exclusion changes // These exclude a single block level -.tocExcludeH1 h1 {--TOC: exclude; } -.tocExcludeH2 h2 {--TOC: exclude; } -.tocExcludeH3 h3 {--TOC: exclude; } -.tocExcludeH4 h4 {--TOC: exclude; } -.tocExcludeH5 h5 {--TOC: exclude; } -.tocExcludeH6 h6 {--TOC: exclude; } +.tocExcludeH1 h1 {--TOC : exclude; } +.tocExcludeH2 h2 {--TOC : exclude; } +.tocExcludeH3 h3 {--TOC : exclude; } +.tocExcludeH4 h4 {--TOC : exclude; } +.tocExcludeH5 h5 {--TOC : exclude; } +.tocExcludeH6 h6 {--TOC : exclude; } .page:has(.partCover) { - --TOC: exclude; - & h1 { - --TOC: include; - } - } + --TOC : exclude; + & h1 { --TOC : include; } +} .page { &:has(.toc)::after { display : none; } @@ -908,9 +902,7 @@ h6, .useColumns(0.96, @fillMode: balance); } } - .toc.wide li { - break-inside: auto; - } + .toc.wide li { break-inside : auto; } } // ***************************** @@ -935,9 +927,7 @@ h6, .page h1 + * { margin-top : 0; } -.page .descriptive.wide + * { - margin-top: 0; -} +.page .descriptive.wide + * { margin-top : 0; } //***************************** // * RUNE TABLE @@ -952,8 +942,8 @@ h6, width : 1.3cm; height : 1.3cm; font-weight : normal; - text-transform : uppercase; vertical-align : middle; + text-transform : uppercase; outline : 1px solid #000000; } th { diff --git a/themes/V3/Blank/style.less b/themes/V3/Blank/style.less index e107c76b8..9f2bd498e 100644 --- a/themes/V3/Blank/style.less +++ b/themes/V3/Blank/style.less @@ -21,9 +21,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 { @@ -58,8 +58,8 @@ body { counter-reset : page-numbers 0; } content-visibility : auto; contain-intrinsic-size : auto none; } - //***************************** - // * BASE +//***************************** +// * BASE // *****************************/ .page { p { @@ -120,7 +120,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; } @@ -133,10 +133,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; } } @@ -199,11 +199,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 */ } @@ -231,15 +231,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; @@ -276,19 +276,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'] { @@ -296,15 +296,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; @@ -321,23 +321,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'); } } @@ -346,15 +346,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%; @@ -367,43 +367,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'); } } } @@ -438,11 +438,9 @@ body { counter-reset : page-numbers 0; } & + * { margin-top : 0; } } .blank { - height: 1em; - margin-top: 0; - & + * { - margin-top: 0; - } + height : 1em; + margin-top : 0; + & + * { margin-top : 0; } } } @@ -468,8 +466,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%); } @@ -493,12 +491,8 @@ 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; } } diff --git a/themes/V3/Journal/snippets.js b/themes/V3/Journal/snippets.js index 636befb60..bad5e8e6a 100644 --- a/themes/V3/Journal/snippets.js +++ b/themes/V3/Journal/snippets.js @@ -1,4 +1,4 @@ -/* eslint-disable max-lines */ + module.exports = [ ]; diff --git a/themes/V3/Journal/style.less b/themes/V3/Journal/style.less index b8ed3ce8f..bddefb749 100644 --- a/themes/V3/Journal/style.less +++ b/themes/V3/Journal/style.less @@ -11,47 +11,35 @@ --HB_Color_WatercolorStain : #BBAD82; // Light brown } -.useSansSerif(){ - font-family : PermanentMarker; +.useSansSerif() { + 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; - } - strong{ - font-weight : 800; + p,dl,ul,ol { line-height : 1.2em; } + ul, ol { padding-left : 1em; } + em { font-style : italic; } + strong { 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); +.page { 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 { @@ -59,167 +47,137 @@ } } - //***************************** - // * BASE +//***************************** +// * BASE // *****************************/ -.page{ - color : var(--HB_Color_Text); - font-family : ReenieBeanie; +.page { + font-family : "ReenieBeanie"; font-size : 0.53cm; line-height : 0.8em; - p + * { - margin-top : 0.325cm; - } - p + p{ - margin-top : 0; - } - ul{ - margin-bottom : 0.8em; - } - ol{ - margin-bottom : 0.8em; - } - em{ + 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 { + font-style : unset; text-decoration : underline; - font-style : unset; - } - 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; + h1,h2,h3,h4,h5 { + font-family : "FrederickaTheGreat"; font-weight : unset; color : var(--HB_Color_HeaderText); } - h1{ + h1 { margin-bottom : 0.18cm; //Margin-bottom only because this is WIDE font-size : 0.89cm; - line-height : 1em; font-variant : small-caps; - &+p::first-letter{ + 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{ + h2 { font-size : 0.62cm; line-height : 0.988em; //Font is misaligned. Shift up slightly } - h3{ + h3 { + margin-left : -0.9em; font-size : 0.575cm; line-height : 0.995em; //Font is misaligned. Shift up slightly - margin-left : -0.9em; } - h4{ + 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); - } + transform : rotate(0deg); + &:nth-of-type(2n) { transform : rotate(1deg); } + &:nth-of-type(3n) { transform : rotate(-1.5deg); } } - h5{ - font-family : PermanentMarker; + h5 { + font-family : "PermanentMarker"; font-size : 0.4cm; - color : var(--HB_Color_Text2); font-weight : bold; line-height : 0.951em; //Font is misaligned. Shift up slightly - & + * { - margin-top : 0.2cm; - } + color : var(--HB_Color_Text2); + & + * { margin-top : 0.2cm; } } //***************************** // * TABLE // *****************************/ - table{ + table { .useSansSerif(); - & + * { - margin-top : 0.325cm; - } - thead{ - th{ - vertical-align : bottom; + & + * { margin-top : 0.325cm; } + thead { + th { 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); - } + tbody { + tr { + td { padding : 0.14em 0; } + &:nth-child(odd) { background-image : linear-gradient(to left, #41212100, #41212122, #41212100); } } } } //***************************** // * NOTE // *****************************/ - .note{ + .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{ + * + .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 { + h5 { + font-family : "WalterTurncoat"; font-size : 1.3em; - font-family : WalterTurncoat; } - a{ + 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,33 +238,29 @@ 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{ + h2 { + margin : 0; font-size : 0.62cm; line-height : 1em; - margin : 0; - &+p { + & + p { margin-bottom : 0; //Monster size and type subtext } } - h3{ + h3 { + padding-bottom : 0.05cm; margin-left : 0; font-variant : small-caps; - padding-bottom : 0.05cm; } - hr{ + hr { visibility : visible; height : 6px; margin : 0.12cm 0cm; @@ -330,24 +272,18 @@ } // Monster Ability table - hr + table:first-of-type{ + hr + table:first-of-type { margin : 0; - column-span : none; - background-image : 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; @@ -356,29 +292,27 @@ } //Full Width - .monster.wide{ + .monster.wide { .useColumns(0.96, @fillMode: balance); } //***************************** // * FOOTER // *****************************/ - &:nth-child(odd){ - .pageNumber{ - left : 3cm; - } - .footnote{ + &:nth-child(odd) { + .pageNumber { left : 3cm; } + .footnote { left : 4.5cm; text-align : left; } } - .pageNumber{ - font-family : FrederickaTheGreat; + .pageNumber { right : 3cm; bottom : 1.25cm; + font-family : "FrederickaTheGreat"; color : var(--HB_Color_HeaderText); } - .footnote{ + .footnote { position : absolute; right : 4.5cm; bottom : 1.25cm; @@ -391,154 +325,134 @@ //************************************ // * CODE BLOCKS // ************************************/ - code{ - font-size : 0.3cm; + code { 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{ + 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{ + 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; + color : var(--HB_Color_Text); + transition : all 1s ease; } + a:hover { color : red; } } //***************************** // * SPELL LIST // *****************************/ -.page .spellList{ +.page .spellList { .useSansSerif(); - font-family : PermanentMarker; + font-family : "PermanentMarker"; column-count : 2; - ul+h5{ - margin-top : 15px; - } - ul{ - margin-bottom : 0.5em; + ul + h5 { margin-top : 15px; } + ul { 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; - } +.page .classTable { + th[colspan]:not([rowspan]) { white-space : nowrap; } + h5 + table { margin-top : 0.2cm; } } //***************************** // * TABLE OF CONTENTS // *****************************/ -.page .toc{ +.page .toc { -webkit-column-break-inside : avoid; page-break-inside : avoid; break-inside : avoid; h1 { - text-align : center; margin-bottom : 0.3cm; + text-align : center; } - a{ + 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{ + 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; + 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 */ - /*white-space : nowrap; /* Uncomment if needed */ + 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 */ } } - ul { /*List indent*/ + ul { /* List indent */ margin-left : 1em; } } - &.wide{ + &.wide { .useColumns(0.96, @fillMode: balance); } } @@ -546,6 +460,4 @@ //***************************** // * WIDE // *****************************/ -.page .wide { - margin-bottom : 0.45cm; -} +.page .wide { margin-bottom : 0.45cm; } diff --git a/themes/codeMirror/customEditorStyles.less b/themes/codeMirror/customEditorStyles.less index 367eaec33..8c48c1b43 100644 --- a/themes/codeMirror/customEditorStyles.less +++ b/themes/codeMirror/customEditorStyles.less @@ -1,88 +1,83 @@ .editor .codeEditor .CodeMirror { - // Themes with dark backgrounds - &.cm-s-3024-night, - &.cm-s-abbott, - &.cm-s-abcdef, - &.cm-s-ambiance, - &.cm-s-ayu-dark, - &.cm-s-ayu-mirage, - &.cm-s-base16-dark, - &.cm-s-bespin, - &.cm-s-blackboard, - &.cm-s-cobalt, - &.cm-s-colorforth, - &.cm-s-darcula, - &.cm-s-dracula, - &.cm-s-duotone-dark, - &.cm-s-erlang-dark, - &.cm-s-gruvbox-dark, - &.cm-s-hopscotch, - &.cm-s-icecoder, - &.cm-s-isotope, - &.cm-s-lesser-dark, - &.cm-s-liquibyte, - &.cm-s-lucario, - &.cm-s-material, - &.cm-s-material-darker, - &.cm-s-material-ocean, - &.cm-s-material-palenight, - &.cm-s-mbo, - &.cm-s-midnight, - &.cm-s-monokai, - &.cm-s-moxer, - &.cm-s-night, - &.cm-s-nord, - &.cm-s-oceanic-next, - &.cm-s-panda-syntax, - &.cm-s-paraiso-dark, - &.cm-s-pastel-on-dark, - &.cm-s-railscasts, - &.cm-s-rubyblue, - &.cm-s-seti, - &.cm-s-shadowfox, - &.cm-s-the-matrix, - &.cm-s-tomorrow-night-bright, - &.cm-s-tomorrow-night-eighties, - &.cm-s-twilight, - &.cm-s-vibrant-ink, - &.cm-s-xq-dark, - &.cm-s-yonce, - &.cm-s-zenburn - { - .CodeMirror-code { - .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; - } - } - } - } - // Themes with light backgrounds - &.cm-s-default, - &.cm-s-3024-day, - &.cm-s-ambiance-mobile, - &.cm-s-base16-light, - &.cm-s-duotone-light, - &.cm-s-eclipse, - &.cm-s-elegant, - &.cm-s-juejin, - &.cm-s-neat, - &.cm-s-neo, - &.cm-s-paraiso-lightm - &.cm-s-solarized, - &.cm-s-ssms, - &.cm-s-ttcn, - &.cm-s-xq-light, - &.cm-s-yeti { - // Future styling for themes with light backgrounds - --dummyVar: 'currently unused'; - } + // Themes with dark backgrounds + &.cm-s-3024-night, + &.cm-s-abbott, + &.cm-s-abcdef, + &.cm-s-ambiance, + &.cm-s-ayu-dark, + &.cm-s-ayu-mirage, + &.cm-s-base16-dark, + &.cm-s-bespin, + &.cm-s-blackboard, + &.cm-s-cobalt, + &.cm-s-colorforth, + &.cm-s-darcula, + &.cm-s-dracula, + &.cm-s-duotone-dark, + &.cm-s-erlang-dark, + &.cm-s-gruvbox-dark, + &.cm-s-hopscotch, + &.cm-s-icecoder, + &.cm-s-isotope, + &.cm-s-lesser-dark, + &.cm-s-liquibyte, + &.cm-s-lucario, + &.cm-s-material, + &.cm-s-material-darker, + &.cm-s-material-ocean, + &.cm-s-material-palenight, + &.cm-s-mbo, + &.cm-s-midnight, + &.cm-s-monokai, + &.cm-s-moxer, + &.cm-s-night, + &.cm-s-nord, + &.cm-s-oceanic-next, + &.cm-s-panda-syntax, + &.cm-s-paraiso-dark, + &.cm-s-pastel-on-dark, + &.cm-s-railscasts, + &.cm-s-rubyblue, + &.cm-s-seti, + &.cm-s-shadowfox, + &.cm-s-the-matrix, + &.cm-s-tomorrow-night-bright, + &.cm-s-tomorrow-night-eighties, + &.cm-s-twilight, + &.cm-s-vibrant-ink, + &.cm-s-xq-dark, + &.cm-s-yonce, + &.cm-s-zenburn { + .CodeMirror-code { + .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; } + } + } + } + // Themes with light backgrounds + &.cm-s-default, + &.cm-s-3024-day, + &.cm-s-ambiance-mobile, + &.cm-s-base16-light, + &.cm-s-duotone-light, + &.cm-s-eclipse, + &.cm-s-elegant, + &.cm-s-juejin, + &.cm-s-neat, + &.cm-s-neo, + &.cm-s-paraiso-lightm + &.cm-s-solarized, + &.cm-s-ssms, + &.cm-s-ttcn, + &.cm-s-xq-light, + &.cm-s-yeti { + // Future styling for themes with light backgrounds + --dummyVar : 'currently unused'; + } } diff --git a/themes/fonts/5e legacy/fonts.less b/themes/fonts/5e legacy/fonts.less index d4c10c456..680e395ec 100644 --- a/themes/fonts/5e legacy/fonts.less +++ b/themes/fonts/5e legacy/fonts.less @@ -1,61 +1,61 @@ /* Main Font, serif */ @font-face { - font-family: BookSanity; - src: url('../../../fonts/5e legacy/Bookinsanity.woff2'); - font-weight: normal; - font-style: normal; + font-family : "BookSanity"; + font-style : normal; + font-weight : normal; + src : url('../../../fonts/5e legacy/Bookinsanity.woff2'); } @font-face { - font-family: BookSanity; - src: url('../../../fonts/5e legacy/Bookinsanity Bold.woff2'); - font-weight: bold; - font-style: normal; + font-family : "BookSanity"; + font-style : normal; + font-weight : bold; + src : url('../../../fonts/5e legacy/Bookinsanity Bold.woff2'); } @font-face { - font-family: BookSanity; - src: url('../../../fonts/5e legacy/Bookinsanity Italic.woff2'); - font-weight: normal; - font-style: italic; + font-family : "BookSanity"; + font-style : italic; + font-weight : normal; + 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-style: italic; + 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; - src: url('../../../fonts/5e legacy/Scaly Sans.woff2'); - font-weight: normal; - font-style: normal; + font-family : "ScalySans"; + font-style : normal; + font-weight : normal; + src : url('../../../fonts/5e legacy/Scaly Sans.woff2'); } @font-face { - font-family: ScalySansSmallCaps; - src: url('../../../fonts/5e legacy/Scaly Sans Caps.woff2'); - font-weight: normal; - font-style: normal; + font-family : "ScalySansSmallCaps"; + font-style : normal; + font-weight : normal; + src : url('../../../fonts/5e legacy/Scaly Sans Caps.woff2'); } @font-face { - font-family: WalterTurncoat; - src: url('../../../fonts/5e legacy/WalterTurncoat-Regular.woff2'); - font-weight: normal; - font-style: 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-style: 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-style: normal; + font-family : "Solberry"; + font-style : normal; + font-weight : normal; + src : url('../../../fonts/5e legacy/Solbera Imitation.woff2'); } diff --git a/themes/fonts/5e/fonts.less b/themes/fonts/5e/fonts.less index c028b06f9..eec5c418f 100644 --- a/themes/fonts/5e/fonts.less +++ b/themes/fonts/5e/fonts.less @@ -1,143 +1,143 @@ /* Main Font, serif */ @font-face { - font-family: BookInsanityRemake; - src: url('../../../fonts/5e/Bookinsanity.woff2'); - font-weight: normal; - font-style: normal; + font-family : "BookInsanityRemake"; + font-style : normal; + font-weight : normal; + src : url('../../../fonts/5e/Bookinsanity.woff2'); } @font-face { - font-family: BookInsanityRemake; - src: url('../../../fonts/5e/Bookinsanity Bold.woff2'); - font-weight: bold; - font-style: normal; + font-family : "BookInsanityRemake"; + font-style : normal; + font-weight : bold; + src : url('../../../fonts/5e/Bookinsanity Bold.woff2'); } @font-face { - font-family: BookInsanityRemake; - src: url('../../../fonts/5e/Bookinsanity Italic.woff2'); - font-weight: normal; - font-style: italic; + font-family : "BookInsanityRemake"; + font-style : italic; + font-weight : normal; + src : url('../../../fonts/5e/Bookinsanity Italic.woff2'); } @font-face { - font-family: BookInsanityRemake; - src: url('../../../fonts/5e/Bookinsanity Bold Italic.woff2'); - font-weight: bold; - font-style: italic; + 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; - src: url('../../../fonts/5e/Scaly Sans.woff2'); - font-weight: normal; - font-style: normal; + font-family : "ScalySansRemake"; + font-style : normal; + font-weight : normal; + src : url('../../../fonts/5e/Scaly Sans.woff2'); } @font-face { - font-family: ScalySansRemake; - src: url('../../../fonts/5e/Scaly Sans Bold.woff2'); - font-weight: bold; - font-style: normal; + font-family : "ScalySansRemake"; + font-style : normal; + font-weight : bold; + src : url('../../../fonts/5e/Scaly Sans Bold.woff2'); } @font-face { - font-family: ScalySansRemake; - src: url('../../../fonts/5e/Scaly Sans Italic.woff2'); - font-weight: normal; - font-style: italic; + font-family : "ScalySansRemake"; + font-style : italic; + font-weight : normal; + src : url('../../../fonts/5e/Scaly Sans Italic.woff2'); } @font-face { - font-family: ScalySansRemake; - src: url('../../../fonts/5e/Scaly Sans Bold Italic.woff2'); - font-weight: bold; - font-style: italic; + font-family : "ScalySansRemake"; + font-style : italic; + font-weight : bold; + src : url('../../../fonts/5e/Scaly Sans Bold Italic.woff2'); } @font-face { - font-family: ScalySansSmallCapsRemake; - src: url('../../../fonts/5e/Scaly Sans Caps.woff2'); - font-weight: normal; - font-style: normal; + font-family : "ScalySansSmallCapsRemake"; + font-style : normal; + font-weight : normal; + src : url('../../../fonts/5e/Scaly Sans Caps.woff2'); } @font-face { - font-family: WalterTurncoat; - src: url('../../../fonts/5e/WalterTurncoat-Regular.woff2'); - font-weight: normal; - font-style: 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-style: 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-style: normal; - font-style: italic; + 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; - src: url('../../../fonts/5e/Nodesto Caps Condensed.woff2'); - font-weight: normal; - font-style: normal; + font-family : "NodestoCapsCondensed"; + font-style : normal; + font-weight : normal; + src : url('../../../fonts/5e/Nodesto Caps Condensed.woff2'); } @font-face { - font-family: NodestoCapsCondensed; - src: url('../../../fonts/5e/Nodesto Caps Condensed Bold.woff2'); - font-weight: bold; - font-style: normal; + font-family : "NodestoCapsCondensed"; + font-style : normal; + font-weight : bold; + src : url('../../../fonts/5e/Nodesto Caps Condensed Bold.woff2'); } @font-face { - font-family: NodestoCapsCondensed; - src: url('../../../fonts/5e/Nodesto Caps Condensed Italic.woff2'); - font-weight: normal; - font-style: italic; + font-family : "NodestoCapsCondensed"; + font-style : italic; + font-weight : normal; + 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-style: italic; + font-family : "NodestoCapsCondensed"; + font-style : italic; + font-weight : bold; + src : url('../../../fonts/5e/Nodesto Caps Condensed Bold Italic.woff2'); } @font-face { - font-family: NodestoCapsWide; - src: url('../../../fonts/5e/Nodesto Caps Wide.woff2'); - font-weight: normal; - font-style: normal + font-family : "NodestoCapsWide"; + font-style : normal; + font-weight : normal; + src : url('../../../fonts/5e/Nodesto Caps Wide.woff2'); } @font-face { - font-family: Overpass; - src: url('../../../fonts/5e/Overpass Medium.woff2'); - font-weight: 500; - font-style: normal; + font-family : "Overpass"; + font-style : normal; + font-weight : 500; + src : url('../../../fonts/5e/Overpass Medium.woff2'); } @font-face { - font-family: Davek; - src: url('../../../fonts/5e/Davek.woff2'); - font-weight: 500; - font-style: normal; + font-family : "Davek"; + font-style : normal; + font-weight : 500; + src : url('../../../fonts/5e/Davek.woff2'); } @font-face { - font-family: Iokharic; - src: url('../../../fonts/5e/Iokharic.woff2'); - font-weight: 500; - font-style: normal; + 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-style: normal; + font-family : "Rellanic"; + font-style : normal; + font-weight : 500; + src : url('../../../fonts/5e/Rellanic.woff2'); } diff --git a/themes/fonts/Blank/fonts.less b/themes/fonts/Blank/fonts.less index 4a3d2d1e8..6558c84b4 100644 --- a/themes/fonts/Blank/fonts.less +++ b/themes/fonts/Blank/fonts.less @@ -18,29 +18,29 @@ License: */ @font-face { - font-family: Pagella; - src: url('../../../fonts/Blank/texgyrepagella-regular.woff2'); - font-weight: normal; - font-style: normal; + font-family : "Pagella"; + font-style : normal; + font-weight : normal; + src : url('../../../fonts/Blank/texgyrepagella-regular.woff2'); } @font-face { - font-family: Pagella; - src: url('../../../fonts/Blank/texgyrepagella-bold.woff2'); - font-weight: bold; - font-style: normal; + font-family : "Pagella"; + font-style : normal; + font-weight : bold; + src : url('../../../fonts/Blank/texgyrepagella-bold.woff2'); } @font-face { - font-family: Pagella; - src: url('../../../fonts/Blank/texgyrepagella-italic.woff2'); - font-weight: normal; - font-style: italic; + font-family : "Pagella"; + font-style : italic; + font-weight : normal; + src : url('../../../fonts/Blank/texgyrepagella-italic.woff2'); } @font-face { - font-family: Pagella; - src: url('../../../fonts/Blank/texgyrepagella-bolditalic.woff2'); - font-weight: bold; - font-style: italic; + font-family : "Pagella"; + font-style : italic; + font-weight : bold; + src : url('../../../fonts/Blank/texgyrepagella-bolditalic.woff2'); } diff --git a/themes/fonts/Journal/fonts.less b/themes/fonts/Journal/fonts.less index 703b594ba..20190c651 100644 --- a/themes/fonts/Journal/fonts.less +++ b/themes/fonts/Journal/fonts.less @@ -1,58 +1,58 @@ /* Main Font, serif */ @font-face { - font-family: ReenieBeanie; - src: url('../../../fonts/Journal/ReenieBeanie-Regular.woff2'); - font-weight: normal; - font-style: 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-style: 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-style: 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-style: normal; + font-family : "FrederickaTheGreat"; + font-style : normal; + font-weight : normal; + src : url('../../../fonts/Journal/FrederickaTheGreat-Regular.woff2'); } /* Cover Page */ @font-face { - font-family: NodestoCapsCondensed; - src: url('../fonts/5e/Nodesto Caps Condensed.woff2'); - font-weight: normal; - font-style: normal; + font-family : "NodestoCapsCondensed"; + font-style : normal; + font-weight : normal; + src : url('../fonts/5e/Nodesto Caps Condensed.woff2'); } @font-face { - font-family: NodestoCapsCondensed; - src: url('../fonts/5e/Nodesto Caps Condensed Bold.woff2'); - font-weight: bold; - font-style: normal; + font-family : "NodestoCapsCondensed"; + font-style : normal; + font-weight : bold; + src : url('../fonts/5e/Nodesto Caps Condensed Bold.woff2'); } @font-face { - font-family: NodestoCapsCondensed; - src: url('../fonts/5e/Nodesto Caps Condensed Italic.woff2'); - font-weight: normal; - font-style: italic; + font-family : "NodestoCapsCondensed"; + font-style : italic; + font-weight : normal; + 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-style: italic; + font-family : "NodestoCapsCondensed"; + font-style : italic; + font-weight : bold; + src : url('../fonts/5e/Nodesto Caps Condensed Bold Italic.woff2'); } diff --git a/themes/fonts/iconFonts/diceFont.less b/themes/fonts/iconFonts/diceFont.less index ec80f132b..3b60093d0 100644 --- a/themes/fonts/iconFonts/diceFont.less +++ b/themes/fonts/iconFonts/diceFont.less @@ -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 =========== */ diff --git a/themes/fonts/iconFonts/fontAwesome.js b/themes/fonts/iconFonts/fontAwesome.js index f5f89e3aa..bf11a7c92 100644 --- a/themes/fonts/iconFonts/fontAwesome.js +++ b/themes/fonts/iconFonts/fontAwesome.js @@ -1,3 +1,5 @@ +/* eslint-disable max-lines */ + const fontAwesome = { // FONT-AWESOME SOLID 'fas_0' : 'fas fa-0', diff --git a/themes/phb.depricated.less b/themes/phb.depricated.less index 992dab35b..7cc574183 100644 --- a/themes/phb.depricated.less +++ b/themes/phb.depricated.less @@ -1,31 +1,31 @@ -.phb{ +.phb { //Double hr for full width elements - hr+hr+blockquote{ - column-span : all; + hr + hr + blockquote { -webkit-column-span : all; -moz-column-span : all; + column-span : all; } //***************************** // * CLASS TABLE // *****************************/ - hr+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; + h5 + hr + table { -webkit-column-span : all; -moz-column-span : all; + column-span : all; } } \ No newline at end of file