fix: issues with ratios on homepage

virtualidentityag · Sep 20, 2024 · c0ef921 · c0ef921
1 parent 93a1010
commit c0ef921
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 22 deletions.
diff --git a/src/pages/homepage.twig b/src/pages/homepage.twig
@@ -63,7 +63,7 @@
       }
     %}
 
-    <div class='col-6 mb-3'>
+    <div class='col-lg-6 mb-3'>
       {%
         include 'partials::base/b_card.twig' with {
         'thumbnail': {
@@ -77,7 +77,7 @@
         }
       %}
     </div>
-    <div class='col-6 mb-3'>
+    <div class='col-lg-6 mb-3'>
       {%
         include 'partials::base/b_card.twig' with {
         'thumbnail': {
@@ -91,7 +91,7 @@
         }
       %}
     </div>
-    <div class='col-6 my-3'>
+    <div class='col-lg-6 my-3'>
       {%
         include 'partials::base/b_card.twig' with {
         'thumbnail': {
@@ -105,7 +105,7 @@
         }
       %}
     </div>
-    <div class='col-6 my-3'>
+    <div class='col-lg-6 my-3'>
       {%
         include 'partials::base/b_card.twig' with {
         'thumbnail': {
@@ -119,7 +119,7 @@
         }
       %}
     </div>
-    <div class='col-6 mt-3'>
+    <div class='col-lg-6 mt-3'>
       {%
         include 'partials::base/b_card.twig' with {
         'thumbnail': {
@@ -133,7 +133,7 @@
         }
       %}
     </div>
-    <div class='col-6 mt-3'>
+    <div class='col-lg-6 mt-3'>
       {%
         include 'partials::base/b_card.twig' with {
         'thumbnail': {

diff --git a/src/partials/base/b_hero.twig b/src/partials/base/b_hero.twig
@@ -1,6 +1,8 @@
 {% set type = type is defined ? type : 'default' %}
 <div class='hero hero-{{ type }}'>
   <div class='hero-inner'>
-    <img src='{{ src }}' alt>
+    <div class='hero-inner-ratio'>
+      <img src='{{ src }}' alt>
+    </div>
   </div>
 </div>
diff --git a/src/partials/base/b_tile.twig b/src/partials/base/b_tile.twig
@@ -1,4 +1,5 @@
-<a href='{{ href }}' class='tile ratio ratio-1x1'>
+<a href='{{ href }}' class='tile'>
+  <div class='tile-ratio'></div>
   <div class='d-flex flex-column justify-content-center align-items-center'>
     <i class='bi bi-{{ icon }} fs-1'></i>
     <p>{{ name }}</p>

diff --git a/src/styles/components/_hero.scss b/src/styles/components/_hero.scss
@@ -43,12 +43,29 @@
       aspect-ratio: 21 / 9;
     }
 
-    > img {
-      margin: 0 calc(var(--hero-overflow) * -1);
-      object-fit: cover;
+    &-ratio {
+      position: relative;
       width: 100vw;
       min-width: $body-min-width;
       max-width: calc(100% + var(--hero-overflow) * 2);
+      margin: 0 calc(var(--hero-overflow) * -1);
+      padding-top: 100%;
+
+      @include media-breakpoint-up(sm) {
+        padding-top: (3 / 4) * 100%;
+      }
+
+      @include media-breakpoint-up(lg) {
+        padding-top: (9 / 21) * 100%;
+      }
+    }
+
+    img {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      object-fit: cover;
     }
   }
 }
diff --git a/src/styles/components/_tile.scss b/src/styles/components/_tile.scss
@@ -5,6 +5,18 @@
   --tile-hover-background: var(--primary);
   --tile-hover-color: var(--white);
 
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--tile-background);
+  border: 1px solid var(--tile-border-color);
+  color: var(--tile-color);
+  text-decoration: none;
+  transition:
+    background-color 0.15s,
+    box-shadow 0.15s ease-in-out;
+
   &:hover,
   &:focus {
     --tile-background: var(--tile-hover-background);
@@ -14,19 +26,12 @@
   &:focus,
   &:focus-visible {
     outline: none;
-
-    > div {
-      box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
-    }
+    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
   }
 
-  > div {
-    background-color: var(--tile-background);
-    border: 1px solid var(--tile-border-color);
-    color: var(--tile-color);
-    transition:
-      background-color 0.15s,
-      box-shadow 0.15s ease-in-out;
+  &-ratio {
+    display: block;
+    padding-top: 100%;
   }
 }