hack the menu into a dropdown on vertical devices

.zs/layout.html

@@ -7,6 +7,7 @@
   <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>

style.css

@@ -7,6 +7,9 @@ body {
 
 img, video { max-width: 100% }
 
+#landing { display: none; text-decoration: underline }
+#landing.active { display: block }
+
 header {
   flex-shrink: 0;
   & > nav {
@@ -23,14 +26,12 @@ header {
     & > menu {
       padding: 0;
       margin: 0;
-      /* TODO: go vertical / dropdown on small screens
-      & li { display: none }
-      & li.active { display: inherit }
-      &:hover li {
-        transition: display 1s ease-in-out;
-        display: block;
+      /* turn the menu into a dynamic one for highly vertical devices */
+      @media (orientation: portrait) {
+        & li { display: none }
+        & li.active { display: inherit }
+        &:hover li { display: block }
       }
-      */
     }
   }
 }