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

feat: variabilize soft colors

Browse source
This commit is contained in:
Kazhnuz 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) { if ($flags) {
foreach( $flags as $flag ) { foreach( $flags as $flag ) {
$term_meta = get_option( "taxonomy_term_$flag->term_id" ); $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 $flag->description;
echo "</div>"; echo "</div>";
} }

2
components/globalflag.php
View file

@ -9,7 +9,7 @@ if ($flags) {
foreach( $flags as $flag ) { foreach( $flags as $flag ) {
if ($flag->slug == "global") { if ($flag->slug == "global") {
$term_meta = get_option( "taxonomy_term_$flag->term_id" ); $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 $flag->description;
echo "</div>"; echo "</div>";
} }

2
home.php
View file

@ -23,7 +23,7 @@
</section> </section>
<?php if ( !is_paged() ) { <?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 à 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

2
scss/core/_typography.scss
View file

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

3
scss/mixins/_colors.scss
View file

@ -59,8 +59,9 @@
color: getTextColorFromBackground($background-color); color: getTextColorFromBackground($background-color);
} }
@mixin accent-color($accent-color) { @mixin accent-color($accent-color, $soft-color) {
--accent-color: #{$accent-color}; --accent-color: #{$accent-color};
--text-color-contrast: #{getTextColorFromBackground($accent-color)}; --text-color-contrast: #{getTextColorFromBackground($accent-color)};
--accent-color-hover: #{accentuate($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, @each $name,
$color in list-colors() { $color in list-colors() {
&-#{$name} { &-#{$name} {
@include accent-color(get-color($name)); @include accent-color(get-color($name), get-color-light($name));
} }
} }
} }
@ -53,17 +53,7 @@
} }
.bg-soft { .bg-soft {
background-color: var(--accent-color-soft);
@each $name,
$color in list-colors() {
&-#{$name} {
@include bg-color(get-color-light($name));
&:hover {
@include bg-color(get-color-light($name));
}
}
}
} }
// .text { // .text {

146
style.css
View file

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