add logo to homepage

Author: outfoxxed

src/pages/index.astro

@@ -8,7 +8,10 @@ const title = "Quickshell";
 ---
 <BaseLayout title={title} description="A fully user customizable desktop shell" image="/quickshell.png">
   <div class="main-page_hero" data-pagefind-ignore>
-    <h1 class="gradient-text">Quickshell</h1>
+    <div class="titlebox">
+      <img src="/favicon.svg" alt="Quickshell"/>
+      <h1 class="gradient-text">Quickshell</h1>
+    </div>
     <section class="main-page_hero-text">
       <h2>building blocks for your desktop</h2>
     </section>

src/styles/main-page.css

@@ -14,12 +14,6 @@
   justify-content: flex-start;
   align-items: center;
 
-  & h1 {
-    position: relative;
-    font-size: 4.618rem;
-    margin-top: 1rem;
-  }
-
   & .navy {
     color: hsl(var(--blue) 66% 60%);
   }
@@ -29,6 +23,22 @@
   }
 }
 
+.titlebox {
+  position: relative;
+  margin-top: 1rem;
+  display: flex;
+  align-items: center;
+
+  & img {
+    height: 3.4rem;
+  }
+
+  & h1 {
+    font-size: 3.618rem;
+    margin-left: 1rem;
+  }
+}
+
 h1.gradient-text {
   background: linear-gradient(
     30deg,
@@ -178,6 +188,17 @@ html.dark .main-page_link-card {
 }
 
 @media (min-width: 40rem) {
+  .titlebox {
+    & img {
+      height: 4.4rem;
+    }
+
+    & h1 {
+      font-size: 4.618rem;
+      margin-left: 1rem;
+    }
+  }
+
   .main-page_links_set {
     flex-wrap: nowrap;
   }