Fixes#3168. (Implemented by [jules.google](https://jules.google).)
This commit resolves issues with footnote and citation styling in
Distill posts, particularly ensuring that pop-up contents and the
numbers themselves respect the site's light/dark theme via shadow DOM
style definitions.
Key changes:
1. **`d-hover-box` Internal Styling (template.v2.js):**
The `<style>` tag within the `d-hover-box` component's template
in `assets/js/distillpub/template.v2.js` has been updated.
Styles for `.panel` (the main pop-up container) now define:
- `background-color: var(--global-card-bg-color);`
- `border: 1px solid var(--global-divider-color);`
- `color: var(--global-text-color);` (for default text)
- Links within the panel are styled with
`color: var(--global-theme-color);` and
`color: var(--global-hover-color);` on hover.
This ensures pop-up content is correctly themed from within its
shadow DOM.
2. **Footnote/Citation Number Color (template.v2.js):**
The hardcoded `hsla(206, 90%, 20%, 0.7)` color previously used for
footnote numbers (in `d-footnote` template) and citation numbers
(in `d-cite` template) in `assets/js/distillpub/template.v2.js`
has been replaced with `color: var(--global-theme-color);`.
3. **Cleaned `_sass/_distill.scss`:**
Removed the (now redundant) global CSS overrides for `d-hover-box`
from `_sass/_distill.scss`, as these styles are now correctly
encapsulated within the `d-hover-box` component itself.
These changes ensure that all aspects of Distill footnotes and
citations (numbers, pop-up background, pop-up text, and links within
pop-ups) are styled using theme-aware CSS variables, providing
correct visual appearance and readability in both light and dark modes.
---------
Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
summary:
- adds prettier formatter configuration
- formats the entire repo using prettier, ignoring minified files
(`*.min.css`) and heavy generated html
- changes extensions of all `.html` files to `.liquid`, which is more
correct and necessary for prettier to work correctly
- replaces "%-" and "-%" with just "%" — manual liquid formatting using
minus signs is superfluous since we are compressing and minifying the
code anyway
- adds CI action for running prettier check on PR and pushes to master
giscus settings in `_config.yml` had al-folio repo specified by default.
many users kept these defaults in their own repos, which resulted in
getting comments from blog posts of different users posted to al-folio
discussions. this is undesirable, since users lose control over the
discussions in their blogs.
this PR solves the issue:
- first, we set `giscus.repo` to blank in `_config.yml`. if the field is
kept blank, when the website is built locally, the user will see a
warning saying that giscus comments are misconfigured.
- second, we add a step to the `deploy` workflow that writes repository
name to `giscus.repo` in `_config.yml`. that way, even if `giscus.repo`
field is left black or set to an incorrect repo, it gets correctly
populated at deployment time.
other small changes in this PR are small stylistic adjustments.
* updating distill post to show fixes done
* fix for colors in numerated lists and tables
* fixing blockquotes
* fixing colors in math, footnotes, references, hover boxes, code highlights
* Add example distill overrides
* reverted back changes in distill template.v2.js
Co-authored-by: Maruan Al-Shedivat <alshedivat.maruan@gmail.com>
