vole
Clone
Read only, no credentials:
https://rodent.software/git/vole.git
Write over SSH with a registered key:
git clone ssh://git@0.0.0.0:2222/vole.git
A free and open-source forge that lives in your Git repo.
Use the favicon treatment for the brand mark in light themes
8911ab5f5d2ecf922a6856821c202a17f86e20f7 · Keenan Nemetz · 1d ago · parent 97b3b022
Use the favicon treatment for the brand mark in light themes The emblem was the theme's ink as a mask, which reads as a smudge on a pale bar. Light themes now put it on a rounded tile in the foreground colour with the page colour showing through the head, matching the favicon's figure-ground. The mark is a token-driven mask either way: --mark-tile, --mark-ink, and --mark-pad default to the old transparent emblem, and the built-in light palettes opt into the tile. A custom light theme can do the same in its stylesheet.
server/web/static/vole.css +30−7
| @@ -222,16 +222,39 @@ img { max-width: 100%; } | |||
| 222 | 222 | color: var(--fg); | |
| 223 | 223 | } | |
| 224 | 224 | .brand:hover { text-decoration: none; } | |
| 225 | /* The head is a mask, not a fixed dark tile: currentColor takes the theme's ink, | ||
| 226 | and the facial cutouts show the bar behind it. The favicon is a separate | ||
| 227 | transparent mark that switches black/white with the browser window preference, | ||
| 228 | because its job is to contrast with the tab, not with the app theme. */ | ||
| 225 | |||
| 226 | /* The mark is a mask in the theme's ink on a transparent tile. A light theme turns | ||
| 227 | it into the favicon treatment instead: a dark tile with the page colour showing | ||
| 228 | through the head, because the same muted ink on a pale bar reads as a smudge. | ||
| 229 | A custom light theme can opt in by setting these three tokens. */ | ||
| 230 | :root { | ||
| 231 | --mark-tile: transparent; | ||
| 232 | --mark-ink: currentColor; | ||
| 233 | --mark-pad: 0px; | ||
| 234 | } | ||
| 235 | :root[data-theme^="everforest-light"], | ||
| 236 | :root[data-theme="catppuccin-latte"], | ||
| 237 | :root[data-theme="solarized-light"], | ||
| 238 | :root[data-theme="rose-pine-dawn"], | ||
| 239 | :root[data-theme="ayu-light"] { | ||
| 240 | --mark-tile: var(--fg); | ||
| 241 | --mark-ink: var(--bg); | ||
| 242 | --mark-pad: 2px; | ||
| 243 | } | ||
| 229 | 244 | .brand .mark { | |
| 230 | 245 | display: block; | |
| 246 | position: relative; | ||
| 231 | 247 | flex: none; | |
| 232 | width: 28px; | ||
| 233 | height: 28px; | ||
| 234 | background-color: currentColor; | ||
| 248 | width: 30px; | ||
| 249 | height: 30px; | ||
| 250 | border-radius: var(--radius-lg); | ||
| 251 | background-color: var(--mark-tile); | ||
| 252 | } | ||
| 253 | .brand .mark::before { | ||
| 254 | content: ""; | ||
| 255 | position: absolute; | ||
| 256 | inset: var(--mark-pad); | ||
| 257 | background-color: var(--mark-ink); | ||
| 235 | 258 | -webkit-mask: url("/static/vole-head.png") center / contain no-repeat; | |
| 236 | 259 | mask: url("/static/vole-head.png") center / contain no-repeat; | |
| 237 | 260 | } | |