chore: improve tags styling on card (#431)
Some checks failed
Deploy Hugo site to Pages / build (push) Has been cancelled
Deploy Hugo site to Pages / deploy (push) Has been cancelled

* chore: improve tags styling on card

* chore: npm run build:css
This commit is contained in:
Xin
2024-08-11 18:47:03 +01:00
committed by GitHub
parent f439e6bb87
commit e83c11f31a
7 changed files with 46 additions and 73 deletions

View File

@ -8,7 +8,7 @@
{{- $height := .height -}}
{{- $imageStyle := .imageStyle -}}
{{- $tag := .tag -}}
{{- $tagColor := .tagColor -}}
{{- $tagType := .tagType -}}
{{ $linkClass := "hover:hx-border-gray-300 hx-bg-transparent hx-shadow-sm dark:hx-border-neutral-800 hover:hx-bg-slate-50 hover:hx-shadow-md dark:hover:hx-border-neutral-700 dark:hover:hx-bg-neutral-900" }}
{{- with $image -}}
@ -54,14 +54,15 @@
{{- end -}}
{{- if $tag }}
{{ $defaultClass := "hx-text-gray-600 hx-text-xxs hx-bg-gray-100 hx-border dark:hx-bg-neutral-800 dark:hx-text-neutral-200" }}
{{ $yellowClass := "hx-border-yellow-100 hx-bg-yellow-50 hx-text-yellow-900 dark:hx-border-yellow-200/30 dark:hx-bg-yellow-700/30 dark:hx-text-yellow-200" }}
{{ $blueClass := "hx-border-blue-200 hx-bg-blue-100 hx-text-blue-900 dark:hx-border-blue-200/30 dark:hx-bg-blue-900/30 dark:hx-text-blue-200" }}
{{ $redClass := "hx-border-red-200 hx-bg-red-100 hx-text-red-900 dark:hx-border-red-200/30 dark:hx-bg-red-900/30 dark:hx-text-red-200" }}
{{ $defaultClass := "hx-text-gray-600 hx-text-xxs hx-bg-gray-100 dark:hx-bg-neutral-800 dark:hx-text-neutral-200" }}
{{ $warningClass := "hx-border-yellow-100 hx-bg-yellow-50 hx-text-yellow-900 dark:hx-border-yellow-200/30 dark:hx-bg-yellow-700/30 dark:hx-text-yellow-200" }}
{{ $infoClass := "hx-border-blue-200 hx-bg-blue-100 hx-text-blue-900 dark:hx-border-blue-200/30 dark:hx-bg-blue-900/30 dark:hx-text-blue-200" }}
{{ $errorClass := "hx-border-red-200 hx-bg-red-100 hx-text-red-900 dark:hx-border-red-200/30 dark:hx-bg-red-900/30 dark:hx-text-red-200" }}
{{ $class := cond (eq $tagColor "yellow") $yellowClass (cond (eq $tagColor "blue") $blueClass (cond (eq $tagColor "red") $redClass $defaultClass)) }}
<span class="hx-flex hx-tag hx-text-xxs hx-border hx-rounded-full hx-px-2 hx-py-1 {{ $class }}">{{ $tag }}</span>
{{- end -}}
{{ $tagClass := cond (eq $tagType "info") $infoClass (cond (eq $tagType "warning") $warningClass (cond (eq $tagType "error") $errorClass $defaultClass)) }}
<div class="hextra-card-tag">
<span class="hx-inline-block hx-rounded-full hx-px-2.5 hx-leading-6 {{ $tagClass }}">{{ $tag }}</span>
</div>
{{- end -}}
</a>
{{- /* Strip trailing newline. */ -}}