From 64ec115c041cbd6112e681fa3099446b6b135ea6 Mon Sep 17 00:00:00 2001
From: cdejonghe <cdejonghe@sii.fr>
Date: Fri, 11 Aug 2023 14:59:48 +0200
Subject: [PATCH] feat(#78): Align category colors with SII corporate style
 guidelines

---
 assets/images/reduxjs.png                     | Bin 0 -> 3814 bytes
 gulpfile.js                                   |  14 +-
 src/affinage/affinage.scss                    |   4 -
 src/affinage/index.html                       |   4 +-
 src/angular-cli/angular-cli.scss              |   3 -
 src/angular-cli/index.html                    |   2 +-
 src/angular/angular.scss                      |   3 -
 src/angular/index.html                        |   2 +-
 src/ansible/ansible.scss                      |   3 -
 src/ansible/index.html                        |   2 +-
 src/clea/clea.scss                            |   3 -
 src/clea/index.html                           |   2 +-
 src/common.scss                               |  27 +++-
 src/cordova/cordova.scss                      |   5 +-
 src/cordova/index.html                        |   2 +-
 src/css-selectors/css-selectors.scss          |   3 -
 src/css-selectors/index.html                  |   2 +-
 src/dailymeeting/dailymeeting.scss            |   3 -
 src/dailymeeting/index.html                   |   2 +-
 src/docker-compose/docker-compose.scss        |   3 -
 src/docker-compose/index.html                 |   2 +-
 src/docker-swarm/docker-swarm.scss            |   4 +-
 src/docker-swarm/index.html                   |   2 +-
 src/docker/docker.scss                        |   4 +-
 src/docker/index.html                         |   2 +-
 src/es6/es6.scss                              |   2 -
 src/es6/index.html                            |   2 +-
 src/git/git.scss                              |   2 -
 src/git/index.html                            |   2 +-
 src/golang/golang.scss                        |   3 -
 src/golang/index.html                         |   2 +-
 src/java-design-pattern/index.html            |   2 +-
 .../java-design-pattern.scss                  |   5 +-
 src/kanban/index.html                         |   2 +-
 src/kanban/kanban.scss                        |   4 -
 src/kubernetes/index.html                     |   2 +-
 src/kubernetes/kubernetes.scss                |   4 +-
 src/mongodb/index.html                        |   2 +-
 src/mongodb/mongodb.scss                      |   3 -
 src/npm-yarn/index.html                       |   2 +-
 src/npm-yarn/npm-yarn.scss                    |   3 -
 src/openzfs/index.html                        |   2 +-
 src/openzfs/openzfs.scss                      |   3 -
 src/powercli/index.html                       |   2 +-
 src/powercli/powercli.scss                    |   3 -
 src/react/index.html                          |   2 +-
 src/react/react.scss                          |   4 +-
 src/reduxjs/index.html                        |   2 +-
 src/reduxjs/reduxjs.scss                      |   4 +-
 src/release-planning/index.html               |   2 +-
 src/release-planning/release-planning.scss    |   4 +-
 src/retrospective/index.html                  |   2 +-
 src/retrospective/retrospective.scss          |   7 +-
 src/secu-dev/index.html                       |   2 +-
 src/secu-dev/secu-dev.scss                    |   3 -
 src/sonarqube/index.html                      |   2 +-
 src/sonarqube/sonarqube.scss                  |   3 -
 src/spring/index.html                         | 142 +++++++++---------
 src/spring/index.scss                         |   6 +-
 src/spring/spring-boot/index.html             |   2 +-
 src/spring/spring-core/index.html             |   2 +-
 src/spring/spring-data/index.html             |   2 +-
 src/spring/spring-netflix-eureka/index.html   |   2 +-
 src/spring/spring-web/index.html              |   2 +-
 src/spring/spring.scss                        |  18 ---
 src/sprint-planning/index.html                |   2 +-
 src/sprint-planning/sprint-planning.scss      |   4 -
 src/sprint-review/index.html                  |   2 +-
 src/sprint-review/sprint-review.scss          |   4 -
 src/stencil/index.html                        |   2 +-
 src/stencil/stencil.scss                      |   4 +-
 src/templates/index.html                      |   2 +-
 src/templates/style.scss                      |   2 -
 src/tensorflow/index.html                     |   2 +-
 src/tensorflow/tensorflow.scss                |   3 -
 src/typescript/index.html                     |   2 +-
 src/typescript/typescript.scss                |   2 -
 src/vue-cli/index.html                        |   2 +-
 src/vue-cli/vue-cli.scss                      |   3 -
 src/warp10/index.html                         |   2 +-
 src/warp10/warp10.scss                        |   3 -
 81 files changed, 150 insertions(+), 259 deletions(-)
 create mode 100644 assets/images/reduxjs.png

diff --git a/assets/images/reduxjs.png b/assets/images/reduxjs.png
new file mode 100644
index 0000000000000000000000000000000000000000..3f219d1cd5d2a72b3f1b92cebb2b8a214f303e10
GIT binary patch
literal 3814
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

literal 0
HcmV?d00001

diff --git a/gulpfile.js b/gulpfile.js
index e6ca2d6..f0547a4 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -33,18 +33,6 @@ const CATEGORY = {
 let name = '';
 let category = '';
 
-const getColor = category => {
-  switch (category) {
-    case CATEGORY.FRAMEWORKS:
-      return 'green';
-    case CATEGORY.LANGUAGES:
-      return 'orange';
-    case CATEGORY.TOOLS:
-    default:
-      return 'blue';
-  }
-};
-
 /**
  * PRIVATE TASKS
  */
@@ -168,7 +156,7 @@ task(
 function renameCss() {
   return gulp
     .src('./src/' + name + '/style.scss')
-    .pipe(replace('{{COLOR}}', getColor(category)))
+    .pipe(replace('{{CATEGORY}}', category))
     .pipe(rename(name + '.scss'))
     .pipe(gulp.dest('./src/' + name));
 }
diff --git a/src/affinage/affinage.scss b/src/affinage/affinage.scss
index 0df7dc6..ccbedcf 100644
--- a/src/affinage/affinage.scss
+++ b/src/affinage/affinage.scss
@@ -10,10 +10,6 @@
 }
 
 body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: var(--orange);
-  
-
   #showPreview:checked ~ .reverse .landscape {
    		transform: rotate(90deg) translateX(164px) translateY(164px);
    		width: 29.7cm;
diff --git a/src/affinage/index.html b/src/affinage/index.html
index d4a1c9a..b91e3f3 100644
--- a/src/affinage/index.html
+++ b/src/affinage/index.html
@@ -6,10 +6,10 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="AGILE">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
-      @@include('../../dist/common/first-side/header-no-print-large.html', {"title": "Affinage du backlog", "subtitle": "Cérémonies scrum", "imageName": "AgileBySII_blanc"})
+      @@include('../../dist/common/first-side/header-no-print-large.html', {"title": "Affinage du backlog", "subtitle": "Atelier fréquemment utilisé par les équipes agiles", "imageName": "AgileBySII_blanc"})
 
       <main>
         <div class="column1">
diff --git a/src/angular-cli/angular-cli.scss b/src/angular-cli/angular-cli.scss
index 65706bd..ffd15ef 100644
--- a/src/angular-cli/angular-cli.scss
+++ b/src/angular-cli/angular-cli.scss
@@ -2,9 +2,6 @@
 /* you must not change other scss files */
 
 body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: var(--blue);
-
   main div {
     img {
       height: 230px;
diff --git a/src/angular-cli/index.html b/src/angular-cli/index.html
index 61dc7cf..6454d5f 100644
--- a/src/angular-cli/index.html
+++ b/src/angular-cli/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="TOOLS">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../dist/common/first-side/header.html', {"title": "Angular CLI cheat sheet", "subtitle": "CLI tool for Angular", "imageName": "@@folder"})
diff --git a/src/angular/angular.scss b/src/angular/angular.scss
index 5172b57..7f720bb 100644
--- a/src/angular/angular.scss
+++ b/src/angular/angular.scss
@@ -2,9 +2,6 @@
 /* you must not change other scss files */
 
 body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: var(--orange);
-
   main div {
     img {
       height: 230px;
diff --git a/src/angular/index.html b/src/angular/index.html
index 4623181..5631559 100644
--- a/src/angular/index.html
+++ b/src/angular/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="FRAMEWORKS">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../dist/common/first-side/header.html', {"title": "Angular (TS) cheat sheet", "subtitle": "One framework. Mobile & desktop.", "imageName": "@@folder"})
diff --git a/src/ansible/ansible.scss b/src/ansible/ansible.scss
index 65706bd..ffd15ef 100644
--- a/src/ansible/ansible.scss
+++ b/src/ansible/ansible.scss
@@ -2,9 +2,6 @@
 /* you must not change other scss files */
 
 body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: var(--blue);
-
   main div {
     img {
       height: 230px;
diff --git a/src/ansible/index.html b/src/ansible/index.html
index b60e179..2d0cf40 100644
--- a/src/ansible/index.html
+++ b/src/ansible/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="TOOLS">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../dist/common/first-side/header.html', {"title": "ansible cheat sheet", "subtitle": "Configuration Management Tool", "imageName": "@@folder"})
diff --git a/src/clea/clea.scss b/src/clea/clea.scss
index 7cfd087..8dc9ade 100644
--- a/src/clea/clea.scss
+++ b/src/clea/clea.scss
@@ -2,9 +2,6 @@
 /* you must not change other scss files */
 
 body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: var(--purple);
-
   main div {
     img {
       height: 230px;
diff --git a/src/clea/index.html b/src/clea/index.html
index 276b2b5..ffafd93 100644
--- a/src/clea/index.html
+++ b/src/clea/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="TOOLS">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../dist/common/first-side/header.html', {"title": "clea", "subtitle": "CLI tool for AngularJS & Typescript projects", "imageName": "clea-white"})
diff --git a/src/common.scss b/src/common.scss
index 8f3fb6a..5747e61 100644
--- a/src/common.scss
+++ b/src/common.scss
@@ -168,13 +168,34 @@
 
 body {
     --nb-column: 2;
-    --blue: #005AA2;
-    --green: #B2BE3A;
-    --purple: #8D3589;
+    --blue: #004278;
+    --light-blue: #007eb5;
+    --green: #097f03;
+    --purple: #7c08a3;
+    --red: #d30012;
+    --fuchsia: #da277a;
     --orange: #D64B13;
     --grey: #80888C;
     --lightgrey: #eeeef0;
 
+    --currentColor: var(--grey);
+
+    &.AGILE {
+        --currentColor: var(--purple);
+    }
+    &.FRAMEWORKS {
+        --currentColor: var(--orange);
+    }
+    &.LANGUAGES {
+        --currentColor: var(--green);
+    }
+    &.PRACTICES {
+        --currentColor: var(--red);
+    }
+    &.TOOLS {
+        --currentColor: var(--blue);
+    }    
+
     min-width: 740px;
     margin: 0;
     font-family: 'Open Sans', sans-serif;
diff --git a/src/cordova/cordova.scss b/src/cordova/cordova.scss
index edf4355..2e8faa3 100644
--- a/src/cordova/cordova.scss
+++ b/src/cordova/cordova.scss
@@ -2,10 +2,7 @@
 /* you must not change other scss files */
 
 body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: var(--green);
-
-  main div {
+    main div {
     img {
       height: 230px;
     }
diff --git a/src/cordova/index.html b/src/cordova/index.html
index f29703a..114cde6 100644
--- a/src/cordova/index.html
+++ b/src/cordova/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="FRAMEWORKS">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../dist/common/first-side/header.html', {"title": "cordova cheat sheet", "subtitle": "Mobile apps with HTML, CSS & JS", "imageName": "@@folder"})
diff --git a/src/css-selectors/css-selectors.scss b/src/css-selectors/css-selectors.scss
index 4867f95..469ab30 100644
--- a/src/css-selectors/css-selectors.scss
+++ b/src/css-selectors/css-selectors.scss
@@ -2,9 +2,6 @@
 /* you must not change other scss files */
 
 body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: var(--blue);
-
   main div {
     img {
       width: 100%;
diff --git a/src/css-selectors/index.html b/src/css-selectors/index.html
index 9c492da..2203108 100644
--- a/src/css-selectors/index.html
+++ b/src/css-selectors/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="LANGUAGES">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../dist/common/first-side/header.html', {"title": "css cheat sheet", "subtitle": "Selectors and Specificities", "imageName": "@@folder"})
diff --git a/src/dailymeeting/dailymeeting.scss b/src/dailymeeting/dailymeeting.scss
index a107d2e..52316bb 100644
--- a/src/dailymeeting/dailymeeting.scss
+++ b/src/dailymeeting/dailymeeting.scss
@@ -10,10 +10,7 @@
 }
 
 body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: var(--blue);
   
-
   #showPreview:checked ~ .reverse .landscape {
    		transform: rotate(90deg) translateX(164px) translateY(164px);
    		width: 29.7cm;
diff --git a/src/dailymeeting/index.html b/src/dailymeeting/index.html
index 804e0ab..6847184 100644
--- a/src/dailymeeting/index.html
+++ b/src/dailymeeting/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="AGILE">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../dist/common/first-side/header-no-print-large.html', {"title": "Daily Meeting", "subtitle": "Cérémonies scrum", "imageName": "AgileBySII_blanc"})
diff --git a/src/docker-compose/docker-compose.scss b/src/docker-compose/docker-compose.scss
index 65706bd..ffd15ef 100644
--- a/src/docker-compose/docker-compose.scss
+++ b/src/docker-compose/docker-compose.scss
@@ -2,9 +2,6 @@
 /* you must not change other scss files */
 
 body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: var(--blue);
-
   main div {
     img {
       height: 230px;
diff --git a/src/docker-compose/index.html b/src/docker-compose/index.html
index db92b30..10915b5 100644
--- a/src/docker-compose/index.html
+++ b/src/docker-compose/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="TOOLS">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../dist/common/first-side/header.html', {"title": "Docker Compose", "subtitle": "Tool for running multi-container Docker applications", "imageName": "@@folder"})
diff --git a/src/docker-swarm/docker-swarm.scss b/src/docker-swarm/docker-swarm.scss
index f8e8ed2..b15a5c9 100644
--- a/src/docker-swarm/docker-swarm.scss
+++ b/src/docker-swarm/docker-swarm.scss
@@ -2,9 +2,7 @@
 /* you must not change other scss files */
 
 body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: var(--blue);
-
+  
   main div {
     img {
       height: 230px;
diff --git a/src/docker-swarm/index.html b/src/docker-swarm/index.html
index 65674c6..fe05eca 100644
--- a/src/docker-swarm/index.html
+++ b/src/docker-swarm/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="TOOLS">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../dist/common/first-side/header.html', {"title": "docker swarm", "subtitle": "Container orchestration platform", "imageName": "@@folder"})
diff --git a/src/docker/docker.scss b/src/docker/docker.scss
index 643f101..c57c4fd 100644
--- a/src/docker/docker.scss
+++ b/src/docker/docker.scss
@@ -2,9 +2,7 @@
 /* you must not change other scss files */
 
 body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: var(--blue);
-
+  
   main div {
     img {
       height: 230px;
diff --git a/src/docker/index.html b/src/docker/index.html
index d1b131b..f61586b 100644
--- a/src/docker/index.html
+++ b/src/docker/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="TOOLS">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../dist/common/first-side/header.html', {"title": "docker cheat sheet", "subtitle": "Software container platform", "imageName": "@@folder"})
diff --git a/src/es6/es6.scss b/src/es6/es6.scss
index edf4355..377ce03 100644
--- a/src/es6/es6.scss
+++ b/src/es6/es6.scss
@@ -2,8 +2,6 @@
 /* you must not change other scss files */
 
 body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: var(--green);
 
   main div {
     img {
diff --git a/src/es6/index.html b/src/es6/index.html
index 6cd527f..7783957 100644
--- a/src/es6/index.html
+++ b/src/es6/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="LANGUAGES">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../dist/common/first-side/header.html', {"title": "es6 cheat sheet", "subtitle": "Ecmascript 6", "imageName": "@@folder"})
diff --git a/src/git/git.scss b/src/git/git.scss
index 4efdd88..3564664 100644
--- a/src/git/git.scss
+++ b/src/git/git.scss
@@ -2,8 +2,6 @@
 /* you must not change other scss files */
 
 body {
-  --currentColor: var(--blue);
-
   .first-side {
     main div {
       img {
diff --git a/src/git/index.html b/src/git/index.html
index 0b80880..5d0b345 100644
--- a/src/git/index.html
+++ b/src/git/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="TOOLS">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../dist/common/first-side/header.html', {"title": "Git cheat sheet", "subtitle": "Improve your Git skills", "imageName": "@@folder"})
diff --git a/src/golang/golang.scss b/src/golang/golang.scss
index 65706bd..ffd15ef 100644
--- a/src/golang/golang.scss
+++ b/src/golang/golang.scss
@@ -2,9 +2,6 @@
 /* you must not change other scss files */
 
 body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: var(--blue);
-
   main div {
     img {
       height: 230px;
diff --git a/src/golang/index.html b/src/golang/index.html
index 21822c8..037bdac 100644
--- a/src/golang/index.html
+++ b/src/golang/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="LANGUAGES">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../dist/common/first-side/header.html', {"title": "Golang cheat sheet", "subtitle": "Golang in a nutshell", "imageName": "@@folder"})
diff --git a/src/java-design-pattern/index.html b/src/java-design-pattern/index.html
index 586bfdd..320849e 100644
--- a/src/java-design-pattern/index.html
+++ b/src/java-design-pattern/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="PRACTICES">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../dist/common/first-side/header.html', {"title": "Design Pattern cheat sheet", "subtitle": "Most popular in Java", "imageName": "@@folder"})
diff --git a/src/java-design-pattern/java-design-pattern.scss b/src/java-design-pattern/java-design-pattern.scss
index 65706bd..2e8faa3 100644
--- a/src/java-design-pattern/java-design-pattern.scss
+++ b/src/java-design-pattern/java-design-pattern.scss
@@ -2,10 +2,7 @@
 /* you must not change other scss files */
 
 body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: var(--blue);
-
-  main div {
+    main div {
     img {
       height: 230px;
     }
diff --git a/src/kanban/index.html b/src/kanban/index.html
index b45bd31..33242c0 100644
--- a/src/kanban/index.html
+++ b/src/kanban/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="AGILE">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../dist/common/first-side/header-no-print-large.html', {"title": "Kanban", "subtitle": "Un processus pour améliorer les processus", "imageName": "AgileBySII_blanc"})
diff --git a/src/kanban/kanban.scss b/src/kanban/kanban.scss
index 0df7dc6..ccbedcf 100644
--- a/src/kanban/kanban.scss
+++ b/src/kanban/kanban.scss
@@ -10,10 +10,6 @@
 }
 
 body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: var(--orange);
-  
-
   #showPreview:checked ~ .reverse .landscape {
    		transform: rotate(90deg) translateX(164px) translateY(164px);
    		width: 29.7cm;
diff --git a/src/kubernetes/index.html b/src/kubernetes/index.html
index cf31ea9..8889039 100644
--- a/src/kubernetes/index.html
+++ b/src/kubernetes/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="TOOLS">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../dist/common/first-side/header.html', {"title": "kubernetes cheat sheet", "subtitle": "Automated container deployment, scaling and management", "imageName": "@@folder"})
diff --git a/src/kubernetes/kubernetes.scss b/src/kubernetes/kubernetes.scss
index 65706bd..fb27c13 100644
--- a/src/kubernetes/kubernetes.scss
+++ b/src/kubernetes/kubernetes.scss
@@ -2,9 +2,7 @@
 /* you must not change other scss files */
 
 body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: var(--blue);
-
+  
   main div {
     img {
       height: 230px;
diff --git a/src/mongodb/index.html b/src/mongodb/index.html
index 86fe1ae..4c87820 100644
--- a/src/mongodb/index.html
+++ b/src/mongodb/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="LANGUAGES">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../dist/common/first-side/header.html', {"title": "MongoDB cheat sheet", "subtitle": "The document database with scalability and flexibility.", "imageName": "@@folder"})
diff --git a/src/mongodb/mongodb.scss b/src/mongodb/mongodb.scss
index da841d0..b54040f 100644
--- a/src/mongodb/mongodb.scss
+++ b/src/mongodb/mongodb.scss
@@ -2,9 +2,6 @@
 /* you must not change other scss files */
 
 body {
-    // available colors are: blue, green, purple, orange and grey
-    --currentColor: var(--green);
-
     main div {
         img {
             height: 230px;
diff --git a/src/npm-yarn/index.html b/src/npm-yarn/index.html
index 9acc778..eff9b25 100644
--- a/src/npm-yarn/index.html
+++ b/src/npm-yarn/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="TOOLS">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../dist/common/first-side/header.html', {"title": "npm-yarn cheat sheet", "subtitle": "Dependency management for NodeJS", "imageName": "@@folder"})
diff --git a/src/npm-yarn/npm-yarn.scss b/src/npm-yarn/npm-yarn.scss
index fa66187..aa7dbc4 100644
--- a/src/npm-yarn/npm-yarn.scss
+++ b/src/npm-yarn/npm-yarn.scss
@@ -2,9 +2,6 @@
 /* you must not change other scss files */
 
 body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: var(--purple);
-
   main div {
     img {
       height: 230px;
diff --git a/src/openzfs/index.html b/src/openzfs/index.html
index 17f8575..fe707ae 100644
--- a/src/openzfs/index.html
+++ b/src/openzfs/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="TOOLS">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../dist/common/first-side/header.html', {"title": "OpenZFS", "subtitle": "The smartest reliable filesystem", "imageName": "@@folder"})
diff --git a/src/openzfs/openzfs.scss b/src/openzfs/openzfs.scss
index af8cba9..ba831ae 100644
--- a/src/openzfs/openzfs.scss
+++ b/src/openzfs/openzfs.scss
@@ -2,9 +2,6 @@
 /* you must not change other scss files */
 
 body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: var(--orange);
-
   main div {
     img {
       height: 230px;
diff --git a/src/powercli/index.html b/src/powercli/index.html
index 37a7ab8..d0152a5 100644
--- a/src/powercli/index.html
+++ b/src/powercli/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="FRAMEWORKS">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../dist/common/first-side/header.html', {"title": "PowerCLI cheat sheet", "subtitle": "PowerShell SDK to manage VMware vSphere environments", "imageName": "@@folder"})
diff --git a/src/powercli/powercli.scss b/src/powercli/powercli.scss
index 880690a..b1ffad6 100644
--- a/src/powercli/powercli.scss
+++ b/src/powercli/powercli.scss
@@ -2,9 +2,6 @@
 /* you must not change other scss files */
 
 body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: var(--blue);
-
   main div {
     img {
       height: 230px;
diff --git a/src/react/index.html b/src/react/index.html
index 243416d..cdc1648 100644
--- a/src/react/index.html
+++ b/src/react/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="FRAMEWORKS">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../dist/common/first-side/header.html', {"title": "react cheat sheet", "subtitle": "A JavaScript library for building user interfaces.", "imageName": "@@folder"})
diff --git a/src/react/react.scss b/src/react/react.scss
index 65706bd..fb27c13 100644
--- a/src/react/react.scss
+++ b/src/react/react.scss
@@ -2,9 +2,7 @@
 /* you must not change other scss files */
 
 body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: var(--blue);
-
+  
   main div {
     img {
       height: 230px;
diff --git a/src/reduxjs/index.html b/src/reduxjs/index.html
index fb76320..1d31c3d 100644
--- a/src/reduxjs/index.html
+++ b/src/reduxjs/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="FRAMEWORKS">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       
diff --git a/src/reduxjs/reduxjs.scss b/src/reduxjs/reduxjs.scss
index 10affe3..43ade9e 100644
--- a/src/reduxjs/reduxjs.scss
+++ b/src/reduxjs/reduxjs.scss
@@ -15,9 +15,7 @@ $grayColor: #e6e6e6;
 }
 
 body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: var(--purple);
-
+  
   h1{
     line-height: 1em;
   }
diff --git a/src/release-planning/index.html b/src/release-planning/index.html
index a906b6f..dd59fbf 100644
--- a/src/release-planning/index.html
+++ b/src/release-planning/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="AGILE">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../dist/common/first-side/header-no-print-large.html', {"title": "Release Planning", "subtitle": "Cérémonies scrum", "imageName": "AgileBySII_blanc"})
diff --git a/src/release-planning/release-planning.scss b/src/release-planning/release-planning.scss
index e757b3b..b867427 100644
--- a/src/release-planning/release-planning.scss
+++ b/src/release-planning/release-planning.scss
@@ -2,9 +2,7 @@
 /* you must not change other scss files */
 
 body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: var(--blue);
-
+  
   .reverse {
 	  header {
 	   		height: 40px;
diff --git a/src/retrospective/index.html b/src/retrospective/index.html
index 4a5fc5a..f93f52c 100644
--- a/src/retrospective/index.html
+++ b/src/retrospective/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="AGILE">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../dist/common/first-side/header-no-print-large.html', {"title": "la rétrospective", "subtitle": "Cérémonies scrum", "imageName": "AgileBySII_blanc"})
diff --git a/src/retrospective/retrospective.scss b/src/retrospective/retrospective.scss
index 43a6db1..65ef10e 100644
--- a/src/retrospective/retrospective.scss
+++ b/src/retrospective/retrospective.scss
@@ -10,16 +10,11 @@
 }
 
 body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: var(--purple);
-  
-
   #showPreview:checked ~ .reverse .landscape {
    		transform: rotate(90deg) translateX(164px) translateY(164px);
    		width: 29.7cm;
 		height: 21cm;
-	}
-        
+	}     
 
   .reverse {
 
diff --git a/src/secu-dev/index.html b/src/secu-dev/index.html
index 19b2374..8d879f3 100644
--- a/src/secu-dev/index.html
+++ b/src/secu-dev/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="PRACTICES">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../dist/common/first-side/header.html', {"title": "Développement Web Sécurisé", "subtitle": "Bonnes pratiques générales", "imageName": "@@folder"})
diff --git a/src/secu-dev/secu-dev.scss b/src/secu-dev/secu-dev.scss
index dc507ec..85fe1ee 100644
--- a/src/secu-dev/secu-dev.scss
+++ b/src/secu-dev/secu-dev.scss
@@ -2,9 +2,6 @@
 /* you must not change other scss files */
 
 body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: var(--blue);
-
   main div {
     img {
       height: 230px;
diff --git a/src/sonarqube/index.html b/src/sonarqube/index.html
index 9fdd8ba..6db98c4 100644
--- a/src/sonarqube/index.html
+++ b/src/sonarqube/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="TOOLS">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../dist/common/first-side/header.html', {"title": "SonarQube cheat sheet", "subtitle": "Main concepts & metrics.", "imageName": "@@folder"})
diff --git a/src/sonarqube/sonarqube.scss b/src/sonarqube/sonarqube.scss
index 7b968ad..c13d9af 100644
--- a/src/sonarqube/sonarqube.scss
+++ b/src/sonarqube/sonarqube.scss
@@ -2,9 +2,6 @@
 /* you must not change other scss files */
 
 body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: var(--blue);
-
   main div {
     img {
       height: 230px;
diff --git a/src/spring/index.html b/src/spring/index.html
index 56837b3..175b334 100644
--- a/src/spring/index.html
+++ b/src/spring/index.html
@@ -4,89 +4,91 @@
 <head>
   <meta charset="UTF-8">
   <title>Cheat Sheets - by SII</title>
+  <link rel="stylesheet" href="../common.css">  
   <link rel="stylesheet" href="index.css">
   <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Droid+Sans:700" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  
 </head>
 
-<body>
-<header>
-  <div class="home-button no-print">
-    <a href="../" title="back to home cheat Sheet"><i class="material-icons">home</i></a>
-  </div>
-  <div class="header-center">
-    <div class="description-content">
-      <div class="title">Spring Framework cheat Sheets</div>
-      <div class="sub-title">by SII</div>
+<body class="FRAMEWORKS">
+  <header>
+    <div class="home-button no-print">
+      <a href="../" title="back to home cheat Sheet"><i class="material-icons">home</i></a>
     </div>
+    <div class="header-center">
+      <div class="description-content">
+        <div class="title">Spring Framework cheat Sheets</div>
+        <div class="sub-title">by SII</div>
+      </div>
 
-    <div class="logo-container">
-      <img src="..//assets/images/spring.png">
+      <div class="logo-container">
+        <img src="..//assets/images/spring.png">
+      </div>
     </div>
-  </div>
-</header>
-<main>
+  </header>
 
-  <a href="https://github.com/groupe-sii/cheat-sheets"><img style="position: absolute; top: 0; right: 0; border: 0;"
-                                                            src="../assets/images/fork.png" alt="Fork me on GitHub"></a>
+  <main>
 
-  <section>
-    <h1><img class="section-image" src="../assets/images/spring.png"/> Spring framework</h1>
-    <div class="container">
-      <div class="item">
-        <a href="./spring-core/index.html">
-          <img src="../assets/images/spring-core.png"/>
-          <div class="title">Spring core</div>
-        </a>
-      </div>
-      <!-- div class="item">
-        <a href="./spring-web/index.html">
-          <img src="../assets/images/spring-web.png"/>
-          <div class="title">Spring web</div>
-        </a>
-      </div-->
-      <!--div class="item">
-        <a href="./spring-data/index.html">
-          <img src="../assets/images/spring-data.png"/>
-          <div class="title">Spring data</div>
-        </a>
-      </div-->
-    </div>
-  </section>
-  <section>
-    <h1><img class="section-image" src="../assets/images/spring-boot.png"/>  Spring Boot</h1>
-    <div class="container">
-      <div class="item">
-        <a href="./spring-boot/index.html">
-          <img src="../assets/images/spring-boot.png"/>
-          <div class="title">Spring Boot</div>
-        </a>
+    <a href="https://github.com/groupe-sii/cheat-sheets"><img style="position: absolute; top: 0; right: 0; border: 0;"
+                                                              src="../assets/images/fork.png" alt="Fork me on GitHub"></a>
+
+    <section>
+      <h1><img class="section-image" src="../assets/images/spring.png"/> Spring framework</h1>
+      <div class="container">
+        <div class="item">
+          <a href="./spring-core/index.html">
+            <img src="../assets/images/spring-core.png"/>
+            <div class="title">Spring core</div>
+          </a>
+        </div>
+        <!-- div class="item">
+          <a href="./spring-web/index.html">
+            <img src="../assets/images/spring-web.png"/>
+            <div class="title">Spring web</div>
+          </a>
+        </div-->
+        <!--div class="item">
+          <a href="./spring-data/index.html">
+            <img src="../assets/images/spring-data.png"/>
+            <div class="title">Spring data</div>
+          </a>
+        </div-->
       </div>
+    </section>
+    <section>
+      <h1><img class="section-image" src="../assets/images/spring-boot.png"/>  Spring Boot</h1>
+      <div class="container">
+        <div class="item">
+          <a href="./spring-boot/index.html">
+            <img src="../assets/images/spring-boot.png"/>
+            <div class="title">Spring Boot</div>
+          </a>
+        </div>
 
-      <!-- inject a new cheat sheet frameworks -->
-    </div>
-  </section>
-  <!--section>
-    <h1><img class="section-image" src="../assets/images/spring-cloud.png"/>  Spring Cloud</h1>
-    <div class="container">
-      <div class="item">
-        <a href="./spring-netflix-eureka/index.html">
-          <div class="img-item">
-            <img src="../assets/images/spring-netflix-eureka.png"/>
-          </div>
-          <div class="title">Netflix Eureka</div>
-        </a>
+        <!-- inject a new cheat sheet frameworks -->
       </div>
+    </section>
+    <!--section>
+      <h1><img class="section-image" src="../assets/images/spring-cloud.png"/>  Spring Cloud</h1>
+      <div class="container">
+        <div class="item">
+          <a href="./spring-netflix-eureka/index.html">
+            <div class="img-item">
+              <img src="../assets/images/spring-netflix-eureka.png"/>
+            </div>
+            <div class="title">Netflix Eureka</div>
+          </a>
+        </div>
+      </div>
+    </section-->
+  </main>
+
+  <footer>
+    <div class="link-content">
+      
     </div>
-  </section-->
-</main>
-<footer>
-  <div class="link-content">
-    <div><a href="https://groupe-sii.github.io/cheat-sheets">groupe-sii.github.io/cheat-sheets</a></div>
-    <div><a href="http://www.groupe-sii.com">www.groupe-sii.com</a></div>
-    <div><a href="https://blog.groupe-sii.com">blog.groupe-sii.com</a></div>
-  </div>
-  <img src="../assets/images/logoSII-white.svg">
-</footer>
+    <img src="../assets/images/logoSII-white.svg">
+  </footer>
 </body>
 </html>
diff --git a/src/spring/index.scss b/src/spring/index.scss
index fc8c340..5a7e597 100644
--- a/src/spring/index.scss
+++ b/src/spring/index.scss
@@ -5,16 +5,14 @@
 
 body {
   margin: 0;
-  background-color: #e2e2e2;
-   --blue: #B2BE3A;
   font-family: 'open-sans', sans-serif;
   min-width: 740px;
 
   header {
+      background-color: var(--currentColor);
       display: flex;
       align-items: center;
       justify-content: space-between;
-      background-color: var(--blue);
       padding: 0 1%;
       height: 108px;
 
@@ -153,12 +151,12 @@ body {
   }
 
   footer {
-    background-color:var(--blue);
     height: 80px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     position: fixed;
+    background-color: var(--currentColor);
     bottom: 0;
     width: 100%;
 
diff --git a/src/spring/spring-boot/index.html b/src/spring/spring-boot/index.html
index 53e7f5c..39460d4 100644
--- a/src/spring/spring-boot/index.html
+++ b/src/spring/spring-boot/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="../spring.css">
   </head>
-  <body>
+  <body class="FRAMEWORKS">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../../dist/spring/common/first-side/header.html', {"title": "Spring Boot 2 cheat sheet", "subtitle": "", "relativeImagePath": "../", "imageName": "spring-boot"})
diff --git a/src/spring/spring-core/index.html b/src/spring/spring-core/index.html
index c43873b..ab1a132 100644
--- a/src/spring/spring-core/index.html
+++ b/src/spring/spring-core/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="../spring.css">
   </head>
-  <body>
+  <body class="FRAMEWORKS">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../../dist/spring/common/first-side/header.html', {"title": "Spring core cheat sheet", "subtitle": "Container, Dependency and IOC", "relativeImagePath": "../", "imageName": "spring-core"})
diff --git a/src/spring/spring-data/index.html b/src/spring/spring-data/index.html
index 3fa85a5..d20d5eb 100644
--- a/src/spring/spring-data/index.html
+++ b/src/spring/spring-data/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="../spring.css">
   </head>
-  <body>
+  <body class="FRAMEWORKS">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../../dist/spring/common/first-side/header.html', {"title": "Spring Data cheat sheet", "subtitle": "Spring Data, accès aux données sans implémentation", "relativeImagePath": "../", "imageName": "spring-data"})
diff --git a/src/spring/spring-netflix-eureka/index.html b/src/spring/spring-netflix-eureka/index.html
index 715f1f2..bd822e3 100644
--- a/src/spring/spring-netflix-eureka/index.html
+++ b/src/spring/spring-netflix-eureka/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="../spring.css">
   </head>
-  <body>
+  <body class="FRAMEWORKS">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../../dist/spring/common/first-side/header.html', {"title": "Spring Netflix Eureka cheat sheet", "subtitle": "", "relativeImagePath": "../", "imageName": "spring-netflix-eureka"})
diff --git a/src/spring/spring-web/index.html b/src/spring/spring-web/index.html
index 1711a48..4d55917 100644
--- a/src/spring/spring-web/index.html
+++ b/src/spring/spring-web/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="../spring.css">
   </head>
-  <body>
+  <body class="FRAMEWORKS">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../../dist/spring/common/first-side/header.html', {"title": "Spring Web cheat sheet", "subtitle": "MVC, API", "relativeImagePath": "../", "imageName": "spring-web"})
diff --git a/src/spring/spring.scss b/src/spring/spring.scss
index 2e698e6..d9e5215 100644
--- a/src/spring/spring.scss
+++ b/src/spring/spring.scss
@@ -2,30 +2,12 @@
 /* you must not change other scss files */
 
 body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: var(--green);
-
   main div {
       img {
         height: 230px;
       }
     }
 
-    th {
-      background-color: lighten(#B2BE3A,  20%);
-    }
-
-    tr:nth-child(even) {background: #CCC}
-    tr:nth-child(odd) {background: #FFF}
-
-    tr:nth-child(even) > td:first-child{
-      background-color: lighten(#B2BE3A,  40%);
-    }
-
-    tr:nth-child(odd) > td:first-child{
-      background-color: lighten(#B2BE3A,  50%);
-    }
-
     table {
       width: 100%;
     }
diff --git a/src/sprint-planning/index.html b/src/sprint-planning/index.html
index 4228faf..61578a3 100644
--- a/src/sprint-planning/index.html
+++ b/src/sprint-planning/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="AGILE">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../dist/common/first-side/header-no-print-large.html', {"title": "Sprint Planning", "subtitle": "Cérémonies scrum", "imageName": "AgileBySII_blanc"})
diff --git a/src/sprint-planning/sprint-planning.scss b/src/sprint-planning/sprint-planning.scss
index 9df1b95..ccbedcf 100644
--- a/src/sprint-planning/sprint-planning.scss
+++ b/src/sprint-planning/sprint-planning.scss
@@ -10,10 +10,6 @@
 }
 
 body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: var(--green);
-  
-
   #showPreview:checked ~ .reverse .landscape {
    		transform: rotate(90deg) translateX(164px) translateY(164px);
    		width: 29.7cm;
diff --git a/src/sprint-review/index.html b/src/sprint-review/index.html
index 0fdf402..d8a75db 100644
--- a/src/sprint-review/index.html
+++ b/src/sprint-review/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="AGILE">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../dist/common/first-side/header-no-print-large.html', {"title": "Sprint Review", "subtitle": "Cérémonies scrum", "imageName": "AgileBySII_blanc"})
diff --git a/src/sprint-review/sprint-review.scss b/src/sprint-review/sprint-review.scss
index 0df7dc6..ccbedcf 100644
--- a/src/sprint-review/sprint-review.scss
+++ b/src/sprint-review/sprint-review.scss
@@ -10,10 +10,6 @@
 }
 
 body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: var(--orange);
-  
-
   #showPreview:checked ~ .reverse .landscape {
    		transform: rotate(90deg) translateX(164px) translateY(164px);
    		width: 29.7cm;
diff --git a/src/stencil/index.html b/src/stencil/index.html
index 2a63f2b..8634d7e 100644
--- a/src/stencil/index.html
+++ b/src/stencil/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="FRAMEWORKS">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../dist/common/first-side/header.html', {"title": "Stencil cheat sheet", "subtitle": "A Compiler for Web Components.", "imageName": "@@folder"})
diff --git a/src/stencil/stencil.scss b/src/stencil/stencil.scss
index 81e6c7e..34fdd72 100644
--- a/src/stencil/stencil.scss
+++ b/src/stencil/stencil.scss
@@ -1,7 +1,5 @@
 /* put your all custom css rules here */
 /* you must not change other scss files */
 
-body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: var(--blue);
+body {  
 }
\ No newline at end of file
diff --git a/src/templates/index.html b/src/templates/index.html
index aaf3983..d527ceb 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="{{COLOR}}">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../dist/common/first-side/header.html', {"title": "<%= name %> cheat sheet", "subtitle": "sous titre, une description.", "imageName": "@@folder"})
diff --git a/src/templates/style.scss b/src/templates/style.scss
index d7973b5..377ce03 100644
--- a/src/templates/style.scss
+++ b/src/templates/style.scss
@@ -2,8 +2,6 @@
 /* you must not change other scss files */
 
 body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: var(--{{COLOR}});
 
   main div {
     img {
diff --git a/src/tensorflow/index.html b/src/tensorflow/index.html
index 3e3edda..4c670a1 100644
--- a/src/tensorflow/index.html
+++ b/src/tensorflow/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="FRAMEWORKS">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../dist/common/first-side/header.html', {"title": "TensorFlow cheat sheet", "subtitle": "Machine Learning framework", "imageName": "@@folder"})
diff --git a/src/tensorflow/tensorflow.scss b/src/tensorflow/tensorflow.scss
index af8cba9..ba831ae 100644
--- a/src/tensorflow/tensorflow.scss
+++ b/src/tensorflow/tensorflow.scss
@@ -2,9 +2,6 @@
 /* you must not change other scss files */
 
 body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: var(--orange);
-
   main div {
     img {
       height: 230px;
diff --git a/src/typescript/index.html b/src/typescript/index.html
index c4e4682..b3867f7 100644
--- a/src/typescript/index.html
+++ b/src/typescript/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="LANGUAGES">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../dist/common/first-side/header.html', {"title": "TypeScript cheat sheet", "subtitle": "JavaScript that scales.", "imageName": "@@folder"})
diff --git a/src/typescript/typescript.scss b/src/typescript/typescript.scss
index 65706bd..377ce03 100644
--- a/src/typescript/typescript.scss
+++ b/src/typescript/typescript.scss
@@ -2,8 +2,6 @@
 /* you must not change other scss files */
 
 body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: var(--blue);
 
   main div {
     img {
diff --git a/src/vue-cli/index.html b/src/vue-cli/index.html
index 116f1b1..43e91d9 100644
--- a/src/vue-cli/index.html
+++ b/src/vue-cli/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="TOOLS">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../dist/common/first-side/header.html', {"title": "Vue Cli cheat sheet", "subtitle": "Vue CLI for Vue.js applications", "imageName": "@@folder"})
diff --git a/src/vue-cli/vue-cli.scss b/src/vue-cli/vue-cli.scss
index 65706bd..ffd15ef 100644
--- a/src/vue-cli/vue-cli.scss
+++ b/src/vue-cli/vue-cli.scss
@@ -2,9 +2,6 @@
 /* you must not change other scss files */
 
 body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: var(--blue);
-
   main div {
     img {
       height: 230px;
diff --git a/src/warp10/index.html b/src/warp10/index.html
index f08edfb..8bad7fb 100644
--- a/src/warp10/index.html
+++ b/src/warp10/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="../common/lib/atom-one-light.css">
     <link rel="stylesheet" href="./@@folder.css">
   </head>
-  <body>
+  <body class="LANGUAGES">
     <input type="checkbox" id="showPreview"/>
     <div class="first-side">
       @@include('../../dist/common/first-side/header.html', {"title": "Warp10 cheat sheet", "subtitle": "GeoTimeSeries® manipulation script.", "imageName": "@@folder"})
diff --git a/src/warp10/warp10.scss b/src/warp10/warp10.scss
index d5d01ea..6617217 100644
--- a/src/warp10/warp10.scss
+++ b/src/warp10/warp10.scss
@@ -2,9 +2,6 @@
 /* you must not change other scss files */
 
 body {
-  // available colors are: blue, green, purple, orange and grey
-  --currentColor: #28b5d8;
-
   main div {
     img {
       height: 224px;