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

1. Feature: 可設置内联代码块样式 #26

Browse Source 
2. Feature: 可設置夜間模式作爲默認樣式
3. Feature: 可設置是否顯示code language名稱
4. Feature: 可設置是否展開或關閉代碼框
5. Feature: 可設置背景圖片/顔色
6. Feature: 可設置是否顯示footer背景
7. Feature: 增加 canvas-nest.js
8. Feature: 頭像可設置效果(轉圈圈)
9. Feature: menu可設置分組
9. Fix: 優化打賞和搜索打開特效
10. Fix: 優化sidebar的打開特效，避免與文章頁特效不同步
11. Fix: 適配**hexo-blog-encrypt**，現在可以顯示toc
12. Fix: 修復設置不顯示評論時，直達評論按鈕沒有消失的bug
13. Fix: 修復post頁底欄，當沒有顯示評論，不顯示TOC，評論和toc都不顯示 這三種狀態下按鈕的bug
14. Fix: 修復代碼框左右滑動時，代碼名字跟著滑動的bug
15. Fix: 其他page頁標題的字體顯示
16. Fix: 修復當設置開啓canvas_ribbons，進入網站會先顯示canvas_ribbons的bug
17. Fix: 完善夜間模式下，字體顯示問題
18. Fix: 修復代碼框 複製 和 代碼名 z-index bug #25
19. Fix: 完善阅读模式
This commit is contained in:
Jerry
2019-09-08 16:17:07 +08:00
Unverified
parent 91bb944931
commit 83dc0559c0
32 changed files with 722 additions and 400 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -258,9 +258,6 @@
.card-archives
margin-bottom: 20px
.card-announcement-animation
animation: announ_animation 1.5s infinite
.card-webinfo
.webinfo

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

@@ -4,11 +4,27 @@ footer
background-attachment: local
background-position: bottom
background-size: cover
position: relative
if hexo-config('footer_bg') != false
&:before
position: absolute
bottom: 0
left: 0
display: block
content: ''
width: 100%
height: 100%
opacity: 0.5
background-color: #394245
background-image: linear-gradient(234deg, #394245 0%, #000 100%)
#footer
padding: 1.2rem 1rem 1rem
color: $light-grey
text-align: center
position: relative
a
color: $light-grey

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

@@ -1,18 +1,21 @@
#nav
position: relative
margin-bottom: 1rem
background-color: $light-blue
background-position: center
background-size: cover
&.full_page
background-attachment: local
height: 100vh
&.bg_local
.nav_bg
width: 100%
height: 100%
background-color: $light-blue
background-position: center
background-size: cover
background-attachment: local
&.not_index_bg
height: 20rem
#site-social-icons
margin: 0 auto
@@ -49,6 +52,11 @@
#site-sub-title
font-size: 0.8rem
#page_site-info
position: absolute
top: 10rem
width: 100%
.scroll-down
position: absolute
bottom: 0
@@ -58,6 +66,10 @@
font-size: 30px
text-align: center
.scroll-down-effects
position: absolute
color: #fff
#page-header
position: absolute
@@ -152,6 +164,20 @@
// letter-spacing: .5px
text-transform: uppercase
color:#4c4948
.menus-expand
position: absolute
width: 30px !important
height: 30px
right: 0
padding: 6px
display: none
transform: rotate(0deg)
transition: all .3s
&.menus-closed
transform: rotate(180deg) !important
transition: all .3s
hr
margin: 1rem auto
@@ -166,13 +192,10 @@
.site-page
position: relative
margin-left: 0.6rem
padding-bottom: 0.3rem
text-shadow: 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.3)
font-size: 0.7rem
cursor: pointer
margin-left: 1rem
&::after
position: absolute
bottom: 0
@@ -225,13 +248,58 @@
font-weight: bold
cursor: pointer
@media screen and (min-width: $sm)
@media screen and (min-width: $sm)
#site-title
font-size: 2rem
#site-sub-title
font-size: 1.2rem
#page-header
.menus_item
display: inline-block
padding: 0 0.5rem
&:hover,&:focus
.menus_item_child
display: block
.menus_item_child
position: absolute
background-color: alpha($white, 0.8)
padding: 8px 10px
width: fit-content
border-radius: 5px
box-shadow: 0 5px 20px -4px rgba(0,0,0,.5)
display: none
opacity: 1
animation: sub_menus .3s .1s ease both
&:before
content: ""
position: absolute
top: -20px
left: 50%
margin-left: -10px
border-width: 10px
border-style: solid
border-color: transparent transparent alpha($white, 0.8)
.menus_item_child li
list-style: none
text-align: center
a
color: #3b3a3a;
text-shadow: none;
&.fixed.visible
.menus_item_child
background-color: #ffffff
&:before
border-color: transparent transparent #ffffff
@media screen and (max-width: $sm)
#page-header
padding: 10px 0.8rem
@@ -255,7 +323,7 @@
.mobile_post_data
display: flex
.menus_item
.menus_items
a
display: block !important
opacity: 1 !important
@@ -278,11 +346,18 @@
&:hover
color: $light-blue
.menus-expand
display: inline-block
.menus_item_child
list-style: none
margin: 0
.mobile_author_icon
display: block
.menus_item
.menus_items
padding: 0 .5rem
margin-bottom: 5rem
@@ -298,4 +373,7 @@
&.fixed.open-sidebar
.search
display: inline-block
opacity: 1
opacity: 1

