From 35bf659733d3e424103a3c8af8b2b3d504e32bc1 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Sat, 15 Oct 2022 10:20:45 -0700
Subject: [PATCH] WIP

---
 config.toml               |  2 +-
 static/styles/monokai.css | 20 +++---------------
 static/styles/root.css    | 43 ++++++++++++++++++++++++++++++++-------
 3 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/config.toml b/config.toml
index d1063b9..877cc5b 100644
--- a/config.toml
+++ b/config.toml
@@ -16,7 +16,7 @@ name = 'Eryn Wells'
     [markup.highlight]
         anchorLineNos = true
         lineNos = true
-        lineNumbersInTable = false
+        lineNumbersInTable = true
         noClasses = false
 
 [mediaTypes]
diff --git a/static/styles/monokai.css b/static/styles/monokai.css
index 523390e..d1a9e73 100644
--- a/static/styles/monokai.css
+++ b/static/styles/monokai.css
@@ -1,13 +1,4 @@
-:root {
-    --highlight-background-color: rgb(var(--super-lt-gray));
-    --highlight-foreground-color: var(--foreground-body-color);
-}
-@media (prefers-color-scheme: dark) {
-    :root {
-    }
-}
-
-.chroma {
+div.chroma {
     line-height: var(--body-line-height);
 }
 
@@ -16,19 +7,14 @@
     background-color: var(--highlight-background-color);
 }
 
-.chroma {
-    color: var(--highlight-foreground-color);
-    background-color: var(--highlight-background-color);
-}
-
 /* Other */ .chroma .x {  }
 /* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
 /* CodeLine */ .chroma .cl {  }
 /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
 /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
 /* LineHighlight */ .chroma .hl { background-color: #ffffcc }
-/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
-/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* LineNumbersTable */ .chroma .lnt {color: #7f7f7f }
+/* LineNumbes */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
 /* Keyword */ .chroma .k { color: #00a8c8 }
 /* KeywordConstant */ .chroma .kc { color: #00a8c8 }
 /* KeywordDeclaration */ .chroma .kd { color: #00a8c8 }
diff --git a/static/styles/root.css b/static/styles/root.css
index 976f9fe..34f46ae 100644
--- a/static/styles/root.css
+++ b/static/styles/root.css
@@ -1,4 +1,4 @@
-@layer reset, root, template, page;
+@layer reset, root, template, page, syntax-highlight;
 
 :root {
     --black: 0, 0, 0;
@@ -42,6 +42,9 @@
     --body-header-line-height: 1.1;
     --body-code-background-color: rgb(var(--super-lt-gray));
 
+    --highlight-background-color: rgb(var(--super-lt-gray));
+    --highlight-foreground-color: var(--foreground-body-color);
+
     --content-width: 80rem;
 
     --transition-duration: 0.7s;
@@ -141,10 +144,9 @@ figcaption {
 
 figure {
     border-radius: 6px;
-    display: inline-block;
+    display: block;
     margin: 0;
-    margin-block: 0 var(--body-item-spacing);
-    margin-inline: 0;
+    margin-bottom: var(--body-item-spacing);
     overflow: hidden;
     max-width: var(--content-width);
     width: 100%;
@@ -185,7 +187,7 @@ footer.site {
     display: flex;
     flex-direction: column;
     font-size: 1.6rem;
-    margin-block-start: 2rem;
+    margin-block: var(--body-item-spacing);
     text-align: center;
 }
 
@@ -395,6 +397,12 @@ p {
 p { margin-block-end: var(--body-item-spacing); }
 p:last-child { margin-block-end: 0; }
 
+pre code {
+    border-radius: 0;
+    padding: 0;
+    padding-inline: 0;
+}
+
 ul ul,
 ul ol,
 ol ul,
@@ -541,9 +549,14 @@ ol ol {
 
 /** SYNTAX HIGHLIGHTING **/
 
+.highlight {
+    background-color: var(--highlight-background-color);
+    color: var(--highlight-foreground-color);
+    padding: 0.5em;
+}
+
 .highlight code {
     background-color: inherit;
-    margin-block: 0.5em;
 }
 
 .highlight .line {
@@ -551,11 +564,27 @@ ol ol {
     grid-template-columns: max-content auto;
 }
 
-.highlight .ln a {
+.highlight .lnt {
     -webkit-user-select: none;
     -moz-use-select: none;
     -ms-user-select: none;
     user-select: none;
+    white-space: pre;
+}
+
+.highlight td.lntd:first-child {
+    padding-inline: 0.1em 0.4em;
+}
+
+.highlight tr, .highlight tbody { width: 100%; }
+
+.highlight td.lntd:nth-of-type(2) {
+    display: block;
+    overflow-x: scroll;
+    width: 100%;
+}
+
+.highlight td.lntd:nth-of-type(2) > pre {
 }
 
 .highlight .cl {