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

[opt] custom css

This commit is contained in:
xaoxuu 2022-12-15 22:09:01 +08:00
parent 725ab8db8e
commit e4f6ac690a
29 changed files with 104 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
_config.yml
View File

@ -197,9 +197,10 @@ footer:
######## Tag Plugins ########
tag_plugins:
# {% note text %}
# {% ablock %} / {% note %}
note:
default_color: '' # light, dark, red, orange, yellow, green, cyan, blue, purple, warning, error
border: true # true / false
# {% checkbox %}
checkbox:
interactive: false # enable interactive for user
@ -319,12 +320,22 @@ plugins:
style:
darkmode: auto # auto / always / false
smooth_scroll: true # true / false
font-size: 16px
font-size:
root: 16px
body: .9375rem # 15px
code: 85% # 14px
codeblock: 0.8125rem # 13px
font-family:
logo: 'system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif'
body: 'system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif'
code: 'Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif'
codeblock: 'Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif'
text-align: left
border-radius:
card: 12px
block: 12px
button: 8px
image: 8px
color:
# 动态颜色（会根据明暗主题重设明度值，只用关心色相和饱和度即可）
background: 'hsl(212 16% 98%)' # 浅色背景颜色

4
scripts/tags/lib/tabs.js
View File

@ -39,11 +39,11 @@ module.exports = ctx => function(args, content = '') {
const abbr = tabName + ' ' + ++tabId
const href = abbr.toLowerCase().split(' ').join('-')
const isActive = (tabActive > 0 && tabActive === tabId) || (tabActive === 0 && tabId === 1) ? ' active' : ''
tabNav += `<li class="tab${isActive}"><a href="#${href}">${tab.header || abbr}</a></li>`
tabNav += `<div class="tab${isActive}"><a href="#${href}">${tab.header || abbr}</a></div>`
tabContent += `<div class="tab-pane${isActive}" id="${href}">${content}</div>`
})
tabNav = `<ul class="nav-tabs">${tabNav}</ul>`
tabNav = `<div class="nav-tabs">${tabNav}</div>`
tabContent = `<div class="tab-content">${tabContent}</div>`
var el = ''

4
source/css/_common/base.styl
View File

@ -1,6 +1,6 @@
pre
font-family: $ff-code
font-size: $fs-code
font-family: $ff-codeblock
font-size: $fs-codeblock
tab-size: 4
-moz-tab-size: 4
-o-tab-size: 4

4
source/css/_common/blockquote.styl
View File

@ -2,9 +2,9 @@ blockquote
display: block
margin-left: 0
margin-right: 0
padding: 0.5rem 0.75rem
padding: 0.25rem 0.75rem
background: var(--block)
$bd-left = 4px
border-left: $bd-left solid var(--text-meta)
border-radius: $bd-left $border-block $border-block $bd-left
border-radius: $bd-left $border-button $border-button $bd-left
color: var(--text-p2)

21
source/css/_common/highlight.styl
View File

@ -4,7 +4,7 @@ code
font-family: $ff-code
p>code:not([class]),li>code:not([class])
font-size: 85%
font-size: $fs-code
background: var(--block)
padding: .2em
border-radius: 4px
@ -16,7 +16,7 @@ p>code:not([class]),li>code:not([class])
overflow: hidden
background: var(--block)
line-height: 1.5
font-family: $ff-code
font-family: $ff-codeblock
box-sizing: border-box
@media screen and (min-width: $device-mobile)
min-width: 180px
@ -27,15 +27,16 @@ p>code:not([class]),li>code:not([class])
display: block
figcaption
color: var(--text-p2)
font-size: $fs-code
padding: 4px 0.5rem
position: sticky
left: 0
background: var(--block-hover)
border-top-left-radius: "calc(%s - 1px)" % $border-block
border-top-right-radius: "calc(%s - 1px)" % $border-block
font-size: $fs-codeblock
font-weight: 500
margin-left: 0.5rem
display: inline-block
span
margin-right: 4px
padding: 4px 0.5rem
display: block
border-bottom-left-radius: $border-button
border-bottom-right-radius: $border-button
background: var(--block-hover)
>table
overflow: auto
display: block

24
source/css/_custom.styl
View File

