fancy headings

_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">

_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">

_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>

_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">

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.
 ---
 
 

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;