Update Readme, Examples, Screenshot

1 files changed, 42 insertions, 4 deletions

diff --git a/content/overview-abridge.fr.md b/content/overview-abridge.fr.md
index d38ced9..1fda697 100644
--- a/content/overview-abridge.fr.md
+++ b/content/overview-abridge.fr.md
@@ -16,11 +16,49 @@ Vous pouvez ensuite modifier ou commenter les valeurs de ce fichier si nécessai
 
 Vous devez également décommenter la ligne #theme = "abridge" dans votre fichier racine zola config.toml. Cela indique à votre site racine zola d'utiliser le thème abrégé dans le dossier des thèmes.
 
-Vous pouvez définir le nombre d'éléments qui apparaissent sur la page d'accueil en modifiant `themes\abridge\content\_index.md` le fichier et en ajustant `paginate_by = 5`
+## Pagination
 
-Vous pouvez définir la largeur globale de la page en éditant `themes\abridge\sass\_variables.scss` le fichier et en ajustant ces deux lignes:
+Vous pouvez définir le nombre d'éléments qui apparaissent sur la page d'accueil en modifiant `content\_index.md` le fichier et en ajustant `paginate_by = 3`
+
+## Sass Overrides
+
+Les variables SCSS abrégées peuvent être remplacées en modifiant `sass\abridge.scss` fichier dans le dossier sass racine de votre projet.
+
+### Page Width
+
+```scss
+$mw:75%,// largeur maximale
+```
+
+### Abridge Theme Modes
 
 ```scss
-$mw:50% !default;// largeur maximale
-$mb:1200px !default;// valeur à laquelle passer de la disposition fluide à l'utilisation de la largeur maximale
+$abridgeMode: "switcher",//valeurs valides : switcher, auto, dark, light
 ```
+
+### Colors and Styles
+
+Vous pouvez spécifier le modèle de couleur que vous souhaitez utiliser comme base:
+```scss
+$color: "orange",// modèle de couleur à utiliser/remplacer: orange, blue, blueshade
+```
+
+Remplacez ensuite les couleurs individuelles si nécessaire:
+```scss
+/// Dark Colors
+$f1d: #ccc,// Font Color Primary
+$f2d: #ddd,// Font Color Headers
+$c1d: #111,// Background Color Primary
+$c2d: #222,// Background Color Secondary
+...
+```
+
+### Footer Social Icons
+
+Vous devez configurer les icônes sociales que vous prévoyez d'utiliser. (rend la taille du fichier css plus petite)
+
+Pour les désactiver tous simplement, vous pouvez définir `$enable-icons: false`
+
+Sinon, activez uniquement les icônes dont vous avez besoin, par exemple pour le courrier que vous définiriez `$icon-mail: true`
+
+Vous devez ensuite désactiver toutes les icônes que vous n'utilisez pas.