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

more spinning logos

Browse source
This commit is contained in:
Xanazf 2024-11-09 00:48:09 +02:00
parent 624265be02
commit 2f88aa46ad
Signed by: Xanazf
GPG key ID: 4E4A5AD1FB748427
6 changed files with 398 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
public/assets/pipewire-logo-small.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 7.7 KiB

91
public/assets/pipewire-logo.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

47
public/assets/sway-logo.svg Normal file
View file

@ -0,0 +1,47 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="1589.1 -0.1 410.9 383.1" enable-background="new 1589.1 -0.1 410.9 383.1" xml:space="preserve">
<polygon fill="#FF4040" points="1794.4,383 1589.1,304.6 1589.1,273.2 1794.4,291.5 1999.9,273.2 1999.9,304.6 "/>
<path fill="#AFA137" d="M1794.4,351.4l-205.3-78.2c0,0,13.6-5.3,16.2-6.2c12.2-4.5,25-8.3,36.8-13.4c24.5-10.9,51.4-17.8,78.2-18.2
c15.4-0.2,29.8,4.5,44.8,2.2c17.4-2.9,34.1-9.4,51.6-12.9c31.6-6,62.3,2.2,91.5,13.8c30,11.8,59.2,22.3,89.3,33.8
c0.9,0.4,1.6,0.5,2.5,0.9L1794.4,351.4z"/>
<g>
<g>
<path fill="#C6ADAC" d="M1656.3,277.2c-2.5-57,55.2-87.7,97.8-111.1c37.2-20.3,83.7-46.8,74.1-96.4c-2-10.3-17.8-6-15.8,4.4
c4.4,22.7-8.5,39.9-25.8,53c-20.3,15.4-43.7,26.3-65.9,38.8c-40.8,23.2-83.1,59.9-81,111.3
C1640.5,287.7,1656.8,287.7,1656.3,277.2L1656.3,277.2z"/>
</g>
</g>
<g>
<g>
<path fill="#C6ADAC" d="M1728,183.7c56.6,11.8,116.4-5.1,158.3-45c7.6-7.3-4-18.9-11.6-11.6c-37.4,35.8-91.7,51.4-142.3,40.8
C1722,165.9,1717.6,181.5,1728,183.7L1728,183.7z"/>
</g>
</g>
<g>
<path fill="#68751C" d="M1727.8,64.8c14.9,3.6,40.1-13.6,51.4-19.1c14.5-7.1,29.6-12.5,44.3-19.1c5.6-2.5,24-8.3,24.1-16.5
c0.4-10.2-19.1-10.7-25.4-10c-12.9,1.3-25.4,5.3-37.8,8.9c-12.7,3.8-25,8.9-36.8,15.2c-8.9,4.7-21.1,13.1-26.3,21.8
c-3.3,5.3-3.1,13.1,2,16.7C1724.5,63.7,1726.2,64.4,1727.8,64.8z"/>
<path fill="#68751C" d="M1819.1,37.2c2.5-1.5,5.1-2.7,7.6-4c21.1-10,45.4-18.2,69.3-20c20.9-1.6,43.9-5.4,64.6,0.2
c10.7,2.9,22.5,13.3,16.9,23.2c-4.2,7.4-21.2,17.4-28.7,22.9c-27.4,19.4-65.7,28-100.7,29.8c-25.4,1.3-67.3-13.3-44.1-40.7
C1808,44.1,1813.3,40.5,1819.1,37.2z"/>
<path fill="#68751C" d="M1958.9,60.1c5.8,0.2,12.5,1.6,15.2,6.9c2.2,4.4,0.5,9.6-2.5,13.3c-3.3,3.6-7.6,5.6-12.2,7.4
c-22.5,9.4-46.6,15.1-71,16.7c-6.7,0.4-13.8,0.5-20.3-1.6s-12.3-7.1-14.2-13.6c-4-15.1,29-20,37.9-21.6s17.8-2.7,26.7-3.1
C1932,63.5,1945.1,59.5,1958.9,60.1z"/>
<path fill="#68751C" d="M1955.6,158.8c-8.9-22-62.4,2.2-74.6,10c-4.5,2.9-9.3,7.3-8.3,12.5c0.9,5.6,7.6,8.2,13.4,8.9
C1900.2,192,1966.1,184.8,1955.6,158.8z"/>
<path fill="#68751C" d="M1787.5,87.7c-2.2,14.5-21.8,30.5-34.9,35c-12.7,4.5-33.9-4.9-26.1-20.3c6.9-13.4,41-37.4,55.9-27.6
C1786.6,77.5,1788.2,83,1787.5,87.7z"/>
<path fill="#68751C" d="M1825.1,159.9c20.9,2.5,42.3-0.2,61.9-7.6c4.4-1.6,8.9-3.8,10.7-8.2c1.3-3.3,0.4-7.3-2.2-9.6
c-2.5-2.4-6.5-3.1-9.6-1.6c-5.8-6.4-16-5.8-24.5-4.2c-13.4,2.7-26.7,7.6-38.8,14c-4.4,2.4-9.3,6.4-8,11.1
C1815.8,157.9,1820.9,159.4,1825.1,159.9z"/>
<path fill="#68751C" d="M1849.4,143c27.6,6.2,57.9-1.8,81.5-17.1c3.1-2,6.5-5.1,6-8.9c-0.7-4.5-6.5-6-11.3-5.8
c-26.9,0.4-54.1,7.1-77.5,20.7c-2.7,1.5-5.6,4-4.9,6.9C1844,141.4,1846.9,142.5,1849.4,143z"/>
<g>
<path fill="#68751C" d="M1711.1,106.4c2.5-3.1,4.7-6.9,3.6-10.5c-5.1-20.1-32.5,6-39,12c-8.3,7.6-8,14.3,5.6,14.3
C1692.6,122,1704.4,114.5,1711.1,106.4z"/>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.2 KiB

