new header and colors

dist/down.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="#fff8e7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15.8V8.2c0-1.1 0-1.7.2-2.1.2-.4.5-.7.9-.9C4.5 5 5 5 6.2 5h11.6c1.1 0 1.7 0 2.1.2.4.2.7.5.9.9.2.4.2 1 .2 2.1v7.6c0 1.1 0 1.7-.2 2.1a2 2 0 0 1-.9.9c-.4.2-1 .2-2.1.2H6.2c-1.1 0-1.7 0-2.1-.2a2 2 0 0 1-.9-.9c-.2-.4-.2-1-.2-2.1Z"/><path stroke="#fff8e7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m16 10-4 4-4-4"/></svg>

dist/fediverse.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -5 1034 1034" fill="#888785"><path d="M539 176q-32 0-55 22t-25 55 21 58 56 27 58-20 27-56-20-59-57-27h-5zm-87 95L220 389q20 20 25 48l231-118q-19-20-24-48zm167 27q-13 25-38 38l183 184q13-25 39-38zm-142 22L342 585l40 40 143-280q-28-5-48-25zm104 16q-22 11-46 10l-8-1 21 132 56 9zm-426 34q-32 0-55 23t-25 55 21 58 56 27 59-21 27-56-21-59-56-27h-6zm90 68 1 18q-1 19-10 35l132 21 26-50zm225 36-26 51 311 49-1-17q1-19 10-36zm372 6q-32 1-55 23t-24 55 21 58 56 27 58-20 27-57-20-59-57-27h-6zm-606 13q-13 25-39 38l210 210 51-25zm-40 38q-21 11-44 10l-9-1 40 256q21-10 45-9l8 1zm364 22 48 311q21-10 44-9l10 1-46-294zm195 23-118 60 8 56 135-68q-20-20-25-48zm26 49L662 856q28 5 48 25l119-231q-28-5-48-25zm-475 29-68 134q28 5 48 25l60-119zm262 17L287 814q19 20 24 48l265-135zm-55 100-51 25 106 107q13-25 39-38zm-291 24q-32 0-55 23t-25 55 21 57 56 27 58-20 27-56-20-59-57-27h-5zm89 68q2 9 1 18-1 19-9 35l256 41-1-18q1-18 10-35zm335 0q-32 0-55 23t-24 55 20 58 56 27 59-21 27-56-20-59-57-27h-6z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -5 1034 1034" fill="#eacb8b"><path d="M539 176q-32 0-55 22t-25 55 21 58 56 27 58-20 27-56-20-59-57-27h-5zm-87 95L220 389q20 20 25 48l231-118q-19-20-24-48zm167 27q-13 25-38 38l183 184q13-25 39-38zm-142 22L342 585l40 40 143-280q-28-5-48-25zm104 16q-22 11-46 10l-8-1 21 132 56 9zm-426 34q-32 0-55 23t-25 55 21 58 56 27 59-21 27-56-21-59-56-27h-6zm90 68 1 18q-1 19-10 35l132 21 26-50zm225 36-26 51 311 49-1-17q1-19 10-36zm372 6q-32 1-55 23t-24 55 21 58 56 27 58-20 27-57-20-59-57-27h-6zm-606 13q-13 25-39 38l210 210 51-25zm-40 38q-21 11-44 10l-9-1 40 256q21-10 45-9l8 1zm364 22 48 311q21-10 44-9l10 1-46-294zm195 23-118 60 8 56 135-68q-20-20-25-48zm26 49L662 856q28 5 48 25l119-231q-28-5-48-25zm-475 29-68 134q28 5 48 25l60-119zm262 17L287 814q19 20 24 48l265-135zm-55 100-51 25 106 107q13-25 39-38zm-291 24q-32 0-55 23t-25 55 21 57 56 27 58-20 27-56-20-59-57-27h-5zm89 68q2 9 1 18-1 19-9 35l256 41-1-18q1-18 10-35zm335 0q-32 0-55 23t-24 55 20 58 56 27 59-21 27-56-20-59-57-27h-6z"/></svg>

dist/gitforge.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 212 212">
+  <g transform="translate(6 6)" fill="none" stroke="#eacb8b" stroke-width="15">
+    <path d="M58 168V70a50 50 0 0 1 50-50h20" stroke-width="25" />
+    <path d="M58 168v-30a50 50 0 0 1 50-50h20" stroke-width="25" />
+    <circle cx="142" cy="20" r="18" />
+    <circle cx="142" cy="88" r="18" />
+    <circle cx="58" cy="180" r="18" />
+  </g>
+</svg>

dist/github.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#888785" d="M4 3c.1-1 .4-1.5 1-1.8.8-.4 2-.3 3.5.5.6.3.6.3 1.7.1a19 19 0 0 1 4.5 0c1 .2 1 .2 1.7-.1 2-1 3.6-1 4.1.1.3.6.4 2 .1 3.2 0 .7 0 .8.2 1.2 2.1 3 .6 8-3 10l-.6.2c-.6.2-.8.3-.6 1.3l.3 2.7c0 1.8 0 1.8-.2 2.2-.5.5-1 .5-1.5 0-.3-.3-.3-.5-.3-1.7 0-1.8-.2-3-.7-4-.5-1.3-.1-1.7 1.2-2a5.5 5.5 0 0 0 3.9-3c.7-1.6.8-3.8-.5-5-.4-.5-.4-1-.1-2.1l.2-1.3c0-.5 0-.5-.3-.5l-1.4.5-1 .5H16a30.3 30.3 0 0 0-7.4 0l-1-.5L6.3 3c-.4 0-.4.3 0 1.9.1 1 .3 1.2-.3 2a4.6 4.6 0 0 0-.7 4.3c.6 2 2.1 3.3 4.2 3.7 1.3.3 1.6.6 1.1 2-.3 1.2-.6 1.5-1.1 1.5-.8 0-1.2-.6-1-1.3.1-.3 0-.3-.6-.6a7.4 7.4 0 0 1-4.5-4.8c-.6-1.7-.3-4 .6-5.4.3-.5.3-.6.2-1.5C4 4.3 4 3.5 4 3Zm-.7 13a1 1 0 0 0-1.6 1 5.6 5.6 0 0 0 .8 1l.6.6c.3.4.7 1 1 2.1 0 .5.4.7.5.8l.7.3 1.2.2H8a1 1 0 0 0 2 0v-1c0-.6-.4-1-1-1a83.7 83.7 0 0 0-3.1-.1c-.3-1.2-.8-2-1.3-2.6l-.7-.7a30.5 30.5 0 0 1-.6-.7Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#eacb8b" d="M4 3c.1-1 .4-1.5 1-1.8.8-.4 2-.3 3.5.5.6.3.6.3 1.7.1a19 19 0 0 1 4.5 0c1 .2 1 .2 1.7-.1 2-1 3.6-1 4.1.1.3.6.4 2 .1 3.2 0 .7 0 .8.2 1.2 2.1 3 .6 8-3 10l-.6.2c-.6.2-.8.3-.6 1.3l.3 2.7c0 1.8 0 1.8-.2 2.2-.5.5-1 .5-1.5 0-.3-.3-.3-.5-.3-1.7 0-1.8-.2-3-.7-4-.5-1.3-.1-1.7 1.2-2a5.5 5.5 0 0 0 3.9-3c.7-1.6.8-3.8-.5-5-.4-.5-.4-1-.1-2.1l.2-1.3c0-.5 0-.5-.3-.5l-1.4.5-1 .5H16a30.3 30.3 0 0 0-7.4 0l-1-.5L6.3 3c-.4 0-.4.3 0 1.9.1 1 .3 1.2-.3 2a4.6 4.6 0 0 0-.7 4.3c.6 2 2.1 3.3 4.2 3.7 1.3.3 1.6.6 1.1 2-.3 1.2-.6 1.5-1.1 1.5-.8 0-1.2-.6-1-1.3.1-.3 0-.3-.6-.6a7.4 7.4 0 0 1-4.5-4.8c-.6-1.7-.3-4 .6-5.4.3-.5.3-.6.2-1.5C4 4.3 4 3.5 4 3Zm-.7 13a1 1 0 0 0-1.6 1 5.6 5.6 0 0 0 .8 1l.6.6c.3.4.7 1 1 2.1 0 .5.4.7.5.8l.7.3 1.2.2H8a1 1 0 0 0 2 0v-1c0-.6-.4-1-1-1a83.7 83.7 0 0 0-3.1-.1c-.3-1.2-.8-2-1.3-2.6l-.7-.7a30.5 30.5 0 0 1-.6-.7Z"/></svg>

dist/index.html

@@ -3,7 +3,7 @@
 
 <head>
   <meta charset=utf-8>
-  <base href="https://koehr.in/">
+  <base href="http://localhost:8080/">
   <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>
@@ -30,14 +30,6 @@
 </head>
 
 <body>
-  <header class="light:invert">
-    Homepage of
-    <div class=p-name>
-      <span class=first-name>Norman</span>
-      <span class=last-name>Köhring</span>
-    </div>
-    Code Artist
-  </header>
   <main>
     <div id=intro>
       <p>
@@ -59,11 +51,19 @@
       <div id=menu>
         <a href="https://koehr.ing" target="_blank">
           Try the Interactive Homepage Experiment