34
source/css/_layout/nightshift.styl
View File

@@ -1,8 +1,5 @@
if hexo-config("nightshift") && hexo-config("nightshift.enable")
.night-mode
footer
background: #2d3035
#sidebar
background: #2d3035 !important
box-shadow: -0.25rem 0 0.25rem #2d3035 !important
@@ -183,7 +180,8 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
background:#2d3035
#nav,
#top-container
#top-container,
footer
&::before
content: ""
position: absolute
@@ -202,10 +200,14 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
#site-info .blogtitle,
span.subtitle,
#site-title,
#post-info .posttitle,
#post-info #post-meta,
#site-social-icons i,
#top-container a
#top-container a,
#footer,
#footer a,
#page-header a
color: rgba(238,238,238,.6)
//打賞 分享
@@ -234,6 +236,16 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
a
color: #99a9bf !important
#web_bg
background-color: #2d3032
#hbe-security
label
color: #99a9bf !important
input
background-color: #616a6b
@media screen and (max-width: 768px)
.night-mode
color: #99a9bf
@@ -264,6 +276,18 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
.recent-post-item
background: #2d3035 !important
#page-header
.menus_item_child
background-color: #2d3035 !important
&:before
border-color: transparent transparent #2d3035 !important
li
a
color: #99a9bf

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

@@ -285,6 +285,31 @@ img
&:hover
color: darken($highlight-aqua, 20%)
.code_lang
position: absolute
font-weight: bold;
font-size: 0.8rem;
line-height: 1.4rem;
color: $highlight-foreground
left: 30px
z-index: 1
cursor: pointer
.code-expand
position: absolute
top: 0
color: $highlight-foreground
padding: 7px 10px
z-index: 1
cursor: pointer
transition: all .3s
transform: rotate(0deg)
.code-closed
transform: rotate(-90deg) !important
transition: all .3s
.copy-notice
position: absolute
top: 0
@@ -351,8 +376,6 @@ img
@media screen and (min-width: $md)
.layout
width: $content-large-width
.katex-wrap
overflow: auto

15
source/css/_layout/post_bottom.styl
View File

@@ -8,6 +8,7 @@
display: none
transition: all .2s
cursor: pointer
z-index: 100
&.toc_mobile_show
bottom: 0
@@ -30,7 +31,7 @@
width: 50%
height: 70%
position: fixed
bottom: 65px
bottom: 60px
right: 10px
overflow: scroll
padding: 15px 10px
@@ -51,6 +52,18 @@
text-align: center
font-size: 18px
font-weight: bold
&.no_comment_show
#mobile_toc
width: 100%
padding: 16px 0
#toc_mobile
right: 25%
&.no_toc_show
#mobile_to_comment
width: 100%
@media screen and (max-width:768px)
#post_bottom

25
source/css/_layout/readmode.styl
View File

@@ -35,7 +35,7 @@ if hexo-config("readmode") && hexo-config("readmode.enable")
#page-header
&.fixed
background: none
background: alpha(darken($pale-yellow,5),0.5)
box-shadow: none
&.open-sidebar
@@ -99,6 +99,29 @@ if hexo-config("readmode") && hexo-config("readmode.enable")
.copy-notice
background: darken($pale-yellow,10)
.toc_mobile_show
background: alpha(darken($pale-yellow,5),0.5) !important
box-shadow: none !important
#post_bottom_items
#mobile_to_comment
display: none
#mobile_toc
width: 100%
padding: 16px 0
#toc_mobile
right: 25%
background: darken($pale-yellow,5)
@media screen and (min-width: 768px)
.read-mode
.menus_item_child
background-color: darken($pale-yellow,5) !important
&:before
border-color: transparent transparent darken($pale-yellow,5) !important

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