168
public/assets/x-org-logo.svg Normal file
View file

@ -0,0 +1,168 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="48"
height="48"
id="svg2"
version="1.1"
inkscape:version="0.48+devel r"
viewBox="0 0 13.546666 13.546668"
sodipodi:docname="xorg.svg">
<defs
id="defs4">
<linearGradient
id="linearGradient896">
<stop
style="stop-color:#1a1a1a;stop-opacity:1"
offset="0"
id="stop898" />
<stop
style="stop-color:#4d4d4d;stop-opacity:1"
offset="1"
id="stop900" />
</linearGradient>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="6.2934149"
inkscape:cx="1.2219474"
inkscape:cy="21.148889"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:showpageshadow="false"
borderlayer="true"
units="px"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
showguides="true"
inkscape:window-width="1366"
inkscape:window-height="718"
inkscape:window-x="-2"
inkscape:window-y="23"
inkscape:window-maximized="1">
<sodipodi:guide
position="-6.6748425e-06,47.999999"
orientation="47.999977,0"
id="guide4120" />
<sodipodi:guide
position="-6.6748425e-06,2.2810037e-05"
orientation="0,48.000004"
id="guide4122" />
<sodipodi:guide
position="47.999997,2.2810037e-05"
orientation="-47.999977,0"
id="guide4124" />
<sodipodi:guide
position="47.999997,47.999999"
orientation="0,-48.000004"
id="guide4126" />
<sodipodi:guide
position="3.9999733,44.000154"
orientation="39.999962,0"
id="guide4138" />
<sodipodi:guide
position="3.9999733,4.0001921"
orientation="0,40.000003"
id="guide4140" />
<sodipodi:guide
position="43.999976,4.0001921"
orientation="-39.999962,0"
id="guide4142" />
<sodipodi:guide
position="43.999976,44.000154"
orientation="0,-40.000003"
id="guide4144" />
<sodipodi:guide
position="6.9999922,47.999999"
orientation="39.999962,0"
id="guide4148" />
<sodipodi:guide
position="6.9999922,8.0000369"
orientation="0,34.000006"
id="guide4150" />
<sodipodi:guide
position="40.999998,8.0000369"
orientation="-39.999962,0"
id="guide4152" />
<sodipodi:guide
position="40.999998,47.999999"
orientation="0,-34.000006"
id="guide4154" />
<sodipodi:guide
position="14.999993,32.999986"
orientation="17.999951,0"
id="guide4158" />
<sodipodi:guide
position="14.999993,15.000036"
orientation="0,17.999998"
id="guide4160" />
<sodipodi:guide
position="32.999991,15.000036"
orientation="-17.999951,0"
id="guide4162" />
<sodipodi:guide
position="32.999991,32.999986"
orientation="0,-17.999998"
id="guide4164" />
<sodipodi:guide
position="1.9999969,44.000046"
orientation="39.999962,0"
id="guide3279" />
<sodipodi:guide
position="1.9999969,4.0000839"
orientation="0,44.000003"
id="guide3281" />
<sodipodi:guide
position="46,4.0000839"
orientation="-39.999962,0"
id="guide3283" />
<sodipodi:guide
position="46,44.000046"
orientation="0,-44.000003"
id="guide3285" />
</sodipodi:namedview>
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Capa 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(38.119153,-397.84494)">
<path
style="fill:#2c3e50;fill-opacity:1"
d="m -36.036651,410.25872 3.622994,-5.37269 -3.729941,-5.90738 2.397379,0.003 2.972102,4.64499 -4.443908,6.63281 -0.818626,0 z"
id="path4205"
inkscape:connector-curvature="0" />
<path
style="fill:#e67e22;fill-opacity:1"
d="m -28.945457,410.26272 -2.951586,-4.65299 4.48091,-6.6359 0.79838,0 -3.637785,5.398 3.707496,5.89089 -2.397416,0 z"
id="path17-8"
inkscape:connector-curvature="0" />
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.9 KiB

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

@ -1,5 +1,8 @@
---
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
@ -56,12 +59,23 @@ const codeHTML = await processMarkdown(codeString);
</span>
</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"}/>
</span>
<span class="cloud-item pipewire">
<Fragment set:html={PipewireLogoSmall}/>
</span>
<span class="cloud-item x-org">
<Fragment set:html={XOrgLogo}/>
</span>
<span class="cloud-item sway">
<Fragment set:html={SwayLogo}/>
</span>
</section>
</section>
</li>
</ul>

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

@ -53,26 +53,30 @@
.feature-showcase {
height: 21rem;
aspect-ratio: 16 / 9;
border: 1px solid yellow;
}
.feature-video {
border-radius: 0.681rem;
}
.feature-showcase.cloud {
.feature-cloud {
position: relative;
max-width: 345.717px;
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;
animation: counter-spin 40s linear infinite;
&.hyprland {
left: 60px;
top: 60px;
@ -81,10 +85,27 @@
right: 60px;
top: 60px;
}
&.pipewire {
left: 60px;
bottom: 60px;
}
&.x-org {
right: 60px;
bottom: 60px;
scale: 0.9;
}
&.sway {
left: 140px;
bottom: 30px;
scale: 0.7;
}
& img {
width: 60px;
height: 60px;
}
& svg {
scale: 1.5;
}
}
}