-          <img class="light:invert" src="/term.svg" />
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M17 15h-5m-5-5 3 2.5L7 15m-4 .8V8.2c0-1.1 0-1.7.2-2.1.2-.4.5-.7.9-.9C4.5 5 5 5 6.2 5h11.6c1.1 0 1.7 0 2.1.2.4.2.7.5.9.9.2.4.2 1 .2 2.1v7.6c0 1.1 0 1.7-.2 2.1a2 2 0 0 1-.9.9c-.4.2-1 .2-2.1.2H6.2c-1.1 0-1.7 0-2.1-.2a2 2 0 0 1-.9-.9c-.2-.4-.2-1-.2-2.1Z" />
+          </svg>
         </a>
         <a href="#content">
           Learn more about me and my work, here
-          <img class="light:invert" src="/down.svg" />
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M3 15.8V8.2c0-1.1 0-1.7.2-2.1.2-.4.5-.7.9-.9C4.5 5 5 5 6.2 5h11.6c1.1 0 1.7 0 2.1.2.4.2.7.5.9.9.2.4.2 1 .2 2.1v7.6c0 1.1 0 1.7-.2 2.1a2 2 0 0 1-.9.9c-.4.2-1 .2-2.1.2H6.2c-1.1 0-1.7 0-2.1-.2a2 2 0 0 1-.9-.9c-.2-.4-.2-1-.2-2.1Z" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="m16 10-4 4-4-4" />
+          </svg>
         </a>
       </div>
     </div>
@@ -89,6 +89,7 @@
 <div class="contacts">
 <p><img src="/mail.svg" alt="Mail"> n@&lt;this domain&gt;</p>
 <p><img src="/fediverse.svg" alt="Fediverse / Mastodon"> <a href="https://mstdn.io/@Koehr/">@Koehr@mstdn.io</a></p>
+<p><img src="/gitforge.svg" alt="Gitforge"> <a href="https://git.k0r.in/">git.k0r.in</a></p>
 <p><img src="/linkedin.svg" alt="LinkedIn"> <a href="https://linkedin.com/in/norman-k%C3%B6hring-950448109/">Norman Köhring</a></p>
 <p><img src="/instagram.svg" alt="Instagram"> <a href="https://instagram.com/coffee_n_code/">coffee_n_code</a></p>
 <p><img src="/threads.svg" alt="Threads"> <a href="https://instagram.com/coffee_n_code/">coffee_n_code</a></p>
@@ -98,7 +99,48 @@
 </div>
     </div>
   </main>
+  <div id="spacer"></div>
+  <header id="header">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 832.4 143.1">
+      <path id="header-underscore"
+        d="M832.4 131.1q0 5.5-3.1 8.6-3 3.4-8.2 3.3h-75.5q-5.2 0-8.2-3.3-1.7-1.6-2.4-3.8-.7-2.3-.7-4.8 0-5.5 3.1-8.7 1.6-1.7 3.7-2.4 2.2-.8 4.5-.8h75.5q5.2 0 8.2 3.2 3 3.1 3 8.7z" />
+      <path id="header-bracket"
+        d="M731.9 81.4q0 6.7-6.5 10.7l-1 .6-74.3 39.2q-2.5 1.3-5.2 1.2-4.8 0-8.1-3.8-3.2-3.6-3.2-8.4 0-3.3 1.7-6 1.8-2.9 4.6-4.4l55.3-29.1-55.3-29q-2.8-1.6-4.6-4.3-1.7-2.7-1.7-6.2 0-4.7 3.2-8.4 3.3-4 8-3.7 2.7 0 5.3 1.2l74.4 39.2q3.3 1.7 5.3 4.7 2 2.8 2 6.5z" />
+      <path id="header-r"
+        d="M588.7 66.5q0 5-3.5 8.5-3.5 3.4-8.1 3.5-4.4 0-8.3-4.3-10-10.7-20.9-10.6-2.2 0-4.3.3-2.1.3-4 1-1.8.6-3.7 1.6-1.7 1-3.4 2.3-1.7 1.3-3.3 2.9-7.8 8.2-7.6 19.7V131q0 5.5-3.1 8.6-3 3.4-8.3 3.3l-2.2-.2q-1-.1-2.2-.5-1-.3-2-1-1-.6-1.8-1.6-1.7-1.6-2.4-3.8-.7-2.3-.7-4.8V51.6q0-5.4 3-8.6 3-3.4 8.3-3.3 2 0 3.7.6 1.8.6 3.3 1.8 1.4 1 2.2 2.7 1 1.5 1.6 3.3 11.8-8.4 27-8.4 10.6 0 21 5 11.3 5.4 17.2 14.5 2.5 3.7 2.5 7.3z" />
+      <path id="header-h"
+        d="M483.9 131.1q0 5.5-3.1 8.6-3 3.4-8.3 3.3-5.2 0-8.2-3.3-3.2-3.1-3.1-8.6V84.8q0-4.6-1.5-8.2-1.4-3.5-4.4-6.9-2.1-2-4.3-3.4-2.2-1.4-4.7-2-2.4-.7-5.3-.7-4.3 0-7.8 1.5-3.3 1.5-6.4 4.6-5.9 6.3-5.8 15v46.4q0 5.5-3 8.6-3.1 3.4-8.4 3.3l-2.2-.2q-1-.1-2.2-.5-1-.3-2-1-1-.6-1.8-1.6-1.7-1.6-2.4-3.8-.7-2.3-.7-4.8V11.9q0-5.5 3-8.6 3-3.4 8.3-3.3 5.2 0 8.2 3.3 3.2 3.1 3.2 8.6v33q1.5-1 3-1.6l3.2-1.2 3.4-1q1.6-.5 3.3-.8l3.5-.4 3.6-.2q4.4 0 8.5 1 4.1.7 7.9 2.4 3.8 1.6 7.3 4.1 3.5 2.5 6.6 5.8Q484 66 484 84.8z" />
+      <path id="header-e"
+        d="M387.5 111.1q0 1.2-.3 2.3-.1 1-.5 2l-.9 2q-6.6 12-19.4 19-12 6.6-25.4 6.6-20.8 0-35.8-14.6-15.9-15-15.9-37 0-22.1 15.9-37.1 15-14.6 35.8-14.6 3.9 0 7.8.7 4 .7 8 2.2 9.2 3.1 18.2 10 6 4.6 9.1 9.3 3.3 4.7 3.3 10 0 1.3-.3 2.5-.2 1.3-.7 2.4-1.5 3.4-5 5.3l-56.9 32.2q7.2 4.9 16.5 4.9 7.2 0 12.6-2.5 5.5-2.5 9.7-7.4l.7-1 .8-1 .9-1.3 1-1.5q3.3-4.2 7.4-5.1l1.8-.2q4.4 0 8 3.4 3.6 3.5 3.6 8.5zm-29.9-42.7q-7.2-4.8-16.6-4.8-6 0-11 2-4.9 1.8-9.3 6-4.5 4-6.7 9-2 4.8-2 10.8l.1 2.9z" />
+      <path id="header-o"
+        d="M286.8 91.4q0 4.2-.6 8.3-.6 4-1.8 7.7-1.1 3.8-2.9 7.4-1.7 3.5-4 6.9-2.4 3.3-5.2 6.1Q258 143 237.7 143T203 128q-14.3-15.2-14.3-36.6 0-21.5 14.3-36.6 14.4-15 34.7-15 4 0 7.8.5 3.9.7 7.5 1.9t7 3q3.3 1.9 6.4 4.3 3.2 2.4 5.9 5.4 14.4 15 14.5 36.5zm-22.6 0q0-2.4-.4-4.5-.2-2.2-.9-4.2-.6-2-1.5-3.9-1-2-2.2-3.7-1.2-1.7-2.8-3.4-4-4.2-8.6-6.1-4.5-2-10-2-11 0-18.7 8.2-7.8 8-7.8 19.6 0 11.4 7.8 19.7 7.8 8 18.6 8 5.6 0 10.1-1.9 4.6-2 8.6-6.1 4-4.3 5.8-9 2-4.9 2-10.7z" />
+      <path id="header-k"
+        d="M186.3 131q0 4.7-3.3 8.3-1.5 1.8-3.7 2.7-2 1.1-4.3 1.1-3.5 0-6.6-2L119.2 105v26q0 5.5-3 8.6-3.1 3.4-8.4 3.3l-2.2-.2q-1-.1-2.2-.5-1-.3-2-1-1-.6-1.8-1.6-1.7-1.6-2.4-3.8-.7-2.3-.7-4.8V11.9q0-5.5 3-8.6 3-3.4 8.3-3.3 5.2 0 8.2 3.3 3.2 3.1 3.2 8.6v65.9l49.2-36.1q3.2-2 6.6-2 4.7 0 8 3.7t3.3 8.4q-.2 6-5 9.6l-41 30 41 29.9q2.3 1.7 3.6 4.2 1.4 2.5 1.4 5.4z" />
+      <path id="header-tilde"
+        d="M73.1 91q0 2-.6 3.9T71 98.6q-3.2 5.7-8.9 8.5-5.6 2.8-12.9 2.8-8.8 0-18-7.8-2.4-2.3-4.5-3.7-2.1-1.5-3-1.7-1.5 0-2.1.3l-.8 1.3q-.3.7-.8 1.2l-1 1-.9.8q-2.7 2-6.4 2-1.7 0-3.2-.3-1.4-.3-3-1.1-1.5-.8-2.6-2.1-2.8-3.1-2.8-8v-1.3q0-.7.2-1.2l.2-1 .4-1 .4-1q.1-.6.5-1.1l.5-1q3.2-5.7 8.8-8.5 5.7-2.9 13-2.9 3.2 0 6.2 1 3 .9 6 2.7 2.9 1.6 5.7 4.2 5.2 4.6 7.6 5.4 1 0 1.6-.2l.7-.4q.3-.1.5-.4 3.6-5.6 9.2-5.6 5.7 0 8.8 3.5 2.8 3 2.8 8z" />
+    </svg>
+    Homepage of
+    <div class=p-name>
+      <span class=first-name>Norman</span>
+      <span class=last-name>Köhring</span>
+    </div>
+    Code Artist
+  </header>
   <link href=/extended.css rel=stylesheet>
