custom.css
... ...
@@ -241,34 +241,16 @@ 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
-
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 {
244
+h1[icon]::before,
245
+h1[data-icon]::before {
256 246
content: "";
257 247
display: inline-block;
258 248
width: 22px;
259 249
height: 22px;
260
- border-radius: 3px;
250
+ margin-right: .5rem;
261 251
background: center / contain no-repeat;
252
+ vertical-align: middle;
253
+ border-radius: 3px;
262 254
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);
269
-}
270
-
271
-/* hide the preceding image itself (for layout only) */
272
-img:has(+ h1) {
273
- display: none;
255
+ background-image: attr(icon url), attr(data-icon url);
274 256
}