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
Implementing #1440. Still not sure if the year should be shown there or
not. Also, I limited to be displayed at least 2 at most 3 elements on
the row of featured blog posts, since when having only 1 featured post
the card would occupy the whole row (and it looks weird). What do you
think @alshedivat? Also, idk how to force the cards to have the same
height. I think it would look nicer, but my lack of web dev skills made
a difference here.
Some current screenshots:
---------
Signed-off-by: George Araujo <george.gcac@gmail.com>
Co-authored-by: Maruan <alshedivat@users.noreply.github.com>
* Add webpage to academic pages list
* adding panelbear analytics
* added categories for projects and horizontal mode display for projects
* rewrote the code to ensure it works properly with current project definitions
* Style adjustments
* added blockquote format, jekyll-archives, tag, year archive pages, and reading time.
* added archive meta to blog posts list and individual posts.
* added sitemap
* stylistic modifications to jekyll-archive addition
* Minor fixes
Co-authored-by: Maruan Al-Shedivat <alshedivat.maruan@gmail.com>
