Improved prism theme

2 files changed, 150 insertions, 3 deletions

diff --git a/includes/base.html b/includes/base.html
index 27c13cb..7aabdf5 100644
--- a/includes/base.html
+++ b/includes/base.html
@@ -23,7 +23,6 @@
 	<meta name="twitter:card" content="summary">
 	<link rel="alternate" href="/atom.xml" type="application/atom+xml" :title="metadata.title">
 	<link rel="icon" href="/favicon.svg" type="image/svg+xml">
-	<link rel="stylesheet" href="../node_modules/prismjs/themes/prism-okaidia.css" />
 	<link rel="stylesheet" href="main.css" />
 	<link rel="stylesheet" :href="getBundleFileUrl('css')" webc:keep />
 </head>
@@ -35,7 +34,7 @@
 			<template webc:for="entry of eleventyNavigation(collections.all)" webc:nokeep>
 				<a :href="entry.url" @text="entry.title"></a>
 			</template>
-			<a :href="https://git.sudomsg.com/">Git</a>
+			<a href="https://git.sudomsg.com/">Git</a>
 		</nav>
 	</header>
 	<main @html="content"></main>
diff --git a/includes/main.css b/includes/main.css
index 92fcf5c..b618b5a 100644
--- a/includes/main.css
+++ b/includes/main.css
@@ -37,9 +37,14 @@ canvas,
 audio,
 iframe,
 embed,
+table,
+pre[class*="language-"],
 object {
-	max-inline-size: 100%;
 	display: block;
+	margin-left: auto;
+	margin-right: auto;
+	width: fit-content;
+	max-width: 90%;
 }
 
 h1 {
@@ -68,6 +73,111 @@ td {
 	border: 1px solid;
 }
 
+th,
+td {
+	padding: 1rem;
+}
+
+th {
+	background: darkred;
+	color: white;
+}
+
+code {
+	font-size: 0.9rem;
+	font-family: monospace;
+}
+
+code[class*="language-"],
+pre[class*="language-"] {
+	line-height: 1.5;
+	white-space: pre;
+}
+
+pre[class*="language-"] {
+	border: solid;
+	padding: 1rem;
+	border-radius: 0.25rem;
+	min-width: 70%;
+}
+
+.token {
+	&:is(.comment, .prolog, .doctype, .cdata) {
+		color: darkgreen;
+		font-style: italic;
+
+		@media (prefers-color-scheme: dark) {
+			color: lightgreen;
+		}
+	}
+
+	&.punctuation {
+		color: dimgray;
+
+		@media (prefers-color-scheme: dark) {
+			color: lightgray;
+		}
+	}
+
+	&:is(.property, .tag, .constant, .symbol, .deleted) {
+		color: firebrick;
+
+		@media (prefers-color-scheme: dark) {
+			color: lightgray;
+		}
+	}
+
+	&:is(.boolean, .number) {
+		color: teal;
+
+		@media (prefers-color-scheme: dark) {
+			color: cyan;
+		}
+	}
+
+	&:is(.selector, .attr-name, .string, .char, .builtin, .inserted) {
+		color: saddlebrown;
+
+		@media (prefers-color-scheme: dark) {
+			color: wheat;
+		}
+	}
+
+	&:is(.operator, .entity, .url, .variable) {
+		color: darkmagenta;
+
+		@media (prefers-color-scheme: dark) {
+			color: orchid;
+		}
+	}
+
+	&:is(.atrule, .attr-value, .keyword) {
+		color: darkred;
+		font-weight: bold;
+
+		@media (prefers-color-scheme: dark) {
+			color: tomato;
+		}
+	}
+
+	&:is(.function, .class-name) {
+		color: mediumblue;
+		font-weight: bold;
+
+		@media (prefers-color-scheme: dark) {
+			color: dodgerblue;
+		}
+	}
+
+	&:is(.regex, .important) {
+		color: chocolate;
+
+		@media (prefers-color-scheme: dark) {
+			color: goldenrod;
+		}
+	}
+}
+
 @media screen {
 
 	* :any-link:hover,
@@ -129,12 +239,16 @@ td {
 		border: 2px solid;
 	}
 
+	th,
 	aside {
 		border: 2px solid;
 	}
 }
 
 @media print {
+	* {
+		print-color-adjust: exact;
+	}
 
 	header,
 	footer {
@@ -151,4 +265,38 @@ td {
 		break-inside: avoid;
 		break-before: auto;
 	}
+
+	h2,
+	h3,
+	th {
+		page-break-after: avoid;
+	}
+
+	a[href]:after {
+		content: " <" attr(href) "> ";
+	}
+
+	abbr[title]:after {
+		content: " (" attr(title) ") ";
+	}
+
+	abbr {
+		text-decoration: none;
+	}
+
+	pre[class*="language-"] {
+		background: none;
+		color: black;
+		border: solid black;
+		box-shadow: none;
+		page-break-inside: avoid;
+	}
+
+	pre[class*="language-"] {
+		background: none;
+		color: black;
+		border: solid black;
+		box-shadow: none;
+		page-break-inside: avoid;
+	}
 }