From 6e01a95cf216a8faff33edadff6db50500071c8c Mon Sep 17 00:00:00 2001 From: Olivia206 <olivia.simonet@mmibordeaux.com> Date: Fri, 22 Jul 2022 17:23:06 +0200 Subject: [PATCH] Incomplete gallery --- assets/sass/_theme/blocks/gallery.sass | 151 ++++++++++++------------- 1 file changed, 75 insertions(+), 76 deletions(-) diff --git a/assets/sass/_theme/blocks/gallery.sass b/assets/sass/_theme/blocks/gallery.sass index 7c25fd86..996e6ca7 100644 --- a/assets/sass/_theme/blocks/gallery.sass +++ b/assets/sass/_theme/blocks/gallery.sass @@ -1,84 +1,83 @@ -// .block-gallery -// .top -// .description -// @extend .col-md-7 -// @include media-breakpoint-down(md) -// margin-top: 2rem +.block-gallery + .top + @include grid(2, md) + .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% + &: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 -- GitLab