blog/assets/sass/_variables.scss
2022-03-11 10:32:10 +05:30

329 lines
8.7 KiB
SCSS

// ==============================
// Variables
// ==============================
// ========== Theme Color ========== //
// Config here to change theme color
// Default | Mint Green | Cobalt Blue | Hot Pink | Dark Violet
$theme-color-config: 'Default';
// Default theme color map
$theme-color-map: (
'Default': #c05b4d #f8f5ec,
'Mint Green': #16982B #f5f5f5,
'Cobalt Blue': #0047AB #f0f2f5,
'Hot Pink': #FF69B4 #f8f5f5,
'Dark Violet': #9932CC #f5f4fa
);
// Check theme color config.
// if it does not exist, use default theme color.
@if not(map-has-key($theme-color-map, $theme-color-config)) {
$theme-color-config: 'Default';
}
$theme-color-list: map-get($theme-color-map, $theme-color-config);
// Default theme color of the site.
$theme-color: nth($theme-color-list, 1) !default;
// Deputy theme color of the site.
$deputy-color: nth($theme-color-list, 2) !default;
// ========== Color ========== //
$black: #0a0a0a !default;
$white: #fefefe !default;
$light-gray: #e6e6e6 !default;
$gray: #cacaca !default;
$dark-gray: #8a8a8a !default;
// ========== Global ========== //
// Text color of the body.
$global-font-color: #34495e !default;
// Font size attribute applied to '<html>' and '<body>'.
$global-font-size: 16px !default;
// Global width of '<body>'.
$global-body-width: 800px !default;
// Padding of container main
$global-container-padding: 0 20px !default;
// Default line height for all type. `$global-lineheight` is 24px while `$global-font-size` is 16px.
$global-lineheight: 1.5 !default;
// Font family of the site.
$global-font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif !default;
// Serif font family of the site.
$global-serif-font-family: Athelas, STHeiti, Microsoft Yahei, serif !default;
// Background color of the site.
$global-background: $white !default;
// Headings font size of the site.
$global-headings: (
h1: 26px,
h2: 24px,
h3: 20px,
h4: 16px,
h5: 14px,
h6: 14px
) !default;
// ========== Header ========== //
// Padding of the site header.
$header-padding: 20px 20px !default;
// Font family: Chancery
@font-face {
font-family: 'Chancery';
src: url('../fonts/chancery/apple-chancery-webfont.eot');
src: local('Apple Chancery'), url('../fonts/chancery/apple-chancery-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/chancery/apple-chancery-webfont.woff2') format('woff2'),
url('../fonts/chancery/apple-chancery-webfont.woff') format('woff'),
url('../fonts/chancery/apple-chancery-webfont.ttf') format('truetype'),
url('../fonts/chancery/apple-chancery-webfont.svg#apple-chancery') format('svg');
font-weight: lighter;
font-style: normal;
font-display: swap;
}
// Font size of the logo.
$logo-font-size: 48px !default;
// Font family of the logo.
$logo-font-family: 'Chancery', cursive, LiSu, sans-serif !default;
// Margin of menu item.
$menu-item-margin-left: 10px !default;
// Margin of menu item in mobile.
$menu-item-mobile-margin: 5px !default;
// Font size of menu item link.
$menu-link-font-size: 18px !default;
// Height of the mobile header.
$mobile-navbar-height: 50px !default;
// ========== Post ========== //
// Margin bottom of post list.
$post-list-margin-bottom: 20px !default;
// Padding of the post.
$post-padding: 1.5em 0 !default;
// Border top of the post + post.
$post-border: 1px solid $light-gray !default;
// Font size of post title.
$post-title-font-size: 27px !default;
// Font weight of post title.
$post-title-font-weight: 400 !default;
// Margin top of the post meta (post time).
$post-meta-margin-top: 5px !default;
// Font color of the post meta.
$post-meta-font-color: $dark-gray !default;
// Border bottom of the read more link when hover it.
$post-readMore-border-bottom: 1px solid $theme-color !default;
// Margin top of the post footer.
$post-footer-margin-top: 20px !default;
// Border top of post footer.
$post-footer-border-top: 1px solid $light-gray !default;
// Padding of the post tags.
$post-tags-padding: 15px 0 !default;
// Font size of post pagination.
$post-nav-font-size: 18px !default;
// ========== TOC ========== //
// Width of the post toc.
$post-toc-width: 200px !default;
// Backgroud color of the post toc.
$post-toc-backgroud: rgba($deputy-color, 0.6) !default;
// Margin left of the post toc.
$post-toc-margin-left: $global-body-width - 15px !default;
// Font size of the post toc title.
$post-toc-title-size: 20px !default;
// Font size of the post toc content.
$post-toc-content: 15px !default;
// List style of the post toc list.
$post-toc-list-style: square !default;
// Max screen media of the post toc.
$toc-max-sreen-width: 2 * $post-toc-width + $post-toc-margin-left !default;
// ========== Content ========== //
// Headings anchor.
$content-headings-anchor: "" !default;
// Border bottom of the link when hover it.
$content-link-border: 1px solid $theme-color !default;
// Background color of the blockquote.
$content-blockquote-backgroud: rgba($theme-color, 0.05) !default;
// Border left of the blockquote.
$content-blockquote-border-left: 3px solid rgba($theme-color, 0.3) !default;
// Border color of the table.
$content-table-border-color: darken($deputy-color, 3%) !default;
// ========== Code ========== //
// Color of the code.
$code-color: #c7254e !default;
// Font size of code.
$code-font-size: 0.9em !default;
// Font family of the code.
$code-font-family: Consolas, Monaco, Menlo, "DejaVu Sans Mono",
"Bitstream Vera Sans Mono", "Courier New", monospace !default;
// Color of code highlight, solarized.
$code-highlight-color: (
comment: #93a1a1,
keyword: #859900,
number: #2aa198,
title: #268bd2,
attribute: #b58900,
symbol: #cb4b16,
built_in: #dc322f,
formula: #eee8d5
) !default;
// Code type list.
$code-type-list: (
// Custom code type
language-bash: "Bash",
language-c: "C",
language-cs: "C#",
language-cpp: "C++",
language-css: "CSS",
language-coffeescript: "CoffeeScript",
language-html: "HTML",
language-xml: "XML",
language-http: "HTTP",
language-json: "JSON",
language-java: "Java",
language-js: "JavaScript",
language-javascript: "JavaScript",
language-makefile: "Makefile",
language-markdown: "Markdown",
language-objectivec: "Objective-C",
language-php: "PHP",
language-perl: "Perl",
language-python: "Python",
language-ruby: "Ruby",
language-sql: "SQL",
language-shell: "Shell",
language-erlang: "Erlang",
language-go: "Go",
language-go-html-template: "Go HTML Template",
language-groovy: "Groovy",
language-haskell: "Haskell",
language-kotlin: "Kotlin",
language-clojure: "Clojure",
language-less: "Less",
language-lisp: "Lisp",
language-lua: "Lua",
language-matlab: "Matlab",
language-rust: "Rust",
language-scss: "Scss",
language-scala: "Scala",
language-swift: "Swift",
language-typescript: "TypeScript",
language-yml: "YAML",
language-yaml: "YAML",
language-toml: "TOML",
language-diff: "Diff"
) !default;
// Color of the code background.
$code-background: $deputy-color !default;
// ========== Pagination ========== //
// Margin of the pagination.
$pagination-margin: 2em 0 !default;
// Font size of the pagination (Without post, post pagination see line 140).
$pagination-font-size: 20px !default;
// ========== Footer ========== //
// Margin top of the footer.
$footer-margin-top: 2em !default;
// Margin left of the social link.
$social-link-margin-left: 10px !default;
// Font size of the social icon.
$social-icon-font-size: 30px !default;
// Margin of the copyright.
$copyright-margin: 10px 0 !default;
// ========== Archive ========== //
// Margin of the archive.
$archive-margin: 2em 0px !default;
// Max width of the archive.
$archive-max-width: 550px !default;
// Font size of the archive name.
$archive-name-font-size: 30px !default;
// Font size of the collection title.
$collection-title-font-size: 28px !default;
// Padding of the archive post.
$archive-post-padding: 3px 20px !default;
// Padding of the archive post in mobile.
$archive-post-mobile-padding: 5px 10px !default;
// Font size of the archive post time in mobile.
$archive-post-mobile-time-font-size: 13px !default;
// Border left of the archive post, use $archive-post-hover-border-left when hover it.
$archive-post-border-left: 1px solid $gray !default;
$archive-post-hover-border-left: 3px solid $theme-color !default;
// Transition of the archive post when hover it.
$archive-post-hover-transition: 0.2s ease-out !default;
// Transform of the archive post when hover it.
$archive-post-hover-transform: translateX(4px) !default;
// ========== General Terms ========== //
// Font size of the terms title.
$terms-title-size: 18px !default;
// Border bottom of the terms title.
$terms-title-border-bottom: 2px solid $theme-color !default;
// Margin of the terms link.
$terms-link-margin: 5px 10px !default;
// Font size of the terms count
$terms-count-font-size: 12px !default;