♻️ Adopt Tailwind hover-group classes

This commit is contained in:
James Panther
2022-02-03 11:07:12 +11:00
parent a55b85f714
commit 0602108f56
4 changed files with 46 additions and 77 deletions
+1 -1
View File
@@ -1 +1 @@
<h{{ .Level }} id="{{ .Anchor | safeURL }}" class="relative">{{ .Text | safeHTML }} {{ if .Page.Params.showHeadingAnchors | default (.Page.Site.Params.article.showHeadingAnchors | default true) }}<a class="absolute top-0 w-6 no-underline transition-opacity opacity-0 heading-anchor ltr:-left-6 rtl:-right-6" href="#{{ .Anchor | safeURL }}" aria-label="{{ i18n "article.anchor_label" }}">#</a>{{ end }}</h{{ .Level }}>
<h{{ .Level }} id="{{ .Anchor | safeURL }}" class="relative group">{{ .Text | safeHTML }} {{ if .Page.Params.showHeadingAnchors | default (.Page.Site.Params.article.showHeadingAnchors | default true) }}<span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#{{ .Anchor | safeURL }}" aria-label="{{ i18n "article.anchor_label" }}">#</a></span>{{ end }}</h{{ .Level }}>
+11 -9
View File
@@ -6,22 +6,23 @@
{{ $next = .PrevInSection }}
{{ $prev = .NextInSection }}
{{ end }}
<div class="pt-8 article-pagination">
<div class="pt-8">
<hr class="border-dotted border-neutral-300 dark:border-neutral-600" />
<div class="flex justify-between pt-3">
<span>
{{ if $prev }}
<a class="flex" href="{{ $prev.RelPermalink }}">
<a class="flex group" href="{{ $prev.RelPermalink }}">
<span
class="mr-3 ltr:inline rtl:hidden article-pagination-direction text-neutral-700 dark:text-neutral"
class="mr-3 ltr:inline rtl:hidden text-neutral-700 dark:text-neutral group-hover:text-primary-600 dark:group-hover:text-primary-400"
>&larr;</span
>
<span
class="ml-3 ltr:hidden rtl:inline article-pagination-direction text-neutral-700 dark:text-neutral"
class="ml-3 ltr:hidden rtl:inline text-neutral-700 dark:text-neutral group-hover:text-primary-600 dark:group-hover:text-primary-400"
>&rarr;</span
>
<span class="flex flex-col">
<span class="article-pagination-title mt-[0.1rem] leading-6"
<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">
@@ -35,9 +36,10 @@
</span>
<span>
{{ if $next }}
<a class="flex text-right" href="{{ $next.RelPermalink }}">
<a class="flex text-right group" href="{{ $next.RelPermalink }}">
<span class="flex flex-col">
<span class="article-pagination-title mt-[0.1rem] leading-6"
<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">
@@ -47,11 +49,11 @@
</span>
</span>
<span
class="ml-3 ltr:inline rtl:hidden article-pagination-direction text-neutral-700 dark:text-neutral"
class="ml-3 ltr:inline rtl:hidden text-neutral-700 dark:text-neutral group-hover:text-primary-600 dark:group-hover:text-primary-400"
>&rarr;</span
>
<span
class="mr-3 ltr:hidden rtl:inline article-pagination-direction text-neutral-700 dark:text-neutral"
class="mr-3 ltr:hidden rtl:inline text-neutral-700 dark:text-neutral group-hover:text-primary-600 dark:group-hover:text-primary-400"
>&larr;</span
>
</a>