+  <script>
+    const el = document.getElementById('header')
+    const threshhold = 200
+    let headerIsSmall = false
+    window.addEventListener("scroll", () => {
+      if (window.scrollY > threshhold && !headerIsSmall) {
+        el.classList.add('small')
+        headerIsSmall = true
+      } else if (window.scrollY <= threshhold && headerIsSmall) {
+        el.classList.remove('small')
+        headerIsSmall = false
+      }
+    })
+  </script>
   <script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>
 </body>
 

dist/instagram.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#888785" fill-rule="evenodd" d="M5.87.12C4.24.2 2.83.6 1.69 1.72A5.94 5.94 0 0 0 .1 5.9c-.05 1-.32 8.6.45 10.59a5.04 5.04 0 0 0 2.91 2.9 7.3 7.3 0 0 0 2.42.46c8.86.4 12.15.19 13.53-3.36.25-.63.42-1.35.46-2.41.4-8.88-.06-10.8-1.6-12.35C17.02.5 15.58-.32 5.86.13m.08 17.94a5.6 5.6 0 0 1-1.85-.34c-.88-.35-1.54-1-1.89-1.89-.59-1.51-.39-8.7-.34-9.86.05-1.14.29-2.18 1.09-2.99 1-.99 2.28-1.48 11.03-1.08 1.15.05 2.19.28 3 1.08.99 1 1.48 2.29 1.08 11.01-.04.97-.2 1.5-.34 1.84-.9 2.31-2.97 2.63-11.78 2.23M14.1 4.69a1.2 1.2 0 1 0 2.39 0 1.2 1.2 0 0 0-2.39 0m-9.23 5.3a5.1 5.1 0 1 0 10.2-.01 5.1 5.1 0 0 0-10.2 0m1.8 0a3.31 3.31 0 1 1 6.62.02 3.31 3.31 0 0 1-6.62-.01"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#eacb8b" fill-rule="evenodd" d="M5.87.12C4.24.2 2.83.6 1.69 1.72A5.94 5.94 0 0 0 .1 5.9c-.05 1-.32 8.6.45 10.59a5.04 5.04 0 0 0 2.91 2.9 7.3 7.3 0 0 0 2.42.46c8.86.4 12.15.19 13.53-3.36.25-.63.42-1.35.46-2.41.4-8.88-.06-10.8-1.6-12.35C17.02.5 15.58-.32 5.86.13m.08 17.94a5.6 5.6 0 0 1-1.85-.34c-.88-.35-1.54-1-1.89-1.89-.59-1.51-.39-8.7-.34-9.86.05-1.14.29-2.18 1.09-2.99 1-.99 2.28-1.48 11.03-1.08 1.15.05 2.19.28 3 1.08.99 1 1.48 2.29 1.08 11.01-.04.97-.2 1.5-.34 1.84-.9 2.31-2.97 2.63-11.78 2.23M14.1 4.69a1.2 1.2 0 1 0 2.39 0 1.2 1.2 0 0 0-2.39 0m-9.23 5.3a5.1 5.1 0 1 0 10.2-.01 5.1 5.1 0 0 0-10.2 0m1.8 0a3.31 3.31 0 1 1 6.62.02 3.31 3.31 0 0 1-6.62-.01"/></svg>

dist/linkedin.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#888785" d="M6.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM5 10c0-.6.4-1 1-1h1c.6 0 1 .4 1 1v8c0 .6-.4 1-1 1H6a1 1 0 0 1-1-1v-8Zm6 9h1c.6 0 1-.4 1-1v-4.5c0-1.5 3-2.5 3-.5v5c0 .6.4 1 1 1h1c.6 0 1-.4 1-1v-6c0-2-1.5-3-3.5-3S13 10.5 13 10.5V10c0-.6-.4-1-1-1h-1a1 1 0 0 0-1 1v8c0 .6.4 1 1 1Z"/><path fill="#888785" fill-rule="evenodd" d="M20 1a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h16Zm0 2c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1H4a1 1 0 0 1-1-1V4c0-.6.4-1 1-1h16Z" clip-rule="evenodd"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#eacb8b" d="M6.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM5 10c0-.6.4-1 1-1h1c.6 0 1 .4 1 1v8c0 .6-.4 1-1 1H6a1 1 0 0 1-1-1v-8Zm6 9h1c.6 0 1-.4 1-1v-4.5c0-1.5 3-2.5 3-.5v5c0 .6.4 1 1 1h1c.6 0 1-.4 1-1v-6c0-2-1.5-3-3.5-3S13 10.5 13 10.5V10c0-.6-.4-1-1-1h-1a1 1 0 0 0-1 1v8c0 .6.4 1 1 1Z"/><path fill="#eacb8b" fill-rule="evenodd" d="M20 1a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h16Zm0 2c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1H4a1 1 0 0 1-1-1V4c0-.6.4-1 1-1h16Z" clip-rule="evenodd"/></svg>

dist/mail.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="#888785" 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>
+<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>

dist/reddit.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-268 289 263 223"><path fill="#888785" d="M-6 393c-4-24-30-35-50-22h-3c-16-9-32-15-49-17l-18-3 15-40 33 7c2 1 4 2 4 5 3 14 16 22 30 21a27 27 0 1 0-26-42c-1 2-2 2-4 1l-27-6-20-5-1 3-20 54c0 2-1 2-2 2a151 151 0 0 0-69 19h-5c-15-10-36-5-45 11l-5 13v8l3 8c1 5 5 9 9 13l1 2c-1 16 3 30 12 42 11 15 25 24 41 31a162 162 0 0 0 140-4c14-8 27-19 35-33 7-11 9-23 8-35l1-2c7-6 11-13 12-22h1v-9h-1zm-41-88c6 0 11 5 11 12 0 6-5 12-11 12-7 0-12-6-12-12 0-7 5-12 12-12zm-202 102c-4-6-4-14 1-20 5-5 12-8 18-5-8 7-14 15-19 25zm204 53c-9 12-21 20-35 26a149 149 0 0 1-124-6c-10-5-19-12-26-21a44 44 0 0 1 1-56c10-12 22-19 36-25a149 149 0 0 1 125 6c9 5 18 12 25 21 13 18 12 38-2 55zm22-53-9-13-11-12c6-3 14 0 19 6 4 5 4 13 1 19z"/><path fill="#888785" d="m-102 458-11 6c-12 5-25 5-37 3-7-1-14-3-19-8-4-4-9-4-12 0-3 3-3 8 1 11l11 7c10 6 21 7 32 8l20-3c10-2 18-6 25-12 3-3 4-8 1-11s-8-3-11-1zm5-61c-12-1-22 9-22 21a21 21 0 0 0 43 0c0-11-9-21-21-21zm-55 21a21 21 0 1 0-22 21c12 1 22-9 22-21z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-268 289 263 223"><path fill="#eacb8b" d="M-6 393c-4-24-30-35-50-22h-3c-16-9-32-15-49-17l-18-3 15-40 33 7c2 1 4 2 4 5 3 14 16 22 30 21a27 27 0 1 0-26-42c-1 2-2 2-4 1l-27-6-20-5-1 3-20 54c0 2-1 2-2 2a151 151 0 0 0-69 19h-5c-15-10-36-5-45 11l-5 13v8l3 8c1 5 5 9 9 13l1 2c-1 16 3 30 12 42 11 15 25 24 41 31a162 162 0 0 0 140-4c14-8 27-19 35-33 7-11 9-23 8-35l1-2c7-6 11-13 12-22h1v-9h-1zm-41-88c6 0 11 5 11 12 0 6-5 12-11 12-7 0-12-6-12-12 0-7 5-12 12-12zm-202 102c-4-6-4-14 1-20 5-5 12-8 18-5-8 7-14 15-19 25zm204 53c-9 12-21 20-35 26a149 149 0 0 1-124-6c-10-5-19-12-26-21a44 44 0 0 1 1-56c10-12 22-19 36-25a149 149 0 0 1 125 6c9 5 18 12 25 21 13 18 12 38-2 55zm22-53-9-13-11-12c6-3 14 0 19 6 4 5 4 13 1 19z"/><path fill="#eacb8b" d="m-102 458-11 6c-12 5-25 5-37 3-7-1-14-3-19-8-4-4-9-4-12 0-3 3-3 8 1 11l11 7c10 6 21 7 32 8l20-3c10-2 18-6 25-12 3-3 4-8 1-11s-8-3-11-1zm5-61c-12-1-22 9-22 21a21 21 0 0 0 43 0c0-11-9-21-21-21zm-55 21a21 21 0 1 0-22 21c12 1 22-9 22-21z"/></svg>

dist/style.css

@@ -1,6 +1,11 @@
 :root {
-  --page-bg-color: #101626;
+  --header-bg-color: #1b1c1d;
-  --page-fg-color: #fff8e7;
+  --header-fg-color: #a3bd8d;
+  --header-height: 192px;
+  --header-multiplier: .25;
+  --page-bg-color: #232425;
+  --page-fg-color: #7e9fbe;
+  --highlight-fg-color: #eacb8b;
   --emboss-color: #000;
 }
 
@@ -16,25 +21,27 @@
   :root {
     --page-bg-color: #efe9d9;
     --page-fg-color: #261b00;
+    --header-fg-color: #143373;
+    --header-bg-color: #a49570;
     --emboss-color: #fff;
   }
 
