biss/hexo-theme-butterfly
1
0
Fork 0
mirror of https://github.com/jerryc127/hexo-theme-butterfly.git synced 2026-04-10 21:17:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

breaking changes: 移除 html 的 font-size 改為瀏覽器默認大小

Browse Source 
feat: 為文章單獨設置 TOC simple_style 顯示 closed #631
feat: page 頁頂部圖增加黑色遮罩 closed #671
feat: 首頁 pagination 更新 UI
fix: 修復使用本地搜索時，搜索插件配置為不搜索文章內容會無法使用搜索 的 bug
fix: 修復開啟 photofigcaption 後，導致inlineImg標籤外掛顯示錯亂的 bug
fix: 修復 字體過大/過小而導致 部分 ui 偏移的 bug
improvement: 主題 css 使用的 rem 改為 em 或 px
improvement: 修改没有顶部图下，文章页的标题大小 closed #669
improvement: 代碼優化
This commit is contained in:
Jerry
2021-09-20 17:55:20 +08:00
parent 484f036adb
commit 3708fdf569
42 changed files with 387 additions and 425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
_config.yml
View File

@@ -171,7 +171,7 @@ toc:
post: true post: true
page: false page: false
number: true number: true
style_simple: false style_simple: false # for post
post_copyright: post_copyright:
enable: true enable: true

19
layout/includes/mixins/post-ui.pug
View File

@@ -1,14 +1,19 @@
mixin postUI(posts) mixin postUI(posts)
each article , index in page.posts.data each article , index in page.posts.data
.recent-post-item .recent-post-item
- let link = article.link || article.path -
- let title = article.title || _p('no_title') let link = article.link || article.path
- let leftOrRight = index%2 == 0 ? 'left_radius' : 'right_radius' let title = article.title || _p('no_title')
- let post_cover = article.cover const position = theme.cover.position
- let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : '' let leftOrRight = position === 'both'
? index%2 == 0 ? 'left' : 'right'
: position === 'left' ? 'left' : 'right'
let post_cover = article.cover
let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
-
if post_cover && theme.cover.index_enable if post_cover && theme.cover.index_enable
.post_cover(class=leftOrRight) .post_cover(class=leftOrRight)
a(href=url_for(link) title=title) a(href=url_for(link) title=title)
img.post_bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` alt=title) img.post_bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` alt=title)
.recent-post-info(class=no_cover) .recent-post-info(class=no_cover)
a.article-title(href=url_for(link) title=title)= title a.article-title(href=url_for(link) title=title)= title
@@ -20,7 +25,7 @@ mixin postUI(posts)
span.article-meta__separator | span.article-meta__separator |
if (theme.post_meta.page.date_type) if (theme.post_meta.page.date_type)
span.post-meta-date span.post-meta-date
if (theme.post_meta.page.date_type === 'both') if (theme.post_meta.page.date_type === 'both')
i.far.fa-calendar-alt i.far.fa-calendar-alt
span.article-meta-label=_p('post.created') span.article-meta-label=_p('post.created')
time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date))=date(article.date, config.date_format) time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date))=date(article.date, config.date_format)

1
layout/includes/widget/card_post_toc.pug
View File

@@ -4,6 +4,7 @@
.item-headline .item-headline
i.fas.fa-stream i.fas.fa-stream
span= _p('aside.card_toc') span= _p('aside.card_toc')
span.toc-percentage
if (page.encrypt == true) if (page.encrypt == true)
.toc-content.toc-div-class(style="display:none")!=toc(page.origin, {list_number: tocNumber}) .toc-content.toc-div-class(style="display:none")!=toc(page.origin, {list_number: tocNumber})

4
layout/includes/widget/index.pug
View File

@@ -1,7 +1,9 @@
#aside-content.aside-content #aside-content.aside-content
//- post //- post
if is_post() if is_post()
if showToc && theme.toc.style_simple - const tocStyle = page.style_simple
- const tocStyleVal = tocStyle === true || tocStyle === false ? tocStyle : theme.toc.style_simple
if showToc && tocStyleVal
.sticky_layout .sticky_layout
include ./card_post_toc.pug include ./card_post_toc.pug
else else

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "hexo-theme-butterfly", "name": "hexo-theme-butterfly",
"version": "4.0.0-b5", "version": "4.0.0-b6",
"description": "A Simple and Card UI Design theme for Hexo", "description": "A Simple and Card UI Design theme for Hexo",
"main": "package.json", "main": "package.json",
"scripts": { "scripts": {

14
source/css/_global/function.styl
View File

@@ -17,6 +17,16 @@
text-rendering: auto text-rendering: auto
-webkit-font-smoothing: antialiased -webkit-font-smoothing: antialiased
// card hover
.cardHover
border-radius: 8px
background: var(--card-bg)
box-shadow: var(--card-box-shadow)
transition: all .3s
&:hover
box-shadow: var(--card-hover-box-shadow)
maxWidth600() maxWidth600()
@media screen and (max-width: 600px) @media screen and (max-width: 600px)
{block} {block}
@@ -123,12 +133,12 @@ if hexo-config('avatar.effect') == true
@keyframes bottom-top @keyframes bottom-top
0% 0%
opacity: 0
margin-top: 50px margin-top: 50px
opacity: 0
100% 100%
opacity: 1
margin-top: 0 margin-top: 0
opacity: 1
@keyframes titlescale @keyframes titlescale
0% 0%

32
source/css/_global/index.styl
View File

@@ -30,10 +30,6 @@
--card-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .05) --card-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .05)
--card-hover-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .09) --card-hover-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .09)
html
height: 100%
font-size: 20px
body body
position: relative position: relative
min-height: 100% min-height: 100%
@@ -79,7 +75,7 @@ h4,
h5, h5,
h6 h6
position: relative position: relative
margin: 1rem 0 .7rem margin: 20px 0 14px
color: var(--text-highlight-color) color: var(--text-highlight-color)
font-weight: bold font-weight: bold
@@ -91,7 +87,7 @@ h6
hr hr
position: relative position: relative
margin: 2rem auto margin: 40px auto
border: 2px dashed var(--hr-border) border: 2px dashed var(--hr-border)
if hexo-config('hr_icon.enable') if hexo-config('hr_icon.enable')
@@ -115,7 +111,7 @@ hr
.table-wrap .table-wrap
overflow-x: scroll overflow-x: scroll
margin: 0 0 1rem margin: 0 0 20px
table table
display: table display: table
@@ -129,7 +125,7 @@ table
th, th,
td td
padding: .3rem .6rem padding: 6px 12px
border: 1px solid var(--light-grey) border: 1px solid var(--light-grey)
vertical-align: middle vertical-align: middle
@@ -213,8 +209,24 @@ if hexo-config('lazyload.enable') && hexo-config('lazyload.blur') && !hexo-confi
filter: none filter: none
.img-alt .img-alt
margin: -.5rem 0 .5rem margin: -10px 0 10px
color: #858585 color: #858585
&:hover &:hover
text-decoration: none !important text-decoration: none !important
blockquote
margin: 0 0 20px
padding: 12px 15px
border-left: 3px solid $blockquote-padding-color
background-color: var(--blockquote-bg)
color: var(--blockquote-color)
footer
cite
&:before
padding: 0 5px
content: '—'
& > :last-child
margin-bottom: 0 !important

52
source/css/_highlight/highlight.styl
View File

