checkbox hack

.zs/layout.html

@@ -4,18 +4,21 @@
 <meta name=viewport content="width=device-width,initial-scale=1" />
 
 <header>
-  <nav>
-    <a href=/>jonathan.is</a>
-    <menu>
-      <li id=landing {{ active . }}><a href=#>/???</a>
-      <li {{ active writing }}><a href=/writing>/writing</a>
-      <li {{ active speaking }}><a href=/speaking>/speaking</a>
-      <li {{ active coding }}><a href=/coding>/coding</a>
-      <li {{ active making }}><a href=/making>/making</a>
-      <li {{ active working }}><a href=/working>/working</a>
-      <li {{ active living }}><a href=/living>/living</a>
-    </menu>
-  </nav>
+  <input type=checkbox id=check />
+  <label for=check class=menu>
+    <nav>
+      <a href=/>jonathan.is</a>
+      <menu>
+        <li id=landing {{ active . }}><a href=/>/???</a>
+        <li {{ active writing }}><a href=/writing>/writing</a>
+        <li {{ active speaking }}><a href=/speaking>/speaking</a>
+        <li {{ active coding }}><a href=/coding>/coding</a>
+        <li {{ active making }}><a href=/making>/making</a>
+        <li {{ active working }}><a href=/working>/working</a>
+        <li {{ active living }}><a href=/living>/living</a>
+      </menu>
+    </nav>
+  </label>
 </header>
 
 <main>

style.css

@@ -1,3 +1,8 @@
+/* single element niceties */
+a { color: inherit }
+img, video { max-width: 100% }
+li { list-style: none }
+
 body {
   font-size: medium;
   padding: 1em;
@@ -13,7 +18,7 @@ header {
   background: white;
   position: sticky;
   top: 0;
-  & > nav {
+  & nav {
     background: white;
     position: sticky;
     top: 0;
@@ -36,47 +41,48 @@ main {
   flex: 1;
 }
 
-/* single element niceties */
-a { color: inherit }
-img, video { max-width: 100% }
-li { list-style: none }
+menu { cursor: pointer }
 
-/* the /??? which shows in the nav on the homepage */
-#landing {
-  display: none;
+.active {
+  pointer-events: none;
   text-decoration: underline;
 }
 
+#check { display: none; }
+
+#landing.active {
+  display: block;
+}
+
+@media (hover: hover) {
+  menu:hover li {
+    visibility: inherit;
+    display: block;
+  }
+}
+
 /* turn the menu into a dynamic one for highly vertical devices */
 @media (orientation: portrait) {
-  #landing.active {
-    display: block;
+  body {
+    flex-direction: column;
   }
   main {
     min-width: fit-content;
   }
-  header {
-    &:hover > nav > menu > li {
-      visibility: initial;
+  nav {
+    top: 1em;
+  }
+  #check:checked ~ .menu > nav > menu > li {
+    visibility: inherit;
+    display: block;
+  }
+  nav > menu > li {
+    visibility: collapse;
+    display: none;
+    &.active {
+      visibility: inherit;
       display: block;
     }
-    & > nav {
-      top: 1em;
-      & menu {
-        & li {
-          transition: display 3s ease;
-          visibility: collapse;
-          display: none;
-        }
-        & li.active {
-          visibility: inherit;
-          display: block;
-        }
-      }
-    }
-  }
-  body {
-    flex-direction: column;
   }
 }