aboutsummaryrefslogtreecommitdiff
path: root/themes/hugo-theme-stack/assets/scss/variables.scss
diff options
context:
space:
mode:
authorAlexander Neonxp Kiryukhin <i@neonxp.ru>2024-11-03 20:08:36 +0300
committerAlexander Neonxp Kiryukhin <i@neonxp.ru>2024-11-03 20:08:36 +0300
commit59c7d4567380d1a9c80e96eb958fdbdd512ce006 (patch)
tree65410cfc10dbc7d060ec23be110662d9b7f6b0e9 /themes/hugo-theme-stack/assets/scss/variables.scss
новая жизнь блога
Diffstat (limited to 'themes/hugo-theme-stack/assets/scss/variables.scss')
-rw-r--r--themes/hugo-theme-stack/assets/scss/variables.scss167
1 files changed, 167 insertions, 0 deletions
diff --git a/themes/hugo-theme-stack/assets/scss/variables.scss b/themes/hugo-theme-stack/assets/scss/variables.scss
new file mode 100644
index 0000000..97810a1
--- /dev/null
+++ b/themes/hugo-theme-stack/assets/scss/variables.scss
@@ -0,0 +1,167 @@
+$defaultTagBackgrounds: #8ea885, #df7988, #0177b8, #ffb900, #6b69d6;
+$defaultTagColors: #fff, #fff, #fff, #fff, #fff;
+
+/*
+* Global style
+*/
+:root {
+ --main-top-padding: 35px;
+
+ @include respond(xl) {
+ --main-top-padding: 50px;
+ }
+
+ --body-background: #f5f5fa;
+
+ --accent-color: #34495e;
+ --accent-color-darker: #2c3e50;
+ --accent-color-text: #fff;
+ --body-text-color: #707070;
+
+ --tag-border-radius: 4px;
+
+ --section-separation: 40px;
+
+ --scrollbar-thumb: hsl(0, 0%, 85%);
+ --scrollbar-track: var(--body-background);
+
+ &[data-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);
+ --scrollbar-thumb: hsl(0, 0%, 40%);
+ --scrollbar-track: var(--body-background);
+ }
+}
+
+/**
+* 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), sans-serif;
+ --code-font-family: Menlo, Monaco, Consolas, "Courier New", var(--zh-font-family), monospace;
+}
+
+/*
+* Card style
+*/
+:root {
+ --card-background: #fff;
+ --card-background-selected: #eaeaea;
+
+ --card-text-color-main: #000;
+ --card-text-color-secondary: #747474;
+ --card-text-color-tertiary: #767676;
+ --card-separator-color: rgba(218, 218, 218, 0.5);
+
+ --card-border-radius: 10px;
+
+ --card-padding: 20px;
+
+ @include respond(md) {
+ --card-padding: 25px;
+ }
+
+ @include respond(xl) {
+ --card-padding: 30px;
+ }
+
+ --small-card-padding: 25px 20px;
+
+ @include respond(md) {
+ --small-card-padding: 25px;
+ }
+
+ &[data-scheme="dark"] {
+ --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
+*/
+:root {
+ --article-font-family: var(--base-font-family);
+ --article-font-size: 1.6rem;
+
+ @include respond(md) {
+ --article-font-size: 1.7rem;
+ }
+
+ --article-line-height: 1.85;
+}
+
+/*
+* Article content style
+*/
+:root {
+ --blockquote-border-size: 4px;
+ --blockquote-background-color: rgb(248 248 248);
+
+ --heading-border-size: 4px;
+
+ --link-background-color: 189, 195, 199;
+ --link-background-opacity: 0.5;
+ --link-background-opacity-hover: 0.7;
+
+ --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;
+
+ --kbd-border-color: #dadada;
+
+ &[data-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);
+ }
+}
+
+/*
+* Shadow style
+* Thanks to https://www.figma.com/community/plugin/744987207861965946/Shadow-picker
+*/
+:root {
+ --shadow-l1: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04);
+ --shadow-l2: 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),
+ 0px 0px 1px rgba(0, 0, 0, 0.04);
+}
+
+[data-scheme="light"] {
+ --pre-text-color: #272822;
+ --pre-background-color: #fafafa;
+ @import "partials/highlight/light.scss";
+}
+
+[data-scheme="dark"] {
+ --pre-text-color: #f8f8f2;
+ --pre-background-color: #272822;
+ @import "partials/highlight/dark.scss";
+}
+
+:root {
+ --menu-icon-separation: 40px;
+ --container-padding: 15px;
+ --widget-separation: var(--section-separation);
+}