pages/assets/js/distillpub/overrides.js
Abhilesh Dhawanjewar 47b982bd0d
Add sidenote examples, related posts and giscus to distill posts (#3103)
This PR adds a few stylistic improvements to the distill-style blog
posts:

- Update distill blog post example to showcase sidenotes as an
alternative to styles in PR #3077
- Showcase equations in sidenotes (closes #1242)
- Add `overrides.js` to match footnotes and citation styles with global
theme styling
- Add "related posts" sections if enabled to distill style posts
- Add "giscus" section if enabled to distill style posts



https://github.com/user-attachments/assets/b19a9cd9-779d-4d89-a4fb-eb14fb384480
2025-07-16 15:07:42 -03:00

28 lines
1.4 KiB
JavaScript

$(window).on("load", function () {
document.querySelectorAll("d-footnote").forEach(function (footnote) {
footnote.shadowRoot.querySelector("sup > span").setAttribute("style", "color: var(--global-theme-color);");
footnote.shadowRoot
.querySelector("d-hover-box")
.shadowRoot.querySelector("style")
.sheet.insertRule(".panel {background-color: var(--global-bg-color) !important;}");
footnote.shadowRoot
.querySelector("d-hover-box")
.shadowRoot.querySelector("style")
.sheet.insertRule(".panel {border-color: var(--global-divider-color) !important;}");
});
// Override styles of the citations.
document.querySelectorAll("d-cite").forEach(function (cite) {
cite.shadowRoot.querySelector("div > span").setAttribute("style", "color: var(--global-theme-color);");
cite.shadowRoot.querySelector("style").sheet.insertRule("ul li a {color: var(--global-text-color) !important; text-decoration: none;}");
cite.shadowRoot.querySelector("style").sheet.insertRule("ul li a:hover {color: var(--global-theme-color) !important;}");
cite.shadowRoot
.querySelector("d-hover-box")
.shadowRoot.querySelector("style")
.sheet.insertRule(".panel {background-color: var(--global-bg-color) !important;}");
cite.shadowRoot
.querySelector("d-hover-box")
.shadowRoot.querySelector("style")
.sheet.insertRule(".panel {border-color: var(--global-divider-color) !important;}");
});
});