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

feat: 只支持 hexo 5.0.0 及以上版本

Browse Source 
feat: toc改為aside顯示,去掉sidebar
feat: 手機toc ui 修改
feat: 去掉 toc auto_open 配置
feat: 文章標題改為居中
improvement: 完善note標籤在readmode上的顯示
improvement: 精簡css 和 js
improvement： pjax 優化
fix: 修復當文章頁top_img設為false時，閲讀模式下文章內容不顯示的bugs
This commit is contained in:
Jerry
2020-10-11 18:25:58 +08:00
Unverified
parent b078ebef14
commit 83b7232841
31 changed files with 291 additions and 506 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -68,26 +68,6 @@ if hexo-config('enter_transitions')
#ribbon-canvas
animation: ribbon_to_show 4s
.tocOpenPc
.sidebar-toc__title
animation: tocsidebarLtoR .5s
.sidebar-toc__progress
animation: tocsidebarLtoR .7s
.sidebar-toc__content
animation: tocsidebarLtoR .9s
.tocOpenMobile
.sidebar-toc__title
animation: tocsidebarRtoL .4s
.sidebar-toc__progress
animation: tocsidebarRtoL .6s
.sidebar-toc__content
animation: tocsidebarRtoL .7s
#mobile-sidebar-menus
&.open
for i in 1 2 3 4
@@ -215,19 +195,5 @@ if hexo-config('avatar.effect') == true
0%
transform: translateX(200px)
100%
transform: translateX(0)
@keyframes tocsidebarRtoL
0%
transform: translateX(200px)
100%
transform: translateX(0)
@keyframes tocsidebarLtoR
0%
transform: translateX(-200px)
100%
transform: translateX(0)

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

@@ -26,6 +26,7 @@
--blockquote-bg: $blockquote-background-color
--reward-pop: $reward-pop-up-bg
--sidebar-icon-color: $sidebar-icon-color
--toc-link-color: $toc-link-color
html
height: 100%
@@ -140,6 +141,16 @@ button
background: none
cursor: pointer
a
color: $a-link-color
text-decoration: none
word-wrap: break-word
transition: all .2s
overflow-wrap: break-word
&:hover
color: $light-blue
// font
#site-title,
#site-subtitle,
@@ -183,6 +194,10 @@ button
transition-timing-function: cubic-bezier(.45, 1.64, .47, .66)
transform: scaleX(1)
img
max-width: 100%
transition: all .2s
img[src=''],
img:not([src])
opacity: 0

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

@@ -1,10 +1,27 @@
#aside_content
width: 25%
+minWidth900()
if hexo-config('aside.position') == 'right'
padding-left: 15px
else
padding-right: 15px
+maxWidth900()
width: 100%
if hexo-config('aside.mobile') == false
+maxWidth768()
display: none
> .card-widget:first-child
margin-top: 0
+maxWidth900()
margin-top: 1rem
.card-widget
position: relative
overflow: hidden
margin-top: 1rem
border-radius: 8px
@@ -82,15 +99,12 @@
padding: 1rem 1.2rem
.item-headline
padding-bottom: .3rem
font-size: 1.2em
span
margin-left: .5rem
& + div,
& + ul
padding: .3rem 0 0
.sticky_layout
+minWidth900()
position: sticky
@@ -171,6 +185,7 @@
.card-archives ul.card-archive-list,
.card-categories ul.card-category-list
margin: 0
padding: 0
list-style: none
.card-archives ul.card-archive-list > .card-archive-list-item,
@@ -248,23 +263,71 @@
flex: 1
padding-right: 1rem
+maxWidth900()
#aside_content
width: 100% !important
// toc
#card-toc
+maxWidth900()
position: fixed
right: 45px
bottom: 30px
z-index: 9999
display: none
width: 300px
transform-origin: right bottom
animation: toc-close .3s
#aside_content
.card-widget:first-child
margin-top: 1rem
&.open
display: block
animation: toc-open .3s
+minWidth900()
#aside_content
.card-widget
if hexo-config('aside.position') == 'right'
margin-left: 15px
else
margin-right: 15px
.toc-child
display: block !important
if hexo-config('aside.mobile') == false
+maxWidth768()
#aside_content
display: none
.toc-content
overflow-y: auto
max-height: calc(100vh - 120px)
ol,
li
list-style: none
> ol
padding: 0 !important
ol
margin: 0
padding-left: .4rem
.toc-link
display: block
padding-left: .3rem
border-left: 3px solid transparent
color: var(--toc-link-color)
transition: all .2s ease-in-out
&.active
border-left-color: darken($theme-toc-color, 20%)
background: $theme-toc-color
color: $sidebar-active-color
&:before
position: absolute
top: .6rem
right: 1.2rem
color: #a9a9a9
content: attr(progress-percentage)
font-style: italic
font-size: 1.2rem
@keyframes toc-open
0%
transform: scale(.7)
100%
transform: scale(1)
@keyframes toc-close
0%
transform: scale(.7)
100%
transform: scale(1)

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

