fix: refine footer logo scaling rules

fluid-project · Apr 27, 2022 · 6c4a8a6 · 6c4a8a6
1 parent 127106b
commit 6c4a8a6
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git a/src/_includes/partials/components/logos.njk b/src/_includes/partials/components/logos.njk
@@ -1,6 +1,10 @@
 <div class="logos">
-    {%- svg_sprite "logo-hewlett" -%}
-    {%- svg_sprite "logo-floe" -%}
-    {%- svg_sprite "logo-idrc-wordmark" -%}
-    {%- svg_sprite "logo-ocadu" -%}
+    <div class="logos__group">
+        {%- svg_sprite "logo-hewlett" -%}
+        {%- svg_sprite "logo-floe" -%}
+    </div>
+    <div class="logos__group">
+        {%- svg_sprite "logo-idrc-wordmark" -%}
+        {%- svg_sprite "logo-ocadu" -%}
+    </div>
 </div>
diff --git a/src/assets/styles/components/_logos.scss b/src/assets/styles/components/_logos.scss
@@ -2,13 +2,20 @@
     display: flex;
     flex-wrap: wrap;
     gap: 2rem;
-    justify-content: space-around;
+
+    svg {
+        display: inline-block;
+        fill: $footerColour;
+        height: 3rem;
+        max-width: 100%;
+    }
 }
 
-.logos svg {
-    display: block;
-    fill: $footerColour;
-    height: 3rem;
+.logos__group {
+    display: flex;
+    flex: 1 1 47%;
+    gap: 2rem;
+    justify-content: space-around;
     max-width: 100%;
 }