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