hexo-theme-keep/source/css/variables.styl

416 lines
14 KiB
Stylus
Raw Normal View History

// =================================================
// Variables
// =================================================
// Colors
// colors for use across theme.
// --------------------------------------------------
$whitesmoke = #f5f5f5
$gainsboro = #eee
$gray-lighter = #ddd
$grey-light = #ccc
$grey = #bbb
$grey-dark = #999
$grey-dim = #666
$black-light = #555
$black-dim = #333
$black-deep = #222
$red = #ff2a2a
$blue-bright = #87daff
$blue = #0684bd
$blue-deep = #262a30
$orange = #fc6423
// Scaffolding
// Settings for some of the most global styles.
// --------------------------------------------------
// Global text color on <body>
$text-color = $black-light
// Global link color.
$link-color = $black-light
$link-hover-color = $black-deep
$link-decoration-color = $grey-light
$link-decoration-hover-color = $black-deep
// Global border color.
$border-color = $grey-light
// Background color for <body>
$body-bg-color = white
// Selection
$selection-bg = $blue-deep
$selection-color = white
// Typography
// Font, line-height, and elements colors.
// --------------------------------------------------
get_font_family(config) {
custom_family = hexo-config('font.' + config + '.family')
return custom_family is a 'string' ? custom_family : null
}
// Font families.
$font-family-chinese = "PingFang SC", "Microsoft YaHei"
$font-family-base = $font-family-chinese, sans-serif
$font-family-base = get_font_family('global'), $font-family-chinese, sans-serif if get_font_family('global')
$font-family-logo = $font-family-base
$font-family-logo = get_font_family('logo'), $font-family-base if get_font_family('logo')
$font-family-headings = $font-family-base
$font-family-headings = get_font_family('headings'), $font-family-base if get_font_family('headings')
$font-family-posts = $font-family-base
$font-family-posts = get_font_family('posts'), $font-family-base if get_font_family('posts')
$font-family-monospace = consolas, Menlo, $font-family-chinese, monospace
$font-family-monospace = get_font_family('codes'), consolas, Menlo, $font-family-chinese, monospace if get_font_family('codes')
$font-family-icons = 'FontAwesome'
// Font Weight
$font-weight-lighter = 200
$font-weight-light = 300
$font-weight-normal = 400
$font-weight-bold = 600
$font-weight-bolder = 700
// Font size
$font-size-base = 14px
$font-size-base = unit(hexo-config('font.global.size'), px) if hexo-config('font.global.size') is a 'unit'
$font-size-small = $font-size-base - 2px
$font-size-smaller = $font-size-base - 4px
$font-size-large = $font-size-base + 2px
$font-size-larger = $font-size-base + 4px
// Headings font size
$font-size-headings-step = 2px
$font-size-headings-base = 24px
$font-size-headings-base = unit(hexo-config('font.headings.size'), px) if hexo-config('font.headings.size') is a 'unit'
$font-size-headings-small = $font-size-headings-base - $font-size-headings-step
$font-size-headings-smaller = $font-size-headings-small - $font-size-headings-step
$font-size-headings-large = $font-size-headings-base + $font-size-headings-step
$font-size-headings-larger = $font-size-headings-large + $font-size-headings-step
// Global line height
$line-height-base = 2
$line-height-code-block = 1.6 // Can't be less than 1.3
// Z-index master list
// --------------------------------------------------
$zindex-bottom = -1
$zindex-1 = 1010
$zindex-2 = 1020
$zindex-3 = 1030
$zindex-4 = 1040
$zindex-5 = 1050
// Table
// --------------------------------------------------
$table-width = 100%
$table-border-color = $gray-lighter
$table-font-size = 14px
$table-content-alignment = left
$table-content-vertical = middle
$table-th-font-weight = 700
$table-cell-padding = 8px
$table-cell-border-right-color = $gainsboro
$table-cell-border-bottom-color = $gray-lighter
$table-row-odd-bg-color = #f9f9f9
$table-row-hover-bg-color = $whitesmoke
// Code & Code Blocks
// --------------------------------------------------
$code-font-family = $font-family-monospace
$code-font-size = 13px
$code-font-size = unit(hexo-config('font.codes.size'), px) if hexo-config('font.codes.size') is a 'unit'
$code-border-radius = 3px
$code-foreground = $black-light
$code-background = $gainsboro
// Buttons
// --------------------------------------------------
$btn-font-weight = normal
$btn-default-radius = 0
$btn-default-bg = $black-deep
$btn-default-color = white
$btn-default-font-size = 14px
$btn-default-border-width = 2px
$btn-default-border-color = $black-deep
$btn-default-hover-bg = white
$btn-default-hover-color = $black-deep
$btn-default-hover-border-color = $black-deep
// Pagination
// --------------------------------------------------
$pagination-border = $gainsboro
$pagination-link-bg = transparent
$pagination-link-color = $link-color
$pagination-link-border = $gainsboro
$pagination-link-hover-bg = transparent
$pagination-link-hover-color = $link-color
$pagination-link-hover-border = $black-deep
$pagination-active-bg = $grey-light
$pagination-active-color = white
$pagination-active-border = $grey-light
// Layout sizes
// --------------------------------------------------
$main-desktop = 960px
$main-desktop-large = 1200px
$content-desktop = 700px
$content-desktop-large = 900px
$content-desktop-padding = 40px
$content-tablet-padding = 10px
$content-mobile-padding = 8px
$sidebar-desktop = 240px
$footer-height = 50px
$gap-between-main-and-footer = 100px
// Headband
// --------------------------------------------------
$headband-height = 3px
$headband-bg = $black-deep
// Section Header
// Variables for header section elements.
// --------------------------------------------------
$head-bg = transparent
// Site Meta
$site-meta-text-align = center
$brand-color = white
$brand-hover-color = white
$brand-bg = $black-deep
$logo-font-size = 20px
$logo-font-size = unit(hexo-config('font.logo.size'), px) if hexo-config('font.logo.size') is a 'unit'
$site-subtitle-color = $grey-dark
$subtitle-font-size = 13px
$subtitle-color = $grey-dark
// Menu
$menu-link-border = transparent
$menu-link-hover-border = $black-deep
// Posts Expand
// --------------------------------------------------
$posts-expand-title-font-weight = $font-weight-normal
$post-copyright = {
margin: 2em 0 0,
padding: .5em 1em,
bg: #f9f9f9,
border: {
width: 3px,
style: solid,
color: #ff1700
}
}
// Posts Collpase
// --------------------------------------------------
$posts-collapse-left = 55px
$posts-collapse-left-mobile = 5px
// Sidebar
// Variables for sidebar section elements.
// --------------------------------------------------
$sidebar-nav-color = $black-light
$sidebar-nav-hover-color = $whitesmoke
$sidebar-highlight = $blue-bright
$site-author-image-padding = 2px
$site-author-image-width = 96px
$site-author-image-height = auto
$site-author-image-border-width = 2px
$site-author-image-border-color = $black-dim
$site-author-name-margin = 5px 0 0
$site-author-name-color = $whitesmoke
$site-author-name-align = center
$site-author-name-weight = normal
$site-description-font-size = 14px
$site-description-color = $grey-dark
$site-description-margin-top = 5px
$site-description-align = center
$site-state-align = center
$site-state-item-count-font-size = 18px
$site-state-item-count-color = inherit
$site-state-item-name-font-size = 13px
$site-state-item-name-color = inherit
$site-state-item-border-color = $black-dim
$toc-link-color = $grey-dark
$toc-link-border-color = $black-light
$toc-link-hover-color = $grey-light
$toc-link-hover-border-color = $grey-light
$toc-link-active-color = $sidebar-highlight
$toc-link-active-border-color = $sidebar-highlight
$toc-link-active-current-color = $sidebar-highlight
$toc-link-active-current-border-color = $sidebar-highlight
// Components
// --------------------------------------------------
// Back to top
$b2t-opacity = 1
$b2t-position-bottom = -100px
$b2t-position-bottom-on = 19px
$b2t-position-right = 30px
$b2t-font-size = 12px
$b2t-color = white
$b2t-bg-color = $black-deep
// full-image
$full-image-width = 110%
$full-image-margin-horizontal = -5%
$full-image-margin-vertical = 25px
// .post-expand .post-eof
// In Muse scheme, margin above and below the post separator
$post-eof-margin-top = 80px // or 160px for more white space
$post-eof-margin-bottom = 60px // or 120px for less white space
// Iconography
// Icons SVG Base64
// --------------------------------------------------
// blockquote-center icon
$center-quote-left = '../images/quote-l.svg'
$center-quote-right = '../images/quote-r.svg'
// Note colors
// --------------------------------------------------
// Read note light_bg_offset from NexT config and set in "lbg%" to use it as string variable.
hexo-config('note.light_bg_offset') is a 'unit' ? (lbg = unit(hexo-config('note.light_bg_offset'),"%")) : (lbg = 0)
// Default
$note-default-border = #777
$note-default-bg = lighten(spin($note-default-border, 0), 94% + lbg)
$note-default-text = $note-default-border
$note-default-icon = "\f0a9"
$note-modern-default-border = #e1e1e1
$note-modern-default-bg = lighten(spin($note-modern-default-border, 10), 60% + (lbg * 4))
$note-modern-default-text = $grey-dim
$note-modern-default-hover = darken(spin($note-modern-default-text, -10), 32%)
// Primary
$note-primary-border = #6f42c1
$note-primary-bg = lighten(spin($note-primary-border, 10), 92% + lbg)
$note-primary-text = $note-primary-border
$note-primary-icon = "\f055"
$note-modern-primary-border = #e1c2ff
$note-modern-primary-bg = lighten(spin($note-modern-primary-border, 10), 40% + (lbg * 4))
$note-modern-primary-text = #6f42c1
$note-modern-primary-hover = darken(spin($note-modern-primary-text, -10), 22%)
// Info
$note-info-border = #428bca
$note-info-bg = lighten(spin($note-info-border, -10), 91% + lbg)
$note-info-text = $note-info-border
$note-info-icon = "\f05a"
$note-modern-info-border = #b3e5ef
$note-modern-info-bg = lighten(spin($note-modern-info-border, 10), 50% + (lbg * 4))
$note-modern-info-text = #31708f
$note-modern-info-hover = darken(spin($note-modern-info-text, -10), 32%)
// Success
$note-success-border = #5cb85c
$note-success-bg = lighten(spin($note-success-border, 10), 90% + lbg)
$note-success-text = $note-success-border
$note-success-icon = "\f058"
$note-modern-success-border = #d0e6be
$note-modern-success-bg = lighten(spin($note-modern-success-border, 10), 40% + (lbg * 4))
$note-modern-success-text = #3c763d
$note-modern-success-hover = darken(spin($note-modern-success-text, -10), 27%)
// Warning
$note-warning-border = #f0ad4e
$note-warning-bg = lighten(spin($note-warning-border, 10), 88% + lbg)
$note-warning-text = $note-warning-border
$note-warning-icon = "\f06a"
$note-modern-warning-border = #fae4cd
$note-modern-warning-bg = lighten(spin($note-modern-warning-border, 10), 43% + (lbg * 4))
$note-modern-warning-text = #8a6d3b
$note-modern-warning-hover = darken(spin($note-modern-warning-text, -10), 18%)
// Danger
$note-danger-border = #d9534f
$note-danger-bg = lighten(spin($note-danger-border, -10), 92% + lbg)
$note-danger-text = $note-danger-border
$note-danger-icon = "\f056"
$note-modern-danger-border = #ebcdd2
$note-modern-danger-bg = lighten(spin($note-modern-danger-border, 10), 35% + (lbg * 4))
$note-modern-danger-text = #a94442
$note-modern-danger-hover = darken(spin($note-modern-danger-text, -10), 22%)
// Label colors
// --------------------------------------------------
$label-default = lighten(spin($note-default-border, 0), 89% + lbg)
$label-primary = lighten(spin($note-primary-border, 10), 87% + lbg)
$label-info = lighten(spin($note-info-border, -10), 86% + lbg)
$label-success = lighten(spin($note-success-border, 10), 85% + lbg)
$label-warning = lighten(spin($note-warning-border, 10), 83% + lbg)
$label-danger = lighten(spin($note-danger-border, -10), 87% + lbg)