responsive layout

dist/blog/2016-12-04-the-price-to-crack-your-password.html

@@ -367,7 +367,8 @@ article, so I leave you here. Sorry.</p>
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a href="/">home</a></li>
       <li><a title="What I do these days" href="/now">/now</a></li>
       <li><a title="Today I Learned" href="/til">/til</a></li>
@@ -377,6 +378,7 @@ article, so I leave you here. Sorry.</p>
       <li><a title="Tools I use" href="/stack">/stack</a></li>
       <li><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.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>

dist/blog/2017-04-09-the-magic-0xc2.html

@@ -105,7 +105,8 @@ c2 b4 c2 b5 c2 b6 c2 b7  c2 b8 c2 b9 c2 ba c2 bb  |................|
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a href="/">home</a></li>
       <li><a title="What I do these days" href="/now">/now</a></li>
       <li><a title="Today I Learned" href="/til">/til</a></li>
@@ -115,6 +116,7 @@ c2 b4 c2 b5 c2 b6 c2 b7  c2 b8 c2 b9 c2 ba c2 bb  |................|
       <li><a title="Tools I use" href="/stack">/stack</a></li>
       <li><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.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>

dist/blog/2017-08-17-vuejs-reactivity-from-scratch.html

@@ -136,7 +136,8 @@
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a href="/">home</a></li>
       <li><a title="What I do these days" href="/now">/now</a></li>
       <li><a title="Today I Learned" href="/til">/til</a></li>
@@ -146,6 +147,7 @@
       <li><a title="Tools I use" href="/stack">/stack</a></li>
       <li><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.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>

dist/blog/2019-01-10-running-write-freely-on-arm.html

@@ -179,7 +179,8 @@ cd writefreely-arm
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a href="/">home</a></li>
       <li><a title="What I do these days" href="/now">/now</a></li>
       <li><a title="Today I Learned" href="/til">/til</a></li>
@@ -189,6 +190,7 @@ cd writefreely-arm
       <li><a title="Tools I use" href="/stack">/stack</a></li>
       <li><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.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>

dist/blog/2019-01-10-use-openbsds-spleen-bitmap-font-in-linux.html

@@ -91,7 +91,8 @@ setfont ${SPLEENDIR}/spleen-16x32.psfu
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a href="/">home</a></li>
       <li><a title="What I do these days" href="/now">/now</a></li>
       <li><a title="Today I Learned" href="/til">/til</a></li>
@@ -101,6 +102,7 @@ setfont ${SPLEENDIR}/spleen-16x32.psfu
       <li><a title="Tools I use" href="/stack">/stack</a></li>
       <li><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.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>

dist/blog/2019-05-03-freddy-vs-json.html

@@ -656,7 +656,8 @@ requestAnimationFrame(update)
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a href="/">home</a></li>
       <li><a title="What I do these days" href="/now">/now</a></li>
       <li><a title="Today I Learned" href="/til">/til</a></li>
@@ -666,6 +667,7 @@ requestAnimationFrame(update)
       <li><a title="Tools I use" href="/stack">/stack</a></li>
       <li><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.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>

dist/blog/2020-06-29-a-store-implementation-for-vue3-composition-api.html

