doc-site: update styling

Author: superkhau

doc-site/src/components/HomepageFeatures.module.scss

@@ -1,12 +1,21 @@
 .features {
   align-items: center;
+  @media only screen and (max-width: 641px) {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
 
   .title {
     color: white;
     font-weight: 400;
     text-transform: inherit;
     max-width: 34rem;
   }
+  @media screen and (max-width: 768px) {
+    .title {
+      padding: 0 2rem;
+    }
+  }
 
   .row {
     justify-content: center;

doc-site/src/components/HomepageOfferings.module.scss

@@ -81,7 +81,6 @@
   border-radius: 12px;
   display: flex;
   padding: 2rem;
-  flex: 0 0 330px;
 
   ul{
     height: 100%;
@@ -130,6 +129,11 @@
         font-weight: 600;
         white-space: nowrap;
       }
+      @media only screen and (max-width: 400px) {
+        p {
+          font-size: 0.8rem;
+        }
+      }
     }
   }
 }
@@ -138,7 +142,7 @@
   box becomes stacked when screen is small
   and the dotted line is vertical instead of horizontal
 **/
-@media screen and (max-width: 919px) {
+@media screen and (max-width: 967px) {
   .offerings_container {
     padding: 5rem 2rem;
     min-height: 62rem;

doc-site/src/components/HomepageWhyZero.module.scss

@@ -2,6 +2,10 @@
   text-align: center;
   background: white;
   color: var(--ifm-landing-page-inverse-font-color);
+  @media only screen and (max-width: 641px) {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
 
   .title {
     margin-bottom: 5rem;

doc-site/src/css/custom.css

@@ -117,10 +117,16 @@ html{
   padding:0 var(--ifm-spacing-horizontal);
 }
 
+@media only screen and (max-width: 400px) {
+  .footer {
+    display: none;
+  }
+}
+
 /** LANDING PAGE SECTION **/
 .featured-sections {
   text-align: center;
-  padding: 6rem;
+  padding: 6rem 0;
 }
 
 .featured-sections h3, .featured-sections h2 {

doc-site/src/pages/index.js

@@ -45,6 +45,11 @@ export default function Home() {
     box-shadow: none;
     background: linear-gradient(90deg, rgba(15, 16, 17, 0.6) 0%, rgba(1, 2, 66, 0.6) 100%);
   }
+  @media only screen and (max-width: 641px) {
+    .navbar__items--right {
+      display: none;
+    }
+  }
   .navbar__inner {
     padding: 0 3rem;
   }

doc-site/src/pages/index.module.scss

@@ -40,11 +40,17 @@
   align-items: center;
   justify-content: center;
   margin: 4rem auto 4rem;
+  text-align: center;
   a {
     font-size: 2rem;
     font-weight: bold;
     color: #ffffff;
   }
+  @media only screen and (max-width: 600px) {
+    a {
+      padding: 0 2rem;
+    }
+  }
 }
 
 @media screen and (max-width: 966px) {

doc-site/src/theme/DocSidebar/styles.module.css

@@ -7,6 +7,7 @@
 
 :root {
   --collapse-button-bg-color-dark: #2e333a;
+  overflow-x: hidden;
 }
 
 @media (min-width: 997px) {