hexo-theme-stellar/source/css/_custom.styl

@require('_defines/const')

// 通用主题色
$color-theme = #1BCDFC
$color-link = #2196f3
$color-button = #1BCDFC
$color-hover = #ff5722
$color-highlight = #ff5722
$color-inner = #fff
$color-cat = #FF7844
$color-cat-hover = darken($color-cat, 20)

// 浅色
$light-site-bg = convert(hexo-config('style.theme.light'))
$light-block = #f2f2f2
$light-title = #000
$light-text = #333
$light-code = #111
$light-card = white

// 深色
$dark-site-bg = convert(hexo-config('style.theme.dark'))
$dark-block = darken(saturate($dark-site-bg, 40%), 2)
$dark-title = #fff
$dark-text = #eee
$dark-code = #ff7043
$dark-card = lighten(saturate($dark-site-bg, 50%), 10)

// 移动端深色背景（OLED调成纯黑可以省电）
$dark-site-bg-mobile = black


// @font-face
//   font-family: 'Dosis'
//   src: url('https://fastly.jsdelivr.net/gh/volantis-x/cdn-fonts@20.5.30/Dosis/Dosis-Medium.ttf')
//   font-weight: normal
//   font-style: normal

$ff-body = system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif
$ff-code = Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif

$ff-logo = $ff-body

// font size
$fs-root = 16px
$fs-15 = .9375rem
$fs-14 = .875rem
$fs-13 = .8125rem
$fs-12 = .75rem

$fs-h1   = 1.75rem   // 32px
$fs-h2   = 1.5rem // 24px
$fs-h3   = 1.375rem  // 22px
$fs-h4   = 1.125rem  // 18px
$fs-h5   = $fs-15
$fs-h6   = $fs-12
$fs-p    = $fs-15
$fs-code = $fs-13

$border-card = 12px
$border-block = 6px
$border-image = 6px

// 可以动态变化的属性
:root
  --width-left: 256px
  --width-main: 720px
  --gap-l: 16px
  --gap-p: .75rem // gap for paragraph
  // desktop 2k or larger
  @media screen and (min-width: $device-2k)
    --gap-l: 32px
    --width-left: 320px
    --width-main: 780px
  // desktop 4k or larger
  @media screen and (min-width: $device-4k)
    --width-main: 860px
    --gap-l: 64px
  // iPad 竖屏
  @media screen and (max-width: $device-tablet)
    --width-left: 220px
  // iPad 竖屏
  @media screen and (max-width: $device-mobile-max)
    --width-left: 256px



// shadow
$boxshadow-card = 0 1px 2px 0px rgba(0, 0, 0, 0.1)
$boxshadow-float = 0 4px 8px 0px rgba(0, 0, 0, 0.1)
$boxshadow-card-float = 0 2px 4px 0px rgba(0, 0, 0, 0.1), 0 4px 8px 0px rgba(0, 0, 0, 0.1), 0 8px 16px 0px rgba(0, 0, 0, 0.1)
$boxshadow-button = 0 0 2px 0px rgba(0, 0, 0, 0.04), 0 0 8px 0px rgba(0, 0, 0, 0.04)
$boxshadow-block = 0 1px 4px 0px rgba(0, 0, 0, 0.02), 0 2px 8px 0px rgba(0, 0, 0, 0.02)