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

@require('_defines/const')

// 通用主题色
$color-theme = convert(hexo-config('style.color.theme'))
$color-accent = convert(hexo-config('style.color.accent'))
$color-link = convert(hexo-config('style.color.link'))
$color-button = convert(hexo-config('style.color.button'))
$color-hover = convert(hexo-config('style.color.hover'))

// 动态颜色
$color-background = convert(hexo-config('style.color.background'))
$color-block = convert(hexo-config('style.color.block'))
$color-code = convert(hexo-config('style.color.code'))
$color-text = convert(hexo-config('style.color.text'))

// @font-face
//   font-family: 'Dosis'
//   src: url('https://gcore.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-codeblock = Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif
$ff-code = $ff-codeblock
$ff-logo = $ff-body

if hexo-config('style.font-family.body')
  $ff-body = convert(hexo-config('style.font-family.body'))

if hexo-config('style.font-family.code')
  $ff-code = convert(hexo-config('style.font-family.code'))

if hexo-config('style.font-family.codeblock')
  $ff-codeblock = convert(hexo-config('style.font-family.codeblock'))

if hexo-config('style.font-family.logo')
  $ff-logo = convert(hexo-config('style.font-family.logo'))


// font size
$fs-root = convert(hexo-config('style.font-size.root'))
$fs-15 = .9375rem
$fs-14 = .875rem
$fs-13 = .8125rem
$fs-12 = .75rem

$fs-body = convert(hexo-config('style.font-size.body'))
$fs-code = convert(hexo-config('style.font-size.code'))
$fs-codeblock = convert(hexo-config('style.font-size.codeblock'))

$fsh1 = 'calc(%s + 11px)' % $fs-body
$fsh2 = 'calc(%s + 11px)' % $fs-body
$fsh3 = 'calc(%s + 7px)' % $fs-body
$fsh4 = 'calc(%s + 4px)' % $fs-body
$fsh5 = 'calc(%s + 2px)' % $fs-body

$fsp0 = 'calc(%s - 0px)' % $fs-body
$fsp1 = 'calc(%s - 1px)' % $fs-body
$fsp2 = 'calc(%s - 2px)' % $fs-body
$fsp3 = 'calc(%s - 3px)' % $fs-body

$border-card-l = convert(hexo-config('style.border-radius.card-l'))
$border-card = convert(hexo-config('style.border-radius.card'))
$border-bar = convert(hexo-config('style.border-radius.bar'))
$border-image = convert(hexo-config('style.border-radius.image'))
$border-button = 4px

// 可以动态变化的属性
:root
  --width-left: 288px
  --width-main: 720px
  --fsp: $fs-body
  --fsh2: 'calc(%s + 11px)' % var(--fsp)
  --fsh3: 'calc(%s + 7px)' % var(--fsp)
  --fsh4: 'calc(%s + 4px)' % var(--fsp)
  
  --gap-l: 16px
  --gap-p: 'calc(%s + 4px)' % $fs-body // gap for paragraph
  --gap-p-compact: 'calc(%s * 0.75)' % $fs-body
  // desktop 2k or larger
  @media screen and (min-width: $device-2k)
    --gap-l: 32px
    --width-left: 352px
    --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: 252px
  // iPad 竖屏
  @media screen and (max-width: $device-mobile-max)
    --width-left: 288px

// 文章布局风格
.l_body.story
  --gap-p: 2rem
  div.tag-plugin,p>img
    margin-top: 2.4rem
    margin-bottom: 2.4rem

// 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 12px 16px -4px rgba(0, 0, 0, 0.2)
$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)
$boxshadow-toast = 0 4px 8px 0px rgba(0, 0, 0, 0.1), 0 12px 16px -4px rgba(0, 0, 0, 0.2)