From 3e2341f9e42f2feccff1c7b0ad3b89347789babb Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Thu, 2 Feb 2023 12:43:13 -0500
Subject: [PATCH] Some mobile optimization

---
 src/layouts/index.html      | 31 +++++++++-----
 src/static/css/homepage.css | 85 +++----------------------------------
 src/static/css/navbar.css   |  3 +-
 3 files changed, 28 insertions(+), 91 deletions(-)

diff --git a/src/layouts/index.html b/src/layouts/index.html
index 89ce258..e23b0d4 100644
--- a/src/layouts/index.html
+++ b/src/layouts/index.html
@@ -11,6 +11,15 @@
     background-size: cover !important;
   }
 
+  @media only screen and (max-width: 576px) {
+
+    .hero{
+      background-image: none !important;
+
+    }
+
+  }
+
   .stats-top{
     background-image: url("/Images/gen-art/orange-pattern.jpg") !important;
     background-attachment: fixed;
@@ -55,13 +64,17 @@
         <h1 class="display-1" style="z-index:3; position: relative;"><span class="inner-glow">Invisible</span> yet <span class="callout white">powerful</span></h1>
           <p class="lead">Upgrade to Tea - the revolutionary, cross-platform package manager. Say goodbye to slow & clunky, and say hello to fast & smooth updates. From the creator of Brew.</p>
           <p class="mb-5">Introducing tea, the cross-platform package manager of the future. Say goodbye to slow package managers. With tea, simply type commands and it takes care of the rest. Get the latest version easily and support specific tool versions for different projects. Encoding dependencies in the README makes it readable by humans and tea, providing easier access for users. Experience better package management with tea.</p>
-          <div class="flex-start mb-3">
-            <a href="https://github.com/teaxyz/cli" class="me-3">
-              <button class="hbtn hb-fill-right"><i class="icon-tea-logo-iconasset-1"></i>INSTALL TEA (<span class="release" style="text-transform: lowercase;"></span>)</button>
-            </a>
-            <a href="https://github.com/teaxyz/cli">
-              <button class="hbtn-light hb-light-fill-right"><i class="icon-github" style="position:relative;top:2px;"></i>GITHUB (&#9734;<span class="stargazers" style="text-transform: lowercase;"></span>)</button>
-            </a>
+          <div class="row mb-3">
+            <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 mb-3">
+              <a href="https://github.com/teaxyz/cli">
+                <button class="hbtn hb-fill-right" style="width:100% !important;"><i class="icon-tea-logo-iconasset-1"></i>INSTALL TEA (<span class="release" style="text-transform:lowercase;"></span>)</button>
+              </a>
+            </div>
+            <div class="col">
+              <a href="https://github.com/teaxyz/cli">
+                <button class="hbtn-light hb-light-fill-right" style="width:100%;"><i class="icon-github" style="position:relative;top:2px;"></i>GITHUB (&#9734;<span class="stargazers" style="text-transform: lowercase;"></span>)</button>
+              </a>
+            </div>
           </div>
           <p class="small dark-gray mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       </div>
@@ -762,9 +775,7 @@
   </div>
 </section>
 
-<div class="full-width-cta-container">
- {{- partial "full-width-cta-split.html" . -}}
-</div>
+<hr>
 
 <style>
 
diff --git a/src/static/css/homepage.css b/src/static/css/homepage.css
index ba069a3..db5a4cd 100644
--- a/src/static/css/homepage.css
+++ b/src/static/css/homepage.css
@@ -1,96 +1,21 @@
 /* General/Utilities */
-@media only screen and (min-width: 1792px) {
 
   html,body{
     background-color: #1a1a1a;
-    max-width: 1920px;
+    max-width: none;
     overflow-x: hidden;
+    margin-top:30px;
   }
 
   .container{
     max-width: none;
-    padding: 4.5vw 8.371vw 4.185vw 8.371vw;
+    padding: 8.371vw 4.5vw;
   }
 
-
-}
-
-@media only screen and (min-width: 1200px) and (max-width: 1792px) {
-
-  html,body{
-    background-color: #1a1a1a;
-    max-width: 1920px;
-    overflow-x: hidden;
+  .hero{
+    height: 100vh;
   }
 
-  .container{
-    max-width: 1920px;
-    padding: 4.5vw 8.371vw 4.185vw 8.371vw;
-  }
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
-
-  html,body{
-    background-color: #1a1a1a;
-    max-width: 1920px;
-    overflow-x: hidden;
-  }
-
-  .container{
-    max-width: 1920px;
-    padding: 4.2vw 10vw 4.185vw 10vw !important;
-  }
-
-}
-
-@media only screen and (min-width: 768px) and (max-width: 992px) {
-
-  html,body{
-    background-color: #1a1a1a;
-    max-width: 1920px;
-    overflow-x: hidden;
-  }
-
-  .container{
-    max-width: 1920px;
-    padding: 4.185vw 5.040vw 4.185vw 5.040vw !important;
-  }
-}
-
-@media only screen and (min-width: 576px) and (max-width: 768px) {
-
-  html,body{
-    background-color: #1a1a1a;
-    max-width: 1920px;
-    overflow-x: hidden;
-  }
-
-  .container{
-    max-width: 1920px;
-    padding: 4.185vw 6.510vw 4.185vw 6.510vw;
-  }
-}
-
-@media only screen and (max-width: 576px) {
-
-  html,body{
-    background-color: #1a1a1a;
-    max-width: 1920px;
-    overflow-x: hidden;
-  }
-
-  section{
-    padding-left: 4vw !important;
-    padding-right: 4vw !important;
-  }
-
-  .container{
-    max-width: 1920px;
-    padding: 5.5vw 3vw !important;
-  }
-}
-
 /* Brand Colors */
 
 .teal{color:#00ffd0;}
diff --git a/src/static/css/navbar.css b/src/static/css/navbar.css
index bde7285..4125e16 100644
--- a/src/static/css/navbar.css
+++ b/src/static/css/navbar.css
@@ -4,9 +4,10 @@
   position: fixed;
   width:100%;
   padding: 0px !important;
-  height: 60px;
+  height: 62px;
   background-color: #1a1a1a !important;
   text-transform: uppercase;
+  border-bottom: 2px solid gray;
 }
 
 .top-logo{