fix: make client logos roll out from section edge instead of screen edge

This commit is contained in:
Chaoming Li 2024-11-18 15:44:22 +11:00
parent 0343631673
commit 075c62a3c5

View file

@ -1,16 +1,18 @@
<section class="border-y border-gray-100 overflow-hidden"> <section class="border-y border-gray-100 overflow-hidden">
<div class="py-12"> <div class="container mx-auto">
<p class="text-center text-sm font-medium text-gray-600 mb-8">{{ .Get "title" | default "Trusted by leading companies worldwide" }}</p> <div class="py-12">
<div class="logo-scroll"> <p class="text-center text-sm font-medium text-gray-600 mb-8">{{ .Get "title" | default "Trusted by leading companies worldwide" }}</p>
<div class="logos-slide{{ if ne (.Get "animate" | default "true") "false" }} animate{{ end }}"> <div class="logo-scroll">
{{ range .Page.Params.client_logos }} <div class="logos-slide{{ if ne (.Get "animate" | default "true") "false" }} animate{{ end }}">
<img src="{{ .logo | relURL }}" alt="{{ .name }}" />
{{ end }}
{{ if ne (.Get "animate" | default "true") "false" }}
{{ range .Page.Params.client_logos }} {{ range .Page.Params.client_logos }}
<img src="{{ .logo | relURL }}" alt="{{ .name }}" /> <img src="{{ .logo | relURL }}" alt="{{ .name }}" />
{{ end }} {{ end }}
{{ end }} {{ if ne (.Get "animate" | default "true") "false" }}
{{ range .Page.Params.client_logos }}
<img src="{{ .logo | relURL }}" alt="{{ .name }}" />
{{ end }}
{{ end }}
</div>
</div> </div>
</div> </div>
</div> </div>
@ -61,7 +63,7 @@
transform: translateX(0); transform: translateX(0);
} }
to { to {
transform: translateX(-50%); transform: translateX(calc(-100% / 2));
} }
} }