make left and right panes accessible on small screens

1 files changed, 21 insertions, 5 deletions

diff --git a/static/skeleton.css b/static/skeleton.css
index e9e39b2..2d7b216 100644
--- a/static/skeleton.css
+++ b/static/skeleton.css
@@ -84,11 +84,8 @@ nav {
         }
       }
     }
-    @media (width < 600px) {
-      max-width: 0;
-      max-height: 0;
-      font-size: 0;
-      visibility: hidden;
+    @media (width < 1200px) {
+      display: none;
     }
   }
   img.avatar {
@@ -99,6 +96,9 @@ nav {
     max-width: 16em;
     overflow: hidden;
     text-overflow: ellipsis;
+    @media (width < 1200px) {
+      display: none;
+    }
   }
 }
 
@@ -143,6 +143,22 @@ main {
   }
 }
 
+#leftPaneActivator,
+#rightPaneActivator {
+  display: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+@media (width < 1200px) {
+  #leftPaneActivator,
+  #rightPaneActivator {
+    display: initial;
+  }
+}
+#rightPaneActivator {
+  text-align: end;
+}
+
 h1 {
   margin: var(--spacing-quadruple) var(--spacing-double);
   padding: 0;