@@ -21,10 +21,6 @@
.relatedPosts_cover
border: 0
-webkit-transition: all 0.6s
-moz-transition: all 0.6s
-o-transition: all 0.6s
-ms-transition: all 0.6s
transition: all 0.6s
display: block
width: 100%
@@ -35,21 +31,21 @@
object-fit: cover
.relatedPosts_title
color: #fff
position: absolute
left: 0
right: 0
top: 45%
height: 60px
padding: 0 30px
display: -webkit-box
-webkit-line-clamp: 2
-webkit-box-orient: vertical
overflow: hidden
max-width: 100%
width: 100%
margin: 0 auto
text-align: center
color: #fff
position: absolute
left: 0
right: 0
top: 45%
height: 60px
padding: 0 30px
display: -webkit-box
-webkit-line-clamp: 2
-webkit-box-orient: vertical
overflow: hidden
max-width: 100%
width: 100%
margin: 0 auto
text-align: center
.relatedPosts_headline
font-size: 20px
@@ -60,7 +56,6 @@
clear: both
@media screen and (max-width:768px)
.relatedPosts_item
width: calc(100%/2 - 4px)

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

@@ -30,6 +30,7 @@
left: 0
transition: all 0.6s
display: none
opacity: 1
.reward-all
margin: 0 auto

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

@@ -10,8 +10,7 @@
background: $sidebar-background
box-shadow: -0.25rem 0 0.25rem rgba(232, 237, 250, 0.6) inset
opacity: 0.9
transition: all 0.2s
.sidebar-toc
ol,
li

166
source/css/_layout/z-other.styl
View File

@@ -96,10 +96,7 @@ a.article-meta__categories
-webkit-box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
#page_site-info
padding: 10rem 1rem 7rem
#site-title
font-family: PingFang SC, Hiragino Sans GB, "Microsoft JhengHei", "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
@media screen and (min-width: 900px)
if hexo-config("aside.position") == "left"
@@ -115,7 +112,10 @@ a.article-meta__categories
width: 100% !important
@media screen and (max-width:768px)
@media screen and (max-width:768px)
#web_bg
display: none
.recent-post-item
height: auto !important
border-radius: 8px
@@ -154,8 +154,7 @@ a.article-meta__categories
&:hover
-webkit-box-shadow: none
box-shadow: none
.layout_page
padding: 0 !important
@@ -164,8 +163,6 @@ a.article-meta__categories
.category-lists
padding: 0
.recent-post-info
padding: 20px 10px !important
@@ -174,11 +171,15 @@ a.article-meta__categories
#recent-posts #pagination
margin-bottom: 0
#nav #site-social-icons
display: block
#nav
#site-social-icons
display: block
#page_site-info
padding: 7rem 1rem 5rem
&.not_index_bg
height: 14rem
#page_site-info
top: 7rem
#top-container
height: 14rem
@@ -195,11 +196,10 @@ a.article-meta__categories
display: none !important
.layout_page,
.layout_post,
footer
animation: main 1s;
animation: main 1s
#nav,
#top-container
@@ -208,82 +208,82 @@ footer
#site-title
animation: titlescale 1s
.search-dialog
transition: all .2s
canvas,#web_bg
animation: to_show 4s
.card-announcement-animation
animation: announ_animation 1.5s infinite
.scroll-down-effects
-webkit-animation: pulse 1.5s infinite
animation: pulse 1.5s infinite
// font-size: 28px
position: absolute
color: #fff
animation: scroll-down-effect 1.5s infinite
.is_hidden
overflow: hidden
@keyframes pulse{
if hexo-config("avatar_effect") == true
.avatar_img
animation: avatar_turn_around 2s linear infinite
0%,to{
opacity:.4
top:0}
50%{
opacity:1
top:-16px}
}
@keyframes header {
0% {
opacity: 0;
transform: translateY(-50px)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
.reward-main
animation: donate_effcet .3s .1s ease both;
@keyframes main {
0% {
opacity: 0;
transform: translateY(50px)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
@keyframes titlescale{
0% {
// opacity:0;
transform: scale(0.7)
}
100% {
// opacity:1;
transform: scale(1)
}
@keyframes scroll-down-effect
0%
opacity: 0.4
top: 0
50%
opacity: 1
top: -16px
100%
opacity: 0.4
top: 0
}
@keyframes header
0%
opacity: 0
transform: translateY(-50px)
100%
opacity: 1
transform: translateY(0)
@keyframes main
0%
opacity: 0
transform: translateY(50px)
100%
opacity: 1
transform: translateY(0)
.article-container .code_full_page
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-width: 100%;
z-index: 9999;
margin: 0;
animation: code_full_page 1s;
@keyframes titlescale
0%
opacity: 0
transform: scale(0.7)
100%
opacity: 1
transform: scale(1)
.code_body
overflow: hidden
@keyframes to_show
0%
opacity: 0
100%
opacity: 1
@keyframes avatar_turn_around
from
transform: rotate(0deg)
to
transform: rotate(360deg)
@keyframes code_full_page{
0%{transform:scale(0)}
50%{transform:scale(1)}
80%{transform:scale(.98)}
100%{transform:scale(1)}}
@keyframes sub_menus
0%
opacity: 0
transform: translateY(10px)
100%
opacity: 1
transform: translateY(0)
@keyframes donate_effcet
0%
opacity: 0
transform: translateY(-20px)
100%
opacity: 1
transform: translateY(0)