/* --- 00. PALETTE --- */ /* * Les définitions globales des couleurs du theme. * * Elle permettent de définir rapidement à la fois les couleurs * de base qui seront utilisée pour tout le theme, mais * également celles spécifiques pour certains sujets (liens, texte) * */ // Couleurs de base du theme : $color-blue: #268bd2; $color-violet: #d33682; $color-purple: #6c71c4; $color-red: #dc322f; $color-orange: #cb4b16; $color-green: #859900; $color-skyblue: #2aa198; $color-dark: #002b36; $color-light: #fdf6e3; $color-turquoise: #2aa198; $color-yellow: #b58900; $color-brown: #b58900; $color-grey: #586e75; $color-dark2: #073642; $color-light2: #eee8d5; $color-gray2: #657b83; $color-gray3: #839496; $color-gray4: #93a1a1; $color-primary: $color-violet; $color-secondary: $color-skyblue; $color-link: $color-skyblue; $color-selection: $color-skyblue; $color-mark: $color-yellow; $color-font: $color-dark2; $color-warning: $color-orange; $color-danger: $color-red; $color-info: $color-skyblue; $color-success: $color-green; @mixin background-color($background-color, $text-color) { background-color: $background-color!important; color: $text-color; } @mixin text-color($text-color) { color: $text-color; } // Colorize important elements a, a:hover, a:active { color: $color-link; } ::selection { @include background-color($color-selection, $color-light); } ::-moz-selection { @include background-color($color-selection, $color-light); } mark { background-color: lighten($color-mark, 30%) } blockquote, pre { border-color: $color-primary; } // Add generic colorizations classes /* BACKGROUNDS */ .bg { &-blue { @include background-color($color-blue, $color-light); } &-violet { @include background-color($color-violet, $color-light); } &-purple { @include background-color($color-purple, $color-light); } &-red { @include background-color($color-red, $color-light); } &-orange { @include background-color($color-orange, $color-light); } &-green { @include background-color($color-green, $color-light); } &-skyblue { @include background-color($color-skyblue, $color-light); } &-dark { @include background-color($color-dark, $color-light); } &-light { @include background-color($color-light, $color-dark); } &-turquoise { @include background-color($color-turquoise, $color-light); } &-yellow { @include background-color($color-yellow, $color-light); } &-brown { @include background-color($color-brown, $color-light); } &-grey { @include background-color($color-grey, $color-light); } &-primary { @include background-color($color-primary, $color-light); } &-secondary { @include background-color($color-secondary, $color-light); } &-warning { @include background-color($color-warning, $color-light); } &-danger { @include background-color($color-danger, $color-light); } &-info { @include background-color($color-info, $color-light); } &-success { @include background-color($color-success, $color-light); } } /* TEXT */ .text { &-blue { @include text-color($color-blue); } &-violet { @include text-color($color-violet); } &-purple { @include text-color($color-purple); } &-red { @include text-color($color-red); } &-orange { @include text-color($color-orange); } &-green { @include text-color($color-green); } &-skyblue { @include text-color($color-skyblue); } &-dark { @include text-color($color-dark); } &-light { @include text-color($color-light); } &-turquoise { @include text-color($color-turquoise); } &-yellow { @include text-color($color-yellow); } &-brown { @include text-color($color-brown); } &-grey { @include text-color($color-grey); } &-primary { @include text-color($color-primary); } &-secondary { @include text-color($color-secondary); } &-warning { @include text-color($color-warning); } &-danger { @include text-color($color-danger); } &-info { @include text-color($color-info); } &-success { @include text-color($color-success); } }