Lift mobile navigation some for chin height

src/App.vue

@@ -1,37 +1,32 @@
 <template>
   <div id="app">
-
     <!-- Header and hamburger navigation -->
     <navigation></navigation>
-
-    <!-- Header with search field -->
-
-    <!-- TODO move this to the navigation component -->
-    <header class="header">
     <search-input v-model="query"></search-input>
-    </header>
 
     <!-- Movie popup that will show above existing rendered content -->
-    <movie-popup v-if="moviePopupIsVisible" :id="popupID" :type="popupType"></movie-popup>
-
+    <movie-popup
+      v-if="moviePopupIsVisible"
+      :id="popupID"
+      :type="popupType"
+    ></movie-popup>
 
     <darkmode-toggle />
 
     <!-- Display the component assigned to the given route (default: home) -->
     <router-view class="content" :key="$route.fullPath"></router-view>
-
   </div>
 </template>
 
 <script>
-import Vue from 'vue'
-import Navigation from '@/components/Navigation'
-import MoviePopup from '@/components/MoviePopup'
-import SearchInput from '@/components/SearchInput'
-import DarkmodeToggle from '@/components/ui/darkmodeToggle'
+import Vue from "vue";
+import Navigation from "@/components/Navigation";
+import MoviePopup from "@/components/MoviePopup";
+import SearchInput from "@/components/SearchInput";
+import DarkmodeToggle from "@/components/ui/darkmodeToggle";
 
 export default {
-  name: 'app',
+  name: "app",
   components: {
     Navigation,
     MoviePopup,
@@ -40,32 +35,35 @@ export default {
   },
   data() {
     return {
-      query: '',
+      query: "",
       moviePopupIsVisible: false,
       popupID: 0,
-      popupType: 'movie'
-    }
+      popupType: "movie"
+    };
   },
   created() {
-    let that = this
+    let that = this;
     Vue.prototype.$popup = {
       get isOpen() {
-        return that.moviePopupIsVisible
+        return that.moviePopupIsVisible;
       },
       open: (id, type) => {
-        this.popupID = id || this.popupID
-        this.popupType = type || this.popupType
-        this.moviePopupIsVisible = true
-        console.log('opened')
+        this.popupID = id || this.popupID;
+        this.popupType = type || this.popupType;
+        this.moviePopupIsVisible = true;
+        console.log("opened");
       },
       close: () => {
-        this.moviePopupIsVisible = false
-        console.log('closed')
-      }
-    }
-    console.log('MoviePopup registered at this.$popup and has state: ', this.$popup.isOpen)
+        this.moviePopupIsVisible = false;
+        console.log("closed");
       }
+    };
+    console.log(
+      "MoviePopup registered at this.$popup and has state: ",
+      this.$popup.isOpen
+    );
   }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -95,23 +93,27 @@ html {
 body {
   margin: 0;
   padding: 0;
-  font-family: 'Roboto', sans-serif;
+  font-family: "Roboto", sans-serif;
   line-height: 1.6;
   background: $background-color;
   color: $text-color;
-  transition: background-color .5s ease, color .5s ease;
+  transition: background-color 0.5s ease, color 0.5s ease;
   &.hidden {
     overflow: hidden;
   }
 }
-h1,h2,h3 {
-  transition: color .5s ease;
+h1,
+h2,
+h3 {
+  transition: color 0.5s ease;
 }
 a:any-link {
   color: inherit;
 }
-input, textarea, button{
-  font-family: 'Roboto', sans-serif;
+input,
+textarea,
+button {
+  font-family: "Roboto", sans-serif;
 }
 figure {
   padding: 0;
@@ -146,14 +148,16 @@ img{
 }
 
 // router view transition
-.fade-enter-active, .fade-leave-active {
+.fade-enter-active,
+.fade-leave-active {
   transition-property: opacity;
   transition-duration: 0.25s;
 }
 .fade-enter-active {
   transition-delay: 0.25s;
 }
-.fade-enter, .fade-leave-active {
-  opacity: 0
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
 }
 </style>

src/components/Navigation.vue

@@ -104,7 +104,7 @@ export default {
   bottom: 0;
   left: 0;
   width: 100%;
-  height: 50px;
+  height: var(--header-size);
   z-index: 10;
   display: block;
   color: $text-color;
@@ -117,20 +117,25 @@ export default {
     height: 100vh;
   }
   &__logo {
-    width: 55px;
+    width: 95px;
     height: $header-size;
     display: flex;
     align-items: center;
     justify-content: center;
     background: $background-nav-logo;
-    @include tablet-min {
-      width: 95px;
+
+    @include mobile-only {
+      align-items: flex-start;
+      padding-top: 0.5rem;
+      width: 55px;
     }
+
     &-image {
       width: 35px;
       height: 31px;
       fill: $green;
       transition: transform 0.5s ease;
+
       @include tablet-min {
         width: 45px;
         height: 40px;
@@ -145,7 +150,7 @@ export default {
     position: fixed;
     width: 55px;
     height: 50px;
-    bottom: 0;
+    bottom: 1.5rem;
     right: 0;
     cursor: pointer;
     z-index: 10;

src/components/SearchInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <!-- <div> -->
   <div class="search">
     <input
       ref="input"
@@ -22,7 +22,7 @@
       <use xlink:href="#iconSearch"></use>
     </svg>
   </div>
-
+  <!-- 
     <transition name="fade">
       <div class="dropdown" v-if="!disabled && focus && query.length > 0">
         <div class="filter">
@@ -73,7 +73,7 @@
         </seasoned-button>
       </div>
     </transition>
-  </div>
+  </div> -->
 </template>
 
 <script>
@@ -347,7 +347,7 @@ hr {
   display: flex;
   position: fixed;
   flex-wrap: wrap;
-  z-index: 5;
+  z-index: 16;
   border: 0;
   background-color: $background-color-secondary;
 
@@ -364,10 +364,12 @@ hr {
 
   input {
     display: block;
+    height: calc($header-size - 1.5rem);
     width: 100%;
     padding: 13px 0 13px 45px;
     outline: none;
     margin: 0;
+    margin-bottom: auto;
     border: 0;
     background-color: $background-color-secondary;
     font-weight: 300;
@@ -376,6 +378,7 @@ hr {
     transition: background-color 0.5s ease, color 0.5s ease;
 
     @include tablet-min {
+      height: calc($header-size);
       padding: 13px 30px 13px 60px;
     }
   }

src/components/ui/darkmodeToggle.vue

@@ -46,7 +46,7 @@ export default {
   z-index: 10;
 
   @include mobile-only {
-    margin-bottom: 3.5rem;
+    margin-bottom: 5rem;
   }
 
   -webkit-user-select: none;

src/scss/main.scss

@@ -1,4 +1,3 @@
-
 .noselect {
   -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none; /* Safari */

src/scss/variables.scss

@@ -18,8 +18,8 @@
 
   --background-nav-logo: #081c24;
   --color-green: #01d277;
-  --color-green-90: rgba(1, 210, 119, .9);
-  --color-green-70: rgba(1, 210, 119, .73);
+  --color-green-90: rgba(1, 210, 119, 0.9);
+  --color-green-70: rgba(1, 210, 119, 0.73);
   --color-teal: #091c24;
   --color-black: #081c24;
   --white: #fff;
@@ -31,7 +31,7 @@
   --color-success-text: #fff;
   --color-success-highlight: rgb(0, 100, 66);
   --color-error: rgba(220, 48, 35, 0.8);
-  --color-error-highlight: #DC3023;
+  --color-error-highlight: #dc3023;
 
   --header-size: 75px;
 }
@@ -55,7 +55,7 @@
 
 @include mobile-only {
   :root {
-    --header-size: 50px;
+    --header-size: calc(50px + 1.5rem);
   }
 }