[opt] style

This commit is contained in:
xaoxuu 2024-02-02 00:36:01 +08:00
parent c5bb1c94c5
commit 52c9126d67
20 changed files with 99 additions and 100 deletions

View File

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

View File

@ -1,18 +1,19 @@
h1,.h1 h1,.h1
font-size: $fs-h1 font-size: var(--fsh2)
font-weight: 700 font-weight: 700
@media screen and (max-width: $device-mobile) @media screen and (max-width: $device-mobile)
font-size: $fs-h1 font-size: var(--fsh2)
h2,.h2 h2,.h2
font-size: $fs-h2 font-size: var(--fsh2)
margin-top: 1.5em
h3,.h3 h3,.h3
font-size: $fs-h3 font-size: var(--fsh3)
h4,.h4 h4,.h4
font-size: $fs-h4 font-size: var(--fsh4)
h5 h5
font-size: $fs-h5 font-size: 'calc(%s + 1px)' % var(--fsp)
h6 h6
font-size: $fs-h6 font-size: 'calc(%s + 0px)' % var(--fsp)
// //
.fs15 .fs15

View File

@ -44,16 +44,19 @@ $fs-14 = .875rem
$fs-13 = .8125rem $fs-13 = .8125rem
$fs-12 = .75rem $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-body = convert(hexo-config('style.font-size.body'))
$fs-code = convert(hexo-config('style.font-size.code')) $fs-code = convert(hexo-config('style.font-size.code'))
$fs-codeblock = convert(hexo-config('style.font-size.codeblock')) $fs-codeblock = convert(hexo-config('style.font-size.codeblock'))
$fsh1 = 'calc(%s + 11px)' % $fs-body
$fsh2 = 'calc(%s + 11px)' % $fs-body
$fsh3 = 'calc(%s + 7px)' % $fs-body
$fsh4 = 'calc(%s + 4px)' % $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 = convert(hexo-config('style.border-radius.card')) $border-card = convert(hexo-config('style.border-radius.card'))
$border-block = convert(hexo-config('style.border-radius.block')) $border-block = convert(hexo-config('style.border-radius.block'))
@ -65,11 +68,11 @@ $border-button = 4px
:root :root
--width-left: 288px --width-left: 288px
--width-main: 720px --width-main: 720px
--fs-body: $fs-body --fsp: $fs-body
--fsp: var(--fs-body) --fsh2: 'calc(%s + 11px)' % var(--fsp)
--fsp1: 'calc(%s - 1px)' % var(--fsp) --fsh3: 'calc(%s + 7px)' % var(--fsp)
--fsp2: 'calc(%s - 2px)' % var(--fsp) --fsh4: 'calc(%s + 4px)' % var(--fsp)
--fsp3: 'calc(%s - 3px)' % var(--fsp)
--gap-l: 16px --gap-l: 16px
--gap-p: 'calc(%s + 4px)' % $fs-body // gap for paragraph --gap-p: 'calc(%s + 4px)' % $fs-body // gap for paragraph
--gap-p-compact: 'calc(%s * 0.75)' % $fs-body --gap-p-compact: 'calc(%s * 0.75)' % $fs-body

View File

@ -9,12 +9,12 @@
font-weight: 500 font-weight: 500
margin: 1.25rem 0 .75rem 0 margin: 1.25rem 0 .75rem 0
line-height: 1.2 line-height: 1.2
font-size: $fs-h3 font-size: $fsh3
border-bottom: none border-bottom: none
color: var(--text) color: var(--text)
trans1 color trans1 color
@media screen and (max-width: $device-mobile) @media screen and (max-width: $device-mobile)
font-size: $fs-h4 font-size: $fsh4
margin: 0.5rem 0 margin: 0.5rem 0
.wiki .post-title .wiki .post-title
margin-top: 0.5rem margin-top: 0.5rem
@ -52,7 +52,7 @@
flex-wrap: wrap flex-wrap: wrap
margin: 0 margin: 0
line-height: 2 line-height: 2
--fsp: var(--fsp1) --fsp: $fsp1
font-size: var(--fsp) font-size: var(--fsp)
svg svg
height: 1em height: 1em
@ -127,18 +127,18 @@
color: unset color: unset
.title .title
font-weight: 500 font-weight: 500
font-size: $fs-h3 font-size: $fsh3
@media screen and (max-width: $device-mobile) @media screen and (max-width: $device-mobile)
padding: 1rem padding: 1rem
div+div div+div
margin-top: 2px margin-top: 2px
.title .title
font-size: $fs-h4 font-size: $fsh4
.cap .cap
font-size: $fs-12 font-size: $fs-12
h2 h2
margin: .25rem 0 margin: .25rem 0
font-size: $fs-h4 font-size: $fsh4
// wiki // wiki

