Prettying up the JS markdown CSS

js/markdown.js

@@ -3113,6 +3113,17 @@ class MDTagModifier {
 		return this.original;
 	}
 
+	static #styleToObject(styleValue) {
+		const pairs = styleValue.split(';');
+		var styles = {};
+		for (const pair of pairs) {
+			const keyAndValue = pair.split(':');
+			if (keyAndValue.length != 2) continue;
+			styles[keyAndValue[0]] = keyAndValue[1];
+		}
+		return styles;
+	}
+
 	static #fromContents(contents) {
 		let modifierTokens = contents.split(/\s+/);
 		let mod = new MDTagModifier();
@@ -3126,12 +3137,7 @@ class MDTagModifier {
 				mod.cssId = groups[1];
 			} else if (groups = this.#attributeRegex.exec(token)) {
 				if (groups[1] == 'style') {
-					const pairs = groups[2].split(';');
-					for (const pair of pairs) {
-						const keyValue = pair.split(':');
-						if (keyValue.length != 2) continue;
-						mod.cssStyles[keyValue[0]] = keyValue[1];
-					}
+					mod.cssStyles = this.#styleToObject(groups[2]);
 				} else {
 					mod.attributes[groups[1]] = groups[2];
 				}

markdownjs.html

@@ -6,8 +6,8 @@
 		<link rel="icon" href="data:;base64,iVBORw0KGgo=">
 		<style type="text/css">
 			:root {
-				--color-background: white;
-				--color-text: black;
+				--color-background: #fffff8;
+				--color-text: #111;
 				--color-editor-background: #0000aa;
 				--color-editor-text: white;
 				--color-table-header: #ddd;
@@ -22,6 +22,16 @@
 				background-color: var(--color-background);
 				color: var(--color-text);
 			}
+/* body {
+    width: 87.5%;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 12.5%;
+    background-color: #fffff8;
+    color: #111;
+    max-width: 1400px;
+    counter-reset: sidenote-counter;
+} */
 			.inputhalf {
 				position: absolute;
 				width: 50%;
@@ -75,14 +85,118 @@
 			}
 			@media (prefers-color-scheme: dark) {
 				:root {
-					--color-background: black;
-					--color-text: white;
+					--color-background: #151515;
+					--color-text: #ddd;
 					--color-table-header: #333;
 					--color-table-border: #ccc;
 					--color-calculated-background: #444;
 				}
 			}
 		</style>
+		<style type="text/css">
+			/* From https://github.com/edwardtufte/tufte-css/blob/gh-pages/tufte.css */
+			html {
+				font-size: 15px;
+			}
+
+			body {
+				/* width: 87.5%;
+				margin-left: auto;
+				margin-right: auto;
+				padding-left: 12.5%; */
+				font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
+				background-color: #fffff8;
+				color: #111;
+				/* max-width: 1400px; */
+				counter-reset: sidenote-counter;
+			}
+
+			/* Adds dark mode */
+			@media (prefers-color-scheme: dark) {
+				body {
+					background-color: #151515;
+					color: #ddd;
+				}
+			}
+			h1 {
+				font-weight: 400;
+				margin-top: 4rem;
+				margin-bottom: 1.5rem;
+				font-size: 3.2rem;
+				line-height: 1;
+			}
+			h2 {
+				font-style: italic;
+				font-weight: 400;
+				margin-top: 2.1rem;
+				margin-bottom: 1.4rem;
+				font-size: 2.2rem;
+				line-height: 1;
+			}
+			h3 {
+				font-style: italic;
+				font-weight: 400;
+				font-size: 1.7rem;
+				margin-top: 2rem;
+				margin-bottom: 1.4rem;
+				line-height: 1;
+			}
+			hr {
+				display: block;
+				height: 1px;
+				width: 55%;
+				border: 0;
+				border-top: 1px solid #ccc;
+				margin: 1em 0;
+				padding: 0;
+			}
+			article {
+				padding: 5rem 0rem;
+			}
+			section {
+				padding-top: 1rem;
+				padding-bottom: 1rem;
+			}
+			p,
+			dl,
+			ol,
+			ul {
+				font-size: 1.4rem;
+				line-height: 2rem;
+			}
+			p.subtitle {
+				font-style: italic;
+				margin-top: 1rem;
+				margin-bottom: 1rem;
+				font-size: 1.8rem;
+				display: block;
+				line-height: 1;
+			}
+			code, pre > code {
+				font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+				font-size: 1.0rem;
+				line-height: 1.42;
+				-webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. See https://github.com/edwardtufte/tufte-css/issues/81#issuecomment-261953409 */
+			}
+			pre > code {
+				font-size: 0.9rem;
+				width: 52.5%;
+				margin-left: 2.5%;
+				overflow-x: auto;
+				display: block;
+			}
+			a:link,
+			a:visited {
+				color: inherit;
+				text-underline-offset: 0.1em;
+				text-decoration-thickness: 0.05em;
+			}
+			dt:not(:first-child),
+			li:not(:first-child) {
+				margin-top: 0.25rem;
+			}
+
+		</style>
 		<script src="js/markdown.js"></script>
 		<script src="js/spreadsheet.js"></script>
 		<script>