Genius/hextra
1
0
Fork 0
forked from drowl87/hextra_mirror
Code Pull Requests Activity

feat: add subtitle and image support to card

Browse Source
This commit is contained in:
Xin 2023-08-20 21:31:51 +01:00
parent 80659b4933
commit b6f40d6114
3 changed files with 37 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
assets/css/typography.css
View File

@ -75,6 +75,9 @@
img {
@apply mx-auto my-4 rounded-md;
}
.not-prose img {
@apply m-0 rounded-none;
}
figure {
figcaption {
@apply text-sm text-gray-500 dark:text-gray-400 mt-2 block text-center;

8
exampleSite/hugo_stats.json
View File

@ -156,6 +156,7 @@
"dark:block",
"dark:border-blue-200/30",
"dark:border-gray-100/20",
"dark:border-neutral-700",
"dark:border-neutral-800",
"dark:border-orange-400/30",
"dark:border-red-200/30",
@ -165,8 +166,10 @@
"dark:focus:bg-dark",
"dark:hidden",
"dark:hover:bg-gray-100/5",
"dark:hover:bg-neutral-700",
"dark:hover:bg-neutral-900",
"dark:hover:bg-primary-100/5",
"dark:hover:border-neutral-500",
"dark:hover:border-neutral-700",
"dark:hover:border-neutral-800",
"dark:hover:shadow-none",
@ -186,6 +189,7 @@
"dark:text-gray-200",
"dark:text-gray-300",
"dark:text-gray-400",
"dark:text-gray-50",
"dark:text-neutral-200",
"dark:text-neutral-400",
"dark:text-orange-300",
@ -210,6 +214,7 @@
"font-extrabold",
"font-medium",
"font-mono",
"font-normal",
"font-semibold",
"footnote-backref",
"footnote-ref",
@ -255,6 +260,7 @@
"hover:opacity-60",
"hover:opacity-75",
"hover:shadow-gray-100",
"hover:shadow-lg",
"hover:shadow-md",
"hover:text-black",
"hover:text-gray-800",
@ -278,6 +284,7 @@
"leading-5",
"leading-7",
"leading-tight",
"line-clamp-3",
"list-none",
"lntable",
"lntd",
@ -441,6 +448,7 @@
"search-results",
"search-wrapper",
"select-none",
"shadow",
"shadow-[0_-12px_16px_#fff]",
"shadow-[0_-12px_16px_white]",
"shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)]",

36
layouts/shortcodes/card.html
View File

@ -1,17 +1,33 @@
{{ $href := .Get "link" }}
{{ $title := .Get "title" }}
{{ $icon := .Get "icon" }}
{{ $context := . }}
{{- $href := .Get "link" -}}
{{- $title := .Get "title" -}}
{{- $icon := .Get "icon" -}}
{{- $subtitle := .Get "subtitle" }}
{{- $image := .Get "image" }}
{{- $context := . -}}
{{ $linkClass := "hover:border-gray-300 bg-transparent shadow-sm dark:border-neutral-800 hover:bg-slate-50 hover:shadow-md dark:hover:border-neutral-700 dark:hover:bg-neutral-900" }}
{{- with $image -}}
{{ $linkClass = "hover:border-gray-300 bg-gray-100 shadow dark:border-neutral-700 dark:bg-neutral-800 dark:text-gray-50 hover:shadow-lg dark:hover:border-neutral-500 dark:hover:bg-neutral-700" }}
{{- end -}}
<a
class="hextra-card group flex flex-col justify-start overflow-hidden rounded-lg border border-gray-200 text-current no-underline dark:shadow-none hover:shadow-gray-100 dark:hover:shadow-none shadow-gray-100 active:shadow-sm active:shadow-gray-200 transition-all duration-200 hover:border-gray-300 bg-transparent shadow-sm dark:border-neutral-800 hover:bg-slate-50 hover:shadow-md dark:hover:border-neutral-700 dark:hover:bg-neutral-900"
class="hextra-card group flex flex-col justify-start overflow-hidden rounded-lg border border-gray-200 text-current no-underline dark:shadow-none hover:shadow-gray-100 dark:hover:shadow-none shadow-gray-100 active:shadow-sm active:shadow-gray-200 transition-all duration-200 {{ $linkClass }}"
href="{{ $href }}"
>
<span class="flex font-semibold items-start gap-2 p-4 text-gray-700 hover:text-gray-900 dark:text-neutral-200 dark:hover:text-neutral-50">
{{ with $icon }}
{{ partial "utils/icon.html" (dict "name" $icon) }}
{{ end }}
{{ $title }}
{{- with $image -}}
<img alt="{{ $title }}" loading="lazy" decoding="async" style="color: transparent;" src="{{ $image }}" />
{{- end -}}
{{ $padding := "p-4"}}
{{- with $subtitle -}}
{{ $padding = "pt-4 px-4"}}
{{- end -}}
<span class="flex font-semibold items-start gap-2 {{ $padding }} text-gray-700 hover:text-gray-900 dark:text-neutral-200 dark:hover:text-neutral-50">
{{- with $icon }}{{ partial "utils/icon.html" (dict "name" $icon) -}}{{ end -}}
{{- $title -}}
</span>
{{- with $subtitle -}}
<div class="line-clamp-3 text-sm font-normal text-gray-500 dark:text-gray-400 px-4 mb-4 mt-2">{{ $subtitle }}</div>
{{- end -}}
</a>