making my own article-link partial
This commit is contained in:
parent
9dbd3ff379
commit
af362f436d
3 changed files with 203 additions and 128 deletions
|
|
@ -1495,6 +1495,10 @@ select {
|
|||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
.mt-3 {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.-mr-2 {
|
||||
margin-right: -0.5rem;
|
||||
}
|
||||
|
|
@ -1543,10 +1547,6 @@ select {
|
|||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.mt-3 {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.mr-2 {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
|
@ -1623,6 +1623,10 @@ select {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.h-12 {
|
||||
height: 3rem;
|
||||
}
|
||||
|
|
@ -1635,10 +1639,6 @@ select {
|
|||
height: 50%;
|
||||
}
|
||||
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.h-36 {
|
||||
height: 9rem;
|
||||
}
|
||||
|
|
@ -1695,6 +1695,10 @@ select {
|
|||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.w-auto {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.min-w-0 {
|
||||
min-width: 0px;
|
||||
}
|
||||
|
|
@ -1756,14 +1760,14 @@ select {
|
|||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cursor-default {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.list-none {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
|
@ -1845,14 +1849,18 @@ select {
|
|||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.rounded-full {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.rounded-xl {
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.rounded-full {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.rounded-2xl {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
|
@ -1865,10 +1873,6 @@ select {
|
|||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.\!rounded-md {
|
||||
border-radius: 0.375rem !important;
|
||||
}
|
||||
|
|
@ -1894,6 +1898,11 @@ select {
|
|||
border-style: dotted;
|
||||
}
|
||||
|
||||
.border-neutral-200 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(var(--color-neutral-200), var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-neutral-400 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(var(--color-neutral-400), var(--tw-border-opacity));
|
||||
|
|
@ -1904,11 +1913,6 @@ select {
|
|||
border-color: rgba(var(--color-neutral-300), var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-neutral-200 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(var(--color-neutral-200), var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-primary-400 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(var(--color-primary-400), var(--tw-border-opacity));
|
||||
|
|
@ -2018,6 +2022,10 @@ select {
|
|||
object-position: left;
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.p-2 {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
|
@ -2026,10 +2034,6 @@ select {
|
|||
padding: 0px;
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
|
@ -2044,6 +2048,11 @@ select {
|
|||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.py-1 {
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
|
|
@ -2059,6 +2068,11 @@ select {
|
|||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.px-10 {
|
||||
padding-left: 2.5rem;
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
|
||||
.py-16 {
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
|
|
@ -2074,11 +2088,6 @@ select {
|
|||
padding-right: 0.75rem;
|
||||
}
|
||||
|
||||
.py-1 {
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.px-2 {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
|
|
@ -2104,16 +2113,6 @@ select {
|
|||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.px-10 {
|
||||
padding-left: 2.5rem;
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
|
||||
.px-28 {
|
||||
padding-left: 7rem;
|
||||
padding-right: 7rem;
|
||||
}
|
||||
|
||||
.pt-8 {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
|
@ -2146,10 +2145,6 @@ select {
|
|||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.pt-5 {
|
||||
padding-top: 1.25rem;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -2171,9 +2166,14 @@ select {
|
|||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
.text-base {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
.text-xl {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
|
|
@ -2181,9 +2181,14 @@ select {
|
|||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
.text-base {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.text-3xl {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
.text-2xl {
|
||||
|
|
@ -2196,24 +2201,18 @@ select {
|
|||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.text-\[0\.6rem\] {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
.text-3xl {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
.font-extrabold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.font-semibold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.font-medium {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
|
@ -2222,10 +2221,6 @@ select {
|
|||
font-weight: 700;
|
||||
}
|
||||
|
||||
.font-semibold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.font-normal {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
|
@ -2238,6 +2233,10 @@ select {
|
|||
font-style: italic;
|
||||
}
|
||||
|
||||
.leading-loose {
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.leading-7 {
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
|
@ -2250,25 +2249,31 @@ select {
|
|||
line-height: .75rem;
|
||||
}
|
||||
|
||||
.leading-loose {
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.text-neutral-900 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(var(--color-neutral-900), var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-neutral-700 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(var(--color-neutral-700), var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-neutral-800 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(var(--color-neutral-800), var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-neutral-400 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(var(--color-neutral-400), var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-neutral-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(var(--color-neutral-500), var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-neutral-700 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(var(--color-neutral-700), var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-primary-300 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(var(--color-primary-300), var(--tw-text-opacity));
|
||||
|
|
@ -2284,16 +2289,6 @@ select {
|
|||
color: rgba(var(--color-neutral-300), var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-neutral-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(var(--color-neutral-500), var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-neutral-400 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(var(--color-neutral-400), var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-primary-600 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(var(--color-primary-600), var(--tw-text-opacity));
|
||||
|
|
@ -2327,14 +2322,14 @@ select {
|
|||
text-decoration-color: rgba(var(--color-primary-500), 1);
|
||||
}
|
||||
|
||||
.decoration-neutral-300 {
|
||||
text-decoration-color: rgba(var(--color-neutral-300), 1);
|
||||
}
|
||||
|
||||
.decoration-secondary-500 {
|
||||
text-decoration-color: rgba(var(--color-secondary-500), 1);
|
||||
}
|
||||
|
||||
.decoration-neutral-300 {
|
||||
text-decoration-color: rgba(var(--color-neutral-300), 1);
|
||||
}
|
||||
|
||||
.opacity-0 {
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
@ -3225,14 +3220,14 @@ body:has(#menu-controller:checked) {
|
|||
left: -1.5rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .ltr\:mr-14 {
|
||||
margin-right: 3.5rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .ltr\:ml-2 {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .ltr\:mr-14 {
|
||||
margin-right: 3.5rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .ltr\:mr-4 {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
|
@ -3281,14 +3276,14 @@ body:has(#menu-controller:checked) {
|
|||
right: -1.5rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .rtl\:ml-14 {
|
||||
margin-left: 3.5rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .rtl\:mr-2 {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .rtl\:ml-14 {
|
||||
margin-left: 3.5rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .rtl\:ml-4 {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
|
@ -3337,16 +3332,16 @@ body:has(#menu-controller:checked) {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.dark .dark\:border-neutral-600 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(var(--color-neutral-600), var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.dark .dark\:border-neutral-700 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(var(--color-neutral-700), var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.dark .dark\:border-neutral-600 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(var(--color-neutral-600), var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.dark .dark\:border-primary-600 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(var(--color-primary-600), var(--tw-border-opacity));
|
||||
|
|
@ -3447,6 +3442,16 @@ body:has(#menu-controller:checked) {
|
|||
color: rgba(var(--color-neutral), var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark .dark\:text-neutral-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(var(--color-neutral-500), var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark .dark\:text-neutral-400 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(var(--color-neutral-400), var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark .dark\:text-neutral-200 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(var(--color-neutral-200), var(--tw-text-opacity));
|
||||
|
|
@ -3457,16 +3462,6 @@ body:has(#menu-controller:checked) {
|
|||
color: rgba(var(--color-neutral-300), var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark .dark\:text-neutral-400 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(var(--color-neutral-400), var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark .dark\:text-neutral-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(var(--color-neutral-500), var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark .dark\:text-primary-400 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(var(--color-primary-400), var(--tw-text-opacity));
|
||||
|
|
@ -3586,11 +3581,6 @@ body:has(#menu-controller:checked) {
|
|||
padding-bottom: 6rem;
|
||||
}
|
||||
|
||||
.sm\:px-24 {
|
||||
padding-left: 6rem;
|
||||
padding-right: 6rem;
|
||||
}
|
||||
|
||||
.sm\:pt-10 {
|
||||
padding-top: 2.5rem;
|
||||
}
|
||||
|
|
@ -3622,14 +3612,6 @@ body:has(#menu-controller:checked) {
|
|||
}
|
||||
|
||||
@media (min-width: 853px) {
|
||||
.md\:ml-12 {
|
||||
margin-left: 3rem;
|
||||
}
|
||||
|
||||
.md\:-mr-16 {
|
||||
margin-right: -4rem;
|
||||
}
|
||||
|
||||
.md\:mr-7 {
|
||||
margin-right: 1.75rem;
|
||||
}
|
||||
|
|
@ -3638,6 +3620,14 @@ body:has(#menu-controller:checked) {
|
|||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.md\:ml-12 {
|
||||
margin-left: 3rem;
|
||||
}
|
||||
|
||||
.md\:-mr-16 {
|
||||
margin-right: -4rem;
|
||||
}
|
||||
|
||||
.md\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -3658,6 +3648,10 @@ body:has(#menu-controller:checked) {
|
|||
width: auto;
|
||||
}
|
||||
|
||||
.md\:w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.md\:columns-2 {
|
||||
-moz-columns: 2;
|
||||
columns: 2;
|
||||
|
|
|
|||
81
layouts/partials/article-link.html
Normal file
81
layouts/partials/article-link.html
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
|
||||
{{ $articleClasses := "flex flex-wrap article" }}
|
||||
{{ if .Site.Params.list.showCards }}
|
||||
{{ $articleClasses = delimit (slice $articleClasses "border" "border-neutral-200 dark:border-neutral-700 border-2 rounded-xl") " thumbnailshadow " }}
|
||||
{{ end }}
|
||||
|
||||
{{ $articleImageClasses := "w-10px md:w-1/3 h-full object-cover thumbnail nozoom" }}
|
||||
{{ if .Site.Params.list.showCards }}
|
||||
{{ $articleImageClasses = delimit (slice $articleImageClasses "rounded-lg") " " }}
|
||||
{{ else }}
|
||||
{{ $articleImageClasses = delimit (slice $articleImageClasses "thumbnailshadow md:mr-7") " " }}
|
||||
{{ end }}
|
||||
|
||||
{{ $articleInnerClasses := "" }}
|
||||
{{ if .Site.Params.list.showCards }}
|
||||
{{ $articleInnerClasses = delimit (slice $articleInnerClasses "p-4") " " }}
|
||||
{{ else }}
|
||||
{{ $articleInnerClasses = delimit (slice $articleInnerClasses "mt-3 md:mt-0") " " }}
|
||||
{{ end }}
|
||||
|
||||
{{ with .Params.externalUrl }}
|
||||
<a class="{{ $articleClasses }}" href="{{ . }}" target="_blank" rel="external">
|
||||
{{ else }}
|
||||
<a class="{{ $articleClasses }}" href="{{ .RelPermalink }}">
|
||||
{{ end }}
|
||||
{{- with $.Params.images -}}
|
||||
{{- range first 6 . }}
|
||||
<meta property="og:image" content="{{ . | absURL }}" />{{ end -}}
|
||||
{{- else -}}
|
||||
{{- $images := $.Resources.ByType "image" -}}
|
||||
{{- $featured := $images.GetMatch "*feature*" -}}
|
||||
{{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
|
||||
{{- with $featured -}}
|
||||
{{ with .Resize "600x" }}
|
||||
<div class="{{ $articleImageClasses }}">
|
||||
<image class="{{ $articleImageClasses }} object-scale-down" src="{{ .RelPermalink }}"></image>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{- else -}}
|
||||
{{- with $.Site.Params.images }}
|
||||
<meta property="og:image" content="{{ index . 0 | absURL }}" />{{ end -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
|
||||
<div class="{{ $articleInnerClasses }}">
|
||||
<div class="items-center text-xl font-semibold">
|
||||
{{ with .Params.externalUrl }}
|
||||
<div>
|
||||
<div
|
||||
class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral">
|
||||
{{ $.Title | emojify }}
|
||||
<span class="text-xs align-top cursor-default text-neutral-400 dark:text-neutral-500">
|
||||
<span class="rtl:hidden">↗</span>
|
||||
<span class="ltr:hidden">↖</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{{ else }}
|
||||
<div class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
|
||||
href="{{ .RelPermalink }}">{{ .Title | emojify }}</div>
|
||||
{{ end }}
|
||||
{{ if and .Draft .Site.Params.article.showDraftLabel }}
|
||||
<div class=" ltr:ml-2 rtl:mr-2">
|
||||
{{ partial "badge.html" (i18n "article.draft" | emojify) }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ if templates.Exists "partials/extend-article-link.html" }}
|
||||
{{ partial "extend-article-link.html" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="text-sm text-neutral-500 dark:text-neutral-400">
|
||||
{{ partial "article-meta.html" . }}
|
||||
</div>
|
||||
{{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}
|
||||
<div class="py-1 prose dark:prose-invert">
|
||||
{{ .Summary | emojify }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -5,6 +5,6 @@
|
|||
"scripts": {
|
||||
"server": "hugo server --noHTTPCache ",
|
||||
"dev": "NODE_ENV=development ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit -w",
|
||||
"build": "NODE_ENV=production ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit"
|
||||
"build": "rm -rf public && NODE_ENV=production ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit && hugo --gc --minify"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue