:root {
/* Site Colors */
--white: #FFF6EB;
--black: #07090F;
--brown: #B68F40;
--green: #3E5641;
--red: #9E2B25;
/* Seasonal accents: --brown shifted toward each season's cast
(summer keeps --brown itself — that's already the site's gold).
Only --color-link is retinted per season — background/text stay
on --white/--black/--green so contrast and dark mode are
unaffected. Set via [data-season] on , see theme.js. */
--brown-spring: #7D8F4C;
--brown-autumn: #A85D2E;
--brown-winter: #485696;
color-scheme: light;
--color-bg: var(--white);
--color-text: var(--green);
--color-link: var(--brown);
}
:root[data-theme="dark"] {
color-scheme: dark;
--color-bg: var(--black);
--color-text: var(--white);
--color-link: var(--brown);
}
/* Falls back to the OS preference when the visitor hasn't picked explicitly. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--color-bg: var(--black);
--color-text: var(--white);
--color-link: var(--brown);
}
}
/* Seasonal accent, layered on top of light/dark above (same specificity,
later in source, so it always wins for --color-link regardless of
theme). Boundaries are the 21st of Mar/Jun/Sep/Dec — see theme.js. */
:root[data-season="spring"] {
--color-link: var(--brown-spring);
}
:root[data-season="summer"] {
--color-link: var(--brown);
}
:root[data-season="autumn"] {
--color-link: var(--brown-autumn);
}
:root[data-season="winter"] {
--color-link: var(--brown-winter);
}
/* Theme toggle button: icons are inlined SVG (not ![]()
) so `fill` can
follow the current text color, and swapped by showing/hiding based on
the same data-theme / prefers-color-scheme logic as the tokens above. */
#theme-toggle {
width: 1em;
height: 1em;
overflow: visible;
background: none;
border: none;
padding: 0;
cursor: pointer;
color: inherit;
display: block;
position: fixed;
top: 10px;
right: 10px;
font-size: 2em;
}
.theme-icon-sun {
display: none;
}
:root[data-theme="dark"] .theme-icon-sun {
display: inline;
}
:root[data-theme="dark"] .theme-icon-moon {
display: none;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .theme-icon-sun {
display: inline;
}
:root:not([data-theme="light"]) .theme-icon-moon {
display: none;
}
}
@font-face {
font-family: "Libre Caslon Text";
src: url("/fonts/LibreCaslonText-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Libre Caslon Text";
src: url("/fonts/LibreCaslonText-Bold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "Libre Caslon Text";
src: url("/fonts/LibreCaslonText-Italic.ttf") format("truetype");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "Gentium Plus";
src: url("/fonts/GentiumPlus-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Gentium Plus";
src: url("/fonts/GentiumPlus-Bold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "Gentium Plus";
src: url("/fonts/GentiumPlus-Italic.ttf") format("truetype");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "Gentium Plus";
src: url("/fonts/GentiumPlus-BoldItalic.ttf") format("truetype");
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: "Lombardi";
src: url("/fonts/LOMBARDI.TTF") format("truetype");
font-weight: normal;
font-style: normal;
}
body {
margin: 0;
font-family: "Gentium Plus", serif;
font-size: 1.25em;
background-color: var(--color-bg);
color: var(--color-text);
}
a {
color: var(--color-link);
}
h1, h2, h3, h4, h5, h6 {
font-family: "Libre Caslon Text", serif;
}
.h-entry .p-name {
margin-bottom: -5px;
}
.h-entry .dt-published {
margin-left: 2px;
}
.h-entry .e-content > p:first-of-type::first-letter {
font-family: "Lombardi", serif;
float: left;
font-size: 3em;
line-height: 1;
padding-right: 0.1em;
}
.h-entry .e-content {
line-height: 1.75em;
sup {
line-height: 0;
}
}
code {
font-family: Gentium Plus, serif;
}
header {
fill: var(--color-text);
display: flex;
svg {
width: 100%;
margin-bottom: 1em;
}
}
.lonesomeholler-header {
justify-content: center;
}
.lonesomeholler-header a {
display: block;
width: 100%;
}
body {
position: relative;
}
body::before {
content: "";
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
pointer-events: none;
opacity: .1;
background-image:
repeating-linear-gradient(45deg, var(--color-text) 0, var(--color-text) 1px, transparent 1px, transparent 4px),
repeating-linear-gradient(-45deg, var(--color-text) 0, var(--color-text) 1px, transparent 1px, transparent 4px);
}
.site-footer {
padding: 2em 0 3em;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1.2em;
font-size: 0.85em;
}
.site-footer a {
color: var(--color-text);
text-decoration: none;
}
.site-footer a:hover {
color: var(--color-link);
}
.contact-icons {
display: flex;
justify-content: center;
align-items: center;
gap: 1em;
margin-top: 1em;
}
.contact-icons a {
display: inline-flex;
color: var(--color-text);
}
.contact-icons a:hover {
color: var(--color-link);
}
.container {
max-width: 728px;
margin: 0 auto;
padding: 0 16px;
box-sizing: border-box;
}
.library-category {
margin-top: 2em;
}
.library-books {
list-style: none;
padding: 0;
margin: 0.5em 0 0;
}
.library-book {
padding: 0.4em 0;
border-bottom: 1px solid var(--color-text);
}
.library-book-author {
font-style: italic;
}
.library-book-note {
margin: 0.2em 0 0;
font-size: 0.85em;
}
/* Images render as framed "plates" via layouts/_default/_markup/render-image.html
rather than bare inline ![]()
s — border + caption, sized and centered here. */
.post-image {
max-width: 50%;
margin: 1.5em auto;
}
.post-image img {
display: block;
width: 100%;
height: auto;
border: 1px solid var(--color-text);
padding: 4px;
}
.post-image figcaption {
margin-top: 0.5em;
font-size: 0.85em;
font-style: italic;
text-align: center;
color: var(--color-text);
}
.post-pagination {
display: flex;
justify-content: space-between;
margin: 2em 0;
}
.post-pagination-next {
margin-left: auto;
}
.post-pagination {
.post-pagination-prev {
float: left;
}
.post-pagination-next {
float: right;
text-align: right;
}
}
.footnotes {
font-size: .75em;
}
.latest-post {
position: relative;
display: block;
margin-bottom: 1.5em;
text-decoration: none;
border: 2px solid;
padding: 10px;
background-color: var(--color-bg);
color: var(--color-text);
}
.latest-post:hover {
color: var(--color-link);
}
.latest-post .latest-badge {
float: right;
color: var(--color-bg);
background-color: var(--color-link);
padding: .1em .5em .1em .5em;
border-radius: 5px;
}
.post-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5em;
.post-card {
text-decoration: none;
border: 2px solid;
padding: 10px;
color: var(--color-text);
background-color: var(--color-bg);
}
.post-card:hover {
color: var(--color-link);
}
}
@media (max-width: 600px) {
.post-grid {
grid-template-columns: 1fr;
}
/* +25% over the 1.25em base. Everything else in this stylesheet is
sized in em relative to body, so this scales headings, captions,
nav, footer, etc. proportionally along with it. */
body {
font-size: 1.5625em;
}
}
.post-card {
display: none;
position: relative;
}
.post-card.is-visible {
display: block;
}
.post-card .p-name {
font-size: 1em;
margin-top: .5em;
}
.post-card .p-summary {
font-size: 0.85em;
}
.post-card .a-read-more {
color: var(--color-link);
position: absolute;
right: 5px;
bottom: -20px;
}
#post-grid-more {
text-align: inherit;
font: inherit;
border-radius: 0;
display: block;
margin: 1em auto 0;
color: var(--color-bg);
background-color: var(--color-link);
padding: .2em .5em .1em .5em;
border-radius: 5px;
cursor: pointer;
border-width: 2px;
border-style: solid;
border-color: transparent;
&:hover, &:active, &:focus {
background-color: var(--color-bg);
color: var(--color-link);
border-color: var(--color-link);
}
}
.post-end-spacer {
display: block;
margin: .25em auto 0;
font-size: 2em;
width: fit-content;
}
/* Inline icon SVGs replacing what used to be emoji/dingbat characters —
several mobile platforms don't ship glyphs for the rarer ones (sideways
pointing-hand symbols, etc.), so they rendered as empty boxes there even
though they looked fine on desktop. SVG renders identically everywhere.
The small vertical-align nudge matches an SVG's default baseline to
surrounding text, same as the glyphs it replaced. */
.a-read-more svg,
.post-pagination-prev svg,
.post-pagination-next svg,
#post-grid-more svg,
.post-end-spacer svg,
.theme-icon svg {
vertical-align: -0.125em;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
:root[data-subscribed="true"] .email-signup {
display: none;
}
.email-signup {
position: relative;
margin-top: 1.5em;
padding: 10px;
border: 2px solid;
text-align: center;
background-color: var(--color-bg);
color: var(--color-text);
}
.email-signup-dismiss {
position: absolute;
top: 8px;
right: 8px;
width: 1.6em;
height: 1.6em;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
font-size: 0.9em;
line-height: 1;
color: var(--color-text);
background: transparent;
border: none;
cursor: pointer;
}
.email-signup-dismiss:hover {
color: var(--color-link);
}
.email-signup h2 {
margin-top: 0;
}
.signup-button {
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: .5em;
padding: .3em .8em;
font: inherit;
font-size: 0.85em;
text-decoration: none;
color: var(--color-bg);
background-color: var(--color-link);
border: 2px solid transparent;
border-radius: 5px;
cursor: pointer;
}
.signup-button:hover {
background-color: var(--color-bg);
color: var(--color-link);
border-color: var(--color-link);
}