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

11
biome.json
View file

@ -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": { "formatter": {
"enabled": true, "enabled": true,
"formatWithErrors": true, "formatWithErrors": true,
@ -9,15 +9,12 @@
"lineWidth": 66, "lineWidth": 66,
"attributePosition": "multiline" "attributePosition": "multiline"
}, },
"organizeImports": { "plugins": [],
"enabled": true
},
"linter": { "linter": {
"enabled": true, "enabled": true,
"rules": { "rules": {
"recommended": true, "recommended": true,
"style": { "style": {
"noVar": "error",
"useConst": "error" "useConst": "error"
}, },
"suspicious": { "suspicious": {
@ -56,7 +53,7 @@
}, },
"overrides": [ "overrides": [
{ {
"include": [ "includes": [
"**/*.ts", "**/*.ts",
"**/*.tsx" "**/*.tsx"
], ],
@ -83,7 +80,7 @@
} }
}, },
{ {
"include": [ "includes": [
"*.astro" "*.astro"
], ],
"linter": { "linter": {

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

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

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

@ -110,45 +110,69 @@ html:not(.dark) .feature-showcase .shiki span {
height: 100%; height: 100%;
min-height: 20rem; min-height: 20rem;
margin-bottom: 1rem; 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 { & .cloud-item {
position: absolute; 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 { &.wayland {
transform: translate(-50%, 0); transform: translate(-50%, 0) rotate(0deg);
} }
&.hyprland { &.hyprland {
transform: translate(-50%, 0) rotate(72deg); transform: translate(-50%, 0) rotate(72deg);
& > div { & .feature-icon {
transform: rotate(-72deg); transform: rotate(-72deg);
} }
} }
&.pipewire { &.pipewire {
transform: translate(-50%, 0) rotate(144deg); transform: translate(-50%, 0) rotate(144deg);
& > div { & .feature-icon {
transform: rotate(-144deg); transform: rotate(-144deg);
} }
} }
&.x-org { &.x-org {
transform: translate(-50%, 0) rotate(216deg); transform: translate(-50%, 0) rotate(216deg);
& > div { & .feature-icon {
transform: rotate(-216deg); transform: rotate(-216deg);
} }
} }
&.sway { &.sway {
transform: translate(-50%, 0) rotate(288deg); transform: translate(-50%, 0) rotate(288deg);
& > div { & .feature-icon {
transform: rotate(-288deg); 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 { .featurelist-item {
width: 100%; width: 100%;
padding: unset;
padding: 1.217rem; padding: 1.217rem;
justify-content: space-between; justify-content: space-between;
flex-direction: row; flex-direction: row;