tabi/sass/parts/_image.scss
Jérôme Ramette 96e4fed704 🎨 style(image): display linked images inline within paragraphs
Images wrapped in links inside paragraphs (p > a > img) are now
displayed inline, matching the existing img.inline behaviour.

This covers a common Markdown pattern — badges and status icons like
[![alt](badge.svg)](url) — where block display breaks the intended
horizontal flow without requiring authors to switch to raw HTML.
2026-02-16 17:33:13 +01:00

62 lines
850 B
SCSS

figure {
display: inline-block;
box-sizing: border-box;
margin: 0;
max-width: 100%;
height: auto;
}
figcaption {
color: var(--meta-color);
font-size: 0.72rem;
font-family: var(--serif-font);
text-align: center;
}
img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
img.inline,
p > a > img {
display: inline;
margin: 0;
vertical-align: middle;
}
figure h4 {
margin: 0;
margin-block-end: 1em;
font-size: 1rem;
}
figure h4::before {
content: "";
}
.img-dark {
display: none;
&.inline{
display: none;
}
}
.img-light.inline {
display: inline;
}
[data-theme="dark"] {
.img-dark {
display: block;
&.inline {
display: inline;
}
}
.img-light {
display: none;
}
}