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

first commit

Browse Source
This commit is contained in:
Jerry
2019-06-04 22:37:36 +08:00
Unverified
commit 1357f218e5
102 changed files with 7015 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

292
source/css/_layout/aside.styl Normal file
View File

@@ -0,0 +1,292 @@
#aside_content
width: 25%
.card_widget
-webkit-box-shadow: 0 4px 8px 6px rgba(7,17,27,.06)
box-shadow: 0 4px 8px 6px rgba(7,17,27,.06)
border-radius: 8px
-webkit-transition: all .3s
-moz-transition: all .3s
-o-transition: all .3s
-ms-transition: all .3s
transition: all .3s
background: #fff
margin-top: 20px
margin-left: 15px
overflow: hidden
&:hover
-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)
.card-author
img
height: 128px
width: 128px
display: inline-block
vertical-align: top
border-radius: 70px
transition: all .3s
&:hover
-moz-transform: rotate(540deg)
-o-transform: rotate(540deg)
-webkit-transform: rotate(540deg)
transform: rotate(540deg)
.author-info
&__name
font-size: 1.1rem
display: block
margin: -0.1rem auto
font-weight: 500
&__description
display: block
margin: -0.1rem auto
.data_link
a
text-decoration: none
.length_num
font-size: 1rem
color: #000
.headline
display: block
font-size: 0.7rem
letter-spacing: 1px
margin-bottom: -21px
text-transform: uppercase
color:#4c4948
#aside-social-icons
margin: 0.5rem auto -0.7rem
width: 15rem
text-align: center
.social-icon
margin: 0 0.5rem
color: #4c4948
/* text-shadow: 0.1rem 0.1rem 0.2rem rgba(0,0,0,0.15) */
font-size: 1rem
cursor: pointer
i
transition: all 0.3s
&:hover
-moz-transform: rotate(540deg)
-o-transform: rotate(540deg)
-webkit-transform: rotate(540deg)
transform: rotate(540deg)
a#bookmark-it
display: inline-block
margin-top: .2rem
padding: 0 1rem
height: 1.6rem
background: #49b1f5
color: #fff
text-decoration: none
line-height: 1.6rem
position: relative
text-transform: uppercase
z-index: 1
.toggle_change--primary,.bookmark--primary
color: $cyan
.toggle_change--animated,.bookmark--animated
transition-property: color
transition-duration: 1s
&:before {
content: ""
position: absolute
top: 0
left: 0
right: 0
bottom: 0
background: $cyan
transform: scaleX(0)
transform-origin: 0 50%
transition-property: transform
transition-duration: 0.5s
transition-timing-function: ease-out
z-index: -1
}
&:hover {
color: white
&:before {
transform: scaleX(1)
transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66)
}
}
.card-content
padding: 1rem 1.2rem
.post_data
display: flex
.data-item
flex-grow: 1
align-items: center
flex-basis: auto
justify-content: center
.item_headline
font-size: 0.8rem
span
margin-left: 10px
.card-tag-cloud a
text-decoration: none
position: relative
padding-bottom: 0.3rem
word-break: keep-all
&::after
position: absolute
bottom: 0
left: 0
z-index: -1
width: 0
height: 3px
background-color: lighten($theme-color, 30%)
content: ""
transition: all 0.3s ease-in-out
&:hover
color: $light-blue !important
&::after
width: 100%
.aside_recent_item
margin: 10px 0 -15px 0
.aside_recent_post
a
text-decoration: none
color: #4c4948
.aside_recent_post
margin-bottom: 10px
width: 100%
.aside_post_cover
height: 70px
width: 70px
float: left
.aside_post_bg
object-fit: cover
width: 100%
height: 100%
max-width: 100%
&:hover
box-shadow: none
#aside_title
padding-top: 4px
.aside_post_meta
font-size: 0.6rem
padding-left: 5px
.aside_post_title
line-height: 1rem
display: -webkit-box
-webkit-line-clamp: 2
-webkit-box-orient: vertical
overflow: hidden
height: 41px
padding-left: 5px
&:hover
color: $light-blue !important
.aside_category_item,.archive-list
list-style: none
margin-bottom: -3px
margin-block-start: 0.2rem
.aside_category_list,.archive-list-item
margin-left: -40px
padding: 0.2rem 1rem
&:hover
background-color: $light-blue
color: #363636
a
text-decoration: none
color: #4c4948
.aside_category_list_length,.archive-list-count
float: right
.card-archives
margin-bottom: 20px
.card-announcement-animation
animation: announ_animation 1.5s infinite
.card-webinfo
.webinfo
padding: 0.2rem 1rem
.webinfo_item
display: block
padding: 4px 0 0
.webinfo_article_name,
.webinfo_runtime_name,
.webinfo_site_uv_name,
.webinfo_site_name
display: inline-block
.webinfo_article_count,
.webinfo_runtime_count,
.webinfo_site_uv_count,
.webinfo_site_pv_count
float: right
display: inline-block
@keyframes announ_animation{
0%,to{
color: #4c4948
}
50%{
color: #FF0000
}
}
@media screen and (max-width: 900px)
.layout_page
flex-direction: column
#recent-posts,#aside_content
width: 100% !important
.card_widget
margin-left: 0 !important

