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

make column amount and min-width configurable

Browse Source
This commit is contained in:
Max Mehl
2024-02-01 12:58:00 +01:00
parent 768d77aa8c
commit 200a00602f
2 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,20 +1,21 @@
.snap-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
justify-content: center;
gap: 10px;
}
/* Create equal columns in flexbox */
.snap-image {
// TODO: Make this configurable with variables
width: calc(100% / 4 - 10px);
min-width: 200px;
/* Create equal columns in flexbox */
.snap-image {
img {
aspect-ratio: 16/10;
width: 100%;
object-fit: cover;
/* Column amount and width are configurable by style variables */
width: calc(100% / var(--columns) - 10px);
min-width: var(--min-width);
img {
aspect-ratio: 16/10;
width: 100%;
object-fit: cover;
}
}
}