-  .light\:invert {
+  .light\:invert,
+  .contacts img {
     filter: invert();
   }
 }
 
 * {
-  transition: color, background-color 200ms ease;
+  transition: color 300ms ease, background-color 300ms ease, fill 500ms ease;
 }
 
 html,
 body {
+  width: 100vw;
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
-  width: 960px;
-  max-width: 98vw;
   margin: auto;
   background: var(--page-bg-color);
   color: var(--page-fg-color);
@@ -43,10 +50,41 @@ body {
   scroll-behavior: smooth;
 }
 
+body>#spacer,
 body>header {
-  height: 420px;
+  position: fixed;
-  background: url(/header.jpg) center no-repeat;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  background-color: var(--header-bg-color);
+}
+
+body>#spacer {
+  height: calc(var(--header-height) * var(--header-multiplier));
+}
+
+body>header {
+  height: var(--header-height);
   color: transparent;
+  transition: transform .3s ease-in-out;
+  transform-origin: top center;
+}
+
+body>header.small {
+  transform: scale(var(--header-multiplier));
+}
+
+body>header>svg {
+  display: block;
+  width: 960px;
+  max-width: 98vw;
+  margin: .5em auto;
+  color: var(--header-fg-color);
+}
+
+body>main {
+  width: 960px;
+  margin: var(--header-height) auto 4em;
 }
 
 a {
@@ -57,15 +95,17 @@ a {
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
-  height: calc(100vh - 420px);
+  height: calc(100vh - var(--header-height));
   margin: 2rem 0;
 }
 
 #content>h1 {
-  margin: 2em 0 .25em;
+  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);
 }
 
 #menu {
@@ -102,26 +142,70 @@ blockquote {
   background-color: rgba(128, 128, 128, .2);
 }
 
-#menu>a>img {
+#menu>a>svg {
+  display: block;
   max-width: 200px;
   opacity: .3;
   transition: opacity .3s ease;
 }
 
-#menu>a:hover>img {
+#menu>a:hover>svg {
   opacity: .8;
 }
 
 .contacts {
-  columns: 2;
+  margin: 1.5em 0;
+  columns: 3;
+  column-fill: balance;
 }
 
 .contacts p {
   display: flex;
   align-items: center;
   gap: 1rem;
+  margin: 0 0 1em 0;
 }
 
 .contacts img {
   width: 3rem;
 }
+
+#header-tilde,
+#header-bracket,
+#header-underscore {
+  fill: var(--highlight-fg-color);
+}
+
+#header-k,
+#header-o,
+#header-e,
+#header-h,
+#header-r {
+  fill: var(--header-fg-color);
+}
+
+#header-underscore {
+  animation: fade 2s linear infinite;
+}
+
+@keyframes fade {
+  0% {
+    opacity: 1.0;
+  }
+
+  50% {
+    opacity: 0.0;
+  }
+
+  60% {
+    opacity: 0.0;
+  }
+
+  80% {
+    opacity: 1.0;
+  }
+
+  100% {
+    opacity: 1.0;
+  }
+}

dist/term.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="#fff8e7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 15h-5m-5-5 3 2.5L7 15m-4 .8V8.2c0-1.1 0-1.7.2-2.1.2-.4.5-.7.9-.9C4.5 5 5 5 6.2 5h11.6c1.1 0 1.7 0 2.1.2.4.2.7.5.9.9.2.4.2 1 .2 2.1v7.6c0 1.1 0 1.7-.2 2.1a2 2 0 0 1-.9.9c-.4.2-1 .2-2.1.2H6.2c-1.1 0-1.7 0-2.1-.2a2 2 0 0 1-.9-.9c-.2-.4-.2-1-.2-2.1Z"/></svg>

dist/threads.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 878 1000"><path fill="#888785" d="M447 1000h-1c-149-1-263-50-341-146A560 560 0 0 1 0 500c1-149 37-268 106-354C183 50 297 1 446 0h1c114 1 210 30 284 87 70 54 119 131 147 228l-85 24C747 174 630 90 447 88c-122 1-213 39-273 114-56 69-84 169-85 298 1 129 29 229 85 299 60 74 152 112 273 113 109-1 181-27 241-85 69-68 68-150 46-200-13-30-37-55-68-73-8 56-26 102-54 136-37 46-89 71-155 75-50 2-99-9-136-34a156 156 0 0 1-18-252c37-31 89-50 150-53 45-3 87-1 125 5-5-30-15-55-31-73-21-24-54-37-98-37h-1c-35 0-83 10-114 55l-73-49c41-61 107-94 187-94h2c133 1 212 82 220 225l13 5c62 30 108 74 132 128 33 76 36 200-65 299a405 405 0 0 1-303 110zm42-487-31 1c-77 4-125 39-122 89 3 52 61 77 116 74 51-3 118-23 129-155-28-6-59-9-92-9z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 878 1000"><path fill="#eacb8b" d="M447 1000h-1c-149-1-263-50-341-146A560 560 0 0 1 0 500c1-149 37-268 106-354C183 50 297 1 446 0h1c114 1 210 30 284 87 70 54 119 131 147 228l-85 24C747 174 630 90 447 88c-122 1-213 39-273 114-56 69-84 169-85 298 1 129 29 229 85 299 60 74 152 112 273 113 109-1 181-27 241-85 69-68 68-150 46-200-13-30-37-55-68-73-8 56-26 102-54 136-37 46-89 71-155 75-50 2-99-9-136-34a156 156 0 0 1-18-252c37-31 89-50 150-53 45-3 87-1 125 5-5-30-15-55-31-73-21-24-54-37-98-37h-1c-35 0-83 10-114 55l-73-49c41-61 107-94 187-94h2c133 1 212 82 220 225l13 5c62 30 108 74 132 128 33 76 36 200-65 299a405 405 0 0 1-303 110zm42-487-31 1c-77 4-125 39-122 89 3 52 61 77 116 74 51-3 118-23 129-155-28-6-59-9-92-9z"/></svg>

dist/twitter.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#888785" d="M19.8 4a4.8 4.8 0 0 0 1.6-.8A1 1 0 0 1 23 4c0 1-.1 2-.4 2.7-.3.7-.7 1.2-1.1 1.7-.2 3.4-1.2 6-2.7 8a12.2 12.2 0 0 1-5.7 4.2c-2.2.7-4.5.9-6.5.6-2-.2-4-.9-5.2-2a1 1 0 0 1 .7-1.7 7 7 0 0 0 3.6-.5l-.6-.4c-1-.6-1.7-1.5-2-2.2a1 1 0 0 1 .3-1.2 5 5 0 0 1-1.9-3.7 1 1 0 0 1 .7-1L2 7.7a9.2 9.2 0 0 1 0-4 1 1 0 0 1 2-.1c1 1.9 3 3 4.9 3.7l2.3.6a5 5 0 0 1 1-3c.6-1 1.6-1.7 2.6-2a6 6 0 0 1 5 1.1Zm-9 5.8L8 9.1a13 13 0 0 1-4.3-2.5l.1.6c.3 1.1.7 1.7 1 2 .5.1.7.7.5 1.1-.2.7-.8.7-1.4.6.5.7 1.3 1.4 2.7 1.6a1 1 0 0 1 0 2l-.9.2c.2 0 .3.2.5.3.7.5 1.4.7 2 .5a1 1 0 0 1 .8 1.8A10.1 10.1 0 0 1 5.8 19l1 .1c1.8.3 3.8.1 5.6-.5a9.9 9.9 0 0 0 4.8-3.5 12 12 0 0 0 2.3-7.2c0-.3.1-.5.3-.7.4-.5.8-1 1-1.6l-1.1.3a1 1 0 0 1-1-.3 4 4 0 0 0-3.4-1c-.6.2-1.2.6-1.6 1.2-.4.6-.7 1.6-.7 3.1 0 .3-.1.6-.3.7-.5.5-1.4.2-2 .1Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#eacb8b" d="M19.8 4a4.8 4.8 0 0 0 1.6-.8A1 1 0 0 1 23 4c0 1-.1 2-.4 2.7-.3.7-.7 1.2-1.1 1.7-.2 3.4-1.2 6-2.7 8a12.2 12.2 0 0 1-5.7 4.2c-2.2.7-4.5.9-6.5.6-2-.2-4-.9-5.2-2a1 1 0 0 1 .7-1.7 7 7 0 0 0 3.6-.5l-.6-.4c-1-.6-1.7-1.5-2-2.2a1 1 0 0 1 .3-1.2 5 5 0 0 1-1.9-3.7 1 1 0 0 1 .7-1L2 7.7a9.2 9.2 0 0 1 0-4 1 1 0 0 1 2-.1c1 1.9 3 3 4.9 3.7l2.3.6a5 5 0 0 1 1-3c.6-1 1.6-1.7 2.6-2a6 6 0 0 1 5 1.1Zm-9 5.8L8 9.1a13 13 0 0 1-4.3-2.5l.1.6c.3 1.1.7 1.7 1 2 .5.1.7.7.5 1.1-.2.7-.8.7-1.4.6.5.7 1.3 1.4 2.7 1.6a1 1 0 0 1 0 2l-.9.2c.2 0 .3.2.5.3.7.5 1.4.7 2 .5a1 1 0 0 1 .8 1.8A10.1 10.1 0 0 1 5.8 19l1 .1c1.8.3 3.8.1 5.6-.5a9.9 9.9 0 0 0 4.8-3.5 12 12 0 0 0 2.3-7.2c0-.3.1-.5.3-.7.4-.5.8-1 1-1.6l-1.1.3a1 1 0 0 1-1-.3 4 4 0 0 0-3.4-1c-.6.2-1.2.6-1.6 1.2-.4.6-.7 1.6-.7 3.1 0 .3-.1.6-.3.7-.5.5-1.4.2-2 .1Z"/></svg>