@@ -116,10 +116,14 @@
#post-info
position: absolute
bottom: 1.5rem
bottom: 5rem
padding: 0 8%
width: 100%
text-align: left
text-align: center
+maxWidth900()
bottom: 1.5rem
text-align: left
+maxWidth768()
bottom: 1.1rem
@@ -128,7 +132,7 @@
#post-info
#post-title
margin-bottom: .4rem
font-size: 2.15em
font-size: 2.5em
+maxWidth768()
font-size: 1.72em

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

@@ -59,6 +59,9 @@
.next-post
width: 50%
+maxWidth768()
width: 100%
a
position: relative
display: block
@@ -73,9 +76,4 @@
&.pagination-post
margin: 2rem 0 !important
background: $dark-black
+maxWidth768()
.prev-post,
.next-post
width: 100% !important
background: $dark-black

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

@@ -142,6 +142,24 @@ no-beautify()
padding-left: .3rem
#article-container
word-wrap: break-word
overflow-wrap: break-word
a
color: $theme-link-color
&:hover
text-decoration: underline
img
margin: 0 auto .8rem
p
margin: 0 0 .8rem
iframe
margin: 0 0 1rem
if hexo-config('beautify.enable') && hexo-config('beautify.field') == 'site'
beautify()
else if hexo-config('beautify.enable') && hexo-config('beautify.field') == 'post'
@@ -152,42 +170,7 @@ no-beautify()
else
no-beautify()
a
color: $a-link-color
text-decoration: none
word-wrap: break-word
transition: all .2s
overflow-wrap: break-word
&:hover
color: $light-blue
a.fancybox
outline: none
&:focus
outline: none
display: inline-block
width: 100%
text-align: center
img
max-width: 100%
transition: all .2s
.katex-wrap
overflow: auto
if hexo-config('katex') && hexo-config('katex.hide_scrollbar')
&::-webkit-scrollbar
display: none
.layout_post
margin: 0 auto
padding: 2rem 15px
max-width: 1000px
#post
img
display: block
@@ -272,25 +255,6 @@ img
&:hover
text-decoration: none
#article-container
word-wrap: break-word
overflow-wrap: break-word
a
color: $theme-link-color
&:hover
text-decoration: underline
img
margin: 0 auto .8rem
p
margin: 0 0 .8rem
iframe
margin: 0 0 1rem
.post-outdate-notice
position: relative
margin: 0 0 1rem
@@ -311,25 +275,3 @@ img
color: $noticeOutdate-border
content: '\f071'
transform: translateY(-50%)
+maxWidth1024()
.layout_post
width: auto
+maxWidth768()
.layout_post
padding: 1rem 5px
& > #post
padding: 1.8rem .7rem
// adjust the layout width in big screen
+minWidth2000()
.layout_post
max-width: 1300px
.layout_page
max-width: 1500px
&.hide-aside
max-width: 1300px

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

@@ -1,88 +0,0 @@
#toggle-sidebar
position: fixed
bottom: $sidebar-icon-top
left: $sidebar-icon-left
z-index: 100
color: var(--sidebar-icon-color)
font-size: $sidebar-icon-size
cursor: pointer
transition: all .2s
+maxWidth1024()
display: none
#sidebar
position: fixed
top: 0
left: -($sidebar-width)
z-index: 10
padding: 1rem 0 2rem .5rem
width: $sidebar-width
height: 100%
background: var(--sidebar-bg)
opacity: .9
&.tocOpenPc
& > #toggle-sidebar
color: #99a9bf
transform: rotateZ(180deg)
+maxWidth1024()
right: -($mobile-sidebar-width)
left: auto
z-index: 103
width: $mobile-sidebar-width
box-shadow: none
opacity: 1
transition: all .4s
.toc-child
display: block !important
.sidebar-toc
ol,
li
list-style: none
ol
margin-top: .2rem
padding-left: .4rem
&__title
padding-right: .5rem
text-align: center
font-size: 1.3em
&__content
overflow-y: scroll
padding-bottom: 5rem
height: 90vh
.toc-link
display: block
padding-left: .2rem
border-right: 3px solid transparent
transition: all .2s ease-in-out
&.active
border-right-color: darken($theme-toc-color, 20%)
background: $theme-toc-color
color: $sidebar-active-color
&__progress
position: relative
margin-bottom: .3rem
padding-left: .6rem
color: $theme-toc-color
.progress-notice
margin-right: .4rem
.progress-num
display: inline-block
min-width: .9rem
&-bar
width: 0
height: 1px
background: $theme-toc-color

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

