more consistent styling

2024-05-13 13:35:21 +02:00 · 2024-05-13 13:35:21 +02:00 · 879968a7e1
commit 879968a7e1
parent 7ad81f33c3
26 changed files with 156 additions and 121 deletions
--- a/dist/extended.css
+++ b/dist/extended.css
@ -11,13 +11,19 @@
  gap: 4rem;
  list-style: circle;
  background: var(--menu-bg-color);
-  transition: top .3s ease-in-out;
+  transition: all .3s ease-in-out;
 }
 #main-menu > li {
  padding: 0;
 }
 body>header.small + #main-menu {
-  top: calc(var(--header-height) * var(--header-multiplier));
+  top: calc(var(--header-height-small) + 2rem);
+  height: 14rem;
+  width: 6rem;
+  flex-flow: column nowrap;
+  gap: .5rem;
+  align-items: stretch;
+  padding: 0 1rem;
 }
 pre {
  background: var(--emboss-color);
--- a/dist/index.html
+++ b/dist/index.html
@ -3,7 +3,7 @@

 <head>
  <meta charset=utf-8>
-  <base href="http://localhost:8080/">
+  <base href="https://koehr.in/">
  <title>Norman Köhring // the codeartist — programmer and engineer based in Berlin</title>
  <meta content="The personal page and weblog of Norman Köhring" name=description>
  <meta content="Norman Köhring" name=author>
--- a/dist/mail.svg
+++ b/dist/mail.svg
@ -1 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="#eacb8b" stroke-width="2" d="m21 8-3.6 2c-2 1-3 1.6-4 1.8a7 7 0 0 1-2.8 0c-1-.2-2-.7-4-1.8L3 8m3.2 11h11.6c1.1 0 1.7 0 2.1-.2.4-.2.7-.5.9-.9.2-.4.2-1 .2-2.1V8.2c0-1.1 0-1.7-.2-2.1a2 2 0 0 0-.9-.9c-.4-.2-1-.2-2.1-.2H6.2c-1.1 0-1.7 0-2.1.2a2 2 0 0 0-.9.9C3 6.5 3 7 3 8.2v7.6c0 1.1 0 1.7.2 2.1.2.4.5.7.9.9.4.2 1 .2 2.1.2Z"/></svg>
--- a/dist/now/index.html
+++ b/dist/now/index.html
@ -3,7 +3,7 @@

 <head>
  <meta charset="utf-8">
-  <base href="http://localhost:8080/"> 
+  <base href="https://koehr.in/"> 
  <title>/now // the codeartist — programmer and engineer based in Berlin</title>
  <meta name="description" content="Homepage, Portfolio and CV of Norman Köhring" />
  <meta content="The personal page and weblog of Norman Köhring" name=description>
@ -31,11 +31,14 @@
 </head>

 <body>
-  <main id="til">
-    <header>Now -- What I'm up to right now</header>
+  <main id="now" class="posts">
+    <header>
+      <h1>Now -- What I'm up to right now</h1>
+    </header>

    <p><em>This page shows what I'm up to at the moment, following the idea of the <a href="https://sive.rs/nowff">/now page</a> introduced by <a href="https://sive.rs/">Derek Sivers</a>. You can find more now pages on <a href="https://nownownow.com/">nownownow</a>.</em></p>
 <p>Last updated: 2024-05-12</p>
+<p>Still live in Berlin where I am working fully remote. I'm appproaching the second anniversary at <a href="https://codegaia.io">Code Gaia</a> now and have no plans to change any of it.</p>
 <h2>Priorities</h2>
 <blockquote>
 <p>I do a lot of things all the time and have a hard time to focus. Most of my energy right now hopefully flows into the following things:</p>
@ -43,6 +46,7 @@
 <ul>
 <li>This homepage.</li>
 <li>Keeping up the pace professionally by taking up more management responsibilities.</li>
+<li>Ramping up my side-project game (mainly by doing smaller freelancing jobs).</li>
 <li>Fleshing out a long form D&amp;D campaign (&quot;Out Of The Cold Shadow&quot;).</li>
 <li>Writing down more short adventures and one-shots and publish them on <a href="https://tiskifer.dk">tiskifer.dk</a>.</li>
 <li>My wedding and honeymoon in June!</li>
@ -94,6 +98,6 @@ by <a href="https://openlibrary.org/authors/OL7564045A/Camille_Fournier">Camille
    <li><a title="Hardware I use" href="/setup">/setup</a></li>
  </menu>
  <link href=/extended.css rel=stylesheet>
-  <link href=/til.css rel=stylesheet>
+  <link href=/posts.css rel=stylesheet>
  <script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>
 </body>
--- a/dist/posts.css
+++ b/dist/posts.css
@ -0,0 +1,17 @@
+main.posts {
+  margin: calc(var(--header-height-small) + 2rem) auto 4rem;
+}
+main.posts > #content > h1 {
+  padding: 0;
+}
+
+main.posts article {
+  margin: 1rem 0;
+}
+main.posts article>div {
+  line-height: 2;
+}
+main.posts article>time,
+main.posts article>div>a.external {
+  color: gray;
+}
--- a/dist/style.css
+++ b/dist/style.css
@ -3,6 +3,7 @@
  --header-fg-color: #a3bd8d;
  --header-height: 192px;
  --header-multiplier: .25;
