From ea43893d4a6b1dff481d08fb94d6961117c8e4a3 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Sun, 11 Sep 2022 10:53:07 -0700
Subject: [PATCH] Fix animations for narrow screen widths

---
 content/home.css | 57 ++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 48 insertions(+), 9 deletions(-)

diff --git a/content/home.css b/content/home.css
index aef68bc..1e0922b 100644
--- a/content/home.css
+++ b/content/home.css
@@ -1,5 +1,5 @@
 :root {
-    --animation-left-offset: 6px;
+    --animation-offset: 6px;
     --animation-duration: 0.7s;
 }
 
@@ -39,13 +39,13 @@ main .grid {
 }
 @media (max-width: 450px) {
     main .grid {
+        gap: 1rem 0;
         grid-template-columns: 1fr;
         grid-template-rows: repeat(3, max-content);
         grid-template-areas:
             "title"
-            "nav"
-            "blurb";
-        margin-block-start: 5vh;
+            "blurb"
+            "nav";
         text-align: center;
     }
 }
@@ -70,24 +70,33 @@ main p {
 #content { grid-area: blurb }
 #nav { grid-area: nav }
 
-#title, #content, #nav { overflow: none; }
 #title > *, #content > *, #nav > * { position: relative; }
 
 #title > * {
     animation: left-fade-in var(--animation-duration) ease-in-out;
 }
+@media (max-width: 450px) {
+    #title > * {
+        animation: top-fade-in var(--animation-duration) ease-in-out;
+    }
+}
 #content > *, #nav > * {
     animation: right-fade-in var(--animation-duration) ease-in-out;
 }
+@media (max-width: 450px) {
+    #content > *, #nav > * {
+        animation: bottom-fade-in var(--animation-duration) ease-in-out;
+    }
+}
 
 @keyframes left-fade-in {
     from {
         opacity: 0%;
-        left: var(--animation-left-offset);
+        left: var(--animation-offset);
     }
     33% {
         opacity: 0%;
-        left: var(--animation-left-offset);
+        left: var(--animation-offset);
     }
     to {
         opacity: 100%;
@@ -98,11 +107,11 @@ main p {
 @keyframes right-fade-in {
     from {
         opacity: 0%;
-        left: calc(-1 * var(--animation-left-offset));
+        left: calc(-1 * var(--animation-offset));
     }
     33% {
         opacity: 0%;
-        left: calc(-1 * var(--animation-left-offset));
+        left: calc(-1 * var(--animation-offset));
     }
     to {
         opacity: 100%;
@@ -110,6 +119,36 @@ main p {
     }
 }
 
+@keyframes top-fade-in {
+    from {
+        opacity: 0%;
+        bottom: calc(-1 * var(--animation-offset));
+    }
+    33% {
+        opacity: 0%;
+        bottom: calc(-1 * var(--animation-offset));
+    }
+    to {
+        opacity: 100%;
+        bottom: 0;
+    }
+}
+
+@keyframes bottom-fade-in {
+    from {
+        opacity: 0%;
+        bottom: var(--animation-offset);
+    }
+    33% {
+        opacity: 0%;
+        bottom: var(--animation-offset);
+    }
+    to {
+        opacity: 100%;
+        bottom: 0;
+    }
+}
+
 .platter {
     padding: 1.5rem 3rem;
 }