feat(#78): Align category colors with SII corporate style guidelines

groupe-sii · Oct 6, 2023 · f1f4510 · f1f4510
1 parent 2cb4673
commit f1f4510
Show file tree

Hide file tree

Showing 81 changed files with 150 additions and 259 deletions.
diff --git a/assets/images/reduxjs.png b/assets/images/reduxjs.png
diff --git 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
@@ -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
@@ -6,11 +6,11 @@
     <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"})
-
+      
       <main>
         <div class="column1">
           @@include('../../dist/@@folder/first-side/column1.html')

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"})