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-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'))

$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 + 9px)' % $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-main: 720px
  --fsp: $fs-body
  --fsh2: 'calc(%s + 11px)' % var(--fsp)
  --fsh3: 'calc(%s + 7px)' % var(--fsp)
  --fsh4: 'calc(%s + 4px)' % var(--fsp)
  
  // 侧边栏文字内容宽度
  --side-content-width: 224px
  // 元素轮廓到容器边缘的间距
  --gap-margin: 16px
  // 元素文本内容到元素自身的轮廓的间距
  --gap-padding: 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)
    --width-main: 780px
  // desktop 4k or larger
  @media screen and (min-width: $device-4k)
    --width-main: 860px
  // iPad 竖屏
  @media screen and (max-width: $device-tablet)
    --side-content-width: 188px
  @media screen and (max-width: $device-mobile-max)
    --side-content-width: 224px

// 动态计算值
:root
  // 元素文本内容到容器边缘的间距
  --gap-max: calc(var(--gap-margin) + var(--gap-padding))

// 文章布局风格
.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)