biss/hexo-theme-butterfly
1
0
Fork 0
mirror of https://github.com/jerryc127/hexo-theme-butterfly.git synced 2026-04-16 19:30:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

由於整合了多個設定並更改了部分設定名稱，升級到 5.0 版本時，請重新設定 _config.yml 文件。

Browse Source 
1. 新增 macstyle 設定，取消 mac / mac light 主題設定
2. 整合搜索相關設定
3. 修改程式碼區塊設定
4. 主頁文章新增多種版面配置
5. 新增說說頁面
6. 適配 hexo-blog-encrypt 加密插件
7. 改善手機端目錄的開啟效果
8. 新增平滑滾動功能
9. 支持以程式碼區塊方式撰寫 mermaid 圖表
10. 可自訂文章標題位置
11. 新增程式碼全螢幕按鈕
12. 友情連結頭像改為圓角設計
13. 優化程式碼，使用 hexo-util 的參數和 hexo 內建參數
14. 可自訂搜索框提示文字
15. 未設定選單時，不顯示側邊欄目錄和按鈕
16. 螢幕寬度超過 2000px 時，增加卡片高度
17. 根據語言設定調整字體：簡體中文使用雅黑，其他使用正黑體
18. 更新 plugins.yml
19. 全新的側邊欄界面設計
20. 新增 giscus 的 js 設定
21. 調整 utterances js 的設定位置
22. 新增 utterances option 設定
23. 修改 giscus 的主題設定
24. 多個界面元素改為圓角設計
25. 可選擇圓角或直角界面風格
26. 圖庫加載按鈕新增圖標
27. 改善標籤頁面的滑鼠懸停效果
28. 調整側邊欄的滑鼠懸停效果
29. 微調部分界面元素

1. 修復 Hexo 新版本下 Prism.js 無法正確高亮的問題
2. 修復文章標籤為空時可能出現的錯誤
3. 修正 mermaid 圖表可能出現的錯誤
4. 解決未設定選單時控制台報錯的問題
5. 修復 Algolia 搜索的每頁顯示數量設定無效的問題
6. 解決 Algolia 搜索結果出現滾動條的問題
7. 修正滾動條出現上下按鈕的問題
8. 修復圖庫遠程連結未加前綴的問題
9. 修正 label 標籤外掛右側多餘空格的問題
10. 解決 APlayer 報告內存洩漏的問題

1. 優化 PJAX 下的函數調用
2. 整體代碼優化
3. 提升兼容性
4. 改善 Lighthouse 評分
5. 在 PJAX 關閉時減少不必要的全局變量
6. 優化 Waline 的 import 兼容性
7. 改善頁面進入效果
8. 優化程式碼區塊工具列顯示邏輯
9. 改善不同螢幕寬度下文章標題位置的顯示
10. 優化標籤顏色生成算法，避免過暗或過亮
11. 調整 Artalk 和 Waline 在夜間模式下的字體顏色，與主題保持一致
12. 調整 Algolia 搜索加載動畫位置，避免換行
13. 優化 Algolia 搜索結果為空時的處理
14. 改善系列文章的滑鼠懸停效果
15. 優化 404 頁面代碼
16. 解決搜索和側邊欄開啟時窗口抖動的問題
17. 優化 tabs 標籤外掛的代碼和效能
18. 改善 tabs 中使用 gallery 標籤外掛時的圖片加載邏輯
19. 優化目錄滾動效果，使當前標題保持在中間
20. 調整螢幕寬度超過 1024px 時 gallerygroup 的顯示數量
This commit is contained in:
Jerry
2024-08-03 19:05:57 +08:00
Unverified
parent 0d52505331
commit 06f543ed96
123 changed files with 2226 additions and 1792 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,12 +15,16 @@
text-rendering: auto
-webkit-font-smoothing: antialiased
addBorderRadius(x = 6)
if hexo-config('rounded_corners_ui')
border-radius: unit(x, 'px')
// card hover
.cardHover
border-radius: 8px
background: var(--card-bg)
box-shadow: var(--card-box-shadow)
transition: all .3s
addBorderRadius(8)
&:hover
box-shadow: var(--card-hover-box-shadow)
@@ -37,11 +41,10 @@
.postImgHover
&:hover
.cover
opacity: .8
opacity: .7
transform: scale(1.1)
.cover
position: absolute
width: 100%
height: 100%
opacity: .4
@@ -96,6 +99,12 @@
transition: all 1s ease-in-out
@extend .fontawesomeIcon
.verticalCenter
position: absolute
top: 50%
width: 100%
transform: translate(0, -50%)
maxWidth600()
@media screen and (max-width: 600px)
{block}
@@ -112,6 +121,10 @@ maxWidth1024()
@media screen and (max-width: 1024px)
{block}
minWidth1024()
@media screen and (min-width: 1024px)
{block}
maxWidth900()
@media screen and (max-width: 900px)
{block}
@@ -261,4 +274,4 @@ if hexo-config('avatar.effect') == true
transform: translateX(200px)
100%
transform: translateX(0)
transform: translateX(0)

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

