113 lines
3.8 KiB
Stylus
113 lines
3.8 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-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
|
|
|
|
// 动态计算值
|
|
: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) |