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

updated the feature cloud, upgraded biome to 2.0.4

Browse source
This commit is contained in:
Xanazf 2025-07-02 02:40:16 +03:00
parent 1178bb75e5
commit 56f9927685
Signed by: Xanazf
GPG key ID: 4E4A5AD1FB748427
3 changed files with 62 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

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

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