Update pr-check.yml

For users with many open PRs, creates a warning message in the PR description when opening a new PR, encouraging users to complete existing PRs before opening new ones.

.circleci/config.yml

@@ -64,6 +64,12 @@ jobs:
       - run:
           name: Test - Mustache Spans
           command: npm run test:mustache-syntax
+      - run:
+          name: Test - Definition Lists
+          command: npm run test:definition-lists
+      - run:
+          name: Test - Variables
+          command: npm run test:variables
       - run:
           name: Test - Routes
           command: npm run test:route

.github/workflows/limit-pull-requests.yml

@@ -0,0 +1,103 @@
+name: Limit pull requests
+description: >
+  Limit the number of open pull requests to the repository created by a user
+author: ZhongRuoyu (from Homebrew repository)
+branding:
+  icon: alert-triangle
+  color: yellow
+
+inputs:
+  token:
+    description: GitHub token
+    required: false
+    default: ${{ github.token }}
+  except-users:
+    description: The users exempted from the limit, one per line
+    required: false
+  # https://docs.github.com/en/graphql/reference/enums#commentauthorassociation
+  except-author-associations:
+    description: The author associations exempted from the limit, one per line
+    required: false
+  comment-limit:
+    description: >
+      Post the comment when the user's number of open pull requests exceeds this
+      number and `comment` is not empty
+    required: true
+    default: "10"
+  comment:
+    description: The comment to post when the limit is reached
+    required: false
+  close-limit:
+    description: >
+      Close the pull request when the user's number of open pull requests
+      exceeds this number and `close` is set to `true`
+    required: true
+    default: "50"
+  close:
+    description: Whether to close the pull request when the limit is reached
+    required: true
+    default: "false"
+
+runs:
+  using: composite
+  steps:
+    - name: Check the number of pull requests
+      id: count-pull-requests
+      run: |
+        # If the user is exempted, assume they have no pull requests.
+        if grep -Fiqx '${{ github.actor }}' <<<"$EXCEPT_USERS"; then
+          echo "::notice::@${{ github.actor }} is exempted from the limit."
+          echo "count=0" >>"$GITHUB_OUTPUT"
+          exit 0
+        fi
+        if grep -Fiqx '${{ github.event.pull_request.author_association }}' <<<"$EXCEPT_AUTHOR_ASSOCIATIONS"; then
+          echo "::notice::@{{ github.actor }} is a ${{ github.event.pull_request.author_association }} exempted from the limit."
+          echo "count=0" >>"$GITHUB_OUTPUT"
+          exit 0
+        fi
+
+        count="$(
+          gh api \
+            --method GET \
+            --header 'Accept: application/vnd.github+json' \
+            --header 'X-GitHub-Api-Version: 2022-11-28' \
+            --field state=open \
+            --paginate \
+            '/repos/{owner}/{repo}/pulls' |
+            jq \
+              --raw-output \
+              --arg USER '${{ github.actor }}' \
+              'map(select(.user.login == $USER)) | length'
+        )"
+        echo "::notice::@${{ github.actor }} has $count open pull request(s)."
+        echo "count=$count" >>"$GITHUB_OUTPUT"
+      env:
+        GH_REPO: ${{ github.repository }}
+        GH_TOKEN: ${{ inputs.token }}
+        EXCEPT_USERS: ${{ inputs.except-users }}
+        EXCEPT_AUTHOR_ASSOCIATIONS: ${{ inputs.except-author-associations }}
+      shell: bash
+
+    - name: Comment on pull request
+      if: >
+        fromJSON(steps.count-pull-requests.outputs.count) > fromJSON(inputs.comment-limit) &&
+        inputs.comment != ''
+      run: |
+        gh pr comment '${{ github.event.pull_request.number }}' \
+          --body="${COMMENT_BODY}"
+      env:
+        GH_REPO: ${{ github.repository }}
+        GH_TOKEN: ${{ inputs.token }}
+        COMMENT_BODY: ${{ inputs.comment }}
+      shell: bash
+
+    - name: Close pull request
+      if: >
+        fromJSON(steps.count-pull-requests.outputs.count) > fromJSON(inputs.close-limit) &&
+        inputs.close == 'true'
+      run: |
+        gh pr close '${{ github.event.pull_request.number }}'
+      env:
+        GH_REPO: ${{ github.repository }}
+        GH_TOKEN: ${{ inputs.token }}
+      shell: bash

.github/workflows/pr-check.yml

@@ -0,0 +1,25 @@
+name: PR Check
+on: pull_request_target
+env:
+  GH_REPO: ${{ github.repository }}
+  GH_NO_UPDATE_NOTIFIER: 1
+  GH_PROMPT_DISABLED: 1
+permissions:
+  contents: read
+  issues: write
+  pull-requests: write
+  statuses: write
+jobs:
+  limit-pull-requests:
+    if: always() && github.repository_owner == 'Homebrew'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: Homebrew/actions/limit-pull-requests@master
+        with:
+          except-users: |
+            dependabot
+          comment-limit: 1
+          comment: |
+            Hi, thanks for your contribution to the Homebrewery! You already have >=3 open pull requests. Consider completing some of your existing PRs before opening new ones. Thanks!
+          close-limit: 5
+          close: false

changelog.md

