From 14e2b42caa1e7d860a787f93ad17a99e51b35359 Mon Sep 17 00:00:00 2001
From: Jade Ellis <jade@ellis.link>
Date: Sun, 28 Jul 2024 22:29:40 +0100
Subject: [PATCH] Improve and fix styles for code blocks and footnotes

---
 packages/website/src/lib/style/code.css     | 57 +++++++++++++++++++++
 packages/website/src/lib/style/footnote.css | 20 ++++++++
 packages/website/src/lib/styles.css         | 38 ++------------
 3 files changed, 82 insertions(+), 33 deletions(-)
 create mode 100644 packages/website/src/lib/style/code.css
 create mode 100644 packages/website/src/lib/style/footnote.css

diff --git a/packages/website/src/lib/style/code.css b/packages/website/src/lib/style/code.css
new file mode 100644
index 00000000..f97301ec
--- /dev/null
+++ b/packages/website/src/lib/style/code.css
@@ -0,0 +1,57 @@
+
+/* Code */
+
+pre {
+    color-scheme: var(--code-colour-scheme);
+    color: var(--code-color);
+    background-color: var(--code-background-color);
+    overflow-x: auto;
+    font-weight: 400;
+    font-size: .875em;
+    line-height: 1.7142857;
+    margin-top: 1.7142857em;
+    margin-bottom: 1.7142857em;
+    border-radius: .375rem;
+    padding: calc(var(--spacing)/2);
+    box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a
+}
+pre>code {
+    word-wrap: normal;
+    background-color: initial;
+    border: 0;
+    border-radius: initial;
+    display: flex;
+    flex-direction: column;
+    line-height: inherit;
+    margin: 0;
+    width: max-content;
+    min-width: 100%;
+    max-width: auto;
+    overflow: visible;
+}
+
+code[data-line-numbers]>span[data-line-number] {
+    padding-left: 0;
+}
+
+code[data-line-numbers]>span[data-line-number]::before {
+    /* Insert the line number data attribute before the line */
+    content: attr(data-line-number);
+    /* Other styling */
+    display: inline-block;
+    width: 1rem;
+    margin-inline-start: .25rem;
+    margin-inline-end: .8rem;
+    text-align: right;
+    color: var(--code-color);
+    opacity: 0.25;
+}
+
+code>span[data-highlighted] {
+    background: var(--code-highlighted);
+    width: 100%;
+}
+
+/* code>span[data-highlighted]+span[data-highlighted] {
+    border-top: 1px solid theme("colors.slate.800");
+} */
\ No newline at end of file
diff --git a/packages/website/src/lib/style/footnote.css b/packages/website/src/lib/style/footnote.css
new file mode 100644
index 00000000..cf38b4f1
--- /dev/null
+++ b/packages/website/src/lib/style/footnote.css
@@ -0,0 +1,20 @@
+.footnote-ref {
+    text-decoration: none;
+    font-size: var(--footnote-size);
+}
+
+sup:has(.footnote-ref) {
+    vertical-align: super;
+}
+
+.footnotes {
+    font-size: var(--footnote-size);
+}
+
+.footnote-backref {
+    display: inline-block;
+    /* margin-inline-start: var(--size-4-1); */
+    margin-inline-start: .5em;
+    /* color: var(--text-faint); */
+    text-decoration: none;
+  }
\ No newline at end of file
diff --git a/packages/website/src/lib/styles.css b/packages/website/src/lib/styles.css
index 8705b6d1..e84355f7 100644
--- a/packages/website/src/lib/styles.css
+++ b/packages/website/src/lib/styles.css
@@ -1,8 +1,13 @@
+@import "./style/code.css";
+@import "./style/footnote.css";
+
 :root {
     color-scheme: light;
     --spacing: 24px;
     --page-width: 57.75rem;
 
+    --footnote-size: 0.9em;
+
     --theme: #242424;
     --background-color: #f8f8f8;
     --surface-color: #fff;
@@ -146,37 +151,4 @@ svg {
     overflow: visible;
 }
 
-/* Code */
-pre {
-    color-scheme: var(--code-colour-scheme);
-    color: var(--code-color);
-    background-color: var(--code-background-color);
-    overflow-x: auto;
-    font-weight: 400;
-    font-size: .875em;
-    line-height: 1.7142857;
-    margin-top: 1.7142857em;
-    margin-bottom: 1.7142857em;
-    border-radius: .375rem;
-    display: flex;
-    flex-direction: column;
-    padding: calc(var(--spacing)/2);
-    box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a
-}
 
-code[data-line-numbers]>span[data-line-number]::before {
-    /* Insert the line number data attribute before the line */
-    content: attr(data-line-number);
-    /* Other styling */
-    display: inline-block;
-    width: 1rem;
-    margin-right: 1rem;
-    margin-left: 1rem;
-    text-align: right;
-    color: gray;
-}
-
-code>span[data-highlighted] {
-    background: #3b4252;
-    width: 100%;
-}
\ No newline at end of file