@@ -23,7 +23,7 @@ if $prismjsEnable
$code-block $code-block
overflow: auto overflow: auto
margin: 0 0 1rem margin: 0 0 20px
padding: 0 padding: 0
background: var(--hl-bg) background: var(--hl-bg)
color: var(--hl-color) color: var(--hl-color)
@@ -33,28 +33,6 @@ $code-block
counter-reset: line counter-reset: line
white-space: pre-wrap white-space: pre-wrap
blockquote
margin: 0 0 1rem
padding: .1rem .8rem
border-left: .2rem solid $blockquote-padding-color
background-color: var(--blockquote-bg)
color: var(--blockquote-color)
a
word-break: break-all
p
margin: 0 !important
padding: .5rem 0
footer
padding: 0 0 .5rem
cite
&:before
padding: 0 .3em
content: '—'
#article-container #article-container
pre, pre,
code code
@@ -62,7 +40,7 @@ blockquote
font-family: $code-font-family !important font-family: $code-font-family !important
code code
padding: .1rem .2rem padding: 2px 4px
background: $code-background background: $code-background
color: $code-foreground color: $code-foreground
@@ -87,7 +65,7 @@ blockquote
figcaption, figcaption,
.caption .caption
padding: .3rem 0 .1rem .7rem padding: 6px 0 2px 14px
font-size: $code-font-size font-size: $code-font-size
line-height: 1em line-height: 1em
@@ -104,7 +82,7 @@ blockquote
display: flex display: flex
align-items: center align-items: center
overflow: hidden overflow: hidden
min-height: 1.2rem min-height: 24px
height: 2.15em height: 2.15em
background: var(--hltools-bg) background: var(--hltools-bg)
color: var(--hltools-color) color: var(--hltools-color)
@@ -115,12 +93,12 @@ blockquote
.expand .expand
position: absolute position: absolute
padding: .4rem .7rem padding: .57em .7em
cursor: pointer cursor: pointer
transition: transform .3s transition: transform .3s
& + .code-lang & + .code-lang
left: 1.7rem left: 1.6em
&.closed &.closed
transition: all .3s transition: all .3s
@@ -128,7 +106,7 @@ blockquote
.code-lang .code-lang
position: absolute position: absolute
left: .7rem left: 14px
text-transform: uppercase text-transform: uppercase
font-weight: bold font-weight: bold
font-size: 1.15em font-size: 1.15em
@@ -136,13 +114,13 @@ blockquote
.copy-notice .copy-notice
position: absolute position: absolute
right: 1.7rem right: 2.1em
opacity: 0 opacity: 0
transition: opacity .4s transition: opacity .4s
.copy-button .copy-button
position: absolute position: absolute
right: .7rem right: 14px
cursor: pointer cursor: pointer
transition: color .2s transition: color .2s
@@ -160,7 +138,7 @@ blockquote
if $highlight_theme == 'mac' || ($highlight_theme == 'mac light') if $highlight_theme == 'mac' || ($highlight_theme == 'mac light')
figure.highlight figure.highlight
margin: 0 0 1.2rem margin: 0 0 24px
border-radius: 7px border-radius: 7px
box-shadow: 0 5px 10px 0 $highlight-mac-border box-shadow: 0 5px 10px 0 $highlight-mac-border
-webkit-transform: translateZ(0) -webkit-transform: translateZ(0)
@@ -168,7 +146,7 @@ blockquote
.highlight-tools .highlight-tools
&:after &:after
position: absolute position: absolute
left: .7rem left: 14px
width: 12px width: 12px
height: 12px height: 12px
border-radius: 50% border-radius: 50%
@@ -184,13 +162,13 @@ blockquote
transform: rotate(90deg) !important transform: rotate(90deg) !important
& ~ .copy-notice & ~ .copy-notice
right: 2.8rem right: 3.3em
& ~ .copy-button & ~ .copy-button
right: 1.8rem right: 2.1em
.code-lang .code-lang
left: 3.8rem !important left: 75px
if hexo-config('highlight_height_limit') if hexo-config('highlight_height_limit')
.code-expand-btn .code-expand-btn
@@ -204,7 +182,7 @@ blockquote
cursor: pointer cursor: pointer
i i
padding: .3rem 0 padding: 6px 0
color: var(--hlnumber-color) color: var(--hlnumber-color)
animation: code-expand-key 1.2s infinite animation: code-expand-key 1.2s infinite

12
source/css/_highlight/highlight/index.styl
View File

@@ -7,8 +7,8 @@ if $highlight_theme != false
if wordWrap if wordWrap
&:before &:before
display: inline-block display: inline-block
padding: 0 .3rem 0 0 padding: 0 6px 0 0
min-width: 1.6rem min-width: 30px
color: var(--hlnumber-color) color: var(--hlnumber-color)
content: counter(line) content: counter(line)
counter-increment: line counter-increment: line
@@ -27,13 +27,13 @@ if $highlight_theme != false
border: none border: none
.gutter pre .gutter pre
padding-right: .5rem padding-right: 10px
padding-left: .5rem padding-left: 10px
background-color: var(--hlnumber-bg) background-color: var(--hlnumber-bg)
color: var(--hlnumber-color) color: var(--hlnumber-color)
text-align: right text-align: right
.code pre .code pre
padding-right: .5rem padding-right: 10px
padding-left: .5rem padding-left: 10px
width: 100% width: 100%

2
source/css/_highlight/prismjs/index.styl
View File

@@ -14,7 +14,7 @@ if $highlight_theme != false
.caption .caption
margin-left: -3.8em margin-left: -3.8em
padding: .2rem .8rem !important padding: 4px 16px !important
a a
padding: 0 !important padding: 0 !important

6
source/css/_highlight/theme.styl
View File

@@ -11,7 +11,7 @@ if $highlight_theme == 'darker' || ($highlight_theme == 'mac')
color: alpha($highlight-foreground, .8), color: alpha($highlight-foreground, .8),
bg-color: darken($highlight-background, 2) bg-color: darken($highlight-background, 2)
} }
$highlight-scrollbar = darken($highlight-background, 6) $highlight-scrollbar = lighten($highlight-background, 8)
if $highlighEnable if $highlighEnable
$highlight-comment = #969896 $highlight-comment = #969896
@@ -37,7 +37,7 @@ if $highlight_theme == 'pale night'
color: $highlight-foreground, color: $highlight-foreground,
bg-color: darken($highlight-background, 2) bg-color: darken($highlight-background, 2)
} }
$highlight-scrollbar = darken($highlight-background, 6) $highlight-scrollbar = lighten($highlight-background, 8)
if $highlighEnable if $highlighEnable
$highlight-comment = #676E95 $highlight-comment = #676E95
@@ -63,7 +63,7 @@ if $highlight_theme == 'ocean'
color: $highlight-foreground, color: $highlight-foreground,
bg-color: darken($highlight-background, 2) bg-color: darken($highlight-background, 2)
} }
$highlight-scrollbar = darken($highlight-foreground, 40) $highlight-scrollbar = lighten($highlight-background, 8)
if $highlighEnable if $highlighEnable
$highlight-comment = rgba(101, 115, 126, .8) $highlight-comment = rgba(101, 115, 126, .8)

74
source/css/_layout/aside.styl
View File

