docs(logo-wall): use container queries, fix overflow (#1800)

Co-authored-by: Steven Spriggs <[email protected]> Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>
RedHat-UX · Sep 8, 2024 · 90ab2dd · 90ab2dd
1 parent 18bc59f
commit 90ab2dd
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 113 deletions.
diff --git a/docs/patterns/logo-wall/logo-wall-lightdom.css b/docs/patterns/logo-wall/logo-wall-lightdom.css
@@ -1,12 +1,18 @@
 :root {
+  --logo-wall-container-max-width: 1070px;
   --logo-wall-logo-max-height: 40px;
   --logo-wall-logo-min-height: 40px;
   --logo-wall-logo-max-width: 190px;
   --logo-wall-logo-min-width: 130px;
 }
 
+.logo-wall-container {
+  container: logo-wall-container / inline-size;
+}
+
 .logo-wall {
   display: flex;
+  flex-wrap: wrap;
   gap: var(--rh-space-2xl, 32px);
   justify-content: center;
 }
@@ -80,36 +86,33 @@
   outline-offset: 0;
 }
 
-.logo-wall--two-columns {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-}
-
+.logo-wall--two-columns,
 .logo-wall--three-columns {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
 }
 
-@media (max-width: 1199px) {
-  .logo-wall {
-    flex-wrap: wrap;
+@container logo-wall-container (min-width: 300px) {
+  .logo-wall--two-columns,
+  .logo-wall--three-columns {
+    grid-template-columns: repeat(2, 1fr);
   }
 }
 
-@container host (max-width: 992px) {
-  .logo-wall {
-    flex-wrap: wrap;
+@container logo-wall-container (min-width: 450px) {
+  .logo-wall--three-columns {
+    grid-template-columns: repeat(3, 1fr);
   }
 }
 
-@media (max-width: 768px) {
-  .logo-wall--three-columns {
-    grid-template-columns: repeat(auto-fill, minmax(var(--logo-wall-logo-min-width), 1fr)) !important;
+@container logo-wall-container (min-width: 992px) {
+  .logo-wall {
+    flex-wrap: nowrap;
+    max-width: var(--logo-wall-container-max-width, 1070px);
   }
 }
 
-@container host (max-width: 768px) {
-  .logo-wall--three-columns {
-    grid-template-columns: repeat(auto-fill, minmax(var(--logo-wall-logo-min-width), 1fr)) !important;
+@container logo-wall-container (min-width: 1200px) {
+  .logo-wall {
+    max-width: none;
   }
 }
diff --git a/docs/patterns/logo-wall/patterns/1x1-grid-flat.html b/docs/patterns/logo-wall/patterns/1x1-grid-flat.html
@@ -1,33 +1,35 @@
 <div class="example-1x1-grid-flat">
   <h6>Organizations succeeding with Red Hat</h6>
-  <div class="logo-wall logo-wall--borderless">
-    <a href="#">
-      <img src="../google-cloud.svg" class="logo-wall--light" alt="Logo for Red Hat partner Google Cloud">
-      <img src="../google-cloud-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Google Cloud">
-    </a>
-    <a href="#">
-      <img src="../capgemini.svg" class="logo-wall--light" alt="Logo for Red Hat partner Capgemini">
-      <img src="../capgemini.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Capgemini">
-    </a>
-    <a href="#">
-      <img src="../cisco.svg" class="logo-wall--light" alt="Logo for Red Hat partner Cisco">
-      <img src="../cisco.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Cisco">
-    </a>
-    <a href="#">
-      <img src="../gitlab.svg" class="logo-wall--light" alt="Logo for Red Hat partner Gitlab">
-      <img src="../gitlab-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Gitlab">
-    </a>
-    <a href="#">
-      <img src="../aws.svg" class="logo-wall--light" alt="Logo for Red Hat partner Amazon web services">
-      <img src="../aws-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Amazon web services">
-    </a>
-    <a href="#">
-      <img src="../microsoft.svg" class="logo-wall--light" alt="Logo for Red Hat partner Microsoft">
-      <img src="../microsoft-azure-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Microsoft">
-    </a>
+  <div class="logo-wall-container">
+    <div class="logo-wall logo-wall--borderless">
+      <a href="#">
+        <img src="../google-cloud.svg" class="logo-wall--light" alt="Logo for Red Hat partner Google Cloud">
+        <img src="../google-cloud-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Google Cloud">
+      </a>
+      <a href="#">
+        <img src="../capgemini.svg" class="logo-wall--light" alt="Logo for Red Hat partner Capgemini">
+        <img src="../capgemini.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Capgemini">
+      </a>
+      <a href="#">
+        <img src="../cisco.svg" class="logo-wall--light" alt="Logo for Red Hat partner Cisco">
+        <img src="../cisco.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Cisco">
+      </a>
+      <a href="#">
+        <img src="../gitlab.svg" class="logo-wall--light" alt="Logo for Red Hat partner Gitlab">
+        <img src="../gitlab-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Gitlab">
+      </a>
+      <a href="#">
+        <img src="../aws.svg" class="logo-wall--light" alt="Logo for Red Hat partner Amazon web services">
+        <img src="../aws-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Amazon web services">
+      </a>
+      <a href="#">
+        <img src="../microsoft.svg" class="logo-wall--light" alt="Logo for Red Hat partner Microsoft">
+        <img src="../microsoft-azure-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Microsoft">
+      </a>
+    </div>
+    <rh-cta href="#">See all customer stories</rh-cta>
+    </div>
   </div>
-  <rh-cta href="#">See all customer stories</rh-cta>
-</div>
 
 <link rel="stylesheet" href="../logo-wall-lightdom.css">
 

diff --git a/docs/patterns/logo-wall/patterns/1x1-grid.html b/docs/patterns/logo-wall/patterns/1x1-grid.html
@@ -1,32 +1,34 @@
 <div class="example-1x1-grid">
   <h6>Organizations succeeding with Red Hat</h6>
-  <div class="logo-wall logo-wall--bordered">
-    <a href="#">
-      <img src="../google-cloud.svg" class="logo-wall--light" alt="Logo for Red Hat partner Google Cloud">
-      <img src="../google-cloud-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Google Cloud">
-    </a>
-    <a href="#">
-      <img src="../capgemini.svg" class="logo-wall--light" alt="Logo for Red Hat partner Capgemini">
-      <img src="../capgemini.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Capgemini">
-    </a>
-    <a href="#">
-      <img src="../cisco.svg" class="logo-wall--light" alt="Logo for Red Hat partner Cisco">
-      <img src="../cisco.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Cisco">
-    </a>
-    <a href="#">
-      <img src="../gitlab.svg" class="logo-wall--light" alt="Logo for Red Hat partner Gitlab">
-      <img src="../gitlab-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Gitlab">
-    </a>
-    <a href="#">
-      <img src="../aws.svg" class="logo-wall--light" alt="Logo for Red Hat partner Amazon web services">
-      <img src="../aws-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Amazon web services">
-    </a>
-    <a href="#">
-      <img src="../microsoft.svg" class="logo-wall--light" alt="Logo for Red Hat partner Microsoft">
-      <img src="../microsoft-azure-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Microsoft">
-    </a>
+  <div class="logo-wall-container">
+    <div class="logo-wall logo-wall--bordered">
+      <a href="#">
+        <img src="../google-cloud.svg" class="logo-wall--light" alt="Logo for Red Hat partner Google Cloud">
+        <img src="../google-cloud-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Google Cloud">
+      </a>
+      <a href="#">
+        <img src="../capgemini.svg" class="logo-wall--light" alt="Logo for Red Hat partner Capgemini">
+        <img src="../capgemini.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Capgemini">
+      </a>
+      <a href="#">
+        <img src="../cisco.svg" class="logo-wall--light" alt="Logo for Red Hat partner Cisco">
+        <img src="../cisco.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Cisco">
+      </a>
+      <a href="#">
+        <img src="../gitlab.svg" class="logo-wall--light" alt="Logo for Red Hat partner Gitlab">
+        <img src="../gitlab-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Gitlab">
+      </a>
+      <a href="#">
+        <img src="../aws.svg" class="logo-wall--light" alt="Logo for Red Hat partner Amazon web services">
+        <img src="../aws-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Amazon web services">
+      </a>
+      <a href="#">
+        <img src="../microsoft.svg" class="logo-wall--light" alt="Logo for Red Hat partner Microsoft">
+        <img src="../microsoft-azure-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Microsoft">
+      </a>
+    </div>
+    <rh-cta href="#">See all customer stories</rh-cta>
   </div>
-  <rh-cta href="#">See all customer stories</rh-cta>
 </div>
 
 <link rel="stylesheet" href="../logo-wall-lightdom.css">

diff --git a/docs/patterns/logo-wall/patterns/2x2-grid.html b/docs/patterns/logo-wall/patterns/2x2-grid.html
@@ -4,23 +4,25 @@ <h4>Need a business partner?</h4>
     <p>In the digital transformation journey we’re on, there’s a lot of change. There’s a need to reach markets quickly. And to do that we need productive developers who are able to get ideas into production safely, in a day, every day. </p>
     <rh-cta variant="primary" href="#">Find a business partner</rh-cta>
   </div>
-  <div class="logo-wall logo-wall--two-columns logo-wall--bordered">
-    <a href="#">
-      <img src="../google-cloud.svg" class="logo-wall--light" alt="Logo for Red Hat partner Google Cloud">
-      <img src="../google-cloud-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Google Cloud">
-    </a>
-    <a href="#">
-      <img src="../capgemini.svg" class="logo-wall--light" alt="Logo for Red Hat partner Capgemini">
-      <img src="../capgemini.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Capgemini">
-    </a>
-    <a href="#">
-      <img src="../cisco.svg" class="logo-wall--light" alt="Logo for Red Hat partner Cisco">
-      <img src="../cisco.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Cisco">
-    </a>
-    <a href="#">
-      <img src="../gitlab.svg" class="logo-wall--light" alt="Logo for Red Hat partner Gitlab">
-      <img src="../gitlab-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Gitlab">
-    </a>
+  <div class="logo-wall-container">
+    <div class="logo-wall logo-wall--two-columns logo-wall--bordered">
+      <a href="#">
+        <img src="../google-cloud.svg" class="logo-wall--light" alt="Logo for Red Hat partner Google Cloud">
+        <img src="../google-cloud-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Google Cloud">
+      </a>
+      <a href="#">
+        <img src="../capgemini.svg" class="logo-wall--light" alt="Logo for Red Hat partner Capgemini">
+        <img src="../capgemini.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Capgemini">
+      </a>
+      <a href="#">
+        <img src="../cisco.svg" class="logo-wall--light" alt="Logo for Red Hat partner Cisco">
+        <img src="../cisco.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Cisco">
+      </a>
+      <a href="#">
+        <img src="../gitlab.svg" class="logo-wall--light" alt="Logo for Red Hat partner Gitlab">
+        <img src="../gitlab-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Gitlab">
+      </a>
+    </div>
   </div>
 </div>
 

diff --git a/docs/patterns/logo-wall/patterns/2x3-grid.html b/docs/patterns/logo-wall/patterns/2x3-grid.html
@@ -4,31 +4,33 @@ <h4>Need a business partner?</h4>
     <p>In the digital transformation journey we’re on, there’s a lot of change. There’s a need to reach markets quickly. And to do that we need productive developers who are able to get ideas into production safely, in a day, every day. </p>
     <rh-cta variant="primary" href="#">Find a business partner</rh-cta>
   </div>
-  <div class="logo-wall logo-wall--three-columns logo-wall--bordered">
-    <a href="#">
-      <img src="../google-cloud.svg" class="logo-wall--light" alt="Logo for Red Hat partner Google Cloud">
-      <img src="../google-cloud-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Google Cloud">
-    </a>
-    <a href="#">
-      <img src="../capgemini.svg" class="logo-wall--light" alt="Logo for Red Hat partner Capgemini">
-      <img src="../capgemini.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Capgemini">
-    </a>
-    <a href="#">
-      <img src="../cisco.svg" class="logo-wall--light" alt="Logo for Red Hat partner Cisco">
-      <img src="../cisco.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Cisco">
-    </a>
-    <a href="#">
-      <img src="../gitlab.svg" class="logo-wall--light" alt="Logo for Red Hat partner Gitlab">
-      <img src="../gitlab-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Gitlab">
-    </a>
-    <a href="#">
-      <img src="../aws.svg" class="logo-wall--light" alt="Logo for Red Hat partner Amazon web services">
-      <img src="../aws-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Amazon web services">
-    </a>
-    <a href="#">
-      <img src="../microsoft.svg" class="logo-wall--light" alt="Logo for Red Hat partner Microsoft">
-      <img src="../microsoft-azure-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Microsoft">
-    </a>
+  <div class="logo-wall-container">
+    <div class="logo-wall logo-wall--three-columns logo-wall--bordered">
+      <a href="#">
+        <img src="../google-cloud.svg" class="logo-wall--light" alt="Logo for Red Hat partner Google Cloud">
+        <img src="../google-cloud-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Google Cloud">
+      </a>
+      <a href="#">
+        <img src="../capgemini.svg" class="logo-wall--light" alt="Logo for Red Hat partner Capgemini">
+        <img src="../capgemini.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Capgemini">
+      </a>
+      <a href="#">
+        <img src="../cisco.svg" class="logo-wall--light" alt="Logo for Red Hat partner Cisco">
+        <img src="../cisco.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Cisco">
+      </a>
+      <a href="#">
+        <img src="../gitlab.svg" class="logo-wall--light" alt="Logo for Red Hat partner Gitlab">
+        <img src="../gitlab-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Gitlab">
+      </a>
+      <a href="#">
+        <img src="../aws.svg" class="logo-wall--light" alt="Logo for Red Hat partner Amazon web services">
+        <img src="../aws-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Amazon web services">
+      </a>
+      <a href="#">
+        <img src="../microsoft.svg" class="logo-wall--light" alt="Logo for Red Hat partner Microsoft">
+        <img src="../microsoft-azure-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Microsoft">
+      </a>
+    </div>
   </div>
 </div>