From 4a5dfac221a6cd0d16f82079c49991d1b576749e Mon Sep 17 00:00:00 2001
From: Danila Fedorin <danila.fedorin@gmail.com>
Date: Fri, 2 Feb 2024 21:05:26 -0800
Subject: [PATCH] Tweak code CSS a bit to make it nicer

Signed-off-by: Danila Fedorin <danila.fedorin@gmail.com>
---
 assets/scss/code.scss      | 25 +++++++++++++++++++++----
 assets/scss/modes.scss     |  1 +
 assets/scss/variables.scss |  4 +++-
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/assets/scss/code.scss b/assets/scss/code.scss
index d24a9b7..9fa221c 100644
--- a/assets/scss/code.scss
+++ b/assets/scss/code.scss
@@ -55,6 +55,12 @@ pre code {
         .lntd:last-child {
             width: 100%;
         }
+
+        // Insert padding to match the distance of the line number to its
+        // border.
+        .line {
+            padding-left: $code-lineno-spacing;
+        }
     }
 
     .lntr {
@@ -63,16 +69,27 @@ pre code {
 
     .lnt {
         display: block;
-        padding: 0 1rem 0 1rem;
-        color: $code-lineno-color;
+        padding: 0 $code-lineno-spacing 0 $code-lineno-spacing;
+        @include var(color, code-lineno-color);
+        border-right: $standard-border;
+
+        // Even though only highlighted line table numbers get the 'star',
+        // insert a corresponding space on non-highlighted ones to keep
+        // spacing consistent.
+        &::before {
+            content: " ";
+        }
     }
 
     .hl {
         display: block;
         @include var(background-color, code-highlight-color);
 
-        .lnt::before {
-            content: "*";
+        .lnt {
+            border-left-color: $border-color;
+            &::before {
+                content: "*";
+            }
         }
     }
 }
diff --git a/assets/scss/modes.scss b/assets/scss/modes.scss
index 90932a7..5ce0c52 100644
--- a/assets/scss/modes.scss
+++ b/assets/scss/modes.scss
@@ -15,6 +15,7 @@
         --target-background-color: #{$target-background-color-dark};
 
         --code-color: #{$code-color-dark};
+        --code-lineno-color: white;
         --code-keyword-color: #{$code-token-color-dark};
         --code-type-color: #{$code-token-color-dark};
         --code-highlight-color: #{$code-highlight-color-dark};
diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss
index cf1d406..29e8677 100644
--- a/assets/scss/variables.scss
+++ b/assets/scss/variables.scss
@@ -28,7 +28,8 @@ $code-token-color-dark: $primary-color;
 $code-highlight-color: #fffd99;
 $code-highlight-color-dark: #555538;
 $code-border-color: darken($code-color, 10%);
-$code-lineno-color: grey;
+$code-lineno-color: black;
+$code-lineno-spacing: 1rem;
 $code-comment-color: grey;
 $code-border: $standard-border-width solid $code-border-color;
 
@@ -54,6 +55,7 @@ $css-vars: (
     target-background-color: $target-background-color,
 
     code-color: $code-color,
+    code-lineno-color: $code-lineno-color,
     code-keyword-color: $code-token-color,
     code-type-color: $code-token-color,
     code-highlight-color: $code-highlight-color,