Simplify figure styles and markup

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

View file

@ -7,23 +7,21 @@
-}}
<figure class="figure figure--image figure--small">
<div class="figure__container">
{{ if .linksToFullSizeImage -}}
<a href="{{ $image.RelPermalink }}">
{{- end -}}
<img
src="{{ (index $resizedImages "2x").RelPermalink }}"
srcset="
{{ (index $resizedImages "2x").RelPermalink }} 960w,
{{ (index $resizedImages "1x").RelPermalink }} 480w,
"
{{ with $image.Params.alt | default $image.Title }} alt="{{ . }}"{{ end }}
{{ with $image.Title }} title="{{ . }}"{{ end }}>
{{ if .linksToFullSizeImage -}}
</a>
{{- end -}}
{{ if .shouldShowTitle }}
{{ partial "page/figures/caption.html" . }}
{{ end }}
</div>
{{ if .linksToFullSizeImage -}}
<a href="{{ $image.RelPermalink }}">
{{- end -}}
<img
src="{{ (index $resizedImages "2x").RelPermalink }}"
srcset="
{{ (index $resizedImages "2x").RelPermalink }} 960w,
{{ (index $resizedImages "1x").RelPermalink }} 480w,
"
{{ with $image.Params.alt | default $image.Title }} alt="{{ . }}"{{ end }}
{{ with $image.Title }} title="{{ . }}"{{ end }}>
{{ if .linksToFullSizeImage -}}
</a>
{{- end -}}
{{ if .shouldShowTitle }}
{{ partial "page/figures/caption.html" . }}
{{ end }}
</figure>