Mobile optimizations (#2496)

* Mobile optimizations
Typing text hidden on mobile
Community sponsors optimized on mobile
Removal of news menu item
Minor tweaks

* Make header smaller on mobile
Long scrollbar on docs sidebar menu fixed
Different fix for cards padding

* Tweaks

Co-authored-by: alanlomeli <[email protected]>
Co-authored-by: nojaf <[email protected]>

Author: alanlomeli

docs/.style/homepage.sass

@@ -9,9 +9,12 @@ html, body
   border: 1px solid red
 
 header
-  height: 100vh
+  height: 500px
   position: relative
-  padding: 4rem 0
+  
+  @include media-breakpoint-up(md)
+    padding: 4rem 0
+    height: 100vh
 
   video
     filter: blur(0.025rem)
@@ -76,18 +79,21 @@ header
   //    border-top: 1px solid $white
 
   #core-title
+    display: none
     color: $white
     text-align: center
     font-size: 4rem
     position: absolute
     top: 50%
     left: 50%
     transform: translate(-50%, -50%)
+    @include media-breakpoint-up(md)
+      display: block
 
   #cta-buttons
     z-index: 1
     position: absolute
-    bottom: 9rem
+    bottom: 2rem
     left: 50%
     transform: translateX(-50%)
 
@@ -98,6 +104,21 @@ header
       margin: 0 1rem
       margin-bottom: 1rem
 
+.community-sponsors
+  flex-wrap: wrap
+  justify-content: space-around
+  align-items: center
+  li
+    padding: 0.3rem
+    flex: 45%
+  @include media-breakpoint-up(md)
+    justify-content: space-evenly
+    flex-direction: row
+  @include media-breakpoint-up(sm)
+    padding: 0.3rem
+    align-items: center
+    flex-direction: row
+
 .discord
   position: fixed
   background-color: $primary

docs/.style/sidebar.sass

@@ -6,10 +6,12 @@ $sidebar-width: 300px
 
 @mixin hide-column
     max-width: 0
+    max-height: 0
     overflow-x: hidden
 
 @mixin reset-column
     max-width: initial
+    max-height: initial
     overflow-x: initial
 
 body

docs/index.html

@@ -61,7 +61,7 @@
                     <li class="nav-item">
                         <a class="nav-link" href="./docs/index.html">Documentation</a>
                     </li>
-                    <li class="nav-item">
+                    <li class="nav-item d-none">
                         <a class="nav-link" href="./news">News</a>
                     </li>
                     <li class="nav-item">
@@ -249,7 +249,7 @@ <h3 class="my-4">Enterprise sponsors</h3>
                 </div>
             </div>
             <h3 class="my-4">Community sponsors</h3>
-            <ul class="mt-3 list-unstyled d-flex justify-content-evenly">
+            <ul class="community-sponsors mt-3 list-unstyled d-flex">
                 <li><a href="https://tinybluerobots.com"><img src="https://github.com/TinyBlueRobots.png?size=50" alt="Tiny Blue Robots" class="me-2 img-thumbnail">Tiny Blue Robots</a></li>
                 <li><a href="https://github.com/ThisFunctionalTom"><img src="https://github.com/ThisFunctionalTom.png?size=50" alt="Tomas Leko" class="me-2 img-thumbnail">Tomas Leko</a></li>
                 <li><a href="https://github.com/zyzhu"><img src="https://github.com/zyzhu.png?size=50" alt="Zhenyong Zhu" class="me-2 img-thumbnail">Zhenyong Zhu</a></li>
@@ -327,7 +327,7 @@ <h5 class="card-title text-primary"><i class="bi bi-newspaper me-1"></i>Fantomas
                         </div>
                     </div>
                 </div>
-                <div class="col-md-4">
+                <div class="col-md-4 mt-4 mt-md-0">
                     <div class="card bg-white">
                         <div class="card-body text-dark">
                             <h5 class="card-title text-primary"><i class="bi bi-newspaper me-1"></i>World domination,
@@ -365,7 +365,7 @@ <h5 class="card-title text-primary"><i class="bi bi-youtube me-1"></i>Daemon</h5
                         </div>
                     </div>
                 </div>
-                <div class="col-md-4">
+                <div class="col-md-4 mt-4 mt-md-0">
                     <div class="card bg-white">
                         <div class="card-body text-dark">
                             <h5 class="card-title text-primary"><i class="bi bi-newspaper me-1"></i>Formatting your code the easy way</h5>