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

🏷️ 更新至3.0.0-RC-1 close #189, close #192, close #223, close #224, close #229, close 232, close #240

Browse Source
This commit is contained in:
Jerry
2020-06-16 18:37:22 +08:00
Unverified
parent 0ad2c01fc9
commit aa8c509b96
93 changed files with 2109 additions and 1648 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,44 +1,80 @@
if hexo-config('error_404.enable')
#nav.error-no-found
display: flex
flex-direction: column
justify-content: center
height: 100vh
#error-wrap
position: absolute
top: 50%
right: 0
left: 0
margin: 0 auto
padding: 0 1rem
max-width: 1000px
transform: translate(0, -50%)
&:before
width: 100%
height: 100%
background-color: alpha($dark-black, .5)
content: ''
.error-content
display: flex
flex-direction: row
justify-content: center
align-items: center
margin: 0 1rem
height: 18rem
border-radius: 8px
background: #fff
box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
#error_info
position: absolute
padding: 0 4rem
width: 100%
letter-spacing: 3px
line-height: 1
#error_title,
#error_subtitle
@media screen and (max-width: 768px)
flex-direction: column
margin: 0
padding: 0
color: $light-grey
letter-spacing: 5px
height: 25rem
.error-img
flex: 1
height: 100%
border-top-left-radius: 8px
border-bottom-left-radius: 8px
background-color: #49b1f5
background-position: center
background-size: cover
@media screen and (max-width: 768px)
flex: 1
width: 100%
border-top-right-radius: 8px
border-bottom-left-radius: 0
.error-info
flex: 1
padding: .5rem
text-align: center
font-size: 14px
font-family: $site-name-font
#error_title
font-size: 10rem
@media screen and (max-width: 768px)
flex: 1.1
width: 100%
#error_subtitle
font-size: 2rem
.error_title
margin-top: -4rem
color: $font-color
font-size: 9em
@media screen and (max-width: $sm)
#nav.error-no-found
#error_info
padding: 0 2rem
@media screen and (max-width: 768px)
margin-top: -3rem
#error_title
font-size: 7rem !important
.error_subtitle
@extend .limit-more-line
margin-top: -3.5rem
color: $font-color
word-break: break-word
font-size: 1.6em
-webkit-line-clamp: 2
#error_subtitle
font-size: 1rem !important
a
position: relative
z-index: 1
display: inline-block
margin-top: .5rem
padding: .3rem 1.5rem
background: $theme-color
color: white
i
padding-right: .3rem

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

@@ -43,10 +43,8 @@
a
.headline
overflow: hidden
@extend .limit-one-line
color: $font-black
text-overflow: ellipsis
white-space: nowrap
font-size: .7rem
.length_num
@@ -73,6 +71,7 @@
position: relative
z-index: 1
display: block
width: 100%
background-color: $light-blue
color: $button-color
line-height: 1.6rem
@@ -132,13 +131,11 @@
font-size: .6rem
.aside-post_title
display: -webkit-box
overflow: hidden
@extend .limit-more-line
padding-left: 10px
height: 40px
line-height: 1rem
-webkit-line-clamp: 2
-webkit-box-orient: vertical
&:hover
color: $light-blue !important
@@ -155,23 +152,20 @@
.card-archives ul.card-archive-list > .card-archive-list-item,
.card-categories ul.card-category-list > .card-category-list-item
padding: .15rem 1rem
cursor: pointer
transition: all .5s
&:hover
padding: .15rem .85rem
background-color: $light-blue
a
display: inline-block
padding: .15rem 1rem
width: 100%
color: $font-black
transition: all .4s
&:hover
padding: .15rem .85rem
background-color: $light-blue
span
display: inline-block
overflow: hidden
vertical-align: bottom
text-overflow: ellipsis
white-space: nowrap
&:first-child
width: 80%
@@ -193,7 +187,30 @@
.card-categories
.card-category-list
&.child
padding: 0 0 0 1.2rem
padding: 0 0 0 1rem
> .parent
.card-category-list
&-name
width: 70% !important
&-count
width: 18%
text-align: right
&-icon
float: right
margin-right: -.35rem
padding: .35rem
transition: transform .3s
transform: rotate(0)
&.expand
transform: rotate(-90deg)
if hexo-config('aside.card_categories.expand') == false
+ .child
display: none
.card-webinfo
.webinfo

8
source/css/_layout/chat.styl Normal file
View File

@@ -0,0 +1,8 @@
// 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

147
source/css/_layout/flink.styl
View File