@@ -259,7 +259,8 @@ defineComponent({
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a href="/">home</a></li>
       <li><a title="What I do these days" href="/now">/now</a></li>
       <li><a title="Today I Learned" href="/til">/til</a></li>
@@ -269,6 +270,7 @@ defineComponent({
       <li><a title="Tools I use" href="/stack">/stack</a></li>
       <li><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.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>

dist/blog/index.html

@@ -138,7 +138,8 @@
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a href="/">home</a></li>
       <li><a title="What I do these days" href="/now">/now</a></li>
       <li><a title="Today I Learned" href="/til">/til</a></li>
@@ -148,6 +149,7 @@
       <li><a title="Tools I use" href="/stack">/stack</a></li>
       <li><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.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>

dist/cv/index.html

@@ -85,7 +85,8 @@
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a href="/">home</a></li>
       <li><a title="What I do these days" href="/now">/now</a></li>
       <li><a title="Today I Learned" href="/til">/til</a></li>
@@ -95,6 +96,7 @@
       <li><a title="Tools I use" href="/stack">/stack</a></li>
       <li><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.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>

dist/extended.css

@@ -2,28 +2,30 @@
   position: fixed;
   top: var(--header-height);
   width: 100vw;
+  background-color: var(--menu-bg-color);
+  transition: top .3s ease-in-out, background-color 1s ease-in;
+}
+
+#main-menu>menu {
+  width: 960px;
+  max-width: 98%;
   height: 1.2rem;
-  margin: 0;
+  margin: 0 auto 0;
   padding: 0;
   display: flex;
-  justify-content: center;
+  justify-content: space-around;
   align-items: center;
-  gap: 4rem;
   list-style: circle;
-  background: var(--menu-bg-color);
-  transition: all .3s ease-in-out;
 }
 #main-menu > li {
   padding: 0;
 }
 body>header.small + #main-menu {
-  top: calc(var(--header-height-small) + 2rem);
+  top: var(--header-height-small);
-  height: 14rem;
+  background-color: var(--header-bg-color);
-  width: 6rem;
+}
-  flex-flow: column nowrap;
+body>header.small + #main-menu>menu {
-  gap: .5rem;
+  padding: .5rem 0;
-  align-items: stretch;
-  padding: 0 1rem;
 }
 pre {
   background: var(--emboss-color);
@@ -33,3 +35,12 @@ li.active>a {
   color: var(--highlight-fg-color);
   font-weight: bold;
 }
+
+@media (max-width: 480px) {
+  #main-menu>menu {
+    height: 2.4rem;
+    margin-left: 1.5rem;
+    flex-flow: column wrap;
+    align-items: flex-start;
+  }
+}

dist/index.html

@@ -54,7 +54,7 @@
         <a title="Contact me" href="#contact">Get in touch</a>!
       </p>
 
-      <div id=menu>
+      <div id=cta>
         <a href="#content">
           Learn more about me and my work, here
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
@@ -135,7 +135,8 @@
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a title="What I do these days" href="/now">/now</a></li>
       <li><a title="Today I Learned" href="/til">/til</a></li>
       <li><a title="My projects" href="/projects">/projects</a></li>
@@ -144,6 +145,7 @@
       <li><a title="Tools I use" href="/stack">/stack</a></li>
       <li><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.css rel=stylesheet>
   <script>
     const el = document.getElementById('header')

dist/now/index.html

@@ -87,7 +87,8 @@ by <a href="https://openlibrary.org/authors/OL7564045A/Camille_Fournier">Camille
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a href="/">home</a></li>
       <li class="active"><a title="What I do these days" href="/now">/now</a></li>
       <li><a title="Today I Learned" href="/til">/til</a></li>
@@ -97,6 +98,7 @@ by <a href="https://openlibrary.org/authors/OL7564045A/Camille_Fournier">Camille
       <li><a title="Tools I use" href="/stack">/stack</a></li>
       <li><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.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>

dist/posts.css

