mirror of
https://github.com/jerryc127/hexo-theme-butterfly.git
synced 2026-04-17 04:40:53 +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],
|
||||
|
||||
115
source/css/_page/archives.styl
Normal file
115
source/css/_page/archives.styl
Normal file
@@ -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
|
||||
60
source/css/_page/categories.styl
Normal file
60
source/css/_page/categories.styl
Normal file
@@ -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
|
||||
51
source/css/_page/common.styl
Normal file
51
source/css/_page/common.styl
Normal file
@@ -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
|
||||
143
source/css/_page/homepage.styl
Normal file
143
source/css/_page/homepage.styl
Normal file
@@ -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
|
||||
14
source/css/_page/tags.styl
Normal file
14
source/css/_page/tags.styl
Normal file
@@ -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/*'
|
||||
|
||||
@@ -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
|
||||
Reference in New Issue
Block a user