custom.css
... ...
@@ -241,21 +241,34 @@ 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
-/* Tiny icon beside H1 titles */
245
-.markdown-body h1 img,
246
-h1 img {
244
+
245
+/* Treat a lone image right before an h1 as its badge */
246
+.markdown-body img + h1,
247
+img + h1 {
248
+ display: flex;
249
+ align-items: center;
250
+ gap: .5rem;
251
+}
252
+
253
+/* style that preceding image */
254
+.markdown-body img + h1::before,
255
+img + h1::before {
256
+ content: "";
257
+ display: inline-block;
247 258
width: 22px;
248 259
height: 22px;
249 260
border-radius: 3px;
250
- object-fit: contain;
251
- vertical-align: middle;
252
- margin-right: 0.5rem;
261
+ background: center / contain no-repeat;
253 262
box-shadow: 0 0 0 1px var(--border);
263
+ /* inherit src dynamically via attribute selector */
264
+}
265
+
266
+/* tie the :before background to the previous image */
267
+img + h1::before {
268
+ background-image: var(--header-icon);
254 269
}
255 270
256
-/* If the icon comes *after* the text */
257
-.markdown-body h1 img:last-child,
258
-h1 img:last-child {
259
- margin-left: 0.5rem;
260
- margin-right: 0;
271
+/* hide the preceding image itself (for layout only) */
272
+img:has(+ h1) {
273
+ display: none;
261 274
}