[styles,_header] Changed elements from block to inline in header

In the old way, browsers that do not support CSS will still show the header with proper "vertical" alignment.
This is a problem, since a good amount of the page on the top will be just the sidebar.
Now, everything is layed out a lot more flat-ly on such browsers, making better use of available space.

2 files changed, 27 insertions, 20 deletions

diff --git a/src/_header.html b/src/_header.html
index 3f9ac59..e82a7a7 100644
--- a/src/_header.html
+++ b/src/_header.html
@@ -27,52 +27,52 @@
 	<nav id="sidebar">
 		<nav id="header">
 			<a href="/">Home</a>
-			<div id="expandNavbarBtn" class="btn">&#x25B2;</div>
+			<span id="expandNavbarBtn" class="btn">&#x25B2;</span>
 			<script type="text/javascript" src="/scripts/expand-navbar.js" crossorigin="anonymous" defer></script>
 		</nav>
 
 		<nav id="index">
 			<span>Content</span>
-			<div class="arrowed-list">
+			<span 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>
 			<span>Hosted data</span>
-			<div class="arrowed-list">
+			<span class="arrowed-list">
 				<a href="/archives">Archives</a>
 				<a href="/archived-websites">Archived Web</a>
-			</div>
+			</span>
 			<span>My Work</span>
-			<div class="arrowed-list">
+			<span class="arrowed-list">
 				<a href="/assets">Assets</a>
 				<a href="/software">Software</a>
 				<a href="/about">About</a>
-			</div>
+			</span>
 		</nav>
 
 		<nav id="settingsWrapper">
-			<div id="changeThemeBtn" class="btn setting-btn">Light<br>theme</div>
-			<div id="changeWidthBtn" class="btn setting-btn">Wide<br>article</div>
+			<span id="changeThemeBtn" class="btn setting-btn">Light<span class="br"></span>theme</span>
+			<span id="changeWidthBtn" class="btn setting-btn">Wide<span class="br"></span>article</span>
 		</nav>
 
 		<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><br>
+			<span class="br"></span><span class="br"></span>
 			<a href="/privacy.html" title="Privacy policy">Privacy policy</a> |
-			<a href="/accessibility.html" title="Accessibility">Accessibility</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="/accessibility.html" title="Accessibility">Accessibility</a><span class="br"></span>
+			<a href="/regarding-js.html" title="Regarding usage of JavaScript">Regarding JavaScript</a><span class="br"></span>
+			<a href="/acknowledgements.html" title="Acknowledgements">Acknowledgements</a><span class="br"></span>
+			<span class="br"></span>
 			<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><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><br>
-			<a href="https://www.romanzolotarev.com/ssg.html" target="_blank" class="link-tab">ssg by Roman Zolotarev</a><br>
-			<a href="https://kristaps.bsd.lv/lowdown/" target="_blank" class="link-tab">lowdown by Kristaps Dzonsons</a><br>
+			<a href="/about/#contact" target="_blank" title="Contact">Contact</a><span class="br"></span>
+			<a href="https://bg.linkedin.com/in/kamen-mladenov" target="_blank" title="Linkedin">LinkedIn</a><span class="br"></span>
+			<span class="br"></span>
+			<a href="https://gitlab.com/Syndamia/syndamiadotcom" target="_blank" class="link-tab">Powered with:</a><span class="br"></span>
+			<a href="https://www.romanzolotarev.com/ssg.html" target="_blank" class="link-tab">ssg by Roman Zolotarev</a><span class="br"></span>
+			<a href="https://kristaps.bsd.lv/lowdown/" target="_blank" class="link-tab">lowdown by Kristaps Dzonsons</a><span class="br"></span>
 			<a href="https://pubs.opengroup.org/onlinepubs/9699919799/utilities/awk.html" target="_blank" class="link-tab">awk</a> and <a href="https://www.gnu.org/software/bash/" target="_blank" class="link-tab">GNU bash</a>
 		</nav>
 	</nav>
diff --git a/src/styles.css b/src/styles.css
index d6bddfc..11249d6 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -300,6 +300,13 @@ dt, dd {
       padding-left: 49px;
     }
 
+/* Very old/unfinished browser compatibility */
+
+    /* Inside _header we use <span class="br"></span>, instead of <br>, because if your browser
+     * doesn't support CSS, we want most stuff to be aligned on a single line, rather than preserve
+     * the "vertical" layout */
+.br { display: block; }
+
 /* lowdown classes and related settings */
 
 .footnotes { font-size: 0.9em; margin-top: 3em; }