fix logos and styles

Signed-off-by: Mathew Wicks <[email protected]>

Author: thesuperzapper

assets/scss/_styles_project.scss

@@ -543,37 +543,19 @@ nav.foldable-nav {
     }
   }
 
-  .trusted-logo-light {
+  .adopter-logo {
     pointer-events: none;
-    user-select: none; 
-    max-height: 3rem; 
-    max-width: 12.5rem;
-    object-fit: contain; 
-    display: block !important;
-  }
-
-  .trusted-logo-dark {
-    pointer-events: none;
-    user-select: none; 
-    max-height: 3rem; 
-    max-width: 12.5rem;
-    object-fit: contain; 
-    display: none !important;
-  }
-
-  .trusted-logo-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap; 
-    gap: 3rem;
+    user-select: none;
+    height: 3rem;
+    width: 100%;
   }
 
   .section-head {
     color: $home-section-title-color;
 
     font-size: 1.8rem;
     font-weight: bold;
+    line-height: 1.8;
 
     margin-bottom: 2rem;
     padding-bottom: 1rem;

content/en/_index.html

@@ -43,30 +43,44 @@ <h3 class="section-head">
 <div id="adopters" class="text-center">
   <div class="container">
     <h3 class="section-head">
-      <span class="border-bottom pb-2">Trusted by</span>
+      <span class="border-bottom pb-2">Featured Adopters of Kubeflow</span>
     </h3>
-    <div class="trusted-logo-container">
-      <!-- WARNING: only include logos from organizations which have been approved by the KSC -->
-      <!-- WARNING: only include logos from CNCF Members https://landscape.cncf.io/?group=members -->
-      <img src="/docs/images/logos/Amazon.svg" alt="Amazon-light" class="trusted-logo-light">
-      <img src="/docs/images/logos/Amazon_white.png" alt="Amazon-light" class="trusted-logo-dark">
-      
-      <img src="/docs/images/logos/Nvidia_Logo_1.svg" alt="Nvidia" class="trusted-logo-light">
-      <img src="/docs/images/logos/Nvidia-Logo-White.svg" alt="Nvidia" class="trusted-logo-dark">
+    <div class="mb-5 d-flex flex-wrap align-content-between align-items-center justify-content-center user-select-none">
+      <!-- ====================================================================================== -->
+      <!-- WARNING: logos MUST be approved by the KSC BEFORE being featured on the homepage       -->
+      <!-- WARNING: organizations MUST be listed in at least one adopter file                     -->
+      <!--          https://github.com/kubeflow/community/blob/master/ADOPTERS.md                 -->
+      <!-- WARNING: we only consider logos of CNCF Member organizations for trademark reasons     -->
+      <!--          https://landscape.cncf.io/?group=members&view-mode=card                       -->
+      <!-- ====================================================================================== -->
 
-      <img src="/docs/images/logos/Microsoft_logo.svg" alt="Microsoft" class="trusted-logo-light">
-      <img src="/docs/images/logos/microsoft_white.png" alt="Microsoft" class="trusted-logo-dark">
+      <!-- NVIDIA (Organization Contact: TBA) -->
+      <div class="px-5 py-4">
+        <img class="adopter-logo show_light-only" src="/docs/images/logos/nvidia-light.svg" alt="NVIDIA Logo">
+        <img class="adopter-logo show_dark-only" src="/docs/images/logos/nvidia-dark.svg" alt="NVIDIA Logo">
+      </div>
 
-      <img src="/docs/images/logos/Red_Hat.svg" alt="RedHat" class="trusted-logo-light">
-      <img src="/docs/images/logos/RedHat_White.png" alt="RedHat" class="trusted-logo-dark">
-      
-      <img src="/docs/images/logos/Google.svg" alt="Google" class="trusted-logo-light">
-      <img src="/docs/images/logos/Google_white.svg" alt="Google" class="trusted-logo-dark">
+      <!-- RedHat (Organization Contact: TBA) -->
+      <div class="px-5 py-4">
+        <img class="adopter-logo show_light-only" src="/docs/images/logos/redhat-light.svg" alt="RedHat Logo">
+        <img class="adopter-logo show_dark-only" src="/docs/images/logos/redhat-dark.svg" alt="RedHat Logo">
+      </div>
 
+      <!-- Google Cloud (Organization Contact: TBA) -->
+      <div class="px-5 py-4">
+        <img class="adopter-logo show_light-only" src="/docs/images/logos/google-cloud-light.svg" alt="Google Cloud Logo">
+        <img class="adopter-logo show_dark-only" src="/docs/images/logos/google-cloud-dark.svg" alt="Google Cloud Logo">
+      </div>
+
+      <!-- AWS (Organization Contact: @vara-bonthu) -->
+      <div class="px-5 py-4">
+        <img class="adopter-logo show_light-only" src="/docs/images/logos/aws-light.svg" alt="AWS Logo">
+        <img class="adopter-logo show_dark-only" src="/docs/images/logos/aws-dark.svg" alt="AWS Logo">
+      </div>
     </div>
-    <div class="mx-auto mt-4">
-      <a class="btn btn-lg btn-outline-primary mr-1 mb-4" href="https://github.com/kubeflow/community/blob/master/ADOPTERS.md" target="_blank" rel="noopener">
-        See Our Adopters <i class="fas fa-book-open ml-2"></i>
+    <div>
+      <a class="btn btn-lg btn-outline-primary" href="https://github.com/kubeflow/community/blob/master/ADOPTERS.md" target="_blank" rel="noopener">
+        see more adopters on <i class="fab fa-github ml-1"></i>
       </a>
     </div>
   </div>