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

added gradient to main frontpage title

Browse source
This commit is contained in:
Xanazf 2024-11-06 15:32:18 +02:00
parent aabd966878
commit 16ac71a311
Signed by: Xanazf
GPG key ID: 4E4A5AD1FB748427
3 changed files with 22 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/marquee/Marquee.astro
View file

@ -30,7 +30,7 @@ const ph = placeholders();
</div> </div>
</div> </div>
<div id="marquee-content" class="marquee-content" data-scroll="0"> <div id="marquee-content" class="marquee-content" data-scroll="0">
{ph.map(item => <div class="marquee-item"> {ph.map(_ => <div class="marquee-item">
<video class="marquee-item-spacing marquee-item-content" controls> <video class="marquee-item-spacing marquee-item-content" controls>
<source src="/assets/simple-shell-livereload.mp4" type="video/mp4"/> <source src="/assets/simple-shell-livereload.mp4" type="video/mp4"/>
</video> </video>

2
src/pages/index.astro
View file

@ -7,7 +7,7 @@ const subtitle = "A framework for building fully custom";
--- ---
<BaseLayout title={title} description="A fully user customizable desktop shell" image="/quickshell.png"> <BaseLayout title={title} description="A fully user customizable desktop shell" image="/quickshell.png">
<div class="main-page_hero" data-pagefind-ignore> <div class="main-page_hero" data-pagefind-ignore>
<h1>Quick<em>shell</em></h1> <h1 class="gradient-text">Quickshell</h1>
<section class="main-page_hero-text"> <section class="main-page_hero-text">
<h2>{subtitle}</h2> <h2>{subtitle}</h2>
</section> </section>

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

@ -12,10 +12,6 @@
font-size: 4.618rem; font-size: 4.618rem;
} }
& em {
font-style: normal;
}
& .navy { & .navy {
color: hsl(var(--blue) 66 60); color: hsl(var(--blue) 66 60);
} }
@ -25,6 +21,16 @@
} }
} }
h1.gradient-text {
background: linear-gradient(
30deg,
hsl(var(--green) 100 62),
hsl(var(--blue) 100 59)
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.main-page_hero-text { .main-page_hero-text {
color: hsl(var(--secondary-400)); color: hsl(var(--secondary-400));
text-align: center; text-align: center;
@ -35,8 +41,10 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: 2rem; font-size: 2rem;
font-weight: 400;
letter-spacing: 0.018rem; letter-spacing: 0.018rem;
margin-bottom: 0.117rem; margin-bottom: 0.117rem;
color: hsl(var(--blue) 100 83);
} }
} }
@ -79,7 +87,7 @@
.marquee-item { .marquee-item {
flex: 1 0 100%; flex: 1 0 100%;
transition: transform 0.3s cubic-bezier(.46,.03,.52,.96); transition: transform 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
transform: translateX(var(--scroll)); transform: translateX(var(--scroll));
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -91,6 +99,10 @@
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
} }
.marquee-item-content {
border-radius: 6px;
}
.marquee-scroll { .marquee-scroll {
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -120,7 +132,9 @@
opacity: 0.5; opacity: 0.5;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
&:hover { opacity: 0.9 } &:hover {
opacity: 0.9;
}
} }
/*.marquee-scroll-left { /*.marquee-scroll-left {