From 1406a9be3b0e30c0aefde30e9604df5e195f69b7 Mon Sep 17 00:00:00 2001 From: sebousan Date: Mon, 25 Jul 2022 10:23:36 +0200 Subject: [PATCH 1/6] add aspect-ratio mixin --- assets/sass/_theme/_utils.sass | 17 ++++++++++ assets/sass/_theme/blocks/video.sass | 47 +++++++--------------------- 2 files changed, 29 insertions(+), 35 deletions(-) diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass index 9b1259b63..f559a2704 100644 --- a/assets/sass/_theme/_utils.sass +++ b/assets/sass/_theme/_utils.sass @@ -90,3 +90,20 @@ z-index: $zindex-stretched-link content: "" +@mixin aspect-ratio($width, $height, $tag: 'iframe') + #{$tag} + aspect-ratio: #{$width}/#{$height} + display: block + width: 100% + @supports not (aspect-ratio: 1) + position: relative + &::before + content: '' + padding-top: ($height / $width) * 100% + width: 100% + #{$tag} + bottom: 0 + left: 0 + position: absolute + right: 0 + top: 0 diff --git a/assets/sass/_theme/blocks/video.sass b/assets/sass/_theme/blocks/video.sass index b328a1980..5981c47d6 100644 --- a/assets/sass/_theme/blocks/video.sass +++ b/assets/sass/_theme/blocks/video.sass @@ -1,37 +1,14 @@ -// .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') -// @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 + // @include make-row() + // > * + // @include make-col-ready() + // @include make-col(8) + // @include make-col-offset(2) From 7093c055015eb888f7b3bdabc907e8f96403ea0f Mon Sep 17 00:00:00 2001 From: sebousan Date: Mon, 25 Jul 2022 10:24:54 +0200 Subject: [PATCH 2/6] add transcrition file --- assets/sass/_theme/design-system/transcription.sass | 2 ++ assets/sass/_theme/hugo-osuny.sass | 1 + 2 files changed, 3 insertions(+) create mode 100644 assets/sass/_theme/design-system/transcription.sass 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 diff --git a/assets/sass/_theme/hugo-osuny.sass b/assets/sass/_theme/hugo-osuny.sass index 97f4b4d60..3cadd887c 100644 --- a/assets/sass/_theme/hugo-osuny.sass +++ b/assets/sass/_theme/hugo-osuny.sass @@ -20,6 +20,7 @@ @import "design-system/hero" @import "design-system/nav" @import "design-system/table" +@import "design-system/transcription" @import "design-system/typography" // Blocks From ad1f11db38e7a8b2af09e2e265908e5c0c1d23b5 Mon Sep 17 00:00:00 2001 From: sebousan Date: Mon, 25 Jul 2022 10:27:56 +0200 Subject: [PATCH 3/6] without aside --- assets/sass/_theme/blocks/video.sass | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/assets/sass/_theme/blocks/video.sass b/assets/sass/_theme/blocks/video.sass index 5981c47d6..df38eba1f 100644 --- a/assets/sass/_theme/blocks/video.sass +++ b/assets/sass/_theme/blocks/video.sass @@ -4,11 +4,8 @@ .video @include aspect-ratio(16, 9, 'iframe') - // @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) From bb48cd630a8a0ef426780b2020effcb396f356ab Mon Sep 17 00:00:00 2001 From: sebousan Date: Mon, 25 Jul 2022 11:33:14 +0200 Subject: [PATCH 4/6] move transciption --- assets/sass/_theme/blocks/video.sass | 2 ++ assets/sass/_theme/design-system/a11y.sass | 2 +- assets/sass/_theme/hugo-osuny.sass | 1 - 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/assets/sass/_theme/blocks/video.sass b/assets/sass/_theme/blocks/video.sass index df38eba1f..c797d75e3 100644 --- a/assets/sass/_theme/blocks/video.sass +++ b/assets/sass/_theme/blocks/video.sass @@ -3,6 +3,8 @@ .block-video .video @include aspect-ratio(16, 9, 'iframe') + & + .transcription + margin-top: $spacing1 @include media-breakpoint-up(md) @include in-page-without-aside 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/hugo-osuny.sass b/assets/sass/_theme/hugo-osuny.sass index 78eb47bfc..f742f0770 100644 --- a/assets/sass/_theme/hugo-osuny.sass +++ b/assets/sass/_theme/hugo-osuny.sass @@ -21,7 +21,6 @@ @import "design-system/nav" @import "design-system/table" @import "design-system/table_of_content" -@import "design-system/transcription" @import "design-system/typography" // Blocks From 718cdb6ba281adbe43fb8b30b2df18ee0867d0f8 Mon Sep 17 00:00:00 2001 From: sebousan Date: Mon, 25 Jul 2022 11:57:39 +0200 Subject: [PATCH 5/6] transcription margin --- assets/sass/_theme/blocks/video.sass | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/sass/_theme/blocks/video.sass b/assets/sass/_theme/blocks/video.sass index c797d75e3..1584b3651 100644 --- a/assets/sass/_theme/blocks/video.sass +++ b/assets/sass/_theme/blocks/video.sass @@ -3,8 +3,8 @@ .block-video .video @include aspect-ratio(16, 9, 'iframe') - & + .transcription - margin-top: $spacing1 + .transcription + margin-top: $spacing1 @include media-breakpoint-up(md) @include in-page-without-aside From 98ad3035170fb6f411156a0dd2f331c37eddb7bf Mon Sep 17 00:00:00 2001 From: sebousan Date: Mon, 25 Jul 2022 12:26:44 +0200 Subject: [PATCH 6/6] rename third argument to $selector --- assets/sass/_theme/_utils.sass | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass index 0d88fd6a3..1152ae7a3 100644 --- a/assets/sass/_theme/_utils.sass +++ b/assets/sass/_theme/_utils.sass @@ -91,8 +91,8 @@ top: 0 z-index: $zindex-stretched-link -@mixin aspect-ratio($width, $height, $tag: 'iframe') - #{$tag} +@mixin aspect-ratio($width, $height, $selector: 'iframe') + #{$selector} aspect-ratio: #{$width}/#{$height} display: block width: 100% @@ -102,7 +102,7 @@ content: '' padding-top: ($height / $width) * 100% width: 100% - #{$tag} + #{$selector} bottom: 0 left: 0 position: absolute