[#3361] Landing left and right margins (#3398)

* fix(#3361): update landing margins * fix(#3361): Header and Features styles
epicmaxco · May 23, 2023 · 4c7aee5 · 4c7aee5
1 parent 06db00e
commit 4c7aee5
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 12 deletions.
diff --git a/packages/docs/assets/smart-grid.scss b/packages/docs/assets/smart-grid.scss
@@ -19,11 +19,17 @@ $offset_md_one_side: ($offset_md * 0.5);
 $offset_sm_one_side: ($offset_sm * 0.5);
 $offset_xs_one_side: ($offset_xs * 0.5);
 
-$fields: 1rem;
+$fields: 3rem;
+$fields-xs: 1.5rem;
 
 @mixin wrapper-full() {
  padding-left: $fields;
  padding-right: $fields;
+
+ @media screen and (max-width: $break_xs) {
+ padding-left: $fields-xs;
+ padding-right: $fields-xs;
+ }
 }
 
 @mixin row-offsets() {

diff --git a/packages/docs/components/landing/Features.vue b/packages/docs/components/landing/Features.vue
@@ -112,6 +112,8 @@ const features = [
 
  max-width: 40rem;
  margin-top: 1rem;
+
+ @include sm(max-width, unset);
  }
 
  &__items {
@@ -135,8 +137,9 @@ const features = [
  margin-top: 2rem;
  margin-right: 2rem;
  min-height: 10rem;
- min-width: 14rem;
+ min-width: 8rem;
 
+ @include size-sm(4);
  @include size-xs(12);
  @include xs(margin-right, 0);
  @include xs(min-height, 8rem);

diff --git a/packages/docs/components/landing/Header.vue b/packages/docs/components/landing/Header.vue
@@ -81,15 +81,17 @@
  <HeaderBanner wrapped />
 
  <div class="mobile-menu__menu-button-wrapper">
- <va-button
- v-if="modelValue"
- class="menu-button mobile-menu__menu-button"
- aria-label="Close menu"
- preset="plain"
- @click="$emit('update:modelValue', false)"
- >
- <va-icon class="fas fa-times" />
- </va-button>
+ <div class="mobile-menu__menu-button-container">
+ <va-button
+ v-if="modelValue"
+ class="menu-button mobile-menu__menu-button"
+ aria-label="Close menu"
+ preset="plain"
+ @click="$emit('update:modelValue', false)"
+ >
+ <va-icon class="fas fa-times" />
+ </va-button>
+ </div>
  </div>
 
  <va-list class="mobile-menu__list">
@@ -260,14 +262,20 @@ const { locale, locales, setLocale } = useSharedLanguageSwitcher()
  }
 
  &__menu-button-wrapper {
+ @include wrapper();
+
+ width: 100%;
+ }
+
+ &__menu-button-container {
  position: relative;
  height: var(--header-height);
  width: 100%;
  flex-shrink: 0;
  }
 
  &__menu-button {
- right: 1.5rem;
+ right: 0.5rem;
  }
 
  &__list {