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

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;