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

basic marquee roller done

Browse source
This commit is contained in:
Xanazf 2024-10-29 01:42:25 +02:00
parent f5edced908
commit a417b18c94
Signed by: Xanazf
GPG key ID: 4E4A5AD1FB748427
5 changed files with 213 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,34 +1,16 @@
.main-page_hero {
position: relative;
margin-block: 5rem;
margin-block: 1.618rem;
margin-inline: 0.612rem;
display: flex;
flex-grow: 1;
flex-direction: column;
justify-content: center;
justify-content: flex-start;
align-items: center;
& h1 {
position: relative;
font-size: 2.618rem;
&::before {
content: "Quick";
position: absolute;
color: hsl(var(--accent-400));
inset: 0;
filter: blur(1rem);
text-shadow: 0 0 3px white;
}
& em::before {
content: "shell";
position: absolute;
inset: 0;
color: hsl(var(--blue) 66 60);
filter: blur(1rem);
text-shadow: 0 0 3px white;
}
font-size: 4.618rem;
}
& em {
@ -55,29 +37,105 @@
flex-direction: column;
font-size: 2rem;
letter-spacing: 0.018rem;
margin-bottom: 1.117rem;
& em {
all: unset;
&:first-child {
color: hsl(var(--accent-400));
}
&:last-child {
color: hsl(var(--blue) 66 60);
}
}
margin-bottom: 0.117rem;
}
}
& h3 {
font-size: 1.5rem;
letter-spacing: 0.015rem;
color: hsla(var(--secondary-400) / 0.8);
margin-bottom: 1.5rem;
.marquee-buttons {
display: flex;
gap: 3rem;
font-size: 1.874rem;
font-weight: 600;
}
.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: 80%;
aspect-ratio: 19 / 10;
background-color: hsla(var(--blue) 66 60 / 0.4);
margin-block: 1.817rem;
border-radius: 8px;
}
.marquee-content {
width: 100%;
height: 100%;
overflow: hidden;
border-radius: inherit;
display: flex;
}
.marquee-item {
flex: 1 0 100%;
height: 100%;
border: 1px solid red;
border-radius: inherit;
transition: transform 0.3s linear;
transform: translateX(var(--scroll));
}
.marquee-scroll {
position: absolute;
width: 3rem;
height: 100%;
background-color: hsla(0 0 100 / 0.1);
border: 1px solid white;
border-radius: 8px;
opacity: 0.3;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s, opacity 0.3s;
z-index: 10;
user-select: none;
&:hover {
cursor: pointer;
opacity: 0.7;
background-color: hsla(0 0 100 / 0.2);
}
}
.marquee-scroll-left {
left: -3.117rem;
}
.marquee-scroll-right {
right: -3.117rem;
}
.call-buttons {
margin-bottom: 1.618rem;
display: flex;
gap: 3rem;
}
.call-button {
width: 15rem;
font-size: 1.874rem;
font-weight: 600;
border: 1px solid hsl(var(--accent-400));
border-radius: 4px;
text-align: center;
}
.main-page_links {
position: relative;
display: flex;
@ -118,12 +176,10 @@
&:nth-child(1),
&:nth-child(2) {
&::before {
background: linear-gradient(
115deg,
hsla(var(--green) 20 15 / 0.7) 25%,
hsla(var(--green) 25 25 / 0.8) 50%,
hsla(var(--green) 60 60 / 0.6) 80%
);
background: linear-gradient(115deg,
hsla(var(--green) 20 15 / 0.7) 25%,
hsla(var(--green) 25 25 / 0.8) 50%,
hsla(var(--green) 60 60 / 0.6) 80%);
}
&:hover {
@ -138,12 +194,10 @@
&:nth-child(3),
&:nth-child(4) {
&::before {
background: linear-gradient(
115deg,
hsla(var(--blue) 10 15 / 0.7) 25%,
hsla(var(--blue) 15 25 / 0.8) 50%,
hsla(var(--blue) 60 60 / 0.6) 80%
);
background: linear-gradient(115deg,
hsla(var(--blue) 10 15 / 0.7) 25%,
hsla(var(--blue) 15 25 / 0.8) 50%,
hsla(var(--blue) 60 60 / 0.6) 80%);
}
&:hover {
@ -165,10 +219,6 @@
}
@media (min-width: 65rem) {
.main-page_hero {
margin: 0;
}
.main-page_hero-text {
text-align: end;