quickshell/quickshell-web
3
1
Fork 0
Code Issues Projects Activity

improve spinning logos

Browse source
This commit is contained in:
outfoxxed 2024-11-08 15:58:06 -08:00
parent 2166b238e2
commit 9ecae84852
Signed by: outfoxxed
GPG key ID: 4C88A185FB89301E
14 changed files with 30 additions and 409 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/components/featurelist/FeatureList.astro
View file

@ -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);
</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"}/>
<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">
<Fragment set:html={PipewireLogoSmall}/>
<div><img src="/assets/logos/pipewire.svg"/></div>
</span>
<span class="cloud-item x-org">
<Fragment set:html={XOrgLogo}/>
<div><img src="/assets/logos/xorg.svg"/></div>
</span>
<span class="cloud-item sway">
<Fragment set:html={SwayLogo}/>
<div><img src="/assets/logos/sway.svg"/></div>
</span>
</section>
</section>

48
src/styles/components/featurelist.css
View file

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