set min-height for main and adjust margin against footer

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

@@ -228,6 +228,10 @@
   --ifm-hero-background-color: #f8f8fa;
   --ifm-hero-text-color: var(--ifm-color-black);
 
+  --desktop-footer-gap: 200px;
+  --mobile-footer-gap: 144px;
+  --doc-grid-gap: 16px;
+
   @include utils.responsive('xl', 'down') {
     --container-max-width: 912px;
   }
@@ -261,6 +265,10 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+main {
+  min-height: calc(100vh - var(--ifm-navbar-height) - var(--content-padding));
+}
+
 svg * {
   fill: rgb(var(--lsd-text-primary));
 }
@@ -692,8 +700,10 @@ a[class^='sidebarLogo_'] {
 
 @include utils.responsive('lg', 'up') {
   .main-wrapper {
-    main > .container {
-      padding-bottom: 200px !important;
+    .container {
+      padding-bottom: calc(
+        var(--desktop-footer-gap) - var(--ifm-footer-padding-vertical)
+      ) !important;
     }
 
     & > div {
@@ -761,6 +771,17 @@ a[class^='sidebarLogo_'] {
   }
 }
 
+@include utils.responsive('xl', 'down') {
+  .main-wrapper {
+    main > .container {
+      padding-bottom: calc(
+        var(--desktop-footer-gap) - var(--ifm-footer-padding-vertical) -
+          var(--doc-grid-gap)
+      ) !important;
+    }
+  }
+}
+
 .container {
   padding-inline: var(--content-padding);
 }
@@ -919,8 +940,13 @@ a[class^='sidebarLogo_'] {
 }
 
 @include utils.responsive('lg', 'down') {
-  main > .container {
-    padding-bottom: 84px !important;
+  .main-wrapper {
+    main > .container {
+      padding-bottom: calc(
+        var(--mobile-footer-gap) - var(--ifm-footer-padding-vertical) -
+          var(--doc-grid-gap)
+      ) !important;
+    }
   }
 
   .grid {

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

@@ -29,7 +29,7 @@
   .docItemGrid {
     display: grid;
     grid-template-columns: repeat(11, 1fr);
-    gap: 16px;
+    gap: var(--doc-grid-gap);
   }
 
   .docItemCol {
@@ -41,7 +41,7 @@
   .docItemGrid {
     display: grid;
     grid-template-columns: repeat(19, 1fr);
-    gap: 16px;
+    gap: var(--doc-grid-gap);
   }
 
   .docItemCol {