fix: article-pagination

- simplify html
- fix rtl item alignment
- fix empty span tag when showDate is false
- align hover effect with other element, removes group hover underline
This commit is contained in:
ZhenShuo Leo
2025-10-09 17:08:12 +08:00
parent 6c8e0d7933
commit c9c8a36c16
2 changed files with 27 additions and 81 deletions

View File

@@ -657,6 +657,9 @@ body.zen-mode-enable {
.me-4 {
margin-inline-end: calc(var(--spacing) * 4);
}
.me-6 {
margin-inline-end: calc(var(--spacing) * 6);
}
.prose {
color: var(--tw-prose-body);
max-width: 65ch;
@@ -1148,9 +1151,6 @@ body.zen-mode-enable {
.mt-20 {
margin-top: calc(var(--spacing) * 20);
}
.mt-\[0\.1rem\] {
margin-top: 0.1rem;
}
.mt-\[0\.5rem\] {
margin-top: 0.5rem;
}
@@ -1220,9 +1220,6 @@ body.zen-mode-enable {
.ml-2 {
margin-left: calc(var(--spacing) * 2);
}
.ml-3 {
margin-left: calc(var(--spacing) * 3);
}
.box-border {
box-sizing: border-box;
}
@@ -2510,27 +2507,6 @@ body.zen-mode-enable {
}
}
}
.group-hover\:text-primary-600 {
&:is(:where(.group):hover *) {
@media (hover: hover) {
color: rgba(var(--color-primary-600), 1);
}
}
}
.group-hover\:underline {
&:is(:where(.group):hover *) {
@media (hover: hover) {
text-decoration-line: underline;
}
}
}
.group-hover\:decoration-primary-500 {
&:is(:where(.group):hover *) {
@media (hover: hover) {
text-decoration-color: rgba(var(--color-primary-500), 1);
}
}
}
.group-hover\:opacity-100 {
&:is(:where(.group):hover *) {
@media (hover: hover) {
@@ -3231,11 +3207,6 @@ body.zen-mode-enable {
display: none;
}
}
.ltr\:inline {
&:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
display: inline;
}
}
.rtl\:-mr-\[79px\] {
&:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
margin-right: calc(79px * -1);
@@ -3256,9 +3227,9 @@ body.zen-mode-enable {
display: none;
}
}
.rtl\:inline {
.rtl\:rotate-180 {
&:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
display: inline;
rotate: 180deg;
}
}
.dark\:flex {
@@ -3504,15 +3475,6 @@ body.zen-mode-enable {
}
}
}
.dark\:group-hover\:text-primary-400 {
&:is(.dark *) {
&:is(:where(.group):hover *) {
@media (hover: hover) {
color: rgba(var(--color-primary-400), 1);
}
}
}
}
.dark\:hover\:\!bg-primary-700 {
&:is(.dark *) {
&:hover {

View File

@@ -9,52 +9,36 @@
<div class="pt-8">
<hr class="border-dotted border-neutral-300 dark:border-neutral-600">
<div class="flex justify-between pt-3">
<span>
<span class="flex flex-col">
{{ if $prev }}
<a class="flex group mr-3" href="{{ $prev.RelPermalink }}">
<span
class="mr-3 text-neutral-700 group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400"
>&larr;</span
>
<span
class="ml-3 text-neutral-700 group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
>&rarr;</span
>
<span class="flex flex-col">
<span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500"
>{{ $prev.Title | emojify }}</span
>
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
{{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
{{ partial "meta/date.html" $prev.Date }}
{{ end }}
</span>
<a
class="flex text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400"
href="{{ $prev.RelPermalink }}">
<span class="leading-6">
<span class="inline-block rtl:rotate-180">&larr;</span>&ensp;{{ $prev.Title | emojify }}
</span>
</a>
{{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
<span class="ms-6 mt-1 text-xs text-neutral-500 dark:text-neutral-400">
{{ partial "meta/date.html" $prev.Date }}
</span>
{{ end }}
{{ end }}
</span>
<span>
<span class="flex flex-col items-end">
{{ if $next }}
<a class="flex text-right group ml-3" href="{{ $next.RelPermalink }}">
<span class="flex flex-col">
<span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500"
>{{ $next.Title | emojify }}</span
>
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
{{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
{{ partial "meta/date.html" $next.Date }}
{{ end }}
</span>
<a
class="flex text-right text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400"
href="{{ $next.RelPermalink }}">
<span class="leading-6">
{{ $next.Title | emojify }}&ensp;<span class="inline-block rtl:rotate-180">&rarr;</span>
</span>
<span
class="ml-3 text-neutral-700 group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400"
>&rarr;</span
>
<span
class="mr-3 text-neutral-700 group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
>&larr;</span
>
</a>
{{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
<span class="me-6 mt-1 text-xs text-neutral-500 dark:text-neutral-400">
{{ partial "meta/date.html" $next.Date }}
</span>
{{ end }}
{{ end }}
</span>
</div>