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

feat: add support for hex color values in feature badges

Browse source
This commit is contained in:
Chaoming Li 2024-11-19 16:51:10 +11:00
parent 15d8687444
commit f96661ac13
1 changed files with 13 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
layouts/shortcodes/feature.html
View file

@ -2,7 +2,7 @@
{{ $title := .Get "title" }}
{{ $description := .Get "description" }}
{{ $badge := .Get "badge" }}
{{ $badgeColor := .Get "badgeColor" | default "primary" }}
{{ $badgeColor := .Get "badgeColor" | default "#5573df" }}
{{ $image := .Get "image" }}
{{ $buttonText := .Get "buttonText" | default "Learn More" }}
{{ $buttonLink := .Get "buttonLink" | default "#" }}
@ -10,7 +10,7 @@
{{ $features := split (.Get "features") "," }}
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="grid lg:grid-cols-2 gap-12 items-center" style="--badge-color: {{ $badgeColor }}">
{{ if eq $imagePosition "left" }}
<div class="order-2 lg:order-1">
<img src="{{ $image | relURL }}" alt="{{ $title }}" class="rounded-xl shadow-elevation">
@ -18,13 +18,22 @@
{{ end }}
<div class="space-y-6 {{ if eq $imagePosition "left" }}order-1 lg:order-2{{ end }}">
<div class="inline-block px-4 py-2 rounded-full bg-{{ $badgeColor }}-100 text-{{ $badgeColor }}-700 font-medium">{{ $badge }}</div>
<style>
.badge {
background-color: color-mix(in srgb, var(--badge-color) 10%, transparent);
color: var(--badge-color);
}
.badge-icon {
color: var(--badge-color);
}
</style>
<div class="badge inline-block px-4 py-2 rounded-full font-medium">{{ $badge }}</div>
<h3 class="text-2xl md:text-3xl font-bold">{{ $title }}</h3>
<p class="text-lg text-gray-600">{{ $description }}</p>
<ul class="space-y-4">
{{ range $features }}
<li class="flex items-center space-x-3">
<svg class="w-5 h-5 text-{{ $badgeColor }}-700" fill="currentColor" viewBox="0 0 20 20">
<svg class="badge-icon w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
</svg>
<span>{{ . | strings.TrimSpace }}</span>