64
source/css/_layout/category.styl Normal file
View File

@@ -0,0 +1,64 @@
.category-content
ol,
ul
margin-top: 0.4rem
padding: 0 0 0 0.8rem
list-style: none
counter-reset: li
p
margin: 0
ol,
ul
padding-left: 0.5rem
li
position: relative
margin: 0.3rem 0
// padding-left: 0.3rem
padding: 0.1rem 0.5rem 0.1rem 1.5rem !important
&:hover
&:before
transform: rotate(360deg)
&:before
position: absolute
top: 0
left: 0
background: $light-blue
color: $white
cursor: pointer
transition: all 0.3s ease-out
ol
li
&:before
margin-top: 0.2rem
width: w = 1.2rem
height: h = w
border-radius: 0.5 * w
content: counter(li)
counter-increment: li
text-align: center
font-size: 0.6rem
line-height: h
ul
li
&:hover
&:before
border-color: $ruby
&:before
$w = 0.3rem
top: 10px
margin-left: 0.45rem
width: w = $w
height: h = w
border: 0.5 * w solid $light-blue
border-radius: w
background: $white
content: ""
line-height: h

2
source/css/_layout/comments.styl Normal file
View File

@@ -0,0 +1,2 @@
#disqus_thread
margin-top: 1rem

34
source/css/_layout/footer.styl Normal file
View File

@@ -0,0 +1,34 @@
footer
$bg-svg += ""
margin-top: 1rem
background: $light-blue
// background-image: url($bg-svg)
background-attachment: local
&.footer-bg
background-position: bottom
background-size: cover
#footer
padding: 1.2rem 1rem 1rem
color: $light-grey
text-align: center
a
color: $light-grey
text-decoration: none
cursor: pointer
&:hover
color: $white
.footer-separator
margin: 0 0.2rem
#busuanzi
&_value
&_site_uv,
&_site_pv,
&_page_pv
margin-left: 0.2rem

236
source/css/_layout/head.styl Normal file
View File

