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

Add some styles for code and image figures

Browse source 
These elements are created with the figures/image shortcodes from the old site.
Make them wide, and give them XL block margins.

Along the way, make sure that any element with only an <img> child has a line height
of 1 to avoid a weird gap below the image.
This commit is contained in:
Eryn Wells 2024-10-11 16:37:24 -07:00
parent 49f5a90813
commit b112558914
3 changed files with 19 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assets/css/010_spacing.css
View file

@ -61,7 +61,7 @@ p + p {
/* Figures */
{{- $elementsWithXLBlockMargins := "blockquote, .figure--image, .figure--youtube, .codeblock, .highlight, table" -}}
{{- $elementsWithXLBlockMargins := "blockquote, .figure--code, .figure--image, .figure--youtube, .codeblock, .highlight, table" -}}
p + :is({{ $elementsWithXLBlockMargins }}) {
margin-block-start: var(--space-xl);

8
assets/css/010_typography.css
View file

@ -84,10 +84,6 @@ h4 {
p {
letter-spacing: 0.01em;
:has(img:only-child) {
line-height: 1;
}
}
sup {
@ -113,3 +109,7 @@ small,
font-size: var(--text-s);
letter-spacing: 0.01em;
}
:has(> img:only-child) {
line-height: 1;
}

15
assets/css/050_figures.css
View file

@ -7,11 +7,24 @@
* FIGURES
**********/
.figure--code,
.figure--image {
grid-column: wide-gutter-start / wide-gutter-end;
}
.figure--image {
display: grid;
grid-column: wide-gutter-start / wide-gutter-end;
grid-template-columns: subgrid;
.figure__container {
align-items: center;
display: flex;
gap: var(--body-item-spacing);
grid-column: wide-gutter-start / wide-gutter-end;
justify-content: center;
min-width: fit-content;
}
img {
grid-column: wide-gutter-start / wide-gutter-end;
}