Hugo-theme-stack/assets/scss/variables.scss

122 lines
3.7 KiB
SCSS
Raw Normal View History

2020-08-22 07:20:08 -04:00
$fallback-font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial,
"Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN",
"Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp",
sans-serif;
$base-font-family: "Lato", $fallback-font-family;
2020-08-24 07:09:20 -04:00
$article-font-family: $base-font-family;
$code-font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
2020-08-22 07:20:08 -04:00
$container-width: 1200px;
$container-padding: 15px;
$defaultTagBackgrounds: #8ea885, #df7988, #0177b8, #ffb900, #6b69d6;
$defaultTagColors: #fff, #fff, #fff, #fff, #fff;
$on-phone: 740px;
$on-tablet: 1024px;
$on-desktop: 1519px;
$on-desktop-large: 1920px;
/*
* CSS Variables
*/
$body-background: #f5f5fa;
$accent-color: #34495e;
$accent-color-darker: #2c3e50;
$accent-color-text: #fff;
2020-08-24 07:09:20 -04:00
$link-background-color: 189, 195, 199;
$link-background-opacity: 0.5;
$link-background-opacity-hover: 0.7;
2020-08-22 07:20:08 -04:00
$card-background: #fff;
$card-background-selected: #eaeaea;
$card-text-color-main: #000;
$card-text-color-secondary: #747474;
$card-text-color-tertiary: #bababa;
$card-separator-color: rgba(218, 218, 218, 0.5);
$card-border-radius: 10px;
$body-text-color: #bababa;
$tag-border-radius: 4px;
:root {
--body-background: #{$body-background};
--accent-color: #{$accent-color};
--accent-color-darker: #{$accent-color-darker};
--accent-color-text: #{$accent-color-text};
--card-background: #{$card-background};
--card-background-selected: #{$card-background-selected};
--card-text-color-main: #{$card-text-color-main};
--card-text-color-secondary: #{$card-text-color-secondary};
--card-text-color-tertiary: #{$card-text-color-tertiary};
--card-separator-color: #{$card-separator-color};
--card-border-radius: #{$card-border-radius};
--body-text-color: #{$body-text-color};
--tag-border-radius: #{$tag-border-radius};
--base-font-family: #{$base-font-family};
--fallback-font-family: #{$fallback-font-family};
--article-font-family: #{$article-font-family};
--code-font-family: #{$code-font-family};
/*
Article style
*/
--content-padding: 30px;
--blockquote-border-size: 4px;
--heading-border-size: 4px;
@media (max-width: $on-tablet) {
--content-padding: 20px;
}
2020-08-24 07:09:20 -04:00
--link-background-color: #{$link-background-color};
--link-background-opacity: #{$link-background-opacity};
--link-background-opacity-hover: #{$link-background-opacity-hover};
2020-08-22 07:20:08 -04:00
}
@media (prefers-color-scheme: dark) {
:root {
$body-background: #303030;
$accent-color: #ecf0f1;
$accent-color-darker: #bdc3c7;
$accent-color-text: #000;
$card-background: #424242;
$card-background-selected: rgba(255, 255, 255, 0.16);
$card-text-color-main: rgba(255, 255, 255, 0.9);
$card-text-color-secondary: rgba(255, 255, 255, 0.7);
$card-text-color-tertiary: rgba(255, 255, 255, 0.5);
$card-separator-color: rgba(255, 255, 255, 0.12);
$body-text-color: rgba(255, 255, 255, 0.7);
--body-background: #{$body-background};
--accent-color: #{$accent-color};
--accent-color-darker: #{$accent-color-darker};
--accent-color-text: #{$accent-color-text};
--card-background: #{$card-background};
--card-background-selected: #{$card-background-selected};
--card-text-color-main: #{$card-text-color-main};
--card-text-color-secondary: #{$card-text-color-secondary};
--card-text-color-tertiary: #{$card-text-color-tertiary};
--card-separator-color: #{$card-separator-color};
--body-text-color: #{$body-text-color};
}
}