diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass index 8a86b7bf470ab874827cab1402d8364d3bbc4f4b..c0efe6eb4b6ba15cff3cc5fd4b2eea5b6ad58c7f 100644 --- a/assets/sass/_theme/_utils.sass +++ b/assets/sass/_theme/_utils.sass @@ -163,18 +163,6 @@ aspect-ratio: #{$ratio} display: block width: 100% - @supports not (aspect-ratio: 1) - position: relative - &::before - content: '' - padding-top: (1 / $ratio) * 100% - width: 100% - #{$selector} - bottom: 0 - left: 0 - position: absolute - right: 0 - top: 0 @mixin article($background: null) position: relative @@ -390,4 +378,12 @@ font-style: $style font-weight: $weight font-display: swap - src: $src \ No newline at end of file + src: $src + + +// Old browsers support + +@mixin browser-under-safari-16 + @media not all and (min-resolution:.001dpcm) + @supports (-webkit-appearance:none) and (display:flow-root) + @content \ No newline at end of file diff --git a/assets/sass/_theme/blocks/gallery.sass b/assets/sass/_theme/blocks/gallery.sass index 8e9fa3fe2d14765597ba9c9413cd0366b0d2c805..40e7d6f416829fe304761ebc683c5f05beb87b3e 100644 --- a/assets/sass/_theme/blocks/gallery.sass +++ b/assets/sass/_theme/blocks/gallery.sass @@ -33,6 +33,8 @@ &--grid .gallery align-items: baseline + @include browser-under-safari-16 + align-items: start @include in-page-with-sidebar @include grid(3, desktop, half($grid-gutter), half($grid-gutter)) @include in-page-without-sidebar diff --git a/assets/sass/_theme/blocks/video.sass b/assets/sass/_theme/blocks/video.sass index a0b54ca88c78376de4df61787b406731820cc104..4052c1745aa36aaced47235e3fefa4cdc276b6db 100644 --- a/assets/sass/_theme/blocks/video.sass +++ b/assets/sass/_theme/blocks/video.sass @@ -1,6 +1,9 @@ .block-video .video @include aspect-ratio(16/9, 'iframe') + @supports not (aspect-ratio: 1) + iframe + min-height: 400px iframe background: black @include in-page-without-sidebar