mirror of
https://github.com/jerryc127/hexo-theme-butterfly.git
synced 2026-06-05 21:01:46 +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
@@ -17,6 +17,34 @@
|
||||
text-rendering: auto
|
||||
-webkit-font-smoothing: antialiased
|
||||
|
||||
maxWidth600()
|
||||
@media screen and (max-width: 600px)
|
||||
{block}
|
||||
|
||||
maxWidth768()
|
||||
@media screen and (max-width: 768px)
|
||||
{block}
|
||||
|
||||
minWidth768()
|
||||
@media screen and (min-width: 768px)
|
||||
{block}
|
||||
|
||||
maxWidth1024()
|
||||
@media screen and (max-width: 1024px)
|
||||
{block}
|
||||
|
||||
maxWidth900()
|
||||
@media screen and (max-width: 900px)
|
||||
{block}
|
||||
|
||||
minWidth900()
|
||||
@media screen and (min-width: 900px)
|
||||
{block}
|
||||
|
||||
minWidth2000()
|
||||
@media screen and (min-width: 2000px)
|
||||
{block}
|
||||
|
||||
[data-theme='light']
|
||||
--global-bg: $body-bg
|
||||
--font-color: $font-black
|
||||
@@ -43,4 +71,5 @@
|
||||
--text-highlight-color: $text-highlight-color
|
||||
--blockquote-color: $blockquote-color
|
||||
--blockquote-bg: $blockquote-background-color
|
||||
--reward-pop: $reward-pop-up-bg
|
||||
--reward-pop: $reward-pop-up-bg
|
||||
--sidebar-icon-color: $sidebar-icon-color
|
||||
@@ -1,6 +1,6 @@
|
||||
html
|
||||
height: 100%
|
||||
font-size: $rem
|
||||
font-size: 20px
|
||||
|
||||
body
|
||||
position: relative
|
||||
@@ -119,27 +119,9 @@ button
|
||||
#aside_content .author-info__description
|
||||
font-family: $site-name-font
|
||||
|
||||
.is-right
|
||||
text-align: right
|
||||
|
||||
.is-left
|
||||
text-align: left
|
||||
|
||||
.is-center
|
||||
text-align: center
|
||||
|
||||
.is_visible
|
||||
display: block !important
|
||||
|
||||
.is-visible-inline
|
||||
display: inline-block !important
|
||||
|
||||
.is-invisible
|
||||
display: none !important
|
||||
|
||||
.is-hidden
|
||||
overflow: hidden
|
||||
|
||||
.copy-true
|
||||
user-select: all
|
||||
|
||||
|
||||
@@ -125,12 +125,13 @@ blockquote
|
||||
|
||||
.highlight-tools
|
||||
position: relative
|
||||
display: flex
|
||||
align-items: center
|
||||
overflow: hidden
|
||||
width: 100%
|
||||
height: 1.5rem
|
||||
min-height: 1.2rem
|
||||
height: 2.15em
|
||||
background: $highlight-tools.bg-color
|
||||
color: $highlight-tools.color
|
||||
font-size: 14px
|
||||
|
||||
&.closed + table
|
||||
display: none
|
||||
@@ -153,18 +154,15 @@ blockquote
|
||||
left: .7rem
|
||||
text-transform: capitalize
|
||||
font-weight: bold
|
||||
font-size: .8rem
|
||||
line-height: 1.5rem
|
||||
font-size: 1.15em
|
||||
|
||||
.copy-notice
|
||||
position: absolute
|
||||
top: .25rem
|
||||
right: 1.7rem
|
||||
opacity: 0
|
||||
|
||||
.copy-button
|
||||
position: absolute
|
||||
top: .4rem
|
||||
right: .7rem
|
||||
cursor: pointer
|
||||
transition: color .2s
|
||||
@@ -191,7 +189,6 @@ blockquote
|
||||
.highlight-tools
|
||||
&:after
|
||||
position: absolute
|
||||
top: .45rem
|
||||
left: .7rem
|
||||
width: 12px
|
||||
height: 12px
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -26,6 +26,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
|
||||
--blockquote-color: alpha(#FFFFFF, .6)
|
||||
--blockquote-bg: lighten(#121212, 10)
|
||||
--reward-pop: lighten(#121212, 10)
|
||||
--sidebar-icon-color: alpha(#FFFFFF, .6)
|
||||
|
||||
// 網站背景，footer背景
|
||||
#web_bg[data-type=color],
|
||||
|
||||
@@ -0,0 +1,115 @@
|
||||
.article-sort
|
||||
margin-left: .5rem
|
||||
padding-left: 1rem
|
||||
border-left: 2px solid lighten($light-blue, 20)
|
||||
|
||||
&-title
|
||||
position: relative
|
||||
margin-left: .5rem
|
||||
padding-bottom: 1rem
|
||||
padding-left: 1rem
|
||||
font-size: 1.72em
|
||||
|
||||
&:hover
|
||||
&:before
|
||||
border-color: $pseudo-hover
|
||||
|
||||
&:before
|
||||
position: absolute
|
||||
top: calc(((100% - 1.8rem) / 2))
|
||||
left: -.45rem
|
||||
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.5em
|
||||
background: lighten($light-blue, 20)
|
||||
content: ''
|
||||
|
||||
&-item
|
||||
position: relative
|
||||
display: flex
|
||||
align-items: center
|
||||
margin: 0 0 1rem .5rem
|
||||
transition: all .2s ease-in-out
|
||||
|
||||
&:hover
|
||||
&:before
|
||||
border-color: $pseudo-hover
|
||||
|
||||
&:before
|
||||
$w = .3rem
|
||||
position: absolute
|
||||
left: calc(-1rem - 17px)
|
||||
width: w = $w
|
||||
height: h = w
|
||||
border: .5 * w solid $light-blue
|
||||
border-radius: w
|
||||
background: var(--card-bg)
|
||||
content: ''
|
||||
transition: all .2s ease-in-out
|
||||
|
||||
&.no-article-cover
|
||||
height: 80px
|
||||
|
||||
.article-sort-item-info
|
||||
padding: 0
|
||||
|
||||
&.year
|
||||
font-size: 1.43em
|
||||
|
||||
&:hover
|
||||
&:before
|
||||
border-color: $light-blue
|
||||
|
||||
&:before
|
||||
border-color: $pseudo-hover
|
||||
|
||||
&-time
|
||||
color: $theme-meta-color
|
||||
font-size: 95%
|
||||
|
||||
time
|
||||
padding-left: .3rem
|
||||
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(10px)
|
||||
|
||||
&-img
|
||||
overflow: hidden
|
||||
width: 80px
|
||||
height: 80px
|
||||
|
||||
img
|
||||
width: 100%
|
||||
height: 100%
|
||||
transition: all .6s
|
||||
object-fit: cover
|
||||
|
||||
&:hover
|
||||
transform: scale(1.1)
|
||||
|
||||
&-info
|
||||
flex: 1
|
||||
padding: 0 .8rem
|
||||
@@ -0,0 +1,60 @@
|
||||
.category-content
|
||||
.category-lists
|
||||
padding: 1rem 0 1.5rem
|
||||
|
||||
+maxWidth768()
|
||||
padding: 0
|
||||
|
||||
.category__title
|
||||
text-align: center
|
||||
font-size: 2.57em
|
||||
|
||||
.category-list
|
||||
a
|
||||
color: var(--font-color)
|
||||
|
||||
&:hover
|
||||
color: $text-hover
|
||||
|
||||
.category-list-count
|
||||
margin-left: .4rem
|
||||
color: $theme-meta-color
|
||||
|
||||
&:before
|
||||
content: '('
|
||||
|
||||
&:after
|
||||
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: .12em .4em .12em 1.4em
|
||||
|
||||
&:before
|
||||
position: absolute
|
||||
left: 0
|
||||
cursor: pointer
|
||||
transition: all .3s ease-out
|
||||
$w = .43em
|
||||
top: .7em
|
||||
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
|
||||
@@ -0,0 +1,51 @@
|
||||
.layout_page
|
||||
display: flex
|
||||
margin: 0 auto
|
||||
padding: 2rem 15px
|
||||
max-width: 1200px
|
||||
|
||||
+maxWidth900()
|
||||
flex-direction: column
|
||||
|
||||
+maxWidth768()
|
||||
padding: 1rem 5px !important
|
||||
|
||||
& > div:first-child:not(.recent-posts)
|
||||
+maxWidth768()
|
||||
padding: 1.8rem .7rem !important
|
||||
|
||||
& > div:first-child
|
||||
width: 75%
|
||||
|
||||
+maxWidth900()
|
||||
width: 100% !important
|
||||
|
||||
// 隱藏aside
|
||||
&.hide-aside
|
||||
max-width: 1000px
|
||||
|
||||
& > 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)
|
||||
|
||||
+minWidth900()
|
||||
if hexo-config('aside.position') == 'left'
|
||||
#recent-posts,
|
||||
#page,
|
||||
.category-content,
|
||||
#archive,
|
||||
.tag-cloud,
|
||||
#tag,
|
||||
#category
|
||||
order: 2
|
||||
@@ -0,0 +1,143 @@
|
||||
#recent-posts
|
||||
& > .recent-post-item:not(:first-child)
|
||||
margin-top: 1rem
|
||||
|
||||
& > .recent-post-item
|
||||
display: flex
|
||||
flex-direction: row
|
||||
align-items: center
|
||||
height: 20em
|
||||
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: 100%
|
||||
-webkit-mask-image: -webkit-radial-gradient(white, black)
|
||||
|
||||
img.post_bg
|
||||
width: 100%
|
||||
height: 100%
|
||||
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.72em
|
||||
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
|
||||
|
||||
+maxWidth768()
|
||||
#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: 1.43em
|
||||
|
||||
.content
|
||||
height: auto
|
||||
@@ -0,0 +1,14 @@
|
||||
.tag-cloud
|
||||
text-align: center
|
||||
|
||||
a
|
||||
display: inline-block
|
||||
padding: 0 .4rem
|
||||
transition: all .3s
|
||||
|
||||
&:hover
|
||||
color: $text-hover !important
|
||||
transform: scale(1.1)
|
||||
|
||||
&__title
|
||||
font-size: 2.57em
|
||||
@@ -13,24 +13,23 @@
|
||||
border-radius: 2rem
|
||||
background: var(--search-bg)
|
||||
color: var(--search-input-color)
|
||||
font-size: 14px
|
||||
|
||||
.ais-hits--item.algolia-hit-item
|
||||
position: relative
|
||||
padding-left: 1.5rem
|
||||
padding-left: 1.2rem
|
||||
|
||||
&:hover
|
||||
&:before
|
||||
border-color: $pseudo-hover
|
||||
|
||||
&:before
|
||||
$w = .3rem
|
||||
$w = .5em
|
||||
position: absolute
|
||||
top: .4rem
|
||||
top: .53em
|
||||
left: 0
|
||||
width: w = $w
|
||||
height: h = w
|
||||
border: .5 * w solid $search-color
|
||||
border: .15rem solid $search-color
|
||||
border-radius: w
|
||||
background: transparent
|
||||
content: ''
|
||||
@@ -40,7 +39,6 @@
|
||||
a
|
||||
display: block
|
||||
color: var(--search-result-title)
|
||||
font-size: 14px
|
||||
cursor: pointer
|
||||
|
||||
&:hover
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
width: 30rem
|
||||
background: var(--search-bg)
|
||||
|
||||
@media screen and (max-width: $sm)
|
||||
+maxWidth768()
|
||||
top: 0
|
||||
left: 0
|
||||
margin: 0
|
||||
@@ -24,7 +24,7 @@
|
||||
top: .8rem
|
||||
right: 1rem
|
||||
color: $grey
|
||||
font-size: 1rem
|
||||
font-size: 1.4em
|
||||
line-height: 1
|
||||
cursor: pointer
|
||||
transition: color .2s ease-in-out
|
||||
@@ -35,7 +35,7 @@
|
||||
&__title
|
||||
padding: 0 0 .7rem
|
||||
color: $search-color
|
||||
font-size: 1rem
|
||||
font-size: 1.4em
|
||||
line-height: 1
|
||||
|
||||
#search-mask
|
||||
|
||||
@@ -14,12 +14,11 @@
|
||||
border-radius: 2rem
|
||||
background: var(--search-bg)
|
||||
color: var(--search-input-color)
|
||||
font-size: 14px
|
||||
-webkit-appearance: none
|
||||
|
||||
.local-search__hit-item
|
||||
position: relative
|
||||
padding-left: 1.3rem
|
||||
padding-left: 1.2rem
|
||||
line-height: 1.7
|
||||
|
||||
&:hover
|
||||
@@ -27,13 +26,13 @@
|
||||
border-color: $pseudo-hover
|
||||
|
||||
&:before
|
||||
$w = .3rem
|
||||
$w = .5em
|
||||
position: absolute
|
||||
top: .3rem
|
||||
top: .45em
|
||||
left: 0
|
||||
width: w = $w
|
||||
height: h = w
|
||||
border: .5 * w solid $search-color
|
||||
border: .15rem solid $search-color
|
||||
border-radius: w
|
||||
background: transparent
|
||||
content: ''
|
||||
@@ -44,7 +43,6 @@
|
||||
display: block
|
||||
color: var(--search-result-title)
|
||||
font-weight: 600
|
||||
font-size: 14px
|
||||
cursor: pointer
|
||||
|
||||
&:hover
|
||||
@@ -65,6 +63,6 @@
|
||||
overflow-y: auto
|
||||
max-height: 10.5rem
|
||||
|
||||
@media screen and (max-width: $sm)
|
||||
+maxWidth768()
|
||||
padding-bottom: 2rem
|
||||
max-height: 75vh !important
|
||||
|
||||
@@ -9,7 +9,7 @@ figure.gallery-group
|
||||
background: $dark-black
|
||||
-webkit-transform: translate3d(0, 0, 0)
|
||||
|
||||
@media screen and (max-width: 600px)
|
||||
+maxWidth600()
|
||||
width: calc(100% - .4rem)
|
||||
|
||||
&:hover
|
||||
@@ -61,7 +61,7 @@ figure.gallery-group
|
||||
margin: 0
|
||||
padding: .4rem 0 0
|
||||
letter-spacing: 1px
|
||||
font-size: .8rem
|
||||
font-size: 1.1em
|
||||
line-height: 1.5
|
||||
opacity: 0
|
||||
transition: opacity .35s, transform .35s
|
||||
@@ -74,7 +74,7 @@ figure.gallery-group
|
||||
margin: 0
|
||||
padding: .4rem 0
|
||||
font-weight: bold
|
||||
font-size: 1.2rem
|
||||
font-size: 1.65em
|
||||
line-height: 1.5
|
||||
-webkit-line-clamp: 2
|
||||
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
padding: 0
|
||||
list-style: none
|
||||
|
||||
@media screen and (max-width: 768px)
|
||||
+maxWidth768()
|
||||
flex-grow: 1
|
||||
|
||||
button
|
||||
@@ -53,7 +53,7 @@
|
||||
display: none
|
||||
padding: 1.8rem 1.2rem
|
||||
|
||||
@media screen and (max-width: 768px)
|
||||
+maxWidth768()
|
||||
padding: 1.2rem .7rem
|
||||
|
||||
&.active
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
@import 'var'
|
||||
@import '_global/*'
|
||||
@import '_highlight/highlight'
|
||||
@import '_page/*'
|
||||
@import '_layout/*'
|
||||
@import '_tags/*'
|
||||
@import '_mode/*'
|
||||
|
||||
+22
-25
@@ -4,14 +4,14 @@ $strong-cyan = #00c4b6
|
||||
$light-orange = #FF7242
|
||||
$light-red = #F47466
|
||||
$themeColorEnable = hexo-config('theme_color') && hexo-config('theme_color.enable')
|
||||
$theme-color = $themeColorEnable ? convert(hexo-config('theme_color.main')) : $bright-blue
|
||||
$theme-paginator-color = $themeColorEnable ? convert(hexo-config('theme_color.paginator')) : $strong-cyan
|
||||
$theme-text-selection-color = $themeColorEnable ? convert(hexo-config('theme_color.text_selection')) : $strong-cyan
|
||||
$theme-link-color = $themeColorEnable ? convert(hexo-config('theme_color.link_color')) : $bright-blue
|
||||
$theme-hr-color = $themeColorEnable ? convert(hexo-config('theme_color.hr_color')) : $bright-blue
|
||||
$code-foreground = $themeColorEnable ? convert(hexo-config('theme_color.code_foreground')) : $light-red
|
||||
$code-background = $themeColorEnable ? convert(hexo-config('theme_color.code_background')) : rgba(27, 31, 35, .05)
|
||||
$theme-toc-color = $themeColorEnable ? convert(hexo-config('theme_color.toc_color')) : $strong-cyan
|
||||
$theme-color = $themeColorEnable && hexo-config('theme_color.main') ? convert(hexo-config('theme_color.main')) : $bright-blue
|
||||
$theme-paginator-color = $themeColorEnable && hexo-config('theme_color.paginator') ? convert(hexo-config('theme_color.paginator')) : $strong-cyan
|
||||
$theme-text-selection-color = $themeColorEnable && hexo-config('theme_color.text_selection') ? convert(hexo-config('theme_color.text_selection')) : $strong-cyan
|
||||
$theme-link-color = $themeColorEnable && hexo-config('theme_color.link_color') ? convert(hexo-config('theme_color.link_color')) : $bright-blue
|
||||
$theme-hr-color = $themeColorEnable && hexo-config('theme_color.hr_color') ? convert(hexo-config('theme_color.hr_color')) : $bright-blue
|
||||
$code-foreground = $themeColorEnable && hexo-config('theme_color.code_foreground') ? convert(hexo-config('theme_color.code_foreground')) : $light-red
|
||||
$code-background = $themeColorEnable && hexo-config('theme_color.code_background') ? convert(hexo-config('theme_color.code_background')) : rgba(27, 31, 35, .05)
|
||||
$theme-toc-color = $themeColorEnable && hexo-config('theme_color.toc_color') ? convert(hexo-config('theme_color.toc_color')) : $strong-cyan
|
||||
// font
|
||||
$dafault-font-family = -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif
|
||||
$dafault-code-font = consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', sans-serif
|
||||
@@ -27,16 +27,13 @@ $beautifyEnable = hexo-config('beautify.enable')
|
||||
$title-prefix-icon = $beautifyEnable ? hexo-config('beautify.title-prefix-icon') : '\f0c1'
|
||||
$title-prefix-icon-color = $beautifyEnable ? convert(hexo-config('beautify.title-prefix-icon-color')) : $light-red
|
||||
// Global Variables
|
||||
$font-size = 14px
|
||||
$font-size = hexo-config('font.global-font-size') ? convert(hexo-config('font.global-font-size')) : 14px
|
||||
$font-color = #1F2D3D
|
||||
$rem = 20px
|
||||
$text-line-height = 2
|
||||
$sm = 768px
|
||||
$bg = 1024px
|
||||
$lr = 2000px
|
||||
$web-bg = convert(hexo-config('background'))
|
||||
$index_top_img_height = convert(hexo-config('index_top_img_height')) || 100vh
|
||||
$index_site_info_top = convert(hexo-config('index_site_info_top')) || 43%
|
||||
$web-bg = hexo-config('background') && convert(hexo-config('background'))
|
||||
$index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 100vh
|
||||
$index_site_info_top = hexo-config('index_site_info_top') ? convert(hexo-config('index_site_info_top')) : 43%
|
||||
// Global color & SVG
|
||||
$light-blue = $theme-color
|
||||
$dark-black = #000000
|
||||
@@ -52,27 +49,27 @@ $text-bg-hover = $theme-color
|
||||
// code
|
||||
$line-height-code-block = 1.6
|
||||
$blockquote-color = #6a737d
|
||||
$blockquote-padding-color = $themeColorEnable ? convert(hexo-config('theme_color.blockquote_padding_color')) : #49B1F5
|
||||
$blockquote-background-color = $themeColorEnable ? alpha(convert(hexo-config('theme_color.blockquote_background_color')), .1) : alpha($blockquote-padding-color, .1)
|
||||
$blockquote-padding-color = $themeColorEnable && hexo-config('theme_color.blockquote_padding_color') ? convert(hexo-config('theme_color.blockquote_padding_color')) : #49B1F5
|
||||
$blockquote-background-color = $themeColorEnable && hexo-config('theme_color.blockquote_background_color') ? alpha(convert(hexo-config('theme_color.blockquote_background_color')), .1) : alpha($blockquote-padding-color, .1)
|
||||
// page
|
||||
$body-bg = #fff
|
||||
$a-link-color = #99a9bf
|
||||
$sticky-color = $light-orange
|
||||
$theme-meta-color = $themeColorEnable ? convert(hexo-config('theme_color.meta_color')) : #858585
|
||||
$theme-meta-color = $themeColorEnable && hexo-config('theme_color.meta_color') ? convert(hexo-config('theme_color.meta_color')) : #858585
|
||||
// sidebar
|
||||
$sidebar-icon-top = 20px
|
||||
$sidebar-icon-left = $sidebar-icon-top - 4px
|
||||
$sidebar-icon-size = 16px
|
||||
$sidebar-icon-color = #1F2D3D
|
||||
$sidebar-width = 300px
|
||||
$sidebar-background = #f6f8fa
|
||||
$sidebar-active-color = #fff
|
||||
$mobile-sidebar-width = 250px
|
||||
// Button
|
||||
$button-color = #fff
|
||||
$button-hover-color = $themeColorEnable ? convert(hexo-config('theme_color.button_hover')) : $light-orange
|
||||
$button-bg= $theme-color
|
||||
$button-hover-color = $themeColorEnable && hexo-config('theme_color.button_hover') ? convert(hexo-config('theme_color.button_hover')) : $light-orange
|
||||
$button-bg = $theme-color
|
||||
$pseudo-hover = $button-hover-color
|
||||
|
||||
// table
|
||||
$table-thead-bg = #99a9bf
|
||||
// reward
|
||||
@@ -80,10 +77,10 @@ $reward-pop-up-bg = #f5f5f5
|
||||
$reward-pop-up-color = #858585
|
||||
// search
|
||||
$search-bg = #f6f8fa
|
||||
$search-input-color= $font-black
|
||||
$search-input-color = $font-black
|
||||
$search-color = $theme-color
|
||||
$search-keyword-highlight = #F47466
|
||||
$search-result-title= $font-black
|
||||
$search-result-title = $font-black
|
||||
// comments
|
||||
$comments-switch-first-text = $bright-blue
|
||||
$comments-switch-second-text = $light-orange
|
||||
@@ -102,7 +99,7 @@ $tag-hide-toggle-bg = #f0f0f0
|
||||
$preloader-bg = #37474f
|
||||
$preloader-word-color = #fff
|
||||
// rightside
|
||||
$rightside-bottom = hexo-config('rightside-bottom') is a 'unit' ? unit(hexo-config('rightside-bottom'), px) : 40px
|
||||
$rightside-bottom = hexo-config('rightside-bottom') ? convert(hexo-config('rightside-bottom')) : 40px
|
||||
// fireworks
|
||||
$fireworks-zIndex = hexo-config('fireworks.zIndex') ? hexo-config('fireworks.zIndex') : 99999
|
||||
// Tag Plugins - Note
|
||||
@@ -178,5 +175,5 @@ $tab-botton-bg = #f0f0f0
|
||||
$tab-botton-color = $font-color
|
||||
$tab-button-hover-bg = darken($tab-border-color, 8)
|
||||
$tab-active-border-color = $theme-color
|
||||
$tab-button-active-bg= $card-bg
|
||||
$tab-button-active-bg = $card-bg
|
||||
$tab-to-top-color = #99a9bf
|
||||
+96
-82
@@ -1,3 +1,4 @@
|
||||
|
||||
/**
|
||||
* 當menu過多時，自動適配，避免UI錯亂
|
||||
* @param {*} n
|
||||
@@ -5,9 +6,9 @@
|
||||
* 傳入 2 正常狀態下
|
||||
*/
|
||||
|
||||
const blogNameWidth = $('#blog_name').width()
|
||||
const blogNameWidth = $('#site-name').width()
|
||||
const menusWidth = $('.menus').width()
|
||||
const sidebarWidth = $('#sidebar').width()
|
||||
const sidebarWidth = $('#sidebar').width() || 300
|
||||
|
||||
const adjustMenu = function (n) {
|
||||
const $nav = $('#nav')
|
||||
@@ -17,13 +18,9 @@ const adjustMenu = function (n) {
|
||||
else t = blogNameWidth + menusWidth > $nav.width() - 30
|
||||
|
||||
if (t) {
|
||||
$nav.find('.toggle-menu').addClass('is-visible-inline')
|
||||
$nav.find('.menus_items').addClass('is-invisible')
|
||||
$nav.find('#search_button span').addClass('is-invisible')
|
||||
$nav.addClass('hide-menu')
|
||||
} else {
|
||||
$nav.find('.toggle-menu').removeClass('is-visible-inline')
|
||||
$nav.find('.menus_items').removeClass('is-invisible')
|
||||
$nav.find('#search_button span').removeClass('is-invisible')
|
||||
$nav.removeClass('hide-menu')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -59,18 +56,17 @@ const closeSidebar = () => {
|
||||
$('#body-wrap').animate({
|
||||
paddingLeft: 0
|
||||
}, 400)
|
||||
$('#toggle-sidebar').css({
|
||||
transform: 'rotateZ(0deg)',
|
||||
color: '#1F2D3D',
|
||||
opacity: '1'
|
||||
})
|
||||
setTimeout(function () {
|
||||
adjustMenu(2)
|
||||
}, 400)
|
||||
if ($('#nav').hasClass('hide-menu')) {
|
||||
setTimeout(function () {
|
||||
adjustMenu(2)
|
||||
}, 400)
|
||||
}
|
||||
}
|
||||
|
||||
const openSidebar = () => {
|
||||
adjustMenu(1)
|
||||
if (!$('#nav').hasClass('hide-menu')) {
|
||||
adjustMenu(1)
|
||||
}
|
||||
$('#sidebar').addClass('tocOpenPc').animate({
|
||||
left: 0
|
||||
}, 400)
|
||||
@@ -80,11 +76,6 @@ const openSidebar = () => {
|
||||
$('#body-wrap').animate({
|
||||
paddingLeft: 300
|
||||
}, 400)
|
||||
$('#toggle-sidebar').css({
|
||||
transform: 'rotateZ(180deg)',
|
||||
color: '#99a9bf',
|
||||
opacity: '1'
|
||||
})
|
||||
}
|
||||
|
||||
const toggleSidebar = function () {
|
||||
@@ -167,7 +158,7 @@ const sidebarFn = () => {
|
||||
})
|
||||
|
||||
const mql = window.matchMedia('(max-width: 1024px)')
|
||||
mql.addListener(function (ev) {
|
||||
mql.addEventListener('change', function (ev) {
|
||||
if (ev.matches) {
|
||||
if ($sidebar.hasClass('tocOpenPc')) closeSidebar()
|
||||
} else {
|
||||
@@ -178,11 +169,10 @@ const sidebarFn = () => {
|
||||
|
||||
// toc元素點擊
|
||||
$sidebar.find('.toc-link').on('click', function (e) {
|
||||
e.preventDefault()
|
||||
scrollToDest(decodeURI($(this).attr('href')))
|
||||
if (window.innerWidth <= 1024) {
|
||||
closeMobileSidebar('toc')
|
||||
} else {
|
||||
e.preventDefault()
|
||||
scrollToDest(decodeURI($(this).attr('href')))
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -201,12 +191,15 @@ const scrollDownInIndex = () => {
|
||||
* 只適用於Hexo默認的代碼渲染
|
||||
*/
|
||||
const addHighlightTool = function () {
|
||||
const $figureHighlight = $('figure.highlight')
|
||||
const isHighlightCopy = GLOBAL_CONFIG.highlightCopy
|
||||
const isHighlightLang = GLOBAL_CONFIG.highlightLang
|
||||
const isHighlightCopy = GLOBAL_CONFIG.highlight.highlightCopy
|
||||
const isHighlightLang = GLOBAL_CONFIG.highlight.highlightLang
|
||||
const isHighlightShrink = GLOBAL_CONFIG_SITE.isHighlightShrink
|
||||
const isShowTool = isHighlightCopy || isHighlightLang || isHighlightShrink !== undefined
|
||||
const $figureHighlight = GLOBAL_CONFIG.highlight.plugin === 'highlighjs' ? $('figure.highlight') : $('pre[class*="language-"')
|
||||
|
||||
if (isShowTool && $figureHighlight.length) {
|
||||
const isPrismjs = GLOBAL_CONFIG.highlight.plugin === 'prismjs'
|
||||
|
||||
if ($figureHighlight.length && (isHighlightCopy || isHighlightLang || isHighlightShrink !== undefined)) {
|
||||
let highlightShrinkEle = ''
|
||||
let highlightCopyEle = ''
|
||||
const highlightShrinkClass = isHighlightShrink === true ? 'closed' : ''
|
||||
@@ -220,16 +213,26 @@ const addHighlightTool = function () {
|
||||
}
|
||||
|
||||
if (isHighlightLang) {
|
||||
let langName
|
||||
$figureHighlight.each(function () {
|
||||
const $this = $(this)
|
||||
langName = $this.attr('class').split(' ')[1]
|
||||
if (langName === 'plain' || langName === undefined) langName = 'Code'
|
||||
const highlightLangEle = `<div class="code-lang">${langName}</div>`
|
||||
$this.prepend(`<div class="highlight-tools ${highlightShrinkClass}">${highlightShrinkEle + highlightLangEle + highlightCopyEle}</div>`)
|
||||
})
|
||||
if (isPrismjs) {
|
||||
$figureHighlight.each(function () {
|
||||
const $this = $(this)
|
||||
const langName = $this.attr('data-language') !== undefined ? $this.attr('data-language') : 'Code'
|
||||
const highlightLangEle = `<div class="code-lang">${langName}</div>`
|
||||
$this.wrap('<figure class="highlight"></figure>').before(`<div class="highlight-tools ${highlightShrinkClass}">${highlightShrinkEle + highlightLangEle + highlightCopyEle}</div>`)
|
||||
})
|
||||
} else {
|
||||
$figureHighlight.each(function (i, o) {
|
||||
const $this = $(this)
|
||||
let langName = $this.attr('class').split(' ')[1]
|
||||
if (langName === 'plain' || langName === undefined) langName = 'Code'
|
||||
const highlightLangEle = `<div class="code-lang">${langName}</div>`
|
||||
$this.prepend(`<div class="highlight-tools ${highlightShrinkClass}">${highlightShrinkEle + highlightLangEle + highlightCopyEle}</div>`)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
$figureHighlight.prepend(`<div class="highlight-tools ${highlightShrinkClass}">${highlightShrinkEle + highlightCopyEle}</div>`)
|
||||
const ele = `<div class="highlight-tools ${highlightShrinkClass}">${highlightShrinkEle + highlightCopyEle}</div>`
|
||||
if (isPrismjs) $figureHighlight.wrap('<figure class="highlight"></figure>').before(ele)
|
||||
else $figureHighlight.prepend(ele)
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -237,7 +240,7 @@ const addHighlightTool = function () {
|
||||
*/
|
||||
|
||||
if (isHighlightShrink !== undefined) {
|
||||
$figureHighlight.find('.highlight-tools >.expand').on('click', function () {
|
||||
$('.highlight-tools >.expand').on('click', function () {
|
||||
const $this = $(this)
|
||||
const $table = $this.parent().nextAll()
|
||||
$this.toggleClass('closed')
|
||||
@@ -277,12 +280,13 @@ const addHighlightTool = function () {
|
||||
}
|
||||
|
||||
// click events
|
||||
$figureHighlight.find('.highlight-tools >.copy-button').on('click', function () {
|
||||
$('.highlight-tools >.copy-button').on('click', function () {
|
||||
const $buttonParent = $(this).parents('figure.highlight')
|
||||
$buttonParent.addClass('copy-true')
|
||||
const selection = window.getSelection()
|
||||
const range = document.createRange()
|
||||
range.selectNodeContents($buttonParent.find('table .code pre')[0])
|
||||
if (isPrismjs) range.selectNodeContents($buttonParent.find('> pre code')[0])
|
||||
else range.selectNodeContents($buttonParent.find('table .code pre')[0])
|
||||
selection.removeAllRanges()
|
||||
selection.addRange(range)
|
||||
const text = selection.toString()
|
||||
@@ -477,7 +481,7 @@ const tocFn = function () {
|
||||
let currentId = ''
|
||||
list.each(function () {
|
||||
const head = $(this)
|
||||
if (top > head.offset().top - 25) {
|
||||
if (top > head.offset().top - 70) {
|
||||
if (versionBiggerFive) currentId = '#' + encodeURI($(this).attr('id'))
|
||||
else currentId = '#' + $(this).attr('id')
|
||||
}
|
||||
@@ -537,33 +541,17 @@ $rightsideEle.on('click', '#readmode', function () {
|
||||
$('body').toggleClass('read-mode')
|
||||
})
|
||||
|
||||
// font change
|
||||
const originFontSize = $('body').css('font-size')
|
||||
$rightsideEle.on('click', '#font_plus', () => {
|
||||
const nowFontSize = parseFloat($('body').css('font-size'))
|
||||
if (nowFontSize < 20) {
|
||||
$('body').css('font-size', nowFontSize + 1)
|
||||
}
|
||||
})
|
||||
|
||||
$rightsideEle.on('click', '#font_minus', () => {
|
||||
const nowFontSize = parseFloat($('body').css('font-size'))
|
||||
if (nowFontSize > 10) {
|
||||
$('body').css('font-size', nowFontSize - 1)
|
||||
}
|
||||
})
|
||||
|
||||
// Switch Between Light And Dark Mode
|
||||
if ($('#darkmode').length) {
|
||||
const switchReadMode = function () {
|
||||
const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
|
||||
if (nowMode === 'light') {
|
||||
activateDarkMode()
|
||||
Cookies.set('theme', 'dark', 2)
|
||||
saveToLocal.set('theme', 'dark', 2)
|
||||
GLOBAL_CONFIG.Snackbar !== undefined && snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
|
||||
} else {
|
||||
activateLightMode()
|
||||
Cookies.set('theme', 'light', 2)
|
||||
saveToLocal.set('theme', 'light', 2)
|
||||
GLOBAL_CONFIG.Snackbar !== undefined && snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
|
||||
}
|
||||
}
|
||||
@@ -590,7 +578,7 @@ $rightsideEle.on('click', '#go-up', () => scrollToDest('body'))
|
||||
const clickFnOfSubMenu = function () {
|
||||
$('#mobile-sidebar-menus .expand').on('click', function () {
|
||||
$(this).parents('.menus_item').find('> .menus_item_child').slideToggle()
|
||||
$(this).toggleClass('closed')
|
||||
$(this).toggleClass('hide')
|
||||
})
|
||||
|
||||
$(window).on('touchmove', function (e) {
|
||||
@@ -633,7 +621,23 @@ const addRuntime = () => {
|
||||
const $runtimeCount = $('#webinfo-runtime-count')
|
||||
if ($runtimeCount.length) {
|
||||
const publishDate = $runtimeCount.attr('publish_date')
|
||||
$runtimeCount.text(diffDate(publishDate) + ' ' + GLOBAL_CONFIG.runtime_unit)
|
||||
$runtimeCount.text(diffDate(publishDate) + ' ' + GLOBAL_CONFIG.runtime)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 最後一次更新時間
|
||||
*/
|
||||
const addLastPushDate = () => {
|
||||
const $lastPushDateItem = $('.webinfo-last-push-date')
|
||||
if ($lastPushDateItem.length) {
|
||||
const lastPushDate = $lastPushDateItem.attr('last-push-date')
|
||||
const diffDay = diffDate(lastPushDate)
|
||||
if (diffDay > 365) {
|
||||
$lastPushDateItem.text(lastPushDate)
|
||||
} else {
|
||||
$lastPushDateItem.text(diffDay + ' ' + GLOBAL_CONFIG.last_push_date)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -683,25 +687,33 @@ const clickFnOfTagHide = function () {
|
||||
}
|
||||
}
|
||||
|
||||
const clickFnOfTabs = function () {
|
||||
const $tab = $('#article-container .tabs')
|
||||
$tab.find('.tab > button').on('click', function (e) {
|
||||
const $this = $(this)
|
||||
const $tabItem = $this.parent()
|
||||
const tabsFn = {
|
||||
clickFnOfTabs: function () {
|
||||
const $tab = $('#article-container .tabs')
|
||||
$tab.find('.tab > button:not(.tab-to-top)').on('click', function (e) {
|
||||
const $this = $(this)
|
||||
const $tabItem = $this.parent()
|
||||
|
||||
if (!$tabItem.hasClass('active')) {
|
||||
const $tabContent = $this.parents('.nav-tabs').next()
|
||||
$tabItem.siblings('.active').removeClass('active')
|
||||
$tabItem.addClass('active')
|
||||
const tabId = $this.attr('data-href')
|
||||
$tabContent.find('> .tab-item-content').removeClass('active')
|
||||
$tabContent.find(`> ${tabId}`).addClass('active')
|
||||
const $isTabJustifiedGallery = $tabContent.find(tabId).find('.justified-gallery')
|
||||
if ($isTabJustifiedGallery.length > 0) {
|
||||
initJustifiedGallery($isTabJustifiedGallery)
|
||||
if (!$tabItem.hasClass('active')) {
|
||||
const $tabContent = $this.parents('.nav-tabs').next()
|
||||
$tabItem.siblings('.active').removeClass('active')
|
||||
$tabItem.addClass('active')
|
||||
const tabId = $this.attr('data-href')
|
||||
$tabContent.find('> .tab-item-content').removeClass('active')
|
||||
$tabContent.find(`> ${tabId}`).addClass('active')
|
||||
const $isTabJustifiedGallery = $tabContent.find(tabId).find('.justified-gallery')
|
||||
if ($isTabJustifiedGallery.length > 0) {
|
||||
initJustifiedGallery($isTabJustifiedGallery)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
backToTop: () => {
|
||||
const backToTopBtn = $('#article-container .tabs .tab-to-top')
|
||||
backToTopBtn.on('click', function () {
|
||||
scrollToDest($(this).parents('.tabs'))
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const toggleCardCategory = function () {
|
||||
@@ -790,15 +802,17 @@ const refreshFn = function () {
|
||||
|
||||
sidebarFn()
|
||||
GLOBAL_CONFIG_SITE.isHome && scrollDownInIndex()
|
||||
addHighlightTool()
|
||||
GLOBAL_CONFIG.highlight && addHighlightTool()
|
||||
GLOBAL_CONFIG.isPhotoFigcaption && addPhotoFigcaption()
|
||||
runJustifiedGallery()
|
||||
addLightBox()
|
||||
scrollFn()
|
||||
GLOBAL_CONFIG.runtime && addRuntime()
|
||||
GLOBAL_CONFIG.last_push_date && addLastPushDate()
|
||||
addTableWrap()
|
||||
clickFnOfTagHide()
|
||||
clickFnOfTabs()
|
||||
tabsFn.clickFnOfTabs()
|
||||
tabsFn.backToTop()
|
||||
toggleCardCategory()
|
||||
switchComments()
|
||||
}
|
||||
|
||||
Vendored
+1
-6
@@ -15,11 +15,8 @@
|
||||
}
|
||||
|
||||
function l() {
|
||||
var i = j("script"),
|
||||
w = i.length,
|
||||
v = i[w - 1];
|
||||
var v = cn;
|
||||
return {
|
||||
l: w,
|
||||
z: o(v, "zIndex", -1),
|
||||
o: o(v, "opacity", 0.5),
|
||||
c: o(v, "color", "0,0,0"),
|
||||
@@ -49,7 +46,6 @@
|
||||
}
|
||||
var u = document.createElement("canvas"),
|
||||
s = l(),
|
||||
c = "c_n" + s.l,
|
||||
e = u.getContext("2d"),
|
||||
r, n, m = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (i) {
|
||||
window.setTimeout(i, 1000 / 45)
|
||||
@@ -60,7 +56,6 @@
|
||||
y: null,
|
||||
max: 20000
|
||||
};
|
||||
u.id = c;
|
||||
u.style.cssText = "position:fixed;top:0;left:0;z-index:" + s.z + ";opacity:" + s.o;
|
||||
j("body")[0].appendChild(u);
|
||||
k(), window.onresize = k;
|
||||
|
||||
+5
-4
@@ -1,3 +1,4 @@
|
||||
/* eslint-disable no-undef */
|
||||
(function () {
|
||||
const translate = GLOBAL_CONFIG.translate
|
||||
const snackbarData = GLOBAL_CONFIG.Snackbar
|
||||
@@ -8,9 +9,9 @@
|
||||
let currentEncoding = defaultEncoding
|
||||
const targetEncodingCookie = 'translate-chn-cht'
|
||||
let targetEncoding =
|
||||
Cookies.get(targetEncodingCookie) === undefined
|
||||
saveToLocal.get(targetEncodingCookie) === undefined
|
||||
? defaultEncoding
|
||||
: Number(Cookies.get(targetEncodingCookie))
|
||||
: Number(saveToLocal.get('translate-chn-cht'))
|
||||
let translateButtonObject
|
||||
const isSnackbar = GLOBAL_CONFIG.Snackbar !== undefined
|
||||
|
||||
@@ -47,14 +48,14 @@
|
||||
currentEncoding = 1
|
||||
targetEncoding = 2
|
||||
translateButtonObject.innerHTML = msgToTraditionalChinese
|
||||
Cookies.set(targetEncodingCookie, targetEncoding, 2)
|
||||
saveToLocal.set(targetEncodingCookie, targetEncoding, 2)
|
||||
translateBody()
|
||||
if (isSnackbar) snackbarShow(snackbarData.cht_to_chs)
|
||||
} else if (targetEncoding === 2) {
|
||||
currentEncoding = 2
|
||||
targetEncoding = 1
|
||||
translateButtonObject.innerHTML = msgToSimplifiedChinese
|
||||
Cookies.set(targetEncodingCookie, targetEncoding, 2)
|
||||
saveToLocal.set(targetEncodingCookie, targetEncoding, 2)
|
||||
translateBody()
|
||||
if (isSnackbar) snackbarShow(snackbarData.chs_to_cht)
|
||||
}
|
||||
|
||||
+11
-22
@@ -14,7 +14,7 @@ function debounce (func, wait, immediate) {
|
||||
timeout = setTimeout(later, wait)
|
||||
if (callNow) func.apply(context, args)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function throttle (func, wait, options) {
|
||||
let timeout, context, args
|
||||
@@ -59,12 +59,18 @@ function sidebarPaddingR () {
|
||||
}
|
||||
}
|
||||
|
||||
function scrollToDest (name, offset = 0) {
|
||||
const scrollOffset = $(name).offset()
|
||||
function scrollToDest (name) {
|
||||
const scrollOffset = $(name).offset().top
|
||||
let offset
|
||||
if ($(window).scrollTop() > scrollOffset) {
|
||||
offset = 65
|
||||
} else {
|
||||
offset = 0
|
||||
}
|
||||
$('body,html').animate({
|
||||
scrollTop: scrollOffset.top - offset
|
||||
scrollTop: scrollOffset - offset
|
||||
})
|
||||
};
|
||||
}
|
||||
|
||||
function snackbarShow (text, showAction, duration) {
|
||||
const sa = (typeof showAction !== 'undefined') ? showAction : false
|
||||
@@ -80,23 +86,6 @@ function snackbarShow (text, showAction, duration) {
|
||||
})
|
||||
}
|
||||
|
||||
const Cookies = {
|
||||
get: function (name) {
|
||||
const value = `; ${document.cookie}`
|
||||
const parts = value.split(`; ${name}=`)
|
||||
if (parts.length === 2) return parts.pop().split(';').shift()
|
||||
},
|
||||
set: function (name, value, days) {
|
||||
let expires = ''
|
||||
if (days) {
|
||||
const date = new Date()
|
||||
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000))
|
||||
expires = '; expires=' + date.toUTCString()
|
||||
}
|
||||
document.cookie = name + '=' + (value || '') + expires + '; path=/'
|
||||
}
|
||||
}
|
||||
|
||||
const initJustifiedGallery = function (selector) {
|
||||
selector.each(function (i, o) {
|
||||
if ($(this).is(':visible')) {
|
||||
|
||||
Reference in New Issue
Block a user