From 24b92006541b72123749853c85f0bbb34be05c89 Mon Sep 17 00:00:00 2001
From: Jonathan Dahan <git@jonathan.is>
Date: Thu, 16 May 2024 18:22:42 -0400
Subject: [PATCH] hack the menu into a dropdown on vertical devices

---
 .zs/layout.html |  1 +
 style.css       | 15 ++++++++-------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/.zs/layout.html b/.zs/layout.html
index bb40ad6..72f2b1c 100644
--- a/.zs/layout.html
+++ b/.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>
diff --git a/style.css b/style.css
index 61a2497..9a78af8 100644
--- a/style.css
+++ b/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 }
       }
-      */
     }
   }
 }