From 8331f2fc29782820416f0e9eef5722df8b0f419d Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Mon, 10 Jun 2024 16:43:11 +0300
Subject: [PATCH] minimal adaptive

---
 app.vue          |  4 ++--
 assets/main.scss | 34 ++++++++++++++++++++++------------
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/app.vue b/app.vue
index 308e79d..b8c4bef 100644
--- a/app.vue
+++ b/app.vue
@@ -122,10 +122,10 @@ const { scrollToAnchor, scrollToTop } = useAnchorScroll({
     </div>
     <div class="siteblock bg-white" id="delivery">
       <div class="container">
-        <div class="prose col-span-6 whitespace-break-spaces">
+        <div class="prose col-span-12 xl:col-span-6 whitespace-break-spaces">
           <span v-html="deliveryText"></span>
         </div>
-        <div class="prose col-span-6 whitespace-break-spaces">
+        <div class="prose col-span-12 xl:col-span-6 whitespace-break-spaces">
           <span v-html="productsText"></span>
         </div>
       </div>
diff --git a/assets/main.scss b/assets/main.scss
index e734164..4cd7648 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -9,19 +9,23 @@ body {
 }
 
 .container {
-    @apply max-w-7xl mx-auto grid grid-cols-12 items-center;
+    @apply max-w-7xl mx-auto grid grid-cols-12 items-center px-4;
 }
 
 .header {
     @apply p-2 bg-slate-200;
+
+    a:not([target="_blank"]) {
+        @apply hidden xl:inline-block
+    }
 }
 
 .logo {
-    @apply text-orange-400 font-bold w-20 text-xl leading-4 col-span-2 py-4;
+    @apply text-orange-400 font-bold w-20 text-xl leading-4 py-4 col-span-12 xl:col-span-2;
 }
 
 .menu {
-    @apply col-span-8 flex justify-between;
+    @apply col-span-12 xl:col-span-8 flex justify-between;
 }
 
 a[href^="#"] {
@@ -36,7 +40,7 @@ a[href^="#"] {
     }
 
     .k-logo {
-        @apply col-span-2 row-span-3 text-9xl text-orange-400;
+        @apply col-span-12 xl:col-span-2 row-span-3 text-9xl text-orange-400;
 
         svg {
             @apply my-0 mx-auto;
@@ -44,14 +48,14 @@ a[href^="#"] {
     }
 
     &-text {
-        @apply col-span-5 text-sm prose whitespace-break-spaces;
+        @apply col-span-12 xl:col-span-5 text-sm prose whitespace-break-spaces;
 
         &-small {
-            @apply col-span-10 text-xs min-w-full prose;
+            @apply col-span-12 xl:col-span-10 text-xs min-w-full prose;
         }
 
         &-social {
-            @apply col-span-10 flex gap-4
+            @apply col-span-12 xl:col-span-10 flex gap-4
         }
     }
 }
@@ -72,7 +76,7 @@ a[href^="#"] {
     }
 
     &-content {
-        @apply col-span-6 h-full flex flex-col justify-between prose;
+        @apply col-span-full xl:col-span-6 h-full flex flex-col justify-between min-w-full prose;
     }
 
     &-text {
@@ -84,13 +88,13 @@ a[href^="#"] {
     }
 
     &-image {
-        @apply col-span-6 flex justify-center items-center;
+        @apply col-span-full xl:col-span-6 flex justify-center items-center;
         min-height: 50vh;
     }
 }
 
 .review {
-    @apply col-span-4 grid grid-cols-4 items-center px-4;
+    @apply col-span-12 md:col-span-6 xl:col-span-4 grid grid-cols-4 items-center px-4;
 
     &-image {
         @apply rounded-full size-20 bg-slate-300 overflow-hidden col-span-1;
@@ -145,7 +149,11 @@ button {
     }
 
     &-item {
-        @apply flex flex-row gap-4 items-center justify-center;
+        @apply flex flex-row gap-4 items-center justify-center flex-wrap;
+
+        label {
+            @apply w-full xl:w-auto;
+        }
 
         .icon {
             @apply hover:text-primary cursor-pointer transition-colors text-2xl;
@@ -174,10 +182,12 @@ button {
 }
 
 .feature {
-    @apply col-span-full flex gap-10 mt-4 justify-between;
+    @apply col-span-full flex gap-10 mt-4 justify-center flex-wrap items-center;
+
     &-item {
         @apply rounded bg-neutral-200 p-4 min-w-36 flex justify-center flex-wrap flex-col;
     }
+
     &-name {
         @apply text-orange-400 font-bold w-20 text-xl leading-4 col-span-2;
     }