@@ -14,20 +14,14 @@
margin-top: 0 margin-top: 0
+maxWidth900() +maxWidth900()
margin-top: 1rem margin-top: 20px
.card-widget .card-widget
@extend .cardHover
position: relative position: relative
overflow: hidden overflow: hidden
margin-top: 1rem margin-top: 20px
padding: 1rem 1.2rem padding: 20px 24px
border-radius: 8px
background: var(--card-bg)
box-shadow: var(--card-box-shadow)
transition: box-shadow .3s
&:hover
box-shadow: var(--card-hover-box-shadow)
if hexo-config('aside.mobile') == false if hexo-config('aside.mobile') == false
+maxWidth768() +maxWidth768()
@@ -41,11 +35,11 @@
font-size: 1.57em font-size: 1.57em
&__description &__description
margin-top: -.3rem margin-top: -.42em
.card-info-data .card-info-data
display: table display: table
margin: .7rem 0 .2rem margin: 14px 0 4px
width: 100% width: 100%
table-layout: fixed table-layout: fixed
@@ -59,18 +53,17 @@
font-size: 1em font-size: 1em
.length-num .length-num
margin-top: -.3rem margin-top: -.42em
color: var(--text-highlight-color) color: var(--text-highlight-color)
font-size: 1.4em font-size: 1.4em
.card-info-social-icons .card-info-social-icons
margin: .3rem 0 -.3rem margin: 6px 0 -6px
.social-icon .social-icon
margin: 0 .5rem margin: 0 10px
color: var(--font-color) color: var(--font-color)
font-size: 1.4em font-size: 1.4em
cursor: pointer
i i
transition: all .3s transition: all .3s
@@ -80,21 +73,21 @@
#card-info-btn #card-info-btn
display: block display: block
margin-top: .7rem margin-top: 14px
background-color: var(--btn-bg) background-color: var(--btn-bg)
color: var(--btn-color) color: var(--btn-color)
text-align: center text-align: center
line-height: 2.4 line-height: 2.4
span span
padding-left: .5rem padding-left: 10px
.item-headline .item-headline
padding-bottom: .3rem padding-bottom: 6px
font-size: 1.2em font-size: 1.2em
span span
margin-left: .3rem margin-left: 6px
.sticky_layout .sticky_layout
+minWidth900() +minWidth900()
@@ -106,7 +99,7 @@
.card-tag-cloud .card-tag-cloud
a a
display: inline-block display: inline-block
padding: 0 .2rem padding: 0 4px
&:hover &:hover
color: $text-hover !important color: $text-hover !important
@@ -114,13 +107,13 @@
.aside-list .aside-list
& > span & > span
display: block display: block
margin-bottom: .5rem margin-bottom: 10px
text-align: center text-align: center
& > .aside-list-item & > .aside-list-item
display: flex display: flex
align-items: center align-items: center
padding: .3rem 0 padding: 6px 0
&:first-child &:first-child
padding-top: 0 padding-top: 0
@@ -184,13 +177,13 @@
.card-categories ul.card-category-list > .card-category-list-item .card-categories ul.card-category-list > .card-category-list-item
a a
display: inline-block display: inline-block
padding: .15rem .5rem padding: 3px 10px
width: 100% width: 100%
color: var(--font-color) color: var(--font-color)
transition: all .4s transition: all .4s
&:hover &:hover
padding: .15rem .85rem padding: 3px 17px
background-color: var(--text-bg-hover) background-color: var(--text-bg-hover)
span span
@@ -208,7 +201,7 @@
.card-categories .card-categories
.card-category-list .card-category-list
&.child &.child
padding: 0 0 0 .8rem padding: 0 0 0 16px
> .parent > .parent
> a > a
@@ -222,8 +215,8 @@
i i
float: right float: right
margin-right: -.35rem margin-right: -.5em
padding: .35rem padding: .5em
transition: transform .3s transition: transform .3s
transform: rotate(0) transform: rotate(0)
@@ -239,12 +232,12 @@
.webinfo-item .webinfo-item
display: flex display: flex
align-items: center align-items: center
padding: .1rem .5rem 0 padding: 2px 10px 0
div div
&:first-child &:first-child
flex: 1 flex: 1
padding-right: 1rem padding-right: 20px
// toc // toc
#card-toc #card-toc
@@ -261,7 +254,15 @@
opacity: 0 opacity: 0
transform-origin: right bottom transform-origin: right bottom
.toc-percentage
float: right
margin-top: -9px
color: #a9a9a9
font-style: italic
font-size: 140%
.toc-content .toc-content
clear: both
overflow-y: auto overflow-y: auto
max-height: calc(100vh - 120px) max-height: calc(100vh - 120px)
@@ -288,11 +289,11 @@
ol ol
margin: 0 margin: 0
padding-left: .4rem padding-left: 15px
.toc-link .toc-link
display: block display: block
padding-left: .3rem padding-left: 6px
border-left: 3px solid transparent border-left: 3px solid transparent
color: var(--toc-link-color) color: var(--toc-link-color)
transition: all .2s ease-in-out transition: all .2s ease-in-out
@@ -302,15 +303,6 @@
background: $theme-toc-color background: $theme-toc-color
color: $toc-active-color color: $toc-active-color
&:before
position: absolute
top: .6rem
right: 1.2rem
color: #a9a9a9
content: attr(progress-percentage)
font-style: italic
font-size: 1.2rem
:only-child :only-child
> .card-widget > .card-widget
margin-top: 0 margin-top: 0

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

@@ -1,6 +1,6 @@
#post-comment #post-comment
.comment-head .comment-head
margin-bottom: 1rem margin-bottom: 20px
.comment-headline .comment-headline
display: inline-block display: inline-block
@@ -13,8 +13,8 @@
if hexo-config('comments.text') if hexo-config('comments.text')
float: right float: right
margin: .1rem auto 0 margin: 2px auto 0
padding: .2rem .8rem padding: 4px 16px
width: max-content width: max-content
border-radius: 8px border-radius: 8px
background: $comments-switch-bg background: $comments-switch-bg
@@ -33,7 +33,7 @@
.switch-btn .switch-btn
position: relative position: relative
display: inline-block display: inline-block
margin: -4px .4rem 0 margin: -4px 8px 0
width: 42px width: 42px
height: 22px height: 22px
border-radius: 34px border-radius: 34px

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

@@ -15,7 +15,7 @@
#footer-wrap #footer-wrap
position: relative position: relative
padding: 2rem 1rem padding: 40px 20px
color: var(--light-grey) color: var(--light-grey)
text-align: center text-align: center
@@ -26,10 +26,10 @@
text-decoration: underline text-decoration: underline
.footer-separator .footer-separator
margin: 0 .2rem margin: 0 4px
.icp-icon .icp-icon
padding: 0 4px padding: 0 4px
vertical-align: text-bottom
max-height: 1.4em max-height: 1.4em
width auto width: auto
vertical-align: text-bottom

85
source/css/_layout/head.styl
View File

@@ -7,6 +7,13 @@
background-repeat: no-repeat background-repeat: no-repeat
transition: all .5s transition: all .5s
&:not(.not-top-img):before
position: absolute
width: 100%
height: 100%
background-color: alpha($dark-black, .3)
content: ''
// index // index
&.full_page &.full_page
height: $index_top_img_height height: $index_top_img_height
@@ -15,14 +22,14 @@
#site-info #site-info
position: absolute position: absolute
top: $index_site_info_top top: $index_site_info_top
padding: 0 .5rem padding: 0 10px
width: 100% width: 100%
#site-title, #site-title,
#site-subtitle, #site-subtitle,
#scroll-down .scroll-down-effects #scroll-down .scroll-down-effects
text-align: center text-align: center
text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15) text-shadow: 2px 2px 4px rgba(0, 0, 0, .15)
line-height: 1.5 line-height: 1.5
#site-title #site-title
@@ -43,18 +50,17 @@
#site_social_icons #site_social_icons
display: none display: none
margin: 0 auto margin: 0 auto
width: 15rem width: 300px
text-align: center text-align: center
+maxWidth768() +maxWidth768()
display: block display: block
.social-icon .social-icon
margin: 0 .5rem margin: 0 10px
color: var(--light-grey) color: var(--light-grey)
text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15) text-shadow: 2px 2px 4px rgba(0, 0, 0, .15)
font-size: 1.43em font-size: 1.43em
cursor: pointer
#scroll-down #scroll-down
position: absolute position: absolute
@@ -70,54 +76,47 @@
// page // page
&.not-home-page &.not-home-page
height: 20rem height: 400px
+maxWidth768() +maxWidth768()
height: 14rem height: 280px
#page-site-info #page-site-info
position: absolute position: absolute
top: 10rem top: 200px
padding: 0 .5rem padding: 0 10px
width: 100% width: 100%
+maxWidth768() +maxWidth768()
top: 7rem top: 140px
// post // post
&.post-bg &.post-bg
height: 20rem height: 400px
+maxWidth768() +maxWidth768()
height: 18rem height: 360px
&:before &:before
position: absolute
top: 0
left: 0
display: block
width: 100%
height: 100%
background-color: alpha($dark-black, .5) background-color: alpha($dark-black, .5)
content: ''
#post-info #post-info
position: absolute position: absolute
bottom: 5rem bottom: 100px
padding: 0 8% padding: 0 8%
width: 100% width: 100%
text-align: center text-align: center
+maxWidth900() +maxWidth900()
bottom: 1.5rem bottom: 30px
text-align: left text-align: left
+maxWidth768() +maxWidth768()
bottom: 1.1rem bottom: 22px
padding: 0 1.1rem padding: 0 22px
&.not-top-img &.not-top-img
margin-bottom: .5rem margin-bottom: 10px
height: 60px height: 60px
background: 0 background: 0
@@ -157,21 +156,17 @@
top: 70px top: 70px
transition: top .5s transition: top .5s
.apple
#page-header.full_page
background-attachment: scroll !important
#page #page
h1.page-title h1.page-title
margin: .4rem 0 1rem margin: 8px 0 20px
// for not top_img // for not top_img
#post #post
& > #post-info & > #post-info
margin-bottom: 1.5rem margin-bottom: 30px
.post-title .post-title
padding-bottom: .2rem padding-bottom: 4px
border-bottom: 1px solid var(--light-grey) border-bottom: 1px solid var(--light-grey)
color: var(--text-highlight-color) color: var(--text-highlight-color)
@@ -185,7 +180,7 @@
#post-info #post-info
.post-title .post-title
@extend .limit-more-line @extend .limit-more-line
margin-bottom: .4rem margin-bottom: 8px
color: var(--white) color: var(--white)
font-weight: normal font-weight: normal
font-size: 2.5em font-size: 2.5em
@@ -193,10 +188,10 @@
-webkit-line-clamp: 3 -webkit-line-clamp: 3
+maxWidth768() +maxWidth768()
font-size: 1.72em font-size: 2.1em
.post-edit-link .post-edit-link
padding-left: .5rem padding-left: 10px
#post-meta #post-meta
color: var(--light-grey) color: var(--light-grey)
@@ -216,14 +211,14 @@
.post-meta .post-meta
&-separator &-separator
margin: 0 .25rem margin: 0 5px
&-icon &-icon
margin-right: .2rem margin-right: 4px
&-label &-label
if hexo-config('post_meta.post.label') if hexo-config('post_meta.post.label')
margin-right: .2rem margin-right: 4px
else else
display: none display: none
@@ -264,7 +259,7 @@
#toggle-menu #toggle-menu
display: none display: none
padding: .1rem 0 0 .3rem padding: 2px 0 0 6px
vertical-align: top vertical-align: top
&:hover &:hover
@@ -277,7 +272,7 @@
color: var(--white) color: var(--white)
#site-name #site-name
text-shadow: .1rem .1rem .2rem rgba($dark-black, .15) text-shadow: 2px 2px 4px rgba($dark-black, .15)
font-weight: bold font-weight: bold
cursor: pointer cursor: pointer
@@ -287,7 +282,7 @@
.menus_item .menus_item
position: relative position: relative
display: inline-block display: inline-block
padding: 0 0 0 .7rem padding: 0 0 0 14px
&:hover &:hover
.menus_item_child .menus_item_child
@@ -327,7 +322,7 @@
a a
display: inline-block display: inline-block
padding: .3rem .7rem padding: 6px 14px
width: 100% width: 100%
color: var(--font-color) !important color: var(--font-color) !important
text-shadow: none !important text-shadow: none !important
@@ -350,12 +345,12 @@
#search-button #search-button
display: inline display: inline
padding: 0 0 0 .7rem padding: 0 0 0 14px
.site-page .site-page
position: relative position: relative
padding-bottom: .3rem padding-bottom: 6px
text-shadow: .05rem .05rem .1rem rgba($dark-black, .3) text-shadow: 1px 1px 2px rgba($dark-black, .3)
font-size: .78em font-size: .78em
cursor: pointer cursor: pointer

