diff --git a/assets/sass/_theme/blocks/gallery.sass b/assets/sass/_theme/blocks/gallery.sass index 7c25fd864b57e8b9c02c53fd750d5790fb28f0f5..756fbd780d9e38f8bb34702be038e7ec45f5c199 100644 --- a/assets/sass/_theme/blocks/gallery.sass +++ b/assets/sass/_theme/blocks/gallery.sass @@ -1,84 +1,93 @@ -// .block-gallery -// .top -// .description -// @extend .col-md-7 -// @include media-breakpoint-down(md) -// margin-top: 2rem +.block-gallery + .top + @include grid(2, md) + align-items: center + .description + width: col(7) + // @extend .col-md-7 + // @include media-breakpoint-down(md) + // margin-top: 2rem -// .gallery -// --bs-gutter-y: 2rem -// @extend .row -// > * -// @extend .col-md-6 -// @extend .col-lg-4 + figure + margin-bottom: 0 + > a, + > picture + // @extend .figure-img + display: block -// figure -// margin-bottom: 0 -// > a, -// > picture -// @extend .figure-img -// display: block + > a + transition: opacity .3s ease + &:hover + opacity: .7 -// > a -// transition: opacity .3s ease -// &:hover -// opacity: .7 + picture + display: block -// picture -// display: block + img + height: auto + width: 100% -// img -// height: auto -// width: 100% + figcaption + position: relative + @include media-breakpoint-up(md) + align-items: baseline + display: flex + justify-content: space-between + p + margin-bottom: 0 + .credit + font-size: $small-font-size -// figcaption -// position: relative -// @include media-breakpoint-up(md) -// align-items: baseline -// display: flex -// justify-content: space-between -// p -// margin-bottom: 0 -// .credit -// @extend .small + &--grid + .gallery + @include grid(3) -// &--carousel -// .container -// padding-right: 0 -// .splide -// display: flex -// flex-direction: column -// &__slide -// flex-shrink: initial + &--carousel + .container + padding-right: 0 + .splide + display: flex + flex-direction: column + &__slide + flex-shrink: initial -// figure -// // max-width: 80% -// &:last-of-type -// max-width: 100% -// padding-right: 20% -// img -// height: 50vw -// width: auto -// @include media-breakpoint-up(md) -// height: 100% -// max-height: 45vh -// min-height: 400px -// @media (min-height: 800px) -// height: 680px -// max-height: 100% -// p -// @media (min-height: 800px) -// font-size: px2rem(16) -// &__arrows -// margin-left: -13px -// order: 2 -// padding-top: $grid-gutter-width -// @media (min-height: 800px) -// padding-top: px2rem(40) -// &__arrow -// &--prev, -// &--next -// height: 48px -// padding: 0 -// position: static -// width: 48px + figure + max-width: 80% + min-width: 80% // to check + @include in-page-without-aside + min-width: 50% + &:last-of-type + max-width: 100% + padding-right: 20% + img + height: 50vw + width: auto + @include media-breakpoint-up(md) + height: 100% + max-height: 45vh + min-height: 400px + @media (min-height: 800px) + height: 680px + max-height: 100% + p + @media (min-height: 800px) + font-size: px2rem(16) + &__arrows + margin-left: -13px + order: 2 + // padding-top: $grid-gutter-width + @media (min-height: 800px) + padding-top: px2rem(40) + &__arrow + &--prev, + &--next + @include button-reset + @include icon("arrow-left", before) + height: 48px + padding: 0 + position: static + width: 48px + svg + display: none + &--next + @include icon("arrow-right", before)