Fix: Improve footnote and citation colors in Distill posts #3172
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This commit addresses an issue where footnotes, citations, and their
pop-ups had poor contrast in dark mode on Distill-style blog posts.
The following changes were made to `_sass/_distill.scss`:
- Footnotes (`d-footnote`) and citations (`d-cite a`, `a.citation`) now use the CSS variable `var(--global-theme-color)` for their text color. This variable is theme-aware and ensures appropriate visibility in both light and dark modes.
- Hover states for footnotes and citations now use `var(--global-hover-color)`.
- Footnote pop-ups (using the `d-hover-box` custom element) have been styled:
- Background color is set to `var(--global-card-bg-color)`.
- Border is set to `1px solid var(--global-divider-color)`.
- Text color within the pop-up is `var(--global-text-color)`.
- Links within the pop-up also use `var(--global-theme-color)`.
These changes ensure that footnotes, citations, and their associated pop-ups are readable and have good contrast in both light and dark themes, consistent with the overall site styling.
✅ Deploy Preview for relaxed-lollipop-b6bc17 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Failed prettier code check. Check this file for more information. |
This commit addresses issues with hardcoded colors in Distill-style
posts, ensuring that footnote/citation numbers and their pop-ups
respect the site's light/dark theme settings.
Specifically, this commit includes:
1. **Footnote/Citation Number Color:**
Modified `assets/js/distillpub/template.v2.js` to change the
inline styles for `d-cite` and `d-footnote` custom elements.
The hardcoded `hsla(206, 90%, 20%, 0.7)` color for the
numbers (spans/sup elements) has been replaced with
`var(--global-theme-color)`.
2. **Citation/Footnote Pop-up Styling (`d-hover-box`):**
Ensured that styles in `_sass/_distill.scss` for `d-hover-box`
(used by both footnotes and citations for their pop-ups) correctly
use theme variables:
- `background-color: var(--global-card-bg-color)`
- `border: 1px solid var(--global-divider-color)`
- `color: var(--global-text-color)` for text content
- `a { color: var(--global-theme-color); }` for links
These changes ensure that all aspects of footnotes and citations,
including their pop-up previews, are now consistently styled
according to the active theme, improving readability and visual
consistency, especially in dark mode.
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.
2 tasks
rinehartj
approved these changes
May 22, 2025
OmidSa75
pushed a commit
to OmidSa75/OmidSa75.github.io
that referenced
this pull request
Jun 8, 2025
…t#3172) Fixes alshedivat#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>
odcambc
pushed a commit
to odcambc/odcambc.github.io
that referenced
this pull request
Jul 13, 2025
…t#3172) Fixes alshedivat#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>
easrai
pushed a commit
to easrai/easrai.github.io
that referenced
this pull request
Jul 14, 2025
…t#3172) Fixes alshedivat#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>
Teusner
pushed a commit
to Teusner/Teusner.github.io
that referenced
this pull request
Jul 30, 2025
…t#3172) Fixes alshedivat#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>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #3168. (Implemented by 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:
d-hover-boxInternal Styling (template.v2.js):The
<style>tag within thed-hover-boxcomponent's templatein
assets/js/distillpub/template.v2.jshas 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)color: var(--global-theme-color);andcolor: var(--global-hover-color);on hover.This ensures pop-up content is correctly themed from within its
shadow DOM.
Footnote/Citation Number Color (template.v2.js):
The hardcoded
hsla(206, 90%, 20%, 0.7)color previously used forfootnote numbers (in
d-footnotetemplate) and citation numbers(in
d-citetemplate) inassets/js/distillpub/template.v2.jshas been replaced with
color: var(--global-theme-color);.Cleaned
_sass/_distill.scss:Removed the (now redundant) global CSS overrides for
d-hover-boxfrom
_sass/_distill.scss, as these styles are now correctlyencapsulated within the
d-hover-boxcomponent 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.