mirror of
https://github.com/welpo/tabi.git
synced 2025-10-11 07:46:15 +02:00
⚡️ refactor: co-locate images (#200)
This commit is contained in:
Óscar Fernández
GitHub
parent
c0a07cb467
commit
8aabeaecc3
173 changed files with 205 additions and 205 deletions
181
content/blog/customise-tabi/index.ca.md
Normal file
181
content/blog/customise-tabi/index.ca.md
Normal file
|
|
@ -0,0 +1,181 @@
|
|||
+++
|
||||
title = "Personalitza el color de tabi i el tema per defecte"
|
||||
date = 2023-08-09
|
||||
updated = 2023-10-07
|
||||
description = "Aprèn a personalitzar tabi fent servir skins i establint un tema per defecte, aconseguint un aspecte únic."
|
||||
|
||||
[taxonomies]
|
||||
tags = ["funcionalitat", "tutorial"]
|
||||
|
||||
[extra]
|
||||
toc = true
|
||||
quick_navigation_buttons = true
|
||||
social_media_card = "social_cards/ca_blog_customise_tabi.jpg"
|
||||
+++
|
||||
|
||||
tabi pot ser personalitzat de dues maneres: establint el tema per defecte (fosc o clar) i triant el color principal per al tema ("skin").
|
||||
|
||||
## Tema per defecte
|
||||
|
||||
Per configurar permanentment el teu lloc en el tema fosc o clar, necessites desactivar el `theme_switcher` a `config.toml` i establir el teu tema preferit (`light` o `dark`) a `default_theme`.
|
||||
|
||||
Per exemple, per tenir un tema fosc permanent:
|
||||
|
||||
```toml
|
||||
[extra]
|
||||
theme_switcher = false
|
||||
default_theme = "dark"
|
||||
```
|
||||
|
||||
Si el teu interruptor de mode clar/fosc està activat, el `default_theme` només s'utilitzarà com a reserva, en cas que un visitant tingui JavaScript desactivat.
|
||||
|
||||
## Skins
|
||||
|
||||
No t'agrada l'aiguamarina? Cap problema! tabi té 12 skins per triar. Si cap d'aquestes t'agrada, pots [crear la teva pròpia skin](#crea-la-teva-propia-skin).
|
||||
|
||||
Una skin és un arxiu CSS amb dues variables: el color principal per al tema clar i el color principal per al tema fosc.
|
||||
|
||||
Activar una skin és tan fàcil com establir la variable `skin` a la teva `config.toml` amb el nom de la skin. Per exemple:
|
||||
|
||||
```toml
|
||||
[extra]
|
||||
skin = "sakura"
|
||||
```
|
||||
|
||||
Fes una ullada a les skins disponibles a continuació.
|
||||
|
||||
**Fes clic a les imatges** per canviar entre els temes fosc i clar.
|
||||
|
||||
<hr>
|
||||
|
||||
### Aiguamarina
|
||||
|
||||
La skin per defecte. Si la variable `skin` no està configurada (o és igual a `"teal"`), aquest és l'aspecte de tabi:
|
||||
|
||||
{{ image_toggler(default_src="blog/customise-tabi/skins/teal_light.webp", toggled_src="blog/customise-tabi/skins/teal_dark.webp", default_alt="teal skin in light mode", toggled_alt="teal skin in dark mode", full_width=true) }}
|
||||
|
||||
<hr>
|
||||
|
||||
### Lavanda
|
||||
|
||||
{{ image_toggler(default_src="blog/customise-tabi/skins/lavender_light.webp", toggled_src="blog/customise-tabi/skins/lavender_dark.webp", default_alt="skin lavanda en mode clar", toggled_alt="skin lavanda en mode fosc", full_width=true) }}
|
||||
|
||||
Per aplicar-la, utilitza `skin = "lavender"`.
|
||||
|
||||
<hr>
|
||||
|
||||
### Vermell
|
||||
|
||||
{{ image_toggler(default_src="blog/customise-tabi/skins/red_light.webp", toggled_src="blog/customise-tabi/skins/red_dark.webp", default_alt="skin vermell en mode clar", toggled_alt="skin vermell en mode fosc", full_width=true) }}
|
||||
|
||||
Canvia a aquesta skin establint `skin = "red"`.
|
||||
|
||||
<hr>
|
||||
|
||||
### Menta
|
||||
|
||||
Una skin dissenyada per 🅿️.
|
||||
|
||||
{{ image_toggler(default_src="blog/customise-tabi/skins/mint_light.webp", toggled_src="blog/customise-tabi/skins/mint_dark.webp", default_alt="skin menta amb tema clar", toggled_alt="skin menta amb tema fosc", full_width=true) }}
|
||||
|
||||
Activa-la amb `skin = "mint"`.
|
||||
|
||||
<hr>
|
||||
|
||||
### Sakura
|
||||
|
||||
Inspirat per la temporada de floració dels cirerers al Japó.
|
||||
|
||||
{{ image_toggler(default_src="blog/customise-tabi/skins/sakura_light.webp", toggled_src="blog/customise-tabi/skins/sakura_dark.webp", default_alt="skin sakura en mode clar", toggled_alt="skin sakura en mode fosc", full_width=true) }}
|
||||
|
||||
Per habilitar aquesta skin, ajusta `skin = "sakura"`.
|
||||
|
||||
<hr>
|
||||
|
||||
### Blau
|
||||
|
||||
{{ image_toggler(default_src="blog/customise-tabi/skins/blue_light.webp", toggled_src="blog/customise-tabi/skins/blue_dark.webp", default_alt="skin blau en mode clar", toggled_alt="skin blau en mode fosc", full_width=true) }}
|
||||
|
||||
Per activar aquesta aparença, estableix `skin = "blue"`.
|
||||
|
||||
<hr>
|
||||
|
||||
### Lingot indigo
|
||||
|
||||
*Indigo* pel blau (en el tema clar) i *lingot* pel daurat (en el tema fosc).
|
||||
|
||||
{{ image_toggler(default_src="blog/customise-tabi/skins/indigo_ingot_light.webp", toggled_src="blog/customise-tabi/skins/indigo_ingot_dark.webp", default_alt="skin lingot indigo en mode clar", toggled_alt="skin lingot indigo en mode fosc", full_width=true) }}
|
||||
|
||||
Per activar aquest tema, utilitza `skin = "indigo_ingot"`.
|
||||
|
||||
<hr>
|
||||
|
||||
### Evangelion
|
||||
|
||||
Inspirat pels colors de la Unitat Evangelion-01 (en el tema fosc) i la Unitat-02 (en el tema clar).
|
||||
|
||||
{{ image_toggler(default_src="blog/customise-tabi/skins/evangelion_light.webp", toggled_src="blog/customise-tabi/skins/evangelion_dark.webp", default_alt="skin evangelion en mode clar", toggled_alt="skin evangelion en mode fosc", full_width=true) }}
|
||||
|
||||
<hr>
|
||||
|
||||
### Monocromàtic
|
||||
|
||||
{{ image_toggler(default_src="blog/customise-tabi/skins/monochrome_light.webp", toggled_src="blog/customise-tabi/skins/monochrome_dark.webp", default_alt="skin monocromàtic en mode clar", toggled_alt="skin monocromàtic en mode fosc", full_width=true) }}
|
||||
|
||||
Per aconseguir aquesta aparença, estableix `skin = "monochrome"`.
|
||||
|
||||
<hr>
|
||||
|
||||
### Taronja (baix contrast)
|
||||
|
||||
**AVÍS!** Aquesta skin en mode clar pot tenir [baix contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), afectant l'accessibilitat i la qualificació Lighthouse. (El mode fosc té bon contrast.)
|
||||
|
||||
{{ image_toggler(default_src="blog/customise-tabi/skins/lowcontrast_orange_light.webp", toggled_src="blog/customise-tabi/skins/lowcontrast_orange_dark.webp", default_alt="skin taronja de baix contrast en mode clar", toggled_alt="skin taronja de baix contrast en mode fosc", full_width=true) }}
|
||||
|
||||
Per utilitzar-la, estableix `skin = "lowcontrast_orange"`.
|
||||
|
||||
<hr>
|
||||
|
||||
### Préssec (baix contrast)
|
||||
|
||||
**AVÍS!** Aquesta skin en mode clar pot tenir [baix contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), afectant l'accessibilitat i la qualificació Lighthouse. (El mode fosc té bon contrast.)
|
||||
|
||||
{{ image_toggler(default_src="blog/customise-tabi/skins/lowcontrast_peach_light.webp", toggled_src="blog/customise-tabi/skins/lowcontrast_peach_dark.webp", default_alt="skin préssec de baix contrast en mode clar", toggled_alt="skin préssec de baix contrast en mode fosc", full_width=true) }}
|
||||
|
||||
Especifica `skin = "lowcontrast_peach"` per utilitzar aquesta skin.
|
||||
|
||||
<hr>
|
||||
|
||||
### Rosa (baix contrast)
|
||||
|
||||
**AVÍS!** Aquesta skin en mode clar pot tenir [baix contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), afectant l'accessibilitat i la qualificació Lighthouse. (El mode fosc té bon contrast.)
|
||||
|
||||
{{ image_toggler(default_src="blog/customise-tabi/skins/lowcontrast_pink_light.webp", toggled_src="blog/customise-tabi/skins/lowcontrast_pink_dark.webp", default_alt="skin rosa de baix contrast en tema clar", toggled_alt="skin rosa de baix contrast en tema fosc", full_width=true) }}
|
||||
|
||||
Per utilitzar aquests colors, assigna `skin = "lowcontrast_pink"`.
|
||||
|
||||
<hr>
|
||||
|
||||
### Crea la teva pròpia skin
|
||||
|
||||
No estàs limitat a les skins predefinides. Per què no crees un disseny únic que et representi?
|
||||
|
||||
Pots guardar la teva nova skin en qualsevol d'aquests dos directoris:
|
||||
1. Dins del directori del tema: `themes/tabi/sass/skins`
|
||||
2. Dins del directori principal del teu lloc: `sass/skins` (necessitaràs crear aquesta carpeta)
|
||||
|
||||
Crea un nou arxiu `.scss` (per exemple, `la_teva_skin.scss`) a la ubicació que prefereixis. Aquest arxiu ha de contenir aquestes dues variables (aquesta és la skin predeterminada, "teal"):
|
||||
|
||||
```scss
|
||||
:root {
|
||||
--primary-color: #087e96;
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
--primary-color: #91e0ee;
|
||||
}
|
||||
```
|
||||
|
||||
Modifica els colors al teu gust. Una vegada estiguis satisfet, actualitza la variable `skin` perquè coincideixi amb el nom del teu arxiu.
|
||||
|
||||
Recorda tenir en compte l'accesibilitat dels colors que triis. Aquí tens un enllaç que et pot ajudar: [WebAIM: Contrast Checker](https://webaim.org/resources/contrastchecker/). El fondo del tema clar és `#fff`, i el del tema fosc `#1f1f1f`.
|
||||
Loading…
Add table
Add a link
Reference in a new issue