diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass index 2196aae33..1152ae7a3 100644 --- a/assets/sass/_theme/_utils.sass +++ b/assets/sass/_theme/_utils.sass @@ -91,6 +91,24 @@ top: 0 z-index: $zindex-stretched-link +@mixin aspect-ratio($width, $height, $selector: 'iframe') + #{$selector} + aspect-ratio: #{$width}/#{$height} + display: block + width: 100% + @supports not (aspect-ratio: 1) + position: relative + &::before + content: '' + padding-top: ($height / $width) * 100% + width: 100% + #{$selector} + bottom: 0 + left: 0 + position: absolute + right: 0 + top: 0 + @mixin button-reset appearance: none background: transparent diff --git a/assets/sass/_theme/blocks/video.sass b/assets/sass/_theme/blocks/video.sass index b328a1980..1584b3651 100644 --- a/assets/sass/_theme/blocks/video.sass +++ b/assets/sass/_theme/blocks/video.sass @@ -1,37 +1,13 @@ -// .block-video -// iframe -// aspect-ratio: 16/9 -// display: block -// width: 100% +/* TODO : https://developer.mozilla.org/fr/docs/Web/HTML/Element/details */ -// @supports not (aspect-ratio: 16/9) -// .video -// position: relative -// &::before -// content: '' -// display: block -// padding-top: 56.25% -// iframe -// bottom: 0 -// height: 100% -// left: 0 -// position: absolute -// top: 0 -// width: 100% +.block-video + .video + @include aspect-ratio(16, 9, 'iframe') + .transcription + margin-top: $spacing1 -// @include media-breakpoint-down(md) -// .container -// padding-left: 0 -// padding-right: 0 -// .transcription -// padding-left: $grid-gutter-width -// padding-right: $grid-gutter-width - -// @include media-breakpoint-up(md) -// @include in-page-without-aside -// .block-content -// @include make-row() -// > * -// @include make-col-ready() -// @include make-col(8) -// @include make-col-offset(2) + @include media-breakpoint-up(md) + @include in-page-without-aside + .block-content + margin-left: col(2) + width: col(8) diff --git a/assets/sass/_theme/design-system/a11y.sass b/assets/sass/_theme/design-system/a11y.sass index db065f8e1..24b7c0d39 100644 --- a/assets/sass/_theme/design-system/a11y.sass +++ b/assets/sass/_theme/design-system/a11y.sass @@ -17,4 +17,4 @@ @include button-reset &::after font-size: px2rem(5) - line-height: px2rem(22) \ No newline at end of file + line-height: px2rem(22) diff --git a/assets/sass/_theme/design-system/transcription.sass b/assets/sass/_theme/design-system/transcription.sass new file mode 100644 index 000000000..b6137c3de --- /dev/null +++ b/assets/sass/_theme/design-system/transcription.sass @@ -0,0 +1,2 @@ +.transcription + margin-top: $spacing1