2
source/css/_layout/loading.styl
View File

@@ -43,7 +43,7 @@ if hexo-config('preloader')
.loading-word .loading-word
position: absolute position: absolute
color: var(--preloader-color) color: var(--preloader-color)
font-size: .8rem font-size: 16px
.configure-core .configure-core
width: 100% width: 100%

47
source/css/_layout/pagination.styl
View File

@@ -1,24 +1,12 @@
#pagination #pagination
overflow: hidden
margin-top: 1rem
width: 100%
.pagination .pagination
margin-top: 20px
text-align: center text-align: center
.page-number .page-number
display: inline-block
margin: 0 .2rem
min-width: w = 1.2rem
height: w
text-align: center
line-height: w
cursor: pointer
&.current &.current
background: $theme-paginator-color background: $theme-paginator-color
color: var(--white) color: var(--white)
cursor: default
img.prev-cover, img.prev-cover,
img.next-cover img.next-cover
@@ -32,7 +20,7 @@
.pagination-info .pagination-info
position: absolute position: absolute
top: 50% top: 50%
padding: 1rem 2rem padding: 20px 40px
width: 100% width: 100%
transform: translate(0, -50%) transform: translate(0, -50%)
@@ -75,5 +63,32 @@
transform: scale(1.1) transform: scale(1.1)
&.pagination-post &.pagination-post
margin-top: 2rem overflow: hidden
background: $dark-black margin-top: 40px
background: $dark-black
.layout
& > .recent-posts
.pagination
& > *
@extend .cardHover
display: inline-block
margin: 0 6px
width: w = 2.5em
height: w
line-height: w
&:hover
background: var(--btn-hover-color)
color: var(--btn-color)
& > div:not(.recent-posts)
.pagination
.page-number
display: inline-block
margin: 0 4px
min-width: w = 24px
height: w
text-align: center
line-height: w
cursor: pointer

79
source/css/_layout/post.styl
View File

@@ -1,16 +1,13 @@
beautify() beautify()
headStyle(fontsize) headStyle(fontsize)
padding-left: unit(fontsize + .4, 'rem') padding-left: unit(fontsize + .4, 'px')
code
font-size: unit(fontsize, 'rem')
&:before &:before
margin-left: unit((-(fontsize + .2)), 'rem') margin-left: unit((-(fontsize + 4)), 'px')
font-size: unit(fontsize, 'rem') font-size: unit(fontsize, 'px')
&:hover &:hover
padding-left: unit(fontsize + .6, 'rem') padding-left: unit(fontsize + 12, 'px')
h1, h1,
h2, h2,
@@ -22,7 +19,7 @@ beautify()
&:before &:before
position: absolute position: absolute
top: calc(50% - .35rem) top: calc(50% - 7px)
color: $title-prefix-icon-color color: $title-prefix-icon-color
content: $title-prefix-icon content: $title-prefix-icon
line-height: 1 line-height: 1
@@ -34,47 +31,47 @@ beautify()
color: $light-blue color: $light-blue
h1 h1
headStyle(1) headStyle(20)
h2 h2
headStyle(.9) headStyle(18)
h3 h3
headStyle(.8) headStyle(16)
h4 h4
headStyle(.7) headStyle(14)
h5 h5
headStyle(.6) headStyle(12)
h6 h6
headStyle(.6) headStyle(12)
ol, ol,
ul ul
margin-top: .4rem margin-top: 8px
padding: 0 0 0 .8rem padding: 0 0 0 16px
list-style: none list-style: none
counter-reset: li counter-reset: li
+maxWidth768() +maxWidth768()
padding: 0 0 0 .4rem padding: 0 0 0 8px
p p
margin: 0 0 .5rem margin: 0 0 10px
ol, ol,
ul ul
padding-left: .6rem padding-left: 12px
+maxWidth768() +maxWidth768()
padding-left: .2rem padding-left: 4px
li li
&:not(.tab) &:not(.tab)
position: relative position: relative
margin: .2rem 0 margin: 4px 0
&:hover &:hover
&:before &:before
@@ -127,19 +124,19 @@ beautify()
no-beautify() no-beautify()
ol, ol,
ul ul
margin-top: .4rem margin-top: 8px
p p
margin: 0 0 .5rem margin: 0 0 10px
ol, ol,
ul ul
padding-left: .5rem padding-left: 10px
li li
position: relative position: relative
margin: .3rem 0 margin: 6px 0
padding-left: .3rem padding-left: 6px
#article-container #article-container
word-wrap: break-word word-wrap: break-word
@@ -153,14 +150,14 @@ no-beautify()
img img
display: block display: block
margin: 0 auto .8rem margin: 0 auto 20px
max-width: 100% max-width: 100%
p p
margin: 0 0 .8rem margin: 0 0 16px
iframe iframe
margin: 0 0 1rem margin: 0 0 20px
kbd kbd
margin: 0 3px margin: 0 3px
@@ -197,11 +194,11 @@ no-beautify()
&__tags &__tags
display: inline-block display: inline-block
margin: .4rem .4rem .4rem 0 margin: 8px 8px 8px 0
padding: 0 .6rem padding: 0 12px
width: fit-content width: fit-content
border: 1px solid $light-blue border: 1px solid $light-blue
border-radius: .6rem border-radius: 12px
color: $light-blue color: $light-blue
font-size: .85em font-size: .85em
transition: all .2s ease-in-out transition: all .2s ease-in-out
@@ -213,7 +210,7 @@ no-beautify()
.post_share .post_share
display: inline-block display: inline-block
float: right float: right
margin: .4rem 0 margin: 8px 0
width: fit-content width: fit-content
.social-share .social-share
@@ -228,19 +225,19 @@ no-beautify()
.post-copyright .post-copyright
position: relative position: relative
margin: 2rem 0 .5rem margin: 40px 0 10px
padding: .5rem .8rem padding: 10px 16px
border: 1px solid var(--light-grey) border: 1px solid var(--light-grey)
transition: box-shadow .3s ease-in-out transition: box-shadow .3s ease-in-out
&:before &:before
@extend .fontawesomeIcon @extend .fontawesomeIcon
position: absolute position: absolute
top: .1rem top: 2px
right: .6rem right: 12px
color: $theme-color color: $theme-color
content: '\f1f9' content: '\f1f9'
font-size: 1rem font-size: 1.3em
&:hover &:hover
box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5) box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)
@@ -251,7 +248,7 @@ no-beautify()
font-weight: bold font-weight: bold
&-info &-info
padding-left: .3rem padding-left: 6px
a a
text-decoration: underline text-decoration: underline
@@ -262,7 +259,7 @@ no-beautify()
.post-outdate-notice .post-outdate-notice
position: relative position: relative
margin: 0 0 1rem margin: 0 0 20px
padding: .5em 1.2em padding: .5em 1.2em
border-radius: 3px border-radius: 3px
background-color: $noticeOutdate-bg background-color: $noticeOutdate-bg
@@ -282,4 +279,4 @@ no-beautify()
transform: translateY(-50%) transform: translateY(-50%)
.ads-wrap .ads-wrap
margin: 2rem 0 margin: 40px 0

