Initial commit
This commit is contained in:
jasa
@@ -0,0 +1,151 @@
|
||||
# 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.
|
||||
|
||||
The wood and the scroll are **demo chrome**, in `src/demo/demo.scss`, not in the
|
||||
stylesheet: page layout is still on the to-do list below, and a demo is not the
|
||||
place to quietly ship it. The demo is not a build input, so none of it can reach
|
||||
`dist/tlig.css` — the build is checked for exactly that.
|
||||
|
||||
The frame is there anyway because 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
|
||||
components/
|
||||
_button.scss _field.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.
|
||||
|
||||
## Not done yet
|
||||
|
||||
- Page-level layout: header, nav, the wood and papyrus backgrounds, `#main`
|
||||
- Message typography (`.tbody`, `.vassula`, `.jc`, `.god`, the bible-reference
|
||||
asides)
|
||||
- Menus, bookstore, search, testimonies, downloads
|
||||
- Enqueuing the built CSS from the theme, and retiring `tlig_en.css`
|
||||
Reference in New Issue
Block a user