Replace the grey theme with a green-slate light/dark pair
All checks were successful
Build and deploy static pages / build-and-push (push) Successful in 13s
All checks were successful
Build and deploy static pages / build-and-push (push) Successful in 13s
PaperMod ships grey on grey, which read as flat and dim on pages that are mostly tables. Both schemes are now redefinitions of PaperMod's own variables, so the theme picks them up without further overrides, plus --accent, --warm and --wash for the placements below. Every text pair clears WCAG AA. Venue tables drop the full 1px grid for horizontal rules, a tinted header and an accent row hover; domain and tag code spans become chips. Warm marks the one cell worth finding first in a headered table — the ICORE rank, the SCImago quartile, the still-open cycle — and detail-page fact tables are excluded, since bold there is a row label, not emphasis. The FullCalendar variable mapping was dark-only, leaving light mode on the library's stock chrome; it now maps once through theme variables and covers both. Event colours were saturated with white text on top, so they become five pale chips carrying explicit dark ink, legible on either theme. Ranks were also emitting '**A***', which closes the emphasis on the second star and leaves the third loose — visible once ranks had their own colour. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -3,6 +3,175 @@
|
||||
themes/PaperMod submodule — those never get committed, and CI checks the
|
||||
submodule out fresh, so they would be missing from the deployed site. */
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
Palette
|
||||
|
||||
PaperMod ships a neutral grey on grey. This replaces both schemes with a
|
||||
quieter green-slate pair: paper under morning light, and a desk lamp at
|
||||
night. Every colour below is a redefinition of a PaperMod variable, plus
|
||||
four of our own (--accent, --accent-soft, --accent-line, --warm, --wash),
|
||||
so the rest of the theme picks the palette up without further overrides.
|
||||
--------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--theme: #f2f5f3;
|
||||
--entry: #ffffff;
|
||||
--primary: #1e2b28;
|
||||
--secondary: #5b6d68;
|
||||
--tertiary: #d8e0db;
|
||||
--content: #2b3a36;
|
||||
--border: #e3eae5;
|
||||
--code-bg: #e8efea;
|
||||
--code-block-bg: #1b2523;
|
||||
|
||||
--accent: #14705f;
|
||||
--accent-soft: rgba(20, 112, 95, 0.09);
|
||||
--accent-line: rgba(20, 112, 95, 0.32);
|
||||
--warm: #9a5f22;
|
||||
--wash: rgba(20, 112, 95, 0.07);
|
||||
--shadow: 0 1px 2px rgba(30, 43, 40, 0.04), 0 8px 24px rgba(30, 43, 40, 0.05);
|
||||
--shadow-hover: 0 2px 4px rgba(30, 43, 40, 0.06), 0 14px 32px rgba(30, 43, 40, 0.09);
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
--theme: #131917;
|
||||
--entry: #1b2321;
|
||||
--primary: #e0e8e4;
|
||||
--secondary: #94a5a0;
|
||||
--tertiary: #2c3a36;
|
||||
--content: #c6d3ce;
|
||||
--border: #26312e;
|
||||
--code-bg: #202a27;
|
||||
--code-block-bg: #0f1513;
|
||||
|
||||
--accent: #6ec7ae;
|
||||
--accent-soft: rgba(110, 199, 174, 0.11);
|
||||
--accent-line: rgba(110, 199, 174, 0.30);
|
||||
--warm: #e0b478;
|
||||
--wash: rgba(110, 199, 174, 0.06);
|
||||
--shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.20);
|
||||
--shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.30), 0 14px 32px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
|
||||
/* A single soft light source behind the header, fixed so it stays put while
|
||||
long venue tables scroll. Low enough alpha to read as tint, not gradient. */
|
||||
body {
|
||||
background-image: radial-gradient(1100px 420px at 50% -140px, var(--wash), transparent 72%);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
/* PaperMod tints list pages with --code-bg, which now belongs to code chips.
|
||||
Keep every page on the same ground. */
|
||||
.list,
|
||||
[data-theme="dark"] .list {
|
||||
background-color: var(--theme);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
Accent placement
|
||||
--------------------------------------------------------------------------- */
|
||||
|
||||
.md-content a:not(.anchor) {
|
||||
color: var(--accent);
|
||||
text-decoration-color: var(--accent-line);
|
||||
}
|
||||
|
||||
.md-content a:not(.anchor):hover {
|
||||
text-decoration-color: var(--accent);
|
||||
}
|
||||
|
||||
.md-content blockquote {
|
||||
border-inline-start-color: var(--accent-line);
|
||||
}
|
||||
|
||||
.menu .active {
|
||||
color: var(--accent);
|
||||
text-decoration-color: var(--accent);
|
||||
}
|
||||
|
||||
.header {
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.post-entry {
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.post-entry:hover,
|
||||
.post-entry:focus-within {
|
||||
border-color: var(--accent-line);
|
||||
box-shadow: var(--shadow-hover);
|
||||
}
|
||||
|
||||
.pagination a,
|
||||
.paginav a {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
Venue tables
|
||||
|
||||
The tracker is mostly tables, and PaperMod's full 1px grid is what made them
|
||||
read as a spreadsheet. Rules run horizontally only; the header carries the
|
||||
tint, and the hovered row tells you which venue you are reading across.
|
||||
--------------------------------------------------------------------------- */
|
||||
|
||||
.md-content table th,
|
||||
.md-content table:not(.highlighttable, .highlight table, .gist .highlight) td {
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.md-content table th {
|
||||
background: var(--code-bg);
|
||||
color: var(--secondary);
|
||||
font-size: 0.8em;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.03em;
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1px solid var(--tertiary);
|
||||
}
|
||||
|
||||
.md-content table tbody tr:hover {
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
/* Venue detail pages carry headerless fact tables. Their empty header row would
|
||||
now show as a tinted bar above the first fact. */
|
||||
.md-content table thead:not(:has(th:not(:empty))) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* In a table that does have headers, bold marks the one cell worth finding
|
||||
first: the ICORE rank, the SCImago quartile, the cycle that is still open.
|
||||
Warm keeps it separate from the run of dates beside it. Detail pages are
|
||||
excluded — there bold marks every row label, which is not emphasis. */
|
||||
.md-content table:has(thead th:not(:empty)) td strong {
|
||||
color: var(--warm);
|
||||
}
|
||||
|
||||
/* Domains and tags are inline code spans. Chips, not code. */
|
||||
.md-content :not(pre) > code {
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent);
|
||||
border-radius: 999px;
|
||||
padding: 0.15em 0.55em;
|
||||
font-size: 0.72em;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
Layout adjustments (predate the palette)
|
||||
--------------------------------------------------------------------------- */
|
||||
|
||||
/* Shorter hero block: PaperMod reserves 320px / 260px for a lead image we
|
||||
don't use, which pushed the venue tables below the fold. */
|
||||
.first-entry {
|
||||
@@ -19,7 +188,7 @@
|
||||
full title weight; the topic reads as a secondary breadcrumb. */
|
||||
.logo-sep {
|
||||
margin: 0 6px;
|
||||
color: var(--secondary);
|
||||
color: var(--tertiary);
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
}
|
||||
@@ -30,6 +199,10 @@
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.logo .logo-topic:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* Topic cards on the home page. The stats line and the section shortcuts sit
|
||||
inside PaperMod's .post-entry, whose ::before overlay swallows clicks, so the
|
||||
shortcut links need to be lifted above it to stay clickable. */
|
||||
@@ -44,6 +217,11 @@
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.topic-stats strong {
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.topic-links {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
@@ -53,7 +231,12 @@
|
||||
}
|
||||
|
||||
.topic-links a {
|
||||
box-shadow: 0 1px 0 var(--primary);
|
||||
color: var(--accent);
|
||||
box-shadow: 0 1px 0 var(--accent-line);
|
||||
}
|
||||
|
||||
.topic-links a:hover {
|
||||
box-shadow: 0 1px 0 var(--accent);
|
||||
}
|
||||
|
||||
/* Intro copy above a list of cards. PaperMod gives .post-entry a bottom margin
|
||||
|
||||
Reference in New Issue
Block a user