marcel
/
congo
mirror of https://github.com/jpanther/congo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

♻️ Adopt Tailwind hover-group classes

pull/100/head
James Panther 2022-02-03 11:07:12 +11:00
parent a55b85f714
commit 0602108f56
No known key found for this signature in database
GPG Key ID: D36F789E45745D17
4 changed files with 46 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
assets/css/compiled/main.css
View File

@ -921,48 +921,6 @@ body a, body button {
display: none;
}
/* Heading anchors */
.prose .heading-anchor:hover {
background-color: transparent !important;
--tw-text-opacity: 1 !important;
color: rgba(var(--color-primary-500), var(--tw-text-opacity)) !important;
-webkit-text-decoration-line: underline !important;
text-decoration-line: underline !important;
}
.prose .heading-anchor:hover, .prose .heading-anchor:focus, .prose h2:hover > .heading-anchor, .prose h3:hover > .heading-anchor, .prose h4:hover > .heading-anchor {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-200), var(--tw-text-opacity));
-webkit-text-decoration-line: none;
text-decoration-line: none;
opacity: 1;
}
.dark .prose .heading-anchor:hover, .dark .prose .heading-anchor:focus, .dark .prose h2:hover > .heading-anchor, .dark .prose h3:hover > .heading-anchor, .dark .prose h4:hover > .heading-anchor {
--tw-text-opacity: 1;
color: rgba(var(--color-neutral-700), var(--tw-text-opacity));
}
/* Article pagination */
.article-pagination a:hover .article-pagination-title {
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
-webkit-text-decoration-color: rgb(var(--color-primary-500));
text-decoration-color: rgb(var(--color-primary-500));
}
.article-pagination a:hover .article-pagination-direction {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-600), var(--tw-text-opacity));
}
.dark .article-pagination a:hover .article-pagination-direction {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-400), var(--tw-text-opacity));
}
/* RTL support */
[dir="rtl"] .prose blockquote {
@ -2198,11 +2156,6 @@ body a, body button {
text-decoration-line: none !important;
}
.no-underline {
-webkit-text-decoration-line: none;
text-decoration-line: none;
}
.opacity-0 {
opacity: 0;
}
@ -2330,6 +2283,30 @@ body a, body button {
outline-color: transparent;
}
.group:hover .group-hover\:text-primary-600 {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-600), var(--tw-text-opacity));
}
.group:hover .group-hover\:text-primary-300 {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-300), var(--tw-text-opacity));
}
.group:hover .group-hover\:underline {
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
}
.group:hover .group-hover\:decoration-primary-500 {
-webkit-text-decoration-color: rgb(var(--color-primary-500));
text-decoration-color: rgb(var(--color-primary-500));
}
.group:hover .group-hover\:opacity-100 {
opacity: 1;
}
[dir="ltr"] .ltr\:right-0 {
right: 0px;
}
@ -2614,6 +2591,16 @@ body a, body button {
background-color: rgba(var(--color-primary-900), var(--tw-bg-opacity));
}
.dark .group:hover .dark\:group-hover\:text-primary-400 {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-400), var(--tw-text-opacity));
}
.dark .group:hover .dark\:group-hover\:text-neutral-700 {
--tw-text-opacity: 1;
color: rgba(var(--color-neutral-700), var(--tw-text-opacity));
}
@media (min-width: 640px) {
.sm\:mb-0 {
margin-bottom: 0px;

20
assets/css/main.css
View File

@ -21,26 +21,6 @@ body button {
@apply hidden;
}
/* Heading anchors */
.prose .heading-anchor:hover {
@apply underline bg-transparent text-primary-500 !important;
}
.prose .heading-anchor:hover,
.prose .heading-anchor:focus,
.prose h2:hover > .heading-anchor,
.prose h3:hover > .heading-anchor,
.prose h4:hover > .heading-anchor {
@apply no-underline opacity-100 text-primary-200 dark:text-neutral-700;
}
/* Article pagination */
.article-pagination a:hover .article-pagination-title {
@apply underline decoration-primary-500;
}
.article-pagination a:hover .article-pagination-direction {
@apply text-primary-600 dark:text-primary-400;
}
/* RTL support */
.prose blockquote {
@apply rtl:pr-4 rtl:border-l-0 rtl:border-r-4;

2
layouts/_default/_markup/render-heading.html
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 }}>

20
layouts/partials/article-pagination.html
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>