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

autoplay,autoscroll done, added spinning logos

Browse source
This commit is contained in:
Xanazf 2024-11-08 18:36:19 +02:00
parent 57f3c5f3f0
commit 624265be02
Signed by: Xanazf
GPG key ID: 4E4A5AD1FB748427
9 changed files with 241 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -59,6 +59,53 @@
border-radius: 0.681rem;
}
.feature-showcase.cloud {
position: relative;
max-width: 345.717px;
border-radius: 100vh;
animation: spin 40s linear infinite;
& .cloud-item {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
animation: counter-spin 40s linear infinite;
&.hyprland {
left: 60px;
top: 60px;
}
&.wayland {
right: 60px;
top: 60px;
}
& img {
width: 60px;
height: 60px;
}
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes counter-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
@media (min-width: 68rem) {
.featurelist {
max-width: 75rem;

91
src/styles/components/marquee.css Normal file
View file

@ -0,0 +1,91 @@
.marquee-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2.217rem;
font-size: 1.874rem;
font-weight: 600;
margin-inline: 0.618rem;
}
.marquee-button {
all: unset;
position: relative;
color: hsl(var(--accent-400));
&::before {
content: "";
position: absolute;
bottom: 3px;
left: 2px;
right: 2px;
height: 3px;
background-color: hsla(var(--accent-400) / 0.3);
z-index: -1;
}
}
.marquee {
position: relative;
width: 100%;
margin-block: 1.618rem;
}
.marquee-content {
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
}
.marquee-item {
flex: 1 0 100%;
transition: transform 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
transform: translateX(var(--scroll));
display: flex;
justify-content: center;
}
.marquee-item-spacing {
width: 75svw;
max-width: 75rem;
aspect-ratio: 16 / 9;
}
.marquee-item-content {
border-radius: 6px;
}
.marquee-scroll {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s, opacity 0.3s;
z-index: 10;
user-select: none;
align-items: stretch;
pointer-events: none;
}
.marquee-scroll-arrow {
flex-grow: 1;
max-width: 8rem;
font-size: 2rem;
pointer-events: all;
}
.marquee-scroll-arrow > div {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.5;
transition: opacity 0.3s ease;
&:hover {
opacity: 0.9;
cursor: pointer;
}
}

1
src/styles/global.css
View file

@ -12,6 +12,7 @@
@import "./docs/collapsible.css";
@import "./components/featurelist.css";
@import "./components/marquee.css";
.changing-theme * {
transition: none !important;

92
src/styles/main-page.css
View file

@ -48,98 +48,6 @@ h1.gradient-text {
}
}
.marquee-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2.217rem;
font-size: 1.874rem;
font-weight: 600;
margin-inline: 0.618rem;
}
.marquee-button {
all: unset;
position: relative;
color: hsl(var(--accent-400));
&::before {
content: "";
position: absolute;
bottom: 3px;
left: 2px;
right: 2px;
height: 3px;
background-color: hsla(var(--accent-400) / 0.3);
z-index: -1;
}
}
.marquee {
position: relative;
width: 100%;
margin-block: 1.618rem;
}
.marquee-content {
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
}
.marquee-item {
flex: 1 0 100%;
transition: transform 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
transform: translateX(var(--scroll));
display: flex;
justify-content: center;
}
.marquee-item-spacing {
width: 75svw;
max-width: 75rem;
aspect-ratio: 16 / 9;
}
.marquee-item-content {
border-radius: 6px;
}
.marquee-scroll {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s, opacity 0.3s;
z-index: 10;
user-select: none;
align-items: stretch;
pointer-events: none;
}
.marquee-scroll-arrow {
flex-grow: 1;
max-width: 8rem;
font-size: 2rem;
pointer-events: all;
}
.marquee-scroll-arrow > div {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.5;
transition: opacity 0.3s ease;
&:hover {
opacity: 0.9;
}
}
.main-page_links {
display: flex;
flex-direction: row;