@@ -1,5 +1,5 @@
 main.posts {
-  margin: calc(var(--header-height-small) + 2rem) auto 4rem;
+  margin: calc(var(--header-height-small) + 4rem) auto 4rem;
 }
 main.posts h2 {
   margin: 1.5em 0 0 0;

dist/projects/index.html

@@ -85,7 +85,8 @@
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a href="/">home</a></li>
       <li><a title="What I do these days" href="/now">/now</a></li>
       <li><a title="Today I Learned" href="/til">/til</a></li>
@@ -95,6 +96,7 @@
       <li><a title="Tools I use" href="/stack">/stack</a></li>
       <li><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.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>

dist/setup/index.html

@@ -85,7 +85,8 @@
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a href="/">home</a></li>
       <li><a title="What I do these days" href="/now">/now</a></li>
       <li><a title="Today I Learned" href="/til">/til</a></li>
@@ -95,6 +96,7 @@
       <li><a title="Tools I use" href="/stack">/stack</a></li>
       <li class="active"><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.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>

dist/stack/index.html

@@ -89,7 +89,8 @@
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a href="/">home</a></li>
       <li><a title="What I do these days" href="/now">/now</a></li>
       <li><a title="Today I Learned" href="/til">/til</a></li>
@@ -99,6 +100,7 @@
       <li class="active"><a title="Tools I use" href="/stack">/stack</a></li>
       <li><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.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>

dist/style.css

@@ -2,8 +2,8 @@
   --header-bg-color: #1b1c1d;
   --header-fg-color: #a3bd8d;
   --header-height: 192px;
-  --header-multiplier: .25;
+  --header-height-small: calc(var(--header-height) * .25);
-  --header-height-small: calc(var(--header-height)*var(--header-multiplier));
+  --header-height-multiplier: .25;
   --page-bg-color: #232425;
   --page-fg-color: #7e9fbe;
   --menu-bg-color: #000;
@@ -74,7 +74,7 @@ body>header {
 }
 
 body>header.small {
-  transform: scale(var(--header-multiplier));
+  transform: scale(var(--header-height-multiplier));
 }
 
 body>header>svg {
@@ -95,13 +95,23 @@ a {
   color: var(--page-fg-color);
 }
 
+blockquote {
+  margin: 0;
+  padding: .5em .5em .5em 1em;
+  background-color: rgba(128, 128, 128, .1);
+  border-radius: 12px;
+}
+
 #intro {
   display: flex;
   flex-flow: column nowrap;
-  height: calc(100vh - var(--header-height));
+  min-height: calc(100vh - var(--header-height));
   margin: 2rem 0;
 }
 
+#content {
+  padding-top: 2rem;
+}
 #content>h1,
 main.posts > header > h1 {
   margin: 0 0 .25em;
@@ -114,21 +124,16 @@ main.posts > header > h1 {
   padding-top: 2em;
 }
 
-#menu {
+#cta {
   display: flex;
+  flex-flow: row wrap;
   justify-content: space-between;
   align-items: center;
   gap: 1rem;
 }
 
-blockquote {
+#cta>a {
-  margin: 0;
+  width: 450px;
-  padding: .5em .5em .5em 1em;
-  background-color: rgba(128, 128, 128, .1);
-  border-radius: 12px;
-}
-
-#menu>a {
   padding: 2rem .5rem 0;
   display: flex;
   flex-flow: column nowrap;
@@ -144,18 +149,18 @@ blockquote {
   border-radius: 12px;
 }
 
-#menu>a:hover {
+#cta>a:hover {
   background-color: rgba(128, 128, 128, .2);
 }
 
-#menu>a>svg {
+#cta>a>svg {
   display: block;
   max-width: 200px;
   opacity: .3;
   transition: opacity .3s ease;
 }
 
-#menu>a:hover>svg {
+#cta>a:hover>svg {
   opacity: .8;
 }
 
@@ -215,3 +220,13 @@ blockquote {
     opacity: 1.0;
   }
 }
+
+@media (max-width: 980px) {
+  :root {
+    --header-height: calc(100vw * 0.17);
+    --header-height-small: 48px;
+  }
+  #cta>a {
+    width: 100%;
+  }
+}

dist/til/2021-08-31.html

@@ -67,7 +67,8 @@
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a href="/">home</a></li>
       <li><a title="What I do these days" href="/now">/now</a></li>
       <li class="active"><a title="Today I Learned" href="/til">/til</a></li>
@@ -77,6 +78,7 @@
       <li><a title="Tools I use" href="/stack">/stack</a></li>
       <li><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.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>

dist/til/2021-09-03.html

@@ -66,7 +66,8 @@
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a href="/">home</a></li>
       <li><a title="What I do these days" href="/now">/now</a></li>
       <li class="active"><a title="Today I Learned" href="/til">/til</a></li>
@@ -76,6 +77,7 @@
       <li><a title="Tools I use" href="/stack">/stack</a></li>
       <li><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.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>

dist/til/2021-09-04.html

@@ -66,7 +66,8 @@
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a href="/">home</a></li>
       <li><a title="What I do these days" href="/now">/now</a></li>
       <li class="active"><a title="Today I Learned" href="/til">/til</a></li>
