Skins

Make a skin

A skin is one CSS file. Start from a copy of one that is here (Hacker is the fullest, Genera the shortest) and send it as a merge request to the site's repository; the maintainers will be glad of it.

1. Name it

Lower-case letters, digits and hyphens: solarized, lambda-day. The file is clnet/static/skins/<name>.css.

2. Give the roles new values

Every rule of the file sits under :root[data-skin="<name>"]. The pages are painted with these custom properties, and a skin that sets only them is already a whole new look:

:root[data-skin="solarized"] {
  --cl-ground: #fdf6e3;      /* the page */
  --cl-band: #eee8d5;        /* title bands, the footer */
  --cl-surface: #fffbef;     /* cards, menus, fields */
  --cl-ink: #073642;         /* headings, strong text */
  --cl-body: #586e75;        /* running text */
  --cl-muted: #839496;       /* captions, small print */
  --cl-rule: #e4dcc6;        /* lines */
  --cl-rule-strong: #d3cbb3;
  --cl-accent: #268bd2;      /* links, eyebrows */
  --cl-accent-strong: #1a6aa3;
  --cl-accent-fill: #268bd2; /* buttons */
  --cl-accent-fill-hover: #1f75b3;
  --cl-accent-soft: #dbe9f3;
  --cl-on-accent: #fff;      /* text on a button */
  --cl-code: #002b36;        /* code panels */
  --cl-code-ink: #93a1a1;
  --cl-code-dim: #657b83;
  --cl-font-sans: Georgia, serif;
  --cl-font-mono: ui-monospace, monospace;
}

The rule above holds in both themes. For the dark one, add a second rule under :root[data-skin="<name>"][data-scheme="dark"]; the page's script keeps data-scheme set to the theme the visitor is actually seeing. There are also --cl-ok, --cl-ok-soft, --cl-warn and --cl-warn-soft for the green and amber badges.

3. Add ornaments, if you like

Anything else is fair game as long as it stays under your selector: square corners, a font, a pumpkin after the site's name. Some hooks: .cl-brand (the name in the navigation bar), .cl-logo, .cl-eyebrow (the small label over a title), .cl-footer, .cl-visits and its numbers .cl-count, .cl-prose (everything written in Markdown), .cl-code (the code panels), main h1.

A skin may bring its own font, kept in the repository beside it and served by the site, as Genera does (clnet/static/skins/genera/): its @font-face sits in the skin's file, and a browser fetches the font only while the skin is worn.

4. List it

In *skins* at the top of clnet/source/skins.lisp: its name, title, author and a sentence, three swatch colours for this page, and a :when if it belongs to a day of the calendar ((:on "02-29"), (:from "12-20" :to "01-06")). Holiday skins go ahead of the weekend one. The calendar dresses only the visitors who chose it.

5. Try it

On a running copy of the site, with ?skin=<name> on any address, in both themes and at phone width. The README in clnet/ says how to run one; after editing a skin file on a running site, (clnet:refresh!).

The house rules

Nothing fetched from anywhere else (no web fonts from a CDN, no images by URL; the site makes no third-party requests and a skin should not start), text that stays easy to read, and any animation switched off under prefers-reduced-motion. Standard stays the default: a skin is worn only by a visitor who picked it.

Genera's type

The Genera skin is set in CPTFONT and its bold, CPTFONTB: the default screen font of the Lisp Machine, the very bitmaps resident in a Symbolics Genera 8.5 world. They were recovered and published by genera-fonts, whose NOTICE explains on what basis; thanks to its author, and to the reader on r/lisp who pointed the way to it. The site's copies are web fonts made from those bitmaps pixel for pixel, one square per pixel and nothing smoothed or invented, by a short script in clnet/tools/genera-font/. Text in the skin is set in whole multiples of the font's own 12-pixel cell, so the pixels stay square.