@@ -1,85 +1,76 @@
.flink#article-container
.post-cards
margin: -10px 10px 0
.flink-desc
margin: .2rem 0 .5rem
.md-links
overflow: auto
text-align: center
.flink-list
overflow: auto
padding: 10px 10px 0
text-align: center
& > .md-links-item
position: relative
float: left
overflow: hidden
margin: 20px 7px
width: calc(100% / 3 - 15px)
height: 90px
border-radius: 8px
line-height: 17px
transform: perspective(1px) translateZ(0)
& > .flink-list-item
position: relative
float: left
overflow: hidden
margin: 20px 7px
width: calc(100% / 3 - 15px)
height: 90px
border-radius: 8px
line-height: 17px
transform: perspective(1px) translateZ(0)
&:hover
img
transform: rotate(540deg)
&:before
position: absolute
top: 0
right: 0
bottom: 0
left: 0
z-index: -1
background: $light-blue
content: ''
transition-timing-function: ease-out
transition-duration: .3s
transition-property: transform
transform: scale(0)
&:hover:before,
&:focus:before,
&:active:before
transform: scale(1)
a
color: $font-color
text-decoration: none
img
float: left
margin: 13px 0 0 10px
width: 65px
height: 65px
border-radius: 35px
transition: all .3s
.img-alt
display: none
.md-links-title
overflow: hidden
padding: 16px 10px 0 0
height: 40px
text-overflow: ellipsis
white-space: nowrap
font-weight: bold
font-size: 20px
.md-links-des
overflow: hidden
padding: 16px 10px
height: 50px
text-overflow: ellipsis
white-space: nowrap
font-size: 13px
@media screen and (max-width: 1100px)
.flink
.md-links
.md-links-item
@media screen and (max-width: 1100px)
width: calc(50% - 15px) !important
@media screen and (max-width: 600px)
.flink
.md-links
.md-links-item
@media screen and (max-width: 600px)
width: calc(100% - 15px) !important
&:hover
img
transform: rotate(360deg)
&:before
position: absolute
top: 0
right: 0
bottom: 0
left: 0
z-index: -1
background: $light-blue
content: ''
transition-timing-function: ease-out
transition-duration: .3s
transition-property: transform
transform: scale(0)
&:hover:before,
&:focus:before,
&:active:before
transform: scale(1)
a
color: $font-color
text-decoration: none
img
float: left
margin: 13px 0 0 10px
width: 65px
height: 65px
border-radius: 35px
transition: all .3s
.img-alt
display: none
.flink-item-name
@extend .limit-one-line
padding: 16px 10px 0 0
height: 40px
font-weight: bold
font-size: 20px
.flink-item-desc
@extend .limit-one-line
padding: 16px 10px
height: 50px
font-size: 13px

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

@@ -1,8 +1,8 @@
#nav
#page-header
position: relative
width: 100%
background-color: $light-blue
background-attachment: local
background-attachment: scroll
background-position: center center
background-size: cover
background-repeat: no-repeat
@@ -11,6 +11,7 @@
// index
&.full_page
height: $index_top_img_height
background-attachment: fixed
#site-info
position: absolute
@@ -94,11 +95,9 @@
font-size: 1.5rem
.posttitle
display: -webkit-box
overflow: hidden
@extend .limit-more-line
line-height: 1.5
-webkit-line-clamp: 3
-webkit-box-orient: vertical
#post-meta
font-size: 95%
@@ -127,10 +126,17 @@
color: $light-blue
text-decoration: underline
#page-header
// css hack
// all browser in ios and safari in all apple device
_::-webkit-full-page-media,
_:future,
:root #page-header.full_page
background-attachment: scroll !important
#nav
position: absolute
top: 0
z-index: 99
z-index: 90
padding: 10px 36px
width: 100%
height: 58px
@@ -164,7 +170,7 @@
&.fixed
position: fixed
top: -60px
z-index: 101
z-index: 91
background: alpha($white, .8)
box-shadow: 0 5px 6px -5px alpha($grey, .6)
transition: transform .2s ease-in-out, opacity .2s ease-in-out
@@ -270,7 +276,7 @@
cursor: pointer
@media screen and (min-width: $sm)
#nav
#page-header
#site_title
font-size: 2rem
@@ -278,10 +284,10 @@
font-size: 1.2rem
@media screen and (max-width: $sm)
#page-header
#nav
padding: 10px .8rem
#nav
#page-header
#site_social_icons
display: block

42
source/css/_layout/mobile-sidebar.styl
View File