+  --header-height-small: calc(var(--header-height)*var(--header-multiplier));
  --page-bg-color: #232425;
  --page-fg-color: #7e9fbe;
  --menu-bg-color: #000;
@ -62,7 +63,7 @@ body>header {
 }

 body>#spacer {
-  height: calc(var(--header-height) * var(--header-multiplier));
+  height: var(--header-height-small);
 }

 body>header {
@ -87,7 +88,7 @@ body>header>svg {
 body>main {
  width: 960px;
  max-width: 98vw;
-  margin: var(--header-height) auto 4em;
+  margin: var(--header-height) auto 4rem;
 }

 a {
@ -101,14 +102,17 @@ a {
  margin: 2rem 0;
 }

-#content>h1 {
+#content>h1,
+main.posts > header > h1 {
  margin: 0 0 .25em;
-  padding-top: 2em;
  font-size: 2rem;
  font-variant: small-caps;
  text-shadow: 1px 1px 0 var(--emboss-color);
  color: var(--header-fg-color);
 }
+#content>h1 {
+  padding-top: 2em;
+}

 #menu {
  display: flex;
--- a/dist/til.css
+++ b/dist/til.css
@ -1,15 +0,0 @@
-main#til > header {
-  margin: 0 0 2rem 0;
-  font-size: 1.5em;
-}
-
-article.til {
-  margin: 1rem 0;
-}
-article.til>div {
-  line-height: 2;
-}
-article.til>time,
-article.til>div>a.external {
-  color: gray;
-}
--- a/dist/til/2021-08-31.html
+++ b/dist/til/2021-08-31.html
@ -3,7 +3,7 @@

 <head>
  <meta charset="utf-8">
-  <base href="http://localhost:8080/"> 
+  <base href="https://koehr.in/"> 
  <title>Today I learned // the codeartist — programmer and engineer based in Berlin</title>
  <meta name="description" content="Homepage, Portfolio and CV of Norman Köhring" />
  <meta content="The personal page and weblog of Norman Köhring" name=description>
@ -31,14 +31,14 @@
 </head>

 <body>
-  <main id="til">
-    <header>TIL -- Today I learned</header>
+  <main id="til" class="posts">
+    <header>
+      <h1>TIL -- Today I learned</h1>
+    </header>

    <h1>There is a HTML tag for &quot;Word Break Opportunity&quot;</h1>
 <p><a href="https://www.w3schools.com/TAGS/tag_wbr.asp">source</a></p>
 <p>For example: <code>Kauf&lt;wbr/&gt;haus</code>.</p>
-
-    <a href="/til">back</a>
  </main>
  <div id="spacer"></div>
  <header id="header" class="small">
@ -78,6 +78,6 @@
    <li><a title="Hardware I use" href="/setup">/setup</a></li>
  </menu>
  <link href=/extended.css rel=stylesheet>
-  <link href=/til.css rel=stylesheet>
+  <link href=/posts.css rel=stylesheet>
  <script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>
 </body>
--- a/dist/til/2021-09-03.html
+++ b/dist/til/2021-09-03.html
@ -3,7 +3,7 @@

 <head>
  <meta charset="utf-8">
-  <base href="http://localhost:8080/"> 
+  <base href="https://koehr.in/"> 
  <title>Today I learned // the codeartist — programmer and engineer based in Berlin</title>
  <meta name="description" content="Homepage, Portfolio and CV of Norman Köhring" />
  <meta content="The personal page and weblog of Norman Köhring" name=description>
@ -31,13 +31,13 @@
 </head>

 <body>
-  <main id="til">
-    <header>TIL -- Today I learned</header>
+  <main id="til" class="posts">
+    <header>
+      <h1>TIL -- Today I learned</h1>
+    </header>

    <h1>Bush refused offer to discuss Osama Bin Laden handover</h1>
 <p><a href="https://www.theguardian.com/world/2001/oct/14/afghanistan.terrorism5">source</a></p>
-
-    <a href="/til">back</a>
  </main>
  <div id="spacer"></div>
  <header id="header" class="small">
@ -77,6 +77,6 @@
    <li><a title="Hardware I use" href="/setup">/setup</a></li>
  </menu>
  <link href=/extended.css rel=stylesheet>
-  <link href=/til.css rel=stylesheet>
+  <link href=/posts.css rel=stylesheet>
  <script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>
 </body>
--- a/dist/til/2021-09-04.html
+++ b/dist/til/2021-09-04.html
@ -3,7 +3,7 @@

 <head>
  <meta charset="utf-8">
-  <base href="http://localhost:8080/"> 
+  <base href="https://koehr.in/"> 
  <title>Today I learned // the codeartist — programmer and engineer based in Berlin</title>
  <meta name="description" content="Homepage, Portfolio and CV of Norman Köhring" />
  <meta content="The personal page and weblog of Norman Köhring" name=description>
@ -31,13 +31,13 @@
 </head>

 <body>
-  <main id="til">
-    <header>TIL -- Today I learned</header>
+  <main id="til" class="posts">
+    <header>
+      <h1>TIL -- Today I learned</h1>
+    </header>

    <p><code>git fetch $repo_url $remote_branch:$new_local_branch</code></p>
 <p><a href="https://twitter.com/lucas59356/status/1433507127570669569">source</a></p>
-
-    <a href="/til">back</a>
  </main>
  <div id="spacer"></div>
  <header id="header" class="small">
@ -77,6 +77,6 @@
    <li><a title="Hardware I use" href="/setup">/setup</a></li>
  </menu>
  <link href=/extended.css rel=stylesheet>
-  <link href=/til.css rel=stylesheet>
+  <link href=/posts.css rel=stylesheet>
  <script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>
 </body>
--- a/dist/til/2021-09-05.html
+++ b/dist/til/2021-09-05.html
@ -3,7 +3,7 @@

 <head>
  <meta charset="utf-8">
-  <base href="http://localhost:8080/"> 
+  <base href="https://koehr.in/"> 
  <title>Today I learned // the codeartist — programmer and engineer based in Berlin</title>
  <meta name="description" content="Homepage, Portfolio and CV of Norman Köhring" />
  <meta content="The personal page and weblog of Norman Köhring" name=description>
@ -31,13 +31,13 @@
 </head>

 <body>
-  <main id="til">
-    <header>TIL -- Today I learned</header>
+  <main id="til" class="posts">
+    <header>
+      <h1>TIL -- Today I learned</h1>
+    </header>

    <h1>E-Mail that isn't spam is called ham!</h1>
 <p><a href="https://twitter.com/claranellist/status/1433539284779220997">source</a></p>
-
-    <a href="/til">back</a>
  </main>
  <div id="spacer"></div>
  <header id="header" class="small">
@ -77,6 +77,6 @@
    <li><a title="Hardware I use" href="/setup">/setup</a></li>
  </menu>
  <link href=/extended.css rel=stylesheet>
-  <link href=/til.css rel=stylesheet>
+  <link href=/posts.css rel=stylesheet>
  <script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>
 </body>
--- a/dist/til/2022-02-22.html
+++ b/dist/til/2022-02-22.html
@ -3,7 +3,7 @@

 <head>
  <meta charset="utf-8">
-  <base href="http://localhost:8080/"> 
+  <base href="https://koehr.in/"> 
  <title>Today I learned // the codeartist — programmer and engineer based in Berlin</title>
  <meta name="description" content="Homepage, Portfolio and CV of Norman Köhring" />
  <meta content="The personal page and weblog of Norman Köhring" name=description>
@ -31,8 +31,10 @@
 </head>

 <body>
-  <main id="til">
-    <header>TIL -- Today I learned</header>
+  <main id="til" class="posts">
+    <header>
+      <h1>TIL -- Today I learned</h1>
+    </header>

    <h1>Adding aliases in vite with typescript needs the same alias in tsconfig</h1>
 <p>For example:</p>
@ -67,8 +69,6 @@ export default defineConfig({
 }
 </code></pre>
 <p>The asterixes in the syntax are important (<code>alias/*</code> =&gt; <code>./path/*</code>).</p>
-
-    <a href="/til">back</a>
  </main>
  <div id="spacer"></div>
  <header id="header" class="small">
@ -108,6 +108,6 @@ export default defineConfig({
    <li><a title="Hardware I use" href="/setup">/setup</a></li>
  </menu>
  <link href=/extended.css rel=stylesheet>
-  <link href=/til.css rel=stylesheet>
+  <link href=/posts.css rel=stylesheet>
  <script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>
 </body>
--- a/dist/til/2022-03-22.html
+++ b/dist/til/2022-03-22.html
@ -3,7 +3,7 @@

 <head>
  <meta charset="utf-8">
-  <base href="http://localhost:8080/"> 
+  <base href="https://koehr.in/"> 
  <title>Today I learned // the codeartist — programmer and engineer based in Berlin</title>
  <meta name="description" content="Homepage, Portfolio and CV of Norman Köhring" />
  <meta content="The personal page and weblog of Norman Köhring" name=description>
@ -31,16 +31,16 @@
 </head>

 <body>
-  <main id="til">
-    <header>TIL -- Today I learned</header>
+  <main id="til" class="posts">
+    <header>
+      <h1>TIL -- Today I learned</h1>
+    </header>

    <h1>There is a file system for EFI vars now</h1>
 <p><a href="https://www.kernel.org/doc/html/latest/filesystems/efivarfs.html">source</a></p>
 <p>On kernel updates I saw a recurring &quot;EFI variables are not supported on this system&quot;, so I investigated and learned that the new EFI variables are provided via a file system that needs to be mounted first:</p>
 <pre><code class="language-sh">mount -t efivarfs efivarfs /sys/firmware/efi/efivars
 </code></pre>
-
-    <a href="/til">back</a>
  </main>
  <div id="spacer"></div>
  <header id="header" class="small">
@ -80,6 +80,6 @@
    <li><a title="Hardware I use" href="/setup">/setup</a></li>
  </menu>
  <link href=/extended.css rel=stylesheet>
-  <link href=/til.css rel=stylesheet>
+  <link href=/posts.css rel=stylesheet>
  <script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>
 </body>
--- a/dist/til/2022-03-28.html
+++ b/dist/til/2022-03-28.html
@ -3,7 +3,7 @@

 <head>
  <meta charset="utf-8">
-  <base href="http://localhost:8080/"> 
+  <base href="https://koehr.in/"> 
  <title>Today I learned // the codeartist — programmer and engineer based in Berlin</title>
  <meta name="description" content="Homepage, Portfolio and CV of Norman Köhring" />
  <meta content="The personal page and weblog of Norman Köhring" name=description>
@ -31,8 +31,10 @@
 </head>

 <body>
-  <main id="til">
-    <header>TIL -- Today I learned</header>
+  <main id="til" class="posts">
+    <header>
+      <h1>TIL -- Today I learned</h1>
+    </header>

    <h1>pwdx command shows the working path of a process</h1>
 <p><a href="https://twitter.com/mani_maranp/status/1508476973529825281">source</a></p>
@ -40,8 +42,6 @@
 <pre><code class="language-sh">% pwdx 1984
 &gt; 1984: /home/george/ttlctrl
 </code></pre>
-
-    <a href="/til">back</a>
  </main>
  <div id="spacer"></div>
  <header id="header" class="small">
@ -81,6 +81,6 @@
    <li><a title="Hardware I use" href="/setup">/setup</a></li>
  </menu>
  <link href=/extended.css rel=stylesheet>
-  <link href=/til.css rel=stylesheet>
+  <link href=/posts.css rel=stylesheet>
  <script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>
 </body>
--- a/dist/til/2022-04-25.html
+++ b/dist/til/2022-04-25.html
@ -3,7 +3,7 @@

 <head>
  <meta charset="utf-8">
-  <base href="http://localhost:8080/"> 
+  <base href="https://koehr.in/"> 
  <title>Today I learned // the codeartist — programmer and engineer based in Berlin</title>
  <meta name="description" content="Homepage, Portfolio and CV of Norman Köhring" />
  <meta content="The personal page and weblog of Norman Köhring" name=description>
@ -31,8 +31,10 @@
 </head>

 <body>
-  <main id="til">
-    <header>TIL -- Today I learned</header>
+  <main id="til" class="posts">
+    <header>
+      <h1>TIL -- Today I learned</h1>
+    </header>

    <h1>Jest mocks are ...different</h1>
 <p>If you want to mock an imported function in Jest in a way that allows you to check if it has been called, you can not do the seemingly straighforward:</p>
@ -57,8 +59,6 @@ jest.mock('@/path/to/module', () =&gt; ({
 // ...in test descriptions
 expect(thatFunction).toHaveBeenCalled()
 </code></pre>
-
-    <a href="/til">back</a>
  </main>
  <div id="spacer"></div>
  <header id="header" class="small">
@ -98,6 +98,6 @@ expect(thatFunction).toHaveBeenCalled()
    <li><a title="Hardware I use" href="/setup">/setup</a></li>
  </menu>
  <link href=/extended.css rel=stylesheet>
-  <link href=/til.css rel=stylesheet>
+  <link href=/posts.css rel=stylesheet>
  <script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>
 </body>
--- a/dist/til/2022-06-15.html
+++ b/dist/til/2022-06-15.html
@ -3,7 +3,7 @@

 <head>
  <meta charset="utf-8">
-  <base href="http://localhost:8080/"> 
+  <base href="https://koehr.in/"> 
  <title>Today I learned // the codeartist — programmer and engineer based in Berlin</title>
  <meta name="description" content="Homepage, Portfolio and CV of Norman Köhring" />
  <meta content="The personal page and weblog of Norman Köhring" name=description>
@ -31,14 +31,14 @@
 </head>

 <body>
-  <main id="til">
-    <header>TIL -- Today I learned</header>
+  <main id="til" class="posts">
+    <header>
+      <h1>TIL -- Today I learned</h1>
+    </header>

    <h1>Disallowed Focussed Tests and how it saved my day</h1>
 <p>Today I was about to push a focussed test. A focussed test, you ask?</p>
 <p>In Jest (and others) one can run only a specific test, by writing <code>it.only(...</code>. Pushing this to production might create some funny or not so funny side effects though. Luckily there is the <code>no-focussed-tests</code> linter rule in <a href="https://github.com/jest-community/eslint-plugin-jest">eslint-plugin-jest</a>.</p>
-
-    <a href="/til">back</a>
  </main>
  <div id="spacer"></div>
  <header id="header" class="small">
@ -78,6 +78,6 @@
    <li><a title="Hardware I use" href="/setup">/setup</a></li>
  </menu>
  <link href=/extended.css rel=stylesheet>
-  <link href=/til.css rel=stylesheet>
+  <link href=/posts.css rel=stylesheet>
  <script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>
 </body>
--- a/dist/til/2024-05-12.html
+++ b/dist/til/2024-05-12.html
@ -3,7 +3,7 @@

 <head>
  <meta charset="utf-8">
-  <base href="http://localhost:8080/"> 
+  <base href="https://koehr.in/"> 
  <title>Today I learned // the codeartist — programmer and engineer based in Berlin</title>
  <meta name="description" content="Homepage, Portfolio and CV of Norman Köhring" />
  <meta content="The personal page and weblog of Norman Köhring" name=description>
@ -31,8 +31,10 @@
 </head>

 <body>
-  <main id="til">
-    <header>TIL -- Today I learned</header>
+  <main id="til" class="posts">
+    <header>
+      <h1>TIL -- Today I learned</h1>
+    </header>

    <h1>Sort list of strings in Javascript</h1>
 <p><a href="https://stackoverflow.com/questions/6712034/sort-array-by-firstname-alphabetically-in-javascript">source</a></p>
@ -41,8 +43,6 @@
 <p>or reversed order:</p>
 <pre><code class="language-ts">users.sort((a, b) =&gt; a.firstname.localeCompare(b.firstname) * -1)
 </code></pre>
-
-    <a href="/til">back</a>
  </main>
  <div id="spacer"></div>
  <header id="header" class="small">
@ -82,6 +82,6 @@
    <li><a title="Hardware I use" href="/setup">/setup</a></li>
  </menu>
  <link href=/extended.css rel=stylesheet>
-  <link href=/til.css rel=stylesheet>
+  <link href=/posts.css rel=stylesheet>
  <script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>
 </body>
--- a/dist/til/index.html
+++ b/dist/til/index.html
@ -3,7 +3,7 @@

 <head>
  <meta charset="utf-8">
-  <base href="http://localhost:8080/"> 
+  <base href="https://koehr.in/"> 
  <title>Today I learned // the codeartist — programmer and engineer based in Berlin</title>
  <meta name="description" content="Homepage, Portfolio and CV of Norman Köhring" />
  <meta content="The personal page and weblog of Norman Köhring" name=description>
@ -31,8 +31,10 @@
 </head>

 <body>
-  <main id="til">
-    <header>TIL -- Today I learned</header>
+  <main id="til" class="posts">
+    <header>
+      <h1>TIL -- Today I learned</h1>
+    </header>

    <article class="til">
  <time datetime="2024-05-12">2024-05-12</time>
@ -104,8 +106,6 @@
    (<a rel="nofollow noopener" class="external" href="https://www.w3schools.com/TAGS/tag_wbr.asp" target="_blank">source</a>)
  </div>
 </article>
-
-    <a href="/til">back</a>
  </main>
  <div id="spacer"></div>
  <header id="header" class="small">
@ -145,6 +145,6 @@
    <li><a title="Hardware I use" href="/setup">/setup</a></li>
  </menu>
  <link href=/extended.css rel=stylesheet>
-  <link href=/til.css rel=stylesheet>
+  <link href=/posts.css rel=stylesheet>
  <script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>
 </body>
--- a/layouts/now/index.html
+++ b/layouts/now/index.html
@ -31,8 +31,10 @@
 </head>

 <body>
-  <main id="til">
-    <header>Now -- What I'm up to right now</header>
+  <main id="now" class="posts">
+    <header>
+      <h1>Now -- What I'm up to right now</h1>
+    </header>

    @contents
  </main>
@ -74,6 +76,6 @@
    <li><a title="Hardware I use" href="/setup">/setup</a></li>
  </menu>
  <link href=/extended.css rel=stylesheet>
-  <link href=/til.css rel=stylesheet>
+  <link href=/posts.css rel=stylesheet>
  <script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>
 </body>
--- a/layouts/til/index.html
+++ b/layouts/til/index.html
@ -31,12 +31,12 @@
 </head>

 <body>
-  <main id="til">
-    <header>TIL -- Today I learned</header>
+  <main id="til" class="posts">
+    <header>
+      <h1>TIL -- Today I learned</h1>
+    </header>

    @contents
-
-    <a href="/til">back</a>
  </main>
  <div id="spacer"></div>
  <header id="header" class="small">
@ -76,6 +76,6 @@
    <li><a title="Hardware I use" href="/setup">/setup</a></li>
  </menu>
  <link href=/extended.css rel=stylesheet>
-  <link href=/til.css rel=stylesheet>
+  <link href=/posts.css rel=stylesheet>
  <script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>
 </body>
--- a/now/index.md
+++ b/now/index.md
@ -2,12 +2,15 @@

 Last updated: 2024-05-12

+Still live in Berlin where I am working fully remote. I'm appproaching the second anniversary at [Code Gaia](https://codegaia.io) now and have no plans to change any of it.
+
 ## Priorities

 > I do a lot of things all the time and have a hard time to focus. Most of my energy right now hopefully flows into the following things:

 * This homepage.
 * Keeping up the pace professionally by taking up more management responsibilities.
+* Ramping up my side-project game (mainly by doing smaller freelancing jobs).
 * Fleshing out a long form D&D campaign ("Out Of The Cold Shadow").
 * Writing down more short adventures and one-shots and publish them on [tiskifer.dk](https://tiskifer.dk).
 * My wedding and honeymoon in June!
--- a/static/extended.css
+++ b/static/extended.css
@ -11,13 +11,19 @@
  gap: 4rem;
  list-style: circle;
  background: var(--menu-bg-color);
-  transition: top .3s ease-in-out;
+  transition: all .3s ease-in-out;
 }
 #main-menu > li {
  padding: 0;
 }
 body>header.small + #main-menu {
-  top: calc(var(--header-height) * var(--header-multiplier));
+  top: calc(var(--header-height-small) + 2rem);
+  height: 14rem;
+  width: 6rem;
+  flex-flow: column nowrap;
+  gap: .5rem;
+  align-items: stretch;
+  padding: 0 1rem;
 }
 pre {
  background: var(--emboss-color);
--- a/static/mail.svg
+++ b/static/mail.svg
@ -1 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="#eacb8b" stroke-width="2" d="m21 8-3.6 2c-2 1-3 1.6-4 1.8a7 7 0 0 1-2.8 0c-1-.2-2-.7-4-1.8L3 8m3.2 11h11.6c1.1 0 1.7 0 2.1-.2.4-.2.7-.5.9-.9.2-.4.2-1 .2-2.1V8.2c0-1.1 0-1.7-.2-2.1a2 2 0 0 0-.9-.9c-.4-.2-1-.2-2.1-.2H6.2c-1.1 0-1.7 0-2.1.2a2 2 0 0 0-.9.9C3 6.5 3 7 3 8.2v7.6c0 1.1 0 1.7.2 2.1.2.4.5.7.9.9.4.2 1 .2 2.1.2Z"/></svg>
--- a/static/posts.css
+++ b/static/posts.css
@ -0,0 +1,17 @@
+main.posts {
+  margin: calc(var(--header-height-small) + 2rem) auto 4rem;
+}
+main.posts > #content > h1 {
+  padding: 0;
+}
+
+main.posts article {
+  margin: 1rem 0;
+}
+main.posts article>div {
+  line-height: 2;
+}
+main.posts article>time,
+main.posts article>div>a.external {
+  color: gray;
+}
--- a/static/style.css
+++ b/static/style.css
@ -3,6 +3,7 @@
  --header-fg-color: #a3bd8d;
  --header-height: 192px;
  --header-multiplier: .25;
+  --header-height-small: calc(var(--header-height)*var(--header-multiplier));
  --page-bg-color: #232425;
  --page-fg-color: #7e9fbe;
  --menu-bg-color: #000;
@ -62,7 +63,7 @@ body>header {
 }

 body>#spacer {
-  height: calc(var(--header-height) * var(--header-multiplier));
+  height: var(--header-height-small);
 }

 body>header {
@ -87,7 +88,7 @@ body>header>svg {
 body>main {
  width: 960px;
  max-width: 98vw;
-  margin: var(--header-height) auto 4em;
+  margin: var(--header-height) auto 4rem;
 }

 a {
@ -101,14 +102,17 @@ a {
  margin: 2rem 0;
 }

-#content>h1 {
+#content>h1,
+main.posts > header > h1 {
  margin: 0 0 .25em;
-  padding-top: 2em;
  font-size: 2rem;
  font-variant: small-caps;
  text-shadow: 1px 1px 0 var(--emboss-color);
  color: var(--header-fg-color);
 }
+#content>h1 {
+  padding-top: 2em;
+}

 #menu {
  display: flex;
--- a/static/til.css
+++ b/static/til.css
@ -1,15 +0,0 @@
-main#til > header {
-  margin: 0 0 2rem 0;
-  font-size: 1.5em;
-}
-
-article.til {
-  margin: 1rem 0;
-}
-article.til>div {
-  line-height: 2;
-}
-article.til>time,
-article.til>div>a.external {
-  color: gray;
-}