Compare commits

...

4 commits

4 changed files with 263 additions and 141 deletions

View file

@ -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;
@ -173,6 +315,7 @@ textarea:invalid {
width: 100%;
padding: 0 0 0.5em 0;
border-radius: 0.25rem;
z-index: 10;
}
.motto::before {
@ -196,21 +339,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;
@ -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 */

View file

@ -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.
@ -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?

View file

@ -0,0 +1,3 @@
<abbr {{ with .Get 0 }}title="{{ . }}"{{ end }}>
{{ .Inner | markdownify }}
</abbr>

View file

@ -0,0 +1 @@
<dfn>{{ .Inner }}</dfn>