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

1 files changed, 34 insertions, 34 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>