eryn/erynwells.me
1
0
Fork 0
Code Issues 8 Pull requests 1 Projects Releases Packages Activity Actions

Implement a photo carousel

Browse source 
The layout of this is all CSS with scroll-snap. (Neat!) Also implement a
JavaScript scroll event listener that detects when photos scroll and
updates the caption and photo data.

Refactor a few parts of the photo_exif_table into partials so they can
be reused for the carousel items.
This commit is contained in:
Eryn Wells 2023-04-02 09:56:27 -07:00
parent c256179803
commit 81a5507e8f
7 changed files with 393 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

58
assets/styles/photos.css
View file

@ -5,6 +5,8 @@
--photo-params-container-background-color: rgb(var(--super-lt-gray));
--photo-params-color: rgb(var(--sub-dk-gray));
--photo-params-border-color: rgb(var(--super-lt-gray));
--carousel-gradient-full-opaque: var(--background);
}
@media (prefers-color-scheme: dark) {
:root {
@ -90,6 +92,62 @@
}
}
.photos.page > figure.carousel {
position: relative;
max-width: 100%;
width: 100%;
}
.photos.page > figure.carousel > ul {
align-items: stretch;
display: flex;
flex-flow: row nowrap;
gap: 0 calc(0.5 * var(--body-item-spacing));
margin: 0;
overflow-x: scroll;
scroll-snap-type: x mandatory;
padding: 0;
padding-inline: var(--body-item-spacing);
}
.photos.page > figure.carousel > ul::-webkit-scrollbar {
background: transparent;
width: 0;
}
.photos.page > figure.carousel > .shadow {
position: absolute;
top: 0;
height: 100%;
width: var(--body-item-spacing);
z-index: 10;
}
.photos.page > figure.carousel > .shadow.left {
background: linear-gradient(
to right,
rgba(var(--carousel-gradient-full-opaque), 1),
rgba(var(--carousel-gradient-full-opaque), 0));
left: 0;
}
.photos.page > figure.carousel > .shadow.right {
background: linear-gradient(
to left,
rgba(var(--carousel-gradient-full-opaque), 1),
rgba(var(--carousel-gradient-full-opaque), 0));
right: 0;
}
.photos.page > figure.carousel > ul > li {
scroll-snap-align: center;
margin: 0;
width: var(--content-width);
flex-shrink: 0;
list-style: none;
padding: 0;
}
.photo-params {
width: 100%;
}