fix: prevent fixed footer on mobile landscape view

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;
   }