49 lines
No EOL
1.4 KiB
SCSS
49 lines
No EOL
1.4 KiB
SCSS
@use 'sass:color';
|
|
|
|
$dark-theme: false !default;
|
|
|
|
$mobile-width: 1080px;
|
|
|
|
// Dynamic values depending of the screen width.
|
|
@media (min-width: calc($mobile-width + 1px)) {
|
|
:root {
|
|
--margin: 5px;
|
|
--title-font-size: 180%;
|
|
--logo-size: 50px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: $mobile-width) {
|
|
:root {
|
|
--margin: 3px;
|
|
--title-font-size: 130%;
|
|
--logo-size: 40px;
|
|
}
|
|
}
|
|
|
|
$color-1: #B29B89;
|
|
$color-2: #89B29B;
|
|
$color-3: #9B89B2;
|
|
$color-highlight: #cf2d2dff;
|
|
|
|
$text-color: color.adjust($color-1, $lightness: -30%);
|
|
$text-highlight: color.adjust($color-1, $lightness: +30%);
|
|
$text-dimished: color.adjust($color-1, $lightness: -15%, $saturation: -15%);
|
|
|
|
$link-color: color.adjust($color-3, $lightness: -25%);
|
|
$link-hover-color: color.adjust($color-3, $lightness: +20%);
|
|
|
|
@if $dark-theme {
|
|
$color-highlight: color.adjust($color-highlight, $lightness: +10%);
|
|
|
|
$text-color: color.adjust($color-1, $lightness: -10%);
|
|
$text-highlight: color.adjust($color-1, $lightness: +10%);
|
|
$text-dimished: color.adjust($color-1, $lightness: -20%, $saturation: -15%);
|
|
|
|
$link-color: color.adjust($color-3, $lightness: -5%);
|
|
$link-hover-color: color.adjust($color-3, $lightness: +10%);
|
|
|
|
$color-1: color.adjust($color-1, $lightness: -47%);
|
|
$color-2: color.adjust($color-2, $lightness: -47%);
|
|
$color-3: color.adjust($color-3, $lightness: -50%);
|
|
} |