fix: mdpi laptop container padding (#123)

rotki · Aug 1, 2023 · 2f0114a · 2f0114a
1 parent 2f4c0ed
commit 2f0114a
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);
  }
  }