Banner and favicon

Getting started — part 5 of 10

Both ship with the engine as assets/images/defaults/ -- the first build copies whatever is missing to the live names assets/images/header.png (the path banner.src defaults to) and assets/images/favicon.png, so a fresh clone renders before you've drawn anything. The live names are gitignored: replace them with your own artwork and neither git pull nor a rebuild will touch it. That also means nothing else keeps a copy -- put both files in your backup (Backup), or a restore brings the site back wearing the engine's default artwork. Set banner.width/height to the real dimensions of your image: those attributes are what reserves space before it loads, and a mismatch makes the page jump.

./style.sh does that part for you -- give it the path to an image and it copies the file into place, reads its real dimensions and writes them, so the pair can never drift from the file. ./blog.sh doctor reports it if they ever do.

The favicon is used three ways from that one file: the <link rel="icon">, an apple-touch-icon (iOS scales it down for a home-screen bookmark), and a generated /favicon.ico for clients that request the root path without reading the link. A square PNG of 180 px or more covers all three.

The banner gets site.short_name rendered top-left and site.description bottom-right (wrapping to several lines if it is long), each darkening the corner it sits in so it stays readable against any image -- and only that corner, so a banner with both overlays off is shown exactly as authored. A calm image still works best. Each is independently optional: banner.show_title and banner.show_claim (both default true) decide whether they render at all, and colors.<mode>.banner_title / colors.<mode>.banner_claim override their color per light and dark mode -- by default nav_bg in light, white in dark. banner.claim overrides only the overlay's text, in Markdown or raw HTML (a manual <br>, say); site.description itself stays plain text everywhere else it is used, in the meta description and the feed. Their typeface and size are fonts.

banner.show_image: false leaves the picture out of the header. The short name and the description then stand on the page itself, one under the other at the left edge, and the whole header is still the link home. Their colours default to the page's own text and meta_text instead of the pair chosen for reading over a picture -- banner_title / banner_claim still override them -- and their sizes are scaled down from the configured ones (32px and 16px with the defaults), since 45px is a size for a line laid across a picture. Leave src, alt, width and height as they are: src is also the picture a page with none of its own is shared with, and alt becomes the name of the link. It is a key to set by hand; ./style.sh does not ask about it.