@ -20,7 +20,8 @@ $color-text = convert(hexo-config('style.color.text'))
// font-style: normal
$ff-body = system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif
$ff-code = Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, 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')
@ -29,12 +30,15 @@ if 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'))
$fs-root = convert(hexo-config('style.font-size.root'))
$fs-15 = .9375rem
$fs-14 = .875rem
$fs-13 = .8125rem
@ -46,19 +50,23 @@ $fs-h3 = 1.375rem // 22px
$fs-h4 = 1.125rem // 18px
$fs-h5 = $fs-15
$fs-h6 = $fs-12
$fs-p = $fs-15
$fs-code = $fs-13
$fs-p = 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 = 12px
$border-block = 6px
$border-image = 6px
$border-card = convert(hexo-config('style.border-radius.card'))
$border-block = convert(hexo-config('style.border-radius.block'))
$border-button = convert(hexo-config('style.border-radius.button'))
$border-image = convert(hexo-config('style.border-radius.image'))
// 可以动态变化的属性
:root
--width-left: 288px
--width-main: 720px
--gap-l: 16px
--gap-p: .75rem // gap for paragraph
--gap-p: 1rem // gap for paragraph
--gap-p-compact: 0.75rem
// desktop 2k or larger
@media screen and (min-width: $device-2k)
--gap-l: 32px

2
source/css/_defines/func.styl
View File

@ -83,7 +83,7 @@ scrollbar-codeblock($height = 4px)
&::-webkit-scrollbar-thumb
background: transparent
cursor: pointer
border-radius: $border-block
border-radius: $border-button
&:hover
&::-webkit-scrollbar-thumb
background: var(--text-meta)

4
source/css/_defines/theme.styl
View File

@ -38,7 +38,6 @@ set_text_light()
--block: hsl($color-block-h, $color-block-s, 95)
--block-border: hsl($color-block-h, $color-block-s, 90)
--block-hover: hsl($color-block-h, $color-block-s, 92)
--block-lighten: hsl($color-block-h, $color-block-s, 100)
set_text_dark()
--theme-bg2: $color-theme
--theme-link: $color-link
@ -46,11 +45,10 @@ set_text_light()
set_darkmode()
:root
--site-bg: hsl($color-background-h, $color-background-s * 0.5, (100 - $color-background-l) * 2 + 8)
--card: hsl($color-block-h, $color-block-s * 1.5, 24)
--card: hsl($color-block-h, $color-block-s * 1.2, 24)
--block: hsl($color-block-h, $color-block-s, 16)
--block-border: hsl($color-block-h, $color-block-s, 24)
--block-hover: hsl($color-block-h, $color-block-s, 20)
--block-lighten: hsl($color-block-h, $color-block-s, 32)
set_text_light()
@media screen and (max-width: $device-mobile-max)
--site-bg: black

1
source/css/_layout/list.styl
View File

@ -55,7 +55,6 @@
.post-list .post-card:hover
box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.1), 0 4px 16px 0px rgba(0, 0, 0, 0.1)
transform: translateY(-1px)
img
transform: scale(1.02)
filter: brightness(80%)

8
source/css/_layout/md.styl
View File

@ -60,9 +60,12 @@ h1.article-title
p,ul,ol
font-size: $fs-14
line-height: 1.5
code
font-size: inherit
padding: 0
p,blockquote,.tag-plugin,ul,ol,.highlight,table
*
--gap-p: .5rem
--gap-p: var(--gap-p-compact)
p,ul,ol
margin-top: 'calc(%s - 4px)' % var(--gap-p)
margin-bottom: 'calc(%s - 4px)' % var(--gap-p)
@ -71,6 +74,9 @@ h1.article-title
margin-bottom: var(--gap-p)
iframe
display: block
ul>li, ol>li
margin-top: 4px
margin-bottom: 4px
// titles
.md-text.content

2
source/css/_layout/pages/archives.styl
View File

@ -47,7 +47,7 @@
&.child
padding-left: 2rem
padding: .5em 1rem
border-radius: $border-block
border-radius: $border-button
color: var(--text-p2)
align-items: center
justify-content: space-between

2
source/css/_layout/partial/related.styl
View File

@ -14,7 +14,7 @@
a.more
padding: 0.25rem 0.5rem
border-radius: $border-block
border-radius: $border-button
color: var(--text-p1)
article.md-text.content+.related-wrap

2
source/css/_layout/sidebar/header.styl
View File

@ -28,7 +28,7 @@ nav.menu
text-align: center
&.active, &:hover
color: var(--text-p1)
background: var(--block-lighten)
background: var(--card)
box-shadow: $boxshadow-button
.l_left .menu a.nav-item

7
source/css/_layout/tag-plugins/checkbox.styl
View File

