position search-bar properly according to window

refs #124
imusify · Nov 5, 2018 · 7e2407a · 7e2407a
1 parent f0cc03b
commit 7e2407a
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 7 deletions.
diff --git a/src/components/CategoriesMenu.vue b/src/components/CategoriesMenu.vue
@@ -165,14 +165,19 @@ export default {
     justify-content: flex-start;
     flex-grow: 0;
     position: sticky;
-    top: 0;
+    top: -1px;
     z-index: 1;
+    background-color: #131314;
 
     > section {
       display: flex;
       justify-content: flex-start;
       align-items: center;
       overflow: hidden;
+
+      &.categories {
+        width: 66vw;
+      }
     }
 
     ul a {
@@ -230,14 +235,40 @@ export default {
   }
 
   @media (min-width: 480px) {
+    .topnav {
+      width: calc(100vw - 19rem);
+    }
+
     .categories, .sub-categories {
       width: calc(100vw - 19rem);
+
+      &.categories {
+        width: 40vw !important;
+      }
     }
   }
 
-  @media (min-width: 1200px) {
-    a.prev, a.next {
-      display: none !important;
+  @media (min-width: 800px) {
+    .categories, .sub-categories {
+      &.categories {
+        width: 60vw !important;
+      }
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .categories, .sub-categories {
+      &.categories {
+        width: 66vw !important;
+      }
+    }
+  }
+
+  @media (min-width: 1440px) {
+    .categories, .sub-categories {
+      &.categories {
+        width: 75vw !important;
+      }
     }
   }
 </style>
diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
@@ -2,7 +2,7 @@
   <form class="search-bar"
         @submit.prevent="search()">
     <input type="text"
-           placeholder="What are you looking for?"
+           placeholder="Search"
            v-model="filter" />
     <button>
       <icon name="magnify" />
@@ -37,7 +37,6 @@ export default {
     position: absolute;
     top: 0;
     right: 0;
-    display: none;
     justify-content: flex-end;
     align-items: center;
 
@@ -46,7 +45,7 @@ export default {
       background: transparent;
       color: #fff;
       font-size: 1.6rem;
-      width: 26rem;
+      width: 10rem;
       opacity: .6;
 
       &::placeholder {