@@ -15,7 +15,9 @@
--tab-button-hover-bg: $tab-button-hover-bg
--tab-button-active-bg: $tab-button-active-bg
--card-bg: $card-bg
--card-meta: $theme-meta-color
--sidebar-bg: $sidebar-background
--sidebar-menu-bg: $white
--btn-hover-color: $button-hover-color
--btn-color: $button-color
--btn-bg: $button-bg
@@ -39,6 +41,7 @@
body
position: relative
overflow-y: scroll
min-height: 100%
background: var(--global-bg)
color: var(--font-color)
@@ -52,6 +55,12 @@ body
user-select: none
-webkit-user-select: none
// scrollbar - firefox
@-moz-document url-prefix()
*
scrollbar-width: thin
scrollbar-color: var(--scrollbar-color) transparent
// scrollbar - chrome/safari
*::-webkit-scrollbar
width: 5px
@@ -63,11 +72,6 @@ body
*::-webkit-scrollbar-track
background-color: transparent
// scrollbar - firefox
*
scrollbar-width: thin
scrollbar-color: var(--scrollbar-color) transparent
input::placeholder
color: var(--font-color)
@@ -104,11 +108,34 @@ h6
overflow-x: scroll
margin: 0 0 20px
if hexo-config('rounded_corners_ui')
$borderRadius = 5px
border-radius: $borderRadius
table
border-radius: $borderRadius
thead > tr:first-child
th:first-child
border-top-left-radius: $borderRadius
th:last-child
border-top-right-radius: $borderRadius
tbody > tr:last-child
td:first-child
border-bottom-left-radius: $borderRadius
td:last-child
border-bottom-right-radius: $borderRadius
table
display: table
width: 100%
border-spacing: 0
border-collapse: collapse
border-collapse: separate
border-top: 1px solid var(--light-grey)
border-left: 1px solid var(--light-grey)
empty-cells: show
thead
@@ -118,6 +145,8 @@ table
td
padding: 6px 12px
border: 1px solid var(--light-grey)
border-top: none
border-left: none
vertical-align: middle
*::selection
@@ -147,8 +176,8 @@ if $site-name-font
#site-title,
#site-subtitle,
.site-name,
#aside-content .author-info__name,
#aside-content .author-info__description
#aside-content .author-info-name,
#aside-content .author-info-description
font-family: $site-name-font
.is-center
@@ -183,10 +212,11 @@ if hexo-config('lazyload.enable') && hexo-config('lazyload.blur') && !hexo-confi
blockquote
margin: 0 0 20px
padding: 12px 15px
border-left: 3px solid $blockquote-padding-color
padding: 7px 15px
border-left: 4px solid $blockquote-padding-color
background-color: var(--blockquote-bg)
color: var(--blockquote-color)
addBorderRadius()
footer
cite

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

@@ -1,6 +1,6 @@
$highlight_theme = hexo-config('highlight_theme')
$highlight_macstyle = hexo-config('highlight_theme_macStyle')
wordWrap = $highlight_enable && !$highlight_line_number && hexo-config('code_word_wrap')
$highlight_theme = hexo-config('code_blocks.theme')
$highlight_macstyle = hexo-config('code_blocks.macStyle')
wordWrap = $highlight_enable && !$highlight_line_number && hexo-config('code_blocks.word_wrap')
@require 'theme'
@@ -47,9 +47,10 @@ $code-block
code
font-size: $code-font-size
font-family: $code-font-family !important
addBorderRadius()
code
padding: 2px 4px
padding: 2px 5px
background: $code-background
color: $code-foreground
@@ -66,6 +67,7 @@ $code-block
figure.highlight
@extend $code-block
position: relative
addBorderRadius()
pre
margin: 0
@@ -104,9 +106,10 @@ $code-block
background: var(--hltools-bg)
color: var(--hltools-color)
font-size: $code-font-size
overflow: hidden
& > *
margin: 0 3px
padding: 5px
i
cursor: pointer
@@ -124,7 +127,7 @@ $code-block
if !$highlight_macstyle
& > .macStyle
margin: 0
padding: 0
.code-lang
flex: 1
@@ -133,16 +136,17 @@ $code-block
font-size: 1.15em
user-select: none
-webkit-user-select: none
padding 2px
.copy-notice
padding-right: 2px
opacity: 0
transition: opacity .4s
if hexo-config('highlight_lang')
if hexo-config('code_blocks.language')
.code-lang
flex: 1
else if (!$highlight_macstyle && hexo-config('highlight_shrink') != 'none')
else if (!$highlight_macstyle && hexo-config('code_blocks.shrink') != 'none')
& > div:nth-child(2)
flex: 1
else
@@ -168,8 +172,6 @@ if $highlight_macstyle
-webkit-transform: translateZ(0)
.highlight-tools
padding: 0 10px
.macStyle
display: flex
@@ -191,15 +193,15 @@ if $highlight_macstyle
.mac-maximize
background: #35cd4b
if hexo-config('highlight_shrink') != 'none'
& > div:nth-child(2)
if hexo-config('code_blocks.shrink') != 'none'
& > :nth-child(2)
order: 8
&.closed
.expand
transform: rotate(90deg)
if hexo-config('highlight_height_limit')
if hexo-config('code_blocks.height_limit')
#article-container
.code-expand-btn
position: absolute
@@ -228,7 +230,7 @@ if hexo-config('highlight_height_limit')
& ~ table,
& ~ pre
overflow: hidden
height: unit(hexo-config('highlight_height_limit'), px)
height: unit(hexo-config('code_blocks.height_limit'), px)
@keyframes code-expand-key
0%
@@ -240,7 +242,7 @@ if hexo-config('highlight_height_limit')
100%
opacity: .6
if hexo-config('highlight_fullpage')
if hexo-config('code_blocks.fullpage')
#article-container
figure.highlight.code-fullpage
position: fixed

