feat: 增加首頁評論數顯示

fix: 修復點擊toc後,滾動完toc的highlight在點擊的上一個元素
fix: 修復打賞按鈕Hover的bug close #473
improvement: 友情鏈接界面增加title顯示(top_img設為false時)
improvement: 優化toc顯示,當向上滾動時,導航欄不會遮擋 toc close #472
improvement: 升級facebook comment sdk版本
This commit is contained in:
Jerry
2021-01-25 19:39:53 +08:00
Unverified
parent d33dc5551c
commit 6962353af6
27 changed files with 400 additions and 237 deletions

View File

@@ -110,6 +110,7 @@
position: sticky
position: -webkit-sticky
top: 20px
transition: top .3s
.card-tag-cloud
a

View File

@@ -69,7 +69,7 @@
font-size: 30px
// page
&.not-index-bg
&.not-home-page
height: 20rem
+maxWidth768()
@@ -101,19 +101,6 @@
background-color: alpha($dark-black, .5)
content: ''
&.no-top-img
margin-bottom: .5rem
height: 60px
background: 0
#nav
background: rgba(255, 255, 255, .8)
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, .6)
a
color: var(--font-color)
text-shadow: none
#post-info
position: absolute
bottom: 5rem
@@ -129,6 +116,75 @@
bottom: 1.1rem
padding: 0 1.1rem
&.not-top-img
margin-bottom: .5rem
height: 60px
background: 0
#nav
background: rgba(255, 255, 255, .8)
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, .6)
a
color: var(--font-color)
text-shadow: none
&.nav-fixed
#nav
position: fixed
top: -60px
z-index: 91
background: rgba(255, 255, 255, .8)
box-shadow: 0 5px 6px -5px alpha($grey, .6)
transition: transform .2s ease-in-out, opacity .2s ease-in-out
a,
#site-name,
#toggle-menu
color: var(--font-color)
text-shadow: none
&:hover
color: $light-blue
&.nav-visible
#nav
transition: all .5s
transform: translate3d(0, 100%, 0)
& + .layout
& > .aside-content > .sticky_layout
top: 70px
transition: top .5s
// css hack
// all browser in ios and safari in all apple device
_::-webkit-full-page-media,
_:future,
:root #page-header.full_page
background-attachment: scroll !important
#page
h1.page-title
margin: .4rem 0 1rem
// for not top_img
#post
& > #post-info
margin-bottom: 1.5rem
.post-title
padding-bottom: .2rem
border-bottom: 1px solid var(--light-grey)
color: var(--text-highlight-color)
.post-edit-link
float: right
#post-meta,
#post-meta a
color: #78818a
#post-info
.post-title
@extend .limit-more-line
@@ -186,30 +242,6 @@
time
display: none
// for not top_img
#post
& > #post-info
margin-bottom: 1.5rem
.post-title
padding-bottom: .2rem
border-bottom: 1px solid var(--light-grey)
color: var(--text-highlight-color)
.post-edit-link
float: right
#post-meta,
#post-meta a
color: #78818a
// css hack
// all browser in ios and safari in all apple device
_::-webkit-full-page-media,
_:future,
:root #page-header.full_page
background-attachment: scroll !important
#nav
position: absolute
top: 0
@@ -227,10 +259,6 @@ _:future,
+maxWidth768()
padding: 0 16px
&:not(.fixed)
#menus
padding-right: 0 !important
&.show
opacity: 1
@@ -251,27 +279,6 @@ _:future,
&:hover
color: var(--white)
&.fixed
position: fixed
top: -60px
z-index: 91
background: rgba(255, 255, 255, .8)
box-shadow: 0 5px 6px -5px alpha($grey, .6)
transition: transform .2s ease-in-out, opacity .2s ease-in-out
a,
#site-name,
#toggle-menu
color: var(--font-color)
text-shadow: none
&:hover
color: $light-blue
&.visible
transition: all .5s
transform: translate3d(0, 100%, 0)
#site-name
text-shadow: .1rem .1rem .2rem rgba($dark-black, .15)
font-weight: bold
@@ -369,4 +376,3 @@ _:future,
padding-bottom: .3rem
text-shadow: .05rem .05rem .1rem rgba($dark-black, .3)
font-size: .78em
cursor: pointer

View File

@@ -12,60 +12,58 @@
cursor: pointer
transition: all .4s
&:hover
box-shadow: inset 9em 0 0 0 var(--btn-hover-color)
&:hover
& > .reward-main
display: block
.reward-main
display: block
.reward-main
position: absolute
bottom: 40px
left: 0
z-index: 100
display: none
padding: 0 0 15px
width: 100%
.reward-main
position: absolute
bottom: 40px
left: 0
z-index: 100
display: none
padding: 0 0 15px
width: 100%
.reward-all
display: inline-block
margin: 0
padding: 1rem .5rem
border-radius: 4px
background: var(--reward-pop)
.reward-all
&:before
position: absolute
bottom: -10px
left: 0
width: 100%
height: 20px
content: ''
&:after
position: absolute
right: 0
bottom: 2px
left: 0
margin: 0 auto
width: 0
height: 0
border-top: 13px solid var(--reward-pop)
border-right: 13px solid transparent
border-left: 13px solid transparent
content: ''
.reward-item
display: inline-block
margin: 0
padding: 1rem .5rem
border-radius: 4px
background: var(--reward-pop)
padding: 0 8px
list-style-type: none
vertical-align: top
&:before
position: absolute
bottom: -10px
left: 0
width: 100%
height: 20px
content: ''
img
width: 130px
height: 130px
&:after
position: absolute
right: 0
bottom: 2px
left: 0
margin: 0 auto
width: 0
height: 0
border-top: 13px solid var(--reward-pop)
border-right: 13px solid transparent
border-left: 13px solid transparent
content: ''
.reward-item
display: inline-block
padding: 0 8px
list-style-type: none
vertical-align: top
img
width: 130px
height: 130px
.post-qr-code-desc
padding-top: .4rem
width: 130px
color: $reward-pop-up-color
.post-qr-code-desc
padding-top: .4rem
width: 130px
color: $reward-pop-up-color