45 lines
1.7 KiB
CSS
45 lines
1.7 KiB
CSS
/*
|
|
██████ █████ ██ ██ ███████ ██████ ██ ██ ██████ ██████ ██ ██
|
|
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
|
|
██ ███ ███████ ██ ██ █████ ██████ ████ ██████ ██ ██ ███
|
|
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
|
|
██████ ██ ██ ███████ ███████ ███████ ██ ██ ██ ██████ ██████ ██ ██
|
|
|
|
A pure css gallery, made with a bunch of wonderful hacks! Will be upgraded to
|
|
be (slightly) less hacky once :target-within lands in browsers.
|
|
|
|
Exported to codepen: https://codepen.io/sbrl/details/YzZJYxg
|
|
*/
|
|
|
|
:root {
|
|
--gallerybox-bg: hsla(0, 0%, 95%, 0.75);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--gallerybox-bg: hsla(0, 0%, 30%, 0.75);
|
|
}
|
|
}
|
|
|
|
.gallery {
|
|
position: relative; /* to make the figcaption snap to the right place */
|
|
/*
|
|
The <picture /> element causes a small amount of extra padding at the
|
|
bottom of the element, so we use this to balance out the look at the top
|
|
ideally we'd shift the <picture> out of the way, but we can't without also
|
|
shifting the <img /> inside
|
|
*/
|
|
padding: 1em 0;
|
|
}
|
|
|
|
.gallery-item {
|
|
margin: 0;
|
|
}
|
|
|
|
.gallery-item > figcaption {
|
|
background: var(--gallerybox-bg);
|
|
position: absolute;
|
|
bottom: 0.25em; left: 0; right: 0;
|
|
padding: 0.75em 1em;
|
|
text-align: center;
|
|
} |