[opt] style

This commit is contained in:
xaoxuu 2024-01-31 22:45:07 +08:00
parent 82684f203c
commit 69a47be4a5
47 changed files with 162 additions and 104 deletions

View File

@ -313,7 +313,7 @@ tag_plugins:
max-height: 80vh
# {% mark %}
mark:
default_color: dark # light, dark, red, orange, yellow, green, cyan, blue, purple, warning, error
default_color: yellow # light, dark, red, orange, yellow, green, cyan, blue, purple, warning, error
# {% hashtag %}
hashtag:
default_color: # red, orange, yellow, green, cyan, blue, purple
@ -485,7 +485,7 @@ style:
border-radius:
card: 12px
block: 12px
bar: 12px
bar: 8px
image: 6px
color:
# 动态颜色(会根据明暗主题重设明度值,只用关心色相和饱和度即可)

View File

@ -122,7 +122,7 @@ function layoutDiv() {
function qrcode() {
if (theme.article.share.includes('wechat')) {
return `
<div class="qrcode" id="qrcode-wechat" style="visibility:hidden;height:0">
<div class="qrcode" id="qrcode-wechat" style="opacity:0;height:0">
<img src="https://api.qrserver.com/v1/create-qr-code/?size=256x256&data=${page.permalink}"/>
</div>
`

View File

@ -13,7 +13,7 @@ function layoutDiv() {
continue
}
el += '<div class="sitemap-group">'
el += '<span class="fs14">' + group + '</span>'
el += '<span class="fs15">' + group + '</span>'
items.forEach((item, i) => {
el += '<a href="' + url_for(md_link(item)) + '">'
el += __(md_text(item))

View File

@ -14,7 +14,7 @@ function layoutDiv() {
el += `<span class="sep"></span>`
}
// 发布日期
el += `<span class="text created">${__("meta.created") + __("symbol.colon")}`
el += `<span class="text created">`
el += `<time datetime="${date_xml(page.date)}">${date(page.date, config.date_format)}</time>`
el += `</span>`
// 更新日期

View File

@ -2,7 +2,7 @@
function layoutDiv() {
var el = '';
el += '<div class="nav-wrap">';
el += '<nav class="sub post cap">';
el += '<nav class="sub post">';
if (is_home()) {
el += '<a class="active" href="' + url_for(config.index_generator.path) + '">' + __("btn.recent_publish") + '</a>';
} else {

View File

@ -2,7 +2,7 @@
function layoutDiv() {
var el = '';
el += '<div class="nav-wrap">';
el += '<nav class="sub wiki cap">';
el += '<nav class="sub wiki">';
// 所有项目
el += '<a';
if (page.filter === false) {

View File

@ -24,7 +24,7 @@ module.exports = ctx => function(args) {
el += '>'
// title
if (title && title.length > 0) {
el += '<div class="title">' + title + '</div>'
el += `<div class="title">${title}</div>`
}
// content
el += '<div class="body">'

View File

@ -25,7 +25,8 @@ img
li
font-size: var(--fs-p)
--fsp: var(--fsp1)
font-size: var(--fsp)
ul,ol
@ -40,7 +41,8 @@ table:not([class])
margin: 1rem 0
max-width: 100%
vertical-align: text-top
font-size: $fs-14
--fsp: var(--fsp2)
font-size: var(--fsp)
th
background: var(--block)
td,th

View File

@ -28,7 +28,7 @@
.sidebar-toggle.mobile
cursor: pointer
color: var(--text-p0)
color: var(--text)
background: none
padding: 8px
line-height: 0

View File

@ -5,6 +5,6 @@ input
input.copy-area
display: block
font-family: $ff-code
font-size: $fs-12
font-size: $fs-13
font-weight: 700
color: var(--text-p3)

View File

@ -15,13 +15,16 @@ h6
font-size: $fs-h6
//
.fs15
--fsp: $fs-15
font-size: var(--fsp)
.fs14
--fs-p: $fs-14
font-size: var(--fs-p)
--fsp: $fs-14
font-size: var(--fsp)
.footnote
--fs-p: $fs-13
font-size: var(--fs-p)
--fsp: $fs-13
font-size: var(--fsp)
.widgets
.post-title

View File

@ -66,8 +66,10 @@ $border-button = 4px
--width-left: 288px
--width-main: 720px
--fs-body: $fs-body
--fs-p: var(--fs-body)
--fs-p2: 'calc(%s * 0.9)' % $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
@ -89,7 +91,7 @@ $border-button = 4px
//
.l_body.story
--fs-p: 'calc(%s + 2px)' % $fs-body
--fsp: 'calc(%s + 2px)' % $fs-body
--gap-p: 1.5rem
.tag-plugin,p>img
margin-top: 2.4rem

View File

@ -42,7 +42,8 @@ $color-google-red = #E8453C
$c-red = #F44336
$c-orange = #FA6400
$c-yellow = #FFBD2B
$c-amber = #FFBD2B
$c-yellow = #f2e03d
$c-green = #3DC550
$c-cyan = #1BCDFC
$c-blue = #2196f3

View File

@ -15,7 +15,7 @@ $color-text-s = saturation($color-text)
$color-text-l = lightness($color-text)
set_text_dark()
--text-p0: hsl($color-text-h, $color-text-s, 0)
--text: hsl($color-text-h, $color-text-s, 0)
--text-p1: hsl($color-text-h, $color-text-s, $color-text-l)
--text-p2: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 0.75)
--text-p3: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 1.25)
@ -24,7 +24,7 @@ set_text_dark()
--text-code: hsl($color-code-h, $color-code-s, $color-code-l)
set_text_light()
--text-p0: hsl($color-text-h, $color-text-s, 100)
--text: hsl($color-text-h, $color-text-s, 100)
--text-p1: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 0.5)
--text-p2: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 0.75)
--text-p3: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 1.2)

View File

@ -3,7 +3,7 @@
margin: auto
padding: 0 var(--gap-l)
justify-content: center
font-size: var(--fs-p)
font-size: var(--fsp)
.l_body .l_left
z-index: 8

View File

@ -11,7 +11,7 @@
line-height: 1.2
font-size: $fs-h3
border-bottom: none
color: var(--text-p0)
color: var(--text)
trans1 color
@media screen and (max-width: $device-mobile)
font-size: $fs-h4
@ -106,7 +106,8 @@
position: absolute
line-height: 1.2
width: 'calc(100% - %s * 2)' % 1rem
color: var(--text-p0)
--text-banner: white
color: var(--text-banner)
&[position=top]
top: 0
background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0))

View File

@ -21,7 +21,7 @@
.l_body[text-indent] .md-text.content
>p
text-indent: 'calc(%s * 2)' % var(--fs-p)
text-indent: 'calc(%s * 2)' % var(--fsp)
text-align: convert(hexo-config('style.text-align'))
h1,h2,h3,h4,h5,h6
text-align: center
@ -37,7 +37,8 @@
margin: 0
blockquote,ul,ol
p,ul,ol
font-size: var(--fs-p2)
--fsp: var(--fsp1)
font-size: var(--fsp)
line-height: 1.5
code
font-size: inherit
@ -59,7 +60,7 @@
.md-text.content
h1,h2,h3,h4,h5,h6
margin-bottom: var(--gap-p)
color: var(--text-p0)
color: var(--text)
line-height: 1.8
blockquote, .tag-plugin
h2,h3,h4,h5,h6
@ -78,10 +79,12 @@
color: white
font-weight: 700
padding: 0 2px
font-size: $fs-12
h2
margin-top: 'calc(%s + 1rem)' % var(--gap-p)
border-bottom: 1px solid var(--block-border)
font-weight: 400
a.headerlink:before
content: ':'
h3
margin-top: 'calc(%s + 0.75rem)' % var(--gap-p)
font-weight: 400
@ -93,7 +96,7 @@
margin-top: 0
.md-text p
font-size: var(--fs-p)
font-size: var(--fsp)
.md-text pre
-webkit-font-smoothing: auto

View File

@ -34,7 +34,7 @@
color: var(--text-p4)
&:hover
border-bottom: 1px solid $color-theme
color: var(--text-p0)
color: var(--text)
time
color: $color-theme
@ -60,7 +60,7 @@
font-size: $fs-12
&:hover
background: var(--block-hover)
color: var(--text-p0)
color: var(--text)
.badge
opacity: 1
color: $color-theme
@ -90,5 +90,5 @@
&:before
color $color-theme
opacity: 1
color: var(--text-p0)
color: var(--text)
background: var(--block-hover)

View File

@ -1,15 +1,14 @@
.article.banner
--text-banner: var(--text-p0)
--button-hover-bg: rgba(black, 0.08)
--text-banner: var(--text)
background: var(--block)
margin: 0
height: unset
.article.banner
.bg+.content
min-height: 240px
--text-banner: white
--button-hover-bg: rgba(white, 0.2)
background: rgba(black, 0.1)
--button-hover-bg: rgba(white, 0.25)
.article.banner .content
.top
@ -41,6 +40,18 @@
-webkit-backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
&:hover
.bg+.content
--blur-bg: rgba(black, 0.2)
--blur-bg: rgba(black, 0.1)
--blur-px: 20px
--blur-sat: 150%
.article.banner
--button-hover-bg: rgba(black, 0.05)
set_darkmode()
.article.banner
--button-hover-bg: rgba(white, 0.15)
if hexo-config('style.darkmode') == 'auto'
@media (prefers-color-scheme: dark)
set_darkmode()
if hexo-config('style.darkmode') == 'always'
set_darkmode()

View File

@ -11,6 +11,7 @@
color: var(--text-p2)
font-size: $fs-h4
.body
--fsp: var(--fsp2)
input.copy-area
margin: 0.75rem 0
padding: 0
@ -24,9 +25,16 @@
margin: 0
overflow: hidden
.post-title
margin: 0.5rem 0
margin: 2px 0
line-height: 1.2
word-break: break-all
p
--fsp: var(--fsp2)
a
text-decoration: none
color: unset
&:hover
text-decoration: underline
section+section
margin-top: 1rem
padding-top: 1rem
@ -43,11 +51,15 @@
border-radius: 4px
box-shadow: 0 4px 8px 0px rgba(0, 0, 0, 0.1), 0 0 32px 0px rgba(0, 0, 0, 0.1)
overflow: hidden
trans1 height
trans1 all
height: 0
margin: 0 auto
transform: scale(0.01)
img
object-fit: contain
.md-text .article-footer .qrcode.display
margin: 2rem auto 1rem
height: 128px !important
visibility: visible !important
opacity: 1 !important
transform: scale(1)

View File

@ -16,13 +16,13 @@
flex-direction: column
justify-content: center
align-items: center
font-size: var(--fs-p)
font-size: var(--fsp)
.cover-title
font-weight: 700
font-size: 1.5rem
margin: 1rem 0
line-height: 1.2
color: var(--text-p0)
color: var(--text)
.description
margin: 1rem 0
.start-wrap

View File

@ -1,8 +1,8 @@
.page-footer
margin: 4rem 1rem 3rem
color: var(--text-p3)
color: var(--text-p2)
a
color: var(--text-p3)
color: var(--text-p2)
&:hover
color: $color-hover

View File

@ -21,10 +21,11 @@
left: 1rem
background: var(--block-hover)
nav.cap
nav.sub
display: flex
overflow: scroll visible
scrollbar(0, 0)
font-size: $fs-14
>p
margin: 0
a

View File

@ -31,7 +31,8 @@ article.md-text.content+.related-wrap
.title
color: var(--text-p1)
font-weight: 500
font-size: 1rem
--fsp: var(--fsp1)
font-size: var(--fsp)
trans2 color border
position: relative
padding-bottom: 2px
@ -39,7 +40,8 @@ article.md-text.content+.related-wrap
line-height: 1.6
.excerpt
color: var(--text-p3)
font-size: $fs-12
--fsp: var(--fsp3)
font-size: var(--fsp)
margin-top: 0.5rem
display: -webkit-box
-webkit-box-orient: vertical
@ -65,7 +67,7 @@ article.md-text.content+.related-wrap
padding: 1rem 0
.note
margin-bottom: 0.75rem
font-size: $fs-12
font-size: $fs-13
color: var(--text-p4)
font-weight: 500
a

View File

@ -64,7 +64,7 @@
display: block
position: relative
.main
color: var(--text-p0)
color: var(--text)
.sub
color: var(--text-p1)
trans2 opacity transform

View File

@ -12,7 +12,7 @@
transition: 0.38s ease-out
z-index: 0
border-radius: $border-bar
color: var(--text-p0)
color: var(--text)
background: var(--alpha50)
&:has(input:focus)
background: var(--alpha100)
@ -23,7 +23,7 @@
font-family: $ff-body
font-size: $fs-13
padding: 12px 0
color: var(--text-p0)
color: var(--text)
.search-button
border-radius: $border-bar
line-height: 40px
@ -80,6 +80,7 @@
.search-result-title
color: var(--text-p1)
font-weight: 700
font-size: $fs-15
.search-result-content
overflow: hidden
@ -87,7 +88,7 @@
margin: 4px 0 0
max-height: 13em
text-align: justify
font-size: $fs-12
font-size: $fs-13
display: -webkit-box
-webkit-box-orient: vertical
overflow: hidden

View File

@ -1,11 +1,11 @@
set_text_white()
--text-p0: white
--text: white
--text-p1: white
--text-p2: hsl(0 0 88%)
--text-p3: #ddd
--text-code: white
set_text_black()
--text-p0: black
--text: black
--text-p1: #111
--text-p2: hsl(0 0 12%)
--text-p3: #555
@ -16,7 +16,7 @@ set_dynamic_color($theme)
--theme-border: hsl(hue($theme), 50, 80)
--theme-block: hsl(hue($theme), 90, 92)
--theme-codeblock: hsl(hue($theme), 50, 95)
--text-p0: hsl(hue($theme), 55, 16)
--text: hsl(hue($theme), 55, 16)
--text-p1: hsl(hue($theme), 55, 20)
--text-p2: hsl(hue($theme), 90, 24)
@ -68,7 +68,7 @@ set_darkmode_tags()
--theme-border: hsl(hue($theme), 50, 24)
--theme-block: hsl(hue($theme), 16, 16)
--theme-codeblock: hsl(hue($theme), 12, 18)
--text-p0: hsl(hue($theme), 100, 85)
--text: hsl(hue($theme), 100, 85)
--text-p1: hsl(hue($theme), 50, 75)
--text-p2: hsl(hue($theme), 80, 72)
.tag-plugin.tag

View File

@ -7,6 +7,7 @@
border: 1px solid var(--block-border)
overflow: hidden
width: 100%
min-width: 200px
span
line-height: 3
padding: 0 1rem
@ -14,7 +15,7 @@
border-right: 1px solid var(--block-border)
color: var(--text-p3)
font-family: $ff-code
font-size: $fs-12
font-size: $fs-13
font-weight: 700
flex-shrink: 0
input.copy-area

View File

@ -1,6 +1,7 @@
.tag-plugin.folders
margin: var(--gap-p) 0
font-size: $fs-14
--fsp: var(--fsp2)
font-size: var(--fsp)
border-top: 1px solid var(--block-border)
overflow: hidden
.folder
@ -24,7 +25,7 @@
display: inline
border-bottom: none !important
&:hover
color: var(--text-p0)
color: var(--text)
&:after
position: absolute
content: '+'
@ -42,7 +43,7 @@
content: '-'
>div.body
font-size: $fs-15
--fsp: var(--fsp1)
>:first-child
margin-top: 1rem
>:last-child

View File

@ -11,7 +11,8 @@ details.folding
margin: -1rem
color: var(--text-p2)
font-weight: 500
font-size: $fs-14
--fsp: var(--fsp2)
font-size: var(--fsp)
position: relative
line-height: 1.2
outline: none
@ -22,7 +23,7 @@ details.folding
display: inline
border-bottom: none !important
&:hover
color: var(--text-p0)
color: var(--text)
&:after
position: absolute
content: '+'
@ -44,6 +45,7 @@ details.folding[open]
padding: 0 1rem 1rem
margin: 0 -1rem -1rem
color: var(--text-p1)
--fsp: var(--fsp1)
>:first-child
margin-top: 1rem
>:last-child

View File

@ -6,7 +6,8 @@
margin: 2px 0
display: inline-flex
align-items: center
font-size: $fs-13
--fsp: var(--fsp2)
font-size: var(--fsp)
font-weight: 500
trans2 background color
span

View File

@ -31,7 +31,7 @@
padding: 0.5rem 0
.image-caption
display: inline-block
font-size: $fs-12
font-size: $fs-13
color: var(--text-p2)
line-height: 1.5
text-align: justify

View File

@ -9,7 +9,7 @@
justify-content: space-between
align-items: center
cursor: pointer
width: 340px
width: 300px
max-width: 100%
box-shadow: $boxshadow-card
border-radius: $border-bar

View File

@ -2,4 +2,4 @@
padding: 1px 2px
border-radius: 2px
background: var(--theme-block)
color: var(--text-p0)
color: var(--text)

View File

@ -8,14 +8,16 @@
border: 1px solid var(--theme-border)
color: var(--text-p1)
>.title
font-size: $fs-15
--fsp: var(--fsp1)
font-size: var(--fsp)
line-height: 1.5
margin-top: var(--gap-p-compact)
font-weight: 500
color: var(--text-p0)
color: var(--text)
>.body
&,p
font-size: $fs-14
--fsp: var(--fsp2)
font-size: var(--fsp)
line-height: 1.5
margin-top: var(--gap-p-compact)
margin-bottom: var(--gap-p-compact)

View File

@ -5,11 +5,11 @@
.content
>.title
font-weight: 500
font-size: 1rem
margin-top: var(--gap-p)
>.meta
color: var(--text-p2)
font-size: $fs-12
--fsp: var(--fsp3)
font-size: var(--fsp)
font-weight: 500
span+span
margin-left: 4px
@ -17,13 +17,13 @@
margin: var(--gap-p) 0
border-top: 1px dashed var(--block-border)
border-bottom: 1px dashed var(--block-border)
p
font-size: $fs-14
line-height: 2
>.footer
font-style: italic
color: var(--text-p4)
margin: var(--gap-p) 0
font-size: $fs-12
--fsp: var(--fsp3)
font-size: var(--fsp)
//
.md-text .tag-plugin.poetry .content

View File

@ -33,7 +33,7 @@
margin-bottom: 0
p
font-size: $fs-h4
color: var(--text-p0)
color: var(--text)
// type=text
.md-text .tag-plugin.quot

View File

@ -42,7 +42,8 @@
display: block
cursor: pointer
padding: .25rem .75rem
font-size: $fs-13
--fsp: var(--fsp3)
font-size: var(--fsp)
line-height: inherit
font-weight: 500
color: var(--text-p3)
@ -83,6 +84,6 @@
width: 100%
.l_body[text-indent] .md-text .tag-plugin.tabs .tab-content .tab-pane>p:not([class])
text-indent: 'calc(%s * 2)' % var(--fs-p)
text-indent: 'calc(%s * 2)' % var(--fsp)
a
text-indent: 0

View File

@ -49,11 +49,11 @@
align-items: center
position: relative
margin: 0.25rem 0
font-size: $fs-12
font-size: $fs-13
.user-info
display: flex
align-items: center
font-size: $fs-12
font-size: $fs-13
font-weight: 500
color: var(--text-p1)
margin-right: 4px
@ -77,7 +77,7 @@
line-height: 1
p
margin: 0 !important
font-size: $fs-12 !important
font-size: $fs-13 !important
a
color: inherit
font-weight: inherit
@ -102,7 +102,7 @@
margin-top: 4px
box-shadow: $boxshadow-block
p
font-size: $fs-14
--fsp: var(--fsp1)
img
display: block
&:empty
@ -123,11 +123,12 @@
color: var(--text-p1)
line-height: 1.25
padding: 0.75rem 1rem
--fsp: var(--fsp1)
font-size: var(--fsp)
.tag-plugin.timeline[api] .body
p.title
font-size: 1rem
font-weight: 700
margin: 0.5rem 0 0.75rem
line-height: 1.25
@ -136,8 +137,22 @@
font-weight: 500
a
color: inherit
text-decoration: none
border-bottom: 2px solid $color-theme
trans1 all
&:hover
color: $color-hover
border-bottom: 2px solid $color-hover
p:first-child:not([class]) a:not([class])
padding: 0
margin: 0
color: inherit
text-decoration: none
border-bottom: 2px solid $color-theme
trans1 all
&:hover
border-bottom: 2px solid $color-hover
a
&:has(img):after
display: none
@ -146,7 +161,7 @@
img
margin: 0.5rem auto
pre code
font-size: $fs-12
font-size: $fs-13
.tag-plugin.timeline[api] .body .footer
margin: 0 0 -0.5rem
@ -165,7 +180,7 @@
.flex
display: flex
flex-wrap: wrap
font-size: $fs-12
font-size: $fs-13
align-items: stretch
.tag-plugin.timeline[api] .body .footer
@ -190,7 +205,7 @@
padding: 0 0.5rem
margin: 0.75rem 0
p
font-size: $fs-13
--fsp: var(--fsp2)
margin: 0.25rem
.tag-plugin.timeline .body

View File

@ -23,7 +23,7 @@
p.username
font-weight: 900
font-size: $fs-h2
color: var(--text-p0)
color: var(--text)
margin: 0
p.bio
font-size: $fs-13

View File

@ -6,8 +6,8 @@
a:not([class])
trans1 all
border-bottom: 1px solid var(--text-p0)
color: var(--text-p0)
border-bottom: 1px solid var(--text)
color: var(--text)
&:hover
color: $color-hover
border-bottom: 1px solid $color-hover

View File

@ -23,7 +23,7 @@
a
trans1 all
border-bottom: 1px solid var(--text-p0)
border-bottom: 1px solid var(--text)
color: var(--text-p1)
&:hover
color: $color-hover

View File

@ -1,8 +1,4 @@
.widget-wrapper.toc.single .widget-header
font-weight: 500
font-size: $fs-12
.toc-item
margin-top: 2px
.toc-child
@ -60,7 +56,7 @@
bottom: 'calc(50% - %s)' % 6px
width: 2px
border-radius: 2px
background: var(--text-p0)
background: var(--text)
visibility: hidden
&.active
background: var(--alpha50)

View File

@ -10,7 +10,7 @@
//
.widget-wrapper.toc.multi .doc-tree
border-radius: $border-card
border-radius: $border-bar
overflow: hidden
a.doc-tree-link
color: var(--text-p1)
@ -52,8 +52,8 @@
padding: 4px 10px
border: 1px solid var(--alpha50)
background: var(--alpha20)
border-bottom-left-radius: $border-card
border-bottom-right-radius: $border-card
border-bottom-left-radius: $border-bar
border-bottom-right-radius: $border-bar
a.toc-link:before
left: -7px
width: 4px

View File

@ -17,10 +17,10 @@
padding-right: var(--gap-l)
display: flex
justify-content: space-between
align-items: center
align-items: baseline
line-height: 28px
font-weight: 500
font-size: $fs-12
font-size: $fs-13
color: var(--text-p1)
.item
display: block

View File

@ -40,7 +40,7 @@ div.swiper-slide
border-radius: 40px
background: alpha(white, 0.25)
trans1 background
--swiper-theme-color: var(--text-p0) !important
--swiper-theme-color: var(--text) !important
&:after
font-size: 1.2rem !important
font-weight: 700 !important

View File

@ -6,7 +6,7 @@
--heo-theme-none: #4259ef01
--heo-background: var(--site-bg)
--heo-hovertext: var(--text-code)
--heo-secondtext: var(--text-p0)
--heo-secondtext: var(--text)
--heo-scrollbar: var(--block-border)
--heo-secondbg: var(--block)
--heo-card-bg: var(--block)
@ -70,7 +70,7 @@
.tianliGPT-suggestions .tianliGPT-suggestions-item:hover
background: $color-theme
color: var(--text-p0)
color: var(--text)
.blinking-cursor
background-color: var(--text-p2)