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 only the silhouette of the light-theme brand mark
ed667a0e5b0c099cbf9bf10b4ee0ac87a4f99bc0 · Keenan Nemetz · 23h ago · parent e3b9c83c
Outline only the silhouette of the light-theme brand mark The drop shadows followed every cutout, so the outline traced the eyes, nose, and whisker gaps. Use a separate ring asset generated from the outer silhouette instead: it is thinner (about 0.75px at 30px), ignores the interior detail, and keeps the light fill.
server/web/static/vole.css +19−8
| @@ -244,19 +244,30 @@ img { max-width: 100%; } | |||
| 244 | 244 | flex: none; | |
| 245 | 245 | width: 30px; | |
| 246 | 246 | height: 30px; | |
| 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 | 247 | } | |
| 253 | .brand .mark::before { | ||
| 248 | .brand .mark::before, | ||
| 249 | .brand .mark::after { | ||
| 254 | 250 | content: ""; | |
| 255 | 251 | position: absolute; | |
| 256 | 252 | inset: 0; | |
| 253 | -webkit-mask-position: center; | ||
| 254 | -webkit-mask-size: contain; | ||
| 255 | -webkit-mask-repeat: no-repeat; | ||
| 256 | mask-position: center; | ||
| 257 | mask-size: contain; | ||
| 258 | mask-repeat: no-repeat; | ||
| 259 | } | ||
| 260 | /* The outline is its own thin ring around the outside of the head. It follows the | ||
| 261 | silhouette, not the eyes, nose, or gaps between the whiskers. */ | ||
| 262 | .brand .mark::before { | ||
| 263 | background-color: var(--mark-outline); | ||
| 264 | -webkit-mask-image: url("/static/vole-head-outline.png"); | ||
| 265 | mask-image: url("/static/vole-head-outline.png"); | ||
| 266 | } | ||
| 267 | .brand .mark::after { | ||
| 257 | 268 | background-color: var(--mark-fill); | |
| 258 | -webkit-mask: url("/static/vole-head.png") center / contain no-repeat; | ||
| 259 | mask: url("/static/vole-head.png") center / contain no-repeat; | ||
| 269 | -webkit-mask-image: url("/static/vole-head.png"); | ||
| 270 | mask-image: url("/static/vole-head.png"); | ||
| 260 | 271 | } | |
| 261 | 272 | ||
| 262 | 273 | .topnav { display: flex; gap: 6px; } | |