added gradient to main frontpage title

src/components/marquee/Marquee.astro

@@ -30,7 +30,7 @@ const ph = placeholders();
     </div>
   </div>
   <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>
         <source src="/assets/simple-shell-livereload.mp4" type="video/mp4"/>
       </video>

src/pages/index.astro

@@ -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">
   <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">
       <h2>{subtitle}</h2>
     </section>

src/styles/main-page.css

@@ -12,10 +12,6 @@
     font-size: 4.618rem;
   }
 
-  & em {
-    font-style: normal;
-  }
-
   & .navy {
     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 {
   color: hsl(var(--secondary-400));
   text-align: center;
@@ -35,8 +41,10 @@
     display: flex;
     flex-direction: column;
     font-size: 2rem;
+    font-weight: 400;
     letter-spacing: 0.018rem;
     margin-bottom: 0.117rem;
+    color: hsl(var(--blue) 100 83);
   }
 }
 
@@ -79,7 +87,7 @@
 
 .marquee-item {
   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));
   display: flex;
   justify-content: center;
@@ -91,6 +99,10 @@
   aspect-ratio: 16 / 9;
 }
 
+.marquee-item-content {
+  border-radius: 6px;
+}
+
 .marquee-scroll {
   position: absolute;
   width: 100%;
@@ -120,7 +132,9 @@
   opacity: 0.5;
   transition: opacity 0.3s ease;
 
-  &:hover { opacity: 0.9 }
+  &:hover {
+    opacity: 0.9;
+  }
 }
 
 /*.marquee-scroll-left {