From af843da6fd19c00c9ffbf3c4149aa192f2bfbae7 Mon Sep 17 00:00:00 2001
From: Brendan Chen <me@bchen.dev>
Date: Sat, 8 Aug 2026 20:56:45 -0400
Subject: [PATCH] Properly style the backlinks

---
 _layouts/note.html        |  6 ++++--
 assets/css/colors.css     | 10 ++++++----
 assets/css/content.css    |  8 ++++----
 assets/css/global.css     |  5 +++--
 assets/css/navigation.css | 14 +++++++-------
 assets/css/note.css       | 10 ++++++++++
 6 files changed, 34 insertions(+), 19 deletions(-)
 create mode 100644 assets/css/note.css

diff --git a/_layouts/note.html b/_layouts/note.html
index 6305734..6666394 100644
--- a/_layouts/note.html
+++ b/_layouts/note.html
@@ -6,12 +6,14 @@ layout: default
 
 {{ content }}
 
-<div>
+<hr class="backlink-divider">
+
+<div class="backlink-box">
     {% if page.backlinks.size > 0 %}
     <h3>Notes mentioning this note</h3>
     <div>
         {% for backlink in page.backlinks %}
-        <div class="backlink-box">
+        <div class="backlinks">
             <a class="internal-link" href="{{ site.baseurl }}{{ backlink.url }}{%- if site.use_html_extension -%}.html{%- endif -%}">{{ backlink.title }}</a><br>
         </div>
         {% endfor %}
diff --git a/assets/css/colors.css b/assets/css/colors.css
index 2d89d15..688a78a 100644
--- a/assets/css/colors.css
+++ b/assets/css/colors.css
@@ -1,12 +1,14 @@
 :root {
-    --color-background: #f4f4f4;
-    --color-primary: #000000;
+    --color-background-1: #f4f4f4;
+    --color-background-2: #e4e4e4;
+    --color-primary-1: #000000;
 }
 
 @media (prefers-color-scheme: dark) {
     :root {
-        --color-background: #111111;
-        --color-primary: #eeeeee;
+        --color-background-1: #111111;
+        --color-background-2: #222222;
+        --color-primary-1: #eeeeee;
     }
 }
 
diff --git a/assets/css/content.css b/assets/css/content.css
index fc21441..85fd83b 100644
--- a/assets/css/content.css
+++ b/assets/css/content.css
@@ -8,21 +8,21 @@
 }
 
 .primary-action {
-    background: var(--color-primary);
+    background: var(--color-primary-1);
     padding: 0.8em;
-    color: var(--color-background);
+    color: var(--color-background-1);
     text-decoration-line: unset;
     border-radius: 4px;
     border-style: solid;
     border-width: 1px;
-    border-color: var(--color-primary);
+    border-color: var(--color-primary-1);
     box-sizing: border-box;
 }
 
 .secondary-action {
     border-width: 1px;
     border-style: solid;
-    border-color: var(--color-primary);
+    border-color: var(--color-primary-1);
     padding: 0.8em;
     text-decoration-line: unset;
     border-radius: 4px;
diff --git a/assets/css/global.css b/assets/css/global.css
index db0b8ff..33c5d84 100644
--- a/assets/css/global.css
+++ b/assets/css/global.css
@@ -2,14 +2,15 @@
 @import url('navigation.css');
 @import url('colors.css');
 @import url('content.css');
+@import url('note.css');
 
 html {
-    background-color: var(--color-background);
+    background-color: var(--color-background-1);
 }
 
 body {
     font-family: 'FormaDJRText', sans-serif;
-    color: var(--color-primary);
+    color: var(--color-primary-1);
 
     display: flex;
     flex-direction: column;
diff --git a/assets/css/navigation.css b/assets/css/navigation.css
index aca8ca1..b741ac2 100644
--- a/assets/css/navigation.css
+++ b/assets/css/navigation.css
@@ -14,7 +14,7 @@
     display: flex;
     align-items: center;
     text-decoration: none;
-    color: var(--color-primary);
+    color: var(--color-primary-1);
 }
 
 .nav-logo-icon {
@@ -36,7 +36,7 @@
 
 .nav-link {
     text-decoration: none;
-    color: var(--color-primary);
+    color: var(--color-primary-1);
 }
 
 .nav-link:hover {
@@ -56,14 +56,14 @@
     height: 64px;
     justify-content: center;
     align-items: center;
-    background-color: var(--color-primary);
+    background-color: var(--color-primary-1);
     gap: 4px;
 }
 
 .hamburger-line {
     width: 20px;
     height: 2px;
-    background-color: var(--color-background);
+    background-color: var(--color-background-1);
 }
 
 .menu-overlay {
@@ -90,7 +90,7 @@
         left: -100%;
         top: 80px;
         flex-direction: column;
-        background-color: var(--color-background);
+        background-color: var(--color-background-1);
         width: 100%;
         z-index: 1000;
         gap: 0;
@@ -147,8 +147,8 @@
     justify-content: space-between;
 
     height: 64px;
-    border-top: 1px solid var(--color-primary);
-    border-bottom: 1px solid var(--color-primary);
+    border-top: 1px solid var(--color-primary-1);
+    border-bottom: 1px solid var(--color-primary-1);
 
     padding-top: 16px;
     padding-bottom: 16px;
diff --git a/assets/css/note.css b/assets/css/note.css
new file mode 100644
index 0000000..4fada04
--- /dev/null
+++ b/assets/css/note.css
@@ -0,0 +1,10 @@
+.backlink-divider {
+    color: var(--color-background-2);
+}
+
+.backlink-box {
+}
+
+.backlinks {
+
+}
\ No newline at end of file