# fossil-skin
A skin for [Fossil](https://fossil-scm.org) in two variants, **dark** and **light**: Fossil's
default layout with WCAG AA contrast, Instrument Sans, the Bone Hive logo, and fixes for every
place Fossil hard-codes colours (timeline graph, diffs, ticket reports, chat, forum, pikchr,
tickets). It also carries a main menu with a Search entry, a phone-friendly menu, and the day of
the week above each timeline date.
## Use it on any Fossil repository
Pick one of the self-contained files in `dist/`. Each embeds the logo, favicon and the small
accessibility script, so it needs nothing but Fossil:
| File | Variant | Font | Size |
|------|---------|------|------|
| [craftdesign-skin.cfg](../../raw/dist/craftdesign-skin.cfg?ci=trunk) | dark | the viewer's system font | 210 KB |
| [craftdesign-skin-instrument-sans.cfg](../../raw/dist/craftdesign-skin-instrument-sans.cfg?ci=trunk) | dark | Instrument Sans, embedded (the look of this server) | 300 KB |
| [craftdesign-skin-light.cfg](../../raw/dist/craftdesign-skin-light.cfg?ci=trunk) | light | the viewer's system font | 210 KB |
| [craftdesign-skin-light-instrument-sans.cfg](../../raw/dist/craftdesign-skin-light-instrument-sans.cfg?ci=trunk) | light | Instrument Sans, embedded | 300 KB |
```sh
fossil config import craftdesign-skin-light.cfg -R /path/to/repo.fossil
```
That sets the skin (css, header, footer, details), the logo, and the main menu. Nothing needs
restarting: the next page load uses it.
To switch between dark and light, or between fonts, import the other file the same way. To take
it off, pick any built-in skin under Admin → Skins.
### Dark or light
The two variants share one stylesheet and differ in their colours and in one setting,
`white-foreground` in the skin's details. Fossil reads that setting on the server to choose
user, branch and pikchr colours: dark tints for white text in the dark skin, pastels for dark
text in the light one. So the light variant is its own skin rather than a toggle. A CSS switch
on the dark skin could only wash its dark tints toward grey.
### Colours
* **Chat.** Each message keeps its sender's colour, muted 30% toward the page in the dark skin.
Your own messages sit on the right where Fossil puts them there: by default in tall,
phone-shaped windows, and anywhere for users who untick "Left-align my posts" in chat settings.
* **Timeline.** Branch rows keep their colour, muted 40% in the dark skin, and each graph line
is drawn in its branch's colour.
* **Choosing user colours.** Fossil derives each user's colour from a hash of their login; a
skin can only decide how strongly it shows. If two people come out similar, an admin can set
`user-color-map` (Admin → Settings) to hash a different word for a login, for example
`stephan stephan13 dmestas dmestas4`. That swaps in another hashed colour; it does not take
a hex value. `/hash-color-test?rand` suggests words.
### On phones
The ☰ menu opens as a sheet from under the menu bar to the bottom of the screen. The page
behind it stays still, the menu bar stays on screen while it is open (so ☰ is always there to
close it), and every link can be reached by scrolling the sheet. Wide tables scroll inside
themselves, so no page scrolls sideways.
### Timeline weekdays
Each timeline date gets its full weekday on a small line above it. It is worked out in the
browser from the date Fossil prints, so it matches that date whether the timeline shows UTC or
local time. Without JavaScript you just see the date.
### Building the files yourself
```sh
python3 skin/build.py # writes all four files into dist/
```
Two optional things the skin cannot do for you, because they are per-repo settings:
```sh
# Full-text search, so the Search menu entry has something to show
fossil fts-config enable check-in wiki ticket forum document -R repo.fossil
fossil fts-config index on -R repo.fossil
# A wiki page as the home page (the skin hides Fossil's extra "index" / "Home" title)
fossil config -R repo.fossil set index-page '/wiki?name=index'
```
Requires Fossil 2.20 or newer for the `mainmenu` setting; older versions ignore it and use
their built-in menu.
## Changes, questions, bugs
Use the [forum](../../forum) for questions and the [tickets](../../ticket) for bugs or change
requests. Both are open: click "Anonymous login" and you can post. Forum posts from anonymous
users are held until a moderator approves them. If you have a fix, attach a patch to the
ticket or describe the change in the forum thread.
## This server (fossil.craftdesign.group)
The hosted repos use the dark variant from the same sources, with the fonts and script served
by Caddy instead of embedded, plus a landing page, per-repo metadata and git mirrors:
| Path | What |
|------|------|
| `skin/` | `css.txt`, `header.txt`, `footer.txt`, `logo.png`, `icons/`, `apply.py`, `build.py` |
| `www/` | landing page, `a11y.js`, favicon, fonts |
| `repos/*.meta` | per-repo icon, description and public access, read by `apply.py` |
| `mirror/` | hourly git → fossil mirror script |
| `docs/` | setup notes, and how the skin works (`docs/SKIN.md`) |
| `Caddyfile` | serves `www/` and proxies the rest to Fossil |
Deploying a change: copy the edited files to `/var/fossil/skin` or `/var/fossil/www` on the
server and run `python3 /var/fossil/skin/apply.py`, which pushes the skin into every repo and
regenerates the landing page. `deploy.sh` does both from a checkout on the server. Adding a repository is documented on the
server at `fossil-skin/wiki/new-repo`.
## Licences
Skin: MIT. Instrument Sans: SIL Open Font License. Icons: Phosphor, MIT. The weekday
calculation follows Ben Joffe's "Fast Day-of-Week Computation" (benjoffe.com/fast-day-of-week).