KureShisen/Hugo-theme-stack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(scss): split CSS variables into different sections

Browse Source
This commit is contained in:
Jimmy Cai 2020-09-11 23:30:11 +02:00
parent a31f0aae91
commit cca10c7947
No known key found for this signature in database
GPG Key ID: 3EA408E527F37B18
1 changed files with 67 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
assets/scss/variables.scss
View File

@ -2,7 +2,7 @@ $defaultTagBackgrounds: #8ea885, #df7988, #0177b8, #ffb900, #6b69d6;
$defaultTagColors: #fff, #fff, #fff, #fff, #fff; $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
/* /*
* CSS Variables * Global style
*/ */
:root { :root {
@media (min-width: $on-phone + 1) { @media (min-width: $on-phone + 1) {
@ -10,10 +10,40 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
} }
--body-background: #f5f5fa; --body-background: #f5f5fa;
--accent-color: #34495e; --accent-color: #34495e;
--accent-color-darker: #2c3e50; --accent-color-darker: #2c3e50;
--accent-color-text: #fff; --accent-color-text: #fff;
--body-text-color: #bababa;
--tag-border-radius: 4px;
--section-separation: 40px;
@media (prefers-color-scheme: dark) {
--body-background: #303030;
--accent-color: #ecf0f1;
--accent-color-darker: #bdc3c7;
--accent-color-text: #000;
--body-text-color: rgba(255, 255, 255, 0.7);
}
}
/**
* Global font family
*/
:root {
--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";
}
/*
* Card style
*/
:root {
--card-background: #fff; --card-background: #fff;
--card-background-selected: #eaeaea; --card-background-selected: #eaeaea;
@ -22,53 +52,51 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
--card-text-color-tertiary: #bababa; --card-text-color-tertiary: #bababa;
--card-separator-color: rgba(218, 218, 218, 0.5); --card-separator-color: rgba(218, 218, 218, 0.5);
--body-text-color: #bababa;
--card-border-radius: 10px; --card-border-radius: 10px;
--tag-border-radius: 4px;
/** --content-padding: 30px;
* Font variables @media (max-width: $on-desktop-large) {
*/ --content-padding: 25px;
--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"; @media (max-width: $on-tablet) {
--content-padding: 20px;
}
--base-font-family: "Lato", var(--sys-font-family), var(--zh-font-family); @media (prefers-color-scheme: dark) {
--code-font-family: Menlo, Monaco, Consolas, "Courier New"; --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);
}
}
/** /**
* Article content font settings * Article content font settings
*/ */
:root {
--article-font-family: var(--base-font-family); --article-font-family: var(--base-font-family);
--article-font-size: 1.7rem; --article-font-size: 1.7rem;
@media (max-width: $on-tablet) { @media (max-width: $on-tablet) {
--article-font-size: 1.6rem; --article-font-size: 1.6rem;
} }
--article-line-height: 1.85; --article-line-height: 1.85;
}
/* /*
Article style * Article content style
*/ */
--content-padding: 30px; :root {
--blockquote-border-size: 4px; --blockquote-border-size: 4px;
--blockquote-background-color: rgb(248 248 248); --blockquote-background-color: rgb(248 248 248);
--heading-border-size: 4px; --heading-border-size: 4px;
@media (max-width: $on-desktop-large) {
--content-padding: 25px;
}
@media (max-width: $on-tablet) {
--content-padding: 20px;
}
--link-background-color: 189, 195, 199; --link-background-color: 189, 195, 199;
--link-background-opacity: 0.5; --link-background-opacity: 0.5;
--link-background-opacity-hover: 0.7; --link-background-opacity-hover: 0.7;
--section-separation: 40px;
--small-card-padding: 25px; --small-card-padding: 25px;
--pre-background-color: #272822; --pre-background-color: #272822;
@ -79,6 +107,16 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
--table-border-color: #dadada; --table-border-color: #dadada;
--tr-even-background-color: #efefee; --tr-even-background-color: #efefee;
@media (prefers-color-scheme: dark) {
--code-background-color: #272822;
--code-text-color: rgba(255, 255, 255, 0.9);
--table-border-color: #717171;
--tr-even-background-color: #545454;
--blockquote-background-color: rgb(75 75 75);
}
} }
/* /*
@ -91,30 +129,4 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
--shadow-l3: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04); --shadow-l3: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
--shadow-l4: 0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), --shadow-l4: 0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04),
0px 0px 1px rgba(0, 0, 0, 0.04); 0px 0px 1px rgba(0, 0, 0, 0.04);
} }
@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;
--blockquote-background-color: rgb(75 75 75);
}
}