View File

@ -22,13 +22,13 @@
.l_body[text-indent] .md-text.content .l_body[text-indent] .md-text.content
>p >p
text-indent: 'calc(%s * 2)' % var(--fsp) text-indent: 'calc(%s * 2)' % var(--fsp)
text-align: convert(hexo-config('style.text-align')) text-align: justify
h1,h2,h3,h4,h5,h6 h1,h2,h3,h4,h5,h6
text-align: center text-align: center
a.headerlink a.headerlink
display: none display: none
>h2:not([class]) h2
border-bottom: none margin: 2em 0 1.5em
.md-text .md-text
ul:not(:last-child), ul:not(:last-child),
@ -37,7 +37,7 @@
margin: 0 margin: 0
blockquote,ul,ol blockquote,ul,ol
p,ul,ol p,ul,ol
--fsp: var(--fsp1) --fsp: $fsp1
font-size: var(--fsp) font-size: var(--fsp)
line-height: 1.5 line-height: 1.5
code code
@ -59,7 +59,6 @@
// titles // titles
.md-text.content .md-text.content
h1,h2,h3,h4,h5,h6 h1,h2,h3,h4,h5,h6
margin-bottom: var(--gap-p)
color: var(--text) color: var(--text)
line-height: 1.8 line-height: 1.8
blockquote, .tag-plugin blockquote, .tag-plugin
@ -81,16 +80,9 @@
padding: 0 2px padding: 0 2px
font-size: $fs-12 font-size: $fs-12
h2 h2
margin-top: 'calc(%s + 1rem)' % var(--gap-p) font-weight: 500
font-weight: 400
a.headerlink:before a.headerlink:before
content: ':' content: ':'
h3
margin-top: 'calc(%s + 0.75rem)' % var(--gap-p)
font-weight: 400
h4,h5,h6
margin-top: 'calc(%s + 0.5rem)' % var(--gap-p)
font-weight: 500
.md-text.content:first-child .tag-plugin:first-child .md-text.content:first-child .tag-plugin:first-child
margin-top: 0 margin-top: 0

View File

@ -15,7 +15,7 @@
align-items: flex-start align-items: flex-start
margin: 1rem 'calc(1rem - 4px)' margin: 1rem 'calc(1rem - 4px)'
.title .title
font-size: $fs-h1 font-size: $fsh1
color: var(--text-banner) color: var(--text-banner)
.bottom .bottom
padding: 1.5rem 1rem padding: 1.5rem 1rem
@ -23,7 +23,8 @@
line-height: 1.2 line-height: 1.2
margin: 0 margin: 0
.l_body[text-indent] .article.banner .content .bottom
justify-content: center
// //

View File

@ -9,9 +9,9 @@
.header .header
font-weight: 500 font-weight: 500
color: var(--text-p2) color: var(--text-p2)
font-size: $fs-h4 font-size: $fsh4
.body .body
--fsp: var(--fsp2) --fsp: $fsp2
input.copy-area input.copy-area
margin: 0.75rem 0 margin: 0.75rem 0
padding: 0 padding: 0
@ -29,7 +29,7 @@
line-height: 1.2 line-height: 1.2
word-break: break-all word-break: break-all
p p
--fsp: var(--fsp2) --fsp: $fsp2
a a
text-decoration: none text-decoration: none
color: unset color: unset

View File

@ -31,7 +31,7 @@ article.md-text.content+.related-wrap
.title .title
color: var(--text-p1) color: var(--text-p1)
font-weight: 500 font-weight: 500
--fsp: var(--fsp1) --fsp: $fsp1
font-size: var(--fsp) font-size: var(--fsp)
trans2 color border trans2 color border
position: relative position: relative
@ -40,7 +40,7 @@ article.md-text.content+.related-wrap
line-height: 1.6 line-height: 1.6
.excerpt .excerpt
color: var(--text-p3) color: var(--text-p3)
--fsp: var(--fsp3) --fsp: $fsp3
font-size: var(--fsp) font-size: var(--fsp)
margin-top: 0.5rem margin-top: 0.5rem
display: -webkit-box display: -webkit-box
@ -74,7 +74,7 @@ article.md-text.content+.related-wrap
margin: 0 margin: 0
line-height: 1.2 line-height: 1.2
color: var(--text-p1) color: var(--text-p1)
font-size: $fs-h4 font-size: $fsh4
&:hover &:hover
color: $color-hover !important color: $color-hover !important
#next #next
@ -82,7 +82,7 @@ article.md-text.content+.related-wrap
.wiki+.related-wrap#read-next .wiki+.related-wrap#read-next
.item .item
a a
font-size: $fs-h3 font-size: $fsh3
&#prev a &#prev a
color: var(--text-p3) color: var(--text-p3)

