<figure>
<picture>
<source type="image/webp" srcset="https://thomasorus.com/media/chisai-240.webp 300w, https://thomasorus.com/media/chisai-680.webp 600w, https://thomasorus.com/media/chisai-900.webp 900w, https://thomasorus.com/media/chisai.webp 1200w">
<img loading="lazy" alt="Chisai is a small website generator" srcset="https://thomasorus.com/media/chisai-240.jpg 300w, https://thomasorus.com/media/chisai-680.jpg 600w, https://thomasorus.com/media/chisai-900.jpg 900w, https://thomasorus.com/media/chisai.jpg 1200w" src="https://thomasorus.com/media/chisai.png">
</picture>
<figcaption>
Chisai is a small website generator
</figcaption>
</figure>
<br>
<style>
figure {
margin: 10px;
}
</style>
<figure>
<picture>
<source type="image/webp" srcset="https://thomasorus.com/media/chisai-240.webp 300w, https://thomasorus.com/media/chisai-680.webp 600w, https://thomasorus.com/media/chisai-900.webp 900w, https://thomasorus.com/media/chisai.webp 1200w">
<img loading="lazy" alt="Chisai is a small website generator" srcset="https://thomasorus.com/media/chisai-240.jpg 300w, https://thomasorus.com/media/chisai-680.jpg 600w, https://thomasorus.com/media/chisai-900.jpg 900w, https://thomasorus.com/media/chisai.jpg 1200w" src="https://thomasorus.com/media/chisai.png">
</picture>
<figcaption>
Chisai is a small website generator
</figcaption>
</figure>
<br>
<style>
figure {
margin:10px;
}
</style>
/* No context defined. */
:root {
/* Figcaption spacing, min 11, max 16 */
--figcaption-spacing: calc(((11 / 16) * 1rem) + (16 - 11) * var(--fluid-bp));
}
figure > picture + figcaption,
figure > video + figcaption {
background-color: black;
background-color: var(--background-dark);
padding: 11px;
padding: var(--figcaption-spacing);
min-width:100%;
border-bottom-left-radius: var(--radius-sm);
border-bottom-right-radius: var(--radius-sm);
box-shadow: var(--background-dark) 0 0 0 2px;
}
picture {
display: block;
}
picture img,
picture video {
display: block;
box-shadow: var(--background-dark) 0 0 0 2px;
}
picture img,
figure img,
figure video {
max-width: 100%;
border-bottom: none;
}
figure video {
width: 100%;
box-shadow: var(--background-dark) 0 0 0 2px;
display: block;
}
No notes defined.