fix frontpage feature card scaling

Author: outfoxxed

src/components/featurelist/FeatureList.astro

@@ -1,12 +1,14 @@
 ---
 import { processMarkdown } from "@config/io/markdown";
 
-let codeString = `\`\`\`qml
+const codeDesktop = await processMarkdown(`\`\`\`qml
 // a standard desktop window
 FloatingWindow {
   Timer {
-    id: timer // give the timer a name to refer to it by
-    property bool invert: false // our custom property
+    // assign an id to the object, which can be
+    // used to reference it
+    id: timer
+    property bool invert: false // a custom property
 
     // change the value of invert every half second
     running: true; repeat: true
@@ -17,10 +19,35 @@ FloatingWindow {
   // change the window's color when timer.invert changes
   color: timer.invert ? "purple" : "green"
 }
-\`\`\`
-`;
+\`\`\``);
 
-const codeHTML = await processMarkdown(codeString);
+const codeMobile = await processMarkdown(`\`\`\`qml
+// a standard desktop window
+FloatingWindow {
+  Timer {
+    // assign an id to the
+    // object, which can be
+    // used to reference it
+    id: timer
+    // a custom property
+    property bool invert: false
+
+    // change the value of invert
+    // every half second
+    running: true; repeat: true
+    interval: 500 // ms
+    onTriggered: {
+      timer.invert = !timer.invert
+    }
+  }
+
+  // change the window's color
+  // when timer.invert changes
+  color: timer.invert
+    ? "purple"
+    : "green"
+}
+\`\`\``);
 ---
 <ul class="featurelist">
   <li class="featurelist-item hot-reloading left">
@@ -45,7 +72,12 @@ const codeHTML = await processMarkdown(codeString);
       </span>
     </section>
     <section class="feature-showcase" id="qml-showcase">
-      <Fragment set:html={codeHTML}/>
+      <div class="showcase-desktop">
+        <Fragment set:html={codeDesktop}/>
+      </div>
+      <div class="showcase-mobile">
+        <Fragment set:html={codeMobile}/>
+      </div>
     </section>
   </li>
   <li class="featurelist-item cloud-li left">

src/styles/components/featurelist.css

@@ -18,8 +18,7 @@
   margin-block: 0.618rem;
   border-radius: 9px;
   background-color: hsl(var(--blue) 60 98);
-  padding-inline: 0.618rem;
-  padding-block: 1.217rem;
+  padding: 0.618rem;
   border: 1px solid hsl(var(--blue) 9 75);
   &::before {
     content: "";
@@ -47,6 +46,7 @@ html.dark .featurelist-item {
 }
 
 .feature-text {
+  margin: 1rem 0;
   text-align: center;
   font-size: 1.2rem;
   & .feature-title {
@@ -64,21 +64,37 @@ html.dark .feature-text {
 }
 
 .feature-showcase {
-  max-width: 75svw;
+  width: 100%;
   max-height: min-content;
-  height: 15rem;
   display: flex;
   justify-content: center;
 
   & video {
-    scale: 0.85;
+    width: 100%;
     aspect-ratio: 16 / 9;
     border-radius: 0.681rem;
   }
 
   & .shiki {
     margin-block: unset;
-    font-size: 0.55rem;
+    width: 100%;
+    height: 100%;
+    /*font-size: 0.55rem;*/
+  }
+
+  & .showcase-desktop {
+    width: 100%;
+    height: 100%;
+    display: none;
+  }
+
+  & .showcase-mobile {
+    width: 100%;
+    height: 100%;
+  }
+
+  &.cloud {
+    overflow: clip;
   }
 }
 
@@ -92,11 +108,12 @@ html:not(.dark) .feature-showcase .shiki span {
   margin: auto;
   max-width: 21.5rem;
   height: 100%;
+  min-height: 20rem;
+  margin-bottom: 1rem;
   animation: spin 40s linear infinite;
 
   & .cloud-item {
     position: absolute;
-    scale: 0.8;
     &.wayland {
       transform: translate(-50%, 0);
     }
@@ -127,8 +144,8 @@ html:not(.dark) .feature-showcase .shiki span {
     & img,
     svg {
       animation: counter-spin 40s linear infinite;
-      width: 60px;
-      height: 60px;
+      width: 80px;
+      height: 80px;
     }
     left: 50%;
     height: 100%;
@@ -153,13 +170,19 @@ html:not(.dark) .feature-showcase .shiki span {
   }
 }
 
-@media (min-width: 40rem) {
+@media (min-width: 34rem) {
   .feature-showcase {
-    height: 21rem;
+    & .showcase-desktop {
+      display: unset;
+    }
+
+    & .showcase-mobile {
+      display: none;
+    }
   }
 }
 
-@media (min-width: 68rem) {
+@media (min-width: 63rem) {
   .featurelist {
     max-width: 75rem;
     margin: 1rem 1.618rem;
@@ -179,6 +202,9 @@ html:not(.dark) .feature-showcase .shiki span {
   .featurelist-item.right {
     flex-direction: row-reverse;
   }
+  .feature-showcase {
+    height: 22rem;
+  }
   .feature-text {
     text-align: left;
   }
@@ -189,15 +215,10 @@ html:not(.dark) .feature-showcase .shiki span {
       scale: 1;
     }
     & .shiki {
-      font-size: 1rem;
+      font-size: 0.93rem;
     }
-    & .cloud-item {
-      scale: 1;
-      & img,
-      svg {
-        width: 80px;
-        height: 80px;
-      }
+    .feature-cloud {
+      margin-bottom: 0;
     }
   }
 }

src/styles/components/marquee.css

@@ -47,7 +47,7 @@
 }
 
 .marquee-item-spacing {
-  width: 75svw;
+  width: calc(100svw - 12rem);
   max-width: 75rem;
   aspect-ratio: 16 / 9;
   display: flex;

src/styles/main-page.css

@@ -180,7 +180,7 @@ html.dark .main-page_link-card {
   }
 }
 
-@media (min-width: 68rem) {
+@media (min-width: 63rem) {
   .main-page_links {
     flex-wrap: nowrap;
     max-width: 78rem;