From fc35499d6c1b2d637a9d7e92870bcc88361f40cc Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Wed, 17 May 2023 08:18:52 -0700
Subject: [PATCH] Simulate background-clip: text for browsers that don't
 support it

Move the heading generating to a partial that iteratively wraps each character
of the heading in a <span>. The CSS for the site heading uses :nth-child to
color each span a different color.
---
 assets/styles/root.css          | 24 ++++++++++++++++++++++++
 config/_default/config.yaml     |  6 ++++--
 layouts/index.html              |  2 +-
 layouts/partials/header.html    |  2 +-
 layouts/partials/site_name.html |  1 +
 5 files changed, 31 insertions(+), 4 deletions(-)
 create mode 100644 layouts/partials/site_name.html

diff --git a/assets/styles/root.css b/assets/styles/root.css
index 179eade..114ac6d 100644
--- a/assets/styles/root.css
+++ b/assets/styles/root.css
@@ -309,9 +309,33 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1.site {
+    --site-title-color1: rgb(103, 128, 229);
+    --site-title-color2: rgb(130, 90, 227);
+    --site-title-color3: rgb(135, 101, 228);
+    --site-title-color4: rgb(125, 115, 229);
+    --site-title-color5: rgb(107, 130, 230);
+    --site-title-color6: rgb(77, 153, 232);
+    --site-title-color7: rgb(74, 136, 230);
+    --site-title-color8: rgb(71, 128, 228);
+    --site-title-color9: rgb(65, 80, 224);
+    --site-title-color10: rgb(61, 58, 223);
+
     color: rgb(var(--mid-blue));
     font-size: 2.5em;
 }
+
+@supports not (background-clip: text) {
+    h1.site span:nth-child(10n + 1) { color: var(--site-title-color1); }
+    h1.site span:nth-child(10n + 2) { color: var(--site-title-color2); }
+    h1.site span:nth-child(10n + 3) { color: var(--site-title-color3); }
+    h1.site span:nth-child(10n + 4) { color: var(--site-title-color4); }
+    h1.site span:nth-child(10n + 5) { color: var(--site-title-color5); }
+    h1.site span:nth-child(10n + 6) { color: var(--site-title-color6); }
+    h1.site span:nth-child(10n + 7) { color: var(--site-title-color7); }
+    h1.site span:nth-child(10n + 8) { color: var(--site-title-color8); }
+    h1.site span:nth-child(10n + 9) { color: var(--site-title-color9); }
+    h1.site span:nth-child(10n) { color: var(--site-title-color10); }
+}
 @supports (background-clip: text) {
     h1.site {
         background:
diff --git a/config/_default/config.yaml b/config/_default/config.yaml
index 4472e36..b8b62cd 100644
--- a/config/_default/config.yaml
+++ b/config/_default/config.yaml
@@ -1,5 +1,7 @@
 baseURL: https://erynwells.me/
 languageCode: en-US
-title: Erynwells.me
-copyright: Copyright © 2020—2022 Eryn Wells
+title: Eryn Rachel Wells
+copyright: Copyright © 2020—2023 Eryn Wells
 defaultContentLanguage: en
+params:
+  shortTitle: Eryn Wells
diff --git a/layouts/index.html b/layouts/index.html
index b081a68..a3cca08 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,7 +1,7 @@
 {{ define "body" }}
 <main>
   <div class="platter grid">
-    <h1 class="site">{{ .Title }}</h1>
+    <h1 class="site">{{ partial "site_name.html" .Title }}</h1>
     <div id="content">
       {{ .Content }}
     </div>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 729d42c..c4a3158 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -3,7 +3,7 @@
 <header class="site">
   <div class="platter grid">
     <h1 class="site">
-      <a class="site-name" href="{{ `` | absURL }}">Eryn Wells</a>
+      <a class="site-name" href="{{ `` | absURL }}">{{ partial "site_name.html" site.Params.shortTitle }}</a>
     </h1>
     <nav class="site bulleted">
     {{ with site.Menus.main }}
diff --git a/layouts/partials/site_name.html b/layouts/partials/site_name.html
new file mode 100644
index 0000000..a9e3c05
--- /dev/null
+++ b/layouts/partials/site_name.html
@@ -0,0 +1 @@
+{{ range (split . "") }}<span>{{ . }}</span>{{ end }}