Better layout for companies logos in the website (#3720)

* Better layout for companies logos in the website

Signed-off-by: Marco Pracucci <[email protected]>

* Improved companies logo box

Signed-off-by: Marco Pracucci <[email protected]>

Author: pracucci

website/assets/scss/_styles_project.scss

@@ -50,3 +50,38 @@
         font-size: 1.2rem;
     }
 }
+
+//
+// Adopters logos
+//
+
+.adopters-logos {
+    // Horizontally center logos.
+    text-align: center;
+}
+
+.adopter-logo {
+    display: inline-block;
+    margin: 10px;
+    padding: 10px;
+    width: 180px;
+    height: 100px;
+    overflow: hidden;
+
+    // Display a shadow behind the box to let it visually pop up.
+    border: 1px solid #dedede;
+    border-radius: 2px;
+    box-shadow: 5px 5px 5px #dedede;
+
+    // Horizontally and vertially center the image.
+    text-align: center;
+    line-height: 80px;
+
+    > img {
+        // Fit the image within the container.
+        height: auto;
+        width: auto;
+        max-height: 100%;
+        max-width: 100%;
+    }
+}

website/assets/scss/_variables_project.scss

@@ -50,22 +50,10 @@ $light: #e9ecef;
     }
 }
 
-.adopter-img {
-    background-repeat: no-repeat;
-    background-size: contain;
-    background-position: center center;
-    background-attachment: inherit;
-    height: 100px;
-}
-
 footer {
    min-height: unset!important;
 }
 
-.logos {
-    padding: 0!important;
-}
-
 .display-1 {
     font-size: 1.5rem!important;
     font-weight: 700;

website/data/adopters.yml

@@ -2,7 +2,7 @@
 adopters:
 - name: Aspen Mesh
   url: https://aspenmesh.io/
-  logo: aspen-mesh.png
+  logo: aspen_mesh.png
 - name: AWS
   url: https://aws.amazon.com/prometheus/
   logo: AWS_logo_RGB.png
@@ -11,7 +11,7 @@ adopters:
   logo: buoyant.svg
 - name: DigitalOcean
   url: https://www.digitalocean.com/
-  logo: digitalocean.png
+  logo: digital_ocean.png
 - name: Electronic Arts
   url: https://www.ea.com/
   logo: ea.png
@@ -38,7 +38,7 @@ adopters:
   logo: platform9.svg
 - name: REWE Digital
   url: https://rewe-digital.com/
-  logo: rewe.png
+  logo: rewe_digital.png
 - name: SysEleven
   url: https://www.syseleven.de/
   logo: syseleven.png

website/layouts/shortcodes/adopters.html

@@ -8,12 +8,11 @@
             <div class="col pb-5">
                 <p class="h2 companies text-center">Companies using Cortex</p>
             </div>
-        <div class="row logos">
+        <div class="adopters-logos">
             {{ range $adopter := sort $.Site.Data.adopters.adopters "name" }}
             {{ if $adopter.logo }}
-                <a class="col-lg-2 col-md-4 col-sm-6 adopter-img my-3"
-                 style="background-image: url({{ (printf "/logos/%s" $adopter.logo) | relURL }}); margin-left: auto; margin-right: auto;" 
-                 href="{{ $adopter.url }}" rel="nofollow" target="_blank" style="display: block;">
+                <a class="adopter-logo" href="{{ $adopter.url }}" rel="nofollow" target="_blank">
+                    <img src="{{ (printf "/logos/%s" $adopter.logo) | relURL }}" alt="{{ $adopter.name }}" />
                 </a>
             {{ end }}
             {{ end }}