templates/hugo-saasify-theme
1
0
Fork 0
mirror of https://github.com/chaoming/hugo-saasify-theme.git synced 2025-04-20 07:11:52 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add client logos shortcode with animation toggle

Browse source
This commit is contained in:
Chaoming Li 2024-11-18 10:56:06 +11:00
parent 5f7ab531f8
commit 35d5eed8fe
2 changed files with 71 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
layouts/index.html
View file

@ -4,16 +4,6 @@
{{ .Content }}
{{ end }}
<!-- Client Logos -->
<section class="border-y border-gray-100">
<div class="container py-12">
<p class="text-center text-sm font-medium text-gray-600 mb-8">Trusted by leading companies worldwide</p>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8 items-center justify-items-center opacity-70">
<img src="{{ "images/client-logo-1.svg" | relURL }}" alt="Client Logo" class="h-8">
</div>
</div>
</section>
<!-- Feature Sections -->
<section class="section">
<div class="container">

71
layouts/shortcodes/client-logos.html Normal file
View file

@ -0,0 +1,71 @@
<section class="border-y border-gray-100 overflow-hidden">
<div class="py-12">
<p class="text-center text-sm font-medium text-gray-600 mb-8">{{ .Get "title" | default "Trusted by leading companies worldwide" }}</p>
<div class="logo-scroll{{ if eq (.Get "animate" | default "true") "false" }} static{{ end }}">
<div class="logos-slide{{ if ne (.Get "animate" | default "true") "false" }} animate{{ end }}">
{{ range .Page.Params.client_logos }}
<img src="{{ .logo | relURL }}" alt="{{ .name }}" />
{{ end }}
{{ if ne (.Get "animate" | default "true") "false" }}
{{ range .Page.Params.client_logos }}
<img src="{{ .logo | relURL }}" alt="{{ .name }}" />
{{ end }}
{{ end }}
</div>
</div>
</div>
</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 {
height: 32px;
margin: 0 40px;
display: inline-block;
vertical-align: middle;
}
.logo-scroll.static .logos-slide img {
margin: 0;
}
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
.logo-scroll:hover .logos-slide.animate {
animation-play-state: paused;
}
</style>