From cd360009270a0a9b0501ed73fe327be84824ca29 Mon Sep 17 00:00:00 2001
From: Mitja Felicijan <mitja.felicijan@gmail.com>
Date: Wed, 9 Apr 2025 08:11:05 +0200
Subject: Style update

---
 templates/base.html | 126 ++++++++++++++++++++++++++++++----------------------
 1 file changed, 74 insertions(+), 52 deletions(-)

(limited to 'templates/base.html')

diff --git a/templates/base.html b/templates/base.html
index 4fe5df3..956241a 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -11,7 +11,60 @@
 		<link href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAL69vf8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAv76+/8LBwQkAAAAAAAAAAAAAAAC+vb3/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAL+9vf/Bv78JAAAAAAAAAAAAAAAAu7q6/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC7ubr/vr29CAAAAAAAAAAAy8nJAZ6foP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAnqGj/6GipAoAAAAAHLjU/xcXHf/BwsL/I8XY/yPK3v8XGiD/IbjL/yPF2f8XGiD/Fxkf/yLF2f8gnK3/Fxog/62ztv8fwNf/FRcd/x271v8mz93/GRsi/xkXHf8p097/GiIp/xobIv8p0t3/KdPe/xocIv8fYmr/KNPe/xoZH/8aHCL/J87c/xy81/8VFxz/IsPZ/8zS0/8XGiD/Ir/R/yPH2/8XGiD/Fxkf/yPH2/8dd4T/GBog/yPJ3f8jyNr/uru9/xcUGv8cudb/EhITDKi5vRKlvMP/RUpOERwcHRAdOj4QHTk8EBwdHRAdNTgQHTo/EBwcHRAcHB0QSGduEKW4vf+koqQfHzg+EBqz0ewSFRv7EyMr/xq51vsTERb7ExUb+xq41fsau9j7ExUb+xiPp/sZudb7ExUb+xMVG/sZuNX/GKvI/BIUGfMdvdn/IrfL/xcaIP8n1eb/J9Dh/xkcIf8ZGR7/J8/f/xxCSv8ZGyH/J9Dg/ybQ4P8ZHCL/FSQs/yPK3/8UExj/GE1b/ybS5P8ZGB7/Ghwj/ynW5P8p2Ob/Ghwi/yWrtv8p1eH/Ghwi/xocIv8p1uT/J8XT/xkcIv8m1un/Hb7d/xUYH/8hzOr/HtHu/xcaIf8XGB//I8vi/xgxOv8XGSD/I8rg/yPK4P8XGiD/GUFL/yPP6f8SERj/Fhkh/x3A4f8AAAAAJ2f9/ydr//8mZPH/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlYu38J2v//ydo/f8AAAAAAAAAAAd8/fkFqf//Iob8sAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMY39awWr//8FfP3/AAAAAAAAAAAFm/7/SfD//wR+/f8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOB/f9B7v//BaX+/wAAAAAAAAAAQ878SAyZ/v9n1v4KAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADu9v8DDJb+/z3N/XgAAAAA3/sAAN/7AADf+wAA3/sAAAAAAAAAAAAAAAAAAN/7AAAAAAAAAAAAAAAAAAAAAAAAj/EAAI/5AACP8QAA3/sAAA==" rel="icon" type="image/x-icon" />
 
 		<style>
-			html { scroll-padding: 2rem; font-family: sans-serif; }
+			:root {
+				--first-child-width: 150px;
+				--primary-color: gainsboro;
+				--secondary-color: #555;
+				--tertiary-color: #eee;
+				--code-color: #f9f9f9;
+				--border-width: 1px;
+				--header-border-width: 2px;
+			}
+
+			* { box-sizing: border-box; }
+
+			html { scroll-padding-top: 1.5em; }
+			body { font-family: sans-serif; padding: 0 1em; line-height: 160%; display: flex; flex-direction: column; gap: 4em; }
+			table { width: 100%; border: var(--border-width) solid var(--primary-color); border-collapse: collapse; }
+			table thead { background: var(--primary-color); border: var(--border-width) solid var(--secondary-color); }
+			table td, table th { text-align: left; padding: 0.3em 0.5em; }
+			table tbody tr { border-bottom: var(--border-width) solid var(--primary-color); vertical-align: middle; }
+			table tr td:first-child { width: var(--first-child-width); }
+			table td.tags { display: flex; gap: 0.5em; justify-content: flex-end; align-items: center; }
+			table td.tags mark { padding: 0 0.4em; background: var(--primary-color); font-size: small; }
+
+			a { color: blue; text-decoration: none; }
+			a:hover { text-decoration: underline; }
+
+			header { border-bottom: var(--header-border-width) solid var(--secondary-color); padding: 0.5em 0; display: flex; }
+			header nav:first-child { display: flex; width: var(--first-child-width); }
+			header nav:last-child { display: flex; gap: 1.5em; }
+			header nav:last-child a { color: black; }
+
+			footer { color: gray; }
+			footer a { color: gray; text-decoration: underline; }
+
+			main { max-width: 840px; display: flex; gap: 2em; flex-direction: column; }
+			h1, h2, h3, h4 { font-size: initial; }
+			article h2, article h3, article h4 { margin-block-start: 2.5em; }
+			article h1 { font-size: 130%; line-height: 110%; }
+
+			img, video, audio { max-width: 100%; }
+			figure { display: flex; justify-content: center; margin: 2.5em 0; }
+			img, video { border: var(--border-width) solid var(--primary-color); padding: 0.5em; }
+			img.no-border, video.no-border { border: 0; padding: 0; }
+
+			pre { background: var(--code-color)!important; border: var(--border-width) solid var(--primary-color); text-wrap: wrap; padding: 1.0em; line-height: 170%; }
+			code { background: var(--code-color); padding: 0 0.2em; }
+			pre code { padding: 0; }
+
+			.capitalize { text-transform: capitalize; }
+			
+			/* Hotfixes for strange behaviour. */
+			article iframe { margin: 0!important; }
+			pre code span { display: initial !important; }
+
+			/*html { scroll-padding: 2rem; font-family: sans-serif; }
 			body { display: grid; gap: 2em; grid-template-columns: 16em auto; max-width: 1200px; line-height: 130%; }
 			h1, h2, h3, h4, h5, h6 { line-height: 120%; }
 			a { color: blue; text-decoration: none; }
@@ -33,66 +86,35 @@
 				.flow-three-column > ul { column-count: 1; }
 				.hide-on-mobile { display: none; }
 			}
-			/* Fixes embeds going to center. */
 			article iframe { margin: 0!important; }
