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

breaking change: 重構 gallery 標籤外掛

Browse Source 
improvement: 首頁社交圖標左右邊距調整
feat: 文章版權增加圖標
improvement: 重構 main.js 代碼
improvement: 優化 pjax 下的性能
fix: 修復子目錄下,pjax 跳轉 404 錯誤
feat: getScript 增加 attribute 配置
improvement: 優化手機端 toc 打開和關閉特效
improvement: 文章進入特效改為 transform, 優化 stylus
improvement: 目錄側邊欄出現滾動條時，元素不會被擠壓
feat: 文章左右對齊
improvement: 處理 waline 的 url 後面多 / 導致跨域的問題
fix: 修復夜間模式下，小屏幕的toc 滾動條顏色不明顯的 bug
fix: 修復設置字體超過17px時，toc 裏面的邊框異常的 bug
improvement: 優化語言文件部分用詞
improvement: disqus 和 disqusjs 的評論數獲取不到時，顯示為 0
improvement: disqusjs 的評論數改為 api 獲取
improvement: 代碼優化
improvement: 更新 plugins.yml
This commit is contained in:
Jerry
2023-08-06 18:43:39 +08:00
Unverified
parent 347f605def
commit 775942ae3e
63 changed files with 1267 additions and 1113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -155,7 +155,7 @@ if hexo-config('enter_transitions')
&.open
for i in 1 2 3 4
> :nth-child({i})
animation: sidebarItem (i / 5)s
animation: sidebarItem (i / 5s)
.scroll-down-effects
animation: scroll-down-effect 1.5s infinite
@@ -169,16 +169,16 @@ if hexo-config('avatar.effect') == true
@keyframes scroll-down-effect
0%
top: 0
opacity: .4
transform: translate(0, 0)
50%
top: -16px
opacity: 1
transform: translate(0, -16px)
100%
top: 0
opacity: .4
transform: translate(0, 0)
@keyframes header-effect
0%
@@ -198,12 +198,12 @@ if hexo-config('avatar.effect') == true
@keyframes bottom-top
0%
margin-top: 50px
opacity: 0
transform: translateY(50px)
100%
margin-top: 0
opacity: 1
transform: translateY(0)
@keyframes titleScale
0%

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

