more spinning logos

src/components/featurelist/FeatureList.astro

@@ -1,5 +1,8 @@
 ---
 import { processMarkdown } from "@config/io/markdown";
+import PipewireLogoSmall from "@public/assets/pipewire-logo-small.svg?raw";
+import XOrgLogo from "@public/assets/x-org-logo.svg?raw";
+import SwayLogo from "@public/assets/sway-logo.svg?raw";
 
 let codeString = `\`\`\`qml
 // a standard desktop window
@@ -56,12 +59,23 @@ const codeHTML = await processMarkdown(codeString);
       </span>
     </section>
     <section class="feature-showcase cloud">
+      <section class="feature-cloud">
       <span class="cloud-item hyprland">
         <img src={"/assets/hyprland-logo.ico"}/>
       </span>
       <span class="cloud-item wayland">
         <img src={"/assets/wayland-logo.png"}/>
       </span>
+      <span class="cloud-item pipewire">
+        <Fragment set:html={PipewireLogoSmall}/>
+      </span>
+      <span class="cloud-item x-org">
+        <Fragment set:html={XOrgLogo}/>
+      </span>
+      <span class="cloud-item sway">
+        <Fragment set:html={SwayLogo}/>
+      </span>
+      </section>
     </section>
   </li>
 </ul>

src/styles/components/featurelist.css

@@ -53,26 +53,30 @@
 .feature-showcase {
   height: 21rem;
   aspect-ratio: 16 / 9;
+  border: 1px solid yellow;
 }
 
 .feature-video {
   border-radius: 0.681rem;
 }
 
-.feature-showcase.cloud {
+.feature-cloud {
   position: relative;
-  max-width: 345.717px;
+  margin: auto;
+  max-width: 21.5rem;
+  height: 100%;
   border-radius: 100vh;
   animation: spin 40s linear infinite;
+  border: 1px solid red;
 
   & .cloud-item {
     position: absolute;
     display: flex;
     align-items: center;
     justify-content: center;
+    animation: counter-spin 40s linear infinite;
     width: 60px;
     height: 60px;
-    animation: counter-spin 40s linear infinite;
     &.hyprland {
       left: 60px;
       top: 60px;
@@ -81,10 +85,27 @@
       right: 60px;
       top: 60px;
     }
+    &.pipewire {
+      left: 60px;
+      bottom: 60px;
+    }
+    &.x-org {
+      right: 60px;
+      bottom: 60px;
+      scale: 0.9;
+    }
+    &.sway {
+      left: 140px;
+      bottom: 30px;
+      scale: 0.7;
+    }
     & img {
       width: 60px;
       height: 60px;
     }
+    & svg {
+      scale: 1.5;
+    }
   }
 }