From 7c54c9951f068a00fd7001c8b685e6eb818d3fae Mon Sep 17 00:00:00 2001
From: "Thomas A. Christensen II" <25492070+MillironX@users.noreply.github.com>
Date: Mon, 6 Jan 2025 21:11:56 -0600
Subject: [PATCH 1/4] style: Update color scheme

---
 assets/styles/millironx.css | 378 ++++++++++++++++++++++++------------
 1 file changed, 249 insertions(+), 129 deletions(-)

diff --git a/assets/styles/millironx.css b/assets/styles/millironx.css
index fb47932..a3fb307 100644
--- a/assets/styles/millironx.css
+++ b/assets/styles/millironx.css
@@ -3,21 +3,169 @@
     Color schemes
   */
   color-scheme: light dark;
-  --prickly-pear-yellow: #735f02;
-  --eclipse-gray: #3a3a3a;
-  --pumpkin-olive: #59521c;
-  --manhattan-steel-blue: #224553;
-  --pine-green: #36581d;
-  --brown-swiss-calf-brown: #543c21;
-  --ear-tag-red: #67160e;
-  --flaming-gorge-blue: #1b3e5a;
-  --hayyard-green: #355322;
-  --coeurdalene-purple: #1b245a;
-  --brown-swiss-cow-brown: #563c1f;
-  --buffalo-blue: #0b496a;
-  --saddle-blue: #104165;
-  --brown-swiss-gray: #eaddca;
-  --lavender-purple: #d9c1f6;
+
+  --ear-tag-red-1: oklch(97.5% 0.016 35.7);
+  --ear-tag-red-2: oklch(95.9% 0.027 37.7);
+  --ear-tag-red-3: oklch(91.8% 0.055 33.4);
+  --ear-tag-red-4: oklch(84% 0.092 29.8);
+  --ear-tag-red-5: oklch(80% 0.123 29.8);
+  --ear-tag-red-6: oklch(71% 0.146 29.8);
+  --ear-tag-red-7: oklch(66% 0.154 29.8);
+  --ear-tag-red-8: oklch(58% 0.162 29.8);
+  --ear-tag-red-9: oklch(53% 0.154 29.8);
+  --ear-tag-red-10: oklch(49% 0.146 29.8);
+  --ear-tag-red-11: oklch(42% 0.131 29.8);
+  --ear-tag-red-12: oklch(35% 0.115 29.8);
+  --ear-tag-red-13: oklch(27% 0.092 29.8);
+  --ear-tag-red-14: oklch(20% 0.07 29.8);
+  --ear-tag-red-15: oklch(16% 0.054 29.8);
+  --ear-tag-red-16: oklch(10% 0.039 29.8);
+  --ear-tag-red: var(--ear-tag-red-12);
+
+  --swiss-brown-1: oklch(98% 0.011 67.7);
+  --swiss-brown-2: oklch(97% 0.023 67.7);
+  --swiss-brown-3: oklch(93% 0.039 67.7);
+  --swiss-brown-4: oklch(84% 0.046 67.7);
+  --swiss-brown-5: oklch(80% 0.061 67.7);
+  --swiss-brown-6: oklch(71% 0.072 67.7);
+  --swiss-brown-7: oklch(66% 0.076 67.7);
+  --swiss-brown-8: oklch(58% 0.08 67.7);
+  --swiss-brown-9: oklch(53% 0.076 67.7);
+  --swiss-brown-10: oklch(49% 0.072 67.7);
+  --swiss-brown-11: oklch(42% 0.065 67.7);
+  --swiss-brown-12: oklch(35% 0.057 67.7);
+  --swiss-brown-13: oklch(27% 0.046 67.7);
+  --swiss-brown-14: oklch(20% 0.035 67.7);
+  --swiss-brown-15: oklch(16% 0.027 67.7);
+  --swiss-brown-16: oklch(10% 0.019 67.7);
+  --swiss-brown: var(--swiss-brown-12);
+
+  --prickly-pear-yellow-1: oklch(98% 0.017 94.5);
+  --prickly-pear-yellow-2: oklch(97% 0.035 94.5);
+  --prickly-pear-yellow-3: oklch(93% 0.059 94.5);
+  --prickly-pear-yellow-4: oklch(84% 0.07 94.5);
+  --prickly-pear-yellow-5: oklch(80% 0.093 94.5);
+  --prickly-pear-yellow-6: oklch(71% 0.11 94.5);
+  --prickly-pear-yellow-7: oklch(66% 0.116 94.5);
+  --prickly-pear-yellow-8: oklch(58% 0.122 94.5);
+  --prickly-pear-yellow-9: oklch(53% 0.116 94.5);
+  --prickly-pear-yellow-10: oklch(49% 0.11 94.5);
+  --prickly-pear-yellow-11: oklch(42% 0.099 94.5);
+  --prickly-pear-yellow-12: oklch(35% 0.083 93.6);
+  --prickly-pear-yellow-13: oklch(27.1% 0.064 92.8);
+  --prickly-pear-yellow-14: oklch(20% 0.047 92.4);
+  --prickly-pear-yellow-15: oklch(16% 0.038 93.3);
+  --prickly-pear-yellow-16: oklch(10% 0.024 89.7);
+  --prickly-pear-yellow: var(--prickly-pear-yellow-7);
+
+  --hayyard-green-1: oklch(98% 0.014 135);
+  --hayyard-green-2: oklch(97% 0.03 135);
+  --hayyard-green-3: oklch(93% 0.049 135);
+  --hayyard-green-4: oklch(84% 0.058 135);
+  --hayyard-green-5: oklch(80% 0.078 135);
+  --hayyard-green-6: oklch(71% 0.092 135);
+  --hayyard-green-7: oklch(66% 0.097 135);
+  --hayyard-green-8: oklch(58% 0.103 135);
+  --hayyard-green-9: oklch(53% 0.097 135);
+  --hayyard-green-10: oklch(49% 0.092 135);
+  --hayyard-green-11: oklch(42% 0.083 135);
+  --hayyard-green-12: oklch(35% 0.073 135);
+  --hayyard-green-13: oklch(27% 0.058 135);
+  --hayyard-green-14: oklch(20% 0.044 135);
+  --hayyard-green-15: oklch(16% 0.034 135);
+  --hayyard-green-16: oklch(10% 0.025 135);
+  --hayyard-green: var(--hayyard-green-11);
+
+  --flaming-gorge-blue-1: oklch(98% 0.012 241);
+  --flaming-gorge-blue-2: oklch(96.8% 0.021 230);
+  --flaming-gorge-blue-3: oklch(92.9% 0.041 242);
+  --flaming-gorge-blue-4: oklch(84% 0.051 245);
+  --flaming-gorge-blue-5: oklch(80% 0.069 245);
+  --flaming-gorge-blue-6: oklch(71% 0.081 245);
+  --flaming-gorge-blue-7: oklch(66% 0.086 245);
+  --flaming-gorge-blue-8: oklch(58% 0.09 245);
+  --flaming-gorge-blue-9: oklch(53% 0.086 245);
+  --flaming-gorge-blue-10: oklch(49% 0.081 245);
+  --flaming-gorge-blue-11: oklch(42% 0.073 245);
+  --flaming-gorge-blue-12: oklch(35% 0.064 245);
+  --flaming-gorge-blue-13: oklch(27% 0.051 245);
+  --flaming-gorge-blue-14: oklch(20% 0.039 245);
+  --flaming-gorge-blue-15: oklch(16% 0.03 245);
+  --flaming-gorge-blue-16: oklch(10% 0.022 245);
+  --flaming-gorge-blue: var(--flaming-gorge-blue-12);
+
+  --coeurdalene-purple-1: oklch(97.8% 0.016 311);
+  --coeurdalene-purple-2: oklch(96.5% 0.026 314);
+  --coeurdalene-purple-3: oklch(92.5% 0.052 308);
+  --coeurdalene-purple-4: oklch(84% 0.097 302);
+  --coeurdalene-purple-5: oklch(80% 0.129 302);
+  --coeurdalene-purple-6: oklch(71% 0.153 302);
+  --coeurdalene-purple-7: oklch(66% 0.162 302);
+  --coeurdalene-purple-8: oklch(58% 0.17 302);
+  --coeurdalene-purple-9: oklch(53% 0.162 302);
+  --coeurdalene-purple-10: oklch(49% 0.153 302);
+  --coeurdalene-purple-11: oklch(42% 0.138 302);
+  --coeurdalene-purple-12: oklch(35% 0.121 302);
+  --coeurdalene-purple-13: oklch(27% 0.097 302);
+  --coeurdalene-purple-14: oklch(20% 0.073 302);
+  --coeurdalene-purple-15: oklch(16% 0.056 302);
+  --coeurdalene-purple-16: oklch(10% 0.041 302);
+  --coeurdalene-purple: var(--coeurdalene-purple-13);
+
+  --eclipse-1: oklch(98% 0 0);
+  --eclipse-2: oklch(97% 0 0);
+  --eclipse-3: oklch(93% 0 0);
+  --eclipse-4: oklch(84% 0 0);
+  --eclipse-5: oklch(80% 0 0);
+  --eclipse-6: oklch(71% 0 0);
+  --eclipse-7: oklch(66% 0 0);
+  --eclipse-8: oklch(58% 0 0);
+  --eclipse-9: oklch(53% 0 0);
+  --eclipse-10: oklch(49% 0 0);
+  --eclipse-11: oklch(42% 0 0);
+  --eclipse-12: oklch(35% 0 0);
+  --eclipse-13: oklch(27% 0 0);
+  --eclipse-14: oklch(20% 0 0);
+  --eclipse-15: oklch(16% 0 0);
+  --eclipse-16: oklch(10% 0 0);
+  --eclipse: var(--eclipse-12);
+
+  --cowhide-1: oklch(98% 0.009 77.5);
+  --cowhide-2: oklch(97% 0.018 77.5);
+  --cowhide-3: oklch(93% 0.029 77.5);
+  --cowhide-4: oklch(84% 0.034 77.5);
+  --cowhide-5: oklch(80% 0.046 77.5);
+  --cowhide-6: oklch(71% 0.054 77.5);
+  --cowhide-7: oklch(66% 0.057 77.5);
+  --cowhide-8: oklch(58% 0.06 77.5);
+  --cowhide-9: oklch(53% 0.057 77.5);
+  --cowhide-10: oklch(49% 0.054 77.5);
+  --cowhide-11: oklch(42% 0.049 77.5);
+  --cowhide-12: oklch(35% 0.043 77.5);
+  --cowhide-13: oklch(27% 0.034 77.5);
+  --cowhide-14: oklch(20% 0.026 77.5);
+  --cowhide-15: oklch(16% 0.02 77.5);
+  --cowhide-16: oklch(10% 0.015 77.5);
+  --cowhide: var(--cowhide-3);
+
+  --body-background: light-dark(var(--cowhide-3), var(--eclipse-11));
+  --link-color: light-dark(
+    var(--flaming-gorge-blue),
+    var(--coeurdalene-purple-4)
+  );
+  --nav-button-text: light-dark(var(--eclipse-2), var(--cowhide-12));
+  --nav-button-background: light-dark(var(--eclipse-11), var(--cowhide-2));
+  --nav-button-background-hover: light-dark(
+    var(--eclipse-13),
+    var(--cowhide-4)
+  );
+  --nav-button-background-active: light-dark(
+    var(--eclipse-14),
+    var(--cowhide-5)
+  );
+  --container-border: light-dark(var(--swiss-brown-6), var(--eclipse-16));
+  --container-background: light-dark(var(--swiss-brown-4), var(--eclipse-12));
+  --motto-background: rgba(0, 0, 0, 0.66);
 
   /*
     Fonts
@@ -34,12 +182,12 @@
 */
 
 html {
-  background-color: light-dark(var(--brown-swiss-gray), var(--eclipse-gray));
+  background-color: var(--body-background);
   font-family: var(--font-family-slab-serif);
 }
 
 a {
-  color: light-dark(var(--saddle-blue), var(--lavender-purple));
+  color: var(--link-color);
 }
 
 header {
@@ -58,18 +206,12 @@ nav {
 }
 
 nav a {
-  color: light-dark(var(--brown-swiss-gray), var(--manhattan-steel-blue));
-  background-color: light-dark(
-    var(--manhattan-steel-blue),
-    var(--brown-swiss-gray)
-  );
+  color: var(--nav-button-text);
+  background-color: var(--nav-button-background);
   border-radius: 0.05rem;
   border-style: outset;
   border-width: 0.2rem;
-  border-color: light-dark(
-    var(--manhattan-steel-blue),
-    var(--brown-swiss-gray)
-  );
+  border-color: var(--nav-button-background);
   min-width: 7.5rem;
   max-width: 7.5rem;
   display: flex;
@@ -81,35 +223,35 @@ nav a {
   font-family: var(--font-family-system-ui);
 }
 
+nav a.active {
+  background-color: var(--nav-button-background-active);
+}
+
 nav a:active {
   border-style: inset;
 }
 
 nav a:hover {
-  background-color: light-dark(
-    var(--buffalo-blue),
-    color-mix(in srgb, var(--prickly-pear-yellow), var(--brown-swiss-gray) 75%)
-  );
+  background-color: var(--nav-button-background-hover);
 }
 
 figure {
-  border-color: light-dark(var(--eclipse-gray), var(--brown-swiss-gray));
+  border-color: var(--container-border);
   border-width: 1.5pt;
   border-style: inset;
+  border-radius: 2.5pt;
+  background-color: var(--container-background);
   padding: 1.25pt;
 }
 
 blockquote {
   background: linear-gradient(
     to right,
-    light-dark(lightgray, dimgray),
-    color-mix(
-      in srgb,
-      light-dark(var(--brown-swiss-gray), var(--eclipse-gray)),
-      white 25%
-    )
+    var(--container-border),
+    var(--container-background)
   );
   border-left: 5px solid black;
+  padding: 1px;
   padding-left: 6px;
 }
 
@@ -122,7 +264,7 @@ blockquote small {
 }
 
 footer {
-  background-color: light-dark(lightgray, dimgray);
+  background-color: var(--container-background);
   margin: 0 0 -1em -1em;
   width: calc(100% - 1em);
   padding: 0.25em 1.25em;
@@ -196,21 +338,12 @@ textarea:invalid {
 }
 
 .motto .motto-inside h1 {
-  background-color: rgba(0.33, 0.33, 0.33, 0.33);
-  -webkit-text-stroke: 0.3px lightgray;
-  line-height: 1;
+  background-color: var(--motto-background);
 }
 
 .card {
-  background-color: color-mix(
-    in srgb,
-    light-dark(var(--brown-swiss-gray), var(--eclipse-gray)),
-    white 10%
-  );
-  border-color: light-dark(
-    var(--manhattan-steel-blue),
-    var(--brown-swiss-gray)
-  );
+  background-color: var(--container-background);
+  border-color: var(--container-border);
   border-width: 1.5pt;
   border-radius: 0.1rem;
   border-style: outset;
@@ -220,6 +353,7 @@ textarea:invalid {
   position: relative;
   display: flex;
   flex-direction: column;
+  z-index: -1;
 }
 
 .card-link {
@@ -243,8 +377,8 @@ textarea:invalid {
   padding: 1em;
 }
 
-.card-title {
-  margin-right: 3em;
+.card-title a h3 {
+  margin-right: 3.5em;
 }
 
 .card-title > a {
@@ -309,23 +443,6 @@ textarea:invalid {
   max-width: 100%;
 }
 
-/*
-  Application-state helper classes
-*/
-@media (prefers-color-scheme: light) {
-  .active {
-    background-color: var(--coeurdalene-purple);
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .active {
-    color: color-mix(in srgb, var(--manhattan-steel-blue), white 75%);
-    background-color: color-mix(in srgb, var(--brown-swiss-gray), black 75%);
-    border-color: color-mix(in srgb, var(--brown-swiss-gray), black 50%);
-  }
-}
-
 /*
   Desktop screen size adjustments
 */
@@ -408,7 +525,8 @@ textarea:invalid {
   h3::before,
   h4::before,
   h5::before,
-  h6::before {
+  h6::before,
+  blockquote::before {
     content: " "; /* Older browser do not support empty content */
     visibility: hidden;
     display: block;
@@ -417,76 +535,78 @@ textarea:invalid {
   }
 } /* end @media */
 
-@supports (animation-timeline: scroll()) and (animation-range: 0 50vh) {
-  @keyframes sticky-header {
-    from {
-      height: 50vh;
-      top: 6rem;
+@media (prefers-reduced-motion: no-preference) {
+  @supports (animation-timeline: scroll()) and (animation-range: 0 50vh) {
+    @keyframes sticky-header {
+      from {
+        height: 50vh;
+        top: 6rem;
+      }
+
+      to {
+        height: 10vh;
+        top: -1rem;
+      }
     }
 
-    to {
-      height: 10vh;
-      top: -1rem;
-    }
-  }
+    @keyframes blurry-header {
+      from {
+        filter: blur(0);
+      }
 
-  @keyframes blurry-header {
-    from {
-      filter: blur(0);
+      to {
+        filter: blur(2px);
+      }
     }
 
-    to {
-      filter: blur(2px);
+    @keyframes transparent-text-bg {
+      from {
+        background-color: var(--motto-background);
+      }
+      to {
+        background-color: rgba(0, 0, 0, 0);
+      }
     }
-  }
 
-  @keyframes transparent-text-bg {
-    from {
-      background-color: rgba(0.33, 0.33, 0.33, 0.33);
+    main,
+    footer {
+      position: relative;
+      top: 55vh;
     }
-    to {
-      background-color: rgba(0.33, 0.33, 0.33, 0);
-    }
-  }
 
-  main,
-  footer {
-    position: relative;
-    top: 55vh;
-  }
-
-  .motto {
-    position: fixed;
-    top: 12rem;
-
-    animation: sticky-header linear forwards;
-    animation-timeline: scroll();
-    animation-range: 0.001vh 50vh;
-  }
-
-  .motto::before {
-    filter: blur(12px);
-
-    top: 2rem;
-
-    animation: blurry-header linear forwards;
-    animation-timeline: scroll();
-    animation-range: 0.001vh 50vh;
-  }
-
-  .motto-inside h1 {
-    animation: transparent-text-bg linear forwards;
-    animation-timeline: scroll();
-    animation-range: 0.001vh 40vh;
-  }
-
-  @media (min-width: 768px) {
     .motto {
-      width: calc(100% - 8rem);
+      position: fixed;
+      top: 12rem;
+
+      animation: sticky-header linear forwards;
+      animation-timeline: scroll();
+      animation-range: 0 50vh;
     }
 
     .motto::before {
-      top: 0;
+      filter: blur(12px);
+
+      top: 2rem;
+
+      animation: blurry-header linear forwards;
+      animation-timeline: scroll();
+      animation-range: 0 50vh;
     }
-  }
-} /* end @supports */
+
+    .motto-inside h1 {
+      animation: transparent-text-bg linear forwards;
+      animation-timeline: scroll();
+      animation-range: 0 40vh;
+    }
+
+    @media (min-width: 768px) {
+      .motto {
+        width: calc(100% - 8rem);
+      }
+
+      .motto::before {
+        top: 0;
+      }
+    }
+  } /* end @supports */
+} /* end @media */

From a2c6fd6d1f3024298908d9ef9ec49a99a5538262 Mon Sep 17 00:00:00 2001
From: "Thomas A. Christensen II" <25492070+MillironX@users.noreply.github.com>
Date: Tue, 7 Jan 2025 23:27:55 -0600
Subject: [PATCH 2/4] fix: scrolling header layering in chrome

---
 assets/styles/millironx.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/styles/millironx.css b/assets/styles/millironx.css
index a3fb307..a4fcf70 100644
--- a/assets/styles/millironx.css
+++ b/assets/styles/millironx.css
@@ -315,6 +315,7 @@ textarea:invalid {
   width: 100%;
   padding: 0 0 0.5em 0;
   border-radius: 0.25rem;
+  z-index: 10;
 }
 
 .motto::before {
@@ -353,7 +354,6 @@ textarea:invalid {
   position: relative;
   display: flex;
   flex-direction: column;
-  z-index: -1;
 }
 
 .card-link {

From 3cfb870f999c8c7ecd0a4beb4cfd2a3a7e975b40 Mon Sep 17 00:00:00 2001
From: "Thomas A. Christensen II" <25492070+MillironX@users.noreply.github.com>
Date: Tue, 7 Jan 2025 23:28:21 -0600
Subject: [PATCH 3/4] feat: Add dfn shortcode

---
 content/_index.md           | 16 ++++++++--------
 layouts/shortcodes/dfn.html |  1 +
 2 files changed, 9 insertions(+), 8 deletions(-)
 create mode 100644 layouts/shortcodes/dfn.html

diff --git a/content/_index.md b/content/_index.md
index b7cd16c..3c595ae 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -17,15 +17,15 @@ menu:
 It's a [cattle brand](https://en.wikipedia.org/wiki/Livestock_branding), of
 course! My cattle brand!
 
-The <dfn>milliron</dfn> is the bar with a bend in the middle. It does not
-represent anything physical or textual _per se_, and is therefore a rather
-unique element in cattle brands. Millirons are difficult to modify into another
-brand, and provide a guarantee of authentic ownership.
+The {{< dfn >}}milliron{{< /dfn >}} is the bar with a bend in the middle. It
+does not represent anything physical or textual _per se_, and is therefore a
+rather unique element in cattle brands. Millirons are difficult to modify into
+another brand, and provide a guarantee of authentic ownership.
 
-<dfn>X</dfn> is the letter of mystery and mystique. For nerds, it's the unknown
-in any algebra problem. Ranchers and cowboys will associate it with big names
-like the "Bar X" and the "Double X." In either case, it lends itself to a sense
-of withholding, prestige, and power.
+{{< dfn >}}X{{< /dfn >}} is the letter of mystery and mystique. For nerds, it's
+the unknown in any algebra problem. Ranchers and cowboys will associate it with
+big names like the "Bar X" and the "Double X." In either case, it lends itself
+to a sense of withholding, prestige, and power.
 
 Together, these two symbols represent the qualities I strive for in each of my
 works: authenticity, originality, power, depth, and prestige.
diff --git a/layouts/shortcodes/dfn.html b/layouts/shortcodes/dfn.html
new file mode 100644
index 0000000..8ed0ad6
--- /dev/null
+++ b/layouts/shortcodes/dfn.html
@@ -0,0 +1 @@
+<dfn>{{ .Inner }}</dfn>

From a51cb31c02ea852665f5f7a36d63efda6ca1d9f9 Mon Sep 17 00:00:00 2001
From: "Thomas A. Christensen II" <25492070+MillironX@users.noreply.github.com>
Date: Tue, 7 Jan 2025 23:28:37 -0600
Subject: [PATCH 4/4] feat: Add abbr shortcode

---
 content/_index.md            | 6 ++----
 layouts/shortcodes/abbr.html | 3 +++
 2 files changed, 5 insertions(+), 4 deletions(-)
 create mode 100644 layouts/shortcodes/abbr.html

diff --git a/content/_index.md b/content/_index.md
index 3c595ae..aae5dd7 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -48,10 +48,8 @@ by the pictures), and am sometimes called "one of those crazy, Wyoming dairy cow
 people." I love anything to do with cattle or technology, but especially
 anything to do with both of them.
 
-_<abbr
-      title="Born again, fundamentalist, dispensationalist, King James Bible-believing, independent Baptist"
-      >Christian</abbr
-    >, American, Convervative, Pro-gun, Heterosexual - any questions?_
+_{{< abbr "Born again, fundamentalist, dispensationalist, King James Bible-believing, independent Baptist" >}}Christian{{< /abbr >}},
+American, Convervative, Pro-gun, Heterosexual - any questions?_
 
 ## Where am I?
 
diff --git a/layouts/shortcodes/abbr.html b/layouts/shortcodes/abbr.html
new file mode 100644
index 0000000..0ac98f8
--- /dev/null
+++ b/layouts/shortcodes/abbr.html
@@ -0,0 +1,3 @@
+<abbr {{ with .Get 0 }}title="{{ . }}"{{ end }}>
+  {{ .Inner | markdownify }}
+</abbr>