diff --git a/config.toml b/config.toml index fd3332b64..354908e01 100644 --- a/config.toml +++ b/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 diff --git a/content/blog/mastering-tabi-settings/img/sans-serif.webp b/content/blog/mastering-tabi-settings/img/sans-serif.webp new file mode 100644 index 000000000..9688a7942 Binary files /dev/null and b/content/blog/mastering-tabi-settings/img/sans-serif.webp differ diff --git a/content/blog/mastering-tabi-settings/img/serif.webp b/content/blog/mastering-tabi-settings/img/serif.webp new file mode 100644 index 000000000..93a276ccd Binary files /dev/null and b/content/blog/mastering-tabi-settings/img/serif.webp differ diff --git a/content/blog/mastering-tabi-settings/index.ca.md b/content/blog/mastering-tabi-settings/index.ca.md index fa3083eac..2641631bb 100644 --- a/content/blog/mastering-tabi-settings/index.ca.md +++ b/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 | diff --git a/content/blog/mastering-tabi-settings/index.es.md b/content/blog/mastering-tabi-settings/index.es.md index 49eca3da1..451c7a39c 100644 --- a/content/blog/mastering-tabi-settings/index.es.md +++ b/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 | diff --git a/content/blog/mastering-tabi-settings/index.md b/content/blog/mastering-tabi-settings/index.md index 44284d4de..c46f5a1a2 100644 --- a/content/blog/mastering-tabi-settings/index.md +++ b/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 | diff --git a/sass/main.scss b/sass/main.scss index e7e426bdd..13401e6a9 100644 --- a/sass/main.scss +++ b/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; diff --git a/templates/base.html b/templates/base.html index 679d97552..73145497a 100644 --- a/templates/base.html +++ b/templates/base.html @@ -23,7 +23,7 @@ {% include "partials/header.html" %} - + {% include "partials/nav.html" %}
diff --git a/theme.toml b/theme.toml index fca727be6..f08669055 100644 --- a/theme.toml +++ b/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