From f68ba3a3ac6b293c7555d8f5dd93e1aeef68987c Mon Sep 17 00:00:00 2001
From: alexisben <alex@noesya.coop>
Date: Mon, 9 Jan 2023 14:57:31 +0100
Subject: [PATCH] add old safari support
---
assets/sass/_theme/_utils.sass | 22 +++++++++-------------
assets/sass/_theme/blocks/gallery.sass | 2 ++
assets/sass/_theme/blocks/video.sass | 3 +++
3 files changed, 14 insertions(+), 13 deletions(-)
diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass
index 8a86b7bf..c0efe6eb 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 8e9fa3fe..40e7d6f4 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 a0b54ca8..4052c174 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
--
GitLab