updated the feature cloud, upgraded biome to 2.0.4

Author: Xanazf

biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.0.4/schema.json",
   "formatter": {
     "enabled": true,
     "formatWithErrors": true,
@@ -9,15 +9,12 @@
     "lineWidth": 66,
     "attributePosition": "multiline"
   },
-  "organizeImports": {
-    "enabled": true
-  },
+  "plugins": [],
   "linter": {
     "enabled": true,
     "rules": {
       "recommended": true,
       "style": {
-        "noVar": "error",
         "useConst": "error"
       },
       "suspicious": {
@@ -56,7 +53,7 @@
   },
   "overrides": [
     {
-      "include": [
+      "includes": [
         "**/*.ts",
         "**/*.tsx"
       ],
@@ -83,7 +80,7 @@
       }
     },
     {
-      "include": [
+      "includes": [
         "*.astro"
       ],
       "linter": {

src/components/featurelist/FeatureList.astro

@@ -89,21 +89,26 @@ FloatingWindow {
     </section>
     <section class="feature-showcase cloud">
       <section class="feature-cloud">
-      <span class="cloud-item wayland">
-        <div><img src="/assets/logos/wayland.svg"/></div>
-      </span>
-      <span class="cloud-item hyprland">
-        <div><img src="/assets/logos/hyprland.svg"/></div>
-      </span>
-      <span class="cloud-item pipewire">
-        <div><img src="/assets/logos/pipewire.svg"/></div>
-      </span>
-      <span class="cloud-item x-org">
-        <div><img src="/assets/logos/xorg.svg"/></div>
-      </span>
-      <span class="cloud-item sway">
-        <div><img src="/assets/logos/sway.svg"/></div>
-      </span>
+        <div class="cloud-center">
+          <img src="/favicon.svg" alt="Quickshell" />
+        </div>
+        <div class="cloud-items-wrapper">
+          <span class="cloud-item wayland">
+            <div><img class="feature-icon" src="/assets/logos/wayland.svg" alt="Wayland" /></div>
+          </span>
+          <span class="cloud-item hyprland">
+            <div><img class="feature-icon" src="/assets/logos/hyprland.svg" alt="Hyprland" /></div>
+          </span>
+          <span class="cloud-item pipewire">
+            <div><img class="feature-icon" src="/assets/logos/pipewire.svg" alt="Pipewire" /></div>
+          </span>
+          <span class="cloud-item x-org">
+            <div><img class="feature-icon" src="/assets/logos/xorg.svg" alt="X.Org" /></div>
+          </span>
+          <span class="cloud-item sway">
+            <div><img class="feature-icon" src="/assets/logos/sway.svg" alt="Sway" /></div>
+          </span>
+        </div>
       </section>
     </section>
   </li>

src/styles/components/featurelist.css

@@ -110,45 +110,69 @@ html:not(.dark) .feature-showcase .shiki span {
   height: 100%;
   min-height: 20rem;
   margin-bottom: 1rem;
-  animation: spin 40s linear infinite;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  & .cloud-center {
+    position: absolute;
+    z-index: 2;
+  }
+  & .cloud-center img {
+    width: 80px;
+    height: 80px;
+  }
+
+  & .cloud-items-wrapper {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    animation: spin 40s linear infinite;
+  }
 
   & .cloud-item {
     position: absolute;
+    left: 50%;
+    height: 50%;
+    transform-origin: center bottom;
+    transform: translateX(-50%);
+
+    & > div {
+      transform: rotate(0deg);
+      animation: counter-spin 40s linear infinite;
+      & .feature-icon {
+        width: 80px;
+        height: 80px;
+      }
+    }
+
     &.wayland {
-      transform: translate(-50%, 0);
+      transform: translate(-50%, 0) rotate(0deg);
     }
     &.hyprland {
       transform: translate(-50%, 0) rotate(72deg);
-      & > div {
+      & .feature-icon {
         transform: rotate(-72deg);
       }
     }
     &.pipewire {
       transform: translate(-50%, 0) rotate(144deg);
-      & > div {
+      & .feature-icon {
         transform: rotate(-144deg);
       }
     }
     &.x-org {
       transform: translate(-50%, 0) rotate(216deg);
-      & > div {
+      & .feature-icon {
         transform: rotate(-216deg);
       }
     }
     &.sway {
       transform: translate(-50%, 0) rotate(288deg);
-      & > div {
+      & .feature-icon {
         transform: rotate(-288deg);
       }
     }
-    & img,
-    svg {
-      animation: counter-spin 40s linear infinite;
-      width: 80px;
-      height: 80px;
-    }
-    left: 50%;
-    height: 100%;
   }
 }
 
@@ -194,7 +218,6 @@ html:not(.dark) .feature-showcase .shiki span {
   }
   .featurelist-item {
     width: 100%;
-    padding: unset;
     padding: 1.217rem;
     justify-content: space-between;
     flex-direction: row;