checkbox hack

.zs/layout.html

@@ -4,10 +4,12 @@
 <meta name=viewport content="width=device-width,initial-scale=1" />
 
 <header>
+  <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 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>
@@ -16,6 +18,7 @@
         <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,48 +41,49 @@ main {
   flex: 1;
 }
 
-/* single element niceties */
+menu { cursor: pointer }
-a { color: inherit }
-img, video { max-width: 100% }
-li { list-style: none }
 
-/* the /??? which shows in the nav on the homepage */
+.active {
-#landing {
+  pointer-events: none;
-  display: 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 {
+  body {
-    display: block;
+    flex-direction: column;
   }
   main {
     min-width: fit-content;
   }
-  header {
+  nav {
-    &:hover > nav > menu > li {
+    top: 1em;
-      visibility: initial;
+  }
+  #check:checked ~ .menu > nav > menu > li {
+    visibility: inherit;
     display: block;
   }
-    & > nav {
+  nav > menu > li {
-      top: 1em;
-      & menu {
-        & li {
-          transition: display 3s ease;
     visibility: collapse;
     display: none;
-        }
+    &.active {
-        & li.active {
       visibility: inherit;
       display: block;
     }
   }
-    }
-  }
-  body {
-    flex-direction: column;
-  }
 }
 
 /* used mostly by .zs/index, should maybe class it? */