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

Add styles for youtube figures

Browse source 
Bring over the youtube shortcode from the old theme, and add styles for the figures
it creates. Add the .figure--youtube class to the <figure> element.
This commit is contained in:
Eryn Wells 2024-10-08 09:07:46 -07:00
parent 9baf615ebd
commit e1ad32ab12
3 changed files with 27 additions and 1 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, .codeblock, .highlight" -}}
{{- $elementsWithXLBlockMargins := "blockquote, .figure--image, .figure--youtube, .codeblock, .highlight" -}}
p + :is({{ $elementsWithXLBlockMargins }}) {
margin-block-start: var(--space-xl);

14
assets/css/050_figures.css
View file

@ -17,6 +17,20 @@
}
}
.figure--youtube {
grid-column: main-start / main-end;
.youtube {
width: 100%;
iframe {
aspect-ratio: 16 / 9;
margin-bottom: -3px;
width: 100%;
}
}
}
figcaption {
color: var(--text-color-secondary);
font-weight: normal;