140 lines
3.7 KiB
CSS
140 lines
3.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);
|
|
}
|
|
}
|
|
|
|
@media (orientation: landscape) {
|
|
.gallerybox-gallery {
|
|
max-width: 95vw;
|
|
}
|
|
}
|
|
|
|
|
|
.gallerybox {
|
|
display: flex;
|
|
justify-content: center;
|
|
/*
|
|
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-top: 0.2em;
|
|
}
|
|
|
|
.gallerybox-gallery {
|
|
--gallerybox-nextprev-padding: 5vw;
|
|
--gallerybox-nextprev-move: 0.2em;
|
|
--gallerybox-nextprev-hover: 0.1em;
|
|
|
|
max-width: 80vmax;
|
|
|
|
display: grid;
|
|
grid-template-columns: auto;
|
|
grid-template-rows: auto;
|
|
grid-template-areas: "main";
|
|
}
|
|
|
|
/* .gallerybox picture {
|
|
position: relative;
|
|
top: -1em;
|
|
}
|
|
.gallerybox picture > img {
|
|
position: relative;
|
|
top: 1em;
|
|
} */
|
|
|
|
.gallerybox-item {
|
|
grid-area: main;
|
|
z-index: 2;
|
|
}
|
|
|
|
.gallerybox-item > figcaption {
|
|
background: var(--gallerybox-bg);
|
|
position: absolute;
|
|
bottom: 0.25em; left: 0; right: 0;
|
|
padding: 0.75em 1em;
|
|
text-align: center;
|
|
}
|
|
|
|
.gallerybox-gallery > .gallerybox-item:target {
|
|
display: block;
|
|
z-index: 100;
|
|
}
|
|
/* .gallerybox-gallery > .gallerybox-item:not(:target) {
|
|
display: none;
|
|
z-index: 2;
|
|
}
|
|
.gallerybox-item:not(:target) ~ .gallerybox-item:last-child {
|
|
display: block;
|
|
z-index: 2;
|
|
} */
|
|
|
|
/*
|
|
.gallerybox-gallery:target-within > .gallerybox-item:target {
|
|
display: block;
|
|
}
|
|
.gallerybox-gallery:target-within > .gallerybox-item:not(:target) {
|
|
display: none;
|
|
} */
|
|
|
|
|
|
.gallerybox-item {
|
|
position: relative;
|
|
}
|
|
.gallerybox-item img {
|
|
max-width: 100%;
|
|
}
|
|
:where(.gallerybox-prev, .gallerybox-next) {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
position: absolute; top: 0;
|
|
vertical-align: middle;
|
|
font-weight: bold;
|
|
font-size: 4em;
|
|
color: hsla(0, 0%, 100%, 0.8) !important;
|
|
text-decoration: none;
|
|
transform: none;
|
|
transition: transform 0.25s;
|
|
}
|
|
.gallerybox-item > .gallerybox-prev {
|
|
padding-left: var(--gallerybox-nextprev-padding);
|
|
left: 0;
|
|
}
|
|
.gallerybox-item > .gallerybox-next {
|
|
padding-right: var(--gallerybox-nextprev-padding);
|
|
right: 0;
|
|
}
|
|
|
|
|
|
:where(.gallerybox-prev, .gallerybox-next):hover {
|
|
color: hsla(0, 0%, 100%, 1) !important;
|
|
}
|
|
:is(.gallerybox-prev, .gallerybox-next):active {
|
|
color: hsla(0, 0%, 100%, 1) !important;
|
|
}
|
|
.gallerybox-next:hover { transform: translateX(calc(var(--gallerybox-nextprev-hover) * -1)); }
|
|
.gallerybox-prev:hover { transform: translateX(var(--gallerybox-nextprev-hover)); }
|
|
|
|
.gallerybox-prev:active { transform: translateX(calc(var(--gallerybox-nextprev-move) * -1)); }
|
|
.gallerybox-next:active { transform: translateX(var(--gallerybox-nextprev-move)); }
|