[styles] Reworked sidebar to be separated into "parts"

1 files changed, 37 insertions, 19 deletions

diff --git a/src/styles.css b/src/styles.css
index 197472f..1a02b79 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -82,7 +82,7 @@ body {
     color: var(--fg-color);
     min-height: calc(100vh - 16px);
   }
-  body > *     { background-color: var(--bg-color); }
+  nav, article     { background-color: var(--bg-color); }
   body, td, th { font: 18px sans-serif; }
   *            { line-height: 1.3em; }
 
@@ -268,37 +268,54 @@ dt { font-size: 1.2em; }
 
 /* Main elements: content-wrapper, sidebar, article, header, footer */
 
-#content-wrapper, .sidebar {
+#content-wrapper {
     border-right: 3px solid var(--accent-line-color);
     display: flex;
     flex-direction: row;
     min-height: calc(100vh - 16px);
   }
-  .sidebar {
-      border: 3px solid var(--accent-line-color);
-      border-top: none;
-      border-right: none;
-      display: flex;
-      flex-direction: column;
+  #sidebar {
       font-size: 1.2em;
       max-width: 11.2em;
-      padding: 0 1em;
       text-align: left;
+      background-color: var(--body-bg);
+      margin-right: 8px;
     }
-    #settingsWrapper { margin: 0.58em 0 1em 0; font-size: 1.2em; }
-    .header, .footer { font-family: Arial; }
-    .header          { margin: 0.8em 0; font-size: 1.5em; }
-    .footer {
+    #sidebar > * {
+        border: 3px solid var(--accent-line-color);
+        box-sizing: border-box;
+        padding: 1rem 1rem;
+        width: 100%;
+      }
+    #sidebar > :not(:first-child) { margin-top: 1.5rem; }
+
+    #header, #footer { font-family: Arial; }
+    #header {
+        border-right: none;
+        font-size: 1.5em;
+      }
+    #index {
+        border-right: none;
+        border-bottom: none;
+      }
+    #settingsWrapper {
+        border-top: none;
+        border-bottom: none;
+        margin: 0.58em 0 1em 0;
+        font-size: 1.2em;
+      }
+    #footer {
         font-size: 0.7em;
-        margin-bottom: 1em;
         overflow-x: hidden;
+        border-left: none;
+        border-top: none;
       }
-    .footer > * { white-space: nowrap; }
+    #footer > * { white-space: nowrap; }
 
     /* expand-navbar.js */
     #expandNavbarBtn                { float: right; margin: 0.25em 0 0 1em; }
     .sidebar-hidden                 { min-height: auto; position: absolute; }
-    .sidebar-hidden > :not(.header) { display: none; }
+    .sidebar-hidden > :not(#header) { display: none; }
     .sidebar-hidden + .noMaxWidth   { margin-top: 6em; }
 
     article {
@@ -393,12 +410,13 @@ dt { font-size: 1.2em; }
       }
     #index-contents-img { max-width: 4.38em; }
 
-  .sidebar {
+  #sidebar {
       max-width: initial;
-      padding-right: 1em;
+      margin: 0;
     }
+    #sidebar > * { border-right: none; }
     .sidebar-hidden                 { position: initial; }
-    .sidebar-hidden > :not(.header) { display: none; }
+    .sidebar-hidden > :not(#header) { display: none; }
     .sidebar-hidden + .noMaxWidth   { margin-top: 0; }
     /* page-width.js */
     #changeWidthBtn { display: none; }