@@ -0,0 +1,236 @@
#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
background-attachment: local
&.no-bg
$bg-svg += ""
background-image: url($bg-svg) !important
background-size: initial
#site-social-icons
margin: 0 auto
width: 15rem
text-align: center
display: none
.social-icon
margin: 0 0.5rem
color: $light-grey
text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
font-size: .9rem
cursor: pointer
&:hover
color: $white
#site-info
position: absolute
width: 100%
top: 43%
#site-title,
#site-sub-title
color: $light-grey
text-align: center
text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
line-height: 1.5
#site-title
font-weight: bold
font-size: 1.3rem
#site-sub-title
font-size: 0.8rem
.scroll-down
position: absolute
bottom: 0
width: 100%
cursor: pointer
height: 42px
font-size: 30px
text-align: center
#page-header
position: absolute
top: 0
z-index: 99
padding: 10px 36px
width: 100%
border: none
font-size: 18px
transition: all 0.2s ease-in-out
.toggle-menu
display: none
padding-top: 0.6rem
color: $light-grey
cursor: pointer
transition: all 0.2s ease-in-out
&:hover
color: $white
.menu-icon-first,
.menu-icon-second,
.menu-icon-third
width: 18px
height: 3px
background-color: #eee
margin: 2px 0
transition: 0.4s
&.close
/* 旋转第一条横线 */
.menu-icon-first
-webkit-transform: rotate(45deg) translate(4px, 3px)
transform: rotate(45deg) translate(4px, 3px)
/* 隐藏第二条横线 */
.menu-icon-second
opacity: 0
/* 旋转第三条横线 */
.menu-icon-third
-webkit-transform: rotate(-45deg) translate(4px, -4px)
transform: rotate(-45deg) translate(4px, -4px)
a
color: $light-grey
text-decoration: none
&:hover
color: $white
.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
&::after
position: absolute
bottom: 0
left: 0
z-index: -1
width: 0
height: 3px
background-color: lighten($theme-color, 30%)
content: ""
transition: all 0.3s ease-in-out
&:hover
&::after
width: 100%
&.fixed
position: fixed
top: -60px
z-index: 101
background: alpha($white, 0.8)
box-shadow: 0 5px 6px -5px alpha($grey, 0.6)
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out
&.open-sidebar
.site-page
display: none
opacity: 0
a,
#site-name
color: $light-black
text-shadow: none
.menu-icon-first,
.menu-icon-second,
.menu-icon-third
background-color: $light-black
text-shadow: none
&a,#site-name
&:hover
color: $light-blue
&.visible
transform: translate3d(0, 100%, 0)
#site-name
text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
font-weight: bold
cursor: pointer
@media screen and (min-width: $sm)
#site-title
font-size: 2rem
#site-sub-title
font-size: 1.2rem
@media screen and (max-width: $sm)
#page-header
padding: 10px 0.8rem
.toggle-menu
display: block
.menus
position: absolute
top: 3rem
right: 0.8rem
display: none
width: 8rem
background: alpha($white, 0.9)
cursor: pointer
box-shadow: 0 0 4px rgba(0, 0, 0, 0.27)
a
display: block !important
opacity: 1 !important
margin-left: 0
padding-top: 0.3rem
padding-bottom: 0.3rem
padding-left: 0.6rem
color: $font-black
text-shadow: none
font-size: 0.8rem
z-index: 0
&:hover
color: $light-blue
.search
right: 0.5rem
span
display none
&.fixed.open-sidebar
.search
display: inline-block;
opacity: 1;
#page-header .site-page
margin-left: 1rem

319
source/css/_layout/page.styl Normal file
View File

