diff --git a/assets/styles/millironx.css b/assets/styles/millironx.css
index a4fcf70..fb47932 100644
--- a/assets/styles/millironx.css
+++ b/assets/styles/millironx.css
@@ -3,169 +3,21 @@
Color schemes
*/
color-scheme: light dark;
-
- --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);
+ --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;
/*
Fonts
@@ -182,12 +34,12 @@
*/
html {
- background-color: var(--body-background);
+ background-color: light-dark(var(--brown-swiss-gray), var(--eclipse-gray));
font-family: var(--font-family-slab-serif);
}
a {
- color: var(--link-color);
+ color: light-dark(var(--saddle-blue), var(--lavender-purple));
}
header {
@@ -206,12 +58,18 @@ nav {
}
nav a {
- color: var(--nav-button-text);
- background-color: var(--nav-button-background);
+ color: light-dark(var(--brown-swiss-gray), var(--manhattan-steel-blue));
+ background-color: light-dark(
+ var(--manhattan-steel-blue),
+ var(--brown-swiss-gray)
+ );
border-radius: 0.05rem;
border-style: outset;
border-width: 0.2rem;
- border-color: var(--nav-button-background);
+ border-color: light-dark(
+ var(--manhattan-steel-blue),
+ var(--brown-swiss-gray)
+ );
min-width: 7.5rem;
max-width: 7.5rem;
display: flex;
@@ -223,35 +81,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: var(--nav-button-background-hover);
+ background-color: light-dark(
+ var(--buffalo-blue),
+ color-mix(in srgb, var(--prickly-pear-yellow), var(--brown-swiss-gray) 75%)
+ );
}
figure {
- border-color: var(--container-border);
+ border-color: light-dark(var(--eclipse-gray), var(--brown-swiss-gray));
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,
- var(--container-border),
- var(--container-background)
+ light-dark(lightgray, dimgray),
+ color-mix(
+ in srgb,
+ light-dark(var(--brown-swiss-gray), var(--eclipse-gray)),
+ white 25%
+ )
);
border-left: 5px solid black;
- padding: 1px;
padding-left: 6px;
}
@@ -264,7 +122,7 @@ blockquote small {
}
footer {
- background-color: var(--container-background);
+ background-color: light-dark(lightgray, dimgray);
margin: 0 0 -1em -1em;
width: calc(100% - 1em);
padding: 0.25em 1.25em;
@@ -315,7 +173,6 @@ textarea:invalid {
width: 100%;
padding: 0 0 0.5em 0;
border-radius: 0.25rem;
- z-index: 10;
}
.motto::before {
@@ -339,12 +196,21 @@ textarea:invalid {
}
.motto .motto-inside h1 {
- background-color: var(--motto-background);
+ background-color: rgba(0.33, 0.33, 0.33, 0.33);
+ -webkit-text-stroke: 0.3px lightgray;
+ line-height: 1;
}
.card {
- background-color: var(--container-background);
- border-color: var(--container-border);
+ 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)
+ );
border-width: 1.5pt;
border-radius: 0.1rem;
border-style: outset;
@@ -377,8 +243,8 @@ textarea:invalid {
padding: 1em;
}
-.card-title a h3 {
- margin-right: 3.5em;
+.card-title {
+ margin-right: 3em;
}
.card-title > a {
@@ -443,6 +309,23 @@ 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
*/
@@ -525,8 +408,7 @@ textarea:invalid {
h3::before,
h4::before,
h5::before,
- h6::before,
- blockquote::before {
+ h6::before {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
@@ -535,78 +417,76 @@ textarea:invalid {
}
} /* end @media */
-@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;
- }
+@supports (animation-timeline: scroll()) and (animation-range: 0 50vh) {
+ @keyframes sticky-header {
+ from {
+ height: 50vh;
+ top: 6rem;
}
- @keyframes blurry-header {
- from {
- filter: blur(0);
- }
+ to {
+ height: 10vh;
+ top: -1rem;
+ }
+ }
- to {
- filter: blur(2px);
- }
+ @keyframes blurry-header {
+ from {
+ filter: blur(0);
}
- @keyframes transparent-text-bg {
- from {
- background-color: var(--motto-background);
- }
- to {
- background-color: rgba(0, 0, 0, 0);
- }
+ to {
+ filter: blur(2px);
}
+ }
- main,
- footer {
- position: relative;
- top: 55vh;
+ @keyframes transparent-text-bg {
+ from {
+ background-color: rgba(0.33, 0.33, 0.33, 0.33);
}
+ 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 {
- position: fixed;
- top: 12rem;
-
- animation: sticky-header linear forwards;
- animation-timeline: scroll();
- animation-range: 0 50vh;
+ width: calc(100% - 8rem);
}
.motto::before {
- filter: blur(12px);
-
- top: 2rem;
-
- animation: blurry-header linear forwards;
- animation-timeline: scroll();
- animation-range: 0 50vh;
+ top: 0;
}
-
- .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 */
+ }
+} /* end @supports */
diff --git a/content/_index.md b/content/_index.md
index aae5dd7..b7cd16c 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 milliron 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.
+X 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.
@@ -48,8 +48,10 @@ 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 "Born again, fundamentalist, dispensationalist, King James Bible-believing, independent Baptist" >}}Christian{{< /abbr >}},
-American, Convervative, Pro-gun, Heterosexual - any questions?_
+_Christian, American, Convervative, Pro-gun, Heterosexual - any questions?_
## Where am I?
diff --git a/layouts/shortcodes/abbr.html b/layouts/shortcodes/abbr.html
deleted file mode 100644
index 0ac98f8..0000000
--- a/layouts/shortcodes/abbr.html
+++ /dev/null
@@ -1,3 +0,0 @@
-
- {{ .Inner | markdownify }}
-
diff --git a/layouts/shortcodes/dfn.html b/layouts/shortcodes/dfn.html
deleted file mode 100644
index 8ed0ad6..0000000
--- a/layouts/shortcodes/dfn.html
+++ /dev/null
@@ -1 +0,0 @@
-{{ .Inner }}