Merge pull request #2351 from servedsmart/replace-custom-javascript-logic-with-anchor-tags

🚑 Hotfix for issues in #2252
This commit is contained in:
Nuno C.
2025-08-03 01:28:05 +01:00
committed by GitHub
6 changed files with 50 additions and 39 deletions
+15 -20
View File
@@ -2415,6 +2415,13 @@ body.zen-mode-enable {
} }
} }
} }
.group-hover\:underline-offset-2 {
&:is(:where(.group):hover *) {
@media (hover: hover) {
text-underline-offset: 2px;
}
}
}
.group-hover\:opacity-100 { .group-hover\:opacity-100 {
&:is(:where(.group):hover *) { &:is(:where(.group):hover *) {
@media (hover: hover) { @media (hover: hover) {
@@ -3721,44 +3728,29 @@ a {
pre { pre {
text-align: left; text-align: left;
} }
.thumbnail, .thumbnail_card, .thumbnail_card_related, .thumbnail_card_term, .single_hero_basic, .single_hero_background {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.thumbnail { .thumbnail {
min-width: 300px; min-width: 300px;
height: 180px; height: 180px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
} }
.thumbnail_card { .thumbnail_card {
height: 200px; height: 200px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
} }
.thumbnail_card_related { .thumbnail_card_related {
height: 150px; height: 150px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
} }
.thumbnail_card_term { .thumbnail_card_term {
height: 150px; height: 150px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.single_hero_basic {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
} }
.single_hero_round { .single_hero_round {
max-height: 50vh; max-height: 50vh;
object-fit: cover; object-fit: cover;
} }
.single_hero_background { .single_hero_background {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
z-index: -10; z-index: -10;
} }
.hero_gradient { .hero_gradient {
@@ -3821,6 +3813,9 @@ pre {
text-decoration-thickness: 3px; text-decoration-thickness: 3px;
text-underline-offset: 4px; text-underline-offset: 4px;
} }
.group-hover-card:hover:has(.group-hover-cancel:hover) .group-hover-card-title {
text-decoration: none !important;
}
@layer base { @layer base {
[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select { [type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
appearance: none; appearance: none;
+5
View File
@@ -277,3 +277,8 @@ pre {
text-decoration-thickness: 3px; text-decoration-thickness: 3px;
text-underline-offset: 4px; text-underline-offset: 4px;
} }
/* Cancel group hover if .group-hover-card contains .group-hover-cancel*/
.group-hover-card:hover:has(.group-hover-cancel:hover) .group-hover-card-title {
text-decoration: none !important;
}
+12 -7
View File
@@ -4,7 +4,7 @@
{{ $constrainItemsWidth := site.Params.list.constrainItemsWidth | default false }} {{ $constrainItemsWidth := site.Params.list.constrainItemsWidth | default false }}
{{ $disableImageOptimization := site.Params.disableImageOptimization | default false }} {{ $disableImageOptimization := site.Params.disableImageOptimization | default false }}
{{ $articleClasses := "flex flex-wrap md:flex-nowrap article" }} {{ $articleClasses := "group-hover-card group flex flex-wrap md:flex-nowrap article relative" }}
{{ if site.Params.list.showCards }} {{ if site.Params.list.showCards }}
{{ $articleClasses = delimit (slice $articleClasses "border border-neutral-200 dark:border-neutral-700 border-2 rounded-md overflow-hidden") " " }} {{ $articleClasses = delimit (slice $articleClasses "border border-neutral-200 dark:border-neutral-700 border-2 rounded-md overflow-hidden") " " }}
{{ else }} {{ else }}
@@ -30,7 +30,12 @@
{{ end }} {{ end }}
<a class="{{ $articleClasses }}" {{ partial "article-link/_external-link.html" $target | safeHTMLAttr }}> <div class="{{ $articleClasses }}">
<a
{{ partial "article-link/_external-link.html" $target | safeHTMLAttr }}
class="absolute inset-0"
aria-label="{{ $.Title }}"></a>
{{- with $target.Params.images -}} {{- with $target.Params.images -}}
{{- range first 6 . }} {{- range first 6 . }}
<meta property="og:image" content="{{ . | absURL }}"> <meta property="og:image" content="{{ . | absURL }}">
@@ -70,7 +75,7 @@
{{ with $target.Params.externalUrl }} {{ with $target.Params.externalUrl }}
<div> <div>
<div <div
class="decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 hover:underline hover:underline-offset-2"> class="group-hover-card-title decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 group-hover:underline group-hover:underline-offset-2">
{{ $target.Title | emojify }} {{ $target.Title | emojify }}
<span class="cursor-default align-top text-xs text-neutral-400 dark:text-neutral-500"> <span class="cursor-default align-top text-xs text-neutral-400 dark:text-neutral-500">
<span class="rtl:hidden">&#8599;</span> <span class="rtl:hidden">&#8599;</span>
@@ -80,7 +85,7 @@
</div> </div>
{{ else }} {{ else }}
<div <div
class="decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 hover:underline hover:underline-offset-2" class="group-hover-card-title decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 group-hover:underline group-hover:underline-offset-2"
href="{{ $target.RelPermalink }}"> href="{{ $target.RelPermalink }}">
{{ $target.Title | emojify }} {{ $target.Title | emojify }}
</div> </div>
@@ -94,7 +99,7 @@
{{ partial "extend-article-link.html" $target }} {{ partial "extend-article-link.html" $target }}
{{ end }} {{ end }}
</div> </div>
<div class="text-sm text-neutral-500 dark:text-neutral-400"> <div class="group-hover-cancel text-sm text-neutral-500 dark:text-neutral-400">
{{ partial "article-meta/basic.html" $target }} {{ partial "article-meta/basic.html" $target }}
</div> </div>
{{ $showSummary := false }} {{ $showSummary := false }}
@@ -111,10 +116,10 @@
{{ $compactSummary = $target.Params.compactSummary | default (site.Params.list.compactSummary | default false) }} {{ $compactSummary = $target.Params.compactSummary | default (site.Params.list.compactSummary | default false) }}
{{ end }} {{ end }}
<div class="overflow-hidden pt-1"> <div class="overflow-hidden pt-1">
<div class="{{ if $compactSummary }}line-clamp-3{{ end }} max-w-fit prose dark:prose-invert"> <div class="{{ if $compactSummary }}line-clamp-3{{ end }} prose dark:prose-invert max-w-fit">
{{ $target.Summary | plainify }} {{ $target.Summary | plainify }}
</div> </div>
</div> </div>
{{ end }} {{ end }}
</div> </div>
</a> </div>
@@ -1,6 +1,6 @@
{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }} {{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
<div <div
class="relative min-h-full min-w-full overflow-hidden rounded border border-2 border-neutral-200 shadow-2xl dark:border-neutral-700"> class="group-hover-card group relative min-h-full min-w-full overflow-hidden rounded border border-2 border-neutral-200 shadow-2xl dark:border-neutral-700">
<a <a
{{ partial "article-link/_external-link.html" . | safeHTMLAttr }} {{ partial "article-link/_external-link.html" . | safeHTMLAttr }}
class="absolute inset-0" class="absolute inset-0"
@@ -48,7 +48,7 @@
<div class="px-6 py-4"> <div class="px-6 py-4">
{{ with .Params.externalUrl }} {{ with .Params.externalUrl }}
<div <div
class="decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 hover:underline hover:underline-offset-2"> class="group-hover-card-title decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 group-hover:underline group-hover:underline-offset-2">
{{ $.Title | emojify }} {{ $.Title | emojify }}
<span class="cursor-default align-top text-xs text-neutral-400 dark:text-neutral-500"> <span class="cursor-default align-top text-xs text-neutral-400 dark:text-neutral-500">
<span class="rtl:hidden">&#8599;</span> <span class="rtl:hidden">&#8599;</span>
@@ -57,11 +57,13 @@
</div> </div>
{{ else }} {{ else }}
<div <div
class="decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 hover:underline hover:underline-offset-2"> class="group-hover-card-title decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 group-hover:underline group-hover:underline-offset-2">
{{ .Title | emojify }} {{ .Title | emojify }}
</div> </div>
{{ end }} {{ end }}
<div class="text-sm text-neutral-500 dark:text-neutral-400">{{ partial "article-meta/basic.html" . }}</div> <div class="group-hover-cancel text-sm text-neutral-500 dark:text-neutral-400">
{{ partial "article-meta/basic.html" . }}
</div>
{{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }} {{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}
<div class="prose dark:prose-invert py-1">{{ .Summary | plainify }}</div> <div class="prose dark:prose-invert py-1">{{ .Summary | plainify }}</div>
{{ end }} {{ end }}
+6 -4
View File
@@ -1,6 +1,6 @@
{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }} {{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
<div <div
class="relative min-h-full min-w-full overflow-hidden rounded border border-2 border-neutral-200 shadow-2xl dark:border-neutral-700"> class="group-hover-card group relative min-h-full min-w-full overflow-hidden rounded border border-2 border-neutral-200 shadow-2xl dark:border-neutral-700">
<a <a
{{ partial "article-link/_external-link.html" . | safeHTMLAttr }} {{ partial "article-link/_external-link.html" . | safeHTMLAttr }}
class="absolute inset-0" class="absolute inset-0"
@@ -45,7 +45,7 @@
<div class="px-6 py-4"> <div class="px-6 py-4">
{{ with .Params.externalUrl }} {{ with .Params.externalUrl }}
<div <div
class="decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 hover:underline hover:underline-offset-2"> class="group-hover-card-title decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 group-hover:underline group-hover:underline-offset-2">
{{ $.Title | emojify }} {{ $.Title | emojify }}
<span class="cursor-default align-top text-xs text-neutral-400 dark:text-neutral-500"> <span class="cursor-default align-top text-xs text-neutral-400 dark:text-neutral-500">
<span class="rtl:hidden">&#8599;</span> <span class="rtl:hidden">&#8599;</span>
@@ -54,11 +54,13 @@
</div> </div>
{{ else }} {{ else }}
<div <div
class="decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 hover:underline hover:underline-offset-2"> class="group-hover-card-title decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 group-hover:underline group-hover:underline-offset-2">
{{ .Title | emojify }} {{ .Title | emojify }}
</div> </div>
{{ end }} {{ end }}
<div class="text-sm text-neutral-500 dark:text-neutral-400">{{ partial "article-meta/basic.html" . }}</div> <div class="group-hover-cancel text-sm text-neutral-500 dark:text-neutral-400">
{{ partial "article-meta/basic.html" . }}
</div>
{{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }} {{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}
<div class="prose dark:prose-invert py-1">{{ .Summary | plainify }}</div> <div class="prose dark:prose-invert py-1">{{ .Summary | plainify }}</div>
{{ end }} {{ end }}
+6 -4
View File
@@ -1,6 +1,6 @@
{{ $constrainItemsWidth := .Page.Site.Params.list.constrainItemsWidth | default false }} {{ $constrainItemsWidth := .Page.Site.Params.list.constrainItemsWidth | default false }}
{{ $articleClasses := "flex flex-wrap md:flex-nowrap article relative" }} {{ $articleClasses := "group-hover-card group flex flex-wrap md:flex-nowrap article relative" }}
{{ if .Site.Params.list.showCards }} {{ if .Site.Params.list.showCards }}
{{ $articleClasses = delimit (slice $articleClasses "border border-neutral-200 dark:border-neutral-700 border-2 rounded-md overflow-hidden") " " }} {{ $articleClasses = delimit (slice $articleClasses "border border-neutral-200 dark:border-neutral-700 border-2 rounded-md overflow-hidden") " " }}
{{ else }} {{ else }}
@@ -71,7 +71,7 @@
<div class="items-center text-left text-xl font-semibold"> <div class="items-center text-left text-xl font-semibold">
{{ with .Params.externalUrl }} {{ with .Params.externalUrl }}
<div <div
class="decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 hover:underline hover:underline-offset-2"> class="group-hover-card-title decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 group-hover:underline group-hover:underline-offset-2">
{{ $.Title | emojify }} {{ $.Title | emojify }}
<span class="cursor-default align-top text-xs text-neutral-400 dark:text-neutral-500"> <span class="cursor-default align-top text-xs text-neutral-400 dark:text-neutral-500">
<span class="rtl:hidden">&#8599;</span> <span class="rtl:hidden">&#8599;</span>
@@ -80,7 +80,7 @@
</div> </div>
{{ else }} {{ else }}
<div <div
class="decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 hover:underline hover:underline-offset-2"> class="group-hover-card-title decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 group-hover:underline group-hover:underline-offset-2">
{{ .Title | emojify }} {{ .Title | emojify }}
</div> </div>
{{ end }} {{ end }}
@@ -91,7 +91,9 @@
{{ partial "extend-article-link.html" . }} {{ partial "extend-article-link.html" . }}
{{ end }} {{ end }}
</div> </div>
<div class="text-sm text-neutral-500 dark:text-neutral-400">{{ partial "article-meta/basic.html" . }}</div> <div class="group-hover-cancel text-sm text-neutral-500 dark:text-neutral-400">
{{ partial "article-meta/basic.html" . }}
</div>
{{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }} {{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}
<div class="prose dark:prose-invert max-w-fit py-1">{{ .Summary | plainify }}</div> <div class="prose dark:prose-invert max-w-fit py-1">{{ .Summary | plainify }}</div>
{{ end }} {{ end }}