@@ -1,12 +1,10 @@
#mobile-sidebar
#menu_mask
position: fixed
top: 0
right: 0
bottom: 0
left: 0
z-index: 102
display: none
width: 100%
height: 100%
background: alpha($dark-black, .8)
#mobile-sidebar-menus
@@ -14,9 +12,7 @@
top: 0
right: -250px
z-index: 103
display: block
overflow: hidden
overflow-y: scroll
overflow: hidden scroll
width: 250px
height: 100%
background: #f6f8fa
@@ -46,9 +42,7 @@
.mobile_data_link
& > a > div
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
@extend .limit-one-line
.length_num
color: $dark-black
@@ -66,41 +60,33 @@
padding: 0 .5rem 2rem
.site-page
@extend .limit-one-line
position: relative
z-index: 0
display: block
overflow: hidden
margin: 0
padding: .3rem 1.5rem
color: $font-black
text-overflow: ellipsis
text-shadow: none
white-space: nowrap
font-size: .8rem
cursor: pointer
i
width: 30%
text-align: left
i:first-child
width: 30%
text-align: left
span
width: 70%
span
width: 70%
&:hover
color: $light-blue
&:hover
color: $light-blue
.menus-expand
position: absolute
right: 0
padding: 6px
width: 30px !important
height: 30px
padding: .4rem
transition: all .3s
transform: rotate(0)
&.menus-closed
transition: all .3s
transform: rotate(180deg) !important
transform: rotate(90deg) !important
.menus_item_child
margin: 0

28
source/css/_layout/page.styl
View File

@@ -80,27 +80,23 @@
width: 100%
& > .article-title
display: -webkit-box
overflow: hidden
@extend .limit-more-line
margin-bottom: .3rem
color: $font-black
text-overflow: ellipsis
word-wrap: break-word
font-size: 1.2rem
line-height: 1.4
transition: all .2s ease-in-out
-webkit-box-orient: vertical
-webkit-line-clamp: 2
&:hover
color: $light-blue !important
& > .article-meta-wrap
font-size: 95%
font-size: 85%
& > time
color: $theme-meta-color
cursor: pointer
cursor: default
& > .article-meta
color: $theme-meta-color
@@ -111,12 +107,14 @@
i
margin: 0 .2rem 0 0
.article-meta__separator,
.article-meta__link
.article-meta__separator
margin: 0 .3rem
.article-meta__link
margin: 0 .2rem
.fa-angle-right
margin: 0 .3rem
margin: 0 .2rem
a.article-meta__categories,
a.article-meta__tags
@@ -127,13 +125,9 @@
text-decoration: underline
& > .content
display: -webkit-box
overflow: hidden
@extend .limit-more-line
margin-top: .3rem
// height: 85px
word-break: break-word
-webkit-line-clamp: 3
-webkit-box-orient: vertical
// tags page
.tag-cloud
@@ -261,13 +255,11 @@
font-size: .7rem
&__title
display: -webkit-box
overflow: hidden
@extend .limit-more-line
color: $font-black
font-size: .75rem
transition: all .3s
-webkit-line-clamp: 2
-webkit-box-orient: vertical
&:hover
color: $light-blue !important

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

@@ -20,8 +20,8 @@
color: $button-color
cursor: default
img.prev_cover,
img.next_cover
img.prev-cover,
img.next-cover
position: absolute
width: 100%
height: 100%
@@ -38,10 +38,8 @@
.prev_info,
.next_info
overflow: hidden
@extend .limit-one-line
color: $button-color
text-overflow: ellipsis
white-space: nowrap
font-weight: 500
.next-post
@@ -68,12 +66,12 @@
height: 150px
&:hover
img.prev_cover,
img.next_cover
img.prev-cover,
img.next-cover
opacity: .8
transform: scale(1.1)
&.pagination_post
&.pagination-post
margin: 2rem 0 !important
background: $dark-black

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

@@ -26,19 +26,9 @@ beautify()
top: calc(50% - .35rem)
color: $title-prefix-icon-color
content: $title-prefix-icon
font-style: normal
font-variant: normal
line-height: 1
transition: all .2s ease-out
text-rendering: auto
-webkit-font-smoothing: antialiased
if hexo-config('fontawesome_v5') && hexo-config('fontawesome_v5.enable')
font-weight: 600
font-family: 'Font Awesome 5 Free'
else
font-weight: normal
font-family: FontAwesome
@extend .fontawesomeIcon
&:hover
&:before
@@ -77,9 +67,10 @@ beautify()
padding-left: .5rem
li
position: relative
margin: .2rem 0
padding: .1rem .5rem .1rem 1.5rem
&:not(.tab)
position: relative
margin: .2rem 0
padding: .1rem .5rem .1rem 1.5rem
&:hover
&:before
@@ -108,7 +99,7 @@ beautify()
line-height: h
ul
> li
> li:not(.tab)
&:hover
&:before
border-color: $theme-button-hover-color
@@ -177,57 +168,6 @@ img
max-width: 100%
transition: all .2s
// highlight
.highlight-tools
.code-expand
position: absolute
top: 0
z-index: 1
padding: 7px 10px
color: $highlight-foreground
cursor: pointer
transition: all .3s
transform: rotate(0)
& + .code-lang
left: 30px
&.code-closed
transition: all .3s
transform: rotate(-90deg) !important
.code-lang
position: absolute
left: 15px
z-index: 1
color: $highlight-foreground
text-transform: capitalize
font-weight: bold
font-size: .8rem
line-height: 1.4rem
cursor: pointer
.copy-notice
position: absolute
top: 0
right: 0
z-index: 1
background: darken($highlight-background, 5)
color: $highlight-aqua
opacity: 0
.fa-clipboard
position: absolute
top: .4rem
right: 10px
z-index: 1
color: $highlight-aqua
cursor: pointer
transition: color .2s
&:hover
color: darken($highlight-aqua, 20%)
.katex-wrap
overflow: auto
@@ -338,6 +278,9 @@ img
p
margin: 0 0 .8rem
iframe
margin: 0 0 1rem
@media screen and (max-width: 1024px)
.layout_post
width: auto

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

