hexo-theme-redefine/source/css/common/variables.styl

Redefine your writing with Hexo Theme Redefine.

@require './theme.styl'

// ========================================================================================
//                                   REDEFINE THEME VARIABLE                                 
// ========================================================================================


// ========================================================================================
//                                           LAYOUT
// ========================================================================================
$navbar-height = 70px;                                           // navbar height
$navbar-shrink-height = $navbar-height * 0.72;                   // navbar shrink height
$scroll-progress-bar-height = 2px;                               // scroll progress bar height
$main-content-width = 80%;                                       // main content width (PC)
$main-content-width-tablet = 86%;                                // main content width (tablet)
$main-content-width-mobile = 90%;                                // main content width (mobile)
$post-tool-button-width = 38px;                                  // post tool button width
$spacing-unit = 38px;                                 // component-spacing-value (PC)

// main content max width
$temp-content-max-width = hexo-config('global.content_max_width')
$content-max-width = $temp-content-max-width ? convert($temp-content-max-width) : 1000px
$has-toc-content-max-width = $content-max-width * 1.2

$navbar-width-home-data = hexo-config('navbar.width.home')
$navbar-width-home = $navbar-width-home-data ? convert($navbar-width-home-data) : 1200px
$navbar-width-pages-data = hexo-config('navbar.width.pages')
$navbar-width-pages = $navbar-width-pages-data ? convert($navbar-width-pages-data) : 1000px


// ========================================================================================
//                                         TITLES
// ========================================================================================

$h1-heading-margin-top-data = hexo-config('articles.style.headings_top_spacing.h1')
$h1-heading-margin-top = $h1-heading-margin-top-data ? convert($h1-heading-margin-top-data) : 3.2rem
$h2-heading-margin-top-data = hexo-config('articles.style.headings_top_spacing.h2')
$h2-heading-margin-top = $h2-heading-margin-top-data ? convert($h2-heading-margin-top-data) : 2.4rem
$h3-heading-margin-top-data = hexo-config('articles.style.headings_top_spacing.h3')
$h3-heading-margin-top = $h3-heading-margin-top-data ? convert($h3-heading-margin-top-data) : 1.9rem
$h4-heading-margin-top-data = hexo-config('articles.style.headings_top_spacing.h4')
$h4-heading-margin-top = $h4-heading-margin-top-data ? convert($h4-heading-margin-top-data) : 1.6rem
$h5-heading-margin-top-data = hexo-config('articles.style.headings_top_spacing.h5')
$h5-heading-margin-top = $h5-heading-margin-top-data ? convert($h5-heading-margin-top-data) : 1.4rem
$h6-heading-margin-top-data = hexo-config('articles.style.headings_top_spacing.h6')
$h6-heading-margin-top = $h6-heading-margin-top-data ? convert($h6-heading-margin-top-data) : 1.3rem


// ========================================================================================
//                                          MEDIA
// ========================================================================================
$media-max-width = 768px;                                 // media query max width (tablet)
$media-max-width-mobile = 640px;                          // media query max width (mobile)

redefine-tablet() {
  @media (max-width $media-max-width){
    {block}
  }
}

redefine-mobile() {
  @media (max-width $media-max-width-mobile){
    {block}
  }
}

// ========================================================================================
//                                         Z-INDEX
// ========================================================================================
$z-index-1 = 1001
$z-index-2 = 1002
$z-index-3 = 1003
$z-index-4 = 1004
$z-index-5 = 1005
$z-index-6 = 1006
$z-index-7 = 1007
$z-index-8 = 1008
$z-index-9 = 1009


// ========================================================================================
//                                      BORDER RADIUS
// ========================================================================================

$redefine-border-radius-none = 0px
$redefine-border-radius-xsmall = 4px
$redefine-border-radius-xsmall-top = 4px 4px 0px 0px
$redefine-border-radius-xsmall-bottom = 0px 0px 4px 4px
$redefine-border-radius-small = 9px
$redefine-border-radius-small-top = 9px 9px 0px 0px
$redefine-border-radius-small-bottom = 0px 0px 9px 9px
$redefine-border-radius-medium = 14px
$redefine-border-radius-medium-top = 14px 14px 0px 0px
$redefine-border-radius-medium-bottom = 0px 0px 14px 14px
$redefine-border-radius-large = 18px
$redefine-border-radius-large-top = 18px 18px 0px 0px
$redefine-border-radius-large-bottom = 0px 0px 18px 18px
$redefine-border-radius-xlarge = 24px
$redefine-border-radius-xlarge-top = 24px 24px 0px 0px
$redefine-border-radius-xlarge-bottom = 0px 0px 24px 24px
$redefine-border-radius-xxlarge = 48px
$redefine-border-radius-xxlarge-top = 48px 48px 0px 0px
$redefine-border-radius-xxlarge-bottom = 0px 0px 48px 48px
$redefine-border-radius-full = 50%
$redefine-border-radius-full-top = 50% 50% 0px 0px
$redefine-border-radius-full-bottom = 0px 0px 50% 50%

$temp-usr-img-border-radius = hexo-config('articles.style.image_border_radius')
$usr-img-border-radius = $temp-usr-img-border-radius ? convert($temp-usr-img-border-radius) : $redefine-border-radius-medium

// ========================================================================================
//                                    MERMAID THEME
// ========================================================================================
$temp-mermaid-theme = hexo-config('plugins.mermaid.theme.light')
$mermaid-theme = $temp-mermaid-theme ? $temp-mermaid-theme : hexo-config('mermaid.theme.light')
$temp-dark-mermaid-theme = hexo-config('plugins.mermaid.theme.dark')
$dark-mermaid-theme = $temp-dark-mermaid-theme ? $temp-dark-mermaid-theme : hexo-config('mermaid.theme.dark')



// ========================================================================================
//                                     FONT VARIABLES
// ========================================================================================

if hexo-config('global.fonts.chinese.enable') {
  $temp-chinese-font-family = hexo-config('global.fonts.chinese.family')
  $chinese-font-family = $temp-chinese-font-family ? $temp-chinese-font-family : 'PingFang SC'
} else {
  $chinese-font-family = -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Heiti SC', 'WenQuanYi Micro Hei', sans-serif;
}

if hexo-config('global.fonts.english.enable') {
  $temp-english-font-family = hexo-config('global.fonts.english.family')
  $english-font-family = $temp-english-font-family ? $temp-english-font-family : 'Geist Variable'
} else {
  $english-font-family = 'Geist Variable'
}

$default-font-family = Geist Variable, Noto Sans SC, -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial
$default-font-size = 16px
$temp-default-article-font-size = hexo-config('articles.style.font_size')
$temp-default-line-height = hexo-config('articles.style.line_height')
$default-article-font-size = $temp-default-article-font-size ? convert($temp-default-article-font-size) : 16px
$default-line-height = $temp-default-line-height ? $temp-default-line-height : 1.5
$default-font-weight = 400