4
source/css/_highlight/highlight/diff.styl
View File

@@ -1,6 +1,8 @@
figure.highlight
table
scrollbar-color: var(--hlscrollbar-bg) transparent
// scrollbar - firefox
@-moz-document url-prefix()
scrollbar-color: var(--hlscrollbar-bg) transparent
&::-webkit-scrollbar-thumb
background: var(--hlscrollbar-bg)

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

@@ -6,7 +6,9 @@ if $highlight_theme != false
#article-container
pre[class*='language-']
scrollbar-color: var(--hlscrollbar-bg) transparent
// scrollbar - firefox
@-moz-document url-prefix()
scrollbar-color: var(--hlscrollbar-bg) transparent
&::-webkit-scrollbar-thumb
background: var(--hlscrollbar-bg)

2
source/css/_highlight/prismjs/line-number.styl
View File

@@ -10,7 +10,7 @@
position: relative
line-height: $line-height-code-block
if hexo-config('code_word_wrap')
if hexo-config('code_blocks.word_wrap')
white-space: pre-wrap
else
white-space: inherit

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

@@ -8,19 +8,14 @@
padding-right: 15px
+maxWidth900()
margin-top: 20px
width: 100%
> .card-widget:first-child
margin-top: 0
+maxWidth900()
margin-top: 20px
.card-widget
@extend .cardHover
position: relative
overflow: hidden
margin-top: 20px
margin-bottom: 20px
padding: 20px 24px
if hexo-config('aside.mobile') == false
@@ -28,16 +23,19 @@
&:not(#card-toc)
display: none
&:last-child
margin-bottom: 0
.card-info
.author-info
&__name
&-name
font-weight: 500
font-size: 1.57em
&__description
&-description
margin-top: -.42em
.card-info-data
.site-data
margin: 14px 0 4px
.card-info-social-icons
@@ -61,6 +59,7 @@
color: var(--btn-color)
text-align: center
line-height: 2.4
addBorderRadius(7)
&:hover
background-color: var(--btn-hover-color)
@@ -86,6 +85,7 @@
a
display: inline-block
padding: 0 4px
line-height: 1.8
&:hover
color: $text-hover !important
@@ -112,8 +112,9 @@
.thumbnail
overflow: hidden
width: w = 4.2em
width: w = 4em
height: w
addBorderRadius()
:first-child
@extend .imgHover
@@ -130,14 +131,14 @@
& > time,
& > .name
display: block
color: $theme-meta-color
font-size: 85%
color: var(--card-meta)
font-size: .85em
& > .title,
& > .comment
@extend .limit-more-line
color: var(--font-color)
font-size: 95%
// font-size: 95%
line-height: 1.5
-webkit-line-clamp: 2
@@ -158,13 +159,16 @@
a
display: flex
flex-direction: row
padding: 3px 10px
padding: 2px 8px
margin: 2px 0
color: var(--font-color)
transition: all .4s
transition: all .3s
addBorderRadius()
&:hover
padding: 3px 17px
padding: 2px 12px
background-color: var(--text-bg-hover)
color: var(--white)
span
@extend .limit-one-line
@@ -288,9 +292,10 @@
.toc-link
display: block
margin: 4px 0
padding: 1px 6px
padding: 1px 8px
color: var(--toc-link-color)
transition: all .2s ease-in-out
addBorderRadius()
&:hover
color: $theme-color
@@ -397,9 +402,9 @@
.card-recent-post
order: hexo-config('aside.card_recent_post.sort_order')
if hexo-config('newest_comments.sort_order')
if hexo-config('aside.card_newest_comments.sort_order')
#card-newest-comments
order: hexo-config('newest_comments.sort_order')
order: hexo-config('aside.card_newest_comments.sort_order')
if hexo-config('aside.card_categories.sort_order')
.card-categories

31
source/css/_layout/chat.styl
View File

@@ -1,17 +1,18 @@
// chat
if hexo-config('chat_btn') == true && hexo-config('chatra.enable')
#chatra:not(.chatra--expanded)
visibility: hidden !important
width: 1px !important
height: 1px !important
opacity: 0 !important
pointer-events: none
if hexo-config('chat.rightside_button') == true
if hexo-config('chat.use') == 'chatra'
#chatra:not(.chatra--expanded)
visibility: hidden !important
width: 1px !important
height: 1px !important
opacity: 0 !important
pointer-events: none
if hexo-config('chat_btn') == true && hexo-config('messenger.enable')
.fb_dialog,
.fb-customerchat
visibility: hidden !important
width: 1px !important
height: 1px !important
opacity: 0 !important
pointer-events: none
if hexo-config('chat.use') == 'messenger'
.fb_dialog,
.fb-customerchat
visibility: hidden !important
width: 1px !important
height: 1px !important
opacity: 0 !important
pointer-events: none

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

@@ -5,7 +5,7 @@
background-position: bottom
background-size: cover
if hexo-config('footer_bg') != false && hexo-config('mask.footer')
if hexo-config('footer_img') != false && hexo-config('mask.footer')
&:before
position: absolute
width: 100%

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

@@ -146,6 +146,7 @@
background: rgba(255, 255, 255, .8)
box-shadow: 0 5px 6px -5px alpha($grey, .6)
transition: transform .2s ease-in-out, opacity .2s ease-in-out
will-change: transform
#blog-info
color: var(--font-color)
@@ -345,10 +346,10 @@
margin-top: 8px
padding: 0
width: max-content
border-radius: 5px
background-color: var(--sidebar-bg)
box-shadow: 0 5px 20px -4px rgba($dark-black, .5)
animation: sub_menus .3s .1s ease both
addBorderRadius(5)
&:before
position: absolute
@@ -364,13 +365,14 @@
&:hover
background: var(--text-bg-hover)
&:first-child
border-top-left-radius: 5px
border-top-right-radius: 5px
if hexo-config('rounded_corners_ui')
&:first-child
border-top-left-radius: 5px
border-top-right-radius: 5px
&:last-child
border-bottom-right-radius: 5px
border-bottom-left-radius: 5px
&:last-child
border-bottom-right-radius: 5px
border-bottom-left-radius: 5px
a
display: inline-block

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

@@ -37,47 +37,40 @@
.prev-post,
.next-post
@extend .postImgHover
position: relative
overflow: hidden
width: 50%
height: 150px
+maxWidth768()
width: 100%
a
position: relative
display: block
overflow: hidden
height: 150px
&.pagination-post
overflow: hidden
margin-top: 40px
width: 100%
background: $dark-black
addBorderRadius()
.layout
& > .recent-posts
.pagination
& > *
display: inline-block
margin: 0 6px
width: w = 2.5em
height: w
line-height: w
.pagination
& > *
display: inline-block
margin: 0 6px
width: w = 2.5em
height: w
line-height: w
& > *:not(.space)
@extend .cardHover
& > *:not(.space)
@extend .cardHover
&:hover
background: var(--btn-hover-color)
color: var(--btn-color)
&: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
#archive
.pagination
margin-top: 30px
& > *:not(.space)
box-shadow: none

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

@@ -87,6 +87,7 @@ beautify()
margin: 0 auto 20px
max-width: 100%
transition: filter 375ms ease-in .2s
addBorderRadius()
p
margin: 0 0 16px
@@ -98,7 +99,6 @@ beautify()
margin: 0 3px
padding: 3px 5px
border: 1px solid #b4b4b4
border-radius: 3px
background-color: #f8f8f8
box-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 2px 1px 0 rgba(255, 255, 255, .6) inset
color: #34495e
@@ -107,6 +107,7 @@ beautify()
font-size: .9em
font-family: Monaco, 'Ubuntu Mono', monospace
line-height: 1em
addBorderRadius(3)
if hexo-config('anchor.click_to_scroll')
h1,
@@ -181,7 +182,7 @@ beautify()
background: $light-blue
color: var(--white)
.post_share
.post-share
display: inline-block
float: right
margin: 8px 0 0
@@ -203,6 +204,7 @@ beautify()
padding: 10px 16px
border: 1px solid var(--light-grey)
transition: box-shadow .3s ease-in-out
addBorderRadius()
&:before
@extend .fontawesomeIcon
@@ -238,9 +240,9 @@ beautify()
position: relative
margin: 0 0 20px
padding: .5em 1.2em
border-radius: 3px
background-color: $noticeOutdate-bg
color: $noticeOutdate-color
addBorderRadius(3)
if hexo-config('noticeOutdate.style') == 'flat'
padding: .5em 1em .5em 2.6em

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

@@ -7,7 +7,7 @@
font-size: 1.43em
& > .relatedPosts-list
& > div
& > a
position: relative
display: inline-block
overflow: hidden
@@ -17,6 +17,7 @@
background: $dark-black
vertical-align: bottom
@extend .postImgHover
addBorderRadius()
+maxWidth768()
margin: 2px
@@ -27,11 +28,8 @@
width: calc(100% - 4px)
.content
position: absolute
top: 50%
padding: 0 20px
width: 100%
transform: translate(0, -50%)
@extend .verticalCenter
.date
color: var(--light-grey)

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

@@ -14,6 +14,7 @@
background: var(--btn-bg)
color: var(--btn-color)
cursor: pointer
addBorderRadius()
i
margin-right: 5px
@@ -33,12 +34,12 @@
display: none
padding: 0 0 15px
width: 100%
addBorderRadius()
.reward-all
display: inline-block
margin: 0
padding: 20px 10px
border-radius: 4px
background: var(--reward-pop)
&:before

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

@@ -32,12 +32,12 @@
margin-bottom: 5px
width: w = 35px
height: w
border-radius: 5px
background-color: var(--btn-bg)
color: var(--btn-color)
text-align: center
font-size: 16px
line-height: w
addBorderRadius(5)
&:hover
background-color: var(--btn-hover-color)

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

@@ -26,27 +26,33 @@
& > .avatar-img
margin: 20px auto
.sidebar-site-data
.site-data
padding: 0 10px
hr
margin: 20px auto
.menus_items
padding: 0 10px
margin: 20px
padding: 15px
background: var(--sidebar-menu-bg)
box-shadow: 0 0 1px 1px rgba(7, 17, 27, .05)
addBorderRadius(10)
.site-page
@extend .limit-one-line
position: relative
display: block
padding: 3px 28px 3px 20px
border-radius: 6px
margin: 4px 0
padding: 2px 23px 2px 15px
color: var(--font-color)
font-size: 1.15em
cursor: pointer
addBorderRadius(6)
&:hover
background: var(--text-bg-hover)
color: var(--white)
i:first-child
width: 15%
@@ -55,8 +61,8 @@
&.group
& > i:last-child
position: absolute
top: .78em
right: 13px
top: .6em
right: 10px
transition: transform .3s
&.hide

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

@@ -79,31 +79,45 @@ if hexo-config('mermaid.enable')
margin: 0 0 .8em
padding: 6px 0 16px
.katex-display
overflow: auto hidden
padding: 5px
if hexo-config('math.use')
.katex-display
overflow: auto hidden
padding: 5px
if hexo-config('katex') && hexo-config('katex.hide_scrollbar')
&::-webkit-scrollbar
display: none
.katex-show
display: block
// Mathjax
mjx-container
overflow-x: auto
overflow-y: hidden
padding-bottom: 4px
max-width: 100%
.katex
display: none
&[display]
display: block !important
min-width: auto !important
&.katex-show
display: inline
&:not([display])
display: inline-grid !important
if hexo-config('math.hide_scrollbar')
.katex-display,
mjx-container
scrollbar-width: none
mjx-assistive-mml
right: 0
bottom: 0
&::-webkit-scrollbar
display: none
// Mathjax
mjx-container
overflow-x: auto
overflow-y: hidden
padding-bottom: 4px
max-width: 100%
&[display]
display: block !important
min-width: auto !important
&:not([display])
display: inline-grid !important
mjx-assistive-mml
right: 0
bottom: 0
.aplayer
color: $font-black

20
source/css/_mode/darkmode.styl
View File

@@ -16,6 +16,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
--tab-button-active-bg: #121212
--card-bg: #121212
--sidebar-bg: #121212
--sidebar-menu-bg: lighten(#121212, 5)
--btn-hover-color: lighten(#121212, 40)
--btn-color: alpha(#FFFFFF, .7)
--btn-bg: lighten(#121212, 5)
@@ -139,4 +140,21 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
#card-toc
+maxWidth900()
background: lighten(#121212, 5)
background: lighten(#121212, 5)
// artalk
.artalk.atk-dark-mode,
.atk-layer-wrap.atk-dark-mode
--at-color-font: alpha(#FFFFFF, .7)
--at-color-meta: alpha(#FFFFFF, .7)
--at-color-grey: alpha(#FFFFFF, .7)
.atk-send-btn,
.atk-badge
color: alpha(#FFFFFF, .7) !important
// waline
#waline-wrap
--waline-color: alpha(#FFFFFF, .7)
--waline-dark-grey: alpha(#FFFFFF, .7)
--waline-info-color: alpha(#FFFFFF, .5)

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

@@ -37,11 +37,11 @@ if hexo-config('readmode')
z-index: 100
width: 40px
height: 40px
border-radius: 8px
background: var(--exit-btn-bg)
color: var(--exit-btn-color)
font-size: 16px
transition: background .3s
addBorderRadius(8)
+maxWidth768()
top: initial

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

@@ -1,69 +1,66 @@
if hexo-config('error_404.enable')
.error404
#error-wrap
position: absolute
top: 50%
right: 0
left: 0
margin: 0 auto
padding: 60px 20px 0
max-width: 1000px
transform: translate(0, -50%)
.type-404
.error-content
@extend .cardHover
overflow: hidden
margin: 0 20px
height: 360px
.error-content
@extend .cardHover
+maxWidth768()
margin: 0
height: 500px
.error-img
display: inline-block
overflow: hidden
margin: 0 20px
height: 360px
width: 50%
height: 100%
+maxWidth768()
margin: 0
height: 500px
width: 100%
height: 45%
.error-img
display: inline-block
overflow: hidden
width: 50%
height: 100%
img
@extend .imgHover
background-color: $theme-color
.error-info
display: inline-flex
flex-direction: column
justify-content: center
align-content: center
width: 50%
height: 100%
vertical-align: top
text-align: center
if $site-name-font
font-family: $site-name-font
+maxWidth768()
width: 100%
height: 55%
.error_title
margin-top: -.6em
font-size: 9em
+maxWidth768()
width: 100%
height: 45%
font-size: 8em
img
@extend .imgHover
background-color: $theme-color
.error_subtitle
@extend .limit-more-line
margin-top: -3em
word-break: break-word
font-size: 1.6em
-webkit-line-clamp: 2
.error-info
display: inline-flex
flex-direction: column
justify-content: center
align-content: center
width: 50%
height: 100%
vertical-align: top
text-align: center
.nc
margin-top: 5%
padding: 0 20px
if $site-name-font
font-family: $site-name-font
+maxWidth768()
width: 100%
height: 55%
.error_title
margin-top: -.6em
font-size: 9em
+maxWidth768()
font-size: 8em
.error_subtitle
@extend .limit-more-line
margin-top: -3em
word-break: break-word
font-size: 1.6em
-webkit-line-clamp: 2
#footer
display: none
& + #rightside
display: none

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

@@ -78,8 +78,8 @@
border-color: var(--pseudo-hover)
&-time
color: $theme-meta-color
font-size: 95%
color: var(--card-meta)
font-size: .85em
time
padding-left: 6px
@@ -88,7 +88,7 @@
&-title
@extend .limit-more-line
color: var(--font-color)
font-size: 1.1em
font-size: 1.05em
transition: all .3s
-webkit-line-clamp: 2
@@ -98,8 +98,13 @@
&-img
overflow: hidden
width: 80px
height: 80px
width: 100px
height: 70px
addBorderRadius()
+maxWidth768()
width: 70px
height: 70px
:first-child
@extend .imgHover

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

@@ -16,7 +16,7 @@
.category-list-count
margin-left: 8px
color: $theme-meta-color
color: var(--card-meta)
&:before
content: '('

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

@@ -20,7 +20,7 @@
+minWidth2000()
max-width: 70%
& > div:first-child:not(.recent-posts)
& > div:first-child:not(.nc)
@extend .cardHover
align-self: flex-start
padding: 50px 40px

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

@@ -14,9 +14,9 @@
margin: 15px 7px
width: calc(100% / 3 - 15px)
height: 90px
border-radius: 8px
line-height: 17px
-webkit-transform: translateZ(0)
addBorderRadius(8)
+maxWidth1024()
width: calc(50% - 15px) !important
@@ -56,7 +56,7 @@
margin: 15px 10px
width: 60px
height: 60px
border-radius: 35px
border-radius: 7px
transition: width .3s ease-out
img

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

@@ -1,21 +1,39 @@
$indexLayout = hexo-config('index_layout') || 1
$indexEnable = hexo-config('cover.index_enable')
#recent-posts
& > .recent-post-item:not(:first-child)
margin-top: 20px
& > .recent-post-item
.recent-post-item
@extend .cardHover
display: flex
flex-direction: row
align-items: center
position: relative
overflow: hidden
height: 16.8em
margin-bottom: 20px
+maxWidth768()
flex-direction: column
height: auto
if $indexLayout == 6 || ($indexLayout == 7)
display: inline-block
width: calc(100% / 2 - 8px)
vertical-align: top
+maxWidth768()
width: 100%
+minWidth2000()
width: calc(100% / 3 - 8px)
if $indexLayout == 1 || ($indexLayout == 2 || ($indexLayout == 3))
display: flex
flex-direction: row
align-items: center
height: 16.8em
+maxWidth768()
flex-direction: column
height: auto
+minWidth2000()
height: 18.8em
&:hover
img.post-bg
.post-bg
transform: scale(1.1)
&.ads-wrap
@@ -24,36 +42,77 @@
.post_cover
overflow: hidden
width: 42%
height: 100%
+maxWidth768()
if ($indexLayout != 5 && ($indexLayout != 7))
+maxWidth768()
width: 100%
height: 230px
if $indexLayout == 1 || ($indexLayout == 2 || ($indexLayout == 3))
width: 42%
height: 100%
&.right
order: 1
+maxWidth768()
order: 0
if $indexLayout == 4 || ($indexLayout == 5 || ($indexLayout == 6 || ($indexLayout == 7)))
width: 100%
height: 230px
if ($indexLayout == 5 || ($indexLayout == 7))
height: 17em
else
height: 230px
if ($indexLayout == 5 || ($indexLayout == 7)) && $indexEnable
&:before
position: absolute
z-index: 1
width: 100%
height: 100%
background-color: rgba(18, 18, 18, .4)
content: ''
backdrop-filter: blur(3px)
.post-bg
z-index: -4
@extend .imgHover
&.right
order: 1
+maxWidth768()
order: 0
& >.recent-post-info
padding: 0 40px
width: 58%
+maxWidth768()
padding: 20px 20px 30px
width: 100%
&.no-cover
width: 100%
if $indexLayout == 1 || ($indexLayout == 2 || ($indexLayout == 3))
padding: 0 40px
width: 58%
if $indexLayout == 4 || ($indexLayout == 5 || ($indexLayout == 6 || ($indexLayout == 7)))
padding: 30px 30px 25px
if ($indexLayout == 5 || ($indexLayout == 7)) && $indexEnable
&:not(.no-cover)
position: absolute
top: 50%
z-index: 2
width: 100%
color: var(--text-highlight-color)
transform: translateY(-50%)
--text-highlight-color: rgba(255, 255, 255, 1)
--card-meta: rgba(255, 255, 255, .7)
&.no-cover
+maxWidth768()
padding: 30px 20px
if $indexLayout == 1 || ($indexLayout == 2 || ($indexLayout == 3))
width: 100%
if $indexLayout == 4 || ($indexLayout == 5 || ($indexLayout == 6 || ($indexLayout == 7)))
padding: 35px 30px
& > .article-title
@extend .limit-more-line
color: var(--text-highlight-color)
@@ -75,7 +134,7 @@
& > .article-meta-wrap
margin: 6px 0
color: $theme-meta-color
color: var(--card-meta)
font-size: .9em
& > .post-meta-date
@@ -104,7 +163,7 @@
display: none
a
color: $theme-meta-color
color: var(--card-meta)
&:hover
color: $text-hover

53
source/css/_page/shuoshuo.styl Normal file
View File

@@ -0,0 +1,53 @@
#article-container
.shuoshuo-item
@extend .cardHover
margin-bottom: 20px
padding: 35px 30px 30px
+maxWidth768()
padding: 25px 20px 20px
.shuoshuo-item-header
display: flex
align-items: center
.shuoshuo-avatar
overflow: hidden
width: 40px
height: 40px
border-radius: 40px
img
margin: 0
width: 100%
height: 100%
.shuoshuo-info
margin-left: 10px
line-height: 1.5
.shuoshuo-date
color: #858585
font-size: .8em
.shuoshuo-content
padding: 15px 0 10px
& > *:last-child
margin-bottom: 0
.shuoshuo-tag
display: inline-block
margin-right: 8px
padding: 0 8px
width: fit-content
border: 1px solid $light-blue
border-radius: 12px
color: $light-blue
font-size: .85em
cursor: default
transition: all .2s ease-in-out
&:hover
background: $light-blue
color: var(--white)

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

@@ -2,12 +2,16 @@
&-list
a
display: inline-block
padding: 0 8px
margin: 2px
padding: 2px 7px
line-height: 1.7
transition: all .3s
addBorderRadius(5)
&:hover
color: $text-hover !important
transform: scale(1.1)
background: var(--btn-bg) !important
box-shadow: 2px 2px 6px rgba(0, 0, 0, .2)
color: var(--btn-color) !important
+maxWidth768()
zoom: .85

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

@@ -10,6 +10,11 @@
background: var(--search-bg)
color: var(--search-input-color)
.ais-SearchBox-loadingIndicator
position: absolute
top: 18px
left: 67px
.ais-Hits-list
margin: 0
padding: 0
@@ -66,7 +71,7 @@
#algolia-hits
> div
overflow-y: scroll
overflow-y: overlay
margin: 0 -20px
padding: 0 22px
max-height: calc(80vh - 240px)

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

@@ -7,9 +7,9 @@
margin-left: -300px
padding: 20px
width: 600px
border-radius: 8px
background: var(--search-bg)
--search-height: 100vh
addBorderRadius(8)
+maxWidth768()
top: 0
@@ -53,8 +53,7 @@
display: none
background: rgba($dark-black, .6)
if hexo-config('algolia_search.enable')
if hexo-config('search.use') == 'algolia_search'
@require 'algolia'
if hexo-config('local_search.enable')
else if hexo-config('search.use') == 'local_search'
@require 'local-search'

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

@@ -10,6 +10,7 @@
background-color: var(--btn-beautify-color, $btn-default-color)
color: $btn-color
line-height: 2
addBorderRadius()
for $type in $color-types
&.{$type}

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

@@ -6,13 +6,16 @@
margin: 6px 4px
width: calc(50% - 8px)
height: 250px
border-radius: 8px
border-radius: 10px
background: $dark-black
-webkit-transform: translate3d(0, 0, 0)
+maxWidth600()
width: calc(100% - 8px)
+minWidth1024()
width: calc(100% / 3 - 8px)
&:hover
img
opacity: .4
@@ -95,8 +98,12 @@
padding: 0 0 16px
.gallery-container
margin: 0 0 16px
margin: 0 0 20px
text-align: center
opacity: 0
&.loaded
opacity: 1
img
display: initial
@@ -109,18 +116,20 @@
button
margin-top: 25px
padding: 10px
width: 9em
border-radius: 5px
padding: 8px 14px
background: var(--btn-bg)
color: var(--btn-color)
font-weight: bold
font-size: 1.1em
transition: all .3s
addBorderRadius(5)
&:hover
background: var(--btn-hover-color)
i
margin-left: 4px
.loading-container
display: inline-block
overflow: hidden

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

@@ -6,6 +6,7 @@
padding: 5px 18px
background: $tag-hide-bg
color: var(--white)
addBorderRadius()
&:hover
background-color: var(--btn-hover-color)
@@ -35,6 +36,7 @@
.toggle
margin-bottom: 20px
border: 1px solid $tag-hide-toggle-bg
addBorderRadius()
& > .toggle-button
padding: 6px 15px

2
source/css/_tags/label.styl
View File

@@ -1,7 +1,7 @@
.hl-label
padding: 2px 4px
border-radius: 3px
color: $btn-color
addBorderRadius(3)
&.default
background-color: $btn-default-color

5
source/css/_tags/series.styl Normal file
View File

@@ -0,0 +1,5 @@
#article-container
.series-items
a
&:hover
color: var(--pseudo-hover)

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

@@ -6,6 +6,8 @@
border-right: 1px solid var(--tab-border-color)
border-bottom: 1px solid var(--tab-border-color)
border-left: 1px solid var(--tab-border-color)
addBorderRadius()
overflow: hidden
> .nav-tabs
display: flex

9
source/css/var.styl
View File

@@ -13,8 +13,11 @@ $code-foreground = $themeColorEnable && hexo-config('theme_color.code_foreground
$code-background = $themeColorEnable && hexo-config('theme_color.code_background') ? convert(hexo-config('theme_color.code_background')) : rgba(27, 31, 35, .05)
$theme-toc-color = $themeColorEnable && hexo-config('theme_color.toc_color') ? convert(hexo-config('theme_color.toc_color')) : $strong-cyan
// font
$dafault-font-family = -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif
$dafault-code-font = consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', sans-serif
$chinseFont = $language == 'zh-CN' ? 'Microsoft YaHei' : 'Microsoft JhengHei'
$dafault-font-family = -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', $chinseFont, sans-serif
$dafault-code-font = consolas, Menlo, 'PingFang SC', $chinseFont, sans-serif
$font-family = hexo-config('font.font-family') ? unquote(hexo-config('font.font-family')) : $dafault-font-family
$code-font-family = hexo-config('font.code-font-family') ? unquote(hexo-config('font.code-font-family')) : $dafault-code-font
$site-name-font = hexo-config('blog_title_font.font-family') && unquote(hexo-config('blog_title_font.font-family'))
@@ -59,7 +62,7 @@ $sticky-color = $light-orange
$theme-meta-color = $themeColorEnable && hexo-config('theme_color.meta_color') ? convert(hexo-config('theme_color.meta_color')) : #858585
// sidebar
$sidebar-background = #f6f8fa
$sidebar-width = 300px
$sidebar-width = 330px
// aside
$toc-link-color = #666261
$toc-mobile-width = calc(100% - 80px)