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

3 files changed, 72 insertions, 54 deletions

diff --git a/src/_header.html b/src/_header.html
index c7faa19..1766b4c 100644
--- a/src/_header.html
+++ b/src/_header.html
@@ -24,51 +24,51 @@
 	<title></title>
 </head>
 <body id="content-wrapper">
-	<nav class="sidebar">
-		<span class="header">
+	<nav id="sidebar">
+		<nav id="header">
 			<a href="/">Home</a>
 			<img id="expandNavbarBtn" class="unzoomable btn setting-btn icon" src="/img/layout-navbar-collapse.svg" alt="Expand navbar">
-			<script type="text/javascript" src="/scripts/expand-navbar.js" integrity="sha512-lRY15AT9iXaZFHF+GvROkKVs2tCorJh8e8kJ9gnUwUuNb5oJRhwr+9a/6F+5pGtKhRdBc86GVdCWQ4bEkq2mCQ==" crossorigin="anonymous" defer></script>
-		</span>
+			<script type="text/javascript" src="/scripts/expand-navbar.js" integrity="sha512-R9CnFPK6yeDa1BiiYqZ87CB7Hp40D/tWsOdGK5LGWq1g3SxXaajPbrV165o3swckHRJt6Txec/adR7qc/zxVuw==" crossorigin="anonymous" defer></script>
+		</nav>
 
-		<span>Content</span>
-		<div class="arrowed-list">
-			<a href="/blog">Blog</a>
-			<a href="/tutorials">Tutorials</a>
-			<a href="/talks">Talks</a>
-			<a href="/reposts">Reposts</a>
-		</div>
-		<span>Hosted data</span>
-		<div class="arrowed-list">
-			<a href="/archives">Archives</a>
-			<a href="/archived-websites">Archived Web</a>
-		</div>
-		<span>My Work</span>
-		<div class="arrowed-list">
-			<a href="/assets">Assets</a>
-			<a href="/software">Software</a>
-			<a href="/about">About</a>
-		</div>
+		<nav id="index">
+			<span>Content</span>
+			<div class="arrowed-list">
+				<a href="/blog">Blog</a>
+				<a href="/tutorials">Tutorials</a>
+				<a href="/talks">Talks</a>
+				<a href="/reposts">Reposts</a>
+			</div>
+			<span>Hosted data</span>
+			<div class="arrowed-list">
+				<a href="/archives">Archives</a>
+				<a href="/archived-websites">Archived Web</a>
+			</div>
+			<span>My Work</span>
+			<div class="arrowed-list">
+				<a href="/assets">Assets</a>
+				<a href="/software">Software</a>
+				<a href="/about">About</a>
+			</div>
+		</nav>
 
-		<div id="settingsWrapper">
+		<nav id="settingsWrapper">
 			<img id="changeThemeBtn" class="unzoomable btn setting-btn icon" src="/img/sun.svg" alt="Toggle theme">
 			<img id="changeWidthBtn" class="unzoomable btn setting-btn icon" src="/img/viewport-wide.svg" alt="Toggle full width">
-		</div>
-
-		<div class="spacer"></div>
+		</nav>
 
-		<nav class="footer">
+		<nav id="footer">
 			<a href="/license.html" title="CC BY-SA 4.0 and GNU GPLv3">CC BY-SA 4.0 and GNU GPLv3</a>
-			<br>
-			<a href="/policies.html" title="Policies">Policies</a> |
-			<a href="/regarding-js.html" title="Regarding usage of JavaScript">Regarding JavaScript</a> |
-			<a href="/acknowledgements.html" title="Acknowledgements">Acknowledgements</a>
+			<br><br>
+			<a href="/policies.html" title="Policies">Policies</a><br>
+			<a href="/regarding-js.html" title="Regarding usage of JavaScript">Regarding JavaScript</a><br>
+			<a href="/acknowledgements.html" title="Acknowledgements">Acknowledgements</a><br>
 			<br>
 			<a href="https://gitlab.com/Syndamia" target="_blank" title="GitLab">GitLab</a> |
 			<a href="https://github.com/Syndamia" target="_blank" title="GitHub">GitHub</a> |
-			<a href="/about/#contact" target="_blank" title="Contact">Contact</a> |
-			<a href="https://bg.linkedin.com/in/kamen-mladenov" target="_blank" title="Linkedin">LinkedIn</a>
-			<br><br>
+			<a href="/about/#contact" target="_blank" title="Contact">Contact</a><br>
+			<a href="https://bg.linkedin.com/in/kamen-mladenov" target="_blank" title="Linkedin">LinkedIn</a><br>
+			<br>
 			<a href="https://gitlab.com/Syndamia/syndamiadotcom" target="_blank" class="link-tab">Powered with:</a>
 			<a href="https://www.romanzolotarev.com/ssg.html" target="_blank" class="link-tab">ssg by Roman Zolotarev</a>
 			<a href="https://kristaps.bsd.lv/lowdown/" target="_blank" class="link-tab">lowdown by Kristaps Dzonsons</a>
diff --git a/src/scripts/expand-navbar.js b/src/scripts/expand-navbar.js
index 378efc5..9ef896f 100644
--- a/src/scripts/expand-navbar.js
+++ b/src/scripts/expand-navbar.js
@@ -1,5 +1,5 @@
 const expandBtn = document.getElementById('expandNavbarBtn');
-const sidebarElem = document.getElementsByClassName('sidebar')[0];
+const sidebarElem = document.getElementById('sidebar');
 
 if (localStorage.getItem('navbar') === 'hidden' || window.innerWidth <= 610) {
 	expandBtn.src = '/img/layout-navbar-expand.svg';
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; }