@ -1,8 +1,9 @@
.md-text .checkbox
.md-text .tag-plugin.checkbox
display: flex
align-items: center
font-size: $fs-15
line-height: 1.2
--gap-p: .25rem
--gap-p: 'calc(%s / 2)' % var(--gap-p-compact)
input
-webkit-appearance: none
-moz-appearance: none
@ -20,8 +21,6 @@
margin-right: 8px
if hexo-config('tag_plugins.checkbox.interactive') != true
pointer-events: none
span
margin-top: 1px
/* Checkbox */
input[type=checkbox]
&:before, &:after

8
source/css/_layout/tag-plugins/common.styl
View File

@ -16,8 +16,8 @@ set_dynamic_color($theme)
--theme-bg1: hsl(hue($theme), 90, 90)
--theme-bg2: hsl(hue($theme), 80, 95)
--theme-border: hsl(hue($theme), 50, 80)
--text-p0: hsl(hue($theme), 60, 16)
--text-p1: hsl(hue($theme), 50, 24)
--text-p0: hsl(hue($theme), 55, 16)
--text-p1: hsl(hue($theme), 55, 20)
--text-p2: hsl(hue($theme), 90, 24)
.tag-plugin
@ -72,8 +72,8 @@ set_darkmode_tags()
--theme-bg1: hsl(hue($theme), 80, 20)
--theme-bg2: hsl(hue($theme), 16, 16)
--theme-border: hsl(hue($theme), 50, 24)
--text-p0: hsl(hue($theme), 80, 80)
--text-p1: hsl(hue($theme), 64, 80)
--text-p0: hsl(hue($theme), 100, 85)
--text-p1: hsl(hue($theme), 50, 75)
--text-p2: hsl(hue($theme), 80, 72)
.tag-plugin.tag
set_dynamic_color($color-theme)

2
source/css/_layout/tag-plugins/copy.styl
View File

@ -3,7 +3,7 @@
justify-content: space-between
box-sizing: border-box
background: var(--block)
border-radius: $border-block
border-radius: $border-button
border: 1px solid var(--block-border)
overflow: hidden
width: 320px

2
source/css/_layout/tag-plugins/folders.styl
View File

@ -1,7 +1,7 @@
.tag-plugin.folders
display: block
margin: 1rem 0
border-radius: $border-block
border-radius: $border-button
font-size: $fs-14
border: 1px solid var(--theme-border)
overflow: hidden

8
source/css/_layout/tag-plugins/folding.styl
View File

@ -2,7 +2,7 @@ details.folding
display: block
padding: 1rem
margin: 1rem 0
border-radius: $border-block
border-radius: $border-button
font-size: $fs-14
background: var(--theme-bg2)
border: 1px solid var(--theme-border)
@ -10,7 +10,7 @@ details.folding
cursor: pointer
padding: .75rem 1rem
margin: 0 - 1rem
border-radius: $border-block
border-radius: $border-button
color: var(--text-p2)
font-weight: 500
position: relative
@ -47,8 +47,8 @@ details.folding[open]
margin: 0 - 1rem
margin-top: 0
background: var(--card)
border-bottom-left-radius: 'calc(%s - 1px)' % $border-block
border-bottom-right-radius: 'calc(%s - 1px)' % $border-block
border-bottom-left-radius: 'calc(%s - 1px)' % $border-button
border-bottom-right-radius: 'calc(%s - 1px)' % $border-button
font-size: $fs-15
>:first-child
margin-top: 0

3
source/css/_layout/tag-plugins/grid.styl
View File

@ -18,6 +18,9 @@
p:last-child
margin-bottom: -0.25em
.md-text .tag-plugin.grid
margin-top: -0.5rem
margin-bottom: -0.5rem
.tag-plugin.grid
@media screen and (max-width: $device-tablet)

2
source/css/_layout/tag-plugins/link.styl
View File

@ -18,7 +18,7 @@
@media screen and (max-width: $device-mobile-375)
width: 100%
box-shadow: $boxshadow-card
border-radius: $border-block
border-radius: $border-button
trans2: box-shadow transform
&:hover
box-shadow: $boxshadow-card-float

17
source/css/_layout/tag-plugins/note.styl
View File

