diff --git a/themes/chill-theme/layouts/shortcodes/client-logos.html b/themes/chill-theme/layouts/shortcodes/client-logos.html index 203c4f3..e14f3fd 100644 --- a/themes/chill-theme/layouts/shortcodes/client-logos.html +++ b/themes/chill-theme/layouts/shortcodes/client-logos.html @@ -1,16 +1,17 @@
-

{{ .Get "title" | default (i18n "trustedByCompanies") }}

+

{{ .Get "title" | default (i18n + "trustedByCompanies") }}

-
+
{{ range .Page.Params.client_logos }} {{ .name }} {{ end }} {{ if ne (.Get "animate" | default "true") "false" }} - {{ range .Page.Params.client_logos }} - {{ .name }} - {{ end }} + {{ range .Page.Params.client_logos }} + {{ .name }} + {{ end }} {{ end }}
@@ -19,64 +20,67 @@
+ + + .logos-slide img { + max-width: 8rem; + height: auto; + margin: 0 40px; + display: inline-block; + vertical-align: middle; + filter: grayscale(100%); + opacity: 0.6; + } + + .logo-scroll.static .logos-slide img { + margin: 0; + } + + @keyframes slide { + from { + transform: translateX(0); + } + + to { + transform: translateX(calc(-100% / 2)); + } + } + + .logo-scroll:hover .logos-slide.animate { + animation-play-state: paused; + } + + /* Mobile-specific animation speed */ + @media (max-width: 768px) { + .logos-slide.animate { + animation: 15s slide infinite linear; + } + } + \ No newline at end of file