So much styling

lib/content/generateBackend.ts

@@ -122,10 +122,15 @@ async function generateDiaryHTML(diary: Diary, selectedPage?: number): Promise<s
     }
 }
 
-export function generateHighlightedDOM(html: string) {
+export function prepareDOM(html: string) {
-    const el = new JSDOM(html);
+    const dom = (new JSDOM(html)).window.document;
-    el.window.document.querySelectorAll("pre code").forEach((block) => {
+    dom.querySelectorAll("pre code").forEach((block) => {
         hljs.highlightElement(block as HTMLElement);
     });
-    return el.window.document.body.innerHTML;
+
+    dom.querySelectorAll("a[href^='#']").forEach((link) => {
+        (link as HTMLAnchorElement).href = `/blog/${(link as HTMLAnchorElement).href.split("#")[1]}`;
+    });
+
+    return dom.body.innerHTML;
 }

pages/blog/diary/[did].tsx

@@ -1,7 +1,7 @@
 import type { GetServerSideProps, NextPage } from "next";
 import Layout from "../../../components/Blog/Layout";
 import ContentPage from "../../../components/Blog/ContentPage";
-import { generateContent, getContentList } from "../../../lib/content/generateBackend";
+import { generateContent, getContentList, prepareDOM } from "../../../lib/content/generateBackend";
 import type { ContentList, DiaryRender, Diary } from "../../../lib/content/types";
 
 const DiaryMain: NextPage<{ content: DiaryRender }> = ({ content }) => {
@@ -19,12 +19,13 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     if (!contentEntry) return { notFound: true };
 
     const contentHtml = await generateContent(contentEntry);
+    const contentPrepared = prepareDOM(contentHtml);
 
     return {
         props: {
             content: {
                 ...contentEntry,
-                html: contentHtml,
+                html: contentPrepared,
                 pageSelected: 0
             }
         }

pages/blog/diary/[did]/[page].tsx

@@ -1,7 +1,7 @@
 import type { GetServerSideProps, NextPage } from "next";
 import ContentPage from "../../../../components/Blog/ContentPage";
 import Layout from "../../../../components/Blog/Layout";
-import { generateContent, getContentList, generateHighlightedDOM } from "../../../../lib/content/generateBackend";
+import { generateContent, getContentList, prepareDOM } from "../../../../lib/content/generateBackend";
 import type { ContentList, Diary, DiaryRender } from "../../../../lib/content/types";
 
 const DiaryMain: NextPage<{ content: DiaryRender }> = ({ content }) => {
@@ -19,13 +19,13 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     if (!contentEntry || !page || typeof page !== "string") return { notFound: true };
 
     const contentHtml = await generateContent(contentEntry, Number.parseInt(page));
-    const contentHighlighted = generateHighlightedDOM(contentHtml);
+    const contentPrepared = prepareDOM(contentHtml);
 
     return {
         props: {
             content: {
                 ...contentEntry,
-                html: contentHighlighted,
+                html: contentPrepared,
                 pageSelected: Number.parseInt(page)
             }
         }

pages/blog/project/[pid].tsx

@@ -1,7 +1,7 @@
 import type { GetServerSideProps, NextPage } from "next";
 import ContentPage from "../../../components/Blog/ContentPage";
 import Layout from "../../../components/Blog/Layout";
-import { generateContent, getContentList } from "../../../lib/content/generateBackend";
+import { generateContent, getContentList, prepareDOM } from "../../../lib/content/generateBackend";
 import type { ContentList, ProjectRender } from "../../../lib/content/types";
 
 const Post: NextPage<{ content: ProjectRender }> = ({ content }) => {
@@ -20,6 +20,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     if (!contentEntry) return { notFound: true };
 
     const contentHtml = await generateContent(contentEntry);
+    const contentPrepared = prepareDOM(contentHtml);
 
     return {
         props: {
@@ -27,7 +28,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
                 more: contentEntry.more || null,
                 repo: contentEntry.repo || null,
                 title: contentEntry.title,
-                html: contentHtml,
+                html: contentPrepared,
             }
         }
     };

styles/Blog/Content.module.scss

@@ -6,7 +6,7 @@
         @import "../asciidocMain";
 
         h1 {
-            color: var(--repl_color-link, #2ac02a);
+            color: var(--blog_color-accent);
             font-size: 2em;
         }
 
@@ -31,7 +31,7 @@
         h4,
         h5,
         h6 {
-            color: var(--repl_color, #188a18);
+            color: var(--blog_color-accent-dark);
         }
 
         #preamble {
@@ -45,16 +45,21 @@
 
         tbody>tr:nth-of-type(odd),
         #footer {
-            background-color: #1f2420;
+            background-color: var(--blog_background-main);
+        }
+
+        #footer {
+            clear: right;
+            border-radius: 1em;
         }
 
         tbody>tr:hover {
-            background-color: #364239;
+            background-color: rgba(0,0,0,0.2);
         }
 
         pre {
             background-color: #282c34;
-            border: 1px solid var(--repl_color-hint, #188a18);
+            border: 1px solid var(--blog_content-border);
             padding: 1em;
             color: #abb2bf;
             clear: right;
@@ -64,9 +69,21 @@
             padding: 1px;
         }
 
-        code {
+        :not(pre)>code, kbd {
-            background-color: #282c34;
+            background-color: var(--blog_background-main);
-            color: #abb2bf;
+            color: inherit;
+
+            [data-theme="light"] & {
+                background-color: #d49a9a;
+            }
+        }
+
+        a:link, a:visited, a:active {
+            color: var(--blog_color-accent);
+            text-decoration: none;
+        }
+        a:hover {
+            text-decoration: underline;
         }
 
         /* This _should_ have been included in the Asciidoc style but it isn't */

styles/Blog/DiaryPageSelector.module.scss

@@ -62,7 +62,7 @@
         padding: 5px;
         border-radius: 1em;
         border: 1px solid var(--blog_content-border);
-        background: #333;
+        background: var(--blog_background-main);
     }
 
     &.top {

styles/globals.scss

@@ -16,8 +16,8 @@
   --blog_nav-background: rgba(128, 128, 128, 0.3);
   --blog_nav-border: #ccc;
 
-  --blog_back-background-main: rgba(61, 0, 0,1);
   --blog_back-background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='57' height='57' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Crect width='100%25' height='100%25' fill='rgba(32, 19, 19,1)'/%3E%3Ccircle cx='0' cy='20' r='1.5' fill='rgba(247, 250, 252,1)'/%3E%3Ccircle cx='40' cy='20' r='1.5' fill='rgba(247, 250, 252,1)'/%3E%3Cpath d='m 16 19.5 h8 v1 h-8z' fill='rgba(229, 62, 62,1)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E ");
+  --blog_background-main: rgba(32, 19, 19,1);
   --blog_content-background: rgba(40, 40, 40, 0.2);
   --blog_content-border: rgba(221, 221, 221, 0.25); /* #ddd but less opacity */
   --blog_content-blur: 10px;
@@ -30,8 +30,8 @@
     --blog_nav-background: rgba(192, 192, 192, 0.3);
     --blog_nav-border: #ccc;
 
-    --blog_back-background-main: rgba(61, 0, 0,1);
     --blog_back-background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='57' height='57' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Crect width='100%25' height='100%25' fill='rgba(245, 179, 179,1)'/%3E%3Ccircle cx='0' cy='20' r='1.5' fill='rgba(247, 250, 252,1)'/%3E%3Ccircle cx='40' cy='20' r='1.5' fill='rgba(247, 250, 252,1)'/%3E%3Cpath d='m 16 19.5 h8 v1 h-8z' fill='rgba(229, 62, 62,1)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E ");
+    --blog_background-main: rgba(245, 179, 179,1);
     --blog_content-background: rgba(160, 160, 160, 0.15);
     --blog_content-border: rgb(34, 34, 34, 0.17); /* #222 but less opacity */
     --blog_content-blur: 5px;
@@ -40,6 +40,9 @@
     --blog_light-el-display: initial;
     --blog_dark-el-display: none;
   }
+  
+  --blog_color-accent: rgba(229, 62, 62,1);
+  --blog_color-accent-dark: rgb(190, 54, 54);
 }
 
 body {