106 lines
3.5 KiB
Stylus
106 lines
3.5 KiB
Stylus
@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-h1 = 2rem // 32px
|
|
$fs-h2 = 1.75rem // 28px
|
|
$fs-h3 = 1.375rem // 22px
|
|
$fs-h4 = 1.125rem // 18px
|
|
$fs-h5 = $fs-15
|
|
$fs-h6 = $fs-12
|
|
$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'))
|
|
|
|
|
|
$border-card = convert(hexo-config('style.border-radius.card'))
|
|
$border-block = convert(hexo-config('style.border-radius.block'))
|
|
$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
|
|
--fs-body: $fs-body
|
|
--fsp: var(--fs-body)
|
|
--fsp1: 'calc(%s - 1px)' % var(--fsp)
|
|
--fsp2: 'calc(%s - 2px)' % var(--fsp)
|
|
--fsp3: 'calc(%s - 3px)' % 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
|
|
--fsp: 'calc(%s + 2px)' % $fs-body
|
|
--gap-p: 1.5rem
|
|
.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) |