From 6638165b754aa7bf00d7a1ec723fe8fbe5eacd27 Mon Sep 17 00:00:00 2001
From: Jade Ellis <jade@ellis.link>
Date: Wed, 24 Jul 2024 23:50:31 +0100
Subject: [PATCH] Fully fix subtitle alignment at small breakpoint

---
 packages/website/Untitled.jsx        | 44 ++++++++++++++++++++++++++++
 packages/website/src/lib/Hero.svelte |  1 +
 2 files changed, 45 insertions(+)
 create mode 100644 packages/website/Untitled.jsx

diff --git a/packages/website/Untitled.jsx b/packages/website/Untitled.jsx
new file mode 100644
index 00000000..1299635c
--- /dev/null
+++ b/packages/website/Untitled.jsx
@@ -0,0 +1,44 @@
+<div
+  style={{
+    display: 'flex',
+    height: '100%',
+    width: '100%',
+    padding: '10px 20px',
+    // alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    backgroundImage: 'linear-gradient(to bottom, #dbf4ff, #eff3fc)',
+    fontSize: 60,
+    // letterSpacing: -2,
+    fontWeight: 700,
+    // textAlign: 'center',
+  }}
+  >
+  <div style={{
+      fontSize: 15,
+      fontWeight: 600,
+      textTransform: 'uppercase',
+      letterSpacing: 1,
+      margin: '25px 0 10px',
+      color: 'gray',
+    }}>jade.ellis.link
+    </div>
+    <div 
+    style={{
+      backgroundImage: 'linear-gradient(90deg, rgb(30, 42, 85), rgb(22, 61, 120))',
+      backgroundClip: 'text',
+      '-webkit-background-clip': 'text',
+      color: 'transparent',
+    }}>The Potential Pitfalls of Pagination</div>
+    <aside style={{
+      fontSize: 20,
+      fontWeight: 500,
+      color:'#202020',
+      margin: '10px 0 10px',
+    }}>
+        Published on 
+        · By Jade Ellis
+        ·  4 min read
+    </aside>
+</div>
+
diff --git a/packages/website/src/lib/Hero.svelte b/packages/website/src/lib/Hero.svelte
index e48f1226..dc3683e8 100644
--- a/packages/website/src/lib/Hero.svelte
+++ b/packages/website/src/lib/Hero.svelte
@@ -48,6 +48,7 @@
         padding-block-start: 0;
         font-size: 18px;
         font-weight: 600;
+        text-align: center;
     }
 
     .description {