170 lines
8.0 KiB
Markdown
170 lines
8.0 KiB
Markdown
# tlig_css
|
|
|
|
The TLIG stylesheet rebuilt on SASS tokens and Vite, as a replacement for
|
|
`Avada-Child-Theme/css/tlig_en.css` (7,082 lines) and the compiled Avada
|
|
`style.css` it fights with.
|
|
|
|
This first pass covers the common foundation only: fonts, colour, type scale,
|
|
links, buttons, form fields and the footer. Page-specific styling (messages,
|
|
bookstore, menus, the wood and scroll backgrounds) is not here yet.
|
|
|
|
## Commands
|
|
|
|
npm install
|
|
npm run dev # demo with live reload, at localhost:5173
|
|
npm run preview # demo as a static page, at localhost:4173
|
|
npm run build # the deliverable: dist/tlig.css + dist/fonts/
|
|
|
|
There is no way to open `src/index.html` from disk — it is an ES module that
|
|
imports `.scss`, so it needs one of the two servers above. `file://` gives a
|
|
blank page.
|
|
|
|
**`npm run dev`** compiles the SASS in memory and injects the CSS through
|
|
JavaScript. Fast, hot-reloading, and how you work. One caveat: because the CSS
|
|
arrives after first paint, anything with a `transition` animates up from its
|
|
unstyled state, so for a few milliseconds links are browser-blue and buttons are
|
|
nearly transparent. That is a dev-server artifact, not the stylesheet.
|
|
|
|
**`npm run preview`** builds the demo to `demo-dist/` and serves it. The page
|
|
there loads the compiled stylesheet through a real `<link rel="stylesheet">` in
|
|
`<head>`, so it paints once, exactly as a browser will on the real site. Use
|
|
this when judging how something actually looks, or when screenshotting.
|
|
|
|
**`npm run build`** emits only the deliverable — `dist/tlig.css` and the fonts,
|
|
no HTML and no demo markup. The demo is built from `src/index.html` and the
|
|
deliverable from `src/main.js`, so demo chrome cannot reach `dist`.
|
|
|
|
## The demo page
|
|
|
|
`npm run dev` serves `src/index.html`: the foundation rendered on the real
|
|
ground, inside the wood background and the papyrus scroll, with the real footer
|
|
component at the bottom. It shows the type scale, every link and button
|
|
variant, the dark-ground mechanism, and a colour grid generated at runtime from
|
|
the `--tlig-color-*` properties the stylesheet actually emits — so the grid
|
|
cannot drift from the code.
|
|
|
|
The toolbar has three controls:
|
|
|
|
- **Script** — switches the sample heading between Latin, Hungarian, Cyrillic
|
|
and Greek. No CSS changes when you do; the browser picks the font file by
|
|
codepoint. Also addressable as `?script=bg` for linking or screenshotting.
|
|
Greek is included deliberately: no papyrus cut exists for it, so it shows the
|
|
fallback face honestly.
|
|
- **Show boxes** — outlines each component so the structure is visible.
|
|
- A live viewport width and the active breakpoint.
|
|
|
|
What remains demo-only, in `src/demo/demo.scss`, is the toolbar, the swatch
|
|
grid, the section scaffolding, and four `:root` declarations pointing the
|
|
frame's image tokens at this project's local mirror. The demo is not a build
|
|
input, so none of it can reach `dist/tlig.css` — the build is checked for
|
|
exactly that.
|
|
|
|
A foundation only tells the truth on the ground it has to work on. Brown ink at
|
|
86% looks arbitrary on white and obviously right on papyrus.
|
|
|
|
## Layout
|
|
|
|
src/sass/
|
|
abstracts/ compile-time only; emits no CSS
|
|
_palette.scss every literal colour the live site uses
|
|
_tokens.scss semantic tokens: what a colour is *for*
|
|
_functions.scss token accessors
|
|
_mixins.scss media queries, type, patterns
|
|
base/
|
|
_root.scss emits every token as a CSS custom property
|
|
_fonts.scss @font-face
|
|
_reset.scss
|
|
_typography.scss
|
|
_links.scss
|
|
layout/
|
|
_page.scss the wood ground and the papyrus scroll
|
|
components/
|
|
_button.scss _field.scss _filter.scss _footer.scss
|
|
src/fonts/ papyrus-bold (4 scripts) and Lato, self-hosted
|
|
src/demo/ demo page chrome and behaviour — never built
|
|
src/index.html the demo page
|
|
|
|
## The three rules that replace the jigsaw
|
|
|
|
**One source of truth per value.** No rule writes a hex code. `_palette.scss`
|
|
holds the literals, `_tokens.scss` names them by role, `base/_root.scss` emits
|
|
them as `--tlig-*` custom properties, and every rule reads a token. `#482020`
|
|
appears 74 times in `tlig_en.css`; it appears once here.
|
|
|
|
**Context re-points tokens, it does not restate rules.** The `dark-ground`
|
|
mixin re-points nine custom properties; `.site-footer` and `.on-dark` both
|
|
include it and declare no colours of their own. Every link, heading and button
|
|
inside them is then correct — where the live CSS needs 24 id selectors to say
|
|
the same thing. The list of what "dark" means exists once, so the two cannot
|
|
drift: building the demo caught exactly that bug, an `.on-dark` that re-pointed
|
|
the links but not `--tlig-color-heading`, rendering a heading dark-brown on
|
|
dark-brown.
|
|
|
|
**Specificity goes one way.** Layer order in `main.scss` is tokens → base →
|
|
components, and nothing later needs to outrank anything earlier. Every
|
|
`!important` in the build — four of them — is in the single
|
|
`prefers-reduced-motion` block, where overriding author animation is the point.
|
|
There are none anywhere else. `tlig_en.css` has 518.
|
|
|
|
## What the tokens were taken from
|
|
|
|
Values are the ones the site renders today, not new choices:
|
|
|
|
| Token | Value | Source |
|
|
|---|---|---|
|
|
| `--tlig-color-page-ink` | `rgba(72,32,32,0.86)` | Avada `--body_typography-color` |
|
|
| `--tlig-color-link` | `#810008` | Avada `--link_color` |
|
|
| `--tlig-color-link-hover` | `#ca4a1f` | `tlig_en.css` global `a:hover` |
|
|
| `--tlig-color-heading` | `#482020` | Avada `--h1_typography-color` |
|
|
| `--tlig-color-heading-message` | `#7a0012` | `tlig_en.css` global `h2` |
|
|
| `--tlig-color-footer-ink` | `#fbefc9` | `tlig_en.css` `#footer-container` |
|
|
| `--tlig-color-button-bg` | `#8f0b06` | `tlig_en.css` `.btnSubmitNewsletter` |
|
|
| `--tlig-size-base` | `18px` | Avada `--body_typography-font-size` |
|
|
|
|
Two deliberate departures, both noted in the source:
|
|
|
|
- **h2** is encoded as Trebuchet / `#7a0012` / bold. Avada's own token says Lato
|
|
/ `#333333`, but `tlig_en.css` overrides it globally with four `!important`s,
|
|
so the second is what actually renders.
|
|
- **Spacing** is snapped to a 4px scale. The live CSS uses 6px, 23px, 35px and
|
|
46px in adjacent rules; those become the nearest step.
|
|
|
|
## Fonts
|
|
|
|
`papyrus-bold` is declared four times under one family name, split by
|
|
`unicode-range` across the Latin, Latin-Extended (Hungarian), Cyrillic and
|
|
Cyrillic-Extended (Bulgarian) files. The browser picks the file by codepoint, so
|
|
a Bulgarian heading needs no language class and no second stylesheet.
|
|
|
|
All font files are project assets. The live site points `@font-face` at absolute
|
|
`ww3.tlig.org` URLs, which is why a staging copy renders in the fallback face;
|
|
here Vite emits them into `dist/fonts/` and the CSS references them relatively,
|
|
so the bundle resolves at whatever path it is dropped.
|
|
|
|
Lato is self-hosted from the three files already in the child theme, replacing
|
|
the 33 `@font-face` blocks Avada generates from its Google Fonts cache.
|
|
|
|
## The page frame
|
|
|
|
`layout/_page.scss` carries the wood ground and the three-piece papyrus scroll.
|
|
Two things it does differently from the live CSS:
|
|
|
|
- **The image URLs are custom properties.** Swapping the set at a breakpoint is
|
|
four declarations, where the live CSS duplicates six rules per breakpoint —
|
|
and again under `html.webp` and `html.no-webp`, for a browser that no longer
|
|
exists. A demo or a staging copy re-points the tokens instead of editing the
|
|
stylesheet.
|
|
- **The overlaps are measured, not guessed.** The foot image's top 18px ramp
|
|
from alpha 15 to its 242 plateau; butt it against the body and that fade
|
|
composites over bare wood, which reads as a hard line at the body's edge. The
|
|
overlap is `-20px`: the ramp plus a little. It has to be a margin — the
|
|
element is static, and `top` only moves a positioned box.
|
|
|
|
## Not done yet
|
|
|
|
- Header and nav
|
|
- Message typography (`.tbody`, `.vassula`, `.jc`, `.god`, the bible-reference
|
|
asides)
|
|
- Bookstore, search, testimonies, downloads
|
|
- Enqueuing the built CSS from the theme, and retiring `tlig_en.css`
|