Add few colors and boxes

This commit is contained in:
2020-11-27 16:57:04 +01:00
parent 7944704b69
commit 848a97510e
7 changed files with 194 additions and 161 deletions

View File

@@ -3,9 +3,11 @@ $types: (
definition: (color: $pale-red, title-color: $red, icon: "\f005"),
exampl: (color: $pale-green, title-color: $green, icon: "\f013"),
question: (color: $pale-yellow, title-color: $yellow, icon: "\f059"),
exercice: (color: $pale-yellow, title-color: $yellow, icon: "\f040"),
answer: (color: $pale-turq, title-color: $turq, icon: "\f00c"),
summary: (color: $pale-blue, title-color: $blue, icon: "\f02e"),
hint: (color: $pale-grey, title-color: $grey, icon: "\f05a"),
important: (color: $pale-orange, title-color: $orange, icon: "\f005"),
important: (color: $pale-red, title-color: $red, icon: "\f005"),
caution: (color: $pale-orange, title-color: $orange, icon: "\f071"),
warning: (color: $pale-orange, title-color: $orange, icon: "\f071")
);

View File

@@ -4,12 +4,13 @@
$white: #fff;
$black: #000;
$blue: hsl(204, 61%, 64%);
$red: hsl(360, 61%, 64%);
$green: hsl(160, 61%, 64%);
$yellow: hsl(55, 61%, 64%);
$orange: hsl(32, 61%, 64%);
$grey: hsl(0, 0%, 64%);
$blue: hsl(232, 61%, 64%);
$red: hsl(360, 61%, 64%);
$green: hsl(160, 61%, 64%);
$yellow: hsl(55, 61%, 64%);
$orange: hsl(32, 61%, 64%);
$grey: hsl(0, 0%, 64%);
$turq: hsl(191, 61%, 64%);
$pale-blue: adjust-color($blue, $lightness: 30%);
$pale-red: adjust-color($red, $lightness: 30%);
@@ -17,6 +18,7 @@ $pale-green: adjust-color($green, $lightness: 30%);
$pale-yellow: adjust-color($yellow, $lightness: 30%);
$pale-orange: adjust-color($orange, $lightness: 30%);
$pale-grey: adjust-color($grey, $lightness: 30%);
$pale-turq: adjust-color($grey, $lightness: 30%);
$dark-blue: adjust-color($blue, $lightness: -30%);
$dark-red: adjust-color($red, $lightness: -30%);
@@ -24,12 +26,14 @@ $dark-green: adjust-color($green, $lightness: -30%);
$dark-yellow: adjust-color($yellow, $lightness: -30%);
$dark-orange: adjust-color($orange, $lightness: -30%);
$dark-grey: adjust-color($grey, $lightness: -30%);
$dark-turq: adjust-color($turq, $lightness: -30%);
$vivid-blue: adjust-color($blue, $saturation: 20%);
$vivid-red: adjust-color($red, $saturation: 20%);
$vivid-green: adjust-color($green, $saturation: 20%);
$vivid-yellow: adjust-color($yellow, $saturation: 20%);
$vivid-orange: adjust-color($orange, $saturation: 20%);
$vivid-turq: adjust-color($turq, $saturation: 20%);
// main color palette