mxmehl/hugo-snap-gallery
1
0
Fork 0
Code Issues 2 Pull Requests Releases 2 Wiki Activity

add caption on slideshow and lightbox

Browse Source
This commit is contained in:
Max Mehl
2024-02-07 21:32:54 +01:00
parent 30f01d96ec
commit c3935f1924
3 changed files with 42 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
assets/scss/snap-gallery.scss
View File

@@ -82,7 +82,12 @@ $gap: var(--gap);
/* stretch line height */
height: 100%;
}
}
// Disable cursor selection in lightbox and on slideshow, especially controls
.snap-lightbox,
.snap-slideshow {
user-select: none;
}
// /* Click on the complete background closes the lightbox */
@@ -123,17 +128,37 @@ $gap: var(--gap);
}
}
/* Number text (1/3 etc) */
.snap-lightbox,
.snap-slideshow {
user-select: none;
/* Number text (1/3 etc) and captions*/
.snap-numbertext {
position: absolute;
color: #f2f2f2;
background-color: #000;
font-size: 12px;
padding: 8px 12px;
}
.numbertext {
color: #f2f2f2;
background-color: #000;
font-size: 12px;
padding: 8px 12px;
.snap-caption {
bottom: 0;
color: #f2f2f2;
padding: 8px 0;
left: 10%;
width: 80%;
text-shadow: 1px 1px 10px #000;
font-weight: 700;
font-size: 1.1em;
text-align: center;
// As slideshow, position on picture on mid-screens and wider
.snap-slideshow & {
position: absolute;
@media screen and (max-width: 767px) {
display: none;
}
}
// In lightbox, always show below picture
.snap-lightbox & {
position: relative;
}
}