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

114 lines
3.0 KiB
SCSS
Raw Normal View History

2020-08-22 07:20:08 -04:00
$defaultTagBackgrounds: #8ea885, #df7988, #0177b8, #ffb900, #6b69d6;
$defaultTagColors: #fff, #fff, #fff, #fff, #fff;
$on-phone: 812px;
2020-08-22 07:20:08 -04:00
$on-tablet: 1024px;
$on-desktop: 1519px;
$on-desktop-large: 1920px;
/*
* CSS Variables
*/
:root {
@media (min-width: $on-phone + 1) {
--main-top-padding: 50px;
}
--body-background: #f5f5fa;
--accent-color: #34495e;
--accent-color-darker: #2c3e50;
--accent-color-text: #fff;
2020-08-22 07:20:08 -04:00
--card-background: #fff;
--card-background-selected: #eaeaea;
2020-08-22 07:20:08 -04:00
--card-text-color-main: #000;
--card-text-color-secondary: #747474;
--card-text-color-tertiary: #bababa;
--card-separator-color: rgba(218, 218, 218, 0.5);
2020-08-22 07:20:08 -04:00
--body-text-color: #bababa;
2020-08-22 07:20:08 -04:00
--card-border-radius: 10px;
--tag-border-radius: 4px;
/**
* Font variables
*/
--sys-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Droid Sans", "Helvetica Neue";
--zh-font-family: "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei";
--base-font-family: "Lato", var(--sys-font-family), var(--zh-font-family);
--code-font-family: Menlo, Monaco, Consolas, "Courier New";
/**
* Article content font settings
*/
--article-font-family: var(--base-font-family);
--article-font-size: 1.7rem;
@media (max-width: $on-tablet) {
--article-font-size: 1.6rem;
}
--article-line-height: 1.85;
/*
Article style
*/
--content-padding: 30px;
--blockquote-border-size: 4px;
--blockquote-background-color: rgb(248 248 248);
2020-09-08 07:01:27 -04:00
--heading-border-size: 4px;
2020-09-03 05:42:01 -04:00
@media (max-width: $on-desktop-large) {
--content-padding: 25px;
}
@media (max-width: $on-tablet) {
--content-padding: 20px;
}
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;
--section-separation: 40px;
--small-card-padding: 25px;
--pre-background-color: #272822;
--pre-text-color: #f8f8f2;
--code-background-color: rgba(0, 0, 0, 0.12);
--code-text-color: #808080;
--table-border-color: #dadada;
--tr-even-background-color: #efefee;
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);
--code-background-color: #272822;
--code-text-color: rgba(255, 255, 255, 0.9);
--table-border-color: #717171;
--tr-even-background-color: #545454;
2020-09-08 07:01:27 -04:00
--blockquote-background-color: rgb(75 75 75);
2020-08-22 07:20:08 -04:00
}
}