✨ feat: add option to use sans-serif font everywhere (#343)

config.toml

@@ -71,6 +71,10 @@ taxonomies = [{name = "tags", feed = true}]
 # index_format = "elasticlunr_javascript"
 # index_format = ""
 
+# Use sans-serif font everywhere.
+# By default, the serif font is only used in articles.
+override_serif_with_sans = false
+
 # Enable JavaScript theme toggler to allow users to switch between dark/light mode.
 # If disabled, your site will only use the theme specified in the `default_theme` variable.
 theme_switcher = true

content/blog/mastering-tabi-settings/index.ca.md

@@ -1,7 +1,7 @@
 +++
 title = "Domina la configuració de tabi: guia completa"
 date = 2023-09-18
-updated = 2024-06-27
+updated = 2024-06-28
 description = "Descobreix les múltiples maneres en què pots personalitzar tabi."
 
 [taxonomies]
@@ -185,6 +185,18 @@ Les skins («pells») de tabi canvien el color principal del lloc web. Pots conf
 
 Explora les skins disponibles i aprèn com crear la teva pròpia consultant [la documentació](/ca/blog/customise-tabi/#skins).
 
+### Font sans serif (pal sec)
+
+| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
+|:------:|:------:|:-------------:|:---------------:|:-------------------:|
+|   ❌   |   ❌    |      ✅       |        ❌        |         ❌          |
+
+tabi utilitza una font serif per als paràgrafs dels articles (la que estàs veient ara). Pots canviar a una font sans-serif (la que veus als encapçalaments/menú) a tot el teu lloc configurant `override_serif_with_sans = true` a `config.toml`.
+
+Fes clic a la imatge a continuació per comparar les fonts:
+
+{{ image_toggler(default_src="blog/mastering-tabi-settings/img/serif.webp", toggled_src="blog/mastering-tabi-settings/img/sans-serif.webp", default_alt="Font serif", toggled_alt="Font sans-serif", full_width=true) }}
+
 ### Estils CSS personalitzats
 
 | Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |

content/blog/mastering-tabi-settings/index.es.md

@@ -1,7 +1,7 @@
 +++
 title = "Domina la configuración de tabi: guía completa"
 date = 2023-09-18
-updated = 2024-06-27
+updated = 2024-06-28
 description = "Descubre las múltiples maneras en que puedes personalizar tabi."
 
 [taxonomies]
@@ -185,6 +185,18 @@ Las pieles de tabi cambian el color principal del sitio. Puedes configurar la pi
 
 Explora las pieles disponibles y aprende cómo crear la tuya propia consultando [la documentación](/es/blog/customise-tabi/#skins).
 
+### Fuente sans serif (paloseco)
+
+| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
+|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
+|   ❌   |   ❌    |      ✅       |        ❌        |         ❌          |
+
+tabi utiliza una fuente serif para los párrafos de los artículos (la que estás viendo ahora). Puedes cambiar a una fuente sans serif (la que ves en los encabezados/menú) en todo tu sitio configurando `override_serif_with_sans = true` en `config.toml`.
+
+Haz clic en la imagen para comparar las fuentes:
+
+{{ image_toggler(default_src="blog/mastering-tabi-settings/img/serif.webp", toggled_src="blog/mastering-tabi-settings/img/sans-serif.webp", default_alt="Fuente serif", toggled_alt="Fuente sans-serif", full_width=true) }}
+
 ### Estilos CSS personalizados
 
 | Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |

content/blog/mastering-tabi-settings/index.md

@@ -1,7 +1,7 @@
 +++
 title = "Mastering tabi Settings: A Comprehensive Guide"
 date = 2023-09-18
-updated = 2024-06-27
+updated = 2024-06-28
 description = "Discover the many ways you can customise your tabi site."
 
 [taxonomies]
@@ -185,6 +185,18 @@ tabi's skins change the main colour of the site. You can set the skin in `config
 
 Explore the available skins and learn how to create your own reading [the documentation](/blog/customise-tabi/#skins).
 
+### Sans-serif Font
+
+| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
+|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
+|  ❌  |   ❌    |      ✅       |         ❌        |         ❌          |
+
+tabi uses a serif font for article paragraphs (the one you're seeing now). You can switch to using a sans-serif font (the one on the headers/menu) throughout your entire site by setting `override_serif_with_sans = true` in your `config.toml`.
+
+Click on the image below to compare the two looks:
+
+{{ image_toggler(default_src="blog/mastering-tabi-settings/img/serif.webp", toggled_src="blog/mastering-tabi-settings/img/sans-serif.webp", default_alt="Serif font", toggled_alt="Sans-serif font", full_width=true) }}
+
 ### Custom CSS
 
 | Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |

sass/main.scss

@@ -131,6 +131,10 @@ body {
     max-width: var(--max-layout-width);
 }
 
+.use-sans-serif {
+    --serif-font: var(--sans-serif-font);
+}
+
 article {
     $base-margin: 6rem;
     margin: 0 auto;

templates/base.html

@@ -23,7 +23,7 @@
 
 {% include "partials/header.html" %}
 
-<body{% if lang in rtl_languages %} dir="rtl"{% endif %}>
+<body{% if lang in rtl_languages %} dir="rtl"{% endif %}{% if config.extra.override_serif_with_sans %} class="use-sans-serif"{% endif %}>
     {% include "partials/nav.html" %}
     <div class="content">
 

theme.toml

@@ -29,6 +29,10 @@ homepage = "https://osc.garden"
 # index_format = "elasticlunr_javascript" here.
 # index_format = ""
 
+# Use sans-serif font everywhere.
+# By default, the serif font is only used in articles.
+override_serif_with_sans = false
+
 # Enable JavaScript theme toggler to allow users to switch between dark/light mode.
 # If disabled, your site will only use the theme specified in the `default_theme` variable.
 theme_switcher = true