index.md

@@ -28,6 +28,8 @@ Many people want to learn and grow. Whenever I can I try to help those people by
 
   ![Fediverse / Mastodon](/fediverse.svg) [@Koehr\@mstdn.io](https://mstdn.io/@Koehr/)
 
+  ![Gitforge](/gitforge.svg) [git.k0r.in](https://git.k0r.in/)
+
   ![LinkedIn](/linkedin.svg) [Norman Köhring](https://linkedin.com/in/norman-köhring-950448109/)
 
   ![Instagram](/instagram.svg) [coffee_n_code](https://instagram.com/coffee_n_code/)

layouts/index.html

@@ -30,14 +30,6 @@
 </head>
 
 <body>
-  <header class="light:invert">
-    Homepage of
-    <div class=p-name>
-      <span class=first-name>Norman</span>
-      <span class=last-name>Köhring</span>
-    </div>
-    Code Artist
-  </header>
   <main>
     <div id=intro>
       <p>
@@ -59,11 +51,19 @@
       <div id=menu>
         <a href="https://koehr.ing" target="_blank">
           Try the Interactive Homepage Experiment
-          <img class="light:invert" src="/term.svg" />
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M17 15h-5m-5-5 3 2.5L7 15m-4 .8V8.2c0-1.1 0-1.7.2-2.1.2-.4.5-.7.9-.9C4.5 5 5 5 6.2 5h11.6c1.1 0 1.7 0 2.1.2.4.2.7.5.9.9.2.4.2 1 .2 2.1v7.6c0 1.1 0 1.7-.2 2.1a2 2 0 0 1-.9.9c-.4.2-1 .2-2.1.2H6.2c-1.1 0-1.7 0-2.1-.2a2 2 0 0 1-.9-.9c-.2-.4-.2-1-.2-2.1Z" />
+          </svg>
         </a>
         <a href="#content">
           Learn more about me and my work, here
-          <img class="light:invert" src="/down.svg" />
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M3 15.8V8.2c0-1.1 0-1.7.2-2.1.2-.4.5-.7.9-.9C4.5 5 5 5 6.2 5h11.6c1.1 0 1.7 0 2.1.2.4.2.7.5.9.9.2.4.2 1 .2 2.1v7.6c0 1.1 0 1.7-.2 2.1a2 2 0 0 1-.9.9c-.4.2-1 .2-2.1.2H6.2c-1.1 0-1.7 0-2.1-.2a2 2 0 0 1-.9-.9c-.2-.4-.2-1-.2-2.1Z" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="m16 10-4 4-4-4" />
+          </svg>
         </a>
       </div>
     </div>
@@ -71,7 +71,48 @@
       @contents
     </div>
   </main>
+  <div id="spacer"></div>
+  <header id="header">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 832.4 143.1">
+      <path id="header-underscore"
+        d="M832.4 131.1q0 5.5-3.1 8.6-3 3.4-8.2 3.3h-75.5q-5.2 0-8.2-3.3-1.7-1.6-2.4-3.8-.7-2.3-.7-4.8 0-5.5 3.1-8.7 1.6-1.7 3.7-2.4 2.2-.8 4.5-.8h75.5q5.2 0 8.2 3.2 3 3.1 3 8.7z" />
+      <path id="header-bracket"
+        d="M731.9 81.4q0 6.7-6.5 10.7l-1 .6-74.3 39.2q-2.5 1.3-5.2 1.2-4.8 0-8.1-3.8-3.2-3.6-3.2-8.4 0-3.3 1.7-6 1.8-2.9 4.6-4.4l55.3-29.1-55.3-29q-2.8-1.6-4.6-4.3-1.7-2.7-1.7-6.2 0-4.7 3.2-8.4 3.3-4 8-3.7 2.7 0 5.3 1.2l74.4 39.2q3.3 1.7 5.3 4.7 2 2.8 2 6.5z" />
+      <path id="header-r"
+        d="M588.7 66.5q0 5-3.5 8.5-3.5 3.4-8.1 3.5-4.4 0-8.3-4.3-10-10.7-20.9-10.6-2.2 0-4.3.3-2.1.3-4 1-1.8.6-3.7 1.6-1.7 1-3.4 2.3-1.7 1.3-3.3 2.9-7.8 8.2-7.6 19.7V131q0 5.5-3.1 8.6-3 3.4-8.3 3.3l-2.2-.2q-1-.1-2.2-.5-1-.3-2-1-1-.6-1.8-1.6-1.7-1.6-2.4-3.8-.7-2.3-.7-4.8V51.6q0-5.4 3-8.6 3-3.4 8.3-3.3 2 0 3.7.6 1.8.6 3.3 1.8 1.4 1 2.2 2.7 1 1.5 1.6 3.3 11.8-8.4 27-8.4 10.6 0 21 5 11.3 5.4 17.2 14.5 2.5 3.7 2.5 7.3z" />
+      <path id="header-h"
+        d="M483.9 131.1q0 5.5-3.1 8.6-3 3.4-8.3 3.3-5.2 0-8.2-3.3-3.2-3.1-3.1-8.6V84.8q0-4.6-1.5-8.2-1.4-3.5-4.4-6.9-2.1-2-4.3-3.4-2.2-1.4-4.7-2-2.4-.7-5.3-.7-4.3 0-7.8 1.5-3.3 1.5-6.4 4.6-5.9 6.3-5.8 15v46.4q0 5.5-3 8.6-3.1 3.4-8.4 3.3l-2.2-.2q-1-.1-2.2-.5-1-.3-2-1-1-.6-1.8-1.6-1.7-1.6-2.4-3.8-.7-2.3-.7-4.8V11.9q0-5.5 3-8.6 3-3.4 8.3-3.3 5.2 0 8.2 3.3 3.2 3.1 3.2 8.6v33q1.5-1 3-1.6l3.2-1.2 3.4-1q1.6-.5 3.3-.8l3.5-.4 3.6-.2q4.4 0 8.5 1 4.1.7 7.9 2.4 3.8 1.6 7.3 4.1 3.5 2.5 6.6 5.8Q484 66 484 84.8z" />
+      <path id="header-e"
+        d="M387.5 111.1q0 1.2-.3 2.3-.1 1-.5 2l-.9 2q-6.6 12-19.4 19-12 6.6-25.4 6.6-20.8 0-35.8-14.6-15.9-15-15.9-37 0-22.1 15.9-37.1 15-14.6 35.8-14.6 3.9 0 7.8.7 4 .7 8 2.2 9.2 3.1 18.2 10 6 4.6 9.1 9.3 3.3 4.7 3.3 10 0 1.3-.3 2.5-.2 1.3-.7 2.4-1.5 3.4-5 5.3l-56.9 32.2q7.2 4.9 16.5 4.9 7.2 0 12.6-2.5 5.5-2.5 9.7-7.4l.7-1 .8-1 .9-1.3 1-1.5q3.3-4.2 7.4-5.1l1.8-.2q4.4 0 8 3.4 3.6 3.5 3.6 8.5zm-29.9-42.7q-7.2-4.8-16.6-4.8-6 0-11 2-4.9 1.8-9.3 6-4.5 4-6.7 9-2 4.8-2 10.8l.1 2.9z" />
+      <path id="header-o"
+        d="M286.8 91.4q0 4.2-.6 8.3-.6 4-1.8 7.7-1.1 3.8-2.9 7.4-1.7 3.5-4 6.9-2.4 3.3-5.2 6.1Q258 143 237.7 143T203 128q-14.3-15.2-14.3-36.6 0-21.5 14.3-36.6 14.4-15 34.7-15 4 0 7.8.5 3.9.7 7.5 1.9t7 3q3.3 1.9 6.4 4.3 3.2 2.4 5.9 5.4 14.4 15 14.5 36.5zm-22.6 0q0-2.4-.4-4.5-.2-2.2-.9-4.2-.6-2-1.5-3.9-1-2-2.2-3.7-1.2-1.7-2.8-3.4-4-4.2-8.6-6.1-4.5-2-10-2-11 0-18.7 8.2-7.8 8-7.8 19.6 0 11.4 7.8 19.7 7.8 8 18.6 8 5.6 0 10.1-1.9 4.6-2 8.6-6.1 4-4.3 5.8-9 2-4.9 2-10.7z" />
+      <path id="header-k"
+        d="M186.3 131q0 4.7-3.3 8.3-1.5 1.8-3.7 2.7-2 1.1-4.3 1.1-3.5 0-6.6-2L119.2 105v26q0 5.5-3 8.6-3.1 3.4-8.4 3.3l-2.2-.2q-1-.1-2.2-.5-1-.3-2-1-1-.6-1.8-1.6-1.7-1.6-2.4-3.8-.7-2.3-.7-4.8V11.9q0-5.5 3-8.6 3-3.4 8.3-3.3 5.2 0 8.2 3.3 3.2 3.1 3.2 8.6v65.9l49.2-36.1q3.2-2 6.6-2 4.7 0 8 3.7t3.3 8.4q-.2 6-5 9.6l-41 30 41 29.9q2.3 1.7 3.6 4.2 1.4 2.5 1.4 5.4z" />
+      <path id="header-tilde"
+        d="M73.1 91q0 2-.6 3.9T71 98.6q-3.2 5.7-8.9 8.5-5.6 2.8-12.9 2.8-8.8 0-18-7.8-2.4-2.3-4.5-3.7-2.1-1.5-3-1.7-1.5 0-2.1.3l-.8 1.3q-.3.7-.8 1.2l-1 1-.9.8q-2.7 2-6.4 2-1.7 0-3.2-.3-1.4-.3-3-1.1-1.5-.8-2.6-2.1-2.8-3.1-2.8-8v-1.3q0-.7.2-1.2l.2-1 .4-1 .4-1q.1-.6.5-1.1l.5-1q3.2-5.7 8.8-8.5 5.7-2.9 13-2.9 3.2 0 6.2 1 3 .9 6 2.7 2.9 1.6 5.7 4.2 5.2 4.6 7.6 5.4 1 0 1.6-.2l.7-.4q.3-.1.5-.4 3.6-5.6 9.2-5.6 5.7 0 8.8 3.5 2.8 3 2.8 8z" />
+    </svg>
+    Homepage of
+    <div class=p-name>
+      <span class=first-name>Norman</span>
+      <span class=last-name>Köhring</span>
+    </div>
+    Code Artist
+  </header>
   <link href=/extended.css rel=stylesheet>
+  <script>
+    const el = document.getElementById('header')
+    const threshhold = 200
+    let headerIsSmall = false
+    window.addEventListener("scroll", () => {
+      if (window.scrollY > threshhold && !headerIsSmall) {
+        el.classList.add('small')
+        headerIsSmall = true
+      } else if (window.scrollY <= threshhold && headerIsSmall) {
+        el.classList.remove('small')
+        headerIsSmall = false
+      }
+    })
+  </script>
   <script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>
 </body>
 

static/down.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="#fff8e7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15.8V8.2c0-1.1 0-1.7.2-2.1.2-.4.5-.7.9-.9C4.5 5 5 5 6.2 5h11.6c1.1 0 1.7 0 2.1.2.4.2.7.5.9.9.2.4.2 1 .2 2.1v7.6c0 1.1 0 1.7-.2 2.1a2 2 0 0 1-.9.9c-.4.2-1 .2-2.1.2H6.2c-1.1 0-1.7 0-2.1-.2a2 2 0 0 1-.9-.9c-.2-.4-.2-1-.2-2.1Z"/><path stroke="#fff8e7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m16 10-4 4-4-4"/></svg>

static/fediverse.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -5 1034 1034" fill="#888785"><path d="M539 176q-32 0-55 22t-25 55 21 58 56 27 58-20 27-56-20-59-57-27h-5zm-87 95L220 389q20 20 25 48l231-118q-19-20-24-48zm167 27q-13 25-38 38l183 184q13-25 39-38zm-142 22L342 585l40 40 143-280q-28-5-48-25zm104 16q-22 11-46 10l-8-1 21 132 56 9zm-426 34q-32 0-55 23t-25 55 21 58 56 27 59-21 27-56-21-59-56-27h-6zm90 68 1 18q-1 19-10 35l132 21 26-50zm225 36-26 51 311 49-1-17q1-19 10-36zm372 6q-32 1-55 23t-24 55 21 58 56 27 58-20 27-57-20-59-57-27h-6zm-606 13q-13 25-39 38l210 210 51-25zm-40 38q-21 11-44 10l-9-1 40 256q21-10 45-9l8 1zm364 22 48 311q21-10 44-9l10 1-46-294zm195 23-118 60 8 56 135-68q-20-20-25-48zm26 49L662 856q28 5 48 25l119-231q-28-5-48-25zm-475 29-68 134q28 5 48 25l60-119zm262 17L287 814q19 20 24 48l265-135zm-55 100-51 25 106 107q13-25 39-38zm-291 24q-32 0-55 23t-25 55 21 57 56 27 58-20 27-56-20-59-57-27h-5zm89 68q2 9 1 18-1 19-9 35l256 41-1-18q1-18 10-35zm335 0q-32 0-55 23t-24 55 20 58 56 27 59-21 27-56-20-59-57-27h-6z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -5 1034 1034" fill="#eacb8b"><path d="M539 176q-32 0-55 22t-25 55 21 58 56 27 58-20 27-56-20-59-57-27h-5zm-87 95L220 389q20 20 25 48l231-118q-19-20-24-48zm167 27q-13 25-38 38l183 184q13-25 39-38zm-142 22L342 585l40 40 143-280q-28-5-48-25zm104 16q-22 11-46 10l-8-1 21 132 56 9zm-426 34q-32 0-55 23t-25 55 21 58 56 27 59-21 27-56-21-59-56-27h-6zm90 68 1 18q-1 19-10 35l132 21 26-50zm225 36-26 51 311 49-1-17q1-19 10-36zm372 6q-32 1-55 23t-24 55 21 58 56 27 58-20 27-57-20-59-57-27h-6zm-606 13q-13 25-39 38l210 210 51-25zm-40 38q-21 11-44 10l-9-1 40 256q21-10 45-9l8 1zm364 22 48 311q21-10 44-9l10 1-46-294zm195 23-118 60 8 56 135-68q-20-20-25-48zm26 49L662 856q28 5 48 25l119-231q-28-5-48-25zm-475 29-68 134q28 5 48 25l60-119zm262 17L287 814q19 20 24 48l265-135zm-55 100-51 25 106 107q13-25 39-38zm-291 24q-32 0-55 23t-25 55 21 57 56 27 58-20 27-56-20-59-57-27h-5zm89 68q2 9 1 18-1 19-9 35l256 41-1-18q1-18 10-35zm335 0q-32 0-55 23t-24 55 20 58 56 27 59-21 27-56-20-59-57-27h-6z"/></svg>

static/gitforge.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 212 212">
+  <g transform="translate(6 6)" fill="none" stroke="#eacb8b" stroke-width="15">
+    <path d="M58 168V70a50 50 0 0 1 50-50h20" stroke-width="25" />
+    <path d="M58 168v-30a50 50 0 0 1 50-50h20" stroke-width="25" />
+    <circle cx="142" cy="20" r="18" />
+    <circle cx="142" cy="88" r="18" />
+    <circle cx="58" cy="180" r="18" />
+  </g>
+</svg>

static/github.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#888785" d="M4 3c.1-1 .4-1.5 1-1.8.8-.4 2-.3 3.5.5.6.3.6.3 1.7.1a19 19 0 0 1 4.5 0c1 .2 1 .2 1.7-.1 2-1 3.6-1 4.1.1.3.6.4 2 .1 3.2 0 .7 0 .8.2 1.2 2.1 3 .6 8-3 10l-.6.2c-.6.2-.8.3-.6 1.3l.3 2.7c0 1.8 0 1.8-.2 2.2-.5.5-1 .5-1.5 0-.3-.3-.3-.5-.3-1.7 0-1.8-.2-3-.7-4-.5-1.3-.1-1.7 1.2-2a5.5 5.5 0 0 0 3.9-3c.7-1.6.8-3.8-.5-5-.4-.5-.4-1-.1-2.1l.2-1.3c0-.5 0-.5-.3-.5l-1.4.5-1 .5H16a30.3 30.3 0 0 0-7.4 0l-1-.5L6.3 3c-.4 0-.4.3 0 1.9.1 1 .3 1.2-.3 2a4.6 4.6 0 0 0-.7 4.3c.6 2 2.1 3.3 4.2 3.7 1.3.3 1.6.6 1.1 2-.3 1.2-.6 1.5-1.1 1.5-.8 0-1.2-.6-1-1.3.1-.3 0-.3-.6-.6a7.4 7.4 0 0 1-4.5-4.8c-.6-1.7-.3-4 .6-5.4.3-.5.3-.6.2-1.5C4 4.3 4 3.5 4 3Zm-.7 13a1 1 0 0 0-1.6 1 5.6 5.6 0 0 0 .8 1l.6.6c.3.4.7 1 1 2.1 0 .5.4.7.5.8l.7.3 1.2.2H8a1 1 0 0 0 2 0v-1c0-.6-.4-1-1-1a83.7 83.7 0 0 0-3.1-.1c-.3-1.2-.8-2-1.3-2.6l-.7-.7a30.5 30.5 0 0 1-.6-.7Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#eacb8b" d="M4 3c.1-1 .4-1.5 1-1.8.8-.4 2-.3 3.5.5.6.3.6.3 1.7.1a19 19 0 0 1 4.5 0c1 .2 1 .2 1.7-.1 2-1 3.6-1 4.1.1.3.6.4 2 .1 3.2 0 .7 0 .8.2 1.2 2.1 3 .6 8-3 10l-.6.2c-.6.2-.8.3-.6 1.3l.3 2.7c0 1.8 0 1.8-.2 2.2-.5.5-1 .5-1.5 0-.3-.3-.3-.5-.3-1.7 0-1.8-.2-3-.7-4-.5-1.3-.1-1.7 1.2-2a5.5 5.5 0 0 0 3.9-3c.7-1.6.8-3.8-.5-5-.4-.5-.4-1-.1-2.1l.2-1.3c0-.5 0-.5-.3-.5l-1.4.5-1 .5H16a30.3 30.3 0 0 0-7.4 0l-1-.5L6.3 3c-.4 0-.4.3 0 1.9.1 1 .3 1.2-.3 2a4.6 4.6 0 0 0-.7 4.3c.6 2 2.1 3.3 4.2 3.7 1.3.3 1.6.6 1.1 2-.3 1.2-.6 1.5-1.1 1.5-.8 0-1.2-.6-1-1.3.1-.3 0-.3-.6-.6a7.4 7.4 0 0 1-4.5-4.8c-.6-1.7-.3-4 .6-5.4.3-.5.3-.6.2-1.5C4 4.3 4 3.5 4 3Zm-.7 13a1 1 0 0 0-1.6 1 5.6 5.6 0 0 0 .8 1l.6.6c.3.4.7 1 1 2.1 0 .5.4.7.5.8l.7.3 1.2.2H8a1 1 0 0 0 2 0v-1c0-.6-.4-1-1-1a83.7 83.7 0 0 0-3.1-.1c-.3-1.2-.8-2-1.3-2.6l-.7-.7a30.5 30.5 0 0 1-.6-.7Z"/></svg>

static/instagram.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#888785" fill-rule="evenodd" d="M5.87.12C4.24.2 2.83.6 1.69 1.72A5.94 5.94 0 0 0 .1 5.9c-.05 1-.32 8.6.45 10.59a5.04 5.04 0 0 0 2.91 2.9 7.3 7.3 0 0 0 2.42.46c8.86.4 12.15.19 13.53-3.36.25-.63.42-1.35.46-2.41.4-8.88-.06-10.8-1.6-12.35C17.02.5 15.58-.32 5.86.13m.08 17.94a5.6 5.6 0 0 1-1.85-.34c-.88-.35-1.54-1-1.89-1.89-.59-1.51-.39-8.7-.34-9.86.05-1.14.29-2.18 1.09-2.99 1-.99 2.28-1.48 11.03-1.08 1.15.05 2.19.28 3 1.08.99 1 1.48 2.29 1.08 11.01-.04.97-.2 1.5-.34 1.84-.9 2.31-2.97 2.63-11.78 2.23M14.1 4.69a1.2 1.2 0 1 0 2.39 0 1.2 1.2 0 0 0-2.39 0m-9.23 5.3a5.1 5.1 0 1 0 10.2-.01 5.1 5.1 0 0 0-10.2 0m1.8 0a3.31 3.31 0 1 1 6.62.02 3.31 3.31 0 0 1-6.62-.01"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#eacb8b" fill-rule="evenodd" d="M5.87.12C4.24.2 2.83.6 1.69 1.72A5.94 5.94 0 0 0 .1 5.9c-.05 1-.32 8.6.45 10.59a5.04 5.04 0 0 0 2.91 2.9 7.3 7.3 0 0 0 2.42.46c8.86.4 12.15.19 13.53-3.36.25-.63.42-1.35.46-2.41.4-8.88-.06-10.8-1.6-12.35C17.02.5 15.58-.32 5.86.13m.08 17.94a5.6 5.6 0 0 1-1.85-.34c-.88-.35-1.54-1-1.89-1.89-.59-1.51-.39-8.7-.34-9.86.05-1.14.29-2.18 1.09-2.99 1-.99 2.28-1.48 11.03-1.08 1.15.05 2.19.28 3 1.08.99 1 1.48 2.29 1.08 11.01-.04.97-.2 1.5-.34 1.84-.9 2.31-2.97 2.63-11.78 2.23M14.1 4.69a1.2 1.2 0 1 0 2.39 0 1.2 1.2 0 0 0-2.39 0m-9.23 5.3a5.1 5.1 0 1 0 10.2-.01 5.1 5.1 0 0 0-10.2 0m1.8 0a3.31 3.31 0 1 1 6.62.02 3.31 3.31 0 0 1-6.62-.01"/></svg>

static/linkedin.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#888785" d="M6.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM5 10c0-.6.4-1 1-1h1c.6 0 1 .4 1 1v8c0 .6-.4 1-1 1H6a1 1 0 0 1-1-1v-8Zm6 9h1c.6 0 1-.4 1-1v-4.5c0-1.5 3-2.5 3-.5v5c0 .6.4 1 1 1h1c.6 0 1-.4 1-1v-6c0-2-1.5-3-3.5-3S13 10.5 13 10.5V10c0-.6-.4-1-1-1h-1a1 1 0 0 0-1 1v8c0 .6.4 1 1 1Z"/><path fill="#888785" fill-rule="evenodd" d="M20 1a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h16Zm0 2c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1H4a1 1 0 0 1-1-1V4c0-.6.4-1 1-1h16Z" clip-rule="evenodd"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#eacb8b" d="M6.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM5 10c0-.6.4-1 1-1h1c.6 0 1 .4 1 1v8c0 .6-.4 1-1 1H6a1 1 0 0 1-1-1v-8Zm6 9h1c.6 0 1-.4 1-1v-4.5c0-1.5 3-2.5 3-.5v5c0 .6.4 1 1 1h1c.6 0 1-.4 1-1v-6c0-2-1.5-3-3.5-3S13 10.5 13 10.5V10c0-.6-.4-1-1-1h-1a1 1 0 0 0-1 1v8c0 .6.4 1 1 1Z"/><path fill="#eacb8b" fill-rule="evenodd" d="M20 1a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h16Zm0 2c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1H4a1 1 0 0 1-1-1V4c0-.6.4-1 1-1h16Z" clip-rule="evenodd"/></svg>

static/mail.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="#888785" 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>
+<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>

static/reddit.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-268 289 263 223"><path fill="#888785" d="M-6 393c-4-24-30-35-50-22h-3c-16-9-32-15-49-17l-18-3 15-40 33 7c2 1 4 2 4 5 3 14 16 22 30 21a27 27 0 1 0-26-42c-1 2-2 2-4 1l-27-6-20-5-1 3-20 54c0 2-1 2-2 2a151 151 0 0 0-69 19h-5c-15-10-36-5-45 11l-5 13v8l3 8c1 5 5 9 9 13l1 2c-1 16 3 30 12 42 11 15 25 24 41 31a162 162 0 0 0 140-4c14-8 27-19 35-33 7-11 9-23 8-35l1-2c7-6 11-13 12-22h1v-9h-1zm-41-88c6 0 11 5 11 12 0 6-5 12-11 12-7 0-12-6-12-12 0-7 5-12 12-12zm-202 102c-4-6-4-14 1-20 5-5 12-8 18-5-8 7-14 15-19 25zm204 53c-9 12-21 20-35 26a149 149 0 0 1-124-6c-10-5-19-12-26-21a44 44 0 0 1 1-56c10-12 22-19 36-25a149 149 0 0 1 125 6c9 5 18 12 25 21 13 18 12 38-2 55zm22-53-9-13-11-12c6-3 14 0 19 6 4 5 4 13 1 19z"/><path fill="#888785" d="m-102 458-11 6c-12 5-25 5-37 3-7-1-14-3-19-8-4-4-9-4-12 0-3 3-3 8 1 11l11 7c10 6 21 7 32 8l20-3c10-2 18-6 25-12 3-3 4-8 1-11s-8-3-11-1zm5-61c-12-1-22 9-22 21a21 21 0 0 0 43 0c0-11-9-21-21-21zm-55 21a21 21 0 1 0-22 21c12 1 22-9 22-21z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-268 289 263 223"><path fill="#eacb8b" d="M-6 393c-4-24-30-35-50-22h-3c-16-9-32-15-49-17l-18-3 15-40 33 7c2 1 4 2 4 5 3 14 16 22 30 21a27 27 0 1 0-26-42c-1 2-2 2-4 1l-27-6-20-5-1 3-20 54c0 2-1 2-2 2a151 151 0 0 0-69 19h-5c-15-10-36-5-45 11l-5 13v8l3 8c1 5 5 9 9 13l1 2c-1 16 3 30 12 42 11 15 25 24 41 31a162 162 0 0 0 140-4c14-8 27-19 35-33 7-11 9-23 8-35l1-2c7-6 11-13 12-22h1v-9h-1zm-41-88c6 0 11 5 11 12 0 6-5 12-11 12-7 0-12-6-12-12 0-7 5-12 12-12zm-202 102c-4-6-4-14 1-20 5-5 12-8 18-5-8 7-14 15-19 25zm204 53c-9 12-21 20-35 26a149 149 0 0 1-124-6c-10-5-19-12-26-21a44 44 0 0 1 1-56c10-12 22-19 36-25a149 149 0 0 1 125 6c9 5 18 12 25 21 13 18 12 38-2 55zm22-53-9-13-11-12c6-3 14 0 19 6 4 5 4 13 1 19z"/><path fill="#eacb8b" d="m-102 458-11 6c-12 5-25 5-37 3-7-1-14-3-19-8-4-4-9-4-12 0-3 3-3 8 1 11l11 7c10 6 21 7 32 8l20-3c10-2 18-6 25-12 3-3 4-8 1-11s-8-3-11-1zm5-61c-12-1-22 9-22 21a21 21 0 0 0 43 0c0-11-9-21-21-21zm-55 21a21 21 0 1 0-22 21c12 1 22-9 22-21z"/></svg>

static/style.css

@@ -1,6 +1,11 @@
 :root {
-  --page-bg-color: #101626;
+  --header-bg-color: #1b1c1d;
-  --page-fg-color: #fff8e7;
+  --header-fg-color: #a3bd8d;
+  --header-height: 192px;
+  --header-multiplier: .25;
+  --page-bg-color: #232425;
+  --page-fg-color: #7e9fbe;
+  --highlight-fg-color: #eacb8b;
   --emboss-color: #000;
 }
 
@@ -16,25 +21,27 @@
   :root {
     --page-bg-color: #efe9d9;
     --page-fg-color: #261b00;
+    --header-fg-color: #143373;
+    --header-bg-color: #a49570;
     --emboss-color: #fff;
   }
 
-  .light\:invert {
+  .light\:invert,
+  .contacts img {
     filter: invert();
   }
 }
 
 * {
-  transition: color, background-color 200ms ease;
+  transition: color 300ms ease, background-color 300ms ease, fill 500ms ease;
 }
 
 html,
 body {
+  width: 100vw;
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
-  width: 960px;
-  max-width: 98vw;
   margin: auto;
   background: var(--page-bg-color);
   color: var(--page-fg-color);
@@ -43,10 +50,41 @@ body {
   scroll-behavior: smooth;
 }
 
+body>#spacer,
 body>header {
-  height: 420px;
+  position: fixed;
-  background: url(/header.jpg) center no-repeat;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  background-color: var(--header-bg-color);
+}
+
+body>#spacer {
+  height: calc(var(--header-height) * var(--header-multiplier));
+}
+
+body>header {
+  height: var(--header-height);
   color: transparent;
+  transition: transform .3s ease-in-out;
+  transform-origin: top center;
+}
+
+body>header.small {
+  transform: scale(var(--header-multiplier));
+}
+
+body>header>svg {
+  display: block;
+  width: 960px;
+  max-width: 98vw;
+  margin: .5em auto;
+  color: var(--header-fg-color);
+}
+
+body>main {
+  width: 960px;
+  margin: var(--header-height) auto 4em;
 }
 
 a {
@@ -57,15 +95,17 @@ a {
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
-  height: calc(100vh - 420px);
+  height: calc(100vh - var(--header-height));
   margin: 2rem 0;
 }
 
 #content>h1 {
-  margin: 2em 0 .25em;
+  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);
 }
 
 #menu {
@@ -102,26 +142,70 @@ blockquote {
   background-color: rgba(128, 128, 128, .2);
 }
 
-#menu>a>img {
+#menu>a>svg {
+  display: block;
   max-width: 200px;
   opacity: .3;
   transition: opacity .3s ease;
 }
 
-#menu>a:hover>img {
+#menu>a:hover>svg {
   opacity: .8;
 }
 
 .contacts {
-  columns: 2;
+  margin: 1.5em 0;
+  columns: 3;
+  column-fill: balance;
 }
 
 .contacts p {
   display: flex;
   align-items: center;
   gap: 1rem;
+  margin: 0 0 1em 0;
 }
 
 .contacts img {
   width: 3rem;
 }
+
+#header-tilde,
+#header-bracket,
+#header-underscore {
+  fill: var(--highlight-fg-color);
+}
+
+#header-k,
+#header-o,
+#header-e,
+#header-h,
+#header-r {
+  fill: var(--header-fg-color);
+}
+
+#header-underscore {
+  animation: fade 2s linear infinite;
+}
+
+@keyframes fade {
+  0% {
+    opacity: 1.0;
+  }
+
+  50% {
+    opacity: 0.0;
+  }
+
+  60% {
+    opacity: 0.0;
+  }
+
+  80% {
+    opacity: 1.0;
+  }
+
+  100% {
+    opacity: 1.0;
+  }
+}

