// // 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 $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-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)