@@ -0,0 +1,319 @@
galleryItemStyle(w, h)
.gallery
&-item
width: w
height: unit(h, "rem")
&__title
transform: translate3d(0, unit(h, "rem"), 0)
&:hover
.gallery-item__title
transform: translate3d(0, unit(h - 1.5, "rem"), 0)
.recent-post-item
.content
margin-top: 0.5rem
p
word-break: break-word
ol,
ul
margin-top: 0.4rem
padding: 0 0 0 0.8rem
list-style: none
counter-reset: li
p
margin: 0
ol,
ul
padding-left: 0.5rem
li
position: relative
margin: 0.2rem 0
padding: 0.1rem 0.5rem 0.1rem 1.5rem
&:hover
&:before
transform: rotate(360deg)
&:before
position: absolute
top: 0
left: 0
background: $light-blue
color: $white
cursor: pointer
transition: all 0.3s ease-out
ol
li
&:before
margin-top: 0.2rem
width: w = 1.2rem
height: h = w
border-radius: 0.5 * w
content: counter(li)
counter-increment: li
text-align: center
font-size: 0.6rem
line-height: h
ul
li
&:hover
&:before
border-color: $ruby
&:before
$w = 0.3rem
top: 10px
margin-left: 0.45rem
width: w = $w
height: h = w
border: 0.5 * w solid $light-blue
border-radius: w
background: $white
content: ""
line-height: h
.article-type
margin-left: 0.3rem
color: $grey
.article-meta
color: $grey
.sticky
color: $theme-button-hover-color
i
margin: 0 0.2rem 0 0.3rem
&__separator
margin-left: 0.3rem
.fa-angle-right,
&__link
margin: 0 0 0 0.3rem
time
color: $grey
.more_setting
display: none
.more
display: inline-block
padding: 0 1rem
height: h = 1.6rem
// background: $light-blue
// color: $white
text-align: center
text-decoration: none
line-height: h
cursor: pointer
// transition: all 0.2s ease-in-out
// &:hover
// background: $ruby
.article-title
margin-bottom: 0.3rem
color: $black
text-decoration: none
font-size: 1.2rem
cursor: pointer
transition: all 0.2s ease-in-out
line-height: 1.4
text-overflow: ellipsis
display: -webkit-box
-webkit-box-orient: vertical
-webkit-line-clamp: 2
overflow: hidden
word-wrap: break-word
&:hover
// border-bottom: 1px solid $light-blue
color: $light-blue !important
.tag-cloud
padding: 1.5rem 1rem 2rem
text-align: center
a
display: inline-block
margin: 0 0.4rem
text-decoration: none
cursor: pointer
&:hover
color: $ruby !important
&__title
font-size: 1.8rem
#tag,
#category,
#archive
padding: 3rem 3rem 3rem
.article-sort
padding-left: 1rem
border-left: 2px solid $pale-blue
&-title
position: relative
padding-bottom: 1.2rem
padding-left: 1rem
font-size: 1.2rem
line-height: 1
&:hover
&:before
border-color: $ruby
&:before
position: absolute
top: 0.25rem
left: calc(-0.5rem + 1px)
z-index: 1
width: w = 0.5rem
height: h = w
border: 0.5 * w solid $light-blue
border-radius: w
background: $white
content: ""
line-height: h
transition: all 0.2s ease-in-out
&:after
position: absolute
bottom: 0
left: 0
z-index: 0
width: 0.1rem
height: 1.3rem
background: $pale-blue
content: ""
&-item
position: relative
margin-bottom: 1rem
transition: all 0.2s ease-in-out
&:hover
&:before
border-color: $ruby
&:before
$w = 0.3rem
position: absolute
top: 0.48rem
left: calc(-1rem - 7px)
width: w = $w
height: h = w
border: 0.5 * w solid $light-blue
border-radius: w
background: $white
content: ""
line-height: h
transition: all 0.2s ease-in-out
&.year
font-size: 1rem
&:hover
&:before
border-color: $light-blue
&:before
top: 0.7rem
border-color: $ruby
&__time
position: absolute
top: 0.1rem
color: $a-link-color
&__title
display: block
margin-left: 5rem
color: $font-black
text-decoration: none
font-size: 0.8rem
cursor: pointer
.category-lists
padding: 1rem 0 1.5rem
.category__title
text-align: center
font-size: 1.8rem
.category-list
a
color: $font-black
text-decoration: none
cursor: pointer
.category-list-count
margin-left: 0.4rem
color: $a-link-color
&:before
content: "("
&:after
content: ")"
.gallery
&-item
position: relative
display: inline-block
overflow: hidden
margin: 0.4rem
width: 6rem
height: 6rem
background-position: 50% 50%
background-size: cover
background-repeat: no-repeat
cursor: pointer
transition: all 0.2s ease-in-out
&__title
position: absolute
overflow: hidden
padding: 0 0.4rem
width: 100%
height: 1.5rem
background: rgba(0, 0, 0, 0.5)
color: $pale-blue
text-align: center
text-overflow: ellipsis
white-space: nowrap
line-height: 1.5rem
transition: 0.2s ease-in-out
transform: translate3d(0, 6rem, 0)
&:hover
.gallery-item__title
transform: translate3d(0, 4.5rem, 0)
@media screen and (max-width: $sm)
.recent-post-item
.article-title
font-size: 1rem
.article-meta.tags
display: none
galleryItemStyle(calc(50% - 22px), 6)
@media screen and (min-width: $md)
galleryItemStyle(8rem, 8)

114
source/css/_layout/pagination.styl Normal file
View File

@@ -0,0 +1,114 @@
#pagination
overflow: hidden
margin-top: 1rem
width: 100%
.pagination
text-align: center
.space
color: $a-link-color
.page-number
display: inline-block
margin: 0 0.2rem
min-width: w = 1.2rem
height: w
text-align: center
line-height: w
cursor: pointer
&.current
background: $cyan
color: $white
cursor: default
img.prev_cover, img.next_cover
position: absolute
padding: 0
z-index: 50
top: 0
left: 0
width: 100%
height: 100%
opacity: .4
background-size: cover
transition: all 0.6s;
object-fit: cover
pointer-events: none
.prev_info
position: absolute
z-index: 100
font-weight: 400
width: 70%
color: #fff
overflow: hidden
white-space: nowrap
-o-text-overflow: ellipsis
text-overflow: ellipsis
display: block
bottom: 50px
.next_info
position: absolute
z-index: 100
font-weight: 400
width: 70%
color: #fff
overflow: hidden
white-space: nowrap
-o-text-overflow: ellipsis
text-overflow: ellipsis
display: block
right: 40px
bottom: 50px
text-align: right
.pull-full
width: 100% !important
.prev-post .label
position: absolute
top: 50px
z-index: 100
font-size: 13px
display: block
text-transform: uppercase
color: rgba(255,255,255,.7)
.next-post .label
position: absolute
top: 50px
right: 40px
z-index: 100
display: block
text-transform: uppercase
color: rgba(255,255,255,.7)
.prev-post, .next-post
width: 50%
float: left
a
width: 100%
height: 150px
padding: 55px 40px
text-align: left
position: relative
display: block
float: left
overflow: hidden
&:hover
img.prev_cover, img.next_cover
opacity: .8
transform:scale(1.1)
@media screen and (max-width:768px)
.prev-post, .next-post
width: 100% !important
.pagination_post
margin: 2rem 0 !important
background: #000

