Sign in

Search issue titles and bodies, change requests and comments. Private repositories you cannot read are not included.
vole
Clone

Read only, no credentials:

https://rodent.software/vole.git

Write over SSH with a registered key:

git clone ssh://git@rodent.software:2222/vole.git

A free and open-source forge that lives in your Git repo.

#50

Use the rat emblem as the logo and the favicon

merged · by keenan 13d ago · merged into main at ca0fcb5a by keenan 13d ago

keenan opened this 13d ago

The header carried a letter (v) in an accent chip and the favicon was a separate v glyph, so the forge had two marks that could drift apart. Both are now the supplied rat emblem, from one file.

What changed

  • server/web/static/logo.svg is the artwork, served from the binary like every other static asset. It is both the <link rel="icon"> target and the header mark.
  • server/web/static/favicon.svg is deleted; nothing referenced it.
  • .brand .mark no longer paints a background, a radius or a font. It sizes the image (22px) and nothing else, since the emblem carries its own shape.
  • A test asserts the served file contains the emblem and that the shell names it as both icon and mark, so a rename cannot leave every page pointing at a missing icon.

The theme adaptation, and why

The artwork is a badge with the rat silhouette knocked out — that is what makes it read as one object rather than a rat sitting on a disc. The consequence is that the rat takes the colour of whatever is behind it, so the badge has to be the thing that adapts:

circle#badge { fill: #171717; }
@media (prefers-color-scheme: dark) { circle#badge { fill: #e7e8ea; } }

Light mode is the artwork as authored: a near-black coin with a light rat. Dark mode is its negative: a near-white coin with a dark rat. The mask’s black and white are luminance and stay literal — theming them would break the cut-out.

The embedded query is safe as a fallback: a browser that ignores prefers-color-scheme inside an SVG image is a browser that also shows the light theme for the page, which is the state the base rule is for. Nothing else in the stylesheet is used, so there is no second place to keep in step.

Rendered and checked at 200px and at the header’s 20–22px in both themes: the silhouette — head, ear, whiskers, eye, tail — survives the small size.

If you would rather keep the coin black in both themes, delete the media query from logo.svg; in dark mode it becomes a very dark disc on a very dark header, which is why it is not the default.

Discussion (3)

keenan 13d ago

Artwork replaced; the description above is partly superseded.

The first version wrapped a raster rat in an SVG so the badge could follow the theme (#171717 in light, #e7e8ea in dark) and baked a 22px-and-up derivation of it. Two things sank it: the drawing was a knock-out, so at 16 pixels the rat was the page colour and read as a smudge in a dark tab bar, and the theme inversion meant two files plus a media query for every use.

The final version is a dark rounded tile with a white face — a self-contained mark that needs no theme swap at all. It ships as three PNGs (logo.png 128, favicon-32.png, favicon-16.png) derived from the source by removing only the white page around the tile with a fuzz flood fill from the corner; the face stays opaque because the tile encloses it. Each is square and centred, so a browser never letterboxes the 31-pixel-tall crop the trim produces.

The description’s “theme adaptation, and why” section can be read as history: the CSS in this change is now three lines that size the image, and logo.svg is gone. Checked at 16, 32, 128 and at the header’s 22 CSS px, composited on both --bg-panel and the light page.

keenan 13d ago

Branch rebuilt onto main. The first version of this branch was created while the config/deployment change (#49) was checked out, so its head carried all of #49: the diff here was 34 files and 1400 lines instead of seven. It is now 6416cab, on top of 13cff33, and the change is exactly:

server/web/static/logo.png        (new, 128x128)
server/web/static/favicon-32.png  (new)
server/web/static/favicon-16.png  (new)
server/web/static/favicon.svg     (deleted)
server/web/templates/chrome.html
server/web/static/vole.css
server/ui_test.go

verify passes on it (format, vet, build, govulncheck, packaging, links, race tests), so #49 and this are independent and can land in either order.

keenan 13d ago

Header follow-up in b0fd812: the mark is the header link’s only content, at 28px (up from 22px), so the tile is no longer read as a chip beside a wordmark. The link keeps aria-label="Vole home", so removing the visible text does not remove the accessible name.

Checked at 28px on --bg-panel and on the light page: the face carries the mark in both. verify still passes.