View File

@ -18,29 +18,31 @@
background: var(--alpha100) background: var(--alpha100)
.search-input .search-input
width: 100% width: 100%
line-height: 16px
box-sizing: border-box box-sizing: border-box
font-family: $ff-body font-family: $ff-body
font-size: $fs-13 font-size: $fs-14
padding: 12px 0 padding: 12px 0
color: var(--text) color: var(--text)
.search-button .search-button
border-radius: $border-bar border-radius: $border-bar
line-height: 40px display: flex
.search-icon align-items: center
height: 40px
svg
width: 44px width: 44px
margin-left: 4px margin-left: 4px
color: var(--text-p2) color: var(--text-p2)
margin-bottom: 2px font-size: 16px
margin-top: 1px
path[p-id="1562"] path[p-id="1562"]
color: $color-theme color: $color-theme
&[searching='true'] &[searching='true']
.search-icon .search-button
path[p-id="1562"] path[p-id="1562"]
color: $c-green color: $c-green
&.noresult[searching='true'] &.noresult[searching='true']
.search-icon .search-button
path[p-id="1562"] path[p-id="1562"]
color: $c-red color: $c-red

View File

@ -1,6 +1,6 @@
.tag-plugin.folders .tag-plugin.folders
margin: var(--gap-p) 0 margin: var(--gap-p) 0
--fsp: var(--fsp2) --fsp: $fsp2
font-size: var(--fsp) font-size: var(--fsp)
border-top: 1px solid var(--block-border) border-top: 1px solid var(--block-border)
overflow: hidden overflow: hidden
@ -43,7 +43,7 @@
content: '-' content: '-'
>div.body >div.body
--fsp: var(--fsp1) --fsp: $fsp1
>:first-child >:first-child
margin-top: 1rem margin-top: 1rem
>:last-child >:last-child

View File

@ -11,7 +11,7 @@ details.folding
margin: -1rem margin: -1rem
color: var(--text-p2) color: var(--text-p2)
font-weight: 500 font-weight: 500
--fsp: var(--fsp2) --fsp: $fsp2
font-size: var(--fsp) font-size: var(--fsp)
position: relative position: relative
line-height: 1.2 line-height: 1.2
@ -45,7 +45,7 @@ details.folding[open]
padding: 0 1rem 1rem padding: 0 1rem 1rem
margin: 0 -1rem -1rem margin: 0 -1rem -1rem
color: var(--text-p1) color: var(--text-p1)
--fsp: var(--fsp1) --fsp: $fsp1
>:first-child >:first-child
margin-top: 1rem margin-top: 1rem
>:last-child >:last-child

View File

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

View File

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

View File

@ -8,7 +8,7 @@
margin-top: var(--gap-p) margin-top: var(--gap-p)
>.meta >.meta
color: var(--text-p2) color: var(--text-p2)
--fsp: var(--fsp3) --fsp: $fsp3
font-size: var(--fsp) font-size: var(--fsp)
font-weight: 500 font-weight: 500
span+span span+span
@ -22,7 +22,7 @@
font-style: italic font-style: italic
color: var(--text-p4) color: var(--text-p4)
margin: var(--gap-p) 0 margin: var(--gap-p) 0
--fsp: var(--fsp3) --fsp: $fsp3
font-size: var(--fsp) font-size: var(--fsp)
// //

View File

