WIP

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 {