styling

src/App.vue

@@ -12,7 +12,7 @@ const store = useRegistryStore();
 
         <div class="top">
             <div class="logo">
-                <RecipeIcon width="75" height="75" />
+                <RecipeIcon class="app-icon" />
                 <h1 class="green">Rezepte</h1>
             </div>
             <div class="searchbar">
@@ -50,8 +50,24 @@ header {
         grid-template-columns: 9rem auto;
     }
 
+    @media (max-width: 650px) {
+        grid-template-columns: 8rem auto;
+    }
+
 
     .logo {
+
+        .app-icon {
+            transition: max-width .5s, max-height .5s;
+            max-width: 75px;
+            max-height: 75px;
+
+            @media (max-width: 650px) {
+                max-width: 60px;
+                max-height: 60px;
+            }
+        }
+
         cursor: pointer;
         display: block;
         position: relative;
@@ -76,11 +92,16 @@ header {
             font-size: 2.4em;
             transform: rotate(-25deg);
             
-            transition: left .5s, transform 2.5s;
+            transition: left .5s, transform 2.5s, font-size .5s;
 
             @media (max-width: 800px) {
                 left: -.9em;
             }
+
+            @media (max-width: 650px) {
+                font-size: 1.75em;
+                left: -.85em;
+            }
         }
     }
 
@@ -114,7 +135,7 @@ nav {
     margin: 0.5rem 0;
 
     @media (max-width: 650px) {
-        font-size: 0.75em;
+        font-size: 0.85em;
     }
 
     a.router-link-exact-active {

src/components/RecipeItem.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { RouterLink } from 'vue-router'
+import { RouterLink, useRouter } from 'vue-router'
 defineProps<{
     record: RecipeRegistryRecord
 }>();
 
+const router = useRouter();
 function placeholderImage(index: number) {
     return import.meta.env.BASE_URL + 'placeholder/placeholder' + (index % 4 + 1) + ".png"
 }
@@ -12,7 +13,7 @@ function placeholderImage(index: number) {
 <template>
     <div class="item">
         <div :class="{ 'thumb': true, 'placeholder': !record.preview }">
-            <img :src="record.preview || placeholderImage(record.index)" />
+                <img :src="record.preview || placeholderImage(record.index)" @click="() => router.push(`/recipe/${record.slug}`)" />
         </div>
 
         <header>

src/components/Searchbar.vue

@@ -8,7 +8,7 @@ const query = ref('');
 
 const search = debounce(function() {
     if (query.value.length > 2) router.push('/search/' + encodeURIComponent(query.value));
-}, 400);
+}, 300);
 
 watch(query, search);
 
@@ -23,27 +23,45 @@ watch(query, search);
             </svg>
         </div>
         <input type="search" v-model="query" @focus="search" placeholder="Search..." />
-        </div>
+    </div>
 
 </template>
 
 <style lang="scss" scoped>
 
 .search-btn {
     position: relative;
-
+    
     .search-btn-icon {
         position: absolute;
-        top: 0.7em;
+        top: 0.75em;
         left: 0;
         flex: auto;
         align-items: center;
         pointer-events: none;
         padding-inline-start: 0.75rem; 
-
+        
         svg {
-            width: 1.3em;
-            height: 1.3em;
+            width: 1.1em;
+            height: 1.1em;
+        }
+        
+        @media (max-width: 800px) {
+            padding-inline-start: 0.7rem; 
+            top: 0.6em;
+            svg {
+                width: .95em;
+                height: .95em;
+            }
+        }
+        
+        @media (max-width: 650px) {
+            padding-inline-start: 0.6rem;
+            top: 0.55em;
+            svg {
+                width: .85em;
+                height:.85em;
+            }
         }
     }
     
@@ -57,17 +75,29 @@ watch(query, search);
         border-radius: .8em;
         border: 1px solid var(--vt-c-divider-dark-2);
         outline: none;
-
+        
         color: var(--color-text);
-
+        
         &:hover, &:active, &:focus {
             background-color: var(--color-background-soft);
             border: 1px solid var(--vt-c-divider-dark-1);
         }
-
+        
         &::placeholder {
             color: gray;
         }
+        
+        @media (max-width: 800px) {
+            padding: 0.75em 0.75em 0.75em 2.4em;
+        }
+        
+        @media (max-width: 800px) {
+            padding: 0.75em 0.75em 0.75em 2em;
+        }
+        
+        // @media (max-width: 650px) {
+        //     width: 100%;
+        // }
     }
 }