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>
Again, I saw this version problem with current version of our docker
image. Supposedly, there is some json package problem which I dealt
with.
But here is the overall solution to this problem for whoever is having
it.
---------
Co-authored-by: George <31376482+george-gca@users.noreply.github.com>
Update CUSTOMIZE.md to include steps to deploy al-folio on Netlify.
---------
Co-authored-by: Henry <Henry@home.com>
Co-authored-by: Henry_Lab <henry@lab.com>
I added a [Remote Development
Containers](https://code.visualstudio.com/docs/devcontainers/tutorial)
in Visual Studio Code (VSCode).
Lots of people like to develop in Containers to have a clean system.
With this PR, it is possible to work with al-folio without any
installation (except for VS Code, its Remote Dev Container extension,
and Docker).
Once you've opened the `al-folio` repository, a prompt will appear
requesting to reopen the project within a container.
<img width="541" alt="grafik"
src="https://github.com/alshedivat/al-folio/assets/1998723/2963446f-8e42-4df1-9e8c-22691d78b7e4">
Upon doing so, Jekyll will automatically start within the container and
prompt you to open the website's preview sidebar directly in VSCode or
using your Browser. Additionally, it installs extensions for `liquid`
and Prettier (`npx prettier`). Files are formatted using
`al-folios`-prettier settings (`.prettierrc`) to streamline pull request
submission.
Additionally, the performance seems to be much better compared to the
`docker-compose`setup, see #2333.
---------
Co-authored-by: George <31376482+george-gca@users.noreply.github.com>
The GitHub actions were running everytime a new commit was made to the
repo, but that wasn't needed. For example, we don't need to try to
create a new docker image if the libraries didn't change, same to build
the whole site after a change in the README.md.
---------
Signed-off-by: George Araújo <george.gcac@gmail.com>
