Style update

1 files changed, 74 insertions, 52 deletions

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>