eryn/hugo-theme-termlite
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
hugo-theme-termlite/assets/css/050_figures.css

57 lines
910 B
CSS
Raw Normal View History

General figure and list element styles
2024-07-23 08:55:59 -07:00
/**********
* FIGURES
**********/
Import the code and image shortcodes from the old website Update the styles for code, image, and youtube figures.
2024-10-12 11:26:23 -07:00
.figure {
Add some styles for code and image figures 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.
2024-10-11 16:37:24 -07:00
grid-column: wide-gutter-start / wide-gutter-end;
Import the code and image shortcodes from the old website Update the styles for code, image, and youtube figures.
2024-10-12 11:26:23 -07:00
.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;
}
}
.figure--code {
grid-column: gutter-start / gutter-end;
Add some styles for code and image figures 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.
2024-10-11 16:37:24 -07:00
}
General figure and list element styles
2024-07-23 08:55:59 -07:00
.figure--image {
display: grid;
grid-template-columns: subgrid;
img {
grid-column: wide-gutter-start / wide-gutter-end;
}
}
Add styles for youtube figures 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.
2024-10-08 09:07:46 -07:00
.figure--youtube {
Import the code and image shortcodes from the old website Update the styles for code, image, and youtube figures.
2024-10-12 11:26:23 -07:00
grid-column: wide-gutter-start / wide-gutter-end;
Add styles for youtube figures 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.
2024-10-08 09:07:46 -07:00
.youtube {
width: 100%;
iframe {
aspect-ratio: 16 / 9;
margin-bottom: -3px;
width: 100%;
}
}
}
General figure and list element styles
2024-07-23 08:55:59 -07:00
figcaption {
Colors: Allow setting the color scheme explicitly In addition to the color scheme changing based on the system setting, enable setting the color scheme explicitly by adding a color-scheme="light | dark" attribute on the <html> element. Doing this was a bit tricky. I originally implemented the grayscale ramp by reversing it when prefers-color-scheme: dark. This was convenient, but meant that setting the color scheme explicitly didn't work. Along the way I discovered the light-dark() CSS function. Deploy that as the preferred style if the browser supports it. Otherwise, fall back on the prefers-color-scheme media queries. This function only works if color-scheme: light dark is set on the :root element.
2024-07-27 22:59:56 -07:00
color: var(--text-color-secondary);
General figure and list element styles
2024-07-23 08:55:59 -07:00
font-weight: normal;
font-size: var(--text-xs);
letter-spacing: 0.01em;
grid-column: main-start / main-end;
}
Reference in a new issue Copy permalink