static/term.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="#fff8e7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 15h-5m-5-5 3 2.5L7 15m-4 .8V8.2c0-1.1 0-1.7.2-2.1.2-.4.5-.7.9-.9C4.5 5 5 5 6.2 5h11.6c1.1 0 1.7 0 2.1.2.4.2.7.5.9.9.2.4.2 1 .2 2.1v7.6c0 1.1 0 1.7-.2 2.1a2 2 0 0 1-.9.9c-.4.2-1 .2-2.1.2H6.2c-1.1 0-1.7 0-2.1-.2a2 2 0 0 1-.9-.9c-.2-.4-.2-1-.2-2.1Z"/></svg>

static/threads.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 878 1000"><path fill="#888785" d="M447 1000h-1c-149-1-263-50-341-146A560 560 0 0 1 0 500c1-149 37-268 106-354C183 50 297 1 446 0h1c114 1 210 30 284 87 70 54 119 131 147 228l-85 24C747 174 630 90 447 88c-122 1-213 39-273 114-56 69-84 169-85 298 1 129 29 229 85 299 60 74 152 112 273 113 109-1 181-27 241-85 69-68 68-150 46-200-13-30-37-55-68-73-8 56-26 102-54 136-37 46-89 71-155 75-50 2-99-9-136-34a156 156 0 0 1-18-252c37-31 89-50 150-53 45-3 87-1 125 5-5-30-15-55-31-73-21-24-54-37-98-37h-1c-35 0-83 10-114 55l-73-49c41-61 107-94 187-94h2c133 1 212 82 220 225l13 5c62 30 108 74 132 128 33 76 36 200-65 299a405 405 0 0 1-303 110zm42-487-31 1c-77 4-125 39-122 89 3 52 61 77 116 74 51-3 118-23 129-155-28-6-59-9-92-9z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 878 1000"><path fill="#eacb8b" d="M447 1000h-1c-149-1-263-50-341-146A560 560 0 0 1 0 500c1-149 37-268 106-354C183 50 297 1 446 0h1c114 1 210 30 284 87 70 54 119 131 147 228l-85 24C747 174 630 90 447 88c-122 1-213 39-273 114-56 69-84 169-85 298 1 129 29 229 85 299 60 74 152 112 273 113 109-1 181-27 241-85 69-68 68-150 46-200-13-30-37-55-68-73-8 56-26 102-54 136-37 46-89 71-155 75-50 2-99-9-136-34a156 156 0 0 1-18-252c37-31 89-50 150-53 45-3 87-1 125 5-5-30-15-55-31-73-21-24-54-37-98-37h-1c-35 0-83 10-114 55l-73-49c41-61 107-94 187-94h2c133 1 212 82 220 225l13 5c62 30 108 74 132 128 33 76 36 200-65 299a405 405 0 0 1-303 110zm42-487-31 1c-77 4-125 39-122 89 3 52 61 77 116 74 51-3 118-23 129-155-28-6-59-9-92-9z"/></svg>

