custom.css
... ...
@@ -31,7 +31,7 @@ body {
31 31
padding: 0;
32 32
background: var(--bg);
33 33
color: var(--fg);
34
- font: 16px/1.7 monospace, Iosevka, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New";
34
+ font: 16px/1.7 Iosevka Comfy, monospace, Iosevka, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New";
35 35
}
36 36
37 37
/* ===== Layout: wider column (nav breathing room) ===== */
... ...
@@ -162,7 +162,7 @@ input[type="search"], input[type="text"], textarea, select, button {
162 162
#container, .gollum-site, .gollum-content, .wiki, .page, main,
163 163
.markdown-body,
164 164
.markdown-body *, .markdown-body *::before, .markdown-body *::after {
165
- font-family: monospace, Iosevka, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New" !important;
165
+ font-family: Iosevka Comfy, monospace, Iosevka, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New" !important;
166 166
color: var(--fg) !important;
167 167
}
168 168
body, .markdown-body { background: var(--bg) !important; }
... ...
@@ -173,7 +173,7 @@ body, .markdown-body { background: var(--bg) !important; }
173 173
.markdown-body samp,
174 174
.markdown-body pre,
175 175
.markdown-body pre code {
176
- font-family: monospace, Iosevka, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New" !important;
176
+ font-family: Iosevka Comfy, monospace, Iosevka, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New" !important;
177 177
}
178 178
179 179
/* Headings: ensure spacing + weight survive */
... ...
@@ -206,8 +206,8 @@ pre { background: var(--code-bg) !important; padding: 1rem 1.2rem !important; bo
206 206
/* --- Make the "Home" button a clickable image --- */
207 207
#minibutton-home {
208 208
/* size the button to the image */
209
- width: 45px;
210
- height: 45px;
209
+ width: 40px;
210
+ height: 40px;
211 211
padding: 0 !important;
212 212
213 213
/* show the cover art */
... ...
@@ -241,16 +241,56 @@ pre { background: var(--code-bg) !important; padding: 1rem 1.2rem !important; bo
241 241
/* If the surrounding nav compresses, keep the icon from shrinking */
242 242
nav.actions #minibutton-home { flex: 0 0 auto; }
243 243
244
-h1[icon]::before,
245
-h1[data-icon]::before {
246
- content: "";
247
- display: inline-block;
248
- width: 22px;
249
- height: 22px;
250
- margin-right: .5rem;
251
- background: center / contain no-repeat;
252
- vertical-align: middle;
244
+/* ====================================================================== */
245
+/* BADGES */
246
+/* ====================================================================== */
247
+/* Use on <img class="badge" src="/images/badges/xyz.png"> */
248
+
249
+/* Inline image badges */
250
+img.badge {
251
+ height: 1.05em; /* track with surrounding text size */
252
+ width: auto; /* keep aspect ratio */
253
+ vertical-align: -0.18em; /* nudge down to sit on the baseline */
254
+ margin-right: .35em;
253 255
border-radius: 3px;
254
- box-shadow: 0 0 0 1px var(--border);
255
- background-image: attr(icon url), attr(data-icon url);
256
+ box-shadow: 0 0 0 1px var(--border) inset; /* subtle keyline */
257
+ image-rendering: auto; /* avoid pixelation for PNG/SVG */
258
+ transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
259
+}
260
+
261
+/* If a badge is inside a link, hint interactivity */
262
+a > img.badge {
263
+ box-shadow: 0 0 0 1px color-mix(in srgb, var(--link) 45%, transparent) inset;
264
+}
265
+a:hover > img.badge,
266
+a:focus > img.badge { transform: translateY(-1px); }
267
+
268
+/* Size variants */
269
+img.badge.sm { height: .9em; }
270
+img.badge.lg { height: 1.3em; }
271
+
272
+/* Compact row of badges */
273
+.badges {
274
+ display: inline-flex;
275
+ gap: .35rem;
276
+ flex-wrap: wrap;
277
+ align-items: center;
278
+}
279
+.badges > img.badge { margin: 0; }
280
+
281
+/* Right-floating decorative badge (e.g., section callout) */
282
+img.badge.right {
283
+ float: right;
284
+ margin: 0 0 .2rem .5rem;
285
+}
286
+
287
+/* Optional: monochrome SVGs that follow text color (export with fill="currentColor") */
288
+img.badge.icon { filter: none; } /* ensure no accidental filters */
289
+.badge-muted { color: var(--muted); } /* wrap parent to tone down */
290
+
291
+/* Optional: gentle tweaks for dark mode PNGs (monochrome sources) */
292
+@media (prefers-color-scheme: dark) {
293
+ img.badge.invert {
294
+ filter: brightness(1.1) contrast(1.1);
295
+ }
256 296
}