@@ -13,6 +13,16 @@ wordWrap = $highlight_enable && !$highlight_line_number && hexo-config('code_wor
--hlscrollbar-bg: $highlight-scrollbar
--hlexpand-bg: linear-gradient(180deg, rgba($highlight-background, .6), rgba($highlight-background, .9))
[data-theme='dark']
--hl-color: alpha(#FFFFFF, .7)
--hl-bg: lighten(#121212, 2)
--hltools-bg: lighten(#121212, 3)
--hltools-color: #90a4ae
--hlnumber-bg: lighten(#121212, 2)
--hlnumber-color: alpha(#FFFFFF, .4)
--hlscrollbar-bg: lighten(#121212, 5)
--hlexpand-bg: linear-gradient(180deg, rgba(lighten(#121212, 2), .6), rgba(lighten(#121212, 2), .9))
if $highlight_enable
@require 'highlight/index'
@@ -94,8 +104,13 @@ $code-block
color: var(--hltools-color)
font-size: $code-font-size
&.closed ~ *
display: none
&.closed
& ~ *
display: none
.expand
transition: all .3s
transform: rotate(-90deg) !important
.expand
position: absolute
@@ -106,10 +121,6 @@ $code-block
& + .code-lang
left: 1.7em
&.closed
transition: all .3s
transform: rotate(-90deg) !important
.code-lang
position: absolute
left: 14px

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

@@ -179,6 +179,13 @@
> .parent
> a
&.expand
i
transform: rotate(-90deg)
& + .child
display: block
.card-category-list
&-name
width: 70% !important
@@ -187,15 +194,12 @@
width: calc(100% - 70% - 20px)
text-align: right
i
float: right
margin-right: -.5em
padding: .5em
transition: transform .3s
transform: rotate(0)
&.expand
transform: rotate(-90deg)
i
float: right
margin-right: -.5em
padding: .5em
transition: transform .3s
transform: rotate(0)
if hexo-config('aside.card_categories.expand') == false
> .child
@@ -220,16 +224,19 @@
+maxWidth900()
position: fixed
right: -100%
right: 55px
bottom: 30px
z-index: 100
max-width: $toc-mobile-maxWidth
max-height: calc(100% - 60px)
width: $toc-mobile-width
opacity: 0
transition: initial
transition: transform .3s
transform: scale(0)
transform-origin: right bottom
&.open
transform: scale(1)
.toc-percentage
float: right
margin-top: -9px
@@ -242,6 +249,7 @@
overflow-y: overlay
margin: 0 -24px
max-height: calc(100vh - 120px)
width: calc(100% + 48px)
+maxWidth900()
max-height: calc(100vh - 140px)

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

@@ -8,7 +8,7 @@
font-weight: 700
font-size: 1.43em
#comment-switch
.comment-switch
display: inline-block
if hexo-config('comments.text')
@@ -30,7 +30,7 @@
.second-comment
color: $comments-switch-second-text
.switch-btn
#switch-btn
position: relative
display: inline-block
margin: -4px 8px 0
@@ -53,12 +53,24 @@
content: ''
transition: .4s
&.move
background-color: $comments-switch-second-text
&:before
transform: translateX(20px)
.comment-wrap
> div:nth-child(2)
display: none
> div
animation: tabshow .5s
&:nth-child(2)
display: none
&.move
#switch-btn
background-color: $comments-switch-second-text
&:before
transform: translateX(20px)
.comment-wrap
> div
&:first-child
display: none
&:last-child
display: block

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

@@ -51,7 +51,6 @@
#site_social_icons
display: none
margin: 0 auto
width: 300px
text-align: center
+maxWidth768()
@@ -65,7 +64,7 @@
#scroll-down
position: absolute
bottom: 0
bottom: 10px
width: 100%
cursor: pointer
@@ -73,7 +72,7 @@
position: relative
width: 100%
color: var(--light-grey)
font-size: 30px
font-size: 20px
// page
&.not-home-page

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

@@ -72,6 +72,7 @@ beautify()
#article-container
word-wrap: break-word
overflow-wrap: break-word
text-align: justify
a
color: $theme-link-color
@@ -226,6 +227,9 @@ beautify()
color: $light-blue
font-weight: bold
i
margin-right: 3px
&-info
padding-left: 6px

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

@@ -6,6 +6,10 @@
opacity: 0
transition: all .5s
&.rightside-show
opacity: .8
transform: translate(-58px, 0)
#rightside-config-hide
height: 0
opacity: 0

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

@@ -13,7 +13,8 @@
right: -($sidebar-width)
z-index: 103
overflow-x: hidden
overflow-y: auto
overflow-y: scroll
padding-left: 5px
width: $sidebar-width
height: 100%
background: var(--sidebar-bg)
@@ -32,7 +33,7 @@
margin: 20px auto
.menus_items
padding: 0 10px 40px
padding: 0 5px
.site-page
@extend .limit-one-line
@@ -53,7 +54,7 @@
& > i:last-child
position: absolute
top: .78em
right: 18px
right: 13px
transition: transform .3s
&.hide
@@ -65,4 +66,5 @@
.menus_item_child
margin: 0
padding-left: 25px
list-style: none

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

@@ -28,15 +28,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
--blockquote-bg: lighten(#121212, 10)
--reward-pop: lighten(#121212, 10)
--toc-link-color: alpha(#FFFFFF, .6)
--hl-color: alpha(#FFFFFF, .7)
--hl-bg: lighten(#121212, 2)
--hltools-bg: lighten(#121212, 3)
--hltools-color: #90a4ae
--hlnumber-bg: lighten(#121212, 2)
--hlnumber-color: alpha(#FFFFFF, .4)
--hlscrollbar-bg: lighten(#121212, 5)
--hlexpand-bg: linear-gradient(180deg, rgba(lighten(#121212, 2), .6), rgba(lighten(#121212, 2), .9))
--scrollbar-color: lighten(#121212, 5)
--scrollbar-color: lighten(#121212, 25)
--timeline-bg: lighten(#121212, 5)
--zoom-bg: #121212
--mark-bg: alpha($dark-black, .6)
@@ -78,11 +70,11 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
#post-comment
#comment-switch
.comment-switch
if hexo-config('comments.text')
background: #2c2c2c !important
.switch-btn
#switch-btn
filter: brightness(.8)
// note

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

@@ -145,18 +145,7 @@ if hexo-config('readmode')
background: transparent
> .tab
border-bottom: 0
button
border-top: none !important
background: transparent
&:hover
background: none !important
&.active
button
text-decoration: underline
border-top: none !important
> .tab-contents .tab-item-content.active
animation: none

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

@@ -94,25 +94,20 @@
overflow: auto
padding: 0 0 16px
.gallery
.gallery-container
margin: 0 0 16px
text-align: center
.fj-gallery
opacity: 0
img
display: initial
margin: 0
width: 100%
height: 100%
.img-alt
display: none
&.lazyload
+ button
display: inline-block
.gallery-data
display: none
.gallery-data
display: none
button
display: none
margin-top: 25px
padding: 10px
width: 9em
@@ -123,17 +118,88 @@
font-size: 1.1em
transition: all .3s
& > *
transition: all .4s
i
width: 0
opacity: 0
&:hover
background: var(--btn-hover-color)
i
margin-left: 2px
width: 20px
opacity: 1
.loading-container
display: inline-block
overflow: hidden
width: 154px
height: 154px
.loading-item
position: relative
width: 100%
height: 100%
backface-visibility: hidden
transform: translateZ(0) scale(1)
transform-origin: 0 0
div
position: absolute
width: 30.8px
height: 30.8px
border-radius: 50%
background: #e15b64
transform: translate(61.6px, 61.6px) scale(1)
animation: loading-ball 1.92s infinite cubic-bezier(0, .5, .5, 1)
&:nth-child(1)
background: #f47e60
transform: translate(113.96px, 61.6px) scale(1)
animation: loading-ball-r .48s infinite cubic-bezier(0, .5, .5, 1), loading-ball-c 1.92s infinite step-start
&:nth-child(2)
background: #e15b64
animation-delay: -.48s
&:nth-child(3)
background: #f47e60
animation-delay: -.96s
&:nth-child(4)
background: #f8b26a
animation-delay: -1.44s
&:nth-child(5)
background: #abbd81
animation-delay: -1.92s
@keyframes loading-ball
0%
transform: translate(9.24px, 61.6px) scale(0)
25%
transform: translate(9.24px, 61.6px) scale(0)
50%
transform: translate(9.24px, 61.6px) scale(1)
75%
transform: translate(61.6px, 61.6px) scale(1)
100%
transform: translate(113.96px, 61.6px) scale(1)
@keyframes loading-ball-r
0%
transform: translate(113.96px, 61.6px) scale(1)
100%
transform: translate(113.96px, 61.6px) scale(0)
@keyframes loading-ball-c
0%
background: #e15b64
25%
background: #abbd81
50%
background: #f8b26a
75%
background: #f47e60
100%
background: #e15b64

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

@@ -15,43 +15,36 @@
background: var(--tab-botton-bg)
> .tab
margin: 0
padding: 0
list-style: none
flex-grow: 1
padding: 8px 18px
border-top: 2px solid var(--tab-border-color)
background: var(--tab-botton-bg)
color: var(--tab-botton-color)
line-height: 2
transition: all .4s
+maxWidth768()
flex-grow: 1
button
display: block
padding: 8px 18px
width: 100%
border-top: 2px solid var(--tab-border-color)
background: var(--tab-botton-bg)
color: var(--tab-botton-color)
line-height: 2
transition: all .4s
i
width: 1.5em
i
width: 1.5em
&.active
button
border-top: 2px solid $tab-active-border-color
background: var(--tab-button-active-bg)
cursor: default
border-top: 2px solid $tab-active-border-color
background: var(--tab-button-active-bg)
cursor: default
&:not(.active)
button
&:hover
border-top: 2px solid var(--tab-button-hover-bg)
background: var(--tab-button-hover-bg)
&:hover
border-top: 2px solid var(--tab-button-hover-bg)
background: var(--tab-button-hover-bg)
&.no-default
& ~ .tab-to-top
display: none
> .tab-contents
.tab-item-content
position: relative
display: none
padding: 36px 24px
padding: 36px 24px 10px
+maxWidth768()
padding: 24px 14px
@@ -60,11 +53,16 @@
display: block
animation: tabshow .5s
.tab-to-top
position: absolute
right: 15px
display: block
color: $tab-to-top-color
> .tab-to-top
padding: 0 16px 10px 0
width: 100%
text-align: right
button
color: $tab-to-top-color
&:hover
color: $tab-to-top-hover-color
@keyframes tabshow
0%

1
source/css/var.styl
View File

@@ -179,6 +179,7 @@ $tab-button-hover-bg = darken($tab-border-color, 8)
$tab-active-border-color = $theme-color
$tab-button-active-bg = $card-bg
$tab-to-top-color = #99a9bf
$tab-to-top-hover-color = $theme-color
// Tag Plugins - timeline
$timeline-default-color = $theme-color
// archor