Fix issue with anchor links reflowing
This commit is contained in:
parent
b5a00fd776
commit
c87bda3621
@ -85,8 +85,7 @@ export default async function(eleventyConfig) {
|
||||
eleventyConfig.addPlugin(IdAttributePlugin, {
|
||||
// by default we use Eleventy’s built-in `slugify` filter:
|
||||
// slugify: eleventyConfig.getFilter("slugify"),
|
||||
// default:
|
||||
// selector: "h1,h2,h3,h4,h5,h6",
|
||||
// selector: "h1,h2,h3,h4,h5,h6", // default
|
||||
});
|
||||
|
||||
eleventyConfig.addShortcode("currentBuildDate", () => {
|
||||
|
@ -20,17 +20,18 @@ class HeadingAnchors extends HTMLElement {
|
||||
}
|
||||
/* For headings that already have links */
|
||||
:is(h1, h2, h3, h4, h5, h6):has(a[href]:not(.heading-anchor)):is(:hover, :focus-within) .heading-anchor:after {
|
||||
content: "#";
|
||||
content: "#" / "";
|
||||
opacity: 1;
|
||||
}
|
||||
.heading-anchor:focus:after,
|
||||
.heading-anchor:hover:after {
|
||||
content: "#";
|
||||
content: "#" / "";
|
||||
opacity: 1;
|
||||
}
|
||||
.heading-anchor:after {
|
||||
content: "#";
|
||||
content: "#" / "";
|
||||
margin-left: .25em;
|
||||
color: #aaa;
|
||||
opacity: 0;
|
||||
}`;
|
||||
|
||||
constructor() {
|
||||
@ -70,7 +71,6 @@ class HeadingAnchors extends HTMLElement {
|
||||
|
||||
getAnchorElement(heading) {
|
||||
let anchor = document.createElement("a");
|
||||
anchor.setAttribute("data-pagefind-ignore", "");
|
||||
anchor.href = `#${heading.id}`;
|
||||
anchor.classList.add("heading-anchor");
|
||||
return anchor;
|
||||
|
Loading…
Reference in New Issue
Block a user