assets/components/header/header.vue

@@ -59,36 +59,40 @@
             </nav>
         </div>
 
-        <Search class="search-full" />
-
-        <v-popover class="search-compact">
+        <form
+            class="search"
+            @submit.prevent="search"
+        >
+            <input
+                v-model="query"
+                type="search"
+                class="search-input"
+                placeholder="Search..."
+            >
             <button
-                type="button"
+                type="submit"
                 class="search-button"
             ><Icon
                 icon="search"
             /></button>
-
-            <Search
-                slot="popover"
-                class="compact"
-            />
-        </v-popover>
+        </form>
     </header>
 </template>
 
 <script>
-import Search from './search.vue';
+async function search() {
+    this.$router.push({ name: 'search', query: { q: this.query } });
+}
 
 export default {
-    components: {
-        Search,
-    },
     data() {
         return {
             query: this.$route.query ? this.$route.query.q : null,
         };
     },
+    methods: {
+        search,
+    },
 };
 </script>
 
@@ -162,34 +166,67 @@ export default {
     }
 }
 
+.search {
+    height: 100%;
+    max-width: 20rem;
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 0 1rem 0 0;
+    border-left: solid 1px $shadow-hint;
+}
+
+.search-input {
+    height: 100%;
+    width: 100%;
+    padding: 0 .5rem;
+    border: none;
+    outline: none;
+    font-size: 1rem;
+    outline: none;
+
+    &::placeholder {
+        color: $shadow;
+    }
+
+    &::-webkit-search-cancel-button {
+        -webkit-appearance: none;
+        padding: .5rem;
+        position: relative;
+        right: 0;
+        color: $text;
+        background: url('/img/cancel-circle2.svg');
+        opacity: .25;
+
+        &:hover {
+            opacity: .5;
+            cursor: pointer;
+        }
+    }
+
+    &:focus::placeholder {
+        color: $shadow-weak;
+    }
+}
+
 .search-button {
     height: 100%;
     padding: 0 1rem;
     background: none;
     border: none;
-    outline: none;
-    margin: .2rem 0 0 0;
+    margin: .3rem 0 0 0;
+
+    .icon {
+        fill: $shadow-weak;
+    }
+
+    &:hover {
+        cursor: pointer;
 
         .icon {
             fill: $shadow;
         }
-
-    &:focus .icon {
-        fill: $primary;
-    }
-}
-
-.search-compact {
-    display: none;
-}
-
-@media(max-width: $breakpoint2) {
-    .search-full {
-        display: none;
-    }
-
-    .search-compact {
-        display: flex;
     }
 }
 
@@ -206,5 +243,10 @@ export default {
     .nav-item {
         flex-grow: 1;
     }
+
+    .nav-link {
+
+
+    }
 }
 </style>

assets/components/header/search.vue

@@ -1,119 +0,0 @@
-<template>
-    <form
-        class="search"
-        @submit.prevent="search"
-    >
-        <input
-            v-model="query"
-            type="search"
-            class="search-input"
-            placeholder="Search..."
-        >
-        <button
-            type="submit"
-            class="search-button"
-        ><Icon
-            icon="search"
-        /></button>
-    </form>
-</template>
-
-<script>
-async function search() {
-    this.$router.push({ name: 'search', query: { q: this.query } });
-}
-
-export default {
-    data() {
-        return {
-            query: null,
-        };
-    },
-    methods: {
-        search,
-    },
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'theme';
-
-.search {
-    height: 100%;
-    max-width: 20rem;
-    display: flex;
-    flex-grow: 1;
-    align-items: center;
-    justify-content: flex-end;
-    padding: 0 1rem 0 0;
-    border-left: solid 1px $shadow-hint;
-
-    &.compact {
-        padding: 0;
-        border: none;
-
-        .search-input {
-            border: solid 1px $shadow-hint;
-        }
-
-        .search-button {
-            padding: 0 .5rem 0 1rem;
-            margin: 0;
-        }
-    }
-}
-
-.search-input {
-    height: 100%;
-    width: 100%;
-    padding: .5rem;
-    border: none;
-    outline: none;
-    font-size: 1rem;
-    outline: none;
-
-    &::placeholder {
-        color: $shadow;
-    }
-
-    &::-webkit-search-cancel-button {
-        -webkit-appearance: none;
-        padding: .5rem;
-        position: relative;
-        right: 0;
-        color: $text;
-        background: url('/img/cancel-circle2.svg');
-        opacity: .25;
-
-        &:hover {
-            opacity: .5;
-            cursor: pointer;
-        }
-    }
-
-    &:focus::placeholder {
-        color: $shadow-weak;
-    }
-}
-
-.search-button {
-    height: 100%;
-    padding: 0 1rem;
-    background: none;
-    border: none;
-    margin: .3rem 0 0 0;
-    outline: none;
-
-    .icon {
-        fill: $shadow-weak;
-    }
-
-    &:hover {
-        cursor: pointer;
-
-        .icon {
-            fill: $shadow;
-        }
-    }
-}
-</style>

assets/components/releases/releases.vue

@@ -75,7 +75,7 @@ export default {
 .tiles {
     width: 100%;
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(20rem, .25fr));
+    grid-template-columns: repeat(auto-fit, minmax(20rem, .33fr));
     grid-gap: 1rem;
 }
 
@@ -85,12 +85,6 @@ export default {
 }
 
 @media(max-width: $breakpoint4) {
-    .tiles {
-        grid-template-columns: repeat(auto-fit, minmax(20rem, .33fr));
-    }
-}
-
-@media(max-width: $breakpoint3) {
     .tiles {
         grid-template-columns: repeat(auto-fit, minmax(20rem, .5fr));
     }
@@ -98,7 +92,7 @@ export default {
 
 @media(max-width: $breakpoint) {
     .tiles {
-        grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
     }
 }
 </style>

assets/css/_tooltip.scss

@@ -81,12 +81,12 @@
   }
 
   &.popover {
-    $color: #fff;
+    $color: #f9f9f9;
 
     .popover-inner {
       background: $color;
       color: black;
-      padding: .5rem;
+      padding: 24px;
       border-radius: 5px;
       box-shadow: 0 5px 30px rgba(black, .1);
     }

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "traxxx",
-    "version": "1.102.2",
+    "version": "1.102.1",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "traxxx",
-    "version": "1.102.2",
+    "version": "1.102.1",
     "description": "All the latest porn releases in one place",
     "main": "src/app.js",
     "scripts": {