diff options
Diffstat (limited to 'themes/even/src/css/_variables.scss')
| -rw-r--r-- | themes/even/src/css/_variables.scss | 336 |
1 files changed, 336 insertions, 0 deletions
diff --git a/themes/even/src/css/_variables.scss b/themes/even/src/css/_variables.scss new file mode 100644 index 0000000..06d7507 --- /dev/null +++ b/themes/even/src/css/_variables.scss @@ -0,0 +1,336 @@ +// ============================== +// 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 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: 13px !default; + +// Font family of the code. +$code-font-family: Consolas, Monaco, Menlo, Consolas, 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-groovy: "Groovy", + language-haskell: "Haskell", + language-kotlin: "Kotlin", + 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" +) !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; + + +// ========== Tags ========== // +// Font soze of the tag cloud title. +$tag-cloud-title-size: 18px !default; + +// Border bottom of the tag cloud title. +$tag-cloud-title-border-bottom: 2px solid $theme-color !default; + +// Margin of the tag cloud tags link. +$tag-cloud-tags-link-margin: 5px 10px !default; + + +// ========== Categories ========== // +// Font soze of the categories title. +$categories-title-size: 18px !default; + +// Border bottom of the categories title. +$categories-title-border-bottom: 2px solid $theme-color !default; + +// Margin of the categories tags link. +$categories-tags-link-margin: 5px 10px !default; + +// Font size of the category count +$category-count-font-size: 12px !default; |