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

feat: add card shortcodes

Browse Source
This commit is contained in:
Xin 2023-07-28 22:10:48 +01:00
parent 50b1b7db68
commit ba1257a188
5 changed files with 54 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
assets/css/cards.css Normal file
View File

@ -0,0 +1,29 @@
.hextra-cards {
grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--rows))), 1fr));
}
.hextra-card img {
user-select: none;
}
.hextra-card:hover svg {
color: currentColor;
}
.hextra-card svg {
width: 1.5rem;
color: #00000033;
transition: color 0.3s ease;
}
.hextra-card p {
margin-top: 0.5rem;
}
.dark .hextra-card svg {
color: #ffffff66;
}
.dark .hextra-card:hover svg {
color: currentColor;
}

2
assets/css/styles.css
View File

@ -3,7 +3,7 @@
@tailwind utilities;
@import "typography.css";
@import "cards.css";
html {
@apply text-base antialiased;

12
data/icons.yaml
View File

@ -31,12 +31,8 @@ theme-light: >
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="currentColor" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
theme-dark: >
<svg fill="none" viewBox="2 2 20 20" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="currentColor" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
</svg>
theme-dark: <svg fill="none" viewBox="2 2 20 20" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="currentColor" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
breadcrumb-delimiter: >
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
breadcrumb-delimiter: <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
warning: <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"></path></svg>

17
layouts/shortcodes/card.html Normal file
View File

@ -0,0 +1,17 @@
{{ $href := .Get "link" }}
{{ $title := .Get "title" }}
{{ $icon := .Get "icon" }}
{{ $context := . }}
<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"
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 "context" $context "name" $icon) }}
{{ end }}
{{ $title }}
</span>
</a>

3
layouts/shortcodes/cards.html Normal file
View File

@ -0,0 +1,3 @@
<div class="hextra-cards mt-4 gap-4 grid not-prose" style="--rows: 3;">
{{ .Inner }}
</div>