More styling of the sidebar

layouts/partials/sidebar.html

@@ -1,7 +1,8 @@
 <div class="sidebar">
     <div class="sidebar-cell">
-        <p>Recommendations</p>
-        
+        <header>
+            <h1>Recommendations</h1>
+        </header>
         <ul class="blogroll">
             {{ range .Site.Data.blogrolls.recommendations }}
                 <li><a href="{{ .url }}">{{ .name }}: <span>{{ (urls.Parse .url).Hostname }}</span></a></li>

static/sidebar.css

@@ -9,10 +9,17 @@ div.wrapper {
 }
 
 div.sidebar {
-    font-size: 0.8;
+    font-size: 0.8em;
 }
 
+div.sidebar header h1 {
+    color: var(--accent1);
+    font-size: 0.8em;
+}
 
+ul.blogroll {
+  padding-inline: 0;
+}
 
 ul.blogroll li {  
   list-style-type: none !important;
@@ -20,15 +27,9 @@ ul.blogroll li {
 
 ul.blogroll li a {
   text-decoration: none;
-  color: black;
+  color: var(--text);
 }
 
 ul.blogroll li a span {
-  color: gray;
-}
-
-@media (prefers-color-scheme: dark) {
-  ul.blogroll li a {
-    color: white;
-  }
+  color: var(--accent2);
 }