From 0b9cade0449d718ff9deb85d93e4eb2d90fdbbee Mon Sep 17 00:00:00 2001
From: Hykilpikonna <me@hydev.org>
Date: Sun, 5 Dec 2021 14:38:19 -0500
Subject: [PATCH] [S] Adapt to smaller screen

---
 src/App.vue | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 2065c51..6c585f0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -183,12 +183,9 @@ export default class App extends Vue
         opacity: 1
 
     #nav.home
-        #nav-background
+        #menu, #nav-background
             opacity: 0
 
-    #nav.home #menu
-        opacity: 0
-
     #nav:not(.home).open
         #items, #nav-bookmark, #nav-background, #meru
             opacity: 1
@@ -212,11 +209,23 @@ export default class App extends Vue
             height: 120px
 
 // Smaller phone layout
-@media screen and (max-width: 400px)
+@media screen and (max-width: 370px)
+    #nav #menu
+        opacity: unset
+
+    #nav.home
+        #menu, #nav-background
+            opacity: unset
+
+    #nav.open
+        #items, #nav-bookmark, #nav-background, #meru
+            opacity: 1
+            animation: fade-in-left .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both
+
     #nav
-        .items
+        #items, #nav-bookmark, #nav-background, #meru
             opacity: 0
-            animation: fade-out-left .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both
+            animation: fade-out-left 1s 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both
 
 // Phone Height
 @media screen and (max-height: 600px)