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.
Outline the brand mark instead of backing it with a tile
e3b9c83cf9d5f4af106d4070b506fff15b16df3c · Keenan Nemetz · 1d ago · parent 8911ab5f
Outline the brand mark instead of backing it with a tile Light themes keep the page-coloured head and add a dark outline, so the mark is a light line drawing on the bar rather than a filled badge. The outline comes from four offset drop-shadows on the masked mark; --mark-fill and --mark-outline still let a custom light theme opt in.
server/web/static/vole.css +14−14
| @@ -223,23 +223,20 @@ img { max-width: 100%; } | |||
| 223 | 223 | } | |
| 224 | 224 | .brand:hover { text-decoration: none; } | |
| 225 | 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. */ | ||
| 226 | /* The mark is a mask in the theme's ink. A light theme draws it in the page | ||
| 227 | colour with a dark outline instead, because the same muted ink on a pale bar | ||
| 228 | reads as a smudge. A custom light theme can opt in by setting these tokens. */ | ||
| 230 | 229 | :root { | |
| 231 | --mark-tile: transparent; | ||
| 232 | --mark-ink: currentColor; | ||
| 233 | --mark-pad: 0px; | ||
| 230 | --mark-fill: currentColor; | ||
| 231 | --mark-outline: transparent; | ||
| 234 | 232 | } | |
| 235 | 233 | :root[data-theme^="everforest-light"], | |
| 236 | 234 | :root[data-theme="catppuccin-latte"], | |
| 237 | 235 | :root[data-theme="solarized-light"], | |
| 238 | 236 | :root[data-theme="rose-pine-dawn"], | |
| 239 | 237 | :root[data-theme="ayu-light"] { | |
| 240 | --mark-tile: var(--fg); | ||
| 241 | --mark-ink: var(--bg); | ||
| 242 | --mark-pad: 2px; | ||
| 238 | --mark-fill: var(--bg); | ||
| 239 | --mark-outline: var(--fg); | ||
| 243 | 240 | } | |
| 244 | 241 | .brand .mark { | |
| 245 | 242 | display: block; | |
| @@ -247,14 +244,17 @@ img { max-width: 100%; } | |||
| 247 | 244 | flex: none; | |
| 248 | 245 | width: 30px; | |
| 249 | 246 | height: 30px; | |
| 250 | border-radius: var(--radius-lg); | ||
| 251 | background-color: var(--mark-tile); | ||
| 247 | filter: | ||
| 248 | drop-shadow(1px 0 0 var(--mark-outline)) | ||
| 249 | drop-shadow(-1px 0 0 var(--mark-outline)) | ||
| 250 | drop-shadow(0 1px 0 var(--mark-outline)) | ||
| 251 | drop-shadow(0 -1px 0 var(--mark-outline)); | ||
| 252 | 252 | } | |
| 253 | 253 | .brand .mark::before { | |
| 254 | 254 | content: ""; | |
| 255 | 255 | position: absolute; | |
| 256 | inset: var(--mark-pad); | ||
| 257 | background-color: var(--mark-ink); | ||
| 256 | inset: 0; | ||
| 257 | background-color: var(--mark-fill); | ||
| 258 | 258 | -webkit-mask: url("/static/vole-head.png") center / contain no-repeat; | |
| 259 | 259 | mask: url("/static/vole-head.png") center / contain no-repeat; | |
| 260 | 260 | } | |