Use SVG icon and text in banner

_includes/header.html

@@ -2,9 +2,13 @@
   <div class="fork-me">
     <a href="https://github.com/LiveSplit/LiveSplit" target="_blank"><img src="{{ site.imagesurl }}/forkme.png" alt="Fork Me on GitHub"></a>
   </div>
-  <div class="banner">
-    <a href="{{ site.baseurl }}/"><img src="{{ site.imagesurl }}/banner.png" alt="LiveSplit Banner"></a>
-  </div>
+  <a class="banner" href="{{ site.baseurl }}/">
+    <img class="banner-icon" src="{{ site.imagesurl }}/icon.svg" alt="LiveSplit">
+    <div class="banner-text">
+      <div class="banner-title">LiveSplit</div>
+      <div class="banner-subtitle">A sleek, highly customizable timer for speedrunners</div>
+    </div>
+  </a>
   <div class="container-fluid">
     <ul class="nav nav-pills">
       {% assign sorted_pages = (site.pages | sort: 'order') %}

_sass/_base.scss

@@ -1,3 +1,9 @@
+@font-face {
+    font-family: fira;
+    font-display: swap;
+    src: url(FiraSans-Regular.woff);
+  }
+
 html {
     background-image: url(../images/diagonal-stripes.png);
     background-repeat: repeat;
@@ -20,10 +26,40 @@ p {
     margin-top: 20px;
 }
 
-.banner>a>img {
-    display:block;
-    margin-left: auto;
-    margin-right: auto;
+.banner {
+    display: flex;
+    text-decoration: none;
+    color: #cccccc;
+    justify-content: center;
+    align-items: center;
+    padding: 20px 0 5px 0;
+
+    &:hover {
+        text-decoration: none;
+        color: #cccccc;
+    }
+
+    .banner-icon {
+        height: 150px;
+    }
+
+    .banner-text {
+        display: flex;
+        flex-direction: column;
+        padding-left: 20px;
+        font-family: "fira", Trebuchet, arial, sans-serif;
+
+        .banner-title {
+            font-size: 6em;
+            margin-top: -20px;
+        }
+
+        .banner-subtitle {
+            font-size: 2em;
+            margin-top: -20px;
+            margin-left: 8px;  // Align left edge with the title text
+        }
+    }
 }
 
 .img-align-center {