From dcd31e17a84f63e67553cec918c35b9afbdc8c68 Mon Sep 17 00:00:00 2001
From: Ava Gaiety W <ava@wroten.me>
Date: Wed, 28 May 2025 00:43:57 -0600
Subject: [PATCH] fancy headings

---
 _includes/blog-list.njk |  2 +-
 _includes/category.njk  |  2 +-
 _includes/content.njk   |  2 +-
 _includes/pinned.njk    |  2 +-
 index.md                |  2 +-
 styles.css              | 13 +++++++++++++
 6 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/_includes/blog-list.njk b/_includes/blog-list.njk
index 4ffb4d8..a70be99 100644
--- a/_includes/blog-list.njk
+++ b/_includes/blog-list.njk
@@ -3,7 +3,7 @@
 <main class="max-w-4xl mx-auto sm:px-6 lg:px-8">
   <div class="max-w-3x1 mx-auto mb-4 px-2 py-1 sm:rounded contrast-more:bg-base">
     <div>
-      <h1 class="text-6xl tracking-tight text-pink font-serif">
+      <h1 class="text-5xl tracking-tight text-pink fancy-heading">
         {{ page.fileSlug | capitalize }}
       </h1>
       <div class="mt-3 text-xl text-subtext1 sm:mt-4">
diff --git a/_includes/category.njk b/_includes/category.njk
index 146062b..f8a7160 100644
--- a/_includes/category.njk
+++ b/_includes/category.njk
@@ -3,7 +3,7 @@
 <main class="mt-12 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
   <div class="relative max-w-lg mx-auto divide-y-2 divide-yellow lg:max-w-7xl">
     <div>
-      <h1 class="text-6xl tracking-tight text-pink">
+      <h1 class="text-5xl tracking-tight fancy-heading">
         {{ page.fileSlug | capitalize }}
       </h1>
       <div class="mt-3 text-xl text-subtext1 sm:mt-4">
diff --git a/_includes/content.njk b/_includes/content.njk
index 7092222..055c5d3 100644
--- a/_includes/content.njk
+++ b/_includes/content.njk
@@ -3,7 +3,7 @@
 <main class="max-w-4xl mx-auto sm:px-6 lg:px-8">
   <div class="max-w-3x1 mx-auto mb-4 px-2 py-1 sm:rounded contrast-more:bg-base">
     <div class="flex flex-wrap items-baseline">
-      <h1 class="my-2 text-6xl tracking-tight text-pink contrast-more:contrast-150">
+      <h1 class="my-2 text-5xl tracking-tight fancy-heading">
         <span class="font-serif">{{ title }}</span>
         <small class="inline-block h-1 text-xl text-text font-light">
           in <a href="/{{tags[0]}}" class="link">{{ tags[0] | capitalize }}</a>
diff --git a/_includes/pinned.njk b/_includes/pinned.njk
index 600bf09..63f89ba 100644
--- a/_includes/pinned.njk
+++ b/_includes/pinned.njk
@@ -3,7 +3,7 @@
 <main class="max-w-7xl mx-auto px-2">
   <div class="relative max-w-lg mx-auto divide-y-2 divide-yellow lg:max-w-7xl">
     <div class="p-2 bg-base/75 shadow-lg shadow-yellow/50 rounded border-2 border-base border-l-yellow sm:rounded-tl-none sm:rounded-tr-none">
-      <h1 class="font-serif mt-2 mb-8 text-4xl tracking-tight">
+      <h1 class="font-serif mt-2 mb-8 text-4xl tracking-tight fancy-heading">
         {{ title | markdown | safe }}
       </h1>
       <div class="mt-3 max-w-2xl">
diff --git a/index.md b/index.md
index 7f125d5..946d012 100644
--- a/index.md
+++ b/index.md
@@ -5,7 +5,7 @@ tags: []
 description: Portfolio containing work experience, code, volunteering and more!
 eleventyExcludeFromCollections: true
 layout: pinned.njk
-title: Ava **Gaiety** W.
+title: Ava Gaiety W.
 ---
 
 
diff --git a/styles.css b/styles.css
index 1b50804..33bb0f5 100644
--- a/styles.css
+++ b/styles.css
@@ -99,6 +99,19 @@ pre {
   font-style: italic;
 }
 
+.fancy-heading {
+  background: linear-gradient(to bottom right,
+    rgb(var(--ctp-peach)),
+    rgb(var(--ctp-mauve))
+  );
+  background-clip: text;
+  color: transparent;
+
+  .text-text {
+    color: transparent !important;
+  }
+}
+
 .fancy-blockquote {
   max-width: 30rem;
   font-size: 1.4rem;