weeheavy/pelican-theme
1
0
Fork 0
forked from remote/pelican
Code Pull requests Activity

feat: hover headings anchor

Browse source
This commit is contained in:
Oliver Ladner 2026-06-19 13:25:00 +02:00
commit 68c87498a7
3 changed files with 35 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

13
static/css/in.css
View file

@ -71,7 +71,18 @@
/*Hide heading anchor links unless hovering over them*/
.headerlink {
@apply no-underline text-rp-dawn-love ml-1 md:ml-2 hover:no-underline;
/*@apply no-underline text-rp-dawn-love ml-1 md:ml-2 hover:no-underline;*/
@apply no-underline text-rp-dawn-love ml-1 md:ml-2 hover:no-underline opacity-0 transition-opacity duration-150;
}
h1:hover .headerlink,
h2:hover .headerlink,
h3:hover .headerlink,
h4:hover .headerlink,
h5:hover .headerlink,
h6:hover .headerlink,
.headerlink:focus-visible {
@apply opacity-100;
}
.note {

23
static/css/out.css
View file

@ -107,7 +107,7 @@
}
/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*/
/*
@ -944,7 +944,7 @@ ul.tagcloud li {
font-weight: 500;
font-family: inherit;
color: var(--tw-prose-kbd);
box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
font-size: 0.875em;
border-radius: 0.3125rem;
padding-top: 0.1875em;
@ -1065,7 +1065,7 @@ ul.tagcloud li {
--tw-prose-quote-borders: #e5e7eb;
--tw-prose-captions: #6b7280;
--tw-prose-kbd: #111827;
--tw-prose-kbd-shadows: rgb(17 24 39 / 10%);
--tw-prose-kbd-shadows: 17 24 39;
--tw-prose-code: #111827;
--tw-prose-pre-code: #e5e7eb;
--tw-prose-pre-bg: #1f2937;
@ -1083,7 +1083,7 @@ ul.tagcloud li {
--tw-prose-invert-quote-borders: #374151;
--tw-prose-invert-captions: #9ca3af;
--tw-prose-invert-kbd: #fff;
--tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
--tw-prose-invert-kbd-shadows: 255 255 255;
--tw-prose-invert-code: #fff;
--tw-prose-invert-pre-code: #d1d5db;
--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
@ -1556,10 +1556,15 @@ code {
/*Hide heading anchor links unless hovering over them*/
.headerlink {
/*@apply no-underline text-rp-dawn-love ml-1 md:ml-2 hover:no-underline;*/
margin-left: 0.25rem;
--tw-text-opacity: 1;
color: rgb(180 99 122 / var(--tw-text-opacity, 1));
text-decoration-line: none;
opacity: 0;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.headerlink:hover {
@ -1572,6 +1577,16 @@ code {
}
}
h1:hover .headerlink,
h2:hover .headerlink,
h3:hover .headerlink,
h4:hover .headerlink,
h5:hover .headerlink,
h6:hover .headerlink,
.headerlink:focus-visible {
opacity: 1;
}
.note {
margin: 2rem;
--tw-bg-opacity: 1;

8
templates/base.html
View file

@ -142,14 +142,14 @@
</div>
<div class="col-span-3 p-4 md:border-l-4 border-rp-dawn-overlay dark:border-rp-moon-overlay">
<p class="pb-4">
100% artisanal <a href="https://creativecommons.org/licenses/by-sa/4.0/?ref=chooser-v1" rel="license noopener noreferrer" style="display: inline-block">content licensed under <em>CC BY-SA 4.0</em></a>,
mostly <a href="https://wave.webaim.org/report#/https://lugh.ch/{{ output_file }}">valid <em>WCAG 2.2 AA</em></a>.
100% artisanal <a href="https://creativecommons.org/licenses/by-sa/4.0/?ref=chooser-v1" rel="license noopener noreferrer" style="display: inline-block">content licensed under <em>CC BY-SA 4.0</em></a>.
Valid <a href="https://wave.webaim.org/report#/https://lugh.ch/{{ output_file }}"><em>WCAG 2.2 AA</em></a> (except code blocks, sorry).
</p>
<p class="pb-4">
<a href="/feeds/atom.xml">Atom feed</a> of all blog posts.
Blog post feed: <a href="/feeds/atom.xml">Atom</a>, <a href="/feeds/rss.xml">RSS</a>
</p>
<p class="pb-4">
IndieWeb: <a href="https://bubbles.town">Bubbles</a>, <a href="https://indieblog.page">indieblog.page</a>, <a href="https://indieweb.org/Getting_Started">Getting started on the IndieWeb</a>
IndieWeb: <a href="https://bubbles.town">Bubbles</a>, <a href="https://indieblog.page">indieblog.page</a>, <a href="https://indieweb.org/Getting_Started">Getting started</a>
</p>
</div>
</div>