work on frontpage mobile view

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>

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;
   }

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;

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));
 }