@ -3,17 +3,17 @@
align-items: center align-items: center
display: flex display: flex
flex-direction: column flex-direction: column
--gap-p: 2rem
.content .content
display: flex display: flex
align-items: center align-items: center
border-bottom: none border-bottom: none
font-weight: 700 font-weight: 700
padding: 16px 24px padding: 0 24px
a.headerlink a.headerlink
display: none display: none
@media screen and (max-width: $device-mobile) @media screen and (max-width: $device-mobile)
padding: 12px 20px padding: 0 20px
line-height: 1.2 line-height: 1.2
.md-text .tag-plugin.quot .content .md-text .tag-plugin.quot .content
@ -21,18 +21,16 @@
position: relative position: relative
// override // override
.md-text.content .tag-plugin.quot .md-text.content .tag-plugin.quot
h1 h1,h2
font-size: $fs-h1 font-size: $fsh2
font-weight: 900 font-weight: 900
padding: 20px 32px 12px 32px padding: 4px 32px 0
@media screen and (max-width: $device-mobile) @media screen and (max-width: $device-mobile)
padding: 20px 24px 12px padding: 4px 24px 0
h2,h3,h4,h5,h6 h3,h4,h5,h6
font-size: $fs-h3 font-size: $fsh3
margin-top: 1em
margin-bottom: 0
p p
font-size: $fs-h4 --fsp: $fsh4
color: var(--text) color: var(--text)
// type=text // type=text
@ -44,13 +42,13 @@
width: 8px width: 8px
height: 14px height: 14px
&:before &:before
top: 8px top: -8px
left: 0 left: 0
border-top: 6px solid $color-accent border-top: 6px solid $color-accent
border-left: 6px solid $color-accent border-left: 6px solid $color-accent
&:after &:after
right: 0 right: 0
bottom: 8px bottom: -8px
border-right: 6px solid $color-accent border-right: 6px solid $color-accent
border-bottom: 6px solid $color-accent border-bottom: 6px solid $color-accent
h1.content[type=text] h1.content[type=text]

View File

@ -42,7 +42,7 @@
display: block display: block
cursor: pointer cursor: pointer
padding: .25rem .75rem padding: .25rem .75rem
--fsp: var(--fsp3) --fsp: $fsp3
font-size: var(--fsp) font-size: var(--fsp)
line-height: inherit line-height: inherit
font-weight: 500 font-weight: 500

View File

@ -1,6 +1,5 @@
.md-text .tag-plugin.timeline .md-text .tag-plugin.timeline
position: relative position: relative
margin-top: 0
padding-left: 16px padding-left: 16px
&:before &:before
content: '' content: ''
@ -102,7 +101,7 @@
margin-top: 4px margin-top: 4px
box-shadow: $boxshadow-block box-shadow: $boxshadow-block
p p
--fsp: var(--fsp1) --fsp: $fsp1
img img
display: block display: block
&:empty &:empty
@ -123,7 +122,7 @@
color: var(--text-p1) color: var(--text-p1)
line-height: 1.25 line-height: 1.25
padding: 0.75rem 1rem padding: 0.75rem 1rem
--fsp: var(--fsp1) --fsp: $fsp1
font-size: var(--fsp) font-size: var(--fsp)
@ -142,7 +141,7 @@
trans1 all trans1 all
&:hover &:hover
border-bottom: 2px solid $color-hover border-bottom: 2px solid $color-hover
p:first-child:not([class]) a:not([class]) >p:first-child:not([class]) a:not([class])
padding: 0 padding: 0
margin: 0 margin: 0
color: inherit color: inherit
@ -205,7 +204,7 @@
padding: 0 0.5rem padding: 0 0.5rem
margin: 0.75rem 0 margin: 0.75rem 0
p p
--fsp: var(--fsp2) --fsp: $fsp2
margin: 0.25rem margin: 0.25rem
.tag-plugin.timeline .body .tag-plugin.timeline .body

View File

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

View File

@ -1,6 +1,15 @@
.widget-wrapper.timeline .widget-wrapper.timeline
.widget-body .widget-body
margin-top: 0.5rem margin-top: 0.5rem
.body
a
trans1 all
border-bottom: 1px solid var(--text)
color: var(--text-p1)
--fsp: $fsp2
&:hover
color: $color-hover
border-bottom: 1px solid $color-hover
.tag-plugin.timeline .timenode .tag-plugin.timeline .timenode
.header .header
margin: 0.5rem 16px margin: 0.5rem 16px
@ -20,14 +29,8 @@
border-radius: $border-card border-radius: $border-card
background: var(--alpha50) background: var(--alpha50)
box-shadow: none box-shadow: none
p,li
a --fsp: $fsp3
trans1 all
border-bottom: 1px solid var(--text)
color: var(--text-p1)
&:hover
color: $color-hover
border-bottom: 1px solid $color-hover
code code
background: none background: none
padding: 0 padding: 0

View File

@ -36,7 +36,7 @@
trans2: opacity background trans2: opacity background
border-radius: 4px border-radius: 4px
padding: 6px padding: 6px
margin-right: -5px margin-right: -6px
svg svg
height: 1em height: 1em
width: auto width: auto