eryn/hugo-theme-termlite
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Simplify figure styles and markup

Browse source 
Remove the .figure__container element. According to Tess, putting a <figcaption>
inside a child of a <figure> "doesn't obey the content model" or some shit.
Fiiiiine.

Getting small figures to lay out the way I want them to without the container
was a bit of a trick. Instead of letting the figure span the entire width of the
grid column, let it fit the size of its contents, and then set margin-inline to
auto so it centers.

Doing this also allowed me to remove the .figure--image, etc styles because the
styles and markup are a lot more similar among figures containing different
kinds of elements. Nice!
This commit is contained in:
Eryn Wells 2024-11-25 15:48:04 -08:00
parent 502aa408d9
commit efae2acdea
6 changed files with 44 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

6
assets/css/010_structure.css
View file

@ -98,7 +98,7 @@ body {
gap: var(--space-xl) 0;
}
:is(.list-header, p) {
.list-header, p {
grid-column: main-start / main-end;
}
@ -110,10 +110,6 @@ body {
grid-column: wide-gutter-start / wide-gutter-end;
}
figure, img {
max-width: 100%;
}
img {
object-fit: contain;
}