Everything below is rendered by src/sass/main.scss — 10 kB
compiled, and every !important in it (four) sits in the
one prefers-reduced-motion block, where overriding author
animation is the point. tlig_en.css has 518. The wood ground and the papyrus scroll around this
text are demo chrome, not part of the stylesheet: page layout
is still on the to-do list, and a demo is not the place to quietly
ship it.
The frame is here anyway because a foundation only tells you the truth when you see it on the ground it has to work on. Brown ink at 86% opacity looks arbitrary on white and obviously right on papyrus.
One family name, four files
Use the toolbar to switch script. No CSS changes, no
language class, no second stylesheet — the four papyrus cuts share the
family name papyrus-bold and are separated by
unicode-range, so the browser picks the file by codepoint.
Type scale
Lato at 18px on a 1.5 line height, in
--tlig-color-page-ink: a brown at 86% rather than black,
so it settles onto the papyrus instead of sitting on top of it. Here
is bold text, italic text, and
small print in the muted token.
The translucent panel — --tlig-color-page-panel
at 30% white — with the message-red rule and the asymmetric corner the
site has always had.
h2 is encoded as Trebuchet / #7a0012 / bold. Avada's
own token says Lato / #333333, but tlig_en.css overrides it
globally with four !importants — so the override is what
actually renders, and the override is what got written down.
Links
A default link carries no underline — that is for
navigation and cards. Inside .prose, a link
underlines itself without needing a class. The explicit
.link-underline variant is kept
for templates that ask for it, and .link-plain
inherits its colour, for a link wrapping a whole card.
The live rule is
a:hover { color: #ca4a1f !important } — one global
!important that every later link style then has to fight.
That is where most of the 518 in tlig_en.css start.
Buttons and fields
Four ids and classes in the live CSS —
#footer-viewMagazineSpan, .btnSubmitNewsletter,
.btnSubmitDailyMessage, .footer-donateSpan —
repeating the same six declarations with different corner radii. One
class with modifiers replaces them.
Filter pills
The toggle behind the message archives, the photo and
video galleries, the theme taxonomy and the year accordions. The live CSS
spells it three times — .filters-tags-frame,
.cptButtonFilter, and a bare .active that fills
whatever it lands on with rgba(145,116,85,.5) and white text.
One class with a pressed state covers all three.
The border is currentColor at 55%, not a
fixed brown. That is why the identical pills in the toolbar above work on
a dark ground with no second rule — the same component, inheriting a
different text colour.
Context re-points tokens
This block adds one class. It declares no colours of its own: the
dark-ground mixin re-points nine tokens, and this
heading, this body copy, this link, its hover and the
button below are all correct as a result. No dark-specific rule for
any of them exists in the stylesheet.
This is the mechanism that replaces the footer's 24
id selectors: a region declares what its tokens mean, and every
component inside it is already right. The footer below includes the same
mixin — the list of what "dark" means exists once, so the two cannot
drift. An earlier draft of this page caught the bug that proves the
point: .on-dark had re-pointed the links but not
--tlig-color-heading, and the heading above rendered
dark-brown on dark-brown.
Colour tokens (0)
Generated at runtime from the --tlig-color-*
properties the stylesheet actually emits, not from a hand-kept list — so
this grid cannot drift. Delete a token and its swatch disappears.