fix: use css vars for global spacing and padding, fix footer width overflow on mobile

packages/logos-docusaurus-theme/src/client/css/custom.scss

@@ -15,7 +15,8 @@
   background-color: transparent !important;
 
   --ifm-menu-color-background-active: transparent;
-  --content-padding: 32px;
+  --content-padding: 16px;
+  --container-max-width: 1440px;
   --ifm-navbar-link-color: rgb(var(--lsd-text-primary));
   --ifm-navbar-background-color: rgb(var(--lsd-surface-primary));
   --ifm-dropdown-link-color: rgb(var(--lsd-text-primary));
@@ -226,6 +227,10 @@
 
   --ifm-hero-background-color: #f8f8fa;
   --ifm-hero-text-color: var(--ifm-color-black);
+
+  @include utils.responsive('xl', 'down') {
+    --container-max-width: 912px;
+  }
 }
 
 [data-theme='dark'] {
@@ -381,7 +386,6 @@ small {
 }
 
 .navbar {
-  padding-inline: 0;
   height: 64px;
   box-shadow: none;
 }
@@ -396,7 +400,6 @@ small {
 
 .navbar__inner {
   align-items: center;
-  padding-inline: 0 !important;
 }
 
 .row {
@@ -531,60 +534,6 @@ small {
   align-items: center;
 }
 
-@include utils.responsive('lg', 'down') {
-  main > .container {
-    padding-bottom: 84px !important;
-  }
-
-  .grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .footer-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .navbar {
-    display: flex;
-    padding-inline: 0 !important;
-    height: 56px;
-    padding: 12px 16px;
-  }
-
-  .navbar__toggle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0;
-    border: 1px solid rgb(var(--lsd-border-primary));
-    // border-left: none;
-    width: 32px;
-    height: 32px;
-    box-sizing: border-box;
-
-    svg {
-      width: 14px;
-      height: 14px;
-    }
-  }
-
-  .navbar__left-items {
-    display: none;
-  }
-
-  .desktop {
-    display: none;
-  }
-
-  .theme-admonition {
-    display: block !important;
-  }
-
-  .footer {
-    padding-bottom: 0px !important;
-  }
-}
-
 @include utils.responsive('sm', 'down') {
   :root {
     --ifm-global-spacing: 0.5rem;
@@ -627,7 +576,6 @@ small {
 
   .col.footer__col {
     margin-bottom: 0 !important;
-    padding-inline: 0 !important;
   }
 
   .navbar__left {
@@ -640,7 +588,6 @@ small {
     padding: 0;
 
     main > .container {
-      padding-inline: 0 !important;
       padding-bottom: 200px !important;
     }
 
@@ -648,7 +595,6 @@ small {
       display: grid;
       grid-template-columns: repeat(16, 42px);
       gap: 1rem;
-      padding-inline: 16px;
 
       aside {
         width: auto;
@@ -703,8 +649,13 @@ small {
   }
 }
 
+.container {
+  padding-inline: var(--content-padding);
+}
+
 .main-wrapper {
   // website pages
+  padding-inline: var(--content-padding);
 
   > .container {
     margin-top: 0 !important;
@@ -730,13 +681,12 @@ small {
 .footer {
   margin-bottom: 18px;
   width: 100% !important;
-  padding-inline: 0;
 
   > div {
     max-width: unset;
     padding: unset;
     margin: unset;
-    padding: 16px;
+    padding: 16px 0;
 
     display: grid;
     grid-template-columns: repeat(24, 1fr);
@@ -823,12 +773,10 @@ small {
 }
 
 .navbar {
-  padding: 12px 16px;
 }
 
 .navbar__inner {
   flex-direction: row;
-  padding: 0 var(--content-padding);
 }
 
 @include utils.responsive('xl', 'up') {
@@ -858,26 +806,58 @@ small {
   }
 }
 
-@include utils.responsive('xl', 'down') {
-  #__docusaurus_skipToContent_fallback {
-    display: block;
-    max-width: 912px;
-    margin: auto;
+@include utils.responsive('lg', 'down') {
+  main > .container {
+    padding-bottom: 84px !important;
   }
 
-  .main-wrapper {
-    & > div {
-      padding-inline: 0;
-    }
+  .grid {
+    grid-template-columns: repeat(2, 1fr);
   }
 
-  .container {
-    padding-inline: 0;
+  .footer-grid {
+    grid-template-columns: 1fr;
   }
 
   .navbar {
-    max-width: 912px;
-    margin: auto;
+    display: flex;
+    height: 56px;
+  }
+
+  .navbar__toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    border: 1px solid rgb(var(--lsd-border-primary));
+    // border-left: none;
+    width: 32px;
+    height: 32px;
+    box-sizing: border-box;
+
+    svg {
+      width: 14px;
+      height: 14px;
+    }
+  }
+
+  .navbar__left-items {
+    display: none;
+  }
+
+  .desktop {
+    display: none;
+  }
+
+  .theme-admonition {
+    display: block !important;
+  }
+
+  .footer {
+    padding-bottom: 0px !important;
+  }
+
+  .main-wrapper {
     padding-inline: 0;
   }
 }

packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/styles.module.scss

@@ -21,9 +21,13 @@
 }
 
 @include utils.responsive('lg', 'down') {
+  :global {
+    .footer {
+      --ifm-footer-padding-horizontal: var(--content-padding);
+    }
+  }
+
   .firstRow {
-    width: 100vw;
-    margin-left: -16px !important;
   }
 
   .backToTop {
@@ -33,3 +37,19 @@
     left: 16px;
   }
 }
+
+@include utils.responsive('sm', 'down') {
+  :global {
+    .footer {
+      --ifm-footer-padding-horizontal: 0;
+    }
+  }
+
+  .firstRow {
+    padding-inline: var(--content-padding) !important;
+  }
+
+  .secondRow {
+    margin-inline: var(--content-padding) !important;
+  }
+}

packages/logos-docusaurus-theme/src/client/theme/style.module.css

@@ -1,12 +1,9 @@
 .root {
   width: 100%;
-  max-width: 1440px;
   margin: 0 auto;
   padding: 0;
+  max-width: var(--container-max-width);
 }
 
 @media (max-width: 997px) {
-  .root {
-    padding-inline: 16px;
-  }
 }