Update styling for column content nav

Author: rossta

app/javascript/css/application.css

@@ -30,6 +30,7 @@
 @import './components/site-header.css';
 @import './components/main-content.css';
 @import './components/article-content.css';
+@import './components/column-content.css';
 @import './components/footer.scss';
 @import './components/footer.css';
 @import './components/newsletter-banner.css';

app/javascript/css/components/article-content.css

@@ -131,9 +131,3 @@
     padding-inline-start: var(--space-s);
   }
 }
-
-.column-content {
-  & li:has(+ li) {
-    margin-bottom: var(--space-xs);
-  }
-}

app/javascript/css/components/column-content.css

@@ -0,0 +1,5 @@
+.column-content {
+  & li.active {
+    background-color: var(--joy-background-header);
+  }
+}

app/javascript/css/config/theme.css

@@ -45,6 +45,7 @@
   --joy-background-banner: var(--joy-color-100);
   --joy-background-footer: var(--joy-color-200);
   --joy-background-blockquote: var(--joy-color-100);
+  --joy-background-active: var(--joy-color-200);
 
   --joy-background-mask: var(--color-darken);
   --joy-background-reset: white;
@@ -103,6 +104,7 @@
   --joy-background-banner: var(--color-slate-900);
   --joy-background-footer: var(--color-slate-800);
   --joy-background-blockquote: var(--color-slate-800);
+  --joy-background-active: var(--color-slate-800);
 
   --joy-background-mask: var(--color-lighten);
   --joy-background-reset: var(--color-slate-950);