💄 fix: adapt footnotes styling for zola 0.19.x & 0.20.x

Also makes code tags slightly smaller (to match the font) in footnotes.

Zola 0.20.0 wraps footnotes in a <footer> tag, which broke existing styles.
This change makes the CSS selectors work with both old (<ol>) and new
(<footer>) HTML structures while maintaining the same visual appearance.
This commit is contained in:
welpo 2025-02-16 16:25:40 +01:00
parent 09e724a82b
commit 1c067e708e
No known key found for this signature in database
GPG key ID: A2F978CF4EC1F5A6
13 changed files with 35 additions and 1 deletions

View file

@ -43,4 +43,6 @@ Per especificar aquestes opcions:
A part d'això, és un tema ràpid amb HTML i CSS que funciona sense JavaScript. Just com hauria de ser (la majoria de) la web :-) A part d'això, és un tema ràpid amb HTML i CSS que funciona sense JavaScript. Just com hauria de ser (la majoria de) la web :-)
---
[^1]: Per codificar el teu correu en base64 pots utilitzar [eines en línia](https://www.base64encode.org/) o, al terminal, executa: `printf 'mail@example.com' | base64`. [^1]: Per codificar el teu correu en base64 pots utilitzar [eines en línia](https://www.base64encode.org/) o, al terminal, executa: `printf 'mail@example.com' | base64`.

View file

@ -43,4 +43,6 @@ Para especificar estas opciones:
Aparte de eso, es un tema rápido con HTML y CSS que funciona con JavaScript deshabilitado. Justo como debería ser (la mayoría de) la web :-) Aparte de eso, es un tema rápido con HTML y CSS que funciona con JavaScript deshabilitado. Justo como debería ser (la mayoría de) la web :-)
---
[^1]: Para codificar tu correo electrónico en base64 puedes usar [herramientas en línea](https://www.base64encode.org/) o, en tu terminal, ejecutar: `printf 'mail@example.com' | base64`. [^1]: Para codificar tu correo electrónico en base64 puedes usar [herramientas en línea](https://www.base64encode.org/) o, en tu terminal, ejecutar: `printf 'mail@example.com' | base64`.

View file

@ -43,4 +43,6 @@ To specify these settings:
Other than that, it's a fast theme with HTML and CSS which works with JavaScript disabled. Just the way (most of) the web should be :-) Other than that, it's a fast theme with HTML and CSS which works with JavaScript disabled. Just the way (most of) the web should be :-)
---
[^1]: To encode your email in base64 you can use [online tools](https://www.base64encode.org/) or, on your terminal, run: `printf 'mail@example.com' | base64`. [^1]: To encode your email in base64 you can use [online tools](https://www.base64encode.org/) or, on your terminal, run: `printf 'mail@example.com' | base64`.

View file

@ -105,4 +105,6 @@ A Rust, declares una variable mutable amb `let mut x = 5;`, mentre que a Python,
> >
> — Mercè Rodoreda, La plaça del Diamant > — Mercè Rodoreda, La plaça del Diamant
---
[^1]: I aquí tens un exemple de nota a peu de pàgina! [^1]: I aquí tens un exemple de nota a peu de pàgina!

View file

@ -105,4 +105,6 @@ En Rust, declaras una variable mutable con `let mut x = 5;`, mientras que en Pyt
> >
> — Miguel de Unamuno, Niebla > — Miguel de Unamuno, Niebla
---
[^1]: ¡Y aquí tienes un ejemplo de una nota al pie de página! [^1]: ¡Y aquí tienes un ejemplo de una nota al pie de página!

View file

@ -105,4 +105,6 @@ In Rust, you declare a mutable variable with `let mut x = 5;`, whereas in Python
> >
> — Charlie Kaufman, Synecdoche, New York > — Charlie Kaufman, Synecdoche, New York
---
[^1]: And here's an example of a footnote! [^1]: And here's an example of a footnote!

View file

@ -1005,6 +1005,8 @@ Aquesta opció està habilitada per defecte. Per desactivar-la per una pàgina,
Per a més informació, consulta la [pàgina de documentació de CSP](@/blog/security/index.ca.md). Per a més informació, consulta la [pàgina de documentació de CSP](@/blog/security/index.ca.md).
---
[^1]: Si estàs utilitzant un repositori Git remot, potser voldràs automatitzar el procés d'actualització del camp `updated`. Aquí tens una guia per a això: [Zola Git Hook: actualitzant les dates de les publicacions](https://osc.garden/ca/blog/zola-date-git-hook/). [^1]: Si estàs utilitzant un repositori Git remot, potser voldràs automatitzar el procés d'actualització del camp `updated`. Aquí tens una guia per a això: [Zola Git Hook: actualitzant les dates de les publicacions](https://osc.garden/ca/blog/zola-date-git-hook/).
[^2]: Per a codificar el teu correu electrònic en base64 pots utilitzar [eines en línia](https://www.base64encode.org/) o, al teu terminal, executar: `printf 'mail@example.com' | base64` [^2]: Per a codificar el teu correu electrònic en base64 pots utilitzar [eines en línia](https://www.base64encode.org/) o, al teu terminal, executar: `printf 'mail@example.com' | base64`

View file

@ -1006,6 +1006,8 @@ Esta función está habilitada por defecto. Para deshabilitarla (y permitir todo
Para obtener más información, consulta la [página de documentación de CSP](@/blog/security/index.es.md). Para obtener más información, consulta la [página de documentación de CSP](@/blog/security/index.es.md).
---
[^1]: Si estás utilizando un repositorio Git remoto, es posible que quieras automatizar el proceso de actualización del campo `updated`. Aquí tienes una guía para eso: [Zola Git Hook: actualizando las fechas de las publicaciones](https://osc.garden/es/blog/zola-date-git-hook/). [^1]: Si estás utilizando un repositorio Git remoto, es posible que quieras automatizar el proceso de actualización del campo `updated`. Aquí tienes una guía para eso: [Zola Git Hook: actualizando las fechas de las publicaciones](https://osc.garden/es/blog/zola-date-git-hook/).
[^2]: Para codificar tu correo electrónico en base64 puedes utilizar [herramientas en línea](https://www.base64encode.org/) o, en tu terminal, ejecutar: `printf 'mail@example.com' | base64` [^2]: Para codificar tu correo electrónico en base64 puedes utilizar [herramientas en línea](https://www.base64encode.org/) o, en tu terminal, ejecutar: `printf 'mail@example.com' | base64`

View file

@ -1016,6 +1016,8 @@ This feature is enabled by default. To disable it (and allow all connections), s
See the [CSP documentation page](@/blog/security/index.md) for more information. See the [CSP documentation page](@/blog/security/index.md) for more information.
---
[^1]: If you're using a remote Git repository, you might want to automate the process of updating the `updated` field. Here's a guide for that: [Zola Git Pre-Commit Hook: Updating Post Dates](https://osc.garden/blog/zola-date-git-hook/). [^1]: If you're using a remote Git repository, you might want to automate the process of updating the `updated` field. Here's a guide for that: [Zola Git Pre-Commit Hook: Updating Post Dates](https://osc.garden/blog/zola-date-git-hook/).
[^2]: To encode your email in base64 you can use [online tools](https://www.base64encode.org/) or, on your terminal, run: `printf 'mail@example.com' | base64`. [^2]: To encode your email in base64 you can use [online tools](https://www.base64encode.org/) or, on your terminal, run: `printf 'mail@example.com' | base64`.

View file

@ -41,4 +41,6 @@ Pots desactivar les capçaleres (permitint-ho tot) en una pàgina, secció, o gl
{ directive = "style-src", domains = ["'self'", "'unsafe-inline'"] }, { directive = "style-src", domains = ["'self'", "'unsafe-inline'"] },
``` ```
---
[^1]: Requereix una configuració adequada del servidor web (p. ex., redirigir el trànsit HTTP a HTTPS). [^1]: Requereix una configuració adequada del servidor web (p. ex., redirigir el trànsit HTTP a HTTPS).

View file

@ -41,4 +41,6 @@ Puedes desactivar las cabeceras (permitiendo todo) en una página, sección, o g
{ directive = "style-src", domains = ["'self'", "'unsafe-inline'"] }, { directive = "style-src", domains = ["'self'", "'unsafe-inline'"] },
``` ```
---
[^1]: Requiere una configuración adecuada del servidor web (por ejemplo, redirigir el tráfico HTTP a HTTPS). [^1]: Requiere una configuración adecuada del servidor web (por ejemplo, redirigir el tráfico HTTP a HTTPS).

View file

@ -41,4 +41,6 @@ You can disable the CSP (allowing all connections) on a page, section, or global
{ directive = "style-src", domains = ["'self'", "'unsafe-inline'"] }, { directive = "style-src", domains = ["'self'", "'unsafe-inline'"] },
``` ```
---
[^1]: Requires proper webserver configuration (e.g. redirecting HTTP traffic to HTTPS). [^1]: Requires proper webserver configuration (e.g. redirecting HTTP traffic to HTTPS).

View file

@ -156,6 +156,11 @@ hr {
height: 1px; height: 1px;
} }
.footnotes-list,
.footnotes {
text-align: start;
}
.footnote-reference { .footnote-reference {
font-size: 0.7rem; font-size: 0.7rem;
font-family: var(--serif-font); font-family: var(--serif-font);
@ -180,7 +185,12 @@ hr {
font-size: 0.8rem; font-size: 0.8rem;
} }
.footnotes-list a[href^="#fr-"] { .footnotes-list a[href^="#fr-"],
.footnotes a[href^="#fr-"] {
font-size: 0.8rem;
}
.footnotes code {
font-size: 0.8rem; font-size: 0.8rem;
} }