Applying light/dark mode

- close #503

Co-authored-by: odysseu <ulysse.boucherie@insee.fr>

_quarto.yml

@@ -17,9 +17,6 @@ book:
   page-navigation: true
   reader-mode: true
   sharing: [twitter, linkedin]
-
-  #sidebar:
-    #logo: "resources/logo-utilitR.png"
 
   page-footer:
     right: |
@@ -55,6 +52,7 @@ book:
         href: 02_Bonnes_pratiques/01-qualite-code.qmd
 
   sidebar:
+    style: "docked"
     search: true
     logo: resources/logo-utilitr.png
 
@@ -87,7 +85,6 @@ book:
       chapters:
         - 03_Fiches_thematiques/Fiche_tidyverse.qmd
         - 03_Fiches_thematiques/Fiche_datatable.qmd
-        - 03_Fiches_thematiques/Fiche_arrow.qmd
     - part: "Manipuler des données avec R"
       chapters:
         - 03_Fiches_thematiques/Fiche_joindre_donnees.qmd
@@ -119,11 +116,8 @@ book:
 format:
   html:
     theme:
-      - cosmo
-      - css/style.css
-      - css/style-utilitr.css
-      - css/box.scss
-      - css/style.scss
+      light: [cosmo, css/style.css, css/style-utilitr.css, css/style.scss]
+      dark:  [darkly, css/style.css, css/style-utilitr.css, css/style.scss]
     code-link: true
     code-copy: true
     code-overflow: wrap

css/style-utilitr.css

@@ -5,13 +5,6 @@ $code-color: #4c8c8c ;
 
 /*-- scss:rules --*/
 
-/*
-#TOC::after {
-  padding-top: 10px;
-  content: url("resources/boutonA4.svg");
-  display: block;
-}
-*/
 
 body{
   font-size: 18px;
@@ -74,163 +67,6 @@ kbd {
     white-space: nowrap;
    }
 
-.rmdcaution, .rmdimportant, .rmdnote, .rmdtip, .rmdwarning {
-  padding: 1em 1em 1em 4em;
-  margin-bottom: 10px;
-  background: #f5f5f5 5px center/3em no-repeat;
-  border-left:.2rem solid rgba(220, 53, 69, 1);
-}
-/*
-.rmdcaution {
-  background-image: url("pics/images/caution.png");
-}
-.rmdimportant {
-  background-image: url("pics/images/important.png");
-}
-.rmdnote {
-  background-image: url("pics/images/note.png");
-}
-.rmdtip {
-  background-image: url("pics/images/tip.png");
-}
-.rmdwarning {
-  background-image: url("pics/images/warning.png");
-}
-*/
-
-.recommandation,
-.conseil,
-.remarque,
-.insee,
-.auteurs {
-  margin: 20px 0 20px 30px ;
-  padding: 0 0 3px 9px;
-  position: relative;
-  page-break-inside:avoid;
-  border-left:   3px solid;
-/*
-  border-bottom: 0.25em solid;
-*/
-}
-.recommandation {
-  border-color: rgba(220, 53, 69, 1);
-}
-.conseil {
-  border-color: rgba(255, 193, 7, 1);
-}
-.remarque {
-  border-color: rgba(0, 123, 255, 1);
-}
-.insee {
-  border-color: rgba(81, 81, 81, 1);
-}
-.auteurs {
-  border-color: rgba(82, 190, 128, 1);
-}
-
-.recommandation:before,
-.conseil:before,
-.remarque:before,
-.insee:before,
-.auteurs:before {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  padding: 6px 0 6px 10px;
-  margin-left: -10px;
-  margin-bottom: 0.4em;
-  font-weight: 700;
-  font-size: 120%;
-  border-left: 30px;
-}
-
-.recommandation:before {
-  content: "Recommandation";
-  background-color:   rgba(220, 53, 69, 0.2);
-  border-color: rgba(220, 53, 69, 0.2);
-}
-
-.conseil:before {
-  content: "Conseil";
-  background-color:  rgba(255, 193, 7, 0.2);
-  border-color: rgba(255, 193, 7, 0.2);
-}
-
-.remarque:before {
-  content: "Remarque";
-  background-color:  rgba(0, 123, 255, 0.2);
-  border-color: rgba(0, 123, 255, 0.2);
-}
-
-.insee:before {
-  content: "Spécificité de l'Insee";
-  background-color:  rgba(81, 81, 81, 0.2);
-  border-color: rgba(81, 81, 81, 0.2);
-}
-
-.auteurs:before {
-  content: "Contributeurs du projet";
-  background-color:   rgba(82, 190, 128, 0.2);
-  border-color:   rgba(82, 190, 128, 0.2);
-}
-
-.recommandation:after,
-.conseil:after,
-.remarque:after,
-.insee:after,
-.auteurs:after {
-  font-family: "FontAwesome", "Font Awesome 5 Free" ;
-  font-weight: 400;
-  font-size: 200%;
-  display: flex;
-  position: absolute;
-  justify-content: center;
-  align-items: center;
-  left: -50px;
-  height: 40px;
-  width: 40px;
-  top: 0;
-}
-
-/* Quelques réglages spécifiques pour le print */
-@media print {
-  .recommandation:after,
-  .conseil:after,
-  .remarque:after,
-  .insee:after,
-  .auteurs:after {
-    left: -40px;
-    top: -6px;
-  }
-}
-
-.recommandation:after {
-  color: rgba(220, 53, 69, 1);
-}
-
-.conseil:after {
-  color: rgba(255, 193, 7, 1);
-}
-
-.remarque:after {
-  color: rgba(0, 123, 255, 1);
-}
-
-.insee:after {
-  color: rgba(81, 81, 81, 1);
-}
-
-.auteurs:after {
-  color: rgb(82, 190, 128, 1);
-}
-
-
-.exercice {
-  padding: 1em;
-  background: #e6f0ff;
-  border: 2px solid #4169e1;
-  border-radius: 10px;
-}
 
 .center {
   text-align: center;