From 325be308bd548d941b84d3336fce93d8990ff39b Mon Sep 17 00:00:00 2001
From: outfoxxed <outfoxxed@outfoxxed.me>
Date: Fri, 8 Nov 2024 20:54:35 -0800
Subject: [PATCH] work on frontpage mobile view

---
 src/components/featurelist/FeatureList.astro |  2 +-
 src/styles/components/featurelist.css        | 25 ++++++++++++++------
 src/styles/css-config/base.css               |  2 ++
 src/styles/global.css                        |  2 +-
 4 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/components/featurelist/FeatureList.astro b/src/components/featurelist/FeatureList.astro
index fa32136..916b538 100644
--- a/src/components/featurelist/FeatureList.astro
+++ b/src/components/featurelist/FeatureList.astro
@@ -31,7 +31,7 @@ const codeHTML = await processMarkdown(codeString);
       </span>
     </section>
     <section class="feature-showcase">
-      <video class="feature-video" style="height: 21rem" preload="metadata" controls={false} autoplay loop>
+      <video preload="metadata" controls={false} autoplay loop>
         <source src="/assets/simple-shell-livereload.mp4" type="video/mp4"/>
       </video>
     </section>
diff --git a/src/styles/components/featurelist.css b/src/styles/components/featurelist.css
index 2c79171..9ba675e 100644
--- a/src/styles/components/featurelist.css
+++ b/src/styles/components/featurelist.css
@@ -3,9 +3,8 @@
 }
 
 .featurelist {
-  max-width: 40rem;
   list-style: none;
-  margin: 1rem 1.618rem;
+  margin: 0.25rem 0.5rem;
   display: flex;
   flex-direction: column;
 }
@@ -68,8 +67,17 @@ html.dark .feature-text {
 }
 
 .feature-showcase {
-  height: 21rem;
+  max-height: 21rem;
   aspect-ratio: 16 / 9;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+
+  & video {
+    height: 100%;
+    aspect-ratio: 16 / 9;
+    border-radius: 0.681rem;
+  }
 }
 
 html:not(.dark) .feature-showcase .shiki,
@@ -77,10 +85,6 @@ html:not(.dark) .feature-showcase .shiki span {
   background-color: #ffffff;
 }
 
-.feature-video {
-  border-radius: 0.681rem;
-}
-
 .feature-cloud {
   position: relative;
   margin: auto;
@@ -137,9 +141,16 @@ html:not(.dark) .feature-showcase .shiki span {
   }
 }
 
+@media (min-width: 40rem) {
+  .feature-showcase {
+    height: 21rem;
+  }
+}
+
 @media (min-width: 68rem) {
   .featurelist {
     max-width: 75rem;
+    margin: 1rem 1.618rem;
     width: auto;
     align-items: center;
   }
diff --git a/src/styles/css-config/base.css b/src/styles/css-config/base.css
index 860ab8c..692ed7c 100644
--- a/src/styles/css-config/base.css
+++ b/src/styles/css-config/base.css
@@ -39,6 +39,7 @@ html {
   --bg-900: var(--white) 5 16;
 
   /* docs */
+  --background: var(--bg-500);
   --text: var(--white) 0 0;
   --text-dark: var(--white) 0 18;
   --text-darker: var(--white) 0 30;
@@ -94,6 +95,7 @@ html.dark {
   --bg-900: var(--blue) 82 3;
 
   /* docs */
+  --background: var(--bg-900);
   --text: var(--white) 0 100;
   --text-dark: var(--white) 0 70;
   --text-darker: var(--white) 0 40;
diff --git a/src/styles/global.css b/src/styles/global.css
index 468036a..27f737c 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -26,7 +26,7 @@
 
 .baselayout,
 .docslayout {
-  background-color: hsl(var(--bg-500));
+  background-color: hsl(var(--background));
   color: hsl(var(--secondary-900));
 }