@ -1,26 +1,25 @@
.md-text .tag-plugin.note
position: relative
margin-top: 1rem
margin-bottom: 1rem
padding: 0 1rem
padding: 0.25rem 1rem
border-radius: $border-block
background: var(--theme-bg2)
border: 1px solid var(--theme-border)
if hexo-config('tag_plugins.note.border') == true
border: 1px solid var(--theme-border)
color: var(--text-p1)
>.title
font-size: $fs-15
line-height: 1.2
margin-top: 1rem
line-height: 1.5
margin-top: var(--gap-p-compact)
font-weight: 500
color: var(--text-p0)
>.body
&,p
font-size: $fs-14
line-height: 1.5
margin-top: .5rem
margin-bottom: 1rem
margin-top: var(--gap-p-compact)
margin-bottom: var(--gap-p-compact)
>.body:only-child
margin: 1rem 0
margin: 'calc(%s - 0.25rem)' % var(--gap-p) 0
.md-text .tag-plugin.note[color]

3
source/css/_layout/tag-plugins/quot.styl
View File

@ -20,7 +20,7 @@
max-width 400px
position: relative
// override
.tag-plugin.quot
.md-text.content .tag-plugin.quot
h1
font-size: $fs-h1
font-weight: 900
@ -30,6 +30,7 @@
h2,h3,h4,h5,h6
font-size: $fs-h3
margin-top: 1em
margin-bottom: 0
p
font-size: $fs-h4
color: var(--text-p0)

4
source/css/_layout/tag-plugins/tabs.styl
View File

@ -16,7 +16,7 @@
align-self: flex-end
.tag-plugin.tabs
ul.nav-tabs
.nav-tabs
display: flex
align-self: center
overflow: scroll visible
@ -36,7 +36,7 @@
bottom: 0
left: 0
border-radius: 2px
li.tab
.tab
list-style-type: none
a
display: block

6
source/css/_layout/tag-plugins/timeline.styl
View File

@ -99,15 +99,11 @@
.tag-plugin.timeline .body
background: var(--card)
border-radius: 12px
border-radius: $border-card
border-top-left-radius: 2px
padding: 0.5rem 1rem
margin-top: 4px
box-shadow: $boxshadow-block
trans2: transform box-shadow
&:hover
transform: translateY(-1px)
box-shadow: $boxshadow-card-float
p
font-size: $fs-14
img

2
source/css/_layout/tag-plugins/toc.styl
View File

@ -1,7 +1,7 @@
details.toc
background: var(--block)
border: 1px solid var(--block-border)
border-radius: $border-block
border-radius: $border-button
overflow: hidden
color: var(--text-p2)
summary

4
source/css/_layout/widgets/search.styl
View File

@ -16,7 +16,7 @@
line-height: 1
box-sizing: border-box
font-family: $ff-body
border-radius: $border-block
border-radius: $border-button
background-color: var(--card)
color: var(--text-p0)
border: 1px solid var(--block-border)
@ -38,7 +38,7 @@
font-size: $fs-14
padding: 2rem
background: var(--block)
border-radius: $border-block
border-radius: $border-button
#search-result
ul.search-result-list

2
source/css/_layout/widgets/toc_wiki.styl
View File

@ -5,7 +5,7 @@
// 其它分页链接
.widget-wrapper.toc.multi .doc-tree
border-radius: $border-block
border-radius: $border-button
background: var(--block)
overflow: hidden
border: 1px solid var(--block-border)

13
source/css/_plugins/swiper.styl
View File

@ -35,15 +35,22 @@ div.swiper-slide
max-width: 75%
.swiper-button-prev,.swiper-button-next
padding: 1rem 0.5rem
padding: 1rem 0.25rem
margin-top: -2rem !important
border-radius: 4px
border-radius: 40px
background: alpha(white, 0.25)
trans1 background
--swiper-theme-color: black !important
--swiper-theme-color: var(--text-p0) !important
&:after
font-size: 1.2rem !important
font-weight: 700 !important
color: var(--swiper-theme-color)
&:hover
background: white !important
--swiper-theme-color: $color-hover !important
.swiper-button-prev:after
transform: translateX(-1px)
.swiper-button-next:after
transform: translateX(1px)

2
source/js/main.js
View File

@ -144,7 +144,7 @@ const init = {
*/
registerTabsTag: function () {
// Binding `nav-tabs` & `tab-content` by real time permalink changing.
document.querySelectorAll('.tabs ul.nav-tabs .tab').forEach(element => {
document.querySelectorAll('.tabs .nav-tabs .tab').forEach(element => {
element.addEventListener('click', event => {
event.preventDefault();
// Prevent selected tab to select again.