@@ -8,18 +8,27 @@
.relatedPosts_item
position: relative
float: left
display: inline-block
overflow: hidden
margin: 5px
width: calc(100% / 3 - 10px)
margin: 3px
width: calc(33.333% - 6px)
height: 200px
background: $dark-black
vertical-align: bottom
&:hover
.relatedPosts_cover
opacity: .8
transform: scale(1.1)
@media screen and (max-width: 768px)
margin: 2px
width: calc(50% - 4px)
height: 150px
@media screen and (max-width: 480px)
width: calc(100% - 4px)
.relatedPosts_cover
width: 100%
height: 100%
@@ -40,22 +49,5 @@
font-size: 90%
.relatedPosts_title
display: -webkit-box
overflow: hidden
@extend .limit-more-line
-webkit-line-clamp: 2
-webkit-box-orient: vertical
.clear_both
clear: both
@media screen and (max-width: 768px)
.relatedPosts
.relatedPosts_item
margin: 2px
width: calc(100% / 2 - 4px)
height: 150px
@media screen and (max-width: 480px)
.relatedPosts
.relatedPosts_item
width: calc(100% - 4px)

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

@@ -1,20 +1,18 @@
.post-reward
margin: 75px auto 0
position: relative
margin-top: 4rem
width: 100%
text-align: center
.reward-button
position: relative
z-index: 1
display: inline-block
width: 100px
padding: .5rem 1.2rem
background: $light-blue
color: $button-color
text-align: center
line-height: 36px
cursor: pointer
transition: all .4s
&:hover
box-shadow: inset 9em 0 0 0 $theme-button-hover-color
.reward-main
display: block
@@ -22,17 +20,15 @@
position: absolute
bottom: 40px
left: 0
z-index: 100
display: none
margin: 0
padding: 0 0 15px
width: 100%
transition: all .6s
.reward-all
display: inline-block
margin: 0 0 0 -110px
padding: 20px 10px 8px
width: 320px
margin: 0
padding: 1rem .5rem
border-radius: 4px
background: $reward-pop-up-bg
@@ -61,14 +57,15 @@
display: inline-block
padding: 0 8px
list-style-type: none
vertical-align: top
img
position: relative
max-width: 130px
width: 130px
border-radius: 3px
height: 130px
.post-qr-code__desc
margin: -5px 0
padding-top: .4rem
width: 130px
color: $reward-pop-up-color
text-align: center
word-break: break-all

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

@@ -1,7 +1,7 @@
#rightside
position: fixed
right: -38px
bottom: 40px
bottom: $rightside-bottom
opacity: 0
transition: all .5s
@@ -16,9 +16,8 @@
animation: rightsideOut .3s
& > div
& > i,
& > a,
& > div
& > button,
& > a
display: block
margin-bottom: 2px
width: 30px
@@ -27,7 +26,6 @@
color: $button-color
text-align: center
font-size: 16px
line-height: 29px
cursor: pointer
&:hover
@@ -40,9 +38,7 @@
#mobile-toc-button
display: none
@media screen and (max-width: $bg)
#rightside
#mobile-toc-button
@media screen and (max-width: $bg)
display: block
@keyframes rightsideIn

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

@@ -49,11 +49,12 @@ if hexo-config('beautify.enable')
content: none
// third-party
// fireworks
.fireworks
position: fixed
top: 0
left: 0
z-index: 999999
z-index: $fireworks-zIndex
pointer-events: none
.medium-zoom-image--opened
@@ -83,4 +84,4 @@ if hexo-config('beautify.enable')
padding: .3rem 0 .8em
.has-jax
overflow: auto
overflow: auto