quarante-douze
/
qdouze2-wordpress-theme
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: variabilize soft colors

This commit is contained in:
Kazhnuz Klappsthul 2023-11-20 13:10:56 +01:00
parent 7e218e0c1c
commit b175697dd5
7 changed files with 29 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/article/flags.php
View File

@ -2,7 +2,7 @@
if ($flags) {
foreach( $flags as $flag ) {
$term_meta = get_option( "taxonomy_term_$flag->term_id" );
echo "<div class='toast bg-soft-" . $term_meta['niveau'] . "'>";
echo "<div class='toast bg-soft c-" . $term_meta['niveau'] . "'>";
echo $flag->description;
echo "</div>";
}

2
components/globalflag.php
View File

@ -9,7 +9,7 @@ if ($flags) {
foreach( $flags as $flag ) {
if ($flag->slug == "global") {
$term_meta = get_option( "taxonomy_term_$flag->term_id" );
echo "<div class='toast bg-soft-" . $term_meta['niveau'] . "'>";
echo "<div class='toast bg-soft c-" . $term_meta['niveau'] . "'>";
echo $flag->description;
echo "</div>";
}

2
home.php
View File

@ -23,7 +23,7 @@
</section>
<?php if ( !is_paged() ) {
?>
<div class="toast mb-1 bg-soft-info home-toast"><strong class="m-0"><svg class="icon icon-info-circle" viewBox="0 0 30 30"><path d="M18.286 24.571v-2.857c0-0.321-0.25-0.571-0.571-0.571h-1.714v-9.143c0-0.321-0.25-0.571-0.571-0.571h-5.714c-0.321 0-0.571 0.25-0.571 0.571v2.857c0 0.321 0.25 0.571 0.571 0.571h1.714v5.714h-1.714c-0.321 0-0.571 0.25-0.571 0.571v2.857c0 0.321 0.25 0.571 0.571 0.571h8c0.321 0 0.571-0.25 0.571-0.571zM16 8.571v-2.857c0-0.321-0.25-0.571-0.571-0.571h-3.429c-0.321 0-0.571 0.25-0.571 0.571v2.857c0 0.321 0.25 0.571 0.571 0.571h3.429c0.321 0 0.571-0.25 0.571-0.571zM27.429 16c0 7.571-6.143 13.714-13.714 13.714s-13.714-6.143-13.714-13.714 6.143-13.714 13.714-13.714 13.714 6.143 13.714 13.714z"></path> Note :</strong> Si vous êtes intéressé pour découvrir plus
<div class="toast mb-1 c-info bg-soft home-toast"><strong class="m-0"><svg class="icon icon-info-circle" viewBox="0 0 30 30"><path d="M18.286 24.571v-2.857c0-0.321-0.25-0.571-0.571-0.571h-1.714v-9.143c0-0.321-0.25-0.571-0.571-0.571h-5.714c-0.321 0-0.571 0.25-0.571 0.571v2.857c0 0.321 0.25 0.571 0.571 0.571h1.714v5.714h-1.714c-0.321 0-0.571 0.25-0.571 0.571v2.857c0 0.321 0.25 0.571 0.571 0.571h8c0.321 0 0.571-0.25 0.571-0.571zM16 8.571v-2.857c0-0.321-0.25-0.571-0.571-0.571h-3.429c-0.321 0-0.571 0.25-0.571 0.571v2.857c0 0.321 0.25 0.571 0.571 0.571h3.429c0.321 0 0.571-0.25 0.571-0.571zM27.429 16c0 7.571-6.143 13.714-13.714 13.714s-13.714-6.143-13.714-13.714 6.143-13.714 13.714-13.714 13.714 6.143 13.714 13.714z"></path></svg> 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 à
partager des petites découverte rigolote ou intéressantes.</div>
<?php

2
scss/core/_typography.scss
View File

@ -5,7 +5,7 @@
}
:root {
@include accent-color($color-primary);
@include accent-color($color-primary, get-color-light("primary"));
--text-color:#{$color-font};
--link-color-hover:#{transparentize($color-font, 0.85)};
--link-color:#{darken($color-link, 10%)};

3
scss/mixins/_colors.scss
View File

@ -59,8 +59,9 @@
color: getTextColorFromBackground($background-color);
}
@mixin accent-color($accent-color) {
@mixin accent-color($accent-color, $soft-color) {
--accent-color: #{$accent-color};
--text-color-contrast: #{getTextColorFromBackground($accent-color)};
--accent-color-hover: #{accentuate($accent-color)};
--accent-color-soft: #{$soft-color};
}

14
scss/utils/_colorize.scss
View File

@ -7,7 +7,7 @@
@each $name,
$color in list-colors() {
&-#{$name} {
@include accent-color(get-color($name));
@include accent-color(get-color($name), get-color-light($name));
}
}
}
@ -53,17 +53,7 @@
}
.bg-soft {
@each $name,
$color in list-colors() {
&-#{$name} {
@include bg-color(get-color-light($name));
&:hover {
@include bg-color(get-color-light($name));
}
}
}
background-color: var(--accent-color-soft);
}
// .text {

146
style.css
View File