4
source/css/_layout/relatedposts.styl
View File

@@ -1,5 +1,5 @@
.relatedPosts .relatedPosts
margin-top: 2rem margin-top: 40px
& > .headline & > .headline
margin-bottom: 5px margin-bottom: 5px
@@ -40,7 +40,7 @@
.content .content
position: absolute position: absolute
top: 50% top: 50%
padding: 0 1rem padding: 0 20px
width: 100% width: 100%
transform: translate(0, -50%) transform: translate(0, -50%)

7
source/css/_layout/reward.styl
View File

@@ -1,12 +1,12 @@
.post-reward .post-reward
position: relative position: relative
margin-top: 4rem margin-top: 80px
width: 100% width: 100%
text-align: center text-align: center
.reward-button .reward-button
display: inline-block display: inline-block
padding: .2rem 1.2rem padding: 4px 24px
background: var(--btn-bg) background: var(--btn-bg)
color: var(--btn-color) color: var(--btn-color)
cursor: pointer cursor: pointer
@@ -28,7 +28,7 @@
.reward-all .reward-all
display: inline-block display: inline-block
margin: 0 margin: 0
padding: 1rem .5rem padding: 20px 10px
border-radius: 4px border-radius: 4px
background: var(--reward-pop) background: var(--reward-pop)
@@ -64,6 +64,5 @@
height: 130px height: 130px
.post-qr-code-desc .post-qr-code-desc
padding-top: .4rem
width: 130px width: 130px
color: $reward-pop-up-color color: $reward-pop-up-color

12
source/css/_layout/sidebar.styl
View File

@@ -23,11 +23,11 @@
transform: translate3d(-100%, 0, 0) transform: translate3d(-100%, 0, 0)
& > .avatar-img & > .avatar-img
margin: 1rem auto margin: 20px auto
.site-data .site-data
display: table display: table
padding: 0 .5rem padding: 0 10px
width: 100% width: 100%
table-layout: fixed table-layout: fixed
@@ -45,16 +45,16 @@
color: var(--font-color) color: var(--font-color)
hr hr
margin: 1rem auto margin: 20px auto
.menus_items .menus_items
padding: 0 .5rem 2rem padding: 0 10px 40px
.site-page .site-page
@extend .limit-one-line @extend .limit-one-line
position: relative position: relative
display: block display: block
padding: .3rem 1.5rem .3rem 1.1rem padding: 6px 30px 6px 22px
color: var(--font-color) color: var(--font-color)
font-size: 1.15em font-size: 1.15em
@@ -69,7 +69,7 @@
& > i:last-child & > i:last-child
position: absolute position: absolute
top: .78em top: .78em
right: .9rem right: 18px
transition: transform .3s transition: transform .3s
&.hide &.hide

7
source/css/_layout/third-party.styl
View File

@@ -24,7 +24,6 @@
--waline-font-size: 1.1em --waline-font-size: 1.1em
--waline-theme-color: $button-bg --waline-theme-color: $button-bg
--waline-active-color: $button-hover-color --waline-active-color: $button-hover-color
--waline-avatar-size: 2.75rem
.vuser .vuser
transition: all .5s transition: all .5s
@@ -64,7 +63,7 @@ if hexo-config('waline.bg')
.mermaid .mermaid
overflow: auto overflow: auto
margin: 0 0 1rem margin: 0 0 20px
background: $white background: $white
text-align: center text-align: center
opacity: 0 opacity: 0
@@ -80,7 +79,7 @@ if hexo-config('waline.bg')
#gitalk-container #gitalk-container
.gt-meta .gt-meta
margin: 0 0 .8em margin: 0 0 .8em
padding: .3rem 0 .8em padding: 6px 0 16px
.katex-wrap .katex-wrap
overflow: auto overflow: auto
@@ -100,7 +99,7 @@ mjx-container[display],
#article-container #article-container
.aplayer .aplayer
margin: 0 0 1rem margin: 0 0 20px
if hexo-config('beautify.enable') if hexo-config('beautify.enable')
ol, ol,

4
source/css/_mode/readmode.styl
View File

@@ -131,7 +131,7 @@ if hexo-config('readmode')
ul ul
>li >li
&:before &:before
border: .15rem solid var(--gray) !important border-color: var(--gray) !important
.tabs .tabs
border: 2px solid var(--tab-border-color) border: 2px solid var(--tab-border-color)
@@ -160,7 +160,7 @@ if hexo-config('readmode')
color: var(--font-color) color: var(--font-color)
blockquote blockquote
border-left: .2rem solid var(--gray) border-color: var(--gray)
background-color: var(--readmode-light-color) background-color: var(--readmode-light-color)
kbd kbd

30
source/css/_page/404.styl
View File

@@ -6,29 +6,23 @@ if hexo-config('error_404.enable')
right: 0 right: 0
left: 0 left: 0
margin: 0 auto margin: 0 auto
padding: 0 1rem padding: 0 20px
max-width: 1000px max-width: 1000px
transform: translate(0, -50%) transform: translate(0, -50%)
.error-content .error-content
@extend .cardHover
display: flex display: flex
flex-direction: row flex-direction: row
justify-content: center justify-content: center
align-items: center align-items: center
margin: 0 1rem margin: 0 20px
height: 18rem height: 360px
border-radius: 8px
background: var(--card-bg)
box-shadow: var(--card-box-shadow)
transition: all .3s
&:hover
box-shadow: var(--card-hover-box-shadow)
+maxWidth768() +maxWidth768()
flex-direction: column flex-direction: column
margin: 0 margin: 0
height: 25rem height: 500px
.error-img .error-img
flex: 1 flex: 1
@@ -47,7 +41,7 @@ if hexo-config('error_404.enable')
.error-info .error-info
flex: 1 flex: 1
padding: .5rem padding: 10px
text-align: center text-align: center
font-size: 14px font-size: 14px
@@ -59,28 +53,28 @@ if hexo-config('error_404.enable')
width: 100% width: 100%
.error_title .error_title
margin-top: -4rem margin-top: -80px
font-size: 9em font-size: 9em
+maxWidth768() +maxWidth768()
margin-top: -3rem margin-top: -60px
.error_subtitle .error_subtitle
@extend .limit-more-line @extend .limit-more-line
margin-top: -3.5rem margin-top: -70px
word-break: break-word word-break: break-word
font-size: 1.6em font-size: 1.6em
-webkit-line-clamp: 2 -webkit-line-clamp: 2
a a
display: inline-block display: inline-block
margin-top: .5rem margin-top: 10px
padding: .3rem 1.5rem padding: 6px 30px
background: var(--btn-bg) background: var(--btn-bg)
color: var(--btn-color) color: var(--btn-color)
i i
padding-right: .3rem padding-right: 6px
& + #rightside & + #rightside
display: none display: none