@@ -76,6 +77,7 @@
       <li><a title="Tools I use" href="/stack">/stack</a></li>
       <li><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.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>

dist/til/2021-09-05.html

@@ -66,7 +66,8 @@
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a href="/">home</a></li>
       <li><a title="What I do these days" href="/now">/now</a></li>
       <li class="active"><a title="Today I Learned" href="/til">/til</a></li>
@@ -76,6 +77,7 @@
       <li><a title="Tools I use" href="/stack">/stack</a></li>
       <li><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.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>

dist/til/2022-02-22.html

@@ -97,7 +97,8 @@ export default defineConfig({
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a href="/">home</a></li>
       <li><a title="What I do these days" href="/now">/now</a></li>
       <li class="active"><a title="Today I Learned" href="/til">/til</a></li>
@@ -107,6 +108,7 @@ export default defineConfig({
       <li><a title="Tools I use" href="/stack">/stack</a></li>
       <li><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.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>

dist/til/2022-03-22.html

@@ -69,7 +69,8 @@
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a href="/">home</a></li>
       <li><a title="What I do these days" href="/now">/now</a></li>
       <li class="active"><a title="Today I Learned" href="/til">/til</a></li>
@@ -79,6 +80,7 @@
       <li><a title="Tools I use" href="/stack">/stack</a></li>
       <li><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.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>

dist/til/2022-03-28.html

@@ -70,7 +70,8 @@
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a href="/">home</a></li>
       <li><a title="What I do these days" href="/now">/now</a></li>
       <li class="active"><a title="Today I Learned" href="/til">/til</a></li>
@@ -80,6 +81,7 @@
       <li><a title="Tools I use" href="/stack">/stack</a></li>
       <li><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.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>

dist/til/2022-04-25.html

@@ -87,7 +87,8 @@ expect(thatFunction).toHaveBeenCalled()
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a href="/">home</a></li>
       <li><a title="What I do these days" href="/now">/now</a></li>
       <li class="active"><a title="Today I Learned" href="/til">/til</a></li>
@@ -97,6 +98,7 @@ expect(thatFunction).toHaveBeenCalled()
       <li><a title="Tools I use" href="/stack">/stack</a></li>
       <li><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.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>

dist/til/2022-06-15.html

@@ -67,7 +67,8 @@
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a href="/">home</a></li>
       <li><a title="What I do these days" href="/now">/now</a></li>
       <li class="active"><a title="Today I Learned" href="/til">/til</a></li>
@@ -77,6 +78,7 @@
       <li><a title="Tools I use" href="/stack">/stack</a></li>
       <li><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.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>

dist/til/2024-05-11.html

@@ -74,7 +74,8 @@
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a href="/">home</a></li>
       <li><a title="What I do these days" href="/now">/now</a></li>
       <li class="active"><a title="Today I Learned" href="/til">/til</a></li>
@@ -84,6 +85,7 @@
       <li><a title="Tools I use" href="/stack">/stack</a></li>
       <li><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.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>

dist/til/2024-05-12.html

@@ -71,7 +71,8 @@
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a href="/">home</a></li>
       <li><a title="What I do these days" href="/now">/now</a></li>
       <li class="active"><a title="Today I Learned" href="/til">/til</a></li>
@@ -81,6 +82,7 @@
       <li><a title="Tools I use" href="/stack">/stack</a></li>
       <li><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.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>

dist/til/2024-05-13.html

@@ -67,7 +67,8 @@
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a href="/">home</a></li>
       <li><a title="What I do these days" href="/now">/now</a></li>
       <li class="active"><a title="Today I Learned" href="/til">/til</a></li>
@@ -77,6 +78,7 @@
       <li><a title="Tools I use" href="/stack">/stack</a></li>
       <li><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.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>

dist/til/index.html

@@ -150,7 +150,8 @@
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a href="/">home</a></li>
       <li><a title="What I do these days" href="/now">/now</a></li>
       <li class="active"><a title="Today I Learned" href="/til">/til</a></li>
@@ -160,6 +161,7 @@
       <li><a title="Tools I use" href="/stack">/stack</a></li>
       <li><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.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>

layouts/blog/index.html

@@ -65,7 +65,8 @@
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a href="/">home</a></li>
       <li><a title="What I do these days" href="/now">/now</a></li>
       <li><a title="Today I Learned" href="/til">/til</a></li>
@@ -75,6 +76,7 @@
       <li><a title="Tools I use" href="/stack">/stack</a></li>
       <li><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.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>

layouts/cv/index.html

@@ -65,7 +65,8 @@
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a href="/">home</a></li>
       <li><a title="What I do these days" href="/now">/now</a></li>
       <li><a title="Today I Learned" href="/til">/til</a></li>
@@ -75,6 +76,7 @@
       <li><a title="Tools I use" href="/stack">/stack</a></li>
       <li><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.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>

layouts/index.html

@@ -54,7 +54,7 @@
         <a title="Contact me" href="#contact">Get in touch</a>!
       </p>
 
-      <div id=menu>
+      <div id=cta>
         <a href="#content">
           Learn more about me and my work, here
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
@@ -107,7 +107,8 @@
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a title="What I do these days" href="/now">/now</a></li>
       <li><a title="Today I Learned" href="/til">/til</a></li>
       <li><a title="My projects" href="/projects">/projects</a></li>
@@ -116,6 +117,7 @@
       <li><a title="Tools I use" href="/stack">/stack</a></li>
       <li><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.css rel=stylesheet>
   <script>
     const el = document.getElementById('header')

layouts/now/index.html

@@ -65,7 +65,8 @@
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a href="/">home</a></li>
       <li class="active"><a title="What I do these days" href="/now">/now</a></li>
       <li><a title="Today I Learned" href="/til">/til</a></li>
@@ -75,6 +76,7 @@
       <li><a title="Tools I use" href="/stack">/stack</a></li>
       <li><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.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>

layouts/projects/index.html

@@ -65,7 +65,8 @@
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a href="/">home</a></li>
       <li><a title="What I do these days" href="/now">/now</a></li>
       <li><a title="Today I Learned" href="/til">/til</a></li>
@@ -75,6 +76,7 @@
       <li><a title="Tools I use" href="/stack">/stack</a></li>
       <li><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.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>

layouts/setup/index.html

@@ -65,7 +65,8 @@
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a href="/">home</a></li>
       <li><a title="What I do these days" href="/now">/now</a></li>
       <li><a title="Today I Learned" href="/til">/til</a></li>
@@ -75,6 +76,7 @@
       <li><a title="Tools I use" href="/stack">/stack</a></li>
       <li class="active"><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.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>

layouts/stack/index.html

@@ -65,7 +65,8 @@
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a href="/">home</a></li>
       <li><a title="What I do these days" href="/now">/now</a></li>
       <li><a title="Today I Learned" href="/til">/til</a></li>
@@ -75,6 +76,7 @@
       <li class="active"><a title="Tools I use" href="/stack">/stack</a></li>
       <li><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.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>

layouts/til/index.html

@@ -65,7 +65,8 @@
     </div>
     Code Artist
   </header>
-  <menu id="main-menu">
+  <div id="main-menu">
+    <menu>
       <li><a href="/">home</a></li>
       <li><a title="What I do these days" href="/now">/now</a></li>
       <li class="active"><a title="Today I Learned" href="/til">/til</a></li>
@@ -75,6 +76,7 @@
       <li><a title="Tools I use" href="/stack">/stack</a></li>
       <li><a title="Hardware I use" href="/setup">/setup</a></li>
     </menu>
+  </div>
   <link href=/extended.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>

static/extended.css

@@ -2,28 +2,30 @@
   position: fixed;
   top: var(--header-height);
   width: 100vw;
+  background-color: var(--menu-bg-color);
+  transition: top .3s ease-in-out, background-color 1s ease-in;
+}
+
+#main-menu>menu {
+  width: 960px;
+  max-width: 98%;
   height: 1.2rem;
-  margin: 0;
+  margin: 0 auto 0;
   padding: 0;
   display: flex;
-  justify-content: center;
+  justify-content: space-around;
   align-items: center;
-  gap: 4rem;
   list-style: circle;
-  background: var(--menu-bg-color);
-  transition: all .3s ease-in-out;
 }
 #main-menu > li {
   padding: 0;
 }
 body>header.small + #main-menu {
-  top: calc(var(--header-height-small) + 2rem);
+  top: var(--header-height-small);
-  height: 14rem;
+  background-color: var(--header-bg-color);
-  width: 6rem;
+}
-  flex-flow: column nowrap;
+body>header.small + #main-menu>menu {
-  gap: .5rem;
+  padding: .5rem 0;
-  align-items: stretch;
-  padding: 0 1rem;
 }
 pre {
   background: var(--emboss-color);
@@ -33,3 +35,12 @@ li.active>a {
   color: var(--highlight-fg-color);
   font-weight: bold;
 }
+
+@media (max-width: 480px) {
+  #main-menu>menu {
+    height: 2.4rem;
+    margin-left: 1.5rem;
+    flex-flow: column wrap;
+    align-items: flex-start;
+  }
+}

