Update Readme, Examples, Screenshot

4 files changed, 148 insertions, 76 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.
diff --git a/content/overview-abridge.md b/content/overview-abridge.md
index 93e740b..f68ef2f 100644
--- a/content/overview-abridge.md
+++ b/content/overview-abridge.md
@@ -16,11 +16,49 @@ You can then edit or comment out the values in this file as necessary.
 
 You should also uncomment out the line #theme = "abridge" in your root zola config.toml file. This tells your root zola site to use the abridge theme in the themes folder.
 
-You can set the number of items that appear on the home page by editing `themes\abridge\content\_index.md` file and adjusting `paginate_by = 5`
+## Pagination
 
-You can set the overal page width by editing `themes\abridge\sass\_variables.scss` file, and adjusting these two lines:
+You can set the number of items that appear on the home page by editing `content\_index.md` file and adjusting `paginate_by = 3`
+
+## Sass Overrides
+
+Abridge SCSS variables can be overrided by editing `sass\abridge.scss` file in your project's root sass folder.
+
+### Page Width
+
+```scss
+$mw:75%,// max-width
+```
+
+### Abridge Theme Modes
 
 ```scss
-$mw:50% !default;// max-width
-$mb:1200px !default;// value at which to switch from fluid layout to using max-width
+$abridgeMode: "switcher",//valid values: switcher, auto, dark, light
 ```
+
+### Colors and Styles
+
+You can specify which color template you want to use as a base:
+```scss
+$color: "orange",// color template to use/override: orange, blue, blueshade
+```
+
+Then override individual colors as needed:
+```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
+
+You should configure which social icons you plan to use. (makes the css file size smaller)
+
+To simply turn them all off you can set `$enable-icons: false`
+
+Otherwise enable only the icons you need, eg for mail you would set `$icon-mail: true`
+
+You should then disable all the icons that you do not use.
diff --git a/content/overview-code-blocks.fr.md b/content/overview-code-blocks.fr.md
index a21c15a..b640069 100644
--- a/content/overview-code-blocks.fr.md
+++ b/content/overview-code-blocks.fr.md
@@ -99,6 +99,38 @@ taxonomies = [
 </html>
 ```
 
+### CSS
+```css
+html {
+    font-size: var(--fs);
+}
+
+.c {
+    text-align: center;
+}
+```
+
+### SCSS
+```scss
+
+$font: Roboto system-ui -apple-system BlinkMacSystemFont "Segoe UI" Oxygen Ubuntu Cantarell "Fira Sans" "Droid Sans" "Helvetica Neue" "Noto Sans" Helvetica Arial sans-serif !default;
+$font-mono: ui-monospace Menlo Monaco Consolas "SF Mono" "Cascadia Mono" "Segoe UI Mono" "DejaVu Sans Mono" "Liberation Mono" "Roboto Mono" "Oxygen Mono" "Ubuntu Monospace" "Ubuntu Mono" "Source Code Pro" "Fira Mono" "Droid Sans Mono" "Courier New" Courier monospace !default;
+
+@mixin font {
+  // convert space separated list to comma separated list
+  $font: list.join($font, "", $separator: comma);
+  $font: functions.remove($font, "");
+  $font-mono: list.join($font-mono, "", $separator: comma);
+  $font-mono: functions.remove($font-mono, "");
+
+  $font: functions.font-var($font, $fontExt-Main, $findFont-Main);
+  $font-mono: functions.font-var($font-mono, $fontExt-Code, $findFont-Code);
+
+  #{--ff}: $font;
+  #{--fm}: $font-mono;//code
+}
+```
+
 ### javascript
 ```javascript
 function closeSearch() {//close the search displaying the regular page.
@@ -343,37 +375,3 @@ for yr in lwr..upr do
   end
 end
 ```
-
-### SCSS
-```scss
-
-$font: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", Helvetica, Arial, sans-serif !default;
-$font-mono: ui-monospace, Menlo, Monaco, Consolas, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "DejaVu Sans Mono", "Liberation Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Ubuntu Mono", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", Courier, monospace !default;
-
-@mixin root {
-  #{--ff}: $font;
-  #{--fm}: $font-mono;//code
-
-  --fs: 1rem; //font-size
-
-  // Responsive typography
-  @if $enable-responsive-typography {
-    @if map-get($breakpoints, "lg") {
-      @media (min-width: map-get($breakpoints, "lg")) {
-        --fs: 1.08rem;
-      }
-    }
-  }
-}
-```
-
-### CSS
-```css
-html {
-    font-size: var(--fs);
-}
-
-.c {
-    text-align: center;
-}
-```
diff --git a/content/overview-code-blocks.md b/content/overview-code-blocks.md
index 916dcc1..46f5922 100644
--- a/content/overview-code-blocks.md
+++ b/content/overview-code-blocks.md
@@ -99,6 +99,38 @@ taxonomies = [
 </html>
 ```
 
+### CSS
+```css
+html {
+    font-size: var(--fs);
+}
+
+.c {
+    text-align: center;
+}
+```
+
+### SCSS
+```scss
+
+$font: Roboto system-ui -apple-system BlinkMacSystemFont "Segoe UI" Oxygen Ubuntu Cantarell "Fira Sans" "Droid Sans" "Helvetica Neue" "Noto Sans" Helvetica Arial sans-serif !default;
+$font-mono: ui-monospace Menlo Monaco Consolas "SF Mono" "Cascadia Mono" "Segoe UI Mono" "DejaVu Sans Mono" "Liberation Mono" "Roboto Mono" "Oxygen Mono" "Ubuntu Monospace" "Ubuntu Mono" "Source Code Pro" "Fira Mono" "Droid Sans Mono" "Courier New" Courier monospace !default;
+
+@mixin font {
+  // convert space separated list to comma separated list
+  $font: list.join($font, "", $separator: comma);
+  $font: functions.remove($font, "");
+  $font-mono: list.join($font-mono, "", $separator: comma);
+  $font-mono: functions.remove($font-mono, "");
+
+  $font: functions.font-var($font, $fontExt-Main, $findFont-Main);
+  $font-mono: functions.font-var($font-mono, $fontExt-Code, $findFont-Code);
+
+  #{--ff}: $font;
+  #{--fm}: $font-mono;//code
+}
+```
+
 ### javascript
 ```javascript
 function closeSearch() {//close the search displaying the regular page.
@@ -343,37 +375,3 @@ for yr in lwr..upr do
   end
 end
 ```
-
-### SCSS
-```scss
-
-$font: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", Helvetica, Arial, sans-serif !default;
-$font-mono: ui-monospace, Menlo, Monaco, Consolas, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "DejaVu Sans Mono", "Liberation Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Ubuntu Mono", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", Courier, monospace !default;
-
-@mixin root {
-  #{--ff}: $font;
-  #{--fm}: $font-mono;//code
-
-  --fs: 1rem; //font-size
-
-  // Responsive typography
-  @if $enable-responsive-typography {
-    @if map-get($breakpoints, "lg") {
-      @media (min-width: map-get($breakpoints, "lg")) {
-        --fs: 1.08rem;
-      }
-    }
-  }
-}
-```
-
-### CSS
-```css
-html {
-    font-size: var(--fs);
-}
-
-.c {
-    text-align: center;
-}
-```