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

@@ -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:

config/_default/config.yaml

@@ -1,5 +1,7 @@
 baseURL: https://erynwells.me/
 languageCode: en-US
-title: Erynwells.me
+title: Eryn Rachel Wells
-copyright: Copyright © 2020—2022 Eryn Wells
+copyright: Copyright © 2020—2023 Eryn Wells
 defaultContentLanguage: en
+params:
+  shortTitle: Eryn Wells

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>

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

layouts/partials/site_name.html

@@ -0,0 +1 @@
+{{ range (split . "") }}<span>{{ . }}</span>{{ end }}