Update styling and requirements.txt file (#32)

* downgrade packages to align with server requirements

* update home page styling

* update terminal styling

* apply general styling improvements

* allow root-level pages to show up in the dropdown menus

* clean up header styling on smaller screens as home button shows in drawer

* clean up left nav

* add script to style navigation on root-level pages

* move some styling out of the index page css file

* run prettier on css files

* minor fix

* allow root subdirectory pages to show the entire navigation

material-overrides/assets/stylesheets/home.css

@@ -3,6 +3,16 @@
   --min-padding: 0 3em;
 }
 
+.home-container {
+  background-image: url('../images/gradient.png');
+  background-size: 100% 100%; /* Scales the image to cover the entire element */
+  background-position: center; /* Centers the image */
+  background-repeat: no-repeat; /* Ensures the image doesn't repeat */
+  margin-top: calc(
+    -1 * var(--adjust-header-height)
+  ); /* Use a negative value to push the gradient to cover behind the header */
+}
+
 .md-container {
   padding: 0;
 }
@@ -42,17 +52,6 @@
   padding-left: 12px;
 }
 
-/** Styling for the hero section **/
-.hero-gradient {
-  background: linear-gradient(107.4deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%),
-    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%),
-    linear-gradient(107.15deg, #07ffff 0%, #af04ff 100%);
-  background-size: cover; /* Ensures the gradient covers the entire screen */
-  margin-top: calc(
-    -1 * var(--adjust-header-height)
-  ); /* Use a negative value to push the gradient to cover behind the header */
-}
-
 .hero-section {
   display: flex;
   justify-content: space-between;
@@ -105,23 +104,6 @@
   min-height: 35em;
 }
 
-/** Styling for the feature section **/
-.feature-gradient {
-  background: linear-gradient(
-      107.15deg,
-      rgba(255, 255, 255, 0) 0%,
-      #ffffff 100%
-    ),
-    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%),
-    linear-gradient(107.15deg, #e4ff07 0%, #07ffff 100%);
-  transform: rotate(180deg);
-  background-size: cover; /* Ensures the gradient covers the entire screen */
-}
-
-.feature-section {
-  transform: rotate(180deg);
-}
-
 .feature-intro {
   margin: auto;
   max-width: 880px;
@@ -197,18 +179,6 @@
   margin-left: 0.3em;
 }
 
-/** Styling for the call to action (cta) section **/
-.cta-gradient {
-  background: linear-gradient(
-      252.85deg,
-      rgba(255, 255, 255, 0) 0%,
-      #ffffff 100%
-    ),
-    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%),
-    linear-gradient(252.85deg, #e4ff07 0%, #07ffff 100%);
-  background-size: cover; /* Ensures the gradient covers the entire screen */
-}
-
 .cta-section {
   padding: var(--min-padding);
   padding-top: 5em;
@@ -229,7 +199,7 @@
 
 .final-cta-content {
   width: 633px;
-  height: 360px;
+  min-height: 360px;
   border-radius: 16px;
   background: linear-gradient(
     270deg,
@@ -251,7 +221,7 @@
 
 .md-typeset .final-cta p {
   font-size: 18px;
-  line-height: 1;
+  line-height: 1.5;
   color: var(--white);
 }
 
@@ -375,4 +345,8 @@
   .final-cta-content {
     padding: 1.5em;
   }
+
+  .md-typeset .final-cta .md-button {
+    margin-top: unset;
+  }
 }

material-overrides/assets/stylesheets/index-page.css

@@ -1,20 +1,3 @@
-.md-main {
-  display: flex;
-  height: 100%;
-}
-
-.md-main__inner {
-  height: unset;
-  width: 100%;
-}
-
-.index-page,
-.main-page {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
 .main-page .subsection-wrapper {
   margin-top: -1em;
 }
@@ -49,4 +32,4 @@
 
 .subsection-wrapper .card:last-child {
   margin-bottom: 4em;
-}
+}