static/twitter.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#888785" d="M19.8 4a4.8 4.8 0 0 0 1.6-.8A1 1 0 0 1 23 4c0 1-.1 2-.4 2.7-.3.7-.7 1.2-1.1 1.7-.2 3.4-1.2 6-2.7 8a12.2 12.2 0 0 1-5.7 4.2c-2.2.7-4.5.9-6.5.6-2-.2-4-.9-5.2-2a1 1 0 0 1 .7-1.7 7 7 0 0 0 3.6-.5l-.6-.4c-1-.6-1.7-1.5-2-2.2a1 1 0 0 1 .3-1.2 5 5 0 0 1-1.9-3.7 1 1 0 0 1 .7-1L2 7.7a9.2 9.2 0 0 1 0-4 1 1 0 0 1 2-.1c1 1.9 3 3 4.9 3.7l2.3.6a5 5 0 0 1 1-3c.6-1 1.6-1.7 2.6-2a6 6 0 0 1 5 1.1Zm-9 5.8L8 9.1a13 13 0 0 1-4.3-2.5l.1.6c.3 1.1.7 1.7 1 2 .5.1.7.7.5 1.1-.2.7-.8.7-1.4.6.5.7 1.3 1.4 2.7 1.6a1 1 0 0 1 0 2l-.9.2c.2 0 .3.2.5.3.7.5 1.4.7 2 .5a1 1 0 0 1 .8 1.8A10.1 10.1 0 0 1 5.8 19l1 .1c1.8.3 3.8.1 5.6-.5a9.9 9.9 0 0 0 4.8-3.5 12 12 0 0 0 2.3-7.2c0-.3.1-.5.3-.7.4-.5.8-1 1-1.6l-1.1.3a1 1 0 0 1-1-.3 4 4 0 0 0-3.4-1c-.6.2-1.2.6-1.6 1.2-.4.6-.7 1.6-.7 3.1 0 .3-.1.6-.3.7-.5.5-1.4.2-2 .1Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#eacb8b" d="M19.8 4a4.8 4.8 0 0 0 1.6-.8A1 1 0 0 1 23 4c0 1-.1 2-.4 2.7-.3.7-.7 1.2-1.1 1.7-.2 3.4-1.2 6-2.7 8a12.2 12.2 0 0 1-5.7 4.2c-2.2.7-4.5.9-6.5.6-2-.2-4-.9-5.2-2a1 1 0 0 1 .7-1.7 7 7 0 0 0 3.6-.5l-.6-.4c-1-.6-1.7-1.5-2-2.2a1 1 0 0 1 .3-1.2 5 5 0 0 1-1.9-3.7 1 1 0 0 1 .7-1L2 7.7a9.2 9.2 0 0 1 0-4 1 1 0 0 1 2-.1c1 1.9 3 3 4.9 3.7l2.3.6a5 5 0 0 1 1-3c.6-1 1.6-1.7 2.6-2a6 6 0 0 1 5 1.1Zm-9 5.8L8 9.1a13 13 0 0 1-4.3-2.5l.1.6c.3 1.1.7 1.7 1 2 .5.1.7.7.5 1.1-.2.7-.8.7-1.4.6.5.7 1.3 1.4 2.7 1.6a1 1 0 0 1 0 2l-.9.2c.2 0 .3.2.5.3.7.5 1.4.7 2 .5a1 1 0 0 1 .8 1.8A10.1 10.1 0 0 1 5.8 19l1 .1c1.8.3 3.8.1 5.6-.5a9.9 9.9 0 0 0 4.8-3.5 12 12 0 0 0 2.3-7.2c0-.3.1-.5.3-.7.4-.5.8-1 1-1.6l-1.1.3a1 1 0 0 1-1-.3 4 4 0 0 0-3.4-1c-.6.2-1.2.6-1.6 1.2-.4.6-.7 1.6-.7 3.1 0 .3-.1.6-.3.7-.5.5-1.4.2-2 .1Z"/></svg>