xarxaprod-wp-theme/sass/components/media/_galleries.scss

95 lines
1.8 KiB
SCSS
Raw Normal View History

2024-01-09 16:13:20 +01:00
.gallery {
margin-bottom: 1.5em;
display: grid;
grid-gap: $grid__gap;
2024-01-09 16:13:20 +01:00
}
.gallery-item {
display: inline-block;
text-align: center;
width: 100%;
}
// Loops to enumerate the classes for gallery columns.
@for $i from 2 through 9 {
.gallery-columns-#{$i} {
grid-template-columns: repeat($i, 1fr);
}
}
.gallery-caption {
display: block;
}
// carousel
//.xarxaprod-associat-gallery-images { //section
// .xarxaprod-associat-slides-nav{ //navigation
// }
// .xarxaprod-associat-slides { //the slides
// > .xarxaprod-associat-image { //each slide
// img {
// }
// p{
// }
// }
// }
//}
// carousel v01
// https://css-tricks.com/how-to-make-a-css-only-carousel/
.xarxaprod-associat-gallery-images { //section
--this-aspect-ratio: 16 / 9;
display: grid;
//grid-template-rows: 6fr 1fr; //no need to impose height, it will auto adapt
grid-gap: $grid__gap;
overflow: hidden;
.xarxaprod-associat-slides-nav{ //navigation
display: flex;
2024-04-01 11:54:19 +02:00
//height: 4rem;
grid-row-start: 2;
overflow-x: scroll;
overflow-y: hidden;
a {
aspect-ratio: var(--this-aspect-ratio);
margin-right: 0.5rem;
}
img {
aspect-ratio: var(--this-aspect-ratio);
object-fit: cover;
height: 100%;
width: auto;
}
}
.xarxaprod-associat-slides { //the slides
overflow-x: scroll;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
display: flex;
aspect-ratio: var(--this-aspect-ratio);
.xarxaprod-associat-image { //each slide
position: relative;
margin: 0;
min-width: 100%;
img {
display: block;
max-width: 100%;
width: 100%;
min-height: 100%;
scroll-snap-align: start;
object-fit: cover;
}
p{
position: absolute;
bottom: 1rem;
left: 1rem;
backdrop-filter: blur(5px);
padding: 0.5rem;
}
}
}
}