Fix landing page responsive issues on small devices

Author: ethanshar

docuilib/src/components/ComponentsSection.module.scss

@@ -6,13 +6,16 @@
   flex-direction: column;
   align-items: center;
   width: 100%;
-
+  padding-left: 40px;
+  padding-right: 40px;
+  
   .componentsInner {
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
+    padding: 0;
 
     p {
       @include desktop {

docuilib/src/components/FeatureSection.module.scss

@@ -7,6 +7,8 @@
   padding-bottom: 100px;
   width: 100%;
   text-align: center;
+  padding-left: 40px;
+  padding-right: 40px;
 
   .cards {
     display: flex;

docuilib/src/components/MainSection.module.scss

@@ -2,10 +2,10 @@
 
 .main {
   position: relative;
-  height: 75vh;
   width: 100%;
   display: flex;
   justify-content: center;
+  margin-bottom: 40px;
 
   @include desktop {
     height: 100vh;
@@ -22,16 +22,16 @@
   }
 
   .mainContent {
-    position: absolute;
     z-index: 1;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     top: 15vh;
     text-align: center;
-    padding: 0 40px;
+    padding: 40px;
 
     @include desktop() {
+      position: absolute;
       padding: 0;
       top: 15vw;
       left: 7vw;
@@ -40,9 +40,15 @@
     }
 
     > p {
-      font-size: 3em;
+      font-size: 2.5em;
       font-weight: 600;
       margin: 0;
+      line-height: 1.2;
+      
+      @include desktop {
+        font-size: 3em;
+        line-height: 1.5;
+      }
 
       > .libName {
         color: $primary;
@@ -55,8 +61,10 @@
       border: 1px solid;
       border-radius: 2px;
       align-self: center;
-
+      margin-top: 20px;
+      
       @include desktop {
+        margin-top: 0;
         align-self: flex-start;
       }
 

docuilib/src/components/MainSection.tsx

@@ -8,7 +8,6 @@ import GoldStarSvg from '@site/static/img/goldStar.svg';
 
 export default () => {
   const {siteConfig} = useDocusaurusContext();
-  console.warn('ethan - siteConfig', siteConfig.customFields.stars)
 
   return (
     <div className={styles.main}>