DiaryPageSelector styling

styles/Blog/Blog.module.scss

@@ -15,6 +15,7 @@
         border: 1px solid var(--blog_content-border);
         background: var(--blog_content-background);
         backdrop-filter: blur(var(--blog_content-blur));
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     }
   
     main {
@@ -30,7 +31,6 @@
     }
 
     footer {
-        
         margin: 5px auto 0;
         padding: 20px;
         border-bottom-left-radius: 1em;

styles/Blog/DiaryPageSelector.module.scss

@@ -0,0 +1,112 @@
+.sideNav {
+    float: right;
+    background: transparent;
+    /* 50px padding in main */
+    margin-right: -50px;
+    margin-top: -50px;
+    padding: 20px;
+    border-bottom-left-radius: 1em;
+    border-top-right-radius: 1em;
+    border: none;
+    border-left: 1px solid var(--blog_content-border);
+
+    h4 {
+        margin: 0 0 10px 0;
+    }
+
+    ol {
+        list-style-type: "\1405\0020\0020";
+        list-style-position: inside;
+        margin: 0;
+        padding: 0;
+    }
+
+    li {
+        margin: 0;
+        padding: 0;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        width: 200px;
+    }
+
+    li:hover {
+        &::marker {
+            font-weight: bold;
+        }
+    }
+
+    a:link, a:visited, a:hover, a:active {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    li.thisPage {
+        font-weight: bold;
+    }
+
+    h4.thisPage, h4:hover {
+        text-decoration: underline;
+    }
+}
+
+.barNav {
+    display: grid;
+    grid-template-columns: 1fr max-content max-content max-content max-content max-content 1fr;
+    align-items: center;
+    background: transparent;
+    padding: 10px;
+
+    select {
+        font-size: 110%;
+        padding: 5px;
+        border-radius: 1em;
+        border: 1px solid var(--blog_content-border);
+        background: #333;
+    }
+
+    &.top {
+        margin: -50px -50px 20px;
+        border-bottom: 1px solid var(--blog_content-border);
+    }
+
+    &.bottom {
+        margin: 20px -50px -50px;
+        border-top: 1px solid var(--blog_content-border);
+    }
+
+    a:link, a:visited, a:active {
+        color: inherit;
+        text-decoration: none;
+        font-weight: bold;
+    }
+    a:hover {
+        text-decoration: underline;
+    }
+}
+
+/* TODO: Move to asciidoc footer in Content.module.scss */
+.bottom {
+    clear: both;
+}
+
+
+/* To bottom as this should override everything */ 
+
+.mobile {
+    display: none;
+}
+
+.desktop {
+    display: block;
+}
+
+@media screen and (max-width: 900px) {
+  .mobile {
+    display: grid;
+  }
+
+  .desktop {
+    display: none;
+  }
+}