Tweak code CSS a bit to make it nicer

Signed-off-by: Danila Fedorin <danila.fedorin@gmail.com>

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;
+        padding: 0 $code-lineno-spacing 0 $code-lineno-spacing;
-        color: $code-lineno-color;
+        @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 {
+        .lnt {
-            content: "*";
+            border-left-color: $border-color;
+            &::before {
+                content: "*";
+            }
         }
     }
 }

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};

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,