From 2f0114a3602d92630830dc9341e1649bb74d7515 Mon Sep 17 00:00:00 2001
From: Luki Centuri <lukicenturi@gmail.com>
Date: Tue, 1 Aug 2023 16:34:26 +0700
Subject: [PATCH] fix: mdpi laptop container padding (#123)

---
 assets/css/main.scss                    |  2 +-
 components/NavigationMenu.vue           |  2 +-
 components/download/DownloadHeading.vue |  5 +++--
 components/download/DownloadPreview.vue | 24 +++++++++++++-----------
 4 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/assets/css/main.scss b/assets/css/main.scss
index 054c3a92..9537a701 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -9,7 +9,7 @@
 }
 
 .container {
-  @apply px-4;
+  @apply px-4 md:px-12 xl:px-16;
 }
 
 .fade-enter-active, .fade-leave-active {
diff --git a/components/NavigationMenu.vue b/components/NavigationMenu.vue
index 1d0def43..9f2b72a4 100644
--- a/components/NavigationMenu.vue
+++ b/components/NavigationMenu.vue
@@ -3,7 +3,7 @@ const { t } = useI18n();
 </script>
 
 <template>
-  <div class="flex space-x-4 flex-wrap justify-center">
+  <div class="flex space-x-3 xl:space-x-4 flex-wrap justify-center">
     <ButtonLink size="lg" to="/" highlight-exact-active>{{
       t('navigation_menu.home')
     }}</ButtonLink>
diff --git a/components/download/DownloadHeading.vue b/components/download/DownloadHeading.vue
index 71da15ff..33331f80 100644
--- a/components/download/DownloadHeading.vue
+++ b/components/download/DownloadHeading.vue
@@ -44,11 +44,12 @@ const css = useCssModule();
       @apply flex flex-col space-y-4 mb-16;
 
       .title {
-        @apply text-rui-light-primary text-h6;
+        @apply text-rui-light-primary text-h6 font-medium;
       }
 
       .description {
-        @apply text-rui-text text-h3;
+        @apply text-rui-text text-h4 md:text-h3;
+        @apply font-normal #{!important};
       }
     }
 
diff --git a/components/download/DownloadPreview.vue b/components/download/DownloadPreview.vue
index e3d14f65..907f1146 100644
--- a/components/download/DownloadPreview.vue
+++ b/components/download/DownloadPreview.vue
@@ -55,15 +55,17 @@ scanImages();
           <img :src="image" alt=" " class="w-full" />
         </SwiperSlide>
       </Carousel>
-      <div :class="css.controls">
-        <CarouselControls
-          v-if="swiper"
-          v-model:swiper="swiper"
-          :active-index="activeIndex"
-          :pages="pages"
-        />
-        <div :class="css.preview">
-          {{ t('download.preview') }}
+      <div class="container relative">
+        <div :class="css.controls">
+          <CarouselControls
+            v-if="swiper"
+            v-model:swiper="swiper"
+            :active-index="activeIndex"
+            :pages="pages"
+          />
+          <div :class="css.preview">
+            {{ t('download.preview') }}
+          </div>
         </div>
       </div>
     </div>
@@ -82,10 +84,10 @@ scanImages();
     }
 
     .controls {
-      @apply flex flex-col absolute -bottom-[2.8125rem] z-10 -left-2 -right-2 items-center justify-center;
+      @apply flex flex-col absolute -bottom-[1.75rem] md:-bottom-[3rem] z-10 left-0 right-0 md:-left-6 md:-right-6 items-center justify-center;
 
       .preview {
-        @apply px-8 py-6 rounded-xl border border-black/[.12] bg-white text-h4;
+        @apply px-4 py-3 md:px-8 md:py-6 rounded-xl border border-black/[.12] bg-white text-h5 md:text-h4 font-bold;
         box-shadow: 4px 32px 80px 0 rgba(191, 194, 203, 0.24);
       }
     }