xaoxuu
/
hexo-theme-stellar
mirror of https://github.com/xaoxuu/hexo-theme-stellar
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
hexo-theme-stellar/source/css/_custom.styl

87 lines
2.2 KiB
Stylus
Raw Normal View History

init
2021-02-19 23:33:19 +08:00
@require('_defines/const')
// 通用主题色
update
2021-03-13 13:32:45 +08:00
$color-theme = #1BCDFC
init
2021-02-19 23:33:19 +08:00
$color-link = #2196f3
$color-button = #1BCDFC
$color-hover = #ff5722
$color-inner = #fff
$color-cat = #FF7844
$color-cat-hover = darken($color-cat, 20)
css
2021-04-02 20:24:16 +08:00
// 浅色
css
2021-06-23 13:41:05 +08:00
$light-site-bg = convert(hexo-config('style.theme.light'))
css
2021-04-02 20:24:16 +08:00
$light-block = #f2f2f2
$light-title = #000
css
2021-06-23 13:41:05 +08:00
$light-text = #444
$light-code = #111
css
2021-04-02 20:24:16 +08:00
$light-card = white
init
2021-02-19 23:33:19 +08:00
css
2021-04-02 20:24:16 +08:00
// 深色
css
2021-06-23 13:41:05 +08:00
$dark-site-bg = convert(hexo-config('style.theme.dark'))
update
2021-04-22 23:37:14 +08:00
$dark-block = #2E353D
css
2021-04-02 20:24:16 +08:00
$dark-title = #fff
css
2021-07-29 00:25:37 +08:00
$dark-text = #eee
css
2021-06-23 13:41:05 +08:00
$dark-code = #ff7043
update
2021-04-22 23:37:14 +08:00
$dark-card = #40454B
init
2021-02-19 23:33:19 +08:00
css
2021-04-02 20:24:16 +08:00
// 移动端深色背景（OLED调成纯黑可以省电）
$dark-site-bg-mobile = black
init
2021-02-19 23:33:19 +08:00
// @font-face
// font-family: 'Dosis'
// src: url('https://cdn.jsdelivr.net/gh/volantis-x/cdn-fonts@20.5.30/Dosis/Dosis-Medium.ttf')
// font-weight: normal
// font-style: normal
css
2021-03-05 21:37:28 +08:00
$ff-body = system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif
code font
2021-07-03 13:21:54 +08:00
$ff-code = Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif
init
2021-02-19 23:33:19 +08:00
$ff-logo = $ff-body
// font size
$fs-root = 16px
css
2021-03-05 21:37:28 +08:00
$fs-15 = .9375rem
$fs-14 = .875rem
$fs-13 = .8125rem
$fs-12 = .75rem
init
2021-02-19 23:33:19 +08:00
$fs-h1 = 2rem // 32px
css
2021-03-05 21:37:28 +08:00
$fs-h2 = 1.5rem // 24px
init
2021-02-19 23:33:19 +08:00
$fs-h3 = 1.375rem // 22px
$fs-h4 = 1.125rem // 18px
css
2021-03-05 21:37:28 +08:00
$fs-h5 = $fs-15
$fs-h6 = $fs-12
group -> tags
2021-07-26 22:26:46 +08:00
$fs-p = $fs-15
css
2021-03-05 21:37:28 +08:00
$fs-code = $fs-13
init
2021-02-19 23:33:19 +08:00
$border-card = 12px
css
2021-03-06 00:01:41 +08:00
$border-widget = 4px
group -> tags
2021-07-26 22:26:46 +08:00
$border-block = 6px
$border-image = 6px
init
2021-02-19 23:33:19 +08:00
css
2021-03-05 21:37:28 +08:00
// 可以动态变化的属性
:root
css
2021-04-02 20:24:16 +08:00
--width-left: 256px
css
2021-03-05 21:37:28 +08:00
--width-main: 680px
--gap-l: 16px
gap for paragraph
2021-07-15 00:19:06 +08:00
--gap-p: 1.25rem // gap for paragraph
css
2021-03-05 21:37:28 +08:00
// desktop 2k or larger
@media screen and (min-width: $device-2k)
group -> tags
2021-07-26 22:26:46 +08:00
--gap-l: 32px
update
2021-03-11 23:19:41 +08:00
--width-left: 320px
css
2021-03-05 21:37:28 +08:00
--width-main: 740px
// desktop 4k or larger
@media screen and (min-width: $device-4k)
--width-main: 860px
--gap-l: 64px
init
2021-02-19 23:33:19 +08:00
// 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)
css
2021-07-09 21:18:14 +08:00
$boxshadow-button = 0 0 2px 0px rgba(0, 0, 0, 0.04), 0 0 8px 0px rgba(0, 0, 0, 0.04)
timeline
2021-07-09 22:41:09 +08:00
$boxshadow-block = 0 1px 4px 0px rgba(0, 0, 0, 0.02), 0 2px 8px 0px rgba(0, 0, 0, 0.02)