-			/* Fix desktop and mobile code when font sizes are all over the place. */
-			pre code span { display: initial !important; }
+			pre code span { display: initial !important; }*/
 		</style>
 		<script defer src="https://app.tinyanalytics.io/pixel/isfRNEahfHiS2Ttp"></script>
 	</head>
 
 	<body>
-		<aside>
-			<div><img src="/assets/general/animation.gif"></div>
-			<p>You do not learn by relaxing. You learn by violently assaulting your problem until it surrenders its mysteries to you.</p>
-			<div>
-				<strong>About</strong>
-				<ul>
-					<li><a href="/">Home</a></li>
-					<li><a href="/projects.html">Recent Projects</a></li>
-					<li><a href="https://github.com/mitjafelicijan" target="_blank">Code on GitHub</a></li>
-					<li><a href="https://github.com/mitjafelicijan/probe" target="_blank">Probe repository</a></li>
-					<li class="hide-on-mobile"><a href="https://github.com/mitjafelicijan/dotfiles" target="_blank">My dotfiles</a></li>
-					<li><a href="/bookmarks.html">Bookmarks</a></li>
-					<li><a href="/curriculum-vitae.html">Curriculum Vitae</a></li>
-					<li class="hide-on-mobile"><a href="/feed.xml">RSS Feed</a></li>
-				</ul>
-			</div>
-
-			<div class="hide-on-mobile">
-				<strong>Tools & Fun Stuff</strong>
-				<ul>
-					<li><a href="https://github.com/mitjafelicijan/oberon" target="_blank">OpenResty Template</a></li>
-					<li><a href="https://github.com/mitjafelicijan/newsbarge" target="_blank">Newsbarge RSS rader</a></li>
-					<li><a href="https://mitjafelicijan.github.io/gguf-list/" target="_blank">GGUF model list</a></li>
-					<li><a href="https://github.com/mitjafelicijan/godot-experiments" target="_blank">Godot experiments</a></li>
-					<li><a href="https://github.com/mitjafelicijan/blpconvert" target="_blank">BLP converter</a></li>
-					<li><a href="https://mitjafelicijan.github.io/symbols/" target="_blank">Symbol explorer</a></li>
-					<li><a href="https://mitjafelicijan.github.io/hextorgba/" target="_blank">HEX to RGBA</a></li>
-					<li><a href="https://mitjafelicijan.github.io/binary-visualization/" target="_blank">Binary visualizations</a></li>
-					<li><a href="https://mitjafelicijan.github.io/mapsofdoom/" target="_blank">Maps of Doom</a></li>
-					<li><a href="/assets/general/mitja-felicijan-hairytales.pdf" target="_blank">Hairy Tales</a></li>
-				</ul>
-			</div>
-		</aside>
-
+		<header>
+			<nav>
+				<span><strong>Navigation</strong></span>
+			</nav>
+			<nav>
+				<span><a href="/">Home</a></span>
+				<span><a href="/projects.html">Projects</a></span>
+				<span><a href="https://github.com/mitjafelicijan/probe" target="_blank">Probe</a></span>
+				<span><a href="https://github.com/mitjafelicijan" target="_blank">Code</a></span>
+				<span><a href="https://github.com/mitjafelicijan/dotfiles" target="_blank">Dotfiles</a></span>
+				<span><a href="/curriculum-vitae.html">CV</a></span>
+				<span><a href="/feed.xml">RSS</a></span>
+			</nav>
+		</header>
 		<main>
-			<div>
-				{{ block "content" . }}{{ end }}
-			</div>
-
-			<footer>
-				<hr>
-				<p><big><strong>Want to comment or have something to add?</strong></big></p>
-				<p>You can write me an email at <a href="mailto:mitja.felicijan@gmail.com">mitja.felicijan@gmail.com</a> or catch up with me <a href="https://telegram.me/mitjafelicijan" target="_blank">on Telegram</a>.</p>
-				<hr>
-				<p><small>This page's is also available as <a href="/feed.xml" target="_blank">RSS feed</a>. Page was built with <a href="https://github.com/mitjafelicijan/jbmafp" target="_blank">jbmafp</a>.</small></p>
-			</footer>
+			{{ block "content" . }}{{ end }}
 		</main>
 
-		<script>
-			document.querySelectorAll("table").forEach(t => t.setAttribute("border", 1));
-		</script>
+		<footer>
+			<p>You can write me an email at <a href="mailto:mitja.felicijan@gmail.com">mitja.felicijan@gmail.com</a> or catch up with me <a href="https://telegram.me/mitjafelicijan" target="_blank">on Telegram</a>.</p>
+			<p>This page's is also available as <a href="/feed.xml" target="_blank">RSS feed</a>. Page was built with <a href="https://github.com/mitjafelicijan/jbmafp" target="_blank">jbmafp</a>.</p>
+		</footer>
 	</body>
 </html>
 
-- 
cgit v1.2.3