28
source/css/_page/archives.styl
View File

@@ -1,13 +1,13 @@
.article-sort .article-sort
margin-left: .5rem margin-left: 10px
padding-left: 1rem padding-left: 20px
border-left: 2px solid lighten($light-blue, 20) border-left: 2px solid lighten($light-blue, 20)
&-title &-title
position: relative position: relative
margin-left: .5rem margin-left: 10px
padding-bottom: 1rem padding-bottom: 20px
padding-left: 1rem padding-left: 20px
font-size: 1.72em font-size: 1.72em
&:hover &:hover
@@ -16,10 +16,10 @@
&:before &:before
position: absolute position: absolute
top: calc(((100% - 1.8rem) / 2)) top: calc(((100% - 36px) / 2))
left: -.45rem left: -9px
z-index: 1 z-index: 1
width: w = .5rem width: w = 10px
height: h = w height: h = w
border: .5 * w solid $light-blue border: .5 * w solid $light-blue
border-radius: w border-radius: w
@@ -33,7 +33,7 @@
bottom: 0 bottom: 0
left: 0 left: 0
z-index: 0 z-index: 0
width: .1rem width: 2px
height: 1.5em height: 1.5em
background: lighten($light-blue, 20) background: lighten($light-blue, 20)
content: '' content: ''
@@ -42,7 +42,7 @@
position: relative position: relative
display: flex display: flex
align-items: center align-items: center
margin: 0 0 1rem .5rem margin: 0 0 20px 10px
transition: all .2s ease-in-out transition: all .2s ease-in-out
&:hover &:hover
@@ -50,9 +50,9 @@
border-color: $pseudo-hover border-color: $pseudo-hover
&:before &:before
$w = .3rem $w = 6px
position: absolute position: absolute
left: calc(-1rem - 17px) left: calc(-20px - 17px)
width: w = $w width: w = $w
height: h = w height: h = w
border: .5 * w solid $light-blue border: .5 * w solid $light-blue
@@ -82,7 +82,7 @@
font-size: 95% font-size: 95%
time time
padding-left: .3rem padding-left: 6px
cursor: default cursor: default
&-title &-title
@@ -112,4 +112,4 @@
&-info &-info
flex: 1 flex: 1
padding: 0 .8rem padding: 0 16px

12
source/css/_page/categories.styl
View File

@@ -1,6 +1,6 @@
#page #page
.category-lists .category-lists
padding: 1rem 0 1.5rem padding: 20px 0 30px
+maxWidth768() +maxWidth768()
padding: 0 padding: 0
@@ -19,7 +19,7 @@
color: $text-hover color: $text-hover
.category-list-count .category-list-count
margin-left: .4rem margin-left: 8px
color: $theme-meta-color color: $theme-meta-color
&:before &:before
@@ -29,17 +29,17 @@
content: ')' content: ')'
ul ul
margin-top: .4rem margin-top: 8px
padding: 0 0 0 1rem padding: 0 0 0 20px
list-style: none list-style: none
counter-reset: li counter-reset: li
ul ul
padding-left: .2rem padding-left: 4px
li li
position: relative position: relative
margin: .3rem 0 margin: 6px 0
padding: .12em .4em .12em 1.4em padding: .12em .4em .12em 1.4em
&:before &:before

21
source/css/_page/common.styl
View File

@@ -7,7 +7,7 @@
display: flex display: flex
flex: 1 auto flex: 1 auto
margin: 0 auto margin: 0 auto
padding: 2rem 15px padding: 40px 15px
max-width: 1200px max-width: 1200px
width: 100% width: 100%
@@ -15,23 +15,18 @@
flex-direction: column flex-direction: column
+maxWidth768() +maxWidth768()
padding: 1rem 5px padding: 20px 5px
+minWidth2000() +minWidth2000()
max-width: 1500px max-width: 1500px
& > div:first-child:not(.recent-posts) & > div:first-child:not(.recent-posts)
@extend .cardHover
align-self: flex-start align-self: flex-start
padding: 50px 40px padding: 50px 40px
border-radius: 8px
background: var(--card-bg)
box-shadow: var(--card-box-shadow)
&:hover
box-shadow: var(--card-hover-box-shadow)
+maxWidth768() +maxWidth768()
padding: 1.8rem .7rem !important padding: 36px 14px
& > div:first-child & > div:first-child
width: 75% width: 75%
@@ -53,3 +48,11 @@
& > div & > div
width: 100% !important width: 100% !important
// for apple device
.apple
#page-header.full_page
background-attachment: scroll !important
.recent-post-item
transform: translateZ(0)

3
source/css/_page/flink.styl
View File

@@ -1,8 +1,5 @@
#article-container #article-container
.flink .flink
.flink-desc
margin: .2rem 0 .5rem
.flink-list .flink-list
overflow: auto overflow: auto
padding: 10px 10px 0 padding: 10px 10px 0

100
source/css/_page/homepage.styl
View File

@@ -1,48 +1,23 @@
#recent-posts #recent-posts
& > .recent-post-item:not(:first-child) & > .recent-post-item:not(:first-child)
margin-top: 1rem margin-top: 20px
& > .recent-post-item & > .recent-post-item
@extend .cardHover
display: flex display: flex
flex-direction: row flex-direction: row
align-items: center align-items: center
overflow: hidden
height: 20em height: 20em
border-radius: 12px 8px 8px 12px
background: var(--card-bg)
box-shadow: var(--card-box-shadow)
transition: all .3s
+maxWidth768() +maxWidth768()
border-radius: 12px 12px 8px 8px flex-direction: column
height: auto
&:hover &:hover
box-shadow: var(--card-hover-box-shadow)
img.post_bg img.post_bg
transform: scale(1.1) transform: scale(1.1)
if hexo-config('cover.position') == 'both'
.left_radius
border-radius: 8px 0 0 8px
.right_radius
order: 2
border-radius: 0 8px 8px 0
else if hexo-config('cover.position') == 'left'
.left_radius
border-radius: 8px 0 0 8px
.right_radius
border-radius: 8px 0 0 8px
else if hexo-config('cover.position') == 'right'
.left_radius
order: 2
border-radius: 0 8px 8px 0
.right_radius
order: 2
border-radius: 0 8px 8px 0
&.ads-wrap &.ads-wrap
display: block !important display: block !important
height: auto !important height: auto !important
@@ -51,7 +26,10 @@
overflow: hidden overflow: hidden
width: 45% width: 45%
height: 100% height: 100%
-webkit-mask-image: -webkit-radial-gradient(white, black)
+maxWidth768()
width: 100%
height: 230px
img.post_bg img.post_bg
width: 100% width: 100%
@@ -59,31 +37,42 @@
transition: all .6s transition: all .6s
object-fit: cover object-fit: cover
&:hover &.right
transform: scale(1.1) order: 1
+maxWidth768()
order: 0
& >.recent-post-info & >.recent-post-info
display: inline-block
overflow: hidden
padding: 0 40px padding: 0 40px
width: 55% width: 55%
+maxWidth768()
padding: 20px 20px 30px
width: 100%
&.no-cover &.no-cover
width: 100% width: 100%
+maxWidth768()
padding: 30px 20px
& > .article-title & > .article-title
@extend .limit-more-line @extend .limit-more-line
margin-bottom: .3rem
color: var(--text-highlight-color) color: var(--text-highlight-color)
font-size: 1.72em font-size: 1.72em
line-height: 1.4 line-height: 1.4
transition: all .2s ease-in-out transition: all .2s ease-in-out
-webkit-line-clamp: 2 -webkit-line-clamp: 2
+maxWidth768()
font-size: 1.43em
&:hover &:hover
color: $text-hover color: $text-hover
& > .article-meta-wrap & > .article-meta-wrap
margin: 6px 0
color: $theme-meta-color color: $theme-meta-color
font-size: 90% font-size: 90%
@@ -94,22 +83,22 @@
color: $sticky-color color: $sticky-color
i i
margin: 0 .2rem 0 0 margin: 0 4px 0 0
.article-meta-label .article-meta-label
if hexo-config('post_meta.page.label') if hexo-config('post_meta.page.label')
padding-right: .2rem padding-right: 4px
else else
display: none display: none
.article-meta__separator .article-meta__separator
margin: 0 .3rem margin: 0 6px
.article-meta__link .article-meta__link
margin: 0 .2rem margin: 0 4px
.fa-angle-right .fa-angle-right
margin: 0 .2rem margin: 0 4px
if hexo-config('post_meta.page.date_format') == 'relative' if hexo-config('post_meta.page.date_format') == 'relative'
time time
@@ -124,31 +113,4 @@
& > .content & > .content
@extend .limit-more-line @extend .limit-more-line
margin-top: .3rem -webkit-line-clamp: 3
-webkit-line-clamp: 3
+maxWidth768()
#recent-posts
.recent-post-item
flex-direction: column
height: auto !important
.post_cover
order: 1 !important
width: 100%
height: 230px
border-radius: 8px 8px 0 0
.recent-post-info
order: 2 !important
padding: 1rem 1rem 1.5rem
width: 100%
&.no-cover
padding: 1.5rem 1rem
.article-title
font-size: 1.43em
.content
height: auto

