Update release build

Pure CSS, baby!

themes/kosmos-22/layouts/partials/topnav.html

@@ -1,6 +1,6 @@
 <header class="max-w-5xl mx-auto px-8 text-left">
-  <div class="w-full flex items-center justify-items-stretch h-20">
-    <div class="grow-0 shrink-0">
+  <div class="w-full h-20 flex items-center justify-items-stretch">
+    <div class="grow md:grow-0 shrink-0">
       <svg class="inline-block align-top -mt-0.5 mr-1.5 w-auto h-6"  width="65.364" height="55.773" enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 65.364 55.773" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g id="layer1" transform="translate(28.868 20.259)" fill="#000"><path id="path2" d="m22.81-9.2546-0.0137-0.0072c-0.0445-0.0196-0.0895-0.04052-0.13335-0.06078l-23.822-10.937s2.0034 9.219 2.914 11.778c0 0-27.292-8.1582-30.623-8.9354 1.0916 4.2618 20.006 40.848 20.006 40.848 3.8225 7.7608 12.677 12.083 21.912 12.083 12.949 0 23.446-10.497 23.446-23.446 6.6e-4 -9.4655-5.609-17.62-13.685-21.323z" fill="#000" stroke-width=".65365"/></g></svg>
       <h1 class="inline-block uppercase font-bold">{{ .Site.Title }}</h1>
     </div>
@@ -8,10 +8,9 @@
       <ul class="ml-16 flex items-baseline space-x-8">
         {{ $currentPage := . }}
         {{ range .Site.Menus.main }}
-        <li class="{{ if $currentPage.IsMenuCurrent "main" . }}border-b-2 border-teal-500{{ end }}">
+        <li>
           <a href="{{ .URL }}" class="font-bold">
-            {{ .Pre }}
-            <span>{{ .Name }}</span>
+            <span class="{{ if $currentPage.IsMenuCurrent "main" . }}border-b-2 border-teal-500{{ end }}">{{ .Name }}</span>
           </a>
         </li>
         {{ end }}
@@ -43,5 +42,39 @@
         </li>
       </ul>
     </nav>
+    <label class="-mr-2 block md:hidden" aria-hidden="true">
+      <input id="mobile-nav-is-open" type="checkbox" class="hidden" />
+      <div>
+        <a id="toggle-mobile-nav" tabindex="0" title="Open menu"
+           class="inline-flex items-center justify-center p-2 text-black
+                   rounded-md bg-transparent hover:bg-zinc-100
+                   focus:outline-none focus:ring-2 focus:ring-offset-2
+                   focus:ring-offset-zinc-400 focus:ring-white">
+          <!-- Heroicon name: outline/menu -->
+          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg"
+               fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+          </svg>
+          <!-- Heroicon name: outline/x -->
+          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg"
+               fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </a>
+        <div class="backdrop absolute top-20 left-0 right-0 bottom-0 bg-zinc-800/70"></div>
+        <nav class="absolute top-20 left-0 right-0 bg-white px-8 pt-2 pb-8">
+          <ul class="flex flex-col items-start items-stretch space-y-6">
+            {{ $currentPage := . }}
+            {{ range .Site.Menus.main }}
+            <li>
+              <a href="{{ .URL }}" class="block font-bold">
+                <span class="{{ if $currentPage.IsMenuCurrent "main" . }}border-b-2 border-teal-500{{ end }}">{{ .Name }}</span>
+              </a>
+            </li>
+            {{ end }}
+          </ul>
+        </div>
+      </div>
+    </label>
   </div>
 </header>

themes/kosmos-22/source/main.css

@@ -38,4 +38,14 @@
   .content a:hover   { @apply text-sky-700 border-b border-zinc-400; }
   .content a:visited { @apply text-indigo-600 }
   .content a:active  { @apply text-sky-500; }
+
+  input#mobile-nav-is-open + div > a svg:last-of-type          { @apply hidden; }
+  input#mobile-nav-is-open:checked + div > a svg:first-of-type { @apply hidden; }
+  input#mobile-nav-is-open:checked + div > a svg:last-of-type  { @apply block; }
+
+  input#mobile-nav-is-open + div > div.backdrop         { @apply hidden; }
+  input#mobile-nav-is-open:checked + div > div.backdrop { @apply block; }
+
+  input#mobile-nav-is-open + div > nav         { @apply hidden; }
+  input#mobile-nav-is-open:checked + div > nav { @apply block }
 }