Add few colors and boxes
This commit is contained in:
		@@ -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")
 | 
			
		||||
);
 | 
			
		||||
 
 | 
			
		||||
@@ -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
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user