334
source/css/_layout/post.styl Normal file
View File

@@ -0,0 +1,334 @@
#post-title
font-size: 1.4rem
&.plain
margin-bottom: 0.3rem
border-bottom: 1px solid $light-grey
cursor: pointer
transition: all 0.2s ease-in-out
&:hover
border-bottom: 1px solid $light-blue
color: $light-blue
#post
overflow: hidden
&-meta
text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
#post-meta
color: $grey
a
text-decoration: none
i.fa.fa-comment-o
margin-right: 0.2rem
#top-container
position: relative
margin-bottom: 1rem
background-color: $light-blue
background-attachment: local
background-position: center
background-size: cover
height: 19rem
&:before
position: absolute;
top: 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%);
&.no-bg
$bg-svg += ""
background-color: $light-blue
background-image: url($bg-svg) !important
background-size: auto
&.plain
margin-bottom: 1rem
height: 56px
a
color: $light-grey
text-decoration: none
transition: all 0.3s ease-out
&:hover
color: $white
#top-img
padding: 0
border: none
#site-name
font-weight: bold
cursor: pointer
#post-info
width: 100%
color: $light-grey
text-align: left
padding-left: 8%
position: absolute
bottom: 1.5rem
#post-title
text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
font-size: 1.5rem
i.fa.fa-angle-right
margin: 0 0.3rem 0 0.2rem
.post-meta
&__separator
margin: 0 0.3rem
&__icon
margin-right: 0.2rem
&__tags
display: inline-block
width: fit-content
margin: 0.4rem 0.4rem 0.4rem 0
padding: 0rem 0.6rem
border: 1px solid $light-blue
border-radius: 0.6rem
background: $white
color: $light-blue
text-decoration: none
font-size: 12px
cursor: pointer
transition: all 0.2s ease-in-out
&:hover
background: $light-blue
color: $white
.layout
margin: 0 auto
max-width: 1000px
#post-content
margin-bottom: 1rem
ol,
ul
margin-top: 0.4rem
counter-reset: li
p
margin: 0
ol,
ul
padding-left: 0.5rem
li
position: relative
margin: 0.3rem 0
padding-left: 0.3rem
a
color: $a-link-color
transition: all 0.2s
&:hover
color: $light-blue
text-decoration: none
&#site-name
text-decoration: none
a.fancybox
outline: none
&:focus
outline: none
display: inline-block
width: 100%
text-align: center
text-decoration: none
img
padding: $img-border-padding
max-width: 100%
transition: all 0.2s
&:hover
box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5)
.code-area-wrap
position: relative
.fa-clipboard
position: absolute
top: 0.4rem
right: 10px
z-index: 1
color: $highlight-aqua
cursor: pointer
transition: color 0.2s
&:hover
color: darken($highlight-aqua, 20%)
.copy-notice
position: absolute
top: 0
right: 0
z-index: 1
background: darken($highlight-background, 5)
color: $highlight-aqua
opacity: 0
.post-copyright
position: relative
margin-bottom: 0.4rem
padding: 0.5rem 0.8rem
border: 1px solid $light-grey
transition: box-shadow 0.3s ease-in-out
&:before
position: absolute
top: t = 0.5rem
right: t
width: w = 0.8rem
height: w
border-radius: w
background: $light-blue
content: ""
&:after
position: absolute
top: t = 0.7rem
right: t
width: w = 0.4rem
height: w
border-radius: w
background: $white
content: ""
&:hover
box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5)
&-meta
color: $light-blue
font-weight: bold
&-info
a
word-break: break-word
.post-adv
margin: 1rem 0
@media screen and (max-width: $sm)
.layout
margin: 0 30px
width: auto
#top-container
// background-attachment: local
#post-title
font-size: 1rem
#post-title
font-size: 1.1rem
@media screen and (min-width: $md)
.layout
width: $content-large-width
.katex-wrap
overflow: auto
if hexo-config("katex") && hexo-config("katex.hide_scrollbar")
&::-webkit-scrollbar
display: none
// 文章字體
#post-content p {
font-size: 1.1em
}
#post-content ol, #post-content ul {
font-size: 1em
}
@media screen and (max-width: 900px)
.layout
margin: 0 15px
width: auto
.layout_post
padding: 50px
-webkit-box-shadow: 0 4px 8px 6px rgba(7,17,27,0.06)
box-shadow: 0 4px 8px 6px rgba(7,17,27,0.06)
border-radius: 8px
-webkit-transition: all 0.3s
-moz-transition: all 0.3s
-o-transition: all 0.3s
-ms-transition: all 0.3s
transition: all 0.3s
background: #fff
margin-top: 40px
margin-bottom: 40px
&:hover
-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)
img
margin:0 auto
display:block
.tag_share
display: block
.post-meta__tag-list
display: inline-block
.post_share
width: fit-content;
display: inline-block;
float: right;
margin: 0.4rem 0
.social-share
font-size: 12px
.social-share .social-share-icon
width: 26px;
height: 26px;
font-size: 15px;
line-height: 25px;
.social-share a
margin: 0 4px;
#post
a
text-decoration: none
color: $light-blue

