make menu clearer and consistent.

src/components/Page.svelte

@@ -14,7 +14,12 @@
         categories.push(category);
       }
 
-      category.list.push({id: item.name, label: item.metadata.name, color: item.metadata.color || "#ffffff"});
+      category.list.push({
+        id: item.name,
+        label: item.metadata.name,
+        color: item.metadata.color || "#ffffff",
+        bgcolor: item.metadata.bgcolor || "#292929",
+      });
     }
 
     categories.sort((a,b) => {
@@ -41,7 +46,7 @@
     {#each categories as category (category.name)}
       <h2>{category.name}</h2>
       {#each category.list as item (item.id)}
-        <span style="--color: {item.color}">
+        <span style="--color: {item.color}; --bgcolor: {item.bgcolor}">
           <a class:selected={selected === item.id} href="/{item.id}">{item.label}</a>
         </span>
       {/each}
@@ -70,30 +75,41 @@
   }
   div.menu h1 a {
     line-height: 1.5em;
+    margin-left: 0;
+    border-left: none;
+    text-align: center;
   }
 
   div.menu h2 {
     font-size: 1.15em;
     color: #555;
-    padding: 0.5em 1ch 0 1ch;
+    padding: 0.5em 0.5ch 0 0.5ch;
     margin: 0;
+    margin-top: 0.5em;
+    text-align: left;
+  }
+  div.menu h2:first-of-type {
+    margin-top: 0;
   }
 
   div.menu a {
     display: block;
-    padding: 0.125em 2ch;
+    text-align: left;
+    padding: 0.125em 1ch;
     line-height: 1.5em;
     text-decoration: none;
     font-size: 0.9em;
     color: #aaa;
+    border-left: 6px solid #333;
+    margin-left: 0.75ch;
   }
   div.menu a.selected {
-    background: #2a2a2a;
     color: var(--color);
-    padding-left: 2.5ch;
+    border-color: var(--color);
+    background-color: var(--bgcolor);
   }
   div.menu a:hover {
-    background: #191919;
+    background-color: #191919;
   }
 
   div.layout {
@@ -133,7 +149,6 @@
     }
 
     div.menu a.selected {
-      padding-left: 2ch;
       font-weight: 600;
     }
   }