fix: plus petite palette

Fixes #15
This commit is contained in:
Kazhnuz 2023-05-02 11:58:09 +02:00
parent d97c7b9df6
commit 9fb377828f
4 changed files with 82 additions and 451 deletions

View file

@ -23,7 +23,7 @@
</section> </section>
<?php if ( !is_paged() ) { <?php if ( !is_paged() ) {
?> ?>
<div class="toast mb-1 bg-blue home-toast"><strong class="m-0"><i class="fa fa-fw fa-info"></i> Note :</strong> Si vous êtes intéressé pour découvrir plus <div class="toast mb-1 bg-info home-toast"><strong class="m-0"><i class="fa fa-fw fa-info"></i> Note :</strong> Si vous êtes intéressé pour découvrir plus
de contenus trouvé sur internet, vous pouvez aussi regarder mon <a href="http://shaarli.kazhnuz.space/">Shaarli</a>, qui sert plus à de contenus trouvé sur internet, vous pouvez aussi regarder mon <a href="http://shaarli.kazhnuz.space/">Shaarli</a>, qui sert plus à
partager des petites découverte rigolote ou intéressantes.</div> partager des petites découverte rigolote ou intéressantes.</div>
<?php <?php

View file

@ -32,9 +32,11 @@ $semantics: (
"secondary":"dark", "secondary":"dark",
"warning":"orange", "warning":"orange",
"danger":"red", "danger":"red",
"info":"skyblue", "info":"blue",
"success":"green", "success":"green",
"muted":"grey"); "muted":"grey",
"light":"light",
"dark":"dark");
$helpers: ( $helpers: (
"font":"dark2", "font":"dark2",

View file

@ -7,8 +7,7 @@
// FUNCTIONS TO GET MORE EASILY COLORS // FUNCTIONS TO GET MORE EASILY COLORS
@function list-colors() { @function list-colors() {
$newmap: map-merge($palette, $semantics); @return $semantics;
@return $newmap;
} }
@function luminance($color) { @function luminance($color) {

516
style.css
View file

@ -1586,162 +1586,6 @@ textarea {
/* 1.2 - Colorization classes /* 1.2 - Colorization classes
* Colorize some aspect of a class * Colorize some aspect of a class
**/ **/
.bg-blue {
background-color: #339af0;
color: #fefefe; }
.bg-blue a {
color: currentColor;
outline-color: currentColor; }
.bg-blue:hover {
background-color: #339af0;
color: #fefefe; }
.bg-blue:hover a {
color: currentColor;
outline-color: currentColor; }
.bg-violet {
background-color: #845ef7;
color: #fefefe; }
.bg-violet a {
color: currentColor;
outline-color: currentColor; }
.bg-violet:hover {
background-color: #845ef7;
color: #fefefe; }
.bg-violet:hover a {
color: currentColor;
outline-color: currentColor; }
.bg-red {
background-color: #e33d22;
color: #fefefe; }
.bg-red a {
color: currentColor;
outline-color: currentColor; }
.bg-red:hover {
background-color: #e33d22;
color: #fefefe; }
.bg-red:hover a {
color: currentColor;
outline-color: currentColor; }
.bg-orange {
background-color: #ff922b;
color: #fefefe; }
.bg-orange a {
color: currentColor;
outline-color: currentColor; }
.bg-orange:hover {
background-color: #ff922b;
color: #fefefe; }
.bg-orange:hover a {
color: currentColor;
outline-color: currentColor; }
.bg-green {
background-color: #51cf66;
color: #fefefe; }
.bg-green a {
color: currentColor;
outline-color: currentColor; }
.bg-green:hover {
background-color: #51cf66;
color: #fefefe; }
.bg-green:hover a {
color: currentColor;
outline-color: currentColor; }
.bg-skyblue {
background-color: #3bc9db;
color: #fefefe; }
.bg-skyblue a {
color: currentColor;
outline-color: currentColor; }
.bg-skyblue:hover {
background-color: #3bc9db;
color: #fefefe; }
.bg-skyblue:hover a {
color: currentColor;
outline-color: currentColor; }
.bg-dark {
background-color: #343a40;
color: #fefefe; }
.bg-dark a {
color: currentColor;
outline-color: currentColor; }
.bg-dark:hover {
background-color: #343a40;
color: #fefefe; }
.bg-dark:hover a {
color: currentColor;
outline-color: currentColor; }
.bg-light {
background-color: #fefefe;
color: #212529; }
.bg-light a {
color: currentColor;
outline-color: currentColor; }
.bg-light:hover {
background-color: #fefefe;
color: #212529; }
.bg-light:hover a {
color: currentColor;
outline-color: currentColor; }
.bg-yellow {
background-color: #fcc419;
color: #fefefe; }
.bg-yellow a {
color: currentColor;
outline-color: currentColor; }
.bg-yellow:hover {
background-color: #fcc419;
color: #fefefe; }
.bg-yellow:hover a {
color: currentColor;
outline-color: currentColor; }
.bg-grey {
background-color: #adb5bd;
color: #fefefe; }
.bg-grey a {
color: currentColor;
outline-color: currentColor; }
.bg-grey:hover {
background-color: #adb5bd;
color: #fefefe; }
.bg-grey:hover a {
color: currentColor;
outline-color: currentColor; }
.bg-dark2 {
background-color: #212529;
color: #fefefe; }
.bg-dark2 a {
color: currentColor;
outline-color: currentColor; }
.bg-dark2:hover {
background-color: #212529;
color: #fefefe; }
.bg-dark2:hover a {
color: currentColor;
outline-color: currentColor; }
.bg-light2 {
background-color: #f1f3f5;
color: #212529; }
.bg-light2 a {
color: currentColor;
outline-color: currentColor; }
.bg-light2:hover {
background-color: #f1f3f5;
color: #212529; }
.bg-light2:hover a {
color: currentColor;
outline-color: currentColor; }
.bg-primary { .bg-primary {
background-color: #e33d22; background-color: #e33d22;
color: #fefefe; } color: #fefefe; }
@ -1795,13 +1639,13 @@ textarea {
outline-color: currentColor; } outline-color: currentColor; }
.bg-info { .bg-info {
background-color: #3bc9db; background-color: #339af0;
color: #fefefe; } color: #fefefe; }
.bg-info a { .bg-info a {
color: currentColor; color: currentColor;
outline-color: currentColor; } outline-color: currentColor; }
.bg-info:hover { .bg-info:hover {
background-color: #3bc9db; background-color: #339af0;
color: #fefefe; } color: #fefefe; }
.bg-info:hover a { .bg-info:hover a {
color: currentColor; color: currentColor;
@ -1833,41 +1677,31 @@ textarea {
color: currentColor; color: currentColor;
outline-color: currentColor; } outline-color: currentColor; }
.text-blue { .bg-light {
color: #339af0; } background-color: #fefefe;
.text-violet {
color: #845ef7; }
.text-red {
color: #e33d22; }
.text-orange {
color: #ff922b; }
.text-green {
color: #51cf66; }
.text-skyblue {
color: #3bc9db; }
.text-dark {
color: #343a40; }
.text-light {
color: #fefefe; }
.text-yellow {
color: #fcc419; }
.text-grey {
color: #adb5bd; }
.text-dark2 {
color: #212529; } color: #212529; }
.bg-light a {
color: currentColor;
outline-color: currentColor; }
.bg-light:hover {
background-color: #fefefe;
color: #212529; }
.bg-light:hover a {
color: currentColor;
outline-color: currentColor; }
.text-light2 { .bg-dark {
color: #f1f3f5; } background-color: #343a40;
color: #fefefe; }
.bg-dark a {
color: currentColor;
outline-color: currentColor; }
.bg-dark:hover {
background-color: #343a40;
color: #fefefe; }
.bg-dark:hover a {
color: currentColor;
outline-color: currentColor; }
.text-primary { .text-primary {
color: #e33d22; } color: #e33d22; }
@ -1882,7 +1716,7 @@ textarea {
color: #e33d22; } color: #e33d22; }
.text-info { .text-info {
color: #3bc9db; } color: #339af0; }
.text-success { .text-success {
color: #51cf66; } color: #51cf66; }
@ -1890,173 +1724,11 @@ textarea {
.text-muted { .text-muted {
color: #adb5bd; } color: #adb5bd; }
.btn-blue { .text-light {
background-color: #339af0;
outline-color: #339af0;
color: #fefefe;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-blue:visited {
background-color: #339af0;
color: #fefefe; } color: #fefefe; }
.btn-blue:hover, .btn-blue:active, .btn-blue:visited:hover, .btn-blue:visited:active, .btn-blue:not(.disabled):not(:disabled):hover, .btn-blue:not(.disabled):not(:disabled):active {
background-color: #51a9f2;
color: white;
outline-color: #51a9f2;
box-shadow: none; }
.btn-violet { .text-dark {
background-color: #845ef7; color: #343a40; }
outline-color: #845ef7;
color: #fefefe;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-violet:visited {
background-color: #845ef7;
color: #fefefe; }
.btn-violet:hover, .btn-violet:active, .btn-violet:visited:hover, .btn-violet:visited:active, .btn-violet:not(.disabled):not(:disabled):hover, .btn-violet:not(.disabled):not(:disabled):active {
background-color: #9676f8;
color: white;
outline-color: #9676f8;
box-shadow: none; }
.btn-red {
background-color: #e33d22;
outline-color: #e33d22;
color: #fefefe;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-red:visited {
background-color: #e33d22;
color: #fefefe; }
.btn-red:hover, .btn-red:active, .btn-red:visited:hover, .btn-red:visited:active, .btn-red:not(.disabled):not(:disabled):hover, .btn-red:not(.disabled):not(:disabled):active {
background-color: #e75a43;
color: white;
outline-color: #e75a43;
box-shadow: none; }
.btn-orange {
background-color: #ff922b;
outline-color: #ff922b;
color: #fefefe;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-orange:visited {
background-color: #ff922b;
color: #fefefe; }
.btn-orange:hover, .btn-orange:active, .btn-orange:visited:hover, .btn-orange:visited:active, .btn-orange:not(.disabled):not(:disabled):hover, .btn-orange:not(.disabled):not(:disabled):active {
background-color: #ffa24b;
color: white;
outline-color: #ffa24b;
box-shadow: none; }
.btn-green {
background-color: #51cf66;
outline-color: #51cf66;
color: #fefefe;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-green:visited {
background-color: #51cf66;
color: #fefefe; }
.btn-green:hover, .btn-green:active, .btn-green:visited:hover, .btn-green:visited:active, .btn-green:not(.disabled):not(:disabled):hover, .btn-green:not(.disabled):not(:disabled):active {
background-color: #6bd67d;
color: white;
outline-color: #6bd67d;
box-shadow: none; }
.btn-skyblue {
background-color: #3bc9db;
outline-color: #3bc9db;
color: #fefefe;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-skyblue:visited {
background-color: #3bc9db;
color: #fefefe; }
.btn-skyblue:hover, .btn-skyblue:active, .btn-skyblue:visited:hover, .btn-skyblue:visited:active, .btn-skyblue:not(.disabled):not(:disabled):hover, .btn-skyblue:not(.disabled):not(:disabled):active {
background-color: #58d1e0;
color: white;
outline-color: #58d1e0;
box-shadow: none; }
.btn-dark {
background-color: #343a40;
outline-color: #343a40;
color: #fefefe;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-dark:visited {
background-color: #343a40;
color: #fefefe; }
.btn-dark:hover, .btn-dark:active, .btn-dark:visited:hover, .btn-dark:visited:active, .btn-dark:not(.disabled):not(:disabled):hover, .btn-dark:not(.disabled):not(:disabled):active {
background-color: #52575d;
color: white;
outline-color: #52575d;
box-shadow: none; }
.btn-light {
background-color: #fefefe;
outline-color: #fefefe;
color: #212529;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-light:visited {
background-color: #fefefe;
color: #212529; }
.btn-light:hover, .btn-light:active, .btn-light:visited:hover, .btn-light:visited:active, .btn-light:not(.disabled):not(:disabled):hover, .btn-light:not(.disabled):not(:disabled):active {
background-color: #ddddde;
color: #2c3237;
outline-color: #ddddde;
box-shadow: none; }
.btn-yellow {
background-color: #fcc419;
outline-color: #fcc419;
color: #fefefe;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-yellow:visited {
background-color: #fcc419;
color: #fefefe; }
.btn-yellow:hover, .btn-yellow:active, .btn-yellow:visited:hover, .btn-yellow:visited:active, .btn-yellow:not(.disabled):not(:disabled):hover, .btn-yellow:not(.disabled):not(:disabled):active {
background-color: #fccd3b;
color: white;
outline-color: #fccd3b;
box-shadow: none; }
.btn-grey {
background-color: #adb5bd;
outline-color: #adb5bd;
color: #fefefe;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-grey:visited {
background-color: #adb5bd;
color: #fefefe; }
.btn-grey:hover, .btn-grey:active, .btn-grey:visited:hover, .btn-grey:visited:active, .btn-grey:not(.disabled):not(:disabled):hover, .btn-grey:not(.disabled):not(:disabled):active {
background-color: #b9c0c7;
color: white;
outline-color: #b9c0c7;
box-shadow: none; }
.btn-dark2 {
background-color: #212529;
outline-color: #212529;
color: #fefefe;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-dark2:visited {
background-color: #212529;
color: #fefefe; }
.btn-dark2:hover, .btn-dark2:active, .btn-dark2:visited:hover, .btn-dark2:visited:active, .btn-dark2:not(.disabled):not(:disabled):hover, .btn-dark2:not(.disabled):not(:disabled):active {
background-color: #424649;
color: white;
outline-color: #424649;
box-shadow: none; }
.btn-light2 {
background-color: #f1f3f5;
outline-color: #f1f3f5;
color: #212529;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-light2:visited {
background-color: #f1f3f5;
color: #212529; }
.btn-light2:hover, .btn-light2:active, .btn-light2:visited:hover, .btn-light2:visited:active, .btn-light2:not(.disabled):not(:disabled):hover, .btn-light2:not(.disabled):not(:disabled):active {
background-color: #d2d4d6;
color: #2c3237;
outline-color: #d2d4d6;
box-shadow: none; }
.btn-primary { .btn-primary {
background-color: #e33d22; background-color: #e33d22;
@ -2115,17 +1787,17 @@ textarea {
box-shadow: none; } box-shadow: none; }
.btn-info { .btn-info {
background-color: #3bc9db; background-color: #339af0;
outline-color: #3bc9db; outline-color: #339af0;
color: #fefefe; color: #fefefe;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); } box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-info:visited { .btn-info:visited {
background-color: #3bc9db; background-color: #339af0;
color: #fefefe; } color: #fefefe; }
.btn-info:hover, .btn-info:active, .btn-info:visited:hover, .btn-info:visited:active, .btn-info:not(.disabled):not(:disabled):hover, .btn-info:not(.disabled):not(:disabled):active { .btn-info:hover, .btn-info:active, .btn-info:visited:hover, .btn-info:visited:active, .btn-info:not(.disabled):not(:disabled):hover, .btn-info:not(.disabled):not(:disabled):active {
background-color: #58d1e0; background-color: #51a9f2;
color: white; color: white;
outline-color: #58d1e0; outline-color: #51a9f2;
box-shadow: none; } box-shadow: none; }
.btn-success { .btn-success {
@ -2156,89 +1828,33 @@ textarea {
outline-color: #b9c0c7; outline-color: #b9c0c7;
box-shadow: none; } box-shadow: none; }
.head-blue .card-header, .head-blue .menu-header, .head-blue.header-bg th { .btn-light {
background-color: #339af0; background-color: #fefefe;
color: #fefefe; } outline-color: #fefefe;
color: #212529;
.head-blue th { box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
color: #339af0; } .btn-light:visited {
.head-violet .card-header, .head-violet .menu-header, .head-violet.header-bg th {
background-color: #845ef7;
color: #fefefe; }
.head-violet th {
color: #845ef7; }
.head-red .card-header, .head-red .menu-header, .head-red.header-bg th {
background-color: #e33d22;
color: #fefefe; }
.head-red th {
color: #e33d22; }
.head-orange .card-header, .head-orange .menu-header, .head-orange.header-bg th {
background-color: #ff922b;
color: #fefefe; }
.head-orange th {
color: #ff922b; }
.head-green .card-header, .head-green .menu-header, .head-green.header-bg th {
background-color: #51cf66;
color: #fefefe; }
.head-green th {
color: #51cf66; }
.head-skyblue .card-header, .head-skyblue .menu-header, .head-skyblue.header-bg th {
background-color: #3bc9db;
color: #fefefe; }
.head-skyblue th {
color: #3bc9db; }
.head-dark .card-header, .head-dark .menu-header, .head-dark.header-bg th {
background-color: #343a40;
color: #fefefe; }
.head-dark th {
color: #343a40; }
.head-light .card-header, .head-light .menu-header, .head-light.header-bg th {
background-color: #fefefe; background-color: #fefefe;
color: #212529; } color: #212529; }
.btn-light:hover, .btn-light:active, .btn-light:visited:hover, .btn-light:visited:active, .btn-light:not(.disabled):not(:disabled):hover, .btn-light:not(.disabled):not(:disabled):active {
background-color: #ddddde;
color: #2c3237;
outline-color: #ddddde;
box-shadow: none; }
.head-light th { .btn-dark {
background-color: #343a40;
outline-color: #343a40;
color: #fefefe;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-dark:visited {
background-color: #343a40;
color: #fefefe; } color: #fefefe; }
.btn-dark:hover, .btn-dark:active, .btn-dark:visited:hover, .btn-dark:visited:active, .btn-dark:not(.disabled):not(:disabled):hover, .btn-dark:not(.disabled):not(:disabled):active {
.head-yellow .card-header, .head-yellow .menu-header, .head-yellow.header-bg th { background-color: #52575d;
background-color: #fcc419; color: white;
color: #fefefe; } outline-color: #52575d;
box-shadow: none; }
.head-yellow th {
color: #fcc419; }
.head-grey .card-header, .head-grey .menu-header, .head-grey.header-bg th {
background-color: #adb5bd;
color: #fefefe; }
.head-grey th {
color: #adb5bd; }
.head-dark2 .card-header, .head-dark2 .menu-header, .head-dark2.header-bg th {
background-color: #212529;
color: #fefefe; }
.head-dark2 th {
color: #212529; }
.head-light2 .card-header, .head-light2 .menu-header, .head-light2.header-bg th {
background-color: #f1f3f5;
color: #212529; }
.head-light2 th {
color: #f1f3f5; }
.head-primary .card-header, .head-primary .menu-header, .head-primary.header-bg th { .head-primary .card-header, .head-primary .menu-header, .head-primary.header-bg th {
background-color: #e33d22; background-color: #e33d22;
@ -2269,11 +1885,11 @@ textarea {
color: #e33d22; } color: #e33d22; }
.head-info .card-header, .head-info .menu-header, .head-info.header-bg th { .head-info .card-header, .head-info .menu-header, .head-info.header-bg th {
background-color: #3bc9db; background-color: #339af0;
color: #fefefe; } color: #fefefe; }
.head-info th { .head-info th {
color: #3bc9db; } color: #339af0; }
.head-success .card-header, .head-success .menu-header, .head-success.header-bg th { .head-success .card-header, .head-success .menu-header, .head-success.header-bg th {
background-color: #51cf66; background-color: #51cf66;
@ -2289,6 +1905,20 @@ textarea {
.head-muted th { .head-muted th {
color: #adb5bd; } color: #adb5bd; }
.head-light .card-header, .head-light .menu-header, .head-light.header-bg th {
background-color: #fefefe;
color: #212529; }
.head-light th {
color: #fefefe; }
.head-dark .card-header, .head-dark .menu-header, .head-dark.header-bg th {
background-color: #343a40;
color: #fefefe; }
.head-dark th {
color: #343a40; }
.fg-light { .fg-light {
color: #fefefe; } color: #fefefe; }