2
source/css/_page/tags.styl
View File

@@ -2,7 +2,7 @@
&-list &-list
a a
display: inline-block display: inline-block
padding: 0 .4rem padding: 0 8px
transition: all .3s transition: all .3s
&:hover &:hover

22
source/css/_search/algolia.styl
View File

@@ -6,16 +6,16 @@
width: 100% width: 100%
input input
padding: .25rem .7rem padding: 5px 14px
outline: none outline: none
border: 2px solid $search-color border: 2px solid $search-color
border-radius: 2rem border-radius: 40px
background: var(--search-bg) background: var(--search-bg)
color: var(--search-input-color) color: var(--search-input-color)
.ais-hits--item.algolia-hit-item .ais-hits--item.algolia-hit-item
position: relative position: relative
padding-left: 1.2rem padding-left: 24px
&:hover &:hover
&:before &:before
@@ -28,7 +28,7 @@
left: 0 left: 0
width: w = $w width: w = $w
height: h = w height: h = w
border: .15rem solid $search-color border: 3px solid $search-color
border-radius: w border-radius: w
background: transparent background: transparent
content: '' content: ''
@@ -48,20 +48,20 @@
font-weight: bold font-weight: bold
.ais-pagination.pagination .ais-pagination.pagination
margin: .8rem 0 0 margin: 16px 0 0
padding: 0 padding: 0
text-align: center text-align: center
.ais-pagination--item .ais-pagination--item
margin: 0 .2rem margin: 0 4px
padding: 0 padding: 0
a a
display: inline-block display: inline-block
min-width: 1.2rem min-width: 24px
height: 1.2rem height: 24px
text-align: center text-align: center
line-height: 1.2rem line-height: 24px
.ais-pagination--item.current .ais-pagination--item.current
a a
@@ -71,5 +71,5 @@
.algolia-logo .algolia-logo
padding-top: 2px padding-top: 2px
width: 4rem width: 80px
height: 1.5rem height: 30px

16
source/css/_search/index.styl
View File

@@ -1,12 +1,12 @@
.search-dialog .search-dialog
position: fixed position: fixed
top: 5rem top: 100px
left: 50% left: 50%
z-index: 1001 z-index: 1001
display: none display: none
margin-left: -15rem margin-left: -300px
padding: 1rem padding: 20px
width: 30rem width: 600px
border-radius: 8px border-radius: 8px
background: var(--search-bg) background: var(--search-bg)
animation: titlescale .5s animation: titlescale .5s
@@ -20,12 +20,12 @@
border-radius: 0 border-radius: 0
hr hr
margin: 1rem auto margin: 20px auto
span.search-close-button span.search-close-button
position: absolute position: absolute
top: .8rem top: 16px
right: 1rem right: 20px
color: $grey color: $grey
font-size: 1.4em font-size: 1.4em
line-height: 1 line-height: 1
@@ -36,7 +36,7 @@
color: $search-color color: $search-color
&__title &__title
padding: 0 0 .7rem padding: 0 0 14px
color: $search-color color: $search-color
font-size: 1.4em font-size: 1.4em
line-height: 1 line-height: 1

14
source/css/_search/local-search.styl
View File

@@ -6,18 +6,18 @@
width: 100% width: 100%
input input
padding: .25rem .7rem padding: 5px 14px
width: 100% width: 100%
outline: none outline: none
border: 2px solid $search-color border: 2px solid $search-color
border-radius: 2rem border-radius: 40px
background: var(--search-bg) background: var(--search-bg)
color: var(--search-input-color) color: var(--search-input-color)
-webkit-appearance: none -webkit-appearance: none
.local-search__hit-item .local-search__hit-item
position: relative position: relative
padding-left: 1.2rem padding-left: 24px
line-height: 1.7 line-height: 1.7
&:hover &:hover
@@ -31,7 +31,7 @@
left: 0 left: 0
width: w = $w width: w = $w
height: h = w height: h = w
border: .15rem solid $search-color border: 3px solid $search-color
border-radius: w border-radius: w
background: transparent background: transparent
content: '' content: ''
@@ -48,7 +48,7 @@
color: $search-color color: $search-color
.search-result .search-result
margin: 0 0 .4rem margin: 0 0 8px
word-break: break-all word-break: break-all
.search-keyword .search-keyword
@@ -57,8 +57,8 @@
.search-result-list .search-result-list
overflow-y: auto overflow-y: auto
max-height: 10.5rem max-height: 210px
+maxWidth768() +maxWidth768()
padding-bottom: 2rem padding-bottom: 40px
max-height: 75vh !important max-height: 75vh !important

18
source/css/_tags/button.styl
View File

@@ -1,36 +1,36 @@
#article-container #article-container
.btn-center .btn-center
margin: 0 0 1rem margin: 0 0 20px
text-align: center text-align: center
.btn-beautify .btn-beautify
display: inline-block display: inline-block
margin: 0 .2rem .3rem margin: 0 4px 6px
padding: 0 1rem padding: 0 15px
background-color: $btn-default-color background-color: $btn-default-color
color: $btn-color color: $btn-color
line-height: 2 line-height: 2
i + span i + span
margin-left: .3rem margin-left: 6px
&:not(.block) + .btn-beautify:not(.block) &:not(.block) + .btn-beautify:not(.block)
margin: 0 .2rem 1rem margin: 0 4px 20px
&.block &.block
display: block display: block
margin: 0 0 1rem margin: 0 0 20px
width: fit-content width: fit-content
width: -moz-fit-content width: -moz-fit-content
&.center &.center
margin: 0 auto 1rem margin: 0 auto 20px
&.right &.right
margin: 0 0 1rem auto margin: 0 0 20px auto
&.larger &.larger
padding: .3rem 1.3rem padding: 6px 15px
&:hover &:hover
text-decoration: none text-decoration: none

16
source/css/_tags/gallery.styl
View File

