diff --git a/public/assets/hyprland-logo.ico b/public/assets/hyprland-logo.ico
deleted file mode 100644
index 682344d..0000000
Binary files a/public/assets/hyprland-logo.ico and /dev/null differ
diff --git a/public/assets/logos/hyprland.svg b/public/assets/logos/hyprland.svg
new file mode 100644
index 0000000..a35ce55
--- /dev/null
+++ b/public/assets/logos/hyprland.svg
@@ -0,0 +1 @@
+
diff --git a/public/assets/logos/pipewire.svg b/public/assets/logos/pipewire.svg
new file mode 100644
index 0000000..8458107
--- /dev/null
+++ b/public/assets/logos/pipewire.svg
@@ -0,0 +1 @@
+
diff --git a/public/assets/logos/sway.svg b/public/assets/logos/sway.svg
new file mode 100644
index 0000000..0fc379c
--- /dev/null
+++ b/public/assets/logos/sway.svg
@@ -0,0 +1 @@
+
diff --git a/public/assets/logos/wayland.svg b/public/assets/logos/wayland.svg
new file mode 100644
index 0000000..4599030
--- /dev/null
+++ b/public/assets/logos/wayland.svg
@@ -0,0 +1 @@
+
diff --git a/public/assets/logos/xorg.svg b/public/assets/logos/xorg.svg
new file mode 100644
index 0000000..579c6fd
--- /dev/null
+++ b/public/assets/logos/xorg.svg
@@ -0,0 +1 @@
+
diff --git a/public/assets/pipewire-logo-small.svg b/public/assets/pipewire-logo-small.svg
deleted file mode 100644
index d81f547..0000000
--- a/public/assets/pipewire-logo-small.svg
+++ /dev/null
@@ -1,54 +0,0 @@
-
-
diff --git a/public/assets/pipewire-logo.svg b/public/assets/pipewire-logo.svg
deleted file mode 100644
index df95cfc..0000000
--- a/public/assets/pipewire-logo.svg
+++ /dev/null
@@ -1,91 +0,0 @@
-
-
diff --git a/public/assets/sway-logo.svg b/public/assets/sway-logo.svg
deleted file mode 100644
index 1aa9f2a..0000000
--- a/public/assets/sway-logo.svg
+++ /dev/null
@@ -1,47 +0,0 @@
-
-
-
-
diff --git a/public/assets/wayland-logo.png b/public/assets/wayland-logo.png
deleted file mode 100644
index ece5384..0000000
Binary files a/public/assets/wayland-logo.png and /dev/null differ
diff --git a/public/assets/wayland-logo.svg b/public/assets/wayland-logo.svg
deleted file mode 100644
index 1664d8f..0000000
--- a/public/assets/wayland-logo.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-
diff --git a/public/assets/x-org-logo.svg b/public/assets/x-org-logo.svg
deleted file mode 100644
index 25ff98f..0000000
--- a/public/assets/x-org-logo.svg
+++ /dev/null
@@ -1,168 +0,0 @@
-
-
-
-
diff --git a/src/components/featurelist/FeatureList.astro b/src/components/featurelist/FeatureList.astro
index 4a849a2..fa32136 100644
--- a/src/components/featurelist/FeatureList.astro
+++ b/src/components/featurelist/FeatureList.astro
@@ -1,8 +1,5 @@
---
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
@@ -60,20 +57,20 @@ const codeHTML = await processMarkdown(codeString);
-
-
-
-
+
+
+
+
-
+
-
+
-
+
diff --git a/src/styles/components/featurelist.css b/src/styles/components/featurelist.css
index b4c7a9c..2efb80a 100644
--- a/src/styles/components/featurelist.css
+++ b/src/styles/components/featurelist.css
@@ -53,7 +53,6 @@
.feature-showcase {
height: 21rem;
aspect-ratio: 16 / 9;
- border: 1px solid yellow;
}
.feature-video {
@@ -65,53 +64,42 @@
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;
- &.hyprland {
- left: 60px;
- top: 60px;
- }
&.wayland {
- right: 60px;
- top: 60px;
+ transform: translate(-50%, 0);
+ }
+ &.hyprland {
+ transform: translate(-50%, 0) rotate(72deg);
+ & > div { transform: rotate(-72deg) }
}
&.pipewire {
- left: 60px;
- bottom: 60px;
+ transform: translate(-50%, 0) rotate(144deg);
+ & > div { transform: rotate(-144deg) }
}
&.x-org {
- right: 60px;
- bottom: 60px;
- scale: 0.9;
+ transform: translate(-50%, 0) rotate(216deg);
+ & > div { transform: rotate(-216deg) }
}
&.sway {
- left: 140px;
- bottom: 30px;
- scale: 0.7;
+ transform: translate(-50%, 0) rotate(288deg);
+ & > div { transform: rotate(-288deg) }
}
- & img {
- width: 60px;
- height: 60px;
- }
- & svg {
- scale: 1.5;
+ & img, svg {
+ animation: counter-spin 40s linear infinite;
+ width: 80px;
+ height: 80px;
}
+ left: 50%;
+ height: 100%;
}
}
@keyframes spin {
from {
- transform: rotate(0deg);
+ transform:rotate(0deg);
}
to {
transform: rotate(360deg);