@@ -61,6 +61,13 @@
margin: 0 0 .8em
padding: .3rem 0 .8em
.katex-wrap
overflow: auto
if hexo-config('katex') && hexo-config('katex.hide_scrollbar')
&::-webkit-scrollbar
display: none
// mathjax
.mathjax-overflow
overflow-x: auto

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

@@ -27,6 +27,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
--blockquote-bg: lighten(#121212, 10)
--reward-pop: lighten(#121212, 10)
--sidebar-icon-color: alpha(#FFFFFF, .7)
--toc-link-color: alpha(#FFFFFF, .6)
#web_bg:before,
#footer:before,

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

@@ -12,18 +12,21 @@ if hexo-config('readmode')
[data-theme='dark']
.read-mode
--font-color: rgba(255, 255, 255, .6)
--font-color: rgba(255, 255, 255, .7)
--readmode-light-color: #0d0d0d
--white: rgba(255, 255, 255, .8)
--light-grey: rgba(255, 255, 255, .6)
--gray: rgba(255, 255, 255, .6)
--hr-border: rgba(255, 255, 255, .3)
--hr-before-color: rgba(255, 255, 255, .6)
--white: rgba(255, 255, 255, .9)
--light-grey: rgba(255, 255, 255, .7)
--gray: rgba(255, 255, 255, .7)
--hr-border: rgba(255, 255, 255, .5)
--hr-before-color: rgba(255, 255, 255, .7)
-highlight-bg: #171717
.read-mode
background: var(--readmode-light-color)
#aside_content
display: none
#body-wrap
padding-left: 0 !important
@@ -38,23 +41,21 @@ if hexo-config('readmode')
padding: 0
text-align: center
.layout_post
> #post
background: transparent
box-shadow: none
#post
margin: 0 auto
background: transparent
box-shadow: none
&:hover
box-shadow: none
&:hover
box-shadow: none
& > canvas
display: none !important
.highlight-tools,
#footer,
#post > *:not(:first-child),
#post > *:not(#post-info):not(.post-content),
#to_comment,
#sidebar,
#toggle-sidebar,
#mobile-toc-button,
#nav,
.post-outdate-notice,
@@ -179,6 +180,7 @@ if hexo-config('readmode')
.note
border: 2px solid var(--gray)
border-left-color: var(--gray) !important
filter: none
background-color: var(--readmode-light-color)
background-color: var(--readmode-light-color) !important
color: var(--font-color)

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

@@ -1,4 +1,4 @@
.layout_page
.layout
display: flex
margin: 0 auto
padding: 2rem 15px
@@ -10,7 +10,20 @@
+maxWidth768()
padding: 1rem 5px !important
+minWidth2000()
max-width: 1500px
& > div:first-child:not(.recent-posts)
align-self: flex-start
padding: 50px 40px
border-radius: 8px
background: var(--card-bg)
box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
transition: all .3s
&:hover
box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
+maxWidth768()
padding: 1.8rem .7rem !important
@@ -20,31 +33,20 @@
+maxWidth900()
width: 100% !important
if hexo-config('aside.position') == 'left'
+minWidth900()
order: 2
// 隱藏aside
&.hide-aside
max-width: 1000px
+minWidth2000()
max-width: 1300px
& > div
width: 100% !important
.layout_post > #post,
.layout_page > div:first-child:not(.recent-posts)
align-self: flex-start
padding: 50px 40px
border-radius: 8px
background: var(--card-bg)
box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
transition: all .3s
&:hover
box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
if hexo-config('aside.position') == 'left'
+minWidth900()
.layout_page
& > div:first-child
order: 2
#page
h1.page-title
margin-top: .4rem

2
source/css/var.styl
View File

@@ -66,6 +66,8 @@ $sidebar-width = 300px
$sidebar-background = #f6f8fa
$sidebar-active-color = #fff
$mobile-sidebar-width = 250px
// aside
$toc-link-color = #666261
// Button
$button-color = #fff
$button-hover-color = $themeColorEnable && hexo-config('theme_color.button_hover') ? convert(hexo-config('theme_color.button_hover')) : $light-orange