@ -98,6 +98,7 @@ sup {
--accent-color: #e03131;
--text-color-contrast: #ffffff;
--accent-color-hover: #cc1f1f;
--accent-color-soft: #ffc9c9;
--text-color:#212529;
--link-color-hover:rgba(33, 37, 41, 0.15);
--link-color:#c11d1d; }
@ -778,47 +779,56 @@ textarea {
.c-primary {
--accent-color: #e03131;
--text-color-contrast: #ffffff;
--accent-color-hover: #cc1f1f; }
--accent-color-hover: #cc1f1f;
--accent-color-soft: #ffc9c9; }
.c-secondary {
--accent-color: #343a40;
--text-color-contrast: #ffffff;
--accent-color-hover: #3d444b; }
--accent-color-hover: #3d444b;
--accent-color-soft: #adb5bd; }
.c-warning {
--accent-color: #e8590c;
--text-color-contrast: #ffffff;
--accent-color-hover: #c44b0a; }
--accent-color-hover: #c44b0a;
--accent-color-soft: #ffd8a8; }
.c-danger {
--accent-color: #e03131;
--text-color-contrast: #ffffff;
--accent-color-hover: #cc1f1f; }
--accent-color-hover: #cc1f1f;
--accent-color-soft: #ffc9c9; }
.c-info {
--accent-color: #1971c2;
--text-color-contrast: #ffffff;
--accent-color-hover: #155da0; }
--accent-color-hover: #155da0;
--accent-color-soft: #a5d8ff; }
.c-success {
--accent-color: #2f9e44;
--text-color-contrast: #ffffff;
--accent-color-hover: #268137; }
--accent-color-hover: #268137;
--accent-color-soft: #b2f2bb; }
.c-muted {
--accent-color: #adb5bd;
--text-color-contrast: #ffffff;
--accent-color-hover: #98a2ac; }
--accent-color-hover: #98a2ac;
--accent-color-soft: #e9ecef; }
.c-light {
--accent-color: #ffffff;
--text-color-contrast: #212529;
--accent-color-hover: #ececec; }
--accent-color-hover: #ececec;
--accent-color-soft: #ffffff; }
.c-dark {
--accent-color: #343a40;
--text-color-contrast: #ffffff;
--accent-color-hover: #3d444b; }
--accent-color-hover: #3d444b;
--accent-color-soft: #adb5bd; }
.bg-accent {
background-color: var(--accent-color); }
@ -832,122 +842,8 @@ textarea {
.bg-alt {
background-color: #e9ecef; }
.bg-soft-primary {
background-color: #ffc9c9;
color: #212529; }
.bg-soft-primary a {
color: currentColor;
outline-color: currentColor; }
.bg-soft-primary:hover {
background-color: #ffc9c9;
color: #212529; }
.bg-soft-primary:hover a {
color: currentColor;
outline-color: currentColor; }
.bg-soft-secondary {
background-color: #adb5bd;
color: #ffffff; }
.bg-soft-secondary a {
color: currentColor;
outline-color: currentColor; }
.bg-soft-secondary:hover {
background-color: #adb5bd;
color: #ffffff; }
.bg-soft-secondary:hover a {
color: currentColor;
outline-color: currentColor; }
.bg-soft-warning {
background-color: #ffd8a8;
color: #212529; }
.bg-soft-warning a {
color: currentColor;
outline-color: currentColor; }
.bg-soft-warning:hover {
background-color: #ffd8a8;
color: #212529; }
.bg-soft-warning:hover a {
color: currentColor;
outline-color: currentColor; }
.bg-soft-danger {
background-color: #ffc9c9;
color: #212529; }
.bg-soft-danger a {
color: currentColor;
outline-color: currentColor; }
.bg-soft-danger:hover {
background-color: #ffc9c9;
color: #212529; }
.bg-soft-danger:hover a {
color: currentColor;
outline-color: currentColor; }
.bg-soft-info {
background-color: #a5d8ff;
color: #212529; }
.bg-soft-info a {
color: currentColor;
outline-color: currentColor; }
.bg-soft-info:hover {
background-color: #a5d8ff;
color: #212529; }
.bg-soft-info:hover a {
color: currentColor;
outline-color: currentColor; }
.bg-soft-success {
background-color: #b2f2bb;
color: #212529; }
.bg-soft-success a {
color: currentColor;
outline-color: currentColor; }
.bg-soft-success:hover {
background-color: #b2f2bb;
color: #212529; }
.bg-soft-success:hover a {
color: currentColor;
outline-color: currentColor; }
.bg-soft-muted {
background-color: #e9ecef;
color: #212529; }
.bg-soft-muted a {
color: currentColor;
outline-color: currentColor; }
.bg-soft-muted:hover {
background-color: #e9ecef;
color: #212529; }
.bg-soft-muted:hover a {
color: currentColor;
outline-color: currentColor; }
.bg-soft-light {
background-color: #ffffff;
color: #212529; }
.bg-soft-light a {
color: currentColor;
outline-color: currentColor; }
.bg-soft-light:hover {
background-color: #ffffff;
color: #212529; }
.bg-soft-light:hover a {
color: currentColor;
outline-color: currentColor; }
.bg-soft-dark {
background-color: #adb5bd;
color: #ffffff; }
.bg-soft-dark a {
color: currentColor;
outline-color: currentColor; }
.bg-soft-dark:hover {
background-color: #adb5bd;
color: #ffffff; }
.bg-soft-dark:hover a {
color: currentColor;
outline-color: currentColor; }
.bg-soft {
background-color: var(--accent-color-soft); }
.fg-light {
--text-color:#ffffff;