From ca184b9e9fa83d141c027db3f0a7749e5b547d54 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Tue, 11 Jan 2022 23:17:25 +0100
Subject: [PATCH] fix: prevent fixed footer on mobile landscape view

---
 src/App.vue | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b6e339d..f09a6e5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,7 +9,9 @@
     <navigation :routes="routes" />
   </header>
 
-  <router-view />
+  <main>
+    <router-view />
+  </main>
 
   <footer class="footer">
     <div class="footer__copyright">
@@ -74,7 +76,7 @@ export default {
 @import "~normalize.css";
 
 #app {
-  padding: 5em 0 7em 0;
+  padding: 5em 0 0 0;
   color: $copy-color;
   font-size: 1.125em;
   -webkit-font-smoothing: antialiased;
@@ -85,6 +87,10 @@ export default {
     font-size: 1.25em;
   }
 
+  @media (min-width: 60em) {
+    padding: 5em 0 7em 0;
+  }
+
   @include mq-bigscreen {
     font-size: 1.5em;
   }
@@ -126,10 +132,6 @@ header {
 }
 
 .footer {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
   padding: 0.75em 0;
   background-color: $bg-color-light;
   text-align: center;
@@ -142,6 +144,13 @@ header {
     padding: 0.75em 0;
   }
 
+  @media (min-width: 60em) {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
   &__copyright {
     margin: 0;
   }