search view style

yvo-niedrich · Jul 23, 2024 · 52d9bfa · 52d9bfa
1 parent d5a054c
commit 52d9bfa
Showing 1 changed file with 16 additions and 2 deletions.
diff --git a/src/components/RecipeItem.vue b/src/components/RecipeItem.vue
@@ -37,6 +37,16 @@ function placeholderImage(index: number) {
     
     display: grid;
     grid-template-columns: 10rem auto 6rem;
+        
+    @media (max-width: 800px) {
+        grid-template-columns: 10rem auto 2rem;
+        padding: .75em;
+    }
+    
+    @media (max-width: 650px) {
+        grid-template-columns: 8rem auto;
+        padding: .65em;
+    }
     
     &:hover {
         border: 1px solid var(--color-border-hover);
@@ -46,9 +56,13 @@ function placeholderImage(index: number) {
 
 .thumb {
     height: 6rem;
-    width: 9rem;
+    width: 9.5rem;
     text-align: center;
     user-select: none;
+
+    @media (max-width: 650px) {
+        width: 7.5rem;
+    }
     
     &.placeholder img {
         opacity: .75;
@@ -59,7 +73,7 @@ function placeholderImage(index: number) {
     img {
         max-width: 100%;
         max-height: 100%;
-        border-radius: 1rem;
+        border-radius: 1em;
         
         border: 1px solid var(--color-border-hover);
     }