champs-libres/chill_hugoplate
7
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: corriger l'indentation et la gestion des animations dans le shortcode des logos clients

Browse Source
This commit is contained in:
Boris Waaub
2026-02-26 17:41:36 +01:00
parent a3383a97df
commit 1ab1a092ab
1 changed files with 64 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
themes/chill-theme/layouts/shortcodes/client-logos.html
View File

@@ -1,16 +1,17 @@
<section class="border-y border-gray-100 overflow-hidden">
<div class="container mx-auto">
<div class="py-12">
<p class="text-center text-3xl md:text-2xl font-bold mb-6">{{ .Get "title" | default (i18n "trustedByCompanies") }}</p>
<p class="text-center text-3xl md:text-2xl font-bold mb-6">{{ .Get "title" | default (i18n
"trustedByCompanies") }}</p>
<div class="logo-scroll">
<div class="logos-slide{{ if ne (.Get "animate" | default "true") "false" }} animate{{ end }}">
<div class="logos-slide{{ if ne (.Get " animate" | default "true" ) "false" }} animate{{ end }}">
{{ range .Page.Params.client_logos }}
<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 }}" class="h-20" alt="{{ .name }}" />
{{ end }}
{{ range .Page.Params.client_logos }}
<img src="{{ .logo | relURL }}" class="h-20" alt="{{ .name }}" />
{{ end }}
{{ end }}
</div>
</div>
@@ -19,64 +20,67 @@
</section>
<style>
.logo-scroll {
overflow: hidden;
padding: 20px 0;
white-space: nowrap;
position: relative;
}
.logo-scroll.static {
display: flex;
justify-content: center;
overflow: visible;
}
.logo-scroll.static .logos-slide {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 40px;
}
.logos-slide {
display: inline-block;
}
.logos-slide.animate {
animation: 30s slide infinite linear;
}
.logos-slide img {
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 {
margin: 0;
}
@keyframes slide {
from {
transform: translateX(0);
.logo-scroll {
overflow: hidden;
padding: 20px 0;
white-space: nowrap;
position: relative;
}
to {
transform: translateX(calc(-100% / 2));
.logo-scroll.static {
display: flex;
justify-content: center;
overflow: visible;
}
}
.logo-scroll:hover .logos-slide.animate {
animation-play-state: paused;
}
.logo-scroll.static .logos-slide {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 40px;
}
.logos-slide {
display: inline-block;
}
/* Mobile-specific animation speed */
@media (max-width: 768px) {
.logos-slide.animate {
animation: 15s slide infinite linear;
animation: 30s slide infinite linear;
}
}
</style>
.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;
}
}
</style>