feat: SHIMMER - Update all post header images to use aspect ratio 16:9 (

#53) * feat: use aspect-ratio 16/9 * fix: featured slider aspect ratio * fix safari aspect ratio
boxfish-studio · Jul 28, 2023 · e5e5bc4 · e5e5bc4
1 parent 98eb699
commit e5e5bc4
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 6 deletions.
diff --git a/src/sass/components/articles/_article-card.scss b/src/sass/components/articles/_article-card.scss
@@ -92,7 +92,21 @@
     background-color: var(--background-color);
     overflow: hidden;
     width: 100%;
-    padding-bottom: 50%;
+    aspect-ratio: 16/9;
+}
+
+@supports not (aspect-ratio: 16/9) {
+    .m-article-card__picture {
+        width: 100%;
+        overflow: hidden;
+    }
+
+    .m-article-card__picture{
+        content: "";
+        display: block;
+        padding-top: 56.25%;
+    }
+
 }
 
 .m-article-card__picture-link {

diff --git a/src/sass/components/articles/_featured-slider.scss b/src/sass/components/articles/_featured-slider.scss
@@ -1,7 +1,7 @@
 .m-featured-slider {
     position: relative;
     overflow: hidden !important;
-    height: 350px;
+    height: calc(100vw * 9 / 16);
     margin: -40px -#{$mobile-space} 40px;
     @include transition(all 0.25s cubic-bezier(0.02, 0.01, 0.47, 1));
     @include bs(var(--article-shadow-normal));
@@ -14,14 +14,14 @@
     }
 
     @include respond-to('medium') {
-        width: 100%;
+        width: calc(420px * 16 / 9);
         height: 420px;
         margin: -40px 10px 20px 10px;
         border-radius: 0px;
     }
 
     @include respond-to('large') {
-        width: calc(100% - (100% / 3) - 40px);
+        width: calc(420px * 16 / 9);
         margin: 0 20px 40px 20px;
         overflow: unset;
     }

diff --git a/src/sass/post.scss b/src/sass/post.scss
@@ -22,8 +22,7 @@
 
 .post-template .m-hero.with-picture {
     min-height: unset;
-    padding: 0;
-    padding-bottom: 45%;
+    aspect-ratio: 16/9;
     margin-top: 50px;
 }
 
@@ -33,6 +32,24 @@
     }
 }
 
+@supports not (aspect-ratio: 16/9) {
+    .post-template .m-hero.with-picture {
+        width: 100%;
+        overflow: hidden;
+    }
+
+    .post-template .m-hero.with-picture{
+        content: "";
+        display: block;
+        padding-top: 56.25%;
+    }
+
+    .post-template .m-hero.with-picture img {
+        object-fit: fill;
+    }
+
+}
+
 .disclamer-deprecated-post {
     margin: 30px 0;
     padding: 15px 20px;