CyclopsMC / infobook-html / 34737612263

64%

push

github

Restyle the generated infobooks and make them work on mobile

The pages were a fixed 800px wide without a viewport meta tag, so phones
rendered them zoomed out with the text running off screen. This reworks the
shared stylesheet and the templates into a responsive layout that stays close
to the look of the infobook inside the game: one parchment page on a dark
cover, with a stitched edge, an ornamental rule under the title, and pill
buttons for page navigation.

All colors are still derived from the six values that config.json already
defines, so no mod configuration has to change.

Templates:
* Add a charset and a viewport meta tag.
* Replace the wall of language links with a details dropdown that needs no
  JavaScript, and mark the current language with aria-current.
* Move the breadcrumbs into the page as a nav element.
* Make the section title the h1 of the page instead of the site name, and keep
  the schema:name triple intact with a meta element.
* Group appendices in a container so they can flow into columns.
* Swap Droid Sans for Lora, and load both fonts in a single request.

Fixes:
* The footer loaded main.js from an absolute /assets/main.js, which 404s for
  every book that is not hosted at the domain root, so the ingredient variant
  spinner never ran. It now resolves against baseUrl.
* The index template nested its each next to the ul instead of inside it,
  which emitted an empty ul followed by stray li siblings.
* assets/main.js was matched by the *.js gitignore rule and was never
  committed, so it only existed in the published package. It is now tracked.
* Image appendices had a hardcoded pixel size that overflowed narrow screens.
  They now keep their aspect ratio and scale their background with the element,
  so the stylesheet can shrink them to fit.

Colors from formatting codes are emitted as an mc-* class with the in-game
color as an inline custom property fallback, so that stylesheets can tune them
for readability on parchment w... (continued)

196 of 280 branches covered (70.0%)

Branch coverage included in aggregate %.

11 of 12 new or added lines in 1 file covered. (91.67%)

199 of 336 relevant lines covered (59.23%)

12.61 hits per line