From ab9d07545fcab2fee5ca2307c2d57ceb8668bb13 Mon Sep 17 00:00:00 2001
From: Chaoming Li <email@chaoming.li>
Date: Tue, 19 Nov 2024 23:27:24 +1100
Subject: [PATCH] style: make client logos grey with opacity

---
 layouts/shortcodes/client-logos.html | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/layouts/shortcodes/client-logos.html b/layouts/shortcodes/client-logos.html
index d03f91e..7215061 100644
--- a/layouts/shortcodes/client-logos.html
+++ b/layouts/shortcodes/client-logos.html
@@ -5,11 +5,11 @@
             <div class="logo-scroll">
                 <div class="logos-slide{{ if ne (.Get "animate" | default "true") "false" }} animate{{ end }}">
                     {{ range .Page.Params.client_logos }}
-                    <img src="{{ .logo | relURL }}" alt="{{ .name }}" />
+                    <img src="{{ .logo | relURL }}" class="h-20" alt="{{ .name }}" />
                     {{ end }}
                     {{ if ne (.Get "animate" | default "true") "false" }}
                         {{ range .Page.Params.client_logos }}
-                        <img src="{{ .logo | relURL }}" alt="{{ .name }}" />
+                        <img src="{{ .logo | relURL }}" class="h-20" alt="{{ .name }}" />
                         {{ end }}
                     {{ end }}
                 </div>
@@ -48,10 +48,12 @@
 }
 
 .logos-slide img {
-    height: 48px;
+    max-height: 1.5rem;
     margin: 0 40px;
     display: inline-block;
     vertical-align: middle;
+    filter: grayscale(100%);
+    opacity: 0.6;
 }
 
 .logo-scroll.static .logos-slide img {