Convert .eleventy.js to EJS, add friends to index's aside, create playground page to test site elements, add syntax highlighting with custom theme, convert header subtitle from link to paragraph, add support for custom alt text in 88x31 macro, new template for generic text pages, add changelog to about page with recent commits.

static/main.css

@@ -254,6 +254,10 @@ footer a {
     height: 1em;
 }
 
+.fullWidth {
+    width: 100%;
+}
+
 .notificationBox {
     transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
     width: fit-content;
@@ -569,6 +573,11 @@ div.hs.selected {
     opacity: 0 !important;
 }
 
+article {
+    max-width: 70%;
+    margin: auto;
+}
+
 .blogpostYoutubeVideo {
     user-select: none;
     box-shadow: 2px 7px 5px rgba(0, 0, 0, 0.3), 0px -4px 10px rgba(0, 0, 0, 0.3);
@@ -712,6 +721,10 @@ div.hs.selected {
     background-size: cover;
 }
 
+.webringGeneric p {
+    margin: 0;
+}
+
 .webringButtons {
     display: flex;
     gap: .4em;
@@ -1059,6 +1072,11 @@ header div:first-child {
 @media screen and (max-width: 1280px) {
     body { font-size: 2vh; }
 
+    article {
+        max-width: 100%;
+        margin: auto;
+    }
+
     header {
         padding-top: 1.4rem;
         text-align: center;

static/prism.css

@@ -0,0 +1,139 @@
+/**
+ * Coy without shadows
+ * Based on Tim Shedor's Coy theme for prism.js
+ * Author: RunDevelopment
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: black;
+	background: none;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	font-size: 1em;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	position: relative;
+	border-left: 10px solid rgba(255, 255, 255, 0.2);
+	background-color: rgba(0, 0, 0, 0.6);
+	background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
+	background-size: 3em 3em;
+	background-origin: content-box;
+	background-attachment: local;
+	margin: .5em 0;
+	padding: 0 1em;
+}
+
+pre[class*="language-"] > code {
+	display: block;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	position: relative;
+	padding: .2em;
+	border-radius: 0.3em;
+	color: #c92c2c;
+	border: 1px solid rgba(0, 0, 0, 0.1);
+	display: inline;
+	white-space: normal;
+	background-color: #fdfdfd;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #7D8B99;
+}
+
+.token.punctuation {
+	color: #5F6364;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.function-name,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #c92c2c;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.function,
+.token.builtin,
+.token.inserted {
+	color: #2f9c0a;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.token.variable {
+	color: #a67f59;
+	background: rgba(255, 255, 255, 0.5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword,
+.token.class-name {
+	color: #1990b8;
+}
+
+.token.regex,
+.token.important {
+	color: #e90;
+}
+
+.language-css .token.string,
+.style .token.string {
+	color: #a67f59;
+	background: rgba(255, 255, 255, 0.5);
+}
+
+.token.important {
+	font-weight: normal;
+}
+
+.token.bold {
+	font-weight: bold;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+.token.namespace {
+	opacity: .7;
+}