From 61e17e9ef03db094f687b301882338543481d8c9 Mon Sep 17 00:00:00 2001 From: linogaliana Date: Tue, 13 Feb 2024 14:19:04 +0000 Subject: [PATCH] Applying light/dark mode - close #503 Co-authored-by: odysseu --- _quarto.yml | 12 +-- css/box.scss | 95 ------------------ css/style-utilitr.css | 164 -------------------------------- resources/rmarkdown/chunk07.png | Bin 70290 -> 70290 bytes 4 files changed, 3 insertions(+), 268 deletions(-) delete mode 100644 css/box.scss diff --git a/_quarto.yml b/_quarto.yml index 644c1c19..05538d57 100644 --- a/_quarto.yml +++ b/_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 diff --git a/css/box.scss b/css/box.scss deleted file mode 100644 index ba0bcfc6..00000000 --- a/css/box.scss +++ /dev/null @@ -1,95 +0,0 @@ -/*-- scss:defaults --*/ - -$border-color-recommandation: rgba(220, 53, 69) !default; -$border-color-recommandation-head: rgba(220, 53, 69, 0.9) !default; -$icon-recommandation: url('data:image/svg+xml,') !default; - -$border-color-insee: rgba(81, 81, 81) !default; -$border-color-insee-head: rgba(81, 81, 81, 0.7) !default; -$icon-insee: url('data:image/svg+xml,') !default; - -$border-color-conseil: rgba(255, 193, 7) !default; -$border-color-conseil-head: rgba(255, 193, 7, 0.4) !default; -$icon-conseil: url('data:image/svg+xml,') !default; - -$border-color-remarque: rgba(0, 123, 255) !default; -$border-color-remarque-head: rgba(0, 123, 255, 0.4) !default; -$icon-remarque: url('data:image/svg+xml,') !default; - - -/*---- -$border-color-left: #0dcaf0 !default; -$icon: url('data:image/svg+xml, ') !default; - -$background-color: #bfe4eb !default; -*/ - -/*-- scss:rules --*/ - - -div.callout-recommandation.callout { - border-left-color: $border-color-recommandation; -} -div.callout-insee.callout { - border-left-color: $border-color-insee; -} -div.callout-conseil.callout { - border-left-color: $border-color-conseil; -} -div.callout-remarque.callout { - border-left-color: $border-color-remarque; -} - - -div.callout-recommandation.callout-style-default>.callout-header, -div.callout-insee.callout-style-default>.callout-header, -div.callout-conseil.callout-style-default>.callout-header, -div.callout-remarque.callout-style-default>.callout-header { - color: black; -} - -div.callout-recommandation.callout-style-default>.callout-header { - background-color: $border-color-recommandation; //fallback for old browsers - background-color: $border-color-recommandation-head; //fallback for old browsers -} -div.callout-insee.callout-style-default>.callout-header { - background-color: $border-color-insee; //fallback for old browsers - background-color: $border-color-insee-head; //fallback for old browsers -} -div.callout-conseil.callout-style-default>.callout-header { - background-color: $border-color-conseil; //fallback for old browsers - background-color: $border-color-conseil-head; //fallback for old browsers -} -div.callout-remarque.callout-style-default>.callout-header { - background-color: $border-color-remarque; //fallback for old browsers - background-color: $border-color-remarque-head; //fallback for old browsers -} - -.callout-recommandation.icon .callout-icon, -.callout-insee.icon .callout-icon, -.callout-conseil.icon .callout-icon, -.callout-remarque.icon .callout-icon { - display: unset !important; -} - -div.callout-recommandation.icon.callout-captioned .callout-icon::before { - background-image: $icon-recommandation; -} -div.callout-insee.icon.callout-captioned .callout-icon::before { - background-image: $icon-insee; -} -div.callout-conseil.icon.callout-captioned .callout-icon::before { - background-image: $icon-conseil; -} -div.callout-remarque.icon.callout-captioned .callout-icon::before { - background-image: $icon-remarque; -} - -.callout-recommandation.icon.callout-style-default div.callout-icon-container, -.callout-insee.icon.callout-style-default div.callout-icon-container, -.callout-conseil.icon.callout-style-default div.callout-icon-container, -.callout-remarque.icon.callout-style-default div.callout-icon-container { - padding-top: 0.1em; - padding-right: 0.35em; -} - diff --git a/css/style-utilitr.css b/css/style-utilitr.css index 0ca787d0..7c19385c 100644 --- a/css/style-utilitr.css +++ b/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; diff --git a/resources/rmarkdown/chunk07.png b/resources/rmarkdown/chunk07.png index 050fae9ebd182d76e7be53039f9b572aa7a6e9a5..d2a9bbb7b02cd0293fdb1d946d59f458fa899133 100644 GIT binary patch delta 90 zcmbQVlx5OVmI<+3FPM0F)y=P*v^m|FzBQe(R#3`B*T6{E&^W}<*viP#%D_?%t<(PrGK%AnzgeijIbC0fF&O~-$Qi2u delta 90 zcmbQVlx5OVmI<+3&v{t*Wvnl%b96MOZ%t>c6_hg8H8j#SFb*-Wv@$ZVGBwmTFt9Q( au$lOUZ~8w$MsXbSzGr+kP1hG