@@ -2,15 +2,15 @@ figure.gallery-group
position: relative position: relative
float: left float: left
overflow: hidden overflow: hidden
margin: .3rem .2rem margin: 6px 4px
width: calc(50% - .4rem) width: calc(50% - 8px)
height: 250px height: 250px
border-radius: 8px border-radius: 8px
background: $dark-black background: $dark-black
-webkit-transform: translate3d(0, 0, 0) -webkit-transform: translate3d(0, 0, 0)
+maxWidth600() +maxWidth600()
width: calc(100% - .4rem) width: calc(100% - 8px)
&:hover &:hover
img img
@@ -40,7 +40,7 @@ figure.gallery-group
position: absolute position: absolute
top: 0 top: 0
left: 0 left: 0
padding: 1.5rem padding: 30px
width: 100% width: 100%
height: 100% height: 100%
color: $gallery-color color: $gallery-color
@@ -59,7 +59,7 @@ figure.gallery-group
p p
@extend .limit-more-line @extend .limit-more-line
margin: 0 margin: 0
padding: .4rem 0 0 padding: 8px 0 0
letter-spacing: 1px letter-spacing: 1px
font-size: 1.1em font-size: 1.1em
line-height: 1.5 line-height: 1.5
@@ -72,7 +72,7 @@ figure.gallery-group
@extend .limit-more-line @extend .limit-more-line
position: relative position: relative
margin: 0 margin: 0
padding: .4rem 0 padding: 8px 0
font-weight: bold font-weight: bold
font-size: 1.65em font-size: 1.65em
line-height: 1.5 line-height: 1.5
@@ -91,10 +91,10 @@ figure.gallery-group
.gallery-group-main .gallery-group-main
overflow: auto overflow: auto
padding: 0 0 .8rem padding: 0 0 16px
.justified-gallery .justified-gallery
margin: 0 0 .8rem margin: 0 0 16px
img img
opacity: 0 opacity: 0

4
source/css/_tags/hexo.styl
View File

@@ -11,13 +11,13 @@ blockquote
&.right &.right
float: right float: right
margin: 1em 0 0 .5rem margin: 1em 0 0 .5em
// hexo tag video // hexo tag video
.video-container .video-container
position: relative position: relative
overflow: hidden overflow: hidden
margin-bottom: .8rem margin-bottom: 16px
padding-top: 56.25% padding-top: 56.25%
height: 0 height: 0

14
source/css/_tags/hide.styl
View File

@@ -3,7 +3,7 @@
.hide-block .hide-block
& > .hide-button & > .hide-button
display: inline-block display: inline-block
padding: .3rem 1rem padding: 6px 20px
background: $tag-hide-bg background: $tag-hide-bg
color: var(--white) color: var(--white)
@@ -21,20 +21,20 @@
.hide-inline .hide-inline
& > .hide-button & > .hide-button
margin: 0 .3rem margin: 0 6px
& > .hide-content & > .hide-content
margin: 0 .3rem margin: 0 6px
.hide-block .hide-block
margin: 0 0 .8rem margin: 0 0 16px
.hide-toggle .hide-toggle
margin-bottom: 1rem margin-bottom: 20px
border: 1px solid $tag-hide-toggle-bg border: 1px solid $tag-hide-toggle-bg
& > .hide-button & > .hide-button
padding: .3rem .5rem padding: 6px 10px
background: $tag-hide-toggle-bg background: $tag-hide-toggle-bg
color: #1F2D3D color: #1F2D3D
cursor: pointer cursor: pointer
@@ -52,4 +52,4 @@
& > .hide-content & > .hide-content
display: none display: none
margin: 1.5rem 1.2rem margin: 30px 24px

14
source/css/_tags/note.styl
View File

@@ -1,19 +1,19 @@
.note .note
$note-icons = hexo-config('note.icons') $note-icons = hexo-config('note.icons')
position: relative position: relative
margin: 0 0 1rem margin: 0 0 20px
padding: 15px padding: 15px
if hexo-config('note.border_radius') is a 'unit' if hexo-config('note.border_radius') is a 'unit'
border-radius: unit(hexo-config('note.border_radius'), px) border-radius: unit(hexo-config('note.border_radius'), px)
&.icon &.icon
padding-left: 2.25rem padding-left: 3em
& > .note-icon & > .note-icon
position: absolute position: absolute
top: calc(50% - .4rem) top: calc(50% - .5em)
left: .7rem left: .8em
font-size: larger font-size: larger
for $type in $tagsP-types for $type in $tagsP-types
@@ -75,12 +75,12 @@
if $note-icons if $note-icons
&:not(.no-icon) &:not(.no-icon)
padding-left: 2.25rem padding-left: 3em
&::before &::before
position: absolute position: absolute
top: calc(50% - .8rem) top: calc(50% - .95em)
left: .7rem left: .8em
font-size: larger font-size: larger
@extend .fontawesomeIcon @extend .fontawesomeIcon

8
source/css/_tags/tabs.styl
View File

@@ -2,7 +2,7 @@
#article-container #article-container
.tabs .tabs
position: relative position: relative
margin: 0 0 1rem margin: 0 0 20px
border-right: 1px solid var(--tab-border-color) border-right: 1px solid var(--tab-border-color)
border-bottom: 1px solid var(--tab-border-color) border-bottom: 1px solid var(--tab-border-color)
border-left: 1px solid var(--tab-border-color) border-left: 1px solid var(--tab-border-color)
@@ -24,7 +24,7 @@
button button
display: block display: block
padding: .5rem 1rem padding: 8px 18px
width: 100% width: 100%
border-top: 2px solid var(--tab-border-color) border-top: 2px solid var(--tab-border-color)
background: var(--tab-botton-bg) background: var(--tab-botton-bg)
@@ -51,10 +51,10 @@
.tab-item-content .tab-item-content
position: relative position: relative
display: none display: none
padding: 1.8rem 1.2rem padding: 36px 24px
+maxWidth768() +maxWidth768()
padding: 1.2rem .7rem padding: 24px 14px
&.active &.active
display: block display: block

1
source/css/var.styl
View File

@@ -30,7 +30,6 @@ $title-prefix-icon-color = $beautifyEnable ? convert(hexo-config('beautify.title
$font-size = hexo-config('font.global-font-size') ? convert(hexo-config('font.global-font-size')) : 14px $font-size = hexo-config('font.global-font-size') ? convert(hexo-config('font.global-font-size')) : 14px
$code-font-size = hexo-config('font.code-font-size') ? convert(hexo-config('font.code-font-size')) : var(--global-font-size) $code-font-size = hexo-config('font.code-font-size') ? convert(hexo-config('font.code-font-size')) : var(--global-font-size)
$font-color = #1F2D3D $font-color = #1F2D3D
$rem = 20px
$text-line-height = 2 $text-line-height = 2
$web-bg = hexo-config('background') && unquote(hexo-config('background')) $web-bg = hexo-config('background') && unquote(hexo-config('background'))
$index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 100vh $index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 100vh

3
source/js/main.js
View File

@@ -354,6 +354,7 @@ document.addEventListener('DOMContentLoaded', function () {
const $cardToc = $cardTocLayout.getElementsByClassName('toc-content')[0] const $cardToc = $cardTocLayout.getElementsByClassName('toc-content')[0]
const $tocLink = $cardToc.querySelectorAll('.toc-link') const $tocLink = $cardToc.querySelectorAll('.toc-link')
const $article = document.getElementById('article-container') const $article = document.getElementById('article-container')
const $tocPercentage = $cardTocLayout.querySelector('.toc-percentage')
// main of scroll // main of scroll
window.tocScrollFn = function () { window.tocScrollFn = function () {
@@ -373,7 +374,7 @@ document.addEventListener('DOMContentLoaded', function () {
const scrollPercent = (currentTop - headerHeight) / (contentMath) const scrollPercent = (currentTop - headerHeight) / (contentMath)
const scrollPercentRounded = Math.round(scrollPercent * 100) const scrollPercentRounded = Math.round(scrollPercent * 100)
const percentage = (scrollPercentRounded > 100) ? 100 : (scrollPercentRounded <= 0) ? 0 : scrollPercentRounded const percentage = (scrollPercentRounded > 100) ? 100 : (scrollPercentRounded <= 0) ? 0 : scrollPercentRounded
$cardToc.setAttribute('progress-percentage', percentage) $tocPercentage.textContent = percentage
} }
// anchor // anchor

3
source/js/search/local-search.js
View File

@@ -47,9 +47,10 @@ window.addEventListener('load', () => {
.then(str => new window.DOMParser().parseFromString(str, 'text/xml')) .then(str => new window.DOMParser().parseFromString(str, 'text/xml'))
.then(data => { .then(data => {
const datas = [...data.querySelectorAll('entry')].map(function (item) { const datas = [...data.querySelectorAll('entry')].map(function (item) {
const content = item.querySelector('content')
return { return {
title: item.querySelector('title').textContent, title: item.querySelector('title').textContent,
content: item.querySelector('content').textContent, content: content ? content.textContent : '',
url: item.querySelector('url').textContent url: item.querySelector('url').textContent
} }
}) })