80
source/css/_layout/relatedposts.styl Normal file
View File

@@ -0,0 +1,80 @@
.relatedPosts
margin: 0 auto
padding: 0
margin-top: 1rem
width: 100%
.relatedPosts_item
width: calc(100%/3 - 10px)
height: 200px
overflow: hidden
float: left
position: relative
margin: 5px
background: #000
&:hover
.relatedPosts_cover
opacity: .8
transform:scale(1.1)
.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%
height: 100%
padding: 0
opacity: 0.4
margin: 0
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
.relatedPosts_headling
font-size: 20px
font-weight: 700
margin-bottom: 5px
.clear_both
clear: both
@media screen and (max-width:768px)
.relatedPosts_item
width: calc(100%/2 - 4px)
height: 150px
margin: 2px
.relatedPosts_title
top: 40%
@media screen and (max-width:480px)
.relatedPosts_item
width: calc(100% - 4px)
height: 150px
margin: 2px
.relatedPosts_title
top: 40%

71
source/css/_layout/reward.styl Normal file
View File

@@ -0,0 +1,71 @@
.post-reward
position: relative
width: 100%
margin: 75px auto 0
text-align: center
display: block
.reward-buttom
text-align: center
display: inline-block
cursor: pointer
color: #fff
line-height: 36px
background: #49b1f5
width: 80px
&:hover
background: #00c4b6
.reward-main
display: block
.reward-main
position: absolute
bottom: 40px
margin: 0
padding: 0 0 15px
width: 100%
left: 0
transition: all 0.6s
display: none
.reward-all
margin: 0 auto
padding: 20px 10px 8px
background: #f5f5f5
display: inline-block
border-radius: 4px
cursor: auto
&:after
content: ""
width: 0
height: 0
border-left: 13px solid transparent
border-right: 13px solid transparent
border-top: 13px solid #f5f5f5
position: absolute
bottom: 2px
left: 0
right: 0
margin: 0 auto
.reward-item
list-style-type: none
padding: 0 8px
display: inline-block
img
width: 130px
max-width: 130px
border-radius: 3px
position: relative
.post-qr-code__desc
text-align: center
margin: -10px 0
color: #858585

60
source/css/_layout/sidebar.styl Normal file
View File

@@ -0,0 +1,60 @@
#sidebar
position: fixed
top: 0
left: -300px
z-index: 10
overflow-y: auto
padding: 1rem 0 2rem 0.5rem
width: $sidebar-width
height: 100%
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
list-style: none
ol
margin-top: 0.2rem
padding-left: 0.4rem
&__title
padding-right: 0.5rem
text-align: center
font-size: unit(0.9 * $rem, "px")
.toc-link
display: block
padding-left: 0.2rem
border-right: 3px solid transparent
text-decoration: none
transition: all 0.2s ease-in-out
&.active
border-right-color: darken($cyan, 20%)
background: $cyan
color: $white
&__progress
position: relative
margin-top: -0.3rem
padding-left: 0.6rem
color: $cyan
.progress-notice
margin-right: 0.4rem
.progress-num
display: inline-block
min-width: 0.9rem
&-bar
width: 0
height: 1px
background: $cyan