mirror of
https://github.com/jerryc127/hexo-theme-butterfly.git
synced 2026-04-16 17:40:55 +08:00
1. chore: 只支持hexo 4.2.0以上版本
2. feat: 可隱藏Mobile sidebar 子菜單 3. refactor: archives和card-post 改為flex佈局 4. feat: 當寬度小於1024時，點擊toc滾動，增加滾動效果 5. feat: 點擊滾動，如果滾動是向上時，將會偏移60px， 避免導航欄遮擋 close #317 6. feat: 可配置font-size 7. refactor: 去除字體放大、縮小按鈕 8. refactor: 部分css由'px'改為'em'，適應font-size值改變而改變 9. feat: pjax增加exclude配置 10. fix: 修復canvas_nest 配置沒有生效的Bugs 11. feat: 新增 cnzz_analytics 12. feat: 騰訊分析改為騰訊移動分析，並適配pjax 13. perf: 改cookies為localstore存儲 14. feat: 設置中的theme_color可單獨配置幾個，而不需要全部開啟 close #314 15. feat: butterfly.yml 採用deepMerge, 與_config文件進行合併而不是替換 16. fix: 修復rightsize-bottom配置無效的bug 17. refactor: aside增加position sticky 18. refactor: 調整webinfo 寬度小時的顯示 19. feat: 更改addtoany item的寫法 20. refactor: aside 內容邊距調整 21. feat: 增加最後更新時間顯示
This commit is contained in:
Jerry
@@ -20,7 +20,7 @@ if hexo-config('error_404.enable')
|
||||
background: var(--card-bg)
|
||||
box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
|
||||
|
||||
@media screen and (max-width: 768px)
|
||||
+maxWidth768()
|
||||
flex-direction: column
|
||||
margin: 0
|
||||
height: 25rem
|
||||
@@ -34,7 +34,7 @@ if hexo-config('error_404.enable')
|
||||
background-position: center
|
||||
background-size: cover
|
||||
|
||||
@media screen and (max-width: 768px)
|
||||
+maxWidth768()
|
||||
flex: 1
|
||||
width: 100%
|
||||
border-top-right-radius: 8px
|
||||
@@ -47,7 +47,7 @@ if hexo-config('error_404.enable')
|
||||
font-size: 14px
|
||||
font-family: $site-name-font
|
||||
|
||||
@media screen and (max-width: 768px)
|
||||
+maxWidth768()
|
||||
flex: 1.1
|
||||
width: 100%
|
||||
|
||||
@@ -55,7 +55,7 @@ if hexo-config('error_404.enable')
|
||||
margin-top: -4rem
|
||||
font-size: 9em
|
||||
|
||||
@media screen and (max-width: 768px)
|
||||
+maxWidth768()
|
||||
margin-top: -3rem
|
||||
|
||||
.error_subtitle
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
#aside_content
|
||||
width: 25%
|
||||
|
||||
.card-widget:not(:first-child)
|
||||
margin-top: 1rem
|
||||
> .card-widget:first-child
|
||||
margin-top: 0
|
||||
|
||||
.card-widget
|
||||
overflow: hidden
|
||||
margin-top: 1rem
|
||||
border-radius: 8px
|
||||
background: var(--card-bg)
|
||||
box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
|
||||
@@ -27,7 +28,7 @@
|
||||
.author-info
|
||||
&__name
|
||||
font-weight: 500
|
||||
font-size: 1.1rem
|
||||
font-size: 1.57em
|
||||
|
||||
&__description
|
||||
margin-top: -.3rem
|
||||
@@ -45,12 +46,12 @@
|
||||
.headline
|
||||
@extend .limit-one-line
|
||||
color: var(--font-color)
|
||||
font-size: .7rem
|
||||
font-size: 1em
|
||||
|
||||
.length_num
|
||||
margin-top: -.3rem
|
||||
color: var(--text-highlight-color)
|
||||
font-size: 1rem
|
||||
font-size: 1.4em
|
||||
|
||||
.card-info-social-icons
|
||||
margin: .3rem 0 -.3rem
|
||||
@@ -58,7 +59,7 @@
|
||||
.social-icon
|
||||
margin: 0 .5rem
|
||||
color: var(--font-color)
|
||||
font-size: 1rem
|
||||
font-size: 1.4em
|
||||
cursor: pointer
|
||||
|
||||
i
|
||||
@@ -72,7 +73,7 @@
|
||||
background-color: var(--btn-bg)
|
||||
color: var(--btn-color)
|
||||
text-align: center
|
||||
line-height: 1.6rem
|
||||
line-height: 2.4
|
||||
|
||||
span
|
||||
padding-left: .5rem
|
||||
@@ -81,11 +82,17 @@
|
||||
padding: 1rem 1.2rem
|
||||
|
||||
.item-headline
|
||||
font-size: .8rem
|
||||
font-size: 1.2em
|
||||
|
||||
span
|
||||
margin-left: .5rem
|
||||
|
||||
.sticky_layout
|
||||
+minWidth900()
|
||||
position: sticky
|
||||
position: -webkit-sticky
|
||||
top: 20px
|
||||
|
||||
.card-tag-cloud
|
||||
a
|
||||
display: inline-block
|
||||
@@ -94,51 +101,65 @@
|
||||
&:hover
|
||||
color: $text-hover !important
|
||||
|
||||
.aside-list
|
||||
margin: 10px 0 -15px
|
||||
|
||||
& > .aside-list-item
|
||||
display: flex
|
||||
align-items: center
|
||||
margin-bottom: 10px
|
||||
|
||||
// padding 8px 0
|
||||
// border-bottom: 1px dashed #f5f5f5
|
||||
// height: 4.72em
|
||||
.thumbnail
|
||||
// float: left
|
||||
overflow: hidden
|
||||
width: w = 4.2em
|
||||
height: w
|
||||
border-radius: w
|
||||
|
||||
& > img
|
||||
width: 100%
|
||||
height: 100%
|
||||
transition: all .6s
|
||||
object-fit: cover
|
||||
|
||||
&:hover
|
||||
transform: scale(1.1)
|
||||
|
||||
.content
|
||||
flex: 1
|
||||
padding-left: 10px
|
||||
word-break: break-all
|
||||
|
||||
& > .name
|
||||
@extend .limit-one-line
|
||||
|
||||
& > time
|
||||
color: $theme-meta-color
|
||||
font-size: .85%
|
||||
|
||||
& > .comment
|
||||
font-size: .9%
|
||||
|
||||
& > .title,
|
||||
& > .comment
|
||||
@extend .limit-more-line
|
||||
color: var(--font-color)
|
||||
line-height: 1.5
|
||||
-webkit-line-clamp: 2
|
||||
|
||||
&:hover
|
||||
color: $text-hover
|
||||
|
||||
.card-recent-post
|
||||
.aside-recent-item
|
||||
margin: 10px 0 -15px
|
||||
.thumbnail
|
||||
border-radius: 0 !important
|
||||
|
||||
& > .aside-recent-post
|
||||
margin-bottom: 10px
|
||||
|
||||
.aside-post-cover
|
||||
float: left
|
||||
overflow: hidden
|
||||
width: 66px
|
||||
height: 66px
|
||||
|
||||
.aside-post-bg
|
||||
padding: 0
|
||||
max-width: 100%
|
||||
width: 100%
|
||||
height: 100%
|
||||
transition: all .6s
|
||||
object-fit: cover
|
||||
|
||||
&:hover
|
||||
box-shadow: none
|
||||
transform: scale(1.1)
|
||||
|
||||
.aside-post-info
|
||||
.aside-post_meta
|
||||
padding-left: 10px
|
||||
color: $theme-meta-color
|
||||
font-size: .6rem
|
||||
|
||||
.aside-post-title
|
||||
@extend .limit-more-line
|
||||
padding-left: 10px
|
||||
height: 40px
|
||||
color: var(--font-color)
|
||||
line-height: 1rem
|
||||
-webkit-line-clamp: 2
|
||||
|
||||
&:hover
|
||||
color: $text-hover
|
||||
|
||||
&.no-aside-cover
|
||||
.aside-post-title
|
||||
height: auto
|
||||
.no-aside-cover
|
||||
title
|
||||
height: auto
|
||||
|
||||
.card-archives ul.card-archive-list,
|
||||
.card-categories ul.card-category-list
|
||||
@@ -150,7 +171,7 @@
|
||||
.card-categories ul.card-category-list > .card-category-list-item
|
||||
a
|
||||
display: inline-block
|
||||
padding: .15rem 1rem
|
||||
padding: .15rem .5rem
|
||||
width: 100%
|
||||
color: var(--font-color)
|
||||
transition: all .4s
|
||||
@@ -211,25 +232,19 @@
|
||||
|
||||
.card-webinfo
|
||||
.webinfo
|
||||
padding: .2rem 1rem
|
||||
padding: .2rem .5rem
|
||||
|
||||
.webinfo-item
|
||||
display: block
|
||||
display: flex
|
||||
align-items: center
|
||||
padding: 4px 0 0
|
||||
|
||||
div
|
||||
&:first-child
|
||||
display: inline-block
|
||||
flex: 1
|
||||
padding-right: 1rem
|
||||
|
||||
&:last-child
|
||||
display: inline-block
|
||||
float: right
|
||||
|
||||
@media screen and (max-width: 900px)
|
||||
.layout_page
|
||||
flex-direction: column
|
||||
|
||||
#recent-posts,
|
||||
+maxWidth900()
|
||||
#aside_content
|
||||
width: 100% !important
|
||||
|
||||
@@ -237,7 +252,7 @@
|
||||
.card-widget:first-child
|
||||
margin-top: 1rem
|
||||
|
||||
@media screen and (min-width: 900px)
|
||||
+minWidth900()
|
||||
#aside_content
|
||||
.card-widget
|
||||
if hexo-config('aside.position') == 'right'
|
||||
@@ -246,6 +261,6 @@
|
||||
margin-right: 15px
|
||||
|
||||
if hexo-config('aside.mobile') == false
|
||||
@media screen and (max-width: $sm)
|
||||
+maxWidth768()
|
||||
#aside_content
|
||||
display: none
|
||||
display: none
|
||||
@@ -1,33 +0,0 @@
|
||||
.category-content
|
||||
ul
|
||||
margin-top: .4rem
|
||||
padding: 0 0 0 1rem
|
||||
list-style: none
|
||||
counter-reset: li
|
||||
|
||||
ul
|
||||
padding-left: .2rem
|
||||
|
||||
li
|
||||
position: relative
|
||||
margin: .3rem 0
|
||||
padding: .1rem .2rem .1rem 1rem
|
||||
|
||||
&:before
|
||||
position: absolute
|
||||
left: 0
|
||||
cursor: pointer
|
||||
transition: all .3s ease-out
|
||||
$w = .3rem
|
||||
top: 10px
|
||||
width: w = $w
|
||||
height: h = w
|
||||
border: .5 * w solid $light-blue
|
||||
border-radius: w
|
||||
background: transparent
|
||||
content: ''
|
||||
line-height: h
|
||||
|
||||
&:hover
|
||||
&:before
|
||||
border-color: $pseudo-hover
|
||||
@@ -6,7 +6,7 @@
|
||||
display: inline-block
|
||||
vertical-align: middle
|
||||
font-weight: 700
|
||||
font-size: 20px
|
||||
font-size: 1.43em
|
||||
|
||||
.comment-switch
|
||||
display: inline-block
|
||||
@@ -33,10 +33,10 @@
|
||||
label
|
||||
position: relative
|
||||
display: inline-block
|
||||
margin: 0 .4rem
|
||||
margin: -4px .4rem 0
|
||||
width: 42px
|
||||
height: 22px
|
||||
vertical-align: sub
|
||||
vertical-align: middle
|
||||
|
||||
input#switch-comments-btn
|
||||
width: 0
|
||||
|
||||
@@ -18,10 +18,10 @@
|
||||
line-height: 17px
|
||||
-webkit-transform: translateZ(0)
|
||||
|
||||
@media screen and (max-width: 1100px)
|
||||
+maxWidth1024()
|
||||
width: calc(50% - 15px) !important
|
||||
|
||||
@media screen and (max-width: 600px)
|
||||
+maxWidth600()
|
||||
width: calc(100% - 15px) !important
|
||||
|
||||
&:hover
|
||||
@@ -66,11 +66,11 @@
|
||||
padding: 16px 10px 0 0
|
||||
height: 40px
|
||||
font-weight: bold
|
||||
font-size: 20px
|
||||
font-size: 1.43em
|
||||
|
||||
.flink-item-desc
|
||||
@extend .limit-one-line
|
||||
display: block
|
||||
padding: 16px 10px 16px 0
|
||||
height: 50px
|
||||
font-size: 13px
|
||||
font-size: .93em
|
||||
|
||||
@@ -29,17 +29,17 @@
|
||||
#site_title
|
||||
margin: 0
|
||||
color: var(--white)
|
||||
font-size: 1.3rem
|
||||
font-size: 1.85em
|
||||
|
||||
@media screen and (min-width: $sm)
|
||||
font-size: 2rem
|
||||
+minWidth768()
|
||||
font-size: 2.85em
|
||||
|
||||
#site_subtitle
|
||||
color: var(--light-grey)
|
||||
font-size: .8rem
|
||||
font-size: 1.15em
|
||||
|
||||
@media screen and (min-width: $sm)
|
||||
font-size: 1.2rem
|
||||
+minWidth768()
|
||||
font-size: 1.72em
|
||||
|
||||
#site_social_icons
|
||||
display: none
|
||||
@@ -47,14 +47,14 @@
|
||||
width: 15rem
|
||||
text-align: center
|
||||
|
||||
@media screen and (max-width: $sm)
|
||||
+maxWidth768()
|
||||
display: block
|
||||
|
||||
.social-icon
|
||||
margin: 0 .5rem
|
||||
color: var(--light-grey)
|
||||
text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
|
||||
font-size: 1rem
|
||||
font-size: 1.43em
|
||||
cursor: pointer
|
||||
|
||||
#scroll_down
|
||||
@@ -73,7 +73,7 @@
|
||||
&.not-index-bg
|
||||
height: 20rem
|
||||
|
||||
@media screen and (max-width: $sm)
|
||||
+maxWidth768()
|
||||
height: 14rem
|
||||
|
||||
#page_site-info
|
||||
@@ -82,14 +82,14 @@
|
||||
padding: 0 .5rem
|
||||
width: 100%
|
||||
|
||||
@media screen and (max-width: $sm)
|
||||
+maxWidth768()
|
||||
top: 7rem
|
||||
|
||||
// post
|
||||
&.post-bg
|
||||
height: 20rem
|
||||
|
||||
@media screen and (max-width: $sm)
|
||||
+maxWidth768()
|
||||
height: 18rem
|
||||
|
||||
&:before
|
||||
@@ -109,16 +109,16 @@
|
||||
width: 100%
|
||||
text-align: left
|
||||
|
||||
@media screen and (max-width: $sm)
|
||||
+maxWidth768()
|
||||
bottom: 1.1rem
|
||||
padding: 0 1.1rem
|
||||
|
||||
#post-title
|
||||
margin-bottom: .4rem
|
||||
font-size: 1.5rem
|
||||
font-size: 2.15em
|
||||
|
||||
@media screen and (max-width: $sm)
|
||||
font-size: 1.2rem
|
||||
+maxWidth768()
|
||||
font-size: 1.72em
|
||||
|
||||
.posttitle
|
||||
@extend .limit-more-line
|
||||
@@ -130,12 +130,12 @@
|
||||
color: var(--light-grey)
|
||||
font-size: 95%
|
||||
|
||||
@media screen and (min-width: $sm)
|
||||
+minWidth768()
|
||||
> .meta-secondline
|
||||
> span:first-child
|
||||
display: none
|
||||
|
||||
@media screen and (max-width: $sm)
|
||||
+maxWidth768()
|
||||
font-size: 90%
|
||||
|
||||
> .meta-firstline,
|
||||
@@ -174,21 +174,26 @@ _:future,
|
||||
position: absolute
|
||||
top: 0
|
||||
z-index: 90
|
||||
padding: 10px 36px
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
align-items: center
|
||||
padding: 0 36px
|
||||
width: 100%
|
||||
height: 58px
|
||||
border: none
|
||||
font-size: 18px
|
||||
height: 60px
|
||||
font-size: 1.3em
|
||||
opacity: 0
|
||||
transition: all .5s
|
||||
|
||||
@media screen and (max-width: $sm)
|
||||
padding: 10px .8rem
|
||||
+maxWidth768()
|
||||
padding: 0 16px
|
||||
|
||||
&:not(.fixed)
|
||||
.menus
|
||||
padding-right: 0 !important
|
||||
|
||||
#blog_name
|
||||
flex: 1
|
||||
|
||||
.toggle-menu
|
||||
display: none
|
||||
padding: .1rem 0 0 .3rem
|
||||
@@ -197,10 +202,6 @@ _:future,
|
||||
&:hover
|
||||
color: var(--white)
|
||||
|
||||
&.is-visible-inline
|
||||
.site-page
|
||||
font-size: inherit
|
||||
|
||||
a
|
||||
color: var(--light-grey)
|
||||
|
||||
@@ -209,7 +210,7 @@ _:future,
|
||||
|
||||
&.fixed
|
||||
position: fixed
|
||||
top: -60px
|
||||
top: -62px
|
||||
z-index: 91
|
||||
background: rgba(255, 255, 255, .8)
|
||||
box-shadow: 0 5px 6px -5px alpha($grey, .6)
|
||||
@@ -300,6 +301,19 @@ _:future,
|
||||
color: var(--font-color)
|
||||
text-shadow: none
|
||||
|
||||
&.hide-menu
|
||||
.toggle-menu
|
||||
display: inline-block !important
|
||||
|
||||
.site-page
|
||||
font-size: inherit
|
||||
|
||||
.menus_items
|
||||
display: none !important
|
||||
|
||||
#search_button span
|
||||
display: none !important
|
||||
|
||||
#search_button
|
||||
display: inline
|
||||
padding: 0 0 0 .7rem
|
||||
@@ -308,5 +322,5 @@ _:future,
|
||||
position: relative
|
||||
padding-bottom: .3rem
|
||||
text-shadow: .05rem .05rem .1rem rgba($dark-black, .3)
|
||||
font-size: .7rem
|
||||
font-size: .78em
|
||||
cursor: pointer
|
||||
@@ -47,12 +47,10 @@
|
||||
|
||||
.length_num
|
||||
color: var(--text-highlight-color)
|
||||
font-size: .9rem
|
||||
font-size: 1.28em
|
||||
|
||||
.headline
|
||||
display: block
|
||||
color: var(--font-color)
|
||||
font-size: .7rem
|
||||
|
||||
hr
|
||||
margin: 1rem auto
|
||||
@@ -66,7 +64,7 @@
|
||||
display: block
|
||||
padding: .3rem 1.5rem
|
||||
color: var(--font-color)
|
||||
font-size: .8rem
|
||||
font-size: 1.15em
|
||||
cursor: pointer
|
||||
|
||||
i:first-child
|
||||
@@ -81,13 +79,16 @@
|
||||
|
||||
.expand
|
||||
position: absolute
|
||||
right: 0
|
||||
padding: .4rem
|
||||
top: .78em
|
||||
right: .4rem
|
||||
transition: transform .3s
|
||||
|
||||
&.closed
|
||||
&.hide
|
||||
transform: rotate(90deg) !important
|
||||
|
||||
.menus_item_child
|
||||
margin: 0
|
||||
list-style: none
|
||||
list-style: none
|
||||
|
||||
if hexo-config('hide_sidebar_menu_child')
|
||||
display: none
|
||||
@@ -1,382 +0,0 @@
|
||||
.layout_page
|
||||
display: flex
|
||||
align-items: flex-start
|
||||
margin: 0 auto
|
||||
padding: 2rem 15px
|
||||
max-width: 1200px
|
||||
|
||||
// index
|
||||
#recent-posts
|
||||
width: 75%
|
||||
|
||||
& > .recent-post-item:not(:first-child)
|
||||
margin-top: 1rem
|
||||
|
||||
& > .recent-post-item
|
||||
display: flex
|
||||
flex-direction: row
|
||||
align-items: center
|
||||
padding: 0
|
||||
height: 280px
|
||||
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)
|
||||
|
||||
img.post_bg
|
||||
transform: scale(1.1)
|
||||
|
||||
if hexo-config('cover.position') == 'both'
|
||||
.left_radius
|
||||
border-radius: 8px 0 0 8px
|
||||
|
||||
.right_radius
|
||||
order: 2
|
||||
border-radius: 0 8px 8px 0
|
||||
else if hexo-config('cover.position') == 'left'
|
||||
.left_radius
|
||||
border-radius: 8px 0 0 8px
|
||||
|
||||
.right_radius
|
||||
border-radius: 8px 0 0 8px
|
||||
else if hexo-config('cover.position') == 'right'
|
||||
.left_radius
|
||||
order: 2
|
||||
border-radius: 0 8px 8px 0
|
||||
|
||||
.right_radius
|
||||
order: 2
|
||||
border-radius: 0 8px 8px 0
|
||||
|
||||
.post_cover
|
||||
overflow: hidden
|
||||
width: 45%
|
||||
height: 280px
|
||||
-webkit-mask-image: -webkit-radial-gradient(white, black)
|
||||
|
||||
img.post_bg
|
||||
display: block
|
||||
margin: 0
|
||||
padding: 0
|
||||
width: 100%
|
||||
height: 100%
|
||||
border: 0
|
||||
transition: all .6s
|
||||
object-fit: cover
|
||||
|
||||
&:hover
|
||||
transform: scale(1.1)
|
||||
|
||||
& >.recent-post-info
|
||||
display: inline-block
|
||||
overflow: hidden
|
||||
padding: 0 40px
|
||||
width: 55%
|
||||
|
||||
&.no-cover
|
||||
width: 100%
|
||||
|
||||
& > .article-title
|
||||
@extend .limit-more-line
|
||||
margin-bottom: .3rem
|
||||
color: var(--text-highlight-color)
|
||||
font-size: 1.2rem
|
||||
line-height: 1.4
|
||||
transition: all .2s ease-in-out
|
||||
-webkit-line-clamp: 2
|
||||
|
||||
&:hover
|
||||
color: $text-hover
|
||||
|
||||
& > .article-meta-wrap
|
||||
color: $theme-meta-color
|
||||
font-size: 90%
|
||||
|
||||
& > .post-meta-date
|
||||
cursor: default
|
||||
|
||||
.sticky
|
||||
color: $sticky-color
|
||||
|
||||
i
|
||||
margin: 0 .2rem 0 0
|
||||
|
||||
.article-meta-label
|
||||
if hexo-config('post_meta.page.label')
|
||||
padding-right: .2rem
|
||||
else
|
||||
display: none
|
||||
|
||||
.article-meta__separator
|
||||
margin: 0 .3rem
|
||||
|
||||
.article-meta__link
|
||||
margin: 0 .2rem
|
||||
|
||||
.fa-angle-right
|
||||
margin: 0 .2rem
|
||||
|
||||
a
|
||||
color: $theme-meta-color
|
||||
|
||||
&:hover
|
||||
color: $text-hover
|
||||
text-decoration: underline
|
||||
|
||||
& > .content
|
||||
@extend .limit-more-line
|
||||
margin-top: .3rem
|
||||
-webkit-line-clamp: 3
|
||||
|
||||
// tags page
|
||||
.tag-cloud
|
||||
a
|
||||
display: inline-block
|
||||
padding: 0 .4rem
|
||||
cursor: pointer
|
||||
transition: all .3s
|
||||
|
||||
&:hover
|
||||
color: $text-hover !important
|
||||
transform: scale(1.1)
|
||||
|
||||
&__title
|
||||
text-align: center
|
||||
font-size: 1.8rem
|
||||
|
||||
&-tags
|
||||
text-align: center
|
||||
|
||||
.layout_post > #post,
|
||||
.layout_page > div:first-child:not(.recent-posts)
|
||||
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)
|
||||
|
||||
.layout_page
|
||||
& > div:first-child:not(.recent-posts)
|
||||
width: 75%
|
||||
|
||||
.article-sort
|
||||
margin-left: .5rem
|
||||
padding-left: 1rem
|
||||
border-left: 2px solid lighten($light-blue, 20)
|
||||
|
||||
&-title
|
||||
position: relative
|
||||
margin-left: .5rem
|
||||
padding-bottom: 1.2rem
|
||||
padding-left: 1rem
|
||||
font-size: 1.2rem
|
||||
line-height: 1
|
||||
|
||||
&:hover
|
||||
&:before
|
||||
border-color: $pseudo-hover
|
||||
|
||||
&:before
|
||||
position: absolute
|
||||
top: .25rem
|
||||
left: calc(-.5rem + 1px)
|
||||
z-index: 1
|
||||
width: w = .5rem
|
||||
height: h = w
|
||||
border: .5 * w solid $light-blue
|
||||
border-radius: w
|
||||
background: var(--card-bg)
|
||||
content: ''
|
||||
line-height: h
|
||||
transition: all .2s ease-in-out
|
||||
|
||||
&:after
|
||||
position: absolute
|
||||
bottom: 0
|
||||
left: 0
|
||||
z-index: 0
|
||||
width: .1rem
|
||||
height: 1.3rem
|
||||
background: lighten($light-blue, 20)
|
||||
content: ''
|
||||
|
||||
&-item
|
||||
position: relative
|
||||
margin: 0 0 1rem .5rem
|
||||
width: 100%
|
||||
height: 80px
|
||||
transition: all .2s ease-in-out
|
||||
|
||||
&:hover
|
||||
&:before
|
||||
border-color: $pseudo-hover
|
||||
|
||||
&:before
|
||||
$w = .3rem
|
||||
position: absolute
|
||||
top: 1.8rem
|
||||
left: calc(-1rem - 17px)
|
||||
width: w = $w
|
||||
height: h = w
|
||||
border: .5 * w solid $light-blue
|
||||
border-radius: w
|
||||
background: var(--card-bg)
|
||||
content: ''
|
||||
line-height: h
|
||||
transition: all .2s ease-in-out
|
||||
|
||||
&.no-article-cover
|
||||
display: flex
|
||||
flex-direction: column
|
||||
justify-content: center
|
||||
|
||||
.article-sort-item-info
|
||||
padding: 0
|
||||
width: 100%
|
||||
|
||||
&.year
|
||||
height: auto
|
||||
font-size: 1rem
|
||||
|
||||
&:hover
|
||||
&:before
|
||||
border-color: $light-blue
|
||||
|
||||
&:before
|
||||
top: .7rem
|
||||
border-color: $pseudo-hover
|
||||
|
||||
&-time
|
||||
color: $theme-meta-color
|
||||
font-size: .9em
|
||||
|
||||
time
|
||||
padding-left: .4rem
|
||||
cursor: default
|
||||
|
||||
&-title
|
||||
@extend .limit-more-line
|
||||
color: var(--font-color)
|
||||
font-size: 1.1em
|
||||
transition: all .3s
|
||||
-webkit-line-clamp: 2
|
||||
|
||||
&:hover
|
||||
color: $text-hover
|
||||
transform: translateX(20px)
|
||||
|
||||
&-img
|
||||
float: left
|
||||
overflow: hidden
|
||||
width: 80px
|
||||
height: 80px
|
||||
|
||||
img
|
||||
width: 100%
|
||||
height: 100%
|
||||
transition: all .6s
|
||||
object-fit: cover
|
||||
|
||||
&:hover
|
||||
transform: scale(1.1)
|
||||
|
||||
&-info
|
||||
display: inline-block
|
||||
overflow: hidden
|
||||
padding: 0 1rem
|
||||
width: calc(100% - 80px)
|
||||
|
||||
.category-lists
|
||||
padding: 1rem 0 1.5rem
|
||||
|
||||
.category__title
|
||||
text-align: center
|
||||
font-size: 1.8rem
|
||||
|
||||
.category-list
|
||||
a
|
||||
color: var(--font-color)
|
||||
cursor: pointer
|
||||
|
||||
&:hover
|
||||
color: $text-hover
|
||||
|
||||
.category-list-count
|
||||
margin-left: .4rem
|
||||
color: $theme-meta-color
|
||||
|
||||
&:before
|
||||
content: '('
|
||||
|
||||
&:after
|
||||
content: ')'
|
||||
|
||||
// 隱藏aside
|
||||
.hide-aside
|
||||
max-width: 1000px
|
||||
|
||||
& > div
|
||||
width: 100% !important
|
||||
|
||||
@media screen and (max-width: $sm)
|
||||
.layout_page
|
||||
padding: 1rem 5px !important
|
||||
|
||||
& > div:first-child:not(.recent-posts)
|
||||
padding: 1.8rem .7rem
|
||||
|
||||
.category-lists
|
||||
padding: 0
|
||||
|
||||
#recent-posts
|
||||
.recent-post-item
|
||||
flex-direction: column
|
||||
height: auto !important
|
||||
|
||||
.post_cover
|
||||
order: 1 !important
|
||||
width: 100%
|
||||
height: 230px
|
||||
border-radius: 8px 8px 0 0
|
||||
|
||||
.recent-post-info
|
||||
order: 2 !important
|
||||
padding: 1rem 1rem 1.5rem
|
||||
width: 100%
|
||||
|
||||
&.no-cover
|
||||
padding: 1.5rem 1rem
|
||||
|
||||
.article-title
|
||||
font-size: 1rem
|
||||
|
||||
.content
|
||||
height: auto
|
||||
|
||||
@media screen and (min-width: 900px)
|
||||
if hexo-config('aside.position') == 'left'
|
||||
#recent-posts,
|
||||
#page,
|
||||
.category-content,
|
||||
#archive,
|
||||
.tag-cloud,
|
||||
#tag,
|
||||
#category
|
||||
order: 2
|
||||
|
||||
@media screen and (max-width: 900px)
|
||||
.layout_page
|
||||
& > div:first-child:not(.recent-posts)
|
||||
width: 100% !important
|
||||
|
||||
// ie10-ios11使用
|
||||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)
|
||||
.recent-post-info
|
||||
.content
|
||||
height: 90px
|
||||
@@ -75,7 +75,7 @@
|
||||
margin: 2rem 0 !important
|
||||
background: $dark-black
|
||||
|
||||
@media screen and (max-width: 768px)
|
||||
+maxWidth768()
|
||||
.prev-post,
|
||||
.next-post
|
||||
width: 100% !important
|
||||
|
||||
@@ -58,7 +58,7 @@ beautify()
|
||||
list-style: none
|
||||
counter-reset: li
|
||||
|
||||
@media screen and (max-width: $sm)
|
||||
+maxWidth768()
|
||||
padding: 0 0 0 .4rem
|
||||
|
||||
p
|
||||
@@ -68,7 +68,7 @@ beautify()
|
||||
ul
|
||||
padding-left: .6rem
|
||||
|
||||
@media screen and (max-width: $sm)
|
||||
+maxWidth768()
|
||||
padding-left: .2rem
|
||||
|
||||
li
|
||||
@@ -92,30 +92,30 @@ beautify()
|
||||
ol
|
||||
> li
|
||||
&:not(.tab)
|
||||
padding: .1rem .2rem .1rem 1.4rem
|
||||
padding: .2em .2em .2em 1.8em
|
||||
|
||||
&:before
|
||||
margin-top: .3rem
|
||||
width: w = 1rem
|
||||
margin-top: .65em
|
||||
width: w = 1.45em
|
||||
height: h = w
|
||||
border-radius: .5 * w
|
||||
content: counter(li)
|
||||
counter-increment: li
|
||||
text-align: center
|
||||
font-size: .6rem
|
||||
font-size: .85em
|
||||
line-height: h
|
||||
|
||||
ul
|
||||
> li:not(.tab)
|
||||
padding: .1rem .2rem .1rem 1rem
|
||||
padding: .2em .2em .2em 1.4em
|
||||
|
||||
&:hover
|
||||
&:before
|
||||
border-color: $pseudo-hover
|
||||
|
||||
&:before
|
||||
$w = .3rem
|
||||
top: 10px
|
||||
$w = .42em
|
||||
top: .78em
|
||||
width: w = $w
|
||||
height: h = w
|
||||
border: .5 * w solid $light-blue
|
||||
@@ -204,8 +204,7 @@ img
|
||||
border: 1px solid $light-blue
|
||||
border-radius: .6rem
|
||||
color: $light-blue
|
||||
font-size: 12px
|
||||
cursor: pointer
|
||||
font-size: .85em
|
||||
transition: all .2s ease-in-out
|
||||
|
||||
&:hover
|
||||
@@ -219,14 +218,14 @@ img
|
||||
width: fit-content
|
||||
|
||||
.social-share
|
||||
font-size: 12px
|
||||
font-size: .85em
|
||||
|
||||
.social-share-icon
|
||||
margin: 0 4px
|
||||
width: 26px
|
||||
height: 26px
|
||||
font-size: 15px
|
||||
line-height: 25px
|
||||
width: w = 1.85em
|
||||
height: w
|
||||
font-size: 1.2em
|
||||
line-height: w
|
||||
|
||||
.post-copyright
|
||||
position: relative
|
||||
@@ -295,29 +294,29 @@ img
|
||||
.post-outdate-notice
|
||||
position: relative
|
||||
margin: 0 0 1rem
|
||||
padding: .5rem 1.2rem
|
||||
padding: .5em 1.2em
|
||||
border-radius: 3px
|
||||
background-color: $noticeOutdate-bg
|
||||
color: $noticeOutdate-color
|
||||
|
||||
if hexo-config('noticeOutdate.style') == 'flat'
|
||||
padding: .5rem 1.2rem .5rem 1.8rem
|
||||
padding: .5em 1em .5em 2.6em
|
||||
border-left: 5px solid $noticeOutdate-border
|
||||
|
||||
&:before
|
||||
@extend .fontawesomeIcon
|
||||
position: absolute
|
||||
top: 50%
|
||||
left: 1em
|
||||
left: .9em
|
||||
color: $noticeOutdate-border
|
||||
content: '\f071'
|
||||
transform: translateY(-50%)
|
||||
|
||||
@media screen and (max-width: 1024px)
|
||||
+maxWidth1024()
|
||||
.layout_post
|
||||
width: auto
|
||||
|
||||
@media screen and (max-width: $sm)
|
||||
+maxWidth768()
|
||||
.layout_post
|
||||
padding: 1rem 5px
|
||||
|
||||
@@ -325,7 +324,7 @@ img
|
||||
padding: 1.8rem .7rem
|
||||
|
||||
// adjust the layout width in big screen
|
||||
@media screen and (min-width: $lr)
|
||||
+minWidth2000()
|
||||
.layout_post
|
||||
max-width: 1300px
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
.relatedPosts_headline
|
||||
margin-bottom: 5px
|
||||
font-weight: 700
|
||||
font-size: 20px
|
||||
font-size: 1.43em
|
||||
|
||||
.relatedPosts_item
|
||||
position: relative
|
||||
@@ -21,12 +21,12 @@
|
||||
opacity: .8
|
||||
transform: scale(1.1)
|
||||
|
||||
@media screen and (max-width: 768px)
|
||||
+maxWidth768()
|
||||
margin: 2px
|
||||
width: calc(50% - 4px)
|
||||
height: 150px
|
||||
|
||||
@media screen and (max-width: 480px)
|
||||
+maxWidth600()
|
||||
width: calc(100% - 4px)
|
||||
|
||||
.relatedPosts_cover
|
||||
|
||||
@@ -36,5 +36,5 @@
|
||||
#mobile-toc-button
|
||||
display: none
|
||||
|
||||
@media screen and (max-width: $bg)
|
||||
+maxWidth1024()
|
||||
display: block
|
||||
|
||||
@@ -3,13 +3,19 @@
|
||||
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
|
||||
|
||||
@media screen and (max-width: $bg)
|
||||
+maxWidth1024()
|
||||
display: none
|
||||
|
||||
.tocOpenPc
|
||||
& > #toggle-sidebar
|
||||
color: #99a9bf
|
||||
transform: rotateZ(180deg)
|
||||
|
||||
#sidebar
|
||||
position: fixed
|
||||
top: 0
|
||||
@@ -21,7 +27,7 @@
|
||||
background: var(--sidebar-bg)
|
||||
opacity: .9
|
||||
|
||||
@media screen and (max-width: $bg)
|
||||
+maxWidth1024()
|
||||
right: -($mobile-sidebar-width)
|
||||
left: auto
|
||||
z-index: 103
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
#vcomment
|
||||
font-size: 1.15em
|
||||
|
||||
.vbtn
|
||||
border: none
|
||||
background: var(--btn-bg)
|
||||
|
||||
Reference in New Issue
Block a user