@@ -84,7 +84,70 @@ pre {
 ## changelog
 For a full record of development, visit our [Github Page](https://github.com/naturalcrit/homebrewery).
 
-### Wednesday 21/2/2024 - v3.11.0
+### Monday 18/3/2024 - v3.12.0
+{{taskList
+
+##### 5e-Cleric
+
+* [x] Fix language-specific hyphenation on print page
+
+Fixes issue [#3294](https://github.com/naturalcrit/homebrewery/issues/3294)
+
+* [x] Upgrade Font-Awesome to v6.51
+
+* [x] Allow downloaded files to be uploaded via {{openSans **NEW {{fa,fa-plus-square}} → FROM UPLOAD {{fa,fa-upload}}**}}
+
+##### G-Ambatte
+
+* [x] Fix an edge case crash with empty documents
+
+Fixes issue [#3315](https://github.com/naturalcrit/homebrewery/issues/3315)
+
+* [x] Brews on the user page can be searched by tag; clicking a tag adds it to the filter
+
+Fixes issue [#3164](https://github.com/naturalcrit/homebrewery/issues/3164)
+
+* [x] Add *DiceFont* icons {{df,d20-20}} `{{df,icon-name}}`
+
+##### abquintic
+
+* [x] Fix ^super^ and ^^sub^^ highlighting in the text editor
+
+* [x] Add new syntax for multiline Definition Lists:
+
+
+```
+Term
+::Definition 1
+::Definition 2
+with more text
+```
+
+produces:
+
+Term
+::Definition 1
+::Definition 2
+with more text
+
+Fixes issue [#2340](https://github.com/naturalcrit/homebrewery/issues/2340)
+
+##### RKuerten :
+* [x] Fix monster stat block backgrounds on print page
+
+Fixes issue [#3275](https://github.com/naturalcrit/homebrewery/issues/3275)
+
+* [x] Added new text editor theme: "Darkvision".
+
+##### calculuschild, G-Ambatte, 5e-Cleric
+
+* [x] Codebase and UI cleanup
+}}
+
+\page
+
+
+### Friday 21/2/2024 - v3.11.0
 {{taskList
 
 ##### Gazook89
@@ -166,14 +229,16 @@ Fixes issue [1488](https://github.com/naturalcrit/homebrewery/issues/1488)
 Fixes issues [2510](https://github.com/naturalcrit/homebrewery/issues/2510),
 [2975](https://github.com/naturalcrit/homebrewery/issues/2975)
 
-* [x] New Variables syntax. See below for details.
+* [x] Brew Variables
 }}
 
+\
+
 {{wide
 
 ### Brew Variable Syntax
 
-You may already be familiar with `[link](url)` and `![image](url)` syntax. We have expanded this to include a third `$[variable](text)` syntax. All three of these syntaxes now share a common set of features:
+You may already be familiar with `[link](url)` and `![image](url)` synax. We have expanded this to include a third `$[variable](text)` syntax. All three of these syntaxes now share a common set of features:
 
 {{varSyntaxTable
 | syntax | description |
@@ -1512,7 +1577,7 @@ myStyle {color: black}
 ### Sunday, 29/05/2016 - v2.1.0
 - Finally added a syntax for doing spell lists. A bit in-depth about why this took so long. Essentially I'm running out of syntax to use in stardard Markdown. There are too many unique elements in the PHB-style to be mapped. I solved this earlier by stacking certain elements together (eg. an `<hr>` before a `blockquote` turns it into moster state block), but those are getting unweildly. I would like to simply wrap these in `div`s with classes, but unfortunately Markdown stops processing when within HTML blocks. To get around this I wrote my own override to the Markdown parser and lexer to process Markdown within a simple div class wrapper. This should open the door for more unique syntaxes in the future. Big step!
 - Override Ctrl+P (and cmd+P) to launch to the print page. Many people try to just print either the editing or share page to get a PDF. While this dones;t make much sense, I do get a ton of issues about it. So now if you try to do this, it'll just bring you imediately to the print page. Everybody wins!
-- The onboarding flow has also been confusing a few users (Homepage -> new -> save -> edit page). If you edit the Homepage text now, a Call to Action to save your work will pop-up.
+- The onboarding flow has also been confusing a few users (Homepage → new → save → edit page). If you edit the Homepage text now, a Call to Action to save your work will pop-up.
 - Added a 'Recently Edited' and 'Recently Viewed' nav item to the edit and share page respectively. Each will remember the last 8 items you edited or viewed and when you viewed it. Makes use of the new title attribute of brews to easy navigatation.
 - Paragraphs now indent properly after lists (thanks u/slitjen!)
 

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -20,9 +20,9 @@ const PAGE_HEIGHT = 1056;
 
 const INITIAL_CONTENT = dedent`
 	<!DOCTYPE html><html><head>
-	<link href="//use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
+	<link href="//use.fontawesome.com/releases/v6.5.1/css/all.css" rel="stylesheet" type="text/css" />
 	<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
-	<link href='/homebrew/bundle.css' rel='stylesheet' />
+	<link href='/homebrew/bundle.css' type="text/css" rel='stylesheet' />
 	<base target=_blank>
 	</head><body style='overflow: hidden'><div></div></body></html>`;
 
@@ -104,8 +104,9 @@ const BrewRenderer = (props)=>{
 
 	const sanitizeScriptTags = (content)=>{
 		return content
-			.replace(/<script/ig, '&lt;script')
-			.replace(/<\/script>/ig, '&lt;/script&gt;');
+			?.replace(/<script/ig, '&lt;script')
+			.replace(/<\/script>/ig, '&lt;/script&gt;')
+			|| '';
 	};
 
 	const renderPageInfo = ()=>{
@@ -210,11 +211,11 @@ const BrewRenderer = (props)=>{
 						<RenderWarnings />
 						<NotificationPopup />
 					</div>
-					<link href={`/themes/${rendererPath}/Blank/style.css`} rel='stylesheet'/>
+					<link href={`/themes/${rendererPath}/Blank/style.css`} type="text/css" rel='stylesheet'/>
 					{baseThemePath &&
-						<link href={`/themes/${rendererPath}/${baseThemePath}/style.css`} rel='stylesheet'/>
+						<link href={`/themes/${rendererPath}/${baseThemePath}/style.css`} type="text/css" rel='stylesheet'/>
 					}
-					<link href={`/themes/${rendererPath}/${themePath}/style.css`} rel='stylesheet'/>
+					<link href={`/themes/${rendererPath}/${themePath}/style.css`} type="text/css" rel='stylesheet'/>
 
 					{/* Apply CSS from Style tab and render pages from Markdown tab */}
 					{state.isMounted

client/homebrew/brewRenderer/brewRenderer.less

@@ -14,6 +14,28 @@
 			box-shadow    : 1px 4px 14px #000000;
 		}
 	}
+
+	&::-webkit-scrollbar {
+		width: 20px;
+		&:horizontal{
+			height: 20px;
+			width:auto;
+		}
+		&-thumb {
+			background: linear-gradient(90deg, #d3c1af 15px, #00000000 15px);
+			&:horizontal{
+				background: linear-gradient(0deg, #d3c1af 15px, #00000000 15px);
+			}
+		}
+		&-corner {
+			visibility: hidden;
+		}
+	}
+	
+
+
+
+
 }
 .pane { position : relative; }
 .pageInfo {

client/homebrew/editor/editor.jsx

@@ -81,7 +81,7 @@ const Editor = createClass({
 	updateEditorSize : function() {
 		if(this.refs.codeEditor) {
 			let paneHeight = this.refs.main.parentNode.clientHeight;
-			paneHeight -= SNIPPETBAR_HEIGHT + 1;
+			paneHeight -= SNIPPETBAR_HEIGHT;
 			this.refs.codeEditor.codeMirror.setSize(null, paneHeight);
 		}
 	},
@@ -151,30 +151,37 @@ const Editor = createClass({
 
 						// definition lists
 						if(line.includes('::')){
-							const regex = /^([^\n]*?)::([^\n]*)(?:\n|$)/ym;
+							if(/^:*$/.test(line) == true){ return };
+							const regex = /^([^\n]*?:?\s?)(::[^\n]*)(?:\n|$)/ymd;  // the `d` flag, for match indices, throws an ESLint error.
 							let match;
 							while ((match = regex.exec(line)) != null){
-								codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[0]) }, { line: lineNumber, ch: line.indexOf(match[0]) + match[0].length }, { className: 'define' });
-								codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[1]) }, { line: lineNumber, ch: line.indexOf(match[1]) + match[1].length }, { className: 'term' });
-								codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[2]) }, { line: lineNumber, ch: line.indexOf(match[2]) + match[2].length }, { className: 'definition' });
+								codeMirror.markText({ line: lineNumber, ch: match.indices[0][0] }, { line: lineNumber, ch: match.indices[0][1] }, { className: 'dl-highlight' });
+								codeMirror.markText({ line: lineNumber, ch: match.indices[1][0] }, { line: lineNumber, ch: match.indices[1][1] }, { className: 'dt-highlight' });
+								codeMirror.markText({ line: lineNumber, ch: match.indices[2][0] }, { line: lineNumber, ch: match.indices[2][1] }, { className: 'dd-highlight' });
+								const ddIndex = match.indices[2][0];
+								let colons = /::/g;
+								let colonMatches = colons.exec(match[2]);
+								if(colonMatches !== null){
+									codeMirror.markText({ line: lineNumber, ch: colonMatches.index + ddIndex }, { line: lineNumber, ch: colonMatches.index + colonMatches[0].length + ddIndex }, { className: 'dl-colon-highlight'} )
+								}
 							}
 						}
 
-						// Superscript
-						if(line.includes('\^')) {
-							const regex = /\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^/g;
-							let match;
-							while ((match = regex.exec(line)) != null) {
-								codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[1]) - 1 }, { line: lineNumber, ch: line.indexOf(match[1]) + match[1].length + 1 }, { className: 'superscript' });
-							}
-						}
-
-						// Subscript
-						if(line.includes('^^')) {
-							const regex = /\^\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^\^/g;
-							let match;
-							while ((match = regex.exec(line)) != null) {
-								codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[1]) - 2 }, { line: lineNumber, ch: line.indexOf(match[1]) + match[1].length + 2 }, { className: 'subscript' });
+						// Subscript & Superscript
+						if(line.includes('^')) {
+							let startIndex = line.indexOf('^');
+							const superRegex = /\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^/gy;
+							const subRegex   = /\^\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^\^/gy;
+							
+							while (startIndex >= 0) {
+								superRegex.lastIndex = subRegex.lastIndex = startIndex;
+								let isSuper = false;
+								let match = subRegex.exec(line) || superRegex.exec(line);
+								if (match) {
+									isSuper = !subRegex.lastIndex;
+									codeMirror.markText({ line: lineNumber, ch: match.index }, { line: lineNumber, ch: match.index + match[0].length }, { className: isSuper ? 'superscript' : 'subscript' });
+								}
+								startIndex = line.indexOf('^', Math.max(startIndex + 1, subRegex.lastIndex, superRegex.lastIndex));
 							}
 						}
 

client/homebrew/editor/editor.less

@@ -55,6 +55,16 @@
 			vertical-align : sub;
 			font-size      : 0.9em;
 		}
+		.dl-highlight {
+			&.dl-colon-highlight {
+				font-weight   : bold;
+				color         : #949494;
+				background    : #E5E5E5;
+				border-radius : 3px;
+			}
+			&.dt-highlight { color : rgb(96, 117, 143); }
+			&.dd-highlight { color : rgb(97, 57, 178); }
+		}		
 	}
 
 	.brewJump {

client/homebrew/editor/snippetbar/snippetbar.less

@@ -130,6 +130,8 @@
 					height       : 1.2em;
 					margin-right : 8px;
 					font-size    : 1.2em;
+					min-width: 25px;
+					text-align: center;
 					& ~ i {
 						margin-right : 0;
 						margin-left  : 5px;
@@ -138,7 +140,7 @@
 					&.font {
 						height : auto;
 						&::before {
-							font-size : 1.4em;
+							font-size : 1em;
 							content   : 'ABC';
 						}
 

client/homebrew/homebrew.jsx

@@ -76,7 +76,7 @@ const Homebrew = createClass({
 						<Route path='/print' element={<WithRoute el={PrintPage} />} />
 						<Route path='/changelog' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
 						<Route path='/faq' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
-						<Route path='/account' element={<WithRoute el={AccountPage} brew={this.props.brew} uiItems={this.props.brew.uiItems} />} />
+						<Route path='/account' element={<WithRoute el={AccountPage} brew={this.props.brew} accountDetails={this.props.brew.accountDetails} />} />
 						<Route path='/legacy' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
 						<Route path='/error' element={<WithRoute el={ErrorPage} brew={this.props.brew} />} />
 					  	<Route path='/' element={<WithRoute el={HomePage} brew={this.props.brew} />} />

client/homebrew/homebrew.less

@@ -15,6 +15,23 @@
 		}
 		&.listPage .content {
 			overflow-y : scroll;
+
+			&::-webkit-scrollbar {
+				width: 20px;
+				&:horizontal{
+					height: 20px;
+					width:auto;
+				}
+				&-thumb {
+					background: linear-gradient(90deg, #d3c1af 15px, #00000000 15px);
+					&:horizontal{
+						background: linear-gradient(0deg, #d3c1af 15px, #00000000 15px);
+					}
+				}
+				&-corner {
+					visibility: hidden;
+				}
+			}
 		}
 	}
 }

client/homebrew/navbar/navbar.less

@@ -1,272 +1,351 @@
-@import "naturalcrit/styles/colors.less";
-@navbarHeight : 28px;
-@keyframes pinkColoring {
-  0%   {color : pink;}
-  50%  {color : pink;}
-  75%  {color : red;}
-  100% {color : pink;}
-}
-.homebrew nav {
-	.homebrewLogo {
-		.animate(color);
-		font-family : CodeBold;
-		font-size   : 12px;
-		color       : white;
-		div {
-			margin-top    : 2px;
-			margin-bottom : -2px;
-		}
-		&:hover {
-			color : @blue;
-		}
-	}
-	.editTitle.navItem {
-		padding : 2px 12px;
-		input {
-			font-family      : "Open Sans", sans-serif;
-			font-size        : 12px;
-			font-weight      : 800;
-			width            : 250px;
-			margin           : 0;
-			padding          : 2px;
-			text-align       : center;
-			color            : white;
-			border           : 1px solid @blue;
-			outline          : none;
-			background-color : transparent;
-		}
-		.charCount {
-			display        : inline-block;
-			margin-left    : 8px;
-			text-align     : right;
-			vertical-align : bottom;
-			color          : #666;
-			&.max {
-				color : @red;
-			}
-		}
-	}
-	.brewTitle.navItem {
-		font-size        : 12px;
-		font-weight      : 800;
-		height           : 100%;
-		text-align       : center;
-		text-transform   : initial;
-		color            : white;
-		background-color : transparent;
-		flex-grow        : 1;
-	}
-	.save-menu {
-		.dropdown {
-			z-index : 1000;
-		}
-		.navItem i.fa-power-off {
-			color : red;
-			&.active {
-				color  : rgb(0, 182, 52);
-				filter : drop-shadow(0 0 2px rgba(0, 182, 52, 0.765));
-			}
-		}
-	}
-	.patreon.navItem {
-		border-right : 1px solid #666;
-		border-left  : 1px solid #666;
-		&:hover i {
-			color : red;
-		}
-		i {
-			.animate(color);
-			animation-name     : pinkColoring;
-			animation-duration : 2s;
-			color              : pink;
-		}
-	}
-	.recent.navDropdownContainer {
-		position : relative;
-		.navDropdown .navItem {
-			overflow        : hidden auto;
-			max-height      : ~"calc(100vh - 28px)";
-			scrollbar-color : #666 #333;
-			scrollbar-width : thin;
-			
+@import 'naturalcrit/styles/colors.less';
 
-			#backgroundColorsHover;
-			.animate(background-color);
-			position         : relative;
-			display          : block;
-			overflow         : clip;
-			box-sizing       : border-box;
-			padding          : 8px 5px 13px;
-			text-decoration  : none;
-			color            : white;
-			border-top       : 1px solid #888;
-			background-color : #333;
-			.clear {
-				position         : absolute;
-				top              : 50%;
-				right            : 0;
-				display          : none;
-				width            : 20px;
-				height           : 100%;
-				transform        : translateY(-50%);
-				opacity          : 70%;
-				border-radius    : 3px;
-				background-color : #333;
-				&:hover {
-					opacity : 100%;
-				}
-				i {
-					font-size  : 10px;
-					width      : 100%;
-					height     : 100%;
-					margin     : 0;
-					text-align : center;
-				}
-			}
-			&:hover {
-				background-color : @blue;
-				.clear {
-					display       : grid;
-					place-content : center;
-				}
-			}
-			.title {
-				display       : inline-block;
-				overflow      : hidden;
-				width         : 100%;
-				white-space   : nowrap;
-				text-overflow : ellipsis;
-			}
-			.time {
-				font-size : 0.7em;
-				position  : absolute;
-				right     : 2px;
-				bottom    : 2px;
-				color     : #888;
-			}
-			&.header {
-				display          : block;
-				box-sizing       : border-box;
-				padding          : 5px 0;
-				text-align       : center;
-				color            : #BBB;
-				border-top       : 1px solid #888;
-				background-color : #333;
-				&:nth-of-type(1) {
-					background-color : darken(@teal, 20%);
-				}
-				&:nth-of-type(2) {
-					background-color : darken(@purple, 30%);
-				}
-			}
-		}
+@navbarHeight : 28px;
+
+@keyframes pinkColoring {
+	0% { color : pink; }
+	50% { color : pink; }
+	75% { color : red; }
+	100% { color : pink; }
+}
+
+@keyframes glideDropDown {
+	0% {
+		background-color : #333333;
+		opacity          : 0;
+		transform        : translate(0px, -100%);
 	}
-	.metadata.navItem {
-		position    : relative;
+	100% {
+		background-color : #333333;
+		opacity          : 1;
+		transform        : translate(0px, 0px);
+	}
+}
+
+.homebrew nav {
+	background-color : #333333;
+	.navContent {
+		position        : relative;
+		z-index         : 2;
+		display         : flex;
+		justify-content : space-between;
+	}
+	.navSection {
 		display     : flex;
 		align-items : center;
-		height      : 100%;
-		padding     : 0;
-		flex-grow   : 1;
-		i {
-			margin-right : 10px;
+		&:last-child .navItem { border-left : 1px solid #666666; }
+	}
+	// "NaturalCrit" logo
+	.navLogo {
+		display         : block;
+		margin-top      : 0px;
+		margin-right    : 8px;
+		margin-left     : 8px;
+		color           : white;
+		text-decoration : none;
+		&:hover {
+			.name { color : @orange; }
+			svg { fill : @orange; }
 		}
-		.window {
-			position         : absolute;
-			z-index          : -1;
-			bottom           : 0;
-			left             : 50%;
-			display          : flex;
-			justify-content  : flex-start;
-			width            : 440px;
-			max-height       : ~"calc(100vh - 28px)";
-			margin           : 0 auto;
-			padding          : 0 10px 5px;
-			transition       : transform 0.4s, opacity 0.4s;
-			border           : 3px solid #444;
-			border-top       : unset;
-			border-radius    : 0 0 5px 5px;
-			background-color : #333;
-			box-shadow       : inset 0 7px 9px -7px #111;
-			flex-flow        : row wrap;
-			align-content    : baseline;
-			&.active {
-				transform : translateX(-50%) translateY(100%);
-				opacity   : 1;
+		svg {
+			height       : 13px;
+			margin-right : 0.2em;
+			cursor       : pointer;
+			fill         : white;
+		}
+		span.name {
+			font-family : 'CodeLight';
+			font-size   : 15px;
+			span.crit { font-family : 'CodeBold'; }
+			small {
+				font-family    : 'Open Sans';
+				font-size      : 0.3em;
+				font-weight    : 800;
+				text-transform : uppercase;
 			}
-			&.inactive {
-				transform : translateX(-50%) translateY(0%);
-				opacity   : 0;
+		}
+	}
+	.navItem {
+		#backgroundColorsHover;
+		.animate(background-color);
+		padding          : 8px 12px;
+		font-size        : 10px;
+		font-weight      : 800;
+		line-height      : 13px;
+		color            : white;
+		text-decoration  : none;
+		text-transform   : uppercase;
+		cursor           : pointer;
+		background-color : #333333;
+		i {
+			float       : right;
+			margin-left : 5px;
+			font-size   : 13px;
+		}
+		&.patreon {
+			border-right : 1px solid #666666;
+			border-left  : 1px solid #666666;
+			&:hover i { color : red; }
+			i {
+				color              : pink;
+				.animate(color);
+				animation-name     : pinkColoring;
+				animation-duration : 2s;
 			}
-			.row {
-				display   : flex;
-				width     : 100%;
-				flex-flow : row wrap;
-				h4 {
-					display    : block;
-					box-sizing : border-box;
-					min-width  : 76px;
-					padding    : 5px 0;
-					text-align : center;
-					color      : #BBB;
-					flex-basis : 20%;
-					flex-grow  : 1;
+		}
+		&.editTitle {  // this is not needed at all currently - you used to be able to edit the title via the navbar.
+			padding : 2px 12px;
+			input {
+				width            : 250px;
+				padding          : 2px;
+				margin           : 0;
+				font-family      : 'Open Sans', sans-serif;
+				font-size        : 12px;
+				font-weight      : 800;
+				color            : white;
+				text-align       : center;
+				background-color : transparent;
+				border           : 1px solid @blue;
+				outline          : none;
+			}
+			.charCount {
+				display        : inline-block;
+				margin-left    : 8px;
+				color          : #666666;
+				text-align     : right;
+				vertical-align : bottom;
+				&.max { color : @red; }
+			}
+		}
+		&.brewTitle {
+			flex-grow        : 1;
+			font-size        : 12px;
+			font-weight      : 800;
+			color            : white;
+			text-align       : center;
+			text-transform   : initial;
+			background-color : transparent;
+		}
+		// "The Homebrewery" logo
+		&.homebrewLogo {
+			.animate(color);
+			font-family : 'CodeBold';
+			font-size   : 12px;
+			color       : white;
+			div {
+				margin-top    : 2px;
+				margin-bottom : -2px;
+			}
+			&:hover { color : @blue; }
+		}
+		&.metadata {
+			position    : relative;
+			display     : flex;
+			flex-grow   : 1;
+			align-items : center;
+			height      : 100%;
+			padding     : 0;
+			i { margin-right : 10px;}
+			.window {
+				position         : absolute;
+				bottom           : 0;
+				left             : 50%;
+				z-index          : -1;
+				display          : flex;
+				flex-flow        : row wrap;
+				align-content    : baseline;
+				justify-content  : flex-start;
+				width            : 440px;
+				max-height       : ~'calc(100vh - 28px)';
+				padding          : 0 10px 5px;
+				margin           : 0 auto;
+				background-color : #333333;
+				border           : 3px solid #444444;
+				border-top       : unset;
+				border-radius    : 0 0 5px 5px;
+				box-shadow       : inset 0 7px 9px -7px #111111;
+				transition       : transform 0.4s, opacity 0.4s;
+				&.active {
+					opacity   : 1;
+					transform : translateX(-50%) translateY(100%);
 				}
-				p {
-					font-family    : "Open Sans", sans-serif;
-					font-size      : 10px;
-					font-weight    : normal;
-					padding        : 5px 0;
-					text-transform : initial;
-					flex-basis     : 80%;
-					flex-grow      : 1;
-					.tag {
-						display          : inline-block;
-						margin           : 2px 2px;
-						padding          : 2px;
-						border           : 2px solid grey;
-						border-radius    : 5px;
-						background-color : #444;
+				&.inactive {
+					opacity   : 0;
+					transform : translateX(-50%) translateY(0%);
+				}
+				.row {
+					display   : flex;
+					flex-flow : row wrap;
+					width     : 100%;
+					h4 {
+						box-sizing : border-box;
+						display    : block;
+						flex-basis : 20%;
+						flex-grow  : 1;
+						min-width  : 76px;
+						padding    : 5px 0;
+						color      : #BBBBBB;
+						text-align : center;
 					}
-					a.userPageLink {
-						text-decoration : none;
-						color           : white;
-						&:hover {
-							text-decoration : underline;
+					p {
+						flex-basis     : 80%;
+						flex-grow      : 1;
+						padding        : 5px 0;
+						font-family    : 'Open Sans', sans-serif;
+						font-size      : 10px;
+						font-weight    : normal;
+						text-transform : initial;
+						.tag {
+							display          : inline-block;
+							padding          : 2px;
+							margin           : 2px 2px;
+							background-color : #444444;
+							border           : 2px solid grey;
+							border-radius    : 5px;
+						}
+						a.userPageLink {
+							color           : white;
+							text-decoration : none;
+							&:hover { text-decoration : underline; }
 						}
 					}
+					&:nth-of-type(even) { background-color : #555555; }
 				}
-				&:nth-of-type(even) {
-					background-color : #555;
+			}
+		}
+		&.warning {
+			position         : relative;
+			color            : white;
+			background-color : @orange;
+			&:hover > .dropdown { visibility : visible; }
+			.dropdown {
+				position         : absolute;
+				top              : 28px;
+				left             : 0;
+				z-index          : 10000;
+				box-sizing       : border-box;
+				display          : block;
+				width            : 100%;
+				padding          : 13px 5px;
+				text-align       : center;
+				visibility       : hidden;
+				background-color : #333333;
+			}
+		}
+		&.account {
+			min-width : 100px;
+			&.username { text-transform : none;}
+		}
+	}
+	.navDropdownContainer {
+		position : relative;
+		.navDropdown {
+			position: absolute;
+			top: 28px;
+			right: 0px;
+			z-index: 10000;
+			width: max-content;
+			min-width:100%;
+			max-height: calc(100vh - 28px);
+			overflow: hidden auto;
+			display: flex;
+			flex-direction: column;
+			align-items: flex-end;
+			.navItem {
+				position           : relative;
+				display            : flex;
+				justify-content    : space-between;
+				align-items        : center;
+				width              : 100%;
+				border             : 1px solid #888888;
+				border-bottom      : 0;
+				animation-name     : glideDropDown;
+				animation-duration : 0.4s;
+			}
+		}
+		&.recent {
+			position : relative;
+			.navDropdown .navItem {
+				#backgroundColorsHover;
+				.animate(background-color);
+				position         : relative;
+				box-sizing       : border-box;
+				display          : block;
+				max-width        : 15em;
+				max-height       : ~'calc(100vh - 28px)';			
+				padding          : 8px 5px 13px;
+				overflow         : hidden auto;
+				color            : white;
+				text-decoration  : none;
+				background-color : #333333;
+				border-top       : 1px solid #888888;
+				scrollbar-color  : #666666 #333333;
+				scrollbar-width  : thin;
+				.clear {
+					position         : absolute;
+					top              : 50%;
+					right            : 0;
+					display          : none;
+					width            : 20px;
+					height           : 100%;
+					background-color : #333333;
+					border-radius    : 3px;
+					opacity          : 70%;
+					transform        : translateY(-50%);
+					&:hover { opacity : 100%; }
+					i {
+						width      : 100%;
+						height     : 100%;
+						margin     : 0;
+						font-size  : 10px;
+						text-align : center;
+					}
+				}
+				&:hover {
+					background-color : @blue;
+					.clear {
+						display       : grid;
+						place-content : center;
+					}
+				}
+				.title {
+					display       : inline-block;
+					width         : 100%;
+					overflow      : hidden auto;
+					text-overflow : ellipsis;
+					white-space   : nowrap;
+				}
+				.time {
+					position  : absolute;
+					right     : 2px;
+					bottom    : 2px;
+					font-size : 0.7em;
+					color     : #888888;
+				}
+				&.header {
+					box-sizing       : border-box;
+					display          : block;
+					padding          : 5px 0;
+					color            : #BBBBBB;
+					text-align       : center;
+					background-color : #333333;
+					border-top       : 1px solid #888888;
+					&:nth-of-type(1) { background-color : darken(@teal, 20%); }
+					&:nth-of-type(2) { background-color : darken(@purple, 30%); }
 				}
 			}
 		}
 	}
-	.warning.navItem {
-		position         : relative;
-		color            : white;
-		background-color : @orange;
-		&:hover > .dropdown {
-			visibility : visible;
+}
+
+// this should likely be refactored into .navDropdownContainer
+.save-menu {
+	.dropdown { z-index : 1000; }
+	.navItem i.fa-power-off {
+		color : red;
+		&.active {
+			color  : rgb(0, 182, 52);
+			filter : drop-shadow(0 0 2px rgba(0, 182, 52, 0.765));
 		}
-		.dropdown {
-			position         : absolute;
-			z-index          : 10000;
-			top              : 28px;
-			left             : 0;
-			display          : block;
-			visibility       : hidden;
-			box-sizing       : border-box;
-			width            : 100%;
-			padding          : 13px 5px;
-			text-align       : center;
-			background-color : #333;
-		}
-	}
-	.account.navItem {
-		min-width : 100px;
-	}
-	.account.username.navItem {
-		text-transform : none;
 	}
 }

client/homebrew/navbar/newbrew.navitem.jsx

@@ -1,12 +1,64 @@
 const React = require('react');
+const _ = require('lodash');
 const Nav = require('naturalcrit/nav/nav.jsx');
+const { splitTextStyleAndMetadata } = require('../../../shared/helpers.js'); // Importing the function from helpers.js
 
-module.exports = function(props){
-	return <Nav.item
-		href='/new'
-		newTab={true}
-		color='purple'
-		icon='fas fa-plus-square'>
-		new
-	</Nav.item>;
+const BREWKEY  = 'homebrewery-new';
+const STYLEKEY = 'homebrewery-new-style';
+const METAKEY  = 'homebrewery-new-meta';
+
+const NewBrew = () => {   
+    const handleFileChange = (e) => {
+        const file = e.target.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                const fileContent = e.target.result;
+                const newBrew = {
+                    text: fileContent,
+                    style: ''
+                };
+                if(fileContent.startsWith('```metadata')) {
+                    splitTextStyleAndMetadata(newBrew); // Modify newBrew directly
+                    localStorage.setItem(BREWKEY, newBrew.text);
+                    localStorage.setItem(STYLEKEY, newBrew.style);
+                    localStorage.setItem(METAKEY, JSON.stringify(_.pick(newBrew, ['title', 'description', 'tags', 'systems', 'renderer', 'theme', 'lang'])));
+                    window.location.href = '/new';
+                } else {
+                    alert('This file is invalid, please, enter a valid file');
+                }
+            };
+            reader.readAsText(file);
+        }
+    };
+
+    return (
+        <Nav.dropdown>
+            <Nav.item
+                className='new'
+                color='purple'
+                icon='fa-solid fa-plus-square'>
+                new
+            </Nav.item>
+            <Nav.item
+                className='fromBlank'
+                href='/new'
+                newTab={true}
+                color='purple'
+                icon='fa-solid fa-file'>
+                from blank
+            </Nav.item>
+
+            <Nav.item
+                className='fromFile'
+                color='purple'
+                icon='fa-solid fa-upload'
+                onClick={() => { document.getElementById('uploadTxt').click(); }}>
+                <input id="uploadTxt" className='newFromLocal' type="file" onChange={handleFileChange} style={{ display: 'none' }} />
+                from file
+            </Nav.item>
+        </Nav.dropdown>
+    );
 };
+
+module.exports = NewBrew;

client/homebrew/pages/accountPage/accountPage.jsx

@@ -1,102 +1,82 @@
-const React = require('react');
-const createClass = require('create-react-class');
-const _     = require('lodash');
-const cx    = require('classnames');
+const React  = require('react');
 const moment = require('moment');
-
 const UIPage = require('../basePages/uiPage/uiPage.jsx');
-
-const Nav = require('naturalcrit/nav/nav.jsx');
-const Navbar = require('../../navbar/navbar.jsx');
-
-const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
-const Account = require('../../navbar/account.navitem.jsx');
-const NewBrew = require('../../navbar/newbrew.navitem.jsx');
-const HelpNavItem = require('../../navbar/help.navitem.jsx');
-
 const NaturalCritIcon = require('naturalcrit/svg/naturalcrit.svg.jsx');
 
 let SAVEKEY = '';
 
-const AccountPage = createClass({
-	displayName     : 'AccountPage',
-	getDefaultProps : function() {
-		return {
-			brew    : {},
-			uiItems : {}
-		};
-	},
-	getInitialState : function() {
-		return {
-			uiItems : this.props.uiItems
-		};
-	},
-	componentDidMount : function(){
-		if(!this.state.saveLocation && this.props.uiItems.username) {
-			SAVEKEY = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${this.props.uiItems.username}`;
-			let saveLocation =  window.localStorage.getItem(SAVEKEY);
-			saveLocation = saveLocation ?? (this.state.uiItems.googleId ? 'GOOGLE-DRIVE' : 'HOMEBREWERY');
-			this.makeActive(saveLocation);
+const AccountPage = (props)=>{
+	// destructure props and set state for save location
+	const { accountDetails, brew } = props;
+	const [saveLocation, setSaveLocation] = React.useState('');
+
+	// initialize save location from local storage based on user id
+	React.useEffect(()=>{
+		if(!saveLocation && accountDetails.username) {
+			SAVEKEY = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${accountDetails.username}`;
+			// if no SAVEKEY in local storage, default save location to Google Drive if user has Google account.
+			let saveLocation = window.localStorage.getItem(SAVEKEY);
+			saveLocation = saveLocation ?? (accountDetails.googleId ? 'GOOGLE-DRIVE' : 'HOMEBREWERY');
+			setActiveSaveLocation(saveLocation);
 		}
-	},
+	}, []);
 
-	makeActive : function(newSelection){
-		if(this.state.saveLocation == newSelection) return;
+	const setActiveSaveLocation = (newSelection)=>{
+		if(saveLocation === newSelection) return;
 		window.localStorage.setItem(SAVEKEY, newSelection);
-		this.setState({
-			saveLocation : newSelection
-		});
-	},
+		setSaveLocation(newSelection);
+	};
 
-	renderButton : function(name, key, shouldRender=true){
-		if(!shouldRender) return;
-		return <button className={this.state.saveLocation==key ? 'active' :	''}	onClick={()=>{this.makeActive(key);}}>{name}</button>;
-	},
+	// todo: should this be a set of radio buttons (well styled) since it's either/or choice?
+	const renderSaveLocationButton = (name, key, shouldRender = true)=>{
+		if(!shouldRender) return null;
+		return (
+			<button className={saveLocation === key ? 'active' : ''} onClick={()=>{setActiveSaveLocation(key);}}>
+				{name}
+			</button>
+		);
+	};
 
-	renderNavItems : function() {
-		return <Navbar>
-			<Nav.section>
-				<NewBrew />
-				<HelpNavItem />
-				<RecentNavItem />
-				<Account />
-			</Nav.section>
-		</Navbar>;
-	},
+	// render the entirety of the account page content
+	const renderAccountPage = ()=>{
+		return (
+			<>
+				<div className='dataGroup'>
+					<h1>Account Information <i className='fas fa-user'></i></h1>
+					<p><strong>Username: </strong>{accountDetails.username || 'No user currently logged in'}</p>
+					<p><strong>Last Login: </strong>{moment(accountDetails.issued).format('dddd, MMMM Do YYYY, h:mm:ss a ZZ') || '-'}</p>
+				</div>
+				<div className='dataGroup'>
+					<h3>Homebrewery Information <NaturalCritIcon /></h3>
+					<p><strong>Brews on Homebrewery: </strong>{accountDetails.mongoCount}</p>
+				</div>
+				<div className='dataGroup'>
+					<h3>Google Information <i className='fab fa-google-drive'></i></h3>
+					<p><strong>Linked to Google: </strong>{accountDetails.googleId ? 'YES' : 'NO'}</p>
+					{accountDetails.googleId && (
+						<p>
+							<strong>Brews on Google Drive: </strong>{accountDetails.googleCount ?? (
+								<>
+									Unable to retrieve files - <a href='https://github.com/naturalcrit/homebrewery/discussions/1580'>follow these steps to renew your Google credentials.</a>
+								</>
+							)}
+						</p>
+					)}
+				</div>
+				<div className='dataGroup'>
+					<h4>Default Save Location</h4>
+					{renderSaveLocationButton('Homebrewery', 'HOMEBREWERY')}
+					{renderSaveLocationButton('Google Drive', 'GOOGLE-DRIVE', accountDetails.googleId)}
+				</div>
+			</>
+		);
+	};
 
-	renderUiItems : function() {
-		return 	<>
-			<div className='dataGroup'>
-				<h1>Account Information  <i className='fas fa-user'></i></h1>
-				<p><strong>Username: </strong> {this.props.uiItems.username || 'No user currently logged in'}</p>
-				<p><strong>Last Login: </strong> {moment(this.props.uiItems.issued).format('dddd, MMMM Do YYYY, h:mm:ss a ZZ') || '-'}</p>
-			</div>
-			<div className='dataGroup'>
-				<h3>Homebrewery Information <NaturalCritIcon /></h3>
-				<p><strong>Brews on Homebrewery: </strong> {this.props.uiItems.mongoCount}</p>
-			</div>
-			<div className='dataGroup'>
-				<h3>Google Information <i className='fab fa-google-drive'></i></h3>
-				<p><strong>Linked to Google: </strong> {this.props.uiItems.googleId ? 'YES' : 'NO'}</p>
-				{this.props.uiItems.googleId &&
-					<p>
-						<strong>Brews on Google Drive: </strong> {this.props.uiItems.googleCount ?? <>Unable to retrieve files - <a href='https://github.com/naturalcrit/homebrewery/discussions/1580'>follow these steps to renew your Google credentials.</a></>}
-					</p>
-				}
-			</div>
-			<div className='dataGroup'>
-				<h4>Default Save Location</h4>
-				{this.renderButton('Homebrewery', 'HOMEBREWERY')}
-				{this.renderButton('Google Drive', 'GOOGLE-DRIVE', this.state.uiItems.googleId)}
-			</div>
-		</>;
-	},
-
-	render : function(){
-		return <UIPage brew={this.props.brew}>
-			{this.renderUiItems()}
-		</UIPage>;
-	}
-});
+	// return the account page inside the base layout wrapper (with navbar etc).
+	return (
+		<UIPage brew={brew}>
+			{renderAccountPage()}
+		</UIPage>);
+};
 
 module.exports = AccountPage;

client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx

@@ -20,7 +20,8 @@ const BrewItem = createClass({
 				authors     : [],
 				stubbed     : true
 			},
-			reportError : ()=>{}
+			updateListFilter : ()=>{},
+			reportError      : ()=>{}
 		};
 	},
 
@@ -44,6 +45,10 @@ const BrewItem = createClass({
 			});
 	},
 
+	updateFilter : function(type, term){
+		this.props.updateListFilter(type, term);
+	},
+
 	renderDeleteBrewLink : function(){
 		if(!this.props.brew.editId) return;
 
@@ -109,6 +114,9 @@ const BrewItem = createClass({
 		const brew = this.props.brew;
 		if(Array.isArray(brew.tags)) {               // temporary fix until dud tags are cleaned
 			brew.tags = brew.tags?.filter((tag)=>tag); //remove tags that are empty strings
+			brew.tags.sort((a, b)=>{
+				return a.indexOf(':') - b.indexOf(':') != 0 ? a.indexOf(':') - b.indexOf(':') : a.toLowerCase().localeCompare(b.toLowerCase());
+			});
 		}
 		const dateFormatString = 'YYYY-MM-DD HH:mm:ss';
 
@@ -129,7 +137,7 @@ const BrewItem = createClass({
 						<i className='fas fa-tags'/>
 						{brew.tags.map((tag, idx)=>{
 							const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
-							return <span key={idx} className={matches[1]}>{matches[2]}</span>;
+							return <span key={idx} className={matches[1]} onClick={()=>{this.updateFilter(tag);}}>{matches[2]}</span>;
 						})}
 					</div>
 				</> : <></>

client/homebrew/pages/basePages/listPage/brewItem/brewItem.less

@@ -63,6 +63,41 @@
 		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;
+		}
+		&.type {
+			background-color: #0080003b;
+			color: #008000;
+			&:before{
+				content: '\f0ad';
+			}
+		}
+		&.group {
+			background-color: #5050503b;
+			color: #000000;
+			&:before{
+				content: '\f500';
+			}
+		}
+		&.meta {
+			background-color: #0000803b;
+			color: #000080;
+			&:before{
+				content: '\f05a';
+			}
+		}
+		&.system {
+			background-color: #8000003b;
+			color: #800000;
+			&:before{
+				content: '\f518';
+			}
+		}
 	}
 	&:hover{
 		.links{

client/homebrew/pages/basePages/listPage/listPage.jsx

@@ -36,6 +36,7 @@ const ListPage = createClass({
 
 		return {
 			filterString   : this.props.query?.filter || '',
+			filterTags     : [],
 			sortType       : this.props.query?.sort || null,
 			sortDir        : this.props.query?.dir || null,
 			query          : this.props.query,
@@ -82,7 +83,7 @@ const ListPage = createClass({
 		if(!brews || !brews.length) return <div className='noBrews'>No Brews.</div>;
 
 		return _.map(brews, (brew, idx)=>{
-			return <BrewItem brew={brew} key={idx} reportError={this.props.reportError}/>;
+			return <BrewItem brew={brew} key={idx} reportError={this.props.reportError} updateListFilter={ (tag)=>{ this.updateUrl(this.state.filterString, this.state.sortType, this.state.sortDir, tag); }}/>;
 		});
 	},
 
@@ -136,13 +137,33 @@ const ListPage = createClass({
 		return;
 	},
 
-	updateUrl : function(filterTerm, sortType, sortDir){
+	updateUrl : function(filterTerm, sortType, sortDir, filterTag=''){
 		const url = new URL(window.location.href);
 		const urlParams = new URLSearchParams(url.search);
 
 		urlParams.set('sort', sortType);
 		urlParams.set('dir', sortDir);
 
+		let filterTags = urlParams.getAll('tag');
+		if(filterTag != '') {
+			if(filterTags.findIndex((tag)=>{return tag.toLowerCase()==filterTag.toLowerCase();}) == -1){
+				filterTags.push(filterTag);
+			} else {
+				filterTags = filterTags.filter((tag)=>{ return tag.toLowerCase() != filterTag.toLowerCase(); });
+			}
+		}
+		urlParams.delete('tag');
+		// Add tags to URL in the order they were clicked
+		filterTags.forEach((tag)=>{ urlParams.append('tag', tag); });
+		// Sort tags before updating state
+		filterTags.sort((a, b)=>{
+			return a.indexOf(':') - b.indexOf(':') != 0 ? a.indexOf(':') - b.indexOf(':') : a.toLowerCase().localeCompare(b.toLowerCase());
+		});
+
+		this.setState({
+			filterTags
+		});
+
 		if(!filterTerm)
 			urlParams.delete('filter');
 		else
@@ -166,6 +187,16 @@ const ListPage = createClass({
 		</div>;
 	},
 
+	renderTagsOptions : function(){
+		if(this.state.filterTags?.length == 0) return;
+		return <div className='tags-container'>
+			{_.map(this.state.filterTags, (tag, idx)=>{
+				const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
+				return <span key={idx} className={matches[1]} onClick={()=>{ this.updateUrl(this.state.filterString, this.state.sortType, this.state.sortDir, tag); }}>{matches[2]}</span>;
+			})}
+		</div>;
+	},
+
 	renderSortOptions : function(){
 		return <div className='sort-container'>
 			<h6>Sort by :</h6>
@@ -176,9 +207,6 @@ const ListPage = createClass({
 			{/* {this.renderSortOption('Latest', 'latest')} */}
 
 			{this.renderFilterOption()}
-
-
-
 		</div>;
 	},
 
@@ -186,14 +214,28 @@ const ListPage = createClass({
 		const testString = _.deburr(this.state.filterString).toLowerCase();
 
 		brews = _.filter(brews, (brew)=>{
+			// Filter by user entered text
 			const brewStrings = _.deburr([
 				brew.title,
 				brew.description,
 				brew.tags].join('\n')
 				.toLowerCase());
 
-			return brewStrings.includes(testString);
+			const filterTextTest = brewStrings.includes(testString);
+
+			// Filter by user selected tags
+			let filterTagTest = true;
+			if(this.state.filterTags.length > 0){
+				filterTagTest = Array.isArray(brew.tags) && this.state.filterTags?.every((tag)=>{
+					return brew.tags.findIndex((brewTag)=>{
+						return brewTag.toLowerCase() == tag.toLowerCase();
+					}) >= 0;
+				});
+			}
+
+			return filterTextTest && filterTagTest;
 		});
+
 		return _.orderBy(brews, (brew)=>{ return this.sortBrewOrder(brew); }, this.state.sortDir);
 	},
 
@@ -220,10 +262,11 @@ const ListPage = createClass({
 	render : function(){
 		return <div className='listPage sitePage'>
 			{/*<style>@layer V3_5ePHB, bundle;</style>*/}
-			<link href='/themes/V3/Blank/style.css' rel='stylesheet'/>
-			<link href='/themes/V3/5ePHB/style.css' rel='stylesheet'/>
+			<link href='/themes/V3/Blank/style.css' type="text/css" rel='stylesheet'/>
+			<link href='/themes/V3/5ePHB/style.css' type="text/css" rel='stylesheet'/>
 			{this.props.navItems}
 			{this.renderSortOptions()}
+			{this.renderTagsOptions()}
 
 			<div className='content V3'>
 				<div className='page'>

client/homebrew/pages/basePages/listPage/listPage.less

@@ -53,7 +53,7 @@
 			}
 		}
 	}
-	.sort-container{
+	.sort-container {
 		font-family        : 'Open Sans', sans-serif;
 		position           : sticky;
 		top                : 0;
@@ -125,4 +125,66 @@
 
 
 	}
+	.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;
+		span {
+			font-family    : 'Open Sans', sans-serif;
+			font-size      : 11px;
+			font-weight    : bold;
+			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;
+			}
+			&:after {
+				content: '\f00d';
+				font-family: 'Font Awesome 5 Free';
+				font-size: 12px;
+				margin-left: 3px;
+			}
+			&.type {
+				background-color: #008000;
+				border-color: #00a000;
+				&:before{
+					content: '\f0ad';
+				}
+			}
+			&.group {
+				background-color: #505050;
+				border-color: #000000;
+				&:before{
+					content: '\f500';
+				}
+			}
+			&.meta {
+				background-color: #000080;
+				border-color: #0000a0;
+				&:before{
+					content: '\f05a';
+				}
+			}
+			&.system {
+				background-color: #800000;
+				border-color: #a00000;
+				&:before{
+					content: '\f518';
+				}
+			}
+		}
+	}
 }

client/homebrew/pages/errorPage/errors/errorIndex.js

@@ -73,9 +73,11 @@ const errorIndex = (props)=>{
 		**Properties** tab, and adding your username to the "invited authors" list. You can
 		then try to access this document again.
 		
+		:
+
 		**Brew Title:** ${props.brew.brewTitle || 'Unable to show title'}
 
-		**Current Authors:** ${props.brew.authors?.map((author)=>{return `${author}`;}).join(', ') || 'Unable to list authors'}
+		**Current Authors:** ${props.brew.authors?.map((author)=>{return `[${author}](/user/${author})`;}).join(', ') || 'Unable to list authors'}
 		
 		[Click here to be redirected to the brew's share page.](/share/${props.brew.shareId})`,
 
@@ -86,9 +88,14 @@ const errorIndex = (props)=>{
 		You must be logged in to one of the accounts listed as an author of this brew.
 		User is not logged in. Please log in [here](${loginUrl}).
 		
+		:
+
 		**Brew Title:** ${props.brew.brewTitle || 'Unable to show title'}
 
-		**Current Authors:** ${props.brew.authors?.map((author)=>{return `${author}`;}).join(', ') || 'Unable to list authors'}`,
+		**Current Authors:** ${props.brew.authors?.map((author)=>{return `[${author}](/user/${author})`;}).join(', ') || 'Unable to list authors'}
+
+		[Click here to be redirected to the brew's share page.](/share/${props.brew.shareId})`,
+		
 
 		// Brew load error
 		'05' : dedent`
@@ -97,6 +104,8 @@ const errorIndex = (props)=>{
 		The server could not locate the Homebrewery document. It was likely deleted by
 		its owner.
 		
+		:
+
 		**Requested access:** ${props.brew.accessType}
 
 		**Brew ID:**  ${props.brew.brewId}`,
@@ -113,6 +122,8 @@ const errorIndex = (props)=>{
 		
 		An error occurred while attempting to remove the Homebrewery document.
 		
+		:
+
 		**Brew ID:**  ${props.brew.brewId}`,
 
 		// Author delete error
@@ -121,7 +132,21 @@ const errorIndex = (props)=>{
 		
 		An error occurred while attempting to remove the user from the Homebrewery document author list!
 		
+		:
+
 		**Brew ID:**  ${props.brew.brewId}`,
+
+		// Brew locked by Administrators error
+		'100' : dedent`
+		## This brew has been locked.
+		
+		Please contact the Administrators to unlock this document.
+		
+		:
+
+		**Brew ID:**  ${props.brew.brewId}
+		
+		**Brew Title:** ${props.brew.brewTitle}`,
 	};
 };
 

client/homebrew/pages/homePage/welcome_msg.md

@@ -143,6 +143,7 @@ Much nicer than `<br><br><br><br><br>`
 ### Column Breaks
 Column and page breaks with `\column` and `\page`.
 
+\column
 ### Tables
 Tables now allow column & row spanning between cells. This is included in some updated snippets, but a simplified example is given below.
 

client/homebrew/pages/printPage/printPage.jsx

@@ -21,7 +21,8 @@ const PrintPage = createClass({
 			brew  : {
 				text     : '',
 				style    : '',
-				renderer : 'legacy'
+				renderer : 'legacy',
+				lang     : ''
 			}
 		};
 	},
@@ -32,7 +33,8 @@ const PrintPage = createClass({
 				text     : this.props.brew.text     || '',
 				style    : this.props.brew.style    || undefined,
 				renderer : this.props.brew.renderer || 'legacy',
-				theme    : this.props.brew.theme    || '5ePHB'
+				theme    : this.props.brew.theme    || '5ePHB',
+				lang	 : this.props.brew.lang     || 'en'
 			}
 		};
 	},
@@ -49,7 +51,8 @@ const PrintPage = createClass({
 						text     : brewStorage,
 						style    : styleStorage,
 						renderer : metaStorage?.renderer || 'legacy',
-						theme    : metaStorage?.theme    || '5ePHB'
+						theme    : metaStorage?.theme    || '5ePHB',
+						lang	 : metaStorage?.lang	 || 'en'
 					}
 				};
 			});
@@ -93,14 +96,14 @@ const PrintPage = createClass({
 
 		return <div>
 			<Meta name='robots' content='noindex, nofollow' />
-			<link href={`/themes/${rendererPath}/Blank/style.css`} rel='stylesheet'/>
+			<link href={`/themes/${rendererPath}/Blank/style.css`} type="text/css" rel='stylesheet'/>
 			{baseThemePath &&
-				<link href={`/themes/${rendererPath}/${baseThemePath}/style.css`} rel='stylesheet'/>
+				<link href={`/themes/${rendererPath}/${baseThemePath}/style.css`} type="text/css" rel='stylesheet'/>
 			}
-			<link href={`/themes/${rendererPath}/${themePath}/style.css`} rel='stylesheet'/>
+			<link href={`/themes/${rendererPath}/${themePath}/style.css`} type="text/css" rel='stylesheet'/>
 			{/* Apply CSS from Style tab */}
 			{this.renderStyle()}
-			<div className='pages' ref='pages'>
+			<div className='pages' ref='pages' lang={this.state.brew.lang}>
 				{this.renderPages()}
 			</div>
 		</div>;

client/template.js

@@ -12,9 +12,9 @@ const template = async function(name, title='', props = {}){
 	<html>
 		<head>
 			<meta name="viewport" content="width=device-width, initial-scale=1, height=device-height, interactive-widget=resizes-visual" />
-			<link href="//use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
+			<link href="//use.fontawesome.com/releases/v6.5.1/css/all.css" rel="stylesheet" type="text/css" />
 			<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
-			<link href=${`/${name}/bundle.css`} rel='stylesheet' />
+			<link href=${`/${name}/bundle.css`} type="text/css" rel='stylesheet' />
 			<link rel="icon" href="/assets/favicon.ico" type="image/x-icon" />
 			${ogMetaTags}
 			<meta name="twitter:card" content="summary">

package.json

@@ -1,7 +1,7 @@
 {
   "name": "homebrewery",
   "description": "Create authentic looking D&D homebrews using only markdown",
-  "version": "3.11.0",
+  "version": "3.12.0",
   "engines": {
     "npm": "^10.2.x",
     "node": "^20.8.x"
@@ -31,6 +31,7 @@
     "test:mustache-syntax:inline": "jest '.*(mustache-syntax).*' -t '^Inline:.*' --verbose --noStackTrace",
     "test:mustache-syntax:block": "jest '.*(mustache-syntax).*' -t '^Block:.*' --verbose --noStackTrace",
     "test:mustache-syntax:injection": "jest '.*(mustache-syntax).*' -t '^Injection:.*' --verbose --noStackTrace",
+    "test:definition-lists": "jest tests/markdown/definition-lists.test.js --verbose --noStackTrace", 
     "test:route": "jest tests/routes/static-pages.test.js --verbose",
     "phb": "node scripts/phb.js",
     "prod": "set NODE_ENV=production && npm run build",
@@ -80,19 +81,19 @@
     ]
   },
   "dependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/plugin-transform-runtime": "^7.23.9",
-    "@babel/preset-env": "^7.23.9",
-    "@babel/preset-react": "^7.23.3",
+    "@babel/core": "^7.24.4",
+    "@babel/plugin-transform-runtime": "^7.24.3",
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-react": "^7.24.1",
     "@googleapis/drive": "^8.7.0",
     "body-parser": "^1.20.2",
-    "classnames": "^2.3.2",
+    "classnames": "^2.5.1",
     "codemirror": "^5.65.6",
     "cookie-parser": "^1.4.6",
     "create-react-class": "^15.7.0",
     "dedent-tabs": "^0.10.3",
     "expr-eval": "^2.0.2",
-    "express": "^4.18.2",
+    "express": "^4.19.2",
     "express-async-handler": "^1.2.0",
     "express-static-gzip": "2.1.7",
     "fs-extra": "11.2.0",
@@ -106,21 +107,21 @@
     "marked-smartypants-lite": "^1.0.2",
     "markedLegacy": "npm:marked@^0.3.19",
     "moment": "^2.30.1",
-    "mongoose": "^8.1.3",
+    "mongoose": "^8.3.1",
     "nanoid": "3.3.4",
     "nconf": "^0.12.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-frame-component": "^4.1.3",
-    "react-router-dom": "6.22.1",
+    "react-router-dom": "6.22.3",
     "sanitize-filename": "1.6.3",
     "superagent": "^8.1.2",
     "vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
   },
   "devDependencies": {
-    "eslint": "^8.56.0",
-    "eslint-plugin-jest": "^27.6.3",
-    "eslint-plugin-react": "^7.33.2",
+    "eslint": "^8.57.0",
+    "eslint-plugin-jest": "^28.2.0",
+    "eslint-plugin-react": "^7.34.1",
     "jest": "^29.7.0",
     "jest-expect-message": "^1.1.3",
     "postcss-less": "^6.0.0",

server.js

@@ -7,6 +7,14 @@ DB.connect(config).then(()=>{
 	// before launching server
 	const PORT = process.env.PORT || config.get('web_port') || 8000;
 	server.app.listen(PORT, ()=>{
-		console.log(`server on port: ${PORT}`);
+		const reset = '\x1b[0m'; // Reset to default style
+		const bright = '\x1b[1m'; // Bright (bold) style
+		const cyan = '\x1b[36m'; // Cyan color
+		const underline = '\x1b[4m'; // Underlined style
+
+		console.log(`\n\tserver started at: ${new Date().toLocaleString()}`);
+		console.log(`\tserver on port: ${PORT}`);
+		console.log(`\t${bright + cyan}Open in browser: ${reset}${underline + bright + cyan}http://localhost:${PORT}${reset}\n\n`)
+
 	});
 });

server/app.js

@@ -17,21 +17,8 @@ const asyncHandler = require('express-async-handler');
 
 const { DEFAULT_BREW } = require('./brewDefaults.js');
 
-const splitTextStyleAndMetadata = (brew)=>{
-	brew.text = brew.text.replaceAll('\r\n', '\n');
-	if(brew.text.startsWith('```metadata')) {
-		const index = brew.text.indexOf('```\n\n');
-		const metadataSection = brew.text.slice(12, index - 1);
-		const metadata = yaml.load(metadataSection);
-		Object.assign(brew, _.pick(metadata, ['title', 'description', 'tags', 'systems', 'renderer', 'theme', 'lang']));
-		brew.text = brew.text.slice(index + 5);
-	}
-	if(brew.text.startsWith('```css')) {
-		const index = brew.text.indexOf('```\n\n');
-		brew.style = brew.text.slice(7, index - 1);
-		brew.text = brew.text.slice(index + 5);
-	}
-};
+const { splitTextStyleAndMetadata } = require('../shared/helpers.js');
+
 
 const sanitizeBrew = (brew, accessType)=>{
 	brew._id = undefined;
@@ -385,7 +372,7 @@ app.get('/account', asyncHandler(async (req, res, next)=>{
 				console.log(err);
 			});
 
-		data.uiItems = {
+		data.accountDetails = {
 			username    : req.account.username,
 			issued      : req.account.issued,
 			googleId    : Boolean(req.account.googleId),

server/googleActions.js

@@ -7,7 +7,9 @@ const config = require('./config.js');
 
 let serviceAuth;
 if(!config.get('service_account')){
-	console.log('No Google Service Account in config files - Google Drive integration will not be available.');
+	const reset = '\x1b[0m'; // Reset to default style
+	const yellow = '\x1b[33m'; // yellow color
+	console.warn(`\n${yellow}No Google Service Account in config files - Google Drive integration will not be available.${reset}`);
 } else  {
 	const keys = typeof(config.get('service_account')) == 'string' ?
 		JSON.parse(config.get('service_account')) :
@@ -18,7 +20,7 @@ if(!config.get('service_account')){
 		serviceAuth.scopes = ['https://www.googleapis.com/auth/drive'];
 	} catch (err) {
 		console.warn(err);
-		console.log('Please make sure the Google Service Account is set up properly in your config files.');
+		console.warn('Please make sure the Google Service Account is set up properly in your config files.');
 	}
 }
 

server/homebrew.api.js

@@ -54,6 +54,10 @@ const api = {
 				});
 			stub = stub?.toObject();
 
+			if(stub?.lock?.locked && accessType != 'edit') {
+				throw { HBErrorCode: '100', code: stub.lock.code, message: stub.lock.message, brewId: stub.shareId, brewTitle: stub.title };
+			}
+
 			// If there is a google id, try to find the google brew
 			if(!stubOnly && (googleId || stub?.googleId)) {
 				let googleError;
@@ -79,9 +83,9 @@ const api = {
 			if(accessType === 'edit' && (authorsExist && !(isAuthor || isInvited))) {
 				const accessError = { name: 'Access Error', status: 401 };
 				if(req.account){
-					throw { ...accessError, message: 'User is not an Author', HBErrorCode: '03', authors: stub.authors, brewTitle: stub.title, shareId: stub.shareId };
+					throw { ...accessError, message: 'User is not an Author', HBErrorCode: '03', authors: stub.authors, brewTitle: stub.title, shareId: stub.shareId};
 				}
-				throw { ...accessError, message: 'User is not logged in', HBErrorCode: '04', authors: stub.authors, brewTitle: stub.title };
+				throw { ...accessError, message: 'User is not logged in', HBErrorCode: '04', authors: stub.authors, brewTitle: stub.title, shareId: stub.shareId};
 			}
 
 			// If after all of that we still don't have a brew, throw an exception

server/homebrew.api.spec.js

@@ -117,7 +117,7 @@ describe('Tests for api', ()=>{
 					id : '123456789012345678901234567890123abcdefghijkl'
 				}
 			});
-			
+
 			expect(googleId).toEqual('123456789012345678901234567890123');
 			expect(id).toEqual('abcdefghijkl');
 		});
@@ -128,7 +128,7 @@ describe('Tests for api', ()=>{
 					id : '123456789012345678901234567890123abcdefghij'
 				}
 			});
-			
+
 			expect(googleId).toEqual('123456789012345678901234567890123');
 			expect(id).toEqual('abcdefghij');
 		});
@@ -298,6 +298,18 @@ describe('Tests for api', ()=>{
 			expect(model.get).toHaveBeenCalledWith({ shareId: '1' });
 			expect(google.getGoogleBrew).toHaveBeenCalledWith('2', '1', 'share');
 		});
+
+		it('access is denied to a locked brew', async()=>{
+			const lockBrew = { title: 'test brew', shareId: '1', lock: { locked: true, code: 404, message: 'brew locked' } };
+			model.get = jest.fn(()=>toBrewPromise(lockBrew));
+			api.getId = jest.fn(()=>({ id: '1', googleId: undefined }));
+
+			const fn = api.getBrew('share', false);
+			const req = { brew: {} };
+			const next = jest.fn();
+
+			await expect(fn(req, null, next)).rejects.toEqual({ 'HBErrorCode': '100', 'brewId': '1', 'brewTitle': 'test brew', 'code': 404, 'message': 'brew locked' });
+		});
 	});
 
 	describe('mergeBrewText', ()=>{

shared/helpers.js

@@ -0,0 +1,22 @@
+const _ = require('lodash');
+const yaml = require('js-yaml');
+
+const splitTextStyleAndMetadata = (brew) => {
+    brew.text = brew.text.replaceAll('\r\n', '\n');
+    if (brew.text.startsWith('```metadata')) {
+        const index = brew.text.indexOf('```\n\n');
+        const metadataSection = brew.text.slice(12, index - 1);
+        const metadata = yaml.load(metadataSection);
+        Object.assign(brew, _.pick(metadata, ['title', 'description', 'tags', 'systems', 'renderer', 'theme', 'lang']));
+        brew.text = brew.text.slice(index + 5);
+    }
+    if (brew.text.startsWith('```css')) {
+        const index = brew.text.indexOf('```\n\n');
+        brew.style = brew.text.slice(7, index - 1);
+        brew.text = brew.text.slice(index + 5);
+    }
+};
+
+module.exports = {
+    splitTextStyleAndMetadata
+};

shared/naturalcrit/codeEditor/codeEditor.jsx

@@ -436,7 +436,7 @@ const CodeEditor = createClass({
 
 	render : function(){
 		return <>
-			<link href={`../homebrew/cm-themes/${this.props.editorTheme}.css`} rel='stylesheet' />
+			<link href={`../homebrew/cm-themes/${this.props.editorTheme}.css`} type="text/css" rel='stylesheet' />
 			<div className='codeEditor' ref='editor' style={this.props.style}/>
 		</>;
 	}

shared/naturalcrit/codeEditor/codeEditor.less

@@ -17,13 +17,23 @@
     text-shadow: none;
     font-weight: 600;
     color: grey;
-}
+  }
 
   .sourceMoveFlash .CodeMirror-line{
     animation-name: sourceMoveAnimation;
     animation-duration: 0.4s;
   }
 
+  .CodeMirror-vscrollbar {
+    &::-webkit-scrollbar {
+      width: 20px;
+    }
+    &::-webkit-scrollbar-thumb {
+      width: 20px;
+      background: linear-gradient(90deg, #858585 15px, #808080 15px);
+    }
+  }
+
   //.cm-tab {
   //  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAQAAACOs/baAAAARUlEQVR4nGJgIAG8JkXxUAcCtDWemcGR1lY4MvgzCEKY7jSBjgxBDAG09UEQzAe0AMwMHrSOAwEGRtpaMIwAAAAA//8DAG4ID9EKs6YqAAAAAElFTkSuQmCC) no-repeat right;
   //}

shared/naturalcrit/markdown.js

@@ -294,10 +294,10 @@ const superSubScripts = {
 	}
 };
 
-const definitionLists = {
-	name  : 'definitionLists',
+const definitionListsSingleLine = {
+	name  : 'definitionListsSingleLine',
 	level : 'block',
-	start(src) { return src.match(/^.*?::.*/m)?.index; },  // Hint to Marked.js to stop and check for a match
+	start(src) { return src.match(/\n[^\n]*?::[^\n]*/m)?.index; },  // Hint to Marked.js to stop and check for a match
 	tokenizer(src, tokens) {
 		const regex = /^([^\n]*?)::([^\n]*)(?:\n|$)/ym;
 		let match;
@@ -312,7 +312,7 @@ const definitionLists = {
 		}
 		if(definitions.length) {
 			return {
-				type : 'definitionLists',
+				type : 'definitionListsSingleLine',
 				raw  : src.slice(0, endIndex),
 				definitions
 			};
@@ -326,6 +326,51 @@ const definitionLists = {
 	}
 };
 
+const definitionListsMultiLine = {
+	name  : 'definitionListsMultiLine',
+	level : 'block',
+	start(src) { return src.match(/\n[^\n]*\n::/m)?.index; },  // Hint to Marked.js to stop and check for a match
+	tokenizer(src, tokens) {
+		const regex = /(\n?\n?(?!::)[^\n]+?(?=\n::))|\n::(.(?:.|\n)*?(?=(?:\n::)|(?:\n\n)|$))/y;
+		let match;
+		let endIndex = 0;
+		const definitions = [];
+		while (match = regex.exec(src)) {
+			if(match[1]) {
+				if(this.lexer.blockTokens(match[1].trim())[0]?.type !== 'paragraph') // DT must not be another block-level token besides <p>
+					break;
+				definitions.push({
+					dt  : this.lexer.inlineTokens(match[1].trim()),
+					dds : []
+				});
+			}
+			if(match[2] && definitions.length) {
+				definitions[definitions.length - 1].dds.push(
+					this.lexer.inlineTokens(match[2].trim().replace(/\s/g, ' '))
+				);
+			}
+			endIndex = regex.lastIndex;
+		}
+		if(definitions.length) {
+			return {
+				type : 'definitionListsMultiLine',
+				raw  : src.slice(0, endIndex),
+				definitions
+			};
+		}
+	},
+	renderer(token) {
+		let returnVal = `<dl>`;
+		token.definitions.forEach((def)=>{
+			const dds = def.dds.map((s)=>{
+				return `\n<dd>${this.parser.parseInline(s).trim()}</dd>`;
+			}).join('');
+			returnVal += `<dt>${this.parser.parseInline(def.dt)}</dt>${dds}\n`;
+		});
+		returnVal = returnVal.trim();
+		return `${returnVal}</dl>`;
+	}
+};
 
 //v=====--------------------< Variable Handling >-------------------=====v// 242 lines
 const replaceVar = function(input, hoist=false, allowUnresolved=false) {
@@ -342,7 +387,7 @@ const replaceVar = function(input, hoist=false, allowUnresolved=false) {
 
 	let replacedLabel = label;
 
-	if(mathVars?.[0] !== label.trim())  {// If there was mathy stuff not captured, let's do math!
+	if(prefix[0] == '$' && mathVars?.[0] !== label.trim())  {// If there was mathy stuff not captured, let's do math!
 		mathVars?.forEach((variable)=>{
 			const foundVar = lookupVar(variable, globalPageNumber, hoist);
 			if(foundVar && foundVar.resolved && foundVar.content && !isNaN(foundVar.content)) // Only subsitute math values if fully resolved, not empty strings, and numbers
@@ -572,7 +617,7 @@ function MarkedVariables() {
 //^=====--------------------< Variable Handling >-------------------=====^//
 
 Marked.use(MarkedVariables());
-Marked.use({ extensions: [mustacheSpans, mustacheDivs, mustacheInjectInline, definitionLists, superSubScripts] });
+Marked.use({ extensions: [definitionListsMultiLine, definitionListsSingleLine, superSubScripts, mustacheSpans, mustacheDivs, mustacheInjectInline] });
 Marked.use(mustacheInjectBlock);
 Marked.use({ renderer: renderer, tokenizer: tokenizer, mangle: false });
 Marked.use(MarkedExtendedTables(), MarkedGFMHeadingId(), MarkedSmartypantsLite());

shared/naturalcrit/nav/nav.jsx

@@ -1,4 +1,4 @@
-require('./nav.less');
+require('client/homebrew/navbar/navbar.less');
 const React = require('react');
 const { useState, useRef, useEffect } = React;
 const createClass = require('create-react-class');
@@ -104,7 +104,7 @@ const Nav = {
 		});
 
 		return (
-			<div className={`navDropdownContainer ${props.className}`}
+			<div className={`navDropdownContainer ${props.className ?? ''}`}
 				ref={myRef}
 				onMouseEnter = { props.trigger.includes('hover') ? ()=>handleDropdown(true)  : undefined }
 				onMouseLeave = { props.trigger.includes('hover') ? ()=>handleDropdown(false) : undefined }

shared/naturalcrit/nav/nav.less

@@ -1,97 +0,0 @@
-@import '../styles/colors';
-@keyframes glideDropDown {
-	0%   {transform : translate(0px, -100%);
-				opacity   : 0;
-			  background-color: #333;}
-	100% {transform : translate(0px, 0px);
-				opacity   : 1;
-			  background-color: #333;}
-}
-nav{
-	background-color : #333;
-	.navContent{
-		position			  : relative;
-		display         : flex;
-		justify-content : space-between;
-		z-index         : 2;
-	}
-	.navSection{
-		display     : flex;
-		align-items : center;
-	}
-	.navLogo{
-		display         : block;
-		margin-top      : 0px;
-		margin-right    : 8px;
-		margin-left     : 8px;
-		color           : white;
-		text-decoration : none;
-		&:hover{
-			.name{ color : @orange; }
-			svg{ fill : @orange }
-		}
-		svg{
-			height       : 13px;
-			margin-right : 0.2em;
-			cursor       : pointer;
-			fill         : white;
-		}
-		span.name{
-			font-family : 'CodeLight';
-			font-size   : 15px;
-			span.crit{
-				font-family : 'CodeBold';
-			}
-			small{
-				font-family    : 'Open Sans';
-				font-size      : 0.3em;
-				font-weight    : 800;
-				text-transform : uppercase;
-			}
-		}
-	}
-	.navItem{
-		#backgroundColorsHover;
-		.animate(background-color);
-		padding          : 8px 12px;
-		cursor           : pointer;
-		background-color : #333;
-		font-size        : 10px;
-		font-weight      : 800;
-		color            : white;
-		text-decoration  : none;
-		text-transform   : uppercase;
-		line-height      : 13px;
-		i{
-			margin-left : 5px;
-			font-size   : 13px;
-			float       : right;
-		}
-	}
-	.navSection:last-child .navItem{
-		border-left : 1px solid #666;
-	}
-	.navDropdownContainer{
-		position: relative;
-		.navDropdown {
-			position : absolute;
-			top      : 28px;
-			left     : 0px;
-			z-index  : 10000;
-			width    : 100%;
-			overflow : hidden auto;
-			max-height : calc(100vh - 28px);
-			.navItem{
-				animation-name: glideDropDown;
-				animation-duration: 0.4s;
-				position         : relative;
-				display          : block;
-				width            : 100%;
-				vertical-align   : middle;
-				padding          : 8px 5px;
-				border           : 1px solid #888;
-				border-bottom    : 0;
-			}
-		}
-	}
-}

tests/markdown/definition-lists.test.js

@@ -0,0 +1,91 @@
+/* eslint-disable max-lines */
+
+const Markdown = require('naturalcrit/markdown.js');
+
+describe('Inline Definition Lists', ()=>{
+	test('No Term 1 Definition', function() {
+		const source = ':: My First Definition\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt></dt><dd>My First Definition</dd>\n</dl>');
+	});
+
+	test('Single Definition Term', function() {
+		const source = 'My term :: My First Definition\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>My term</dt><dd>My First Definition</dd>\n</dl>');
+	});
+
+	test('Multiple Definition Terms', function() {
+		const source = 'Term 1::Definition of Term 1\nTerm 2::Definition of Term 2\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt><dd>Definition of Term 1</dd>\n<dt>Term 2</dt><dd>Definition of Term 2</dd>\n</dl>');
+	});
+});
+
+describe('Multiline Definition Lists', ()=>{
+	test('Single Term, Single Definition', function() {
+		const source = 'Term 1\n::Definition 1\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt>\n<dd>Definition 1</dd></dl>');
+	});
+
+	test('Single Term, Plural Definitions', function() {
+		const source = 'Term 1\n::Definition 1\n::Definition 2\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt>\n<dd>Definition 1</dd>\n<dd>Definition 2</dd></dl>');
+	});
+
+	test('Multiple Term, Single Definitions', function() {
+		const source = 'Term 1\n::Definition 1\n\nTerm 2\n::Definition 1\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt>\n<dd>Definition 1</dd>\n<dt>Term 2</dt>\n<dd>Definition 1</dd></dl>');
+	});
+
+	test('Multiple Term, Plural Definitions', function() {
+		const source = 'Term 1\n::Definition 1\n::Definition 2\n\nTerm 2\n::Definition 1\n::Definition 2\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt>\n<dd>Definition 1</dd>\n<dd>Definition 2</dd>\n<dt>Term 2</dt>\n<dd>Definition 1</dd>\n<dd>Definition 2</dd></dl>');
+	});
+
+	test('Single Term, Single multi-line definition', function() {
+		const source = 'Term 1\n::Definition 1\nand more and\nmore and more\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt>\n<dd>Definition 1 and more and more and more</dd></dl>');
+	});
+
+	test('Single Term, Plural multi-line definitions', function() {
+		const source = 'Term 1\n::Definition 1\nand more and more\n::Definition 2\nand more\nand more\n::Definition 3\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt>\n<dd>Definition 1 and more and more</dd>\n<dd>Definition 2 and more and more</dd>\n<dd>Definition 3</dd></dl>');
+	});
+
+	test('Multiple Term, Single multi-line definition', function() {
+		const source = 'Term 1\n::Definition 1\nand more and more\n\nTerm 2\n::Definition 1\n::Definition 2\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt>\n<dd>Definition 1 and more and more</dd>\n<dt>Term 2</dt>\n<dd>Definition 1</dd>\n<dd>Definition 2</dd></dl>');
+	});
+
+	test('Multiple Term, Single multi-line definition, followed by an inline dl', function() {
+		const source = 'Term 1\n::Definition 1\nand more and more\n\nTerm 2\n::Definition 1\n::Definition 2\n\n::Inline Definition (no term)';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt>\n<dd>Definition 1 and more and more</dd>\n<dt>Term 2</dt>\n<dd>Definition 1</dd>\n<dd>Definition 2</dd></dl><dl><dt></dt><dd>Inline Definition (no term)</dd>\n</dl>');
+	});
+
+	test('Multiple Term, Single multi-line definition, followed by paragraph', function() {
+		const source = 'Term 1\n::Definition 1\nand more and more\n\nTerm 2\n::Definition 1\n::Definition 2\n\nParagraph';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt>\n<dd>Definition 1 and more and more</dd>\n<dt>Term 2</dt>\n<dd>Definition 1</dd>\n<dd>Definition 2</dd></dl><p>Paragraph</p>');
+	});
+
+	test('Block Token cannot be the Term of a multi-line definition', function() {
+		const source = '## Header\n::Definition 1 of a single-line DL\n::Definition 1 of another single-line DL';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<h2 id="header">Header</h2>\n<dl><dt></dt><dd>Definition 1 of a single-line DL</dd>\n<dt></dt><dd>Definition 1 of another single-line DL</dd>\n</dl>');
+	});
+
+	test('Inline DL has priority over Multiline', function() {
+		const source = 'Term 1 :: Inline definition 1\n:: Inline definition 2 (no DT)';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt><dd>Inline definition 1</dd>\n<dt></dt><dd>Inline definition 2 (no DT)</dd>\n</dl>');
+	});
+});

themes/V3/5ePHB/snippets/coverpage.gen.js

@@ -149,8 +149,6 @@ module.exports = {
 			![](/assets/naturalCritLogoWhite.svg)
 
 			Homebrewery.Naturalcrit.com
-			}}
-
-			\page`;
+			}}`;
 	}
 };

themes/V3/5ePHB/snippets/tableOfContents.gen.js

@@ -78,7 +78,7 @@ module.exports = function(props){
 
 	return dedent`
 		{{toc,wide
-		# Table Of Contents
+		# Contents
 
 		${markdown}
 		}}

themes/V3/5ePHB/style.less

@@ -1,6 +1,6 @@
-@import (less) './themes/fonts/5e/fonts.less';
 @import (less) './themes/assets/assets.less';
 @import (less) './themes/fonts/icon fonts/font-icons.less';
+@import (less) './themes/fonts/icon fonts/diceFont.less';
 
 :root {
 	//Colors
@@ -307,7 +307,6 @@
 			margin-left           : -0.16cm;
 			background-color      : var(--HB_Color_MonsterStatBackground);
 			background-image      : @monsterBlockBackground;
-			background-attachment : fixed;
 			background-blend-mode : overlay;
 			border-style          : solid;
 			border-width          : 7px 6px;
@@ -403,15 +402,9 @@
 		}
 	}
 	.pageNumber {
-		position    : absolute;
 		right       : 2px;
 		bottom      : 22px;
-		width       : 50px;
-		font-size   : 0.9em;
 		color       : var(--HB_Color_Footnotes);
-		text-align  : center;
-		text-indent : 0;
-		&.auto::after { content : counter(phb-page-numbers); }
 	}
 	.footnote {
 		position   : absolute;
@@ -539,14 +532,14 @@
 .page:has(.frontCover) {
 	columns    : 1;
 	text-align : center;
-	&::after { all : unset; }
+	&::after { display : none; }
 	h1 {
 		margin-top     : 1.2cm;
 		margin-bottom  : 0;
 		font-family    : 'NodestoCapsCondensed';
 		font-size      : 2.245cm;
 		font-weight    : normal;
-		line-height    : 0.85em;
+		line-height    : 1.9cm;
 		color          : white;
 		text-shadow    : unset;
 		text-transform : uppercase;
@@ -633,14 +626,14 @@
 .page:has(.insideCover) {
 	columns    : 1;
 	text-align : center;
-	&::after { all	: unset; }
+	&::after { display	: none; }
 	h1 {
 		margin-top     : 1.2cm;
 		margin-bottom  : 0;
 		font-family    : 'NodestoCapsCondensed';
 		font-size      : 2.1cm;
 		font-weight    : normal;
-		line-height    : 0.85em;
+		line-height    : 1.785cm;
 		text-transform : uppercase;
 	}
 	h2 {
@@ -679,7 +672,7 @@
 	padding : 2.25cm 1.3cm 2cm 1.3cm;
 	color   : #FFFFFF;
 	columns : 1;
-	&::after { all : unset; }
+	&::after { display : none; }
 	.columnWrapper { width : 7.6cm; }
 	.backCover {
 		position          : absolute;
@@ -695,7 +688,7 @@
 		margin-bottom : 0.3cm;
 		font-family   : 'NodestoCapsCondensed';
 		font-size     : 1.35cm;
-		line-height   : 0.95em;
+		line-height   : 1.28cm;
 		color         : #ED1C24;
 		text-align    : center;
 	}
@@ -721,7 +714,7 @@
 	p {
 		font-family : 'Overpass';
 		font-size   : 0.332cm;
-		line-height : 1.5em;
+		line-height : 0.35cm;
 	}
 	hr + p {
 		margin-top : 0.6cm;
@@ -746,10 +739,10 @@
 			font-family    : 'NodestoCapsWide';
 			font-size      : 0.4cm;
 			line-height    : 1em;
+			line-height    : 1.28cm;
 			color          : #FFFFFF;
 			text-align     : center;
 			text-indent    : 0;
-			letter-spacing : 0.08em;
 		}
 	}
 }
@@ -789,7 +782,7 @@
 		margin-left  : auto;
 		font-family  : 'Overpass';
 		font-size    : 0.45cm;
-		line-height  : 1.1em;
+		line-height  : 0.495cm;
 	}
 }
 

themes/V3/Blank/snippets.js

@@ -326,27 +326,27 @@ module.exports = [
 				gen	 : dedent`{{font-family:CodeLight Dummy Text}}`
 			},
 			{
-				name : 'Scaly Sans Remake',
+				name : 'Scaly Sans',
 				icon : 'font ScalySansRemake',
 				gen	 : dedent`{{font-family:ScalySansRemake Dummy Text}}`
 			},
 			{
-				name : 'Book Insanity Remake',
+				name : 'Book Insanity',
 				icon : 'font BookInsanityRemake',
 				gen	 : dedent`{{font-family:BookInsanityRemake Dummy Text}}`
 			},
 			{
-				name : 'Mr Eaves Remake',
+				name : 'Mr Eaves',
 				icon : 'font MrEavesRemake',
 				gen	 : dedent`{{font-family:MrEavesRemake Dummy Text}}`
 			},
 			{
-				name: 'Solbera Imitation Remake',
+				name: 'Solbera Imitation',
 				icon: 'font SolberaImitationRemake',
 				gen: dedent`{{font-family:SolberaImitationRemake Dummy Text}}`
 			  },
 			  {
-				name: 'Scaly Sans Small Caps Remake',
+				name: 'Scaly Sans Small Caps',
 				icon: 'font ScalySansSmallCapsRemake',
 				gen: dedent`{{font-family:ScalySansSmallCapsRemake Dummy Text}}`
 			  },

themes/V3/Blank/style.less

@@ -1,5 +1,6 @@
 @import (less) './themes/fonts/5e/fonts.less';
 @import (less) './themes/assets/assets.less';
+@import (less) './themes/fonts/icon fonts/diceFont.less';
 
 :root {
 	//Colors
@@ -8,7 +9,7 @@
 }
 
 @page { margin : 0; }
-body { counter-reset : phb-page-numbers; }
+body { counter-reset : page-numbers; }
 * { -webkit-print-color-adjust : exact; }
 
 //*****************************
@@ -47,7 +48,7 @@ body { counter-reset : phb-page-numbers; }
 	height            : 279.4mm;
 	padding           : 1.4cm 1.9cm 1.7cm;
 	overflow          : hidden;
-	counter-increment : phb-page-numbers;
+	counter-increment : page-numbers;
 	background-color  : var(--HB_Color_Background);
 	text-rendering    : optimizeLegibility;
 	contain           : size;
@@ -166,7 +167,6 @@ body { counter-reset : phb-page-numbers; }
 		margin          : 0;
 		font-size       : 120px;
 		text-transform  : uppercase;
-		mix-blend-mode  : overlay;
 		opacity         : 30%;
 		transform       : rotate(-45deg);
 		p { margin-bottom : none; }
@@ -460,3 +460,22 @@ body { counter-reset : phb-page-numbers; }
 	.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%); }
 }
+
+//*****************************
+//*        Page Number
+//*****************************/
+.page {
+	.pageNumber {
+		position    : absolute;
+		right       : 30px;
+		bottom      : 30px;
+		width       : 50px;
+		font-size   : 0.9em;
+		text-align  : center;
+		&.auto::after { content : counter(page-numbers); }
+	}
+
+	&:nth-child(even) {
+		.pageNumber { left : 30px; }
+	}
+}

themes/V3/Journal/style.less

@@ -374,17 +374,9 @@
 	}
 	.pageNumber{
 		font-family : FrederickaTheGreat;
-		position    : absolute;
 		right       : 3cm;
 		bottom      : 1.25cm;
-		width       : 50px;
-		font-size   : 0.9em;
 		color       : var(--HB_Color_HeaderText);
-		text-align  : center;
-		text-indent : 0;
-		&.auto::after {
-			content : counter(phb-page-numbers);
-		}
 	}
 	.footnote{
 		position   : absolute;

themes/codeMirror/customThemes/darkvision.css

@@ -0,0 +1,121 @@
+.CodeMirror {
+	background: #0C0C0C;
+	color: #B9BDB6;
+}
+
+/* Brew BG */
+.brewRenderer {
+    background-color: #0C0C0C;
+}
+
+.cm-s-darkvision {
+    /* Blinking cursor and selection */
+    .CodeMirror-cursor {
+        border-left: 1px solid #B9BDB6;
+    }
+    .CodeMirror-selected {
+        background: #E0E8FF40;
+    }
+
+    /* Line number stuff */
+    .CodeMirror-gutter-elt {
+        color: #81969A;
+    }
+    .CodeMirror-linenumber {
+        background-color: #0C0C0C;
+    }
+    .CodeMirror-gutter {
+        background-color: #0C0C0C;
+    }
+
+    /* column splits */
+    .editor .codeEditor .columnSplit {
+        font-style: italic;
+        color: inherit;
+        background-color:#1F5763;
+        border-bottom: #299 solid 1px;
+    }
+
+    /* # headings */
+    .cm-header {
+        color: #C51B1B;
+        -webkit-text-stroke-width: 0.1px; 
+    }
+    /* bold points */
+    .cm-strong {
+        font-weight: bold;
+        color: #309DD2;
+    }
+    /* Link headings */
+    .cm-link {
+        color: #DD6300;
+    }
+    /* links */
+    .cm-string {
+        color: #5CE638;
+    }
+    /*@import*/
+    .cm-def {
+        color: #2986CC;
+    }
+    /* Bullets and such */
+    .cm-variable-2 {
+        color: #3CBF30;
+    }
+
+    /* Tags (divs) */
+    .cm-tag {
+        color: #E3FF00;
+    }
+    .cm-attribute {
+        color: #E3FF00;
+    }
+    .cm-atom {
+        color: #CF7EA9;
+    }
+    .cm-qualifier {
+        color: #EE1919;
+    }
+    .cm-comment {
+        color: #BBC700;
+    }
+    .cm-keyword {
+        color: #CC66FF;
+    }
+    .cm-property {
+        color: aqua;
+    }
+    .cm-error {
+        color: #C50202;
+    }
+    .CodeMirror-foldmarker {
+        color: #F0FF00;
+    }
+    /* New page  */
+    .cm-builtin {
+        color: #FFF;
+    }
+}
+
+.editor .codeEditor {
+    /* blocks */
+    .block:not(.cm-comment) {
+        color: magenta;
+    }    
+    /* definition lists */
+    .define.definition {
+        color: #FFAA3E;
+    }
+    .define.term {
+        color: #7290d9;
+    }
+    .define:not(.term):not(.definition) {
+        background: #333;
+    }
+    /* New page  */
+    .pageLine {
+        background: #000;
+        color: #000;
+        border-bottom: 1px solid #FFF;
+    }
+}

themes/codeMirror/editorThemes.json

@@ -16,6 +16,7 @@
 "colorforth",
 "darcula",
 "darkbrewery-v301",
+"darkvision",
 "dracula",
 "duotone-dark",
 "duotone-light",

themes/fonts/icon fonts/diceFont.less

@@ -0,0 +1,114 @@
+/* Icon Font: diceFont */
+@font-face {
+	font-family : 'DiceFont';
+	font-style : normal;
+	font-weight : normal;
+	src : url('../../../fonts/icon fonts/diceFont.woff2');
+} 
+
+.df {
+	display                 : inline-block;
+	font-family             : 'DiceFont';
+	font-style              : normal;
+	font-weight             : normal;
+	font-variant            : normal;
+	line-height             : 1;
+	text-decoration         : inherit;
+	text-transform          : none;
+	text-rendering          : optimizeLegibility;
+	-moz-osx-font-smoothing : grayscale;
+	-webkit-font-smoothing  : antialiased;
+	&.F::before { content : '\f190'; }
+	&.F-minus::before { content : '\f191'; }
+	&.F-plus::before { content : '\f192'; }
+	&.F-zero::before { content : '\f193'; }
+	&.d10::before { content : '\f194'; }
+	&.d10-0::before { content : '\f100'; }
+	&.d10-1::before { content : '\f101'; }
+	&.d10-10::before { content : '\f102'; }
+	&.d10-2::before { content : '\f103'; }
+	&.d10-3::before { content : '\f104'; }
+	&.d10-4::before { content : '\f105'; }
+	&.d10-5::before { content : '\f106'; }
+	&.d10-6::before { content : '\f107'; }
+	&.d10-7::before { content : '\f108'; }
+	&.d10-8::before { content : '\f109'; }
+	&.d10-9::before { content : '\f10a'; }
+	&.d12::before { content : '\f195'; }
+	&.d12-1::before { content : '\f10b'; }
+	&.d12-10::before { content : '\f10c'; }
+	&.d12-11::before { content : '\f10d'; }
+	&.d12-12::before { content : '\f10e'; }
+	&.d12-2::before { content : '\f10f'; }
+	&.d12-3::before { content : '\f110'; }
+	&.d12-4::before { content : '\f111'; }
+	&.d12-5::before { content : '\f112'; }
+	&.d12-6::before { content : '\f113'; }
+	&.d12-7::before { content : '\f114'; }
+	&.d12-8::before { content : '\f115'; }
+	&.d12-9::before { content : '\f116'; }
+	&.d2::before { content : '\f196'; }
+	&.d2-1::before { content : '\f117'; }
+	&.d2-2::before { content : '\f118'; }
+	&.d20::before { content : '\f197'; }
+	&.d20-1::before { content : '\f119'; }
+	&.d20-10::before { content : '\f11a'; }
+	&.d20-11::before { content : '\f11b'; }
+	&.d20-12::before { content : '\f11c'; }
+	&.d20-13::before { content : '\f11d'; }
+	&.d20-14::before { content : '\f11e'; }
+	&.d20-15::before { content : '\f11f'; }
+	&.d20-16::before { content : '\f120'; }
+	&.d20-17::before { content : '\f121'; }
+	&.d20-18::before { content : '\f122'; }
+	&.d20-19::before { content : '\f123'; }
+	&.d20-2::before { content : '\f124'; }
+	&.d20-20::before { content : '\f125'; }
+	&.d20-3::before { content : '\f126'; }
+	&.d20-4::before { content : '\f127'; }
+	&.d20-5::before { content : '\f128'; }
+	&.d20-6::before { content : '\f129'; }
+	&.d20-7::before { content : '\f12a'; }
+	&.d20-8::before { content : '\f12b'; }
+	&.d20-9::before { content : '\f12c'; }
+	&.d4::before { content : '\f198'; }
+	&.d4-1::before { content : '\f12d'; }
+	&.d4-2::before { content : '\f12e'; }
+	&.d4-3::before { content : '\f12f'; }
+	&.d4-4::before { content : '\f130'; }
+	&.d6::before { content : '\f199'; }
+	&.d6-1::before { content : '\f131'; }
+	&.d6-2::before { content : '\f132'; }
+	&.d6-3::before { content : '\f133'; }
+	&.d6-4::before { content : '\f134'; }
+	&.d6-5::before { content : '\f135'; }
+	&.d6-6::before { content : '\f136'; }
+	&.d8::before { content : '\f19a'; }
+	&.d8-1::before { content : '\f137'; }
+	&.d8-2::before { content : '\f138'; }
+	&.d8-3::before { content : '\f139'; }
+	&.d8-4::before { content : '\f13a'; }
+	&.d8-5::before { content : '\f13b'; }
+	&.d8-6::before { content : '\f13c'; }
+	&.d8-7::before { content : '\f13d'; }
+	&.d8-8::before { content : '\f13e'; }
+	&.dot-d6::before { content : '\f19b'; }
+	&.dot-d6-1::before { content : '\f13f'; }
+	&.dot-d6-2::before { content : '\f140'; }
+	&.dot-d6-3::before { content : '\f141'; }
+	&.dot-d6-4::before { content : '\f142'; }
+	&.dot-d6-5::before { content : '\f143'; }
+	&.dot-d6-6::before { content : '\f18f'; }
+	&.small-dot-d6-1::before { content : '\f183'; }
+	&.small-dot-d6-2::before { content : '\f184'; }
+	&.small-dot-d6-3::before { content : '\f185'; }
+	&.small-dot-d6-4::before { content : '\f186'; }
+	&.small-dot-d6-5::before { content : '\f187'; }
+	&.small-dot-d6-6::before { content : '\f188'; }
+	&.solid-small-dot-d6-1::before { content : '\f189'; }
+	&.solid-small-dot-d6-2::before { content : '\f18a'; }
+	&.solid-small-dot-d6-3::before { content : '\f18b'; }
+	&.solid-small-dot-d6-4::before { content : '\f18c'; }
+	&.solid-small-dot-d6-5::before { content : '\f18d'; }
+	&.solid-small-dot-d6-6::before { content : '\f18e'; }
+}

themes/fonts/icon fonts/diceFont_license.md

@@ -0,0 +1,18 @@
+# License
+
+DiceFont is open source. You can use it for commercial projects, personal
+projects or open source projects.
+
+## Font License
+
+Applies to all desktop and webfont files: [License: SIL OFL 1.1](http://scripts.sil.org/OFL)
+
+## Code License
+
+Applies to all CSS and LESS files: [License: MIT License](http://opensource.org/licenses/mit-license.html)
+
+## Documentation License
+
+Applies to all other files [CC BY 3.0](http://creativecommons.org/licenses/by/3.0/)
+
+Copyright [Franco Ponticelli](https://github.com/fponticelli).

themes/fonts/icon fonts/font-icons.less

@@ -1,6 +1,6 @@
-/* Main Font, serif */
+/* Icon Font: Elderberry Inn */
 @font-face {
-	font-family : 'Eldeberry-Inn';
+	font-family : 'Elderberry-Inn';
 	font-style : normal;
 	font-weight : normal;
 	src : url('../../../fonts/icon fonts/Elderberry-Inn-Icons.woff2');
@@ -10,7 +10,7 @@
 	span.ei {
 		display                 : inline-block;
 		margin-right            : 3px;
-		font-family             : 'Eldeberry-Inn';
+		font-family             : 'Elderberry-Inn';
 		line-height             : 1;
 		vertical-align          : baseline;
 		-moz-osx-font-smoothing : grayscale;