Add styled underline to main page

src/index.html

@@ -21,7 +21,9 @@
 	<div id="overlay"></div>
 <main class="offset-grid--top fullsize">
 	<div>
-		<h1 class="text-dark ff-serif fs-800 gap-large-bottom">Emilia.</h1>
+		<h1 class="text-dark ff-serif fs-800 gap-large-bottom">
+			Em<span class="waltuh-gradient-underline">ilia</span>.
+		</h1>
 		<p>mathematics enjoyer</p>
 		<p id="pgp_p">pgp:
 						<a href="https://keyserver.ubuntu.com/pks/lookup?search=0x8cbc050e7bbb8779eccd42074b33e52e3bd25455&fingerprint=on&op=index" id="pgp_a" class="fixed">

src/scss/waltuh/components/_marks.scss

@@ -37,3 +37,20 @@ span.waltuh-gradient {
   wipeIn 0.25s ease-in;
 
 }
+
+span.waltuh-gradient-underline {
+  position: relative;
+
+  &::after {
+    @extend span, .waltuh-gradient;
+    background-clip: unset;
+    border-radius: 2rem;
+
+    content: "";
+    position: absolute;
+    bottom: 0.2rem;
+    left: 10%;
+    height: 0.4rem;
+    width: 80%;
+  }
+}