static/posts.css

@@ -1,5 +1,5 @@
 main.posts {
-  margin: calc(var(--header-height-small) + 2rem) auto 4rem;
+  margin: calc(var(--header-height-small) + 4rem) auto 4rem;
 }
 main.posts h2 {
   margin: 1.5em 0 0 0;

static/style.css

@@ -2,8 +2,8 @@
   --header-bg-color: #1b1c1d;
   --header-fg-color: #a3bd8d;
   --header-height: 192px;
-  --header-multiplier: .25;
+  --header-height-small: calc(var(--header-height) * .25);
-  --header-height-small: calc(var(--header-height)*var(--header-multiplier));
+  --header-height-multiplier: .25;
   --page-bg-color: #232425;
   --page-fg-color: #7e9fbe;
   --menu-bg-color: #000;
@@ -74,7 +74,7 @@ body>header {
 }
 
 body>header.small {
-  transform: scale(var(--header-multiplier));
+  transform: scale(var(--header-height-multiplier));
 }
 
 body>header>svg {
@@ -95,13 +95,23 @@ a {
   color: var(--page-fg-color);
 }
 
+blockquote {
+  margin: 0;
+  padding: .5em .5em .5em 1em;
+  background-color: rgba(128, 128, 128, .1);
+  border-radius: 12px;
+}
+
 #intro {
   display: flex;
   flex-flow: column nowrap;
-  height: calc(100vh - var(--header-height));
+  min-height: calc(100vh - var(--header-height));
   margin: 2rem 0;
 }
 
+#content {
+  padding-top: 2rem;
+}
 #content>h1,
 main.posts > header > h1 {
   margin: 0 0 .25em;
@@ -114,21 +124,16 @@ main.posts > header > h1 {
   padding-top: 2em;
 }
 
-#menu {
+#cta {
   display: flex;
+  flex-flow: row wrap;
   justify-content: space-between;
   align-items: center;
   gap: 1rem;
 }
 
-blockquote {
+#cta>a {
-  margin: 0;
+  width: 450px;
-  padding: .5em .5em .5em 1em;
-  background-color: rgba(128, 128, 128, .1);
-  border-radius: 12px;
-}
-
-#menu>a {
   padding: 2rem .5rem 0;
   display: flex;
   flex-flow: column nowrap;
@@ -144,18 +149,18 @@ blockquote {
   border-radius: 12px;
 }
 
-#menu>a:hover {
+#cta>a:hover {
   background-color: rgba(128, 128, 128, .2);
 }
 
-#menu>a>svg {
+#cta>a>svg {
   display: block;
   max-width: 200px;
   opacity: .3;
   transition: opacity .3s ease;
 }
 
-#menu>a:hover>svg {
+#cta>a:hover>svg {
   opacity: .8;
 }
 
@@ -215,3 +220,13 @@ blockquote {
     opacity: 1.0;
   }
 }
+
+@media (max-width: 980px) {
+  :root {
+    --header-height: calc(100vw * 0.17);
+    --header-height-small: 48px;
+  }
+  #cta>a {
+    width: 100%;
+  }
+}