mirror of
https://github.com/jerryc127/hexo-theme-butterfly.git
synced 2026-04-16 20:30:53 +08:00
1. 更改手機頁面的menu和toc的顯示方式和顯示特效（ipad也能看TOC)
1. 更改手機頁面的menu和toc的顯示方式和顯示特效（ipad也能看TOC) 3. 可設置複製時，内容自動加上版權信息 4. 可修改tag的top_img 5. 可修改category的top_img 6. 可修改valine的背景 7. archives頁UI優化 8. ICP增加icon #37 9. 可設置主頁top_img的高度 10. 可設置主頁site-info的位置 11. category頁和tag頁的UI可以設置與主頁UI一樣 #31 12. 主頁subtitle可設置多個句子（不再限制2個） #37 13. 設置menu時，頭尾添加空格不受影響 14. 調整post頁的佈局 15. 书签添加icon 16. 公告icon效果 17. 首頁歸檔模塊，可設置數量限制，會顯示'查看更多'按鈕 18. 右下角按鈕調整。 19. 修复文章cover隨機图片生成，同一篇文章，不同地方的cover顯示不一样的bug 20. 修復gitalk語言設置無效的bug #35 21. 修復post頁面，當沒有設置word count時，閲讀量前有'|" 22. 修复sub-menu在safari的显示问题 23. 修复tags页评论居中问题 24. 修复header a hover 白色问题 25. 修復夜間模式下footer的顔色bug 26. 修復英文語言下，書簽英文顯示不完整的問題
This commit is contained in:
Jerry
@@ -13,6 +13,12 @@ body
|
||||
font-family: $font-family
|
||||
line-height: $text-line-height
|
||||
|
||||
if !hexo-config('copy.enable')
|
||||
user-select: none
|
||||
-moz-user-select: none
|
||||
-webkit-user-select: none
|
||||
-ms-user-select: none
|
||||
|
||||
*::-webkit-scrollbar
|
||||
width: 8px
|
||||
height: 8px
|
||||
@@ -71,19 +77,6 @@ h6
|
||||
transition: all 0.2s
|
||||
opacity: 0
|
||||
|
||||
#go-up
|
||||
position: fixed
|
||||
right: $go-up-right
|
||||
bottom: $go-up-bottom
|
||||
font-size: $sidebar-icon-size
|
||||
opacity: 0
|
||||
cursor: pointer
|
||||
transition: all .2s
|
||||
|
||||
.fancybox-caption
|
||||
text-align: center
|
||||
|
||||
|
||||
hr
|
||||
position: relative
|
||||
margin: 2rem auto
|
||||
@@ -141,85 +134,6 @@ table
|
||||
background: $selection
|
||||
color: $pale-grey
|
||||
|
||||
.text-center
|
||||
text-align: center
|
||||
.pull-left
|
||||
float: left
|
||||
|
||||
.pull-right
|
||||
float: right
|
||||
|
||||
@media screen and (max-width: $bg)
|
||||
i#toggle-sidebar,
|
||||
#sidebar
|
||||
display: none
|
||||
|
||||
body
|
||||
padding-left: 0 !important
|
||||
|
||||
|
||||
|
||||
// valine
|
||||
#vcomment
|
||||
font-size: inherit
|
||||
|
||||
input
|
||||
font-size: 0.65rem
|
||||
|
||||
button
|
||||
font-size: .7rem
|
||||
padding: .3rem 1rem
|
||||
background-color: $light-blue
|
||||
color: #fff
|
||||
border-color: #fff
|
||||
|
||||
&:hover
|
||||
background-color: darken($light-blue, 40)
|
||||
|
||||
|
||||
textarea
|
||||
font-size: 0.7rem
|
||||
background: url(/img/comment_bg.png) 100% 100% no-repeat
|
||||
|
||||
.info
|
||||
display: none
|
||||
|
||||
.vimg
|
||||
border: 0
|
||||
|
||||
&:hover
|
||||
-moz-transform: rotate(540deg)
|
||||
-o-transform: rotate(540deg)
|
||||
-webkit-transform: rotate(540deg)
|
||||
transform: rotate(540deg)
|
||||
.vcount
|
||||
font-size: 0.775rem
|
||||
|
||||
.vnum
|
||||
font-size: 1.1rem
|
||||
|
||||
.vsys
|
||||
font-size: 80%
|
||||
|
||||
.vtime
|
||||
font-size: .65rem
|
||||
|
||||
.vcontent
|
||||
font-size: 100%
|
||||
|
||||
.vat
|
||||
font-size: .7125rem
|
||||
color: $cyan
|
||||
border: 1px solid $cyan
|
||||
padding: 0 .8rem
|
||||
border-radius: 5px
|
||||
|
||||
&:hover
|
||||
background-color: alpha($cyan,0.5)
|
||||
|
||||
code, pre
|
||||
font-size: 98%
|
||||
font-family: $code-font
|
||||
|
||||
.full_page #site-title,
|
||||
.full_page #site-sub-title,
|
||||
@@ -228,141 +142,15 @@ table
|
||||
#aside_content .author-info__description
|
||||
font-family: $site-name-font
|
||||
|
||||
|
||||
|
||||
#rightside
|
||||
right: -38px
|
||||
position: fixed
|
||||
bottom: 60px
|
||||
opacity: 0
|
||||
transition: all .2s
|
||||
|
||||
|
||||
#readmode,#font_plus,#font_minus,#to_comment
|
||||
width: 30px
|
||||
height: 30px
|
||||
background-color: $light-blue
|
||||
color: #e3e8ee
|
||||
text-align: center
|
||||
line-height: 29px
|
||||
font-size: 16px
|
||||
display: block
|
||||
margin-bottom: 2px
|
||||
cursor: pointer
|
||||
text-decoration: none
|
||||
|
||||
#to_comment
|
||||
display: none
|
||||
|
||||
#font_minus,#font_plus
|
||||
display: none
|
||||
|
||||
.translate_chn_to_cht
|
||||
width: 30px
|
||||
height: 30px
|
||||
background-color: $light-blue
|
||||
color: #e3e8ee
|
||||
text-align: center
|
||||
line-height: 29px
|
||||
font-size: 16px
|
||||
display: block
|
||||
margin-bottom: 2px
|
||||
cursor: pointer
|
||||
text-decoration: none
|
||||
|
||||
.nightshift
|
||||
width: 30px
|
||||
height: 30px
|
||||
background-color: $light-blue
|
||||
color: #e3e8ee
|
||||
text-align: center
|
||||
font-size: 17px
|
||||
display: block
|
||||
margin-bottom: 2px
|
||||
cursor: pointer
|
||||
padding-top: 6px
|
||||
|
||||
|
||||
a
|
||||
&:hover
|
||||
color: white
|
||||
&:after
|
||||
color: white
|
||||
|
||||
|
||||
|
||||
.comment_headling
|
||||
font-size: 20px
|
||||
font-weight: 700
|
||||
margin-bottom: 10px
|
||||
|
||||
|
||||
// bookmark 樣式
|
||||
.fc-container .fancybox-bg
|
||||
background: #eee
|
||||
|
||||
|
||||
.fancybox-is-open.fc-container .fancybox-bg
|
||||
opacity: 0.95
|
||||
|
||||
|
||||
.fc-content
|
||||
margin: 20px
|
||||
max-width: 550px
|
||||
padding: 50px
|
||||
box-shadow: 10px 10px 60px -25px
|
||||
border-radius: 4px
|
||||
|
||||
|
||||
.fc-content h3
|
||||
margin-top: 0
|
||||
font-size: 1.6em
|
||||
letter-spacing: normal
|
||||
|
||||
|
||||
.fc-content p
|
||||
color: #666
|
||||
line-height: 1.5
|
||||
|
||||
|
||||
.fc-content p:last-child
|
||||
margin-bottom: 0
|
||||
|
||||
|
||||
/* Custom animation */
|
||||
.fancybox-fx-material.fancybox-slide--previous,
|
||||
.fancybox-fx-material.fancybox-slide--next
|
||||
transform: translateY(-60px) scale(1.1)
|
||||
opacity: 0
|
||||
|
||||
|
||||
.fancybox-fx-material.fancybox-slide--current
|
||||
opacity: 1
|
||||
transform: translateY(0) scale(1)
|
||||
|
||||
|
||||
.bookmark-ok
|
||||
background: #FF6666
|
||||
border-width: 0
|
||||
color: #fff
|
||||
text-decoration: none
|
||||
padding: 7px 20px
|
||||
line-height: 1.5
|
||||
border-radius: 20px
|
||||
text-transform: uppercase
|
||||
font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif
|
||||
font-size: 80%
|
||||
font-weight: 700
|
||||
margin: 5px 5px 5px 0
|
||||
display: inline-block
|
||||
cursor: pointer
|
||||
outline: none
|
||||
transition: all .2s ease-in-out
|
||||
user-select: none
|
||||
|
||||
.tright
|
||||
.is_right
|
||||
text-align: right
|
||||
|
||||
.is_left
|
||||
text-align: left
|
||||
|
||||
.is_center
|
||||
text-align: center
|
||||
|
||||
.is_visible
|
||||
display: block !important
|
||||
|
||||
@@ -372,12 +160,28 @@ table
|
||||
.is_hidden
|
||||
overflow: hidden
|
||||
|
||||
.pull-left
|
||||
float: left
|
||||
|
||||
.pull-right
|
||||
float: right
|
||||
|
||||
.fireworks
|
||||
position: fixed
|
||||
z-index: -1
|
||||
pointer-events: none
|
||||
|
||||
|
||||
// 去掉加載黑框
|
||||
img[src=""],img:not([src])
|
||||
opacity: 0
|
||||
|
||||
#body-wrap
|
||||
transition: all .3s
|
||||
|
||||
@media screen and (max-width: $bg)
|
||||
i#toggle-sidebar,
|
||||
#sidebar
|
||||
display: none
|
||||
|
||||
body
|
||||
padding-left: 0 !important
|
||||
@@ -5,17 +5,12 @@
|
||||
-webkit-box-shadow: 0 4px 8px 6px rgba(7,17,27,.06)
|
||||
box-shadow: 0 4px 8px 6px rgba(7,17,27,.06)
|
||||
border-radius: 8px
|
||||
-webkit-transition: all .3s
|
||||
-moz-transition: all .3s
|
||||
-o-transition: all .3s
|
||||
-ms-transition: all .3s
|
||||
transition: all .3s
|
||||
background: #fff
|
||||
margin-top: 20px
|
||||
overflow: hidden
|
||||
|
||||
&:hover
|
||||
-webkit-box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
|
||||
box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
|
||||
|
||||
.card-author
|
||||
@@ -28,10 +23,8 @@
|
||||
transition: all .3s
|
||||
|
||||
&:hover
|
||||
-moz-transform: rotate(540deg)
|
||||
-o-transform: rotate(540deg)
|
||||
-webkit-transform: rotate(540deg)
|
||||
transform: rotate(540deg)
|
||||
|
||||
.author-info
|
||||
&__name
|
||||
font-size: 1.1rem
|
||||
@@ -54,10 +47,9 @@
|
||||
.headline
|
||||
display: block
|
||||
font-size: 0.7rem
|
||||
// letter-spacing: 1px
|
||||
margin-bottom: -21px
|
||||
text-transform: uppercase
|
||||
color:#4c4948
|
||||
color:$font-black
|
||||
|
||||
#aside-social-icons
|
||||
margin: 0.5rem auto -0.7rem
|
||||
@@ -66,8 +58,7 @@
|
||||
|
||||
.social-icon
|
||||
margin: 0 0.5rem
|
||||
color: #4c4948
|
||||
/* text-shadow: 0.1rem 0.1rem 0.2rem rgba(0,0,0,0.15) */
|
||||
color: $font-black
|
||||
font-size: 1rem
|
||||
cursor: pointer
|
||||
|
||||
@@ -75,16 +66,10 @@
|
||||
transition: all 0.3s
|
||||
|
||||
&:hover
|
||||
-moz-transform: rotate(540deg)
|
||||
-o-transform: rotate(540deg)
|
||||
-webkit-transform: rotate(540deg)
|
||||
transform: rotate(540deg)
|
||||
|
||||
|
||||
a#bookmark-it
|
||||
display: inline-block
|
||||
#bookmark-it
|
||||
margin-top: .2rem
|
||||
padding: 0 1rem
|
||||
height: 1.6rem
|
||||
background: $light-blue
|
||||
color: #fff
|
||||
@@ -94,6 +79,9 @@
|
||||
text-transform: uppercase
|
||||
z-index: 1
|
||||
|
||||
span
|
||||
padding-left: 10px
|
||||
|
||||
.toggle_change--primary,.bookmark--primary
|
||||
color: $ruby
|
||||
|
||||
@@ -101,7 +89,7 @@
|
||||
transition-property: color
|
||||
transition-duration: 1s
|
||||
|
||||
&:before {
|
||||
&:before
|
||||
content: ""
|
||||
position: absolute
|
||||
top: 0
|
||||
@@ -115,18 +103,13 @@
|
||||
transition-duration: 0.5s
|
||||
transition-timing-function: ease-out
|
||||
z-index: -1
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
&:hover
|
||||
color: white
|
||||
|
||||
&:before {
|
||||
&:before
|
||||
transform: scaleX(1)
|
||||
transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.card-content
|
||||
padding: 1rem 1.2rem
|
||||
@@ -140,7 +123,6 @@
|
||||
flex-basis: auto
|
||||
justify-content: center
|
||||
|
||||
|
||||
.item_headline
|
||||
font-size: 0.8rem
|
||||
|
||||
@@ -170,39 +152,41 @@
|
||||
&::after
|
||||
width: 100%
|
||||
|
||||
|
||||
|
||||
.aside_recent_item
|
||||
margin: 10px 0 -15px 0
|
||||
|
||||
.aside_recent_post
|
||||
a
|
||||
text-decoration: none
|
||||
color: #4c4948
|
||||
color: $font-black
|
||||
|
||||
.aside_recent_post
|
||||
margin-bottom: 10px
|
||||
width: 100%
|
||||
|
||||
.aside_post_cover
|
||||
height: 70px
|
||||
width: 70px
|
||||
height: 66px
|
||||
width: 66px
|
||||
float: left
|
||||
overflow: hidden
|
||||
|
||||
.aside_post_bg
|
||||
object-fit: cover
|
||||
width: 100%
|
||||
height: 100%
|
||||
max-width: 100%
|
||||
padding: 0
|
||||
transition: all .6s
|
||||
|
||||
&:hover
|
||||
box-shadow: none
|
||||
transform: scale(1.1)
|
||||
|
||||
#aside_title
|
||||
padding-top: 4px
|
||||
|
||||
#aside_title
|
||||
.aside_post_meta
|
||||
font-size: 0.6rem
|
||||
padding-left: 5px
|
||||
padding-left: 10px
|
||||
color: #99a9bf
|
||||
|
||||
.aside_post_title
|
||||
line-height: 1rem
|
||||
@@ -210,14 +194,12 @@
|
||||
-webkit-line-clamp: 2
|
||||
-webkit-box-orient: vertical
|
||||
overflow: hidden
|
||||
height: 41px
|
||||
padding-left: 5px
|
||||
height: 40px
|
||||
padding-left: 10px
|
||||
|
||||
&:hover
|
||||
color: $light-blue !important
|
||||
|
||||
|
||||
|
||||
.aside_category_item,.archive-list
|
||||
list-style: none
|
||||
margin-bottom: -3px
|
||||
@@ -232,14 +214,14 @@
|
||||
|
||||
.aside_category_list,.archive-list-item
|
||||
margin-left: -40px
|
||||
padding: 0.2rem 1rem
|
||||
|
||||
&:hover
|
||||
background-color: $light-blue
|
||||
color: #363636
|
||||
a
|
||||
text-decoration: none
|
||||
color: #4c4948
|
||||
color: $font-black
|
||||
padding: 0.2rem 1rem
|
||||
|
||||
.aside_category_list_name,.archive-list-link
|
||||
white-space: nowrap
|
||||
@@ -250,9 +232,6 @@
|
||||
.aside_category_list_link,.archive-list-item
|
||||
display: flex
|
||||
|
||||
|
||||
|
||||
|
||||
.aside_category_list_length,.archive-list-count
|
||||
float: right
|
||||
|
||||
@@ -280,16 +259,60 @@
|
||||
float: right
|
||||
display: inline-block
|
||||
|
||||
// bookmark 樣式
|
||||
.fc-container .fancybox-bg
|
||||
background: #eee
|
||||
|
||||
@keyframes announ_animation{
|
||||
0%,to{
|
||||
color: #4c4948
|
||||
}
|
||||
50%{
|
||||
color: #FF0000
|
||||
}
|
||||
}
|
||||
.fancybox-is-open.fc-container .fancybox-bg
|
||||
opacity: 0.95
|
||||
|
||||
.fc-content
|
||||
margin: 20px
|
||||
max-width: 550px
|
||||
padding: 50px
|
||||
box-shadow: 10px 10px 60px -25px
|
||||
border-radius: 4px
|
||||
|
||||
.fc-content h3
|
||||
margin-top: 0
|
||||
font-size: 1.6em
|
||||
letter-spacing: normal
|
||||
|
||||
.fc-content p
|
||||
color: #666
|
||||
line-height: 1.5
|
||||
|
||||
.fc-content p:last-child
|
||||
margin-bottom: 0
|
||||
|
||||
/* Custom animation */
|
||||
.fancybox-fx-material.fancybox-slide--previous,
|
||||
.fancybox-fx-material.fancybox-slide--next
|
||||
transform: translateY(-60px) scale(1.1)
|
||||
opacity: 0
|
||||
|
||||
.fancybox-fx-material.fancybox-slide--current
|
||||
opacity: 1
|
||||
transform: translateY(0) scale(1)
|
||||
|
||||
.bookmark-ok
|
||||
background: #FF6666
|
||||
border-width: 0
|
||||
color: #fff
|
||||
text-decoration: none
|
||||
padding: 7px 20px
|
||||
line-height: 1.5
|
||||
border-radius: 20px
|
||||
text-transform: uppercase
|
||||
font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif
|
||||
font-size: 80%
|
||||
font-weight: 700
|
||||
margin: 5px 5px 5px 0
|
||||
display: inline-block
|
||||
cursor: pointer
|
||||
outline: none
|
||||
transition: all .2s ease-in-out
|
||||
user-select: none
|
||||
|
||||
@media screen and (max-width: 900px)
|
||||
.layout_page
|
||||
|
||||
@@ -16,7 +16,6 @@
|
||||
li
|
||||
position: relative
|
||||
margin: 0.3rem 0
|
||||
// padding-left: 0.3rem
|
||||
padding: 0.1rem 0.5rem 0.1rem 1.5rem !important
|
||||
|
||||
&:hover
|
||||
|
||||
@@ -1,2 +1,65 @@
|
||||
#disqus_thread
|
||||
margin-top: 1rem
|
||||
margin-top: 1rem
|
||||
|
||||
.comment_headling
|
||||
font-size: 20px
|
||||
font-weight: 700
|
||||
margin-bottom: 10px
|
||||
|
||||
// valine
|
||||
#vcomment
|
||||
font-size: inherit
|
||||
|
||||
input
|
||||
font-size: 0.65rem
|
||||
|
||||
button
|
||||
font-size: .7rem
|
||||
padding: .3rem 1rem
|
||||
background-color: $light-blue
|
||||
color: #fff
|
||||
border-color: #fff
|
||||
|
||||
&:hover
|
||||
background-color: darken($light-blue, 40)
|
||||
|
||||
textarea
|
||||
font-size: 0.7rem
|
||||
if hexo-config("valine.bg")
|
||||
background: url(convert(hexo-config("valine.bg"))) 100% 100% no-repeat
|
||||
|
||||
.info
|
||||
display: none
|
||||
|
||||
.vimg
|
||||
border: 0
|
||||
|
||||
&:hover
|
||||
transform: rotate(540deg)
|
||||
.vcount
|
||||
font-size: 0.775rem
|
||||
|
||||
.vnum
|
||||
font-size: 1.1rem
|
||||
|
||||
.vsys
|
||||
font-size: 80%
|
||||
|
||||
.vtime
|
||||
font-size: .65rem
|
||||
|
||||
.vcontent
|
||||
font-size: 100%
|
||||
|
||||
.vat
|
||||
font-size: .7125rem
|
||||
color: $cyan
|
||||
border: 1px solid $cyan
|
||||
padding: 0 .8rem
|
||||
border-radius: 5px
|
||||
|
||||
&:hover
|
||||
background-color: alpha($cyan,0.5)
|
||||
|
||||
code, pre
|
||||
font-size: 98%
|
||||
|
||||
@@ -24,13 +24,10 @@
|
||||
text-overflow: ellipsis
|
||||
overflow: hidden
|
||||
border-radius: 8px
|
||||
-webkit-transform: perspective(1px) translateZ(0)
|
||||
transform: perspective(1px) translateZ(0)
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
|
||||
position: relative
|
||||
-webkit-transition-property: color
|
||||
transition-property: color
|
||||
-webkit-transition-duration: 0.3s
|
||||
transition-duration: 0.3s
|
||||
|
||||
img
|
||||
@@ -44,9 +41,6 @@
|
||||
&:hover
|
||||
img
|
||||
filter: unqoute("progid:DXImageTransform.Microsoft.BasicImage(rotation=3)")
|
||||
-moz-transform: rotate(540deg)
|
||||
-o-transform: rotate(540deg)
|
||||
-webkit-transform: rotate(540deg)
|
||||
transform: rotate(540deg)
|
||||
|
||||
&:before
|
||||
@@ -58,13 +52,9 @@
|
||||
right: 0
|
||||
bottom: 0
|
||||
background: $light-blue !important
|
||||
-webkit-transform: scale(0)
|
||||
transform: scale(0)
|
||||
-webkit-transition-property: transform
|
||||
transition-property: transform
|
||||
-webkit-transition-duration: 0.3s
|
||||
transition-duration: 0.3s
|
||||
-webkit-transition-timing-function: ease-out
|
||||
transition-timing-function: ease-out
|
||||
|
||||
.md-links-item:hover,
|
||||
@@ -94,7 +84,7 @@
|
||||
.post-cards
|
||||
margin-top: 5px
|
||||
min-height: 100px
|
||||
padding: 15px
|
||||
padding: 0 15px
|
||||
border-radius: 15px
|
||||
|
||||
.comment-word
|
||||
@@ -121,8 +111,6 @@
|
||||
li
|
||||
width: calc(100%/2 - 14px)
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width:600px)
|
||||
.flink
|
||||
.md-links
|
||||
|
||||
@@ -37,3 +37,7 @@ footer
|
||||
.footer-separator
|
||||
margin: 0 0.2rem
|
||||
|
||||
.icp-icon
|
||||
padding: 0 4px
|
||||
vertical-align: text-bottom
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
margin-bottom: 1rem
|
||||
|
||||
&.full_page
|
||||
height: 100vh
|
||||
height: $index_top_img_height
|
||||
|
||||
.nav_bg
|
||||
width: 100%
|
||||
@@ -16,7 +16,6 @@
|
||||
&.not_index_bg
|
||||
height: 20rem
|
||||
|
||||
|
||||
#site-social-icons
|
||||
margin: 0 auto
|
||||
width: 15rem
|
||||
@@ -36,7 +35,7 @@
|
||||
#site-info
|
||||
position: absolute
|
||||
width: 100%
|
||||
top: 43%
|
||||
top: $index_site_info_top
|
||||
|
||||
#site-title,
|
||||
#site-sub-title
|
||||
@@ -68,8 +67,10 @@
|
||||
|
||||
.scroll-down-effects
|
||||
position: absolute
|
||||
color: #fff
|
||||
color: $white
|
||||
|
||||
#header
|
||||
position: relative
|
||||
|
||||
#page-header
|
||||
position: absolute
|
||||
@@ -79,110 +80,17 @@
|
||||
width: 100%
|
||||
border: none
|
||||
font-size: 18px
|
||||
transition: all 0.2s ease-in-out
|
||||
transition: all .3s
|
||||
|
||||
.toggle-menu
|
||||
display: none
|
||||
padding-top: 0.6rem
|
||||
color: $light-grey
|
||||
cursor: pointer
|
||||
transition: all 0.2s ease-in-out
|
||||
|
||||
&:hover
|
||||
color: $white
|
||||
|
||||
.menu-icon-first,
|
||||
.menu-icon-second,
|
||||
.menu-icon-third
|
||||
width: 18px
|
||||
height: 3px
|
||||
background-color: #eee
|
||||
margin: 2px 0
|
||||
transition: 0.4s
|
||||
|
||||
&.close
|
||||
/* 旋转第一条横线 */
|
||||
.menu-icon-first
|
||||
-webkit-transform: rotate(45deg) translate(4px, 3px)
|
||||
transform: rotate(45deg) translate(4px, 3px)
|
||||
|
||||
/* 隐藏第二条横线 */
|
||||
.menu-icon-second
|
||||
opacity: 0
|
||||
|
||||
/* 旋转第三条横线 */
|
||||
.menu-icon-third
|
||||
-webkit-transform: rotate(-45deg) translate(4px, -4px)
|
||||
transform: rotate(-45deg) translate(4px, -4px)
|
||||
|
||||
.menu_mask
|
||||
position: fixed
|
||||
top: 0
|
||||
bottom: 0
|
||||
width: 100%
|
||||
height: 110vh
|
||||
left: 0
|
||||
right: 0
|
||||
background: alpha($black,0.7)
|
||||
display: none
|
||||
|
||||
.menus
|
||||
.mobile_author_icon
|
||||
display: none
|
||||
padding: 1.3rem 1.5rem 0
|
||||
text-align: center
|
||||
|
||||
|
||||
img
|
||||
height: 120px
|
||||
width: 120px
|
||||
display: inline-block
|
||||
vertical-align: top
|
||||
border-radius: 70px
|
||||
transition: all .3s
|
||||
|
||||
.mobile_post_data
|
||||
display: flex
|
||||
justify-content: center
|
||||
padding: .6rem .5rem 0
|
||||
display: none
|
||||
|
||||
.mobile_data_item
|
||||
flex: 1
|
||||
|
||||
.mobile_data_link
|
||||
a
|
||||
text-decoration: none
|
||||
|
||||
.length_num
|
||||
font-size: .9rem
|
||||
color: #000
|
||||
|
||||
.headline
|
||||
display: block
|
||||
font-size: 0.7rem
|
||||
// letter-spacing: .5px
|
||||
text-transform: uppercase
|
||||
color:#4c4948
|
||||
|
||||
.menus-expand
|
||||
position: absolute
|
||||
width: 30px !important
|
||||
height: 30px
|
||||
right: 0
|
||||
padding: 6px
|
||||
display: none
|
||||
transform: rotate(0deg)
|
||||
transition: all .3s
|
||||
|
||||
&.menus-closed
|
||||
transform: rotate(180deg) !important
|
||||
transition: all .3s
|
||||
|
||||
hr
|
||||
margin: 1rem auto
|
||||
display: none
|
||||
|
||||
a
|
||||
color: $light-grey
|
||||
text-decoration: none
|
||||
@@ -190,27 +98,6 @@
|
||||
&:hover
|
||||
color: $white
|
||||
|
||||
.site-page
|
||||
position: relative
|
||||
padding-bottom: 0.3rem
|
||||
text-shadow: 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.3)
|
||||
font-size: 0.7rem
|
||||
cursor: pointer
|
||||
&::after
|
||||
position: absolute
|
||||
bottom: 0
|
||||
left: 0
|
||||
z-index: -1
|
||||
width: 0
|
||||
height: 3px
|
||||
background-color: lighten($theme-color, 30%)
|
||||
content: ""
|
||||
transition: all 0.3s ease-in-out
|
||||
|
||||
&:hover
|
||||
&::after
|
||||
width: 100%
|
||||
|
||||
&.fixed
|
||||
position: fixed
|
||||
top: -60px
|
||||
@@ -225,50 +112,49 @@
|
||||
opacity: 0
|
||||
|
||||
a,
|
||||
#site-name
|
||||
#site-name,
|
||||
.toggle-menu
|
||||
color: $light-black
|
||||
text-shadow: none
|
||||
|
||||
.menu-icon-first,
|
||||
.menu-icon-second,
|
||||
.menu-icon-third
|
||||
background-color: $light-black
|
||||
text-shadow: none
|
||||
|
||||
|
||||
&a,#site-name
|
||||
&:hover
|
||||
color: $light-blue
|
||||
&:hover
|
||||
color: $light-blue
|
||||
|
||||
&.visible
|
||||
transform: translate3d(0, 100%, 0)
|
||||
transition: all .3s
|
||||
|
||||
.menus_item_child
|
||||
background-color: $white !important
|
||||
|
||||
&:before
|
||||
border-color: transparent transparent $white !important
|
||||
|
||||
#site-name
|
||||
text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
|
||||
font-weight: bold
|
||||
cursor: pointer
|
||||
|
||||
@media screen and (min-width: $sm)
|
||||
#site-title
|
||||
font-size: 2rem
|
||||
.menus_item
|
||||
display: inline-block
|
||||
padding: 0 0 0 0.7rem
|
||||
|
||||
#site-sub-title
|
||||
font-size: 1.2rem
|
||||
|
||||
#page-header
|
||||
.menus_item
|
||||
display: inline-block
|
||||
padding: 0 0.5rem
|
||||
|
||||
&:hover,&:focus
|
||||
.menus_item_child
|
||||
display: block
|
||||
&:hover,&:focus
|
||||
.menus_item_child
|
||||
display: block
|
||||
|
||||
.menus-expand
|
||||
transform: rotate(180deg) !important
|
||||
|
||||
.menus-expand
|
||||
padding: 4px
|
||||
transform: rotate(0deg)
|
||||
transition: all .3s
|
||||
|
||||
.menus_item_child
|
||||
position: absolute
|
||||
background-color: alpha($white, 0.8)
|
||||
padding: 8px 10px
|
||||
width: fit-content
|
||||
border-radius: 5px
|
||||
box-shadow: 0 5px 20px -4px rgba(0,0,0,.5)
|
||||
display: none
|
||||
@@ -285,95 +171,63 @@
|
||||
border-style: solid
|
||||
border-color: transparent transparent alpha($white, 0.8)
|
||||
|
||||
.menus_item_child li
|
||||
list-style: none
|
||||
text-align: center
|
||||
li
|
||||
list-style: none
|
||||
text-align: center
|
||||
|
||||
a
|
||||
color: #3b3a3a;
|
||||
text-shadow: none;
|
||||
a
|
||||
color: #3b3a3a
|
||||
text-shadow: none
|
||||
|
||||
&.fixed.visible
|
||||
.menus_item_child
|
||||
background-color: #ffffff
|
||||
.site-page
|
||||
position: relative
|
||||
padding-bottom: 0.3rem
|
||||
text-shadow: 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.3)
|
||||
font-size: 0.7rem
|
||||
cursor: pointer
|
||||
|
||||
&::after
|
||||
position: absolute
|
||||
bottom: 0
|
||||
left: 0
|
||||
z-index: -1
|
||||
width: 0
|
||||
height: 3px
|
||||
background-color: lighten($theme-color, 30%)
|
||||
content: ""
|
||||
transition: all 0.3s ease-in-out
|
||||
|
||||
&:hover
|
||||
&::after
|
||||
width: 100%
|
||||
|
||||
|
||||
@media screen and (min-width: $sm)
|
||||
#site-title
|
||||
font-size: 2rem
|
||||
|
||||
#site-sub-title
|
||||
font-size: 1.2rem
|
||||
|
||||
&:before
|
||||
border-color: transparent transparent #ffffff
|
||||
|
||||
@media screen and (max-width: $sm)
|
||||
#page-header
|
||||
padding: 10px 0.8rem
|
||||
|
||||
.menus
|
||||
display: none
|
||||
|
||||
.toggle-menu
|
||||
display: block
|
||||
|
||||
.menus
|
||||
position: fixed
|
||||
top: 0
|
||||
right: -250px
|
||||
width: 250px
|
||||
height 101vh
|
||||
background: $white
|
||||
cursor: pointer
|
||||
box-shadow: 0 0 4px rgba(0, 0, 0, 0.27)
|
||||
z-index: 1
|
||||
overflow-y: scroll
|
||||
display: none
|
||||
|
||||
.mobile_post_data
|
||||
display: flex
|
||||
|
||||
.menus_items
|
||||
a
|
||||
display: block !important
|
||||
opacity: 1 !important
|
||||
margin: 0
|
||||
padding: .3rem 1.5rem
|
||||
color: $font-black
|
||||
text-shadow: none
|
||||
font-size: 0.8rem
|
||||
z-index: 0
|
||||
text-overflow: ellipsis
|
||||
overflow: hidden
|
||||
white-space: nowrap
|
||||
|
||||
i
|
||||
width: 30%
|
||||
text-align: left
|
||||
|
||||
span
|
||||
width 70%
|
||||
|
||||
&:hover
|
||||
color: $light-blue
|
||||
|
||||
.menus-expand
|
||||
display: inline-block
|
||||
|
||||
.menus_item_child
|
||||
list-style: none
|
||||
margin: 0
|
||||
|
||||
.mobile_author_icon
|
||||
display: block
|
||||
|
||||
.menus_items
|
||||
padding: 0 .5rem
|
||||
margin-bottom: 5rem
|
||||
|
||||
hr
|
||||
display: block
|
||||
|
||||
.search
|
||||
right: 0.5rem
|
||||
|
||||
span
|
||||
display none
|
||||
|
||||
&.fixed.open-sidebar
|
||||
.search
|
||||
display: inline-block
|
||||
opacity: 1
|
||||
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: $bg)
|
||||
#page-header
|
||||
&.fixed
|
||||
&.open-sidebar
|
||||
.site-page
|
||||
display: inline-block
|
||||
opacity: 1
|
||||
163
source/css/_layout/mobile-sidebar.styl
Normal file
163
source/css/_layout/mobile-sidebar.styl
Normal file
@@ -0,0 +1,163 @@
|
||||
#mobile-sidebar
|
||||
#menu_mask
|
||||
position: fixed
|
||||
top: 0
|
||||
bottom: 0
|
||||
width: 100%
|
||||
height: 110vh
|
||||
left: 0
|
||||
right: 0
|
||||
background: alpha($black,0.7)
|
||||
z-index: 102
|
||||
display: none
|
||||
|
||||
#mobile-sidebar-menus,#mobile-sidebar-toc
|
||||
position: fixed
|
||||
top: 0
|
||||
right: -254px
|
||||
width: 250px
|
||||
height 101vh
|
||||
background: $white
|
||||
cursor: pointer
|
||||
box-shadow: 0 0 4px alpha($dark-black,0.27)
|
||||
z-index: 103
|
||||
overflow-y: scroll
|
||||
display: block
|
||||
transition: all .3s
|
||||
display: none
|
||||
|
||||
#mobile-sidebar-menus
|
||||
.mobile_author_icon
|
||||
padding: 1.3rem 1.5rem 0
|
||||
text-align: center
|
||||
|
||||
img
|
||||
height: 120px
|
||||
width: 120px
|
||||
display: inline-block
|
||||
vertical-align: top
|
||||
border-radius: 70px
|
||||
transition: all .3s
|
||||
|
||||
.mobile_post_data
|
||||
display: flex
|
||||
justify-content: center
|
||||
padding: .6rem .5rem 0
|
||||
|
||||
.mobile_data_item
|
||||
flex: 1
|
||||
|
||||
.mobile_data_link
|
||||
a
|
||||
text-decoration: none
|
||||
|
||||
.length_num
|
||||
font-size: .9rem
|
||||
color: $dark-black
|
||||
|
||||
.headline
|
||||
display: block
|
||||
font-size: 0.7rem
|
||||
text-transform: uppercase
|
||||
color:$font-black
|
||||
|
||||
hr
|
||||
margin: 1rem auto
|
||||
|
||||
.menus_items
|
||||
padding: 0 .5rem
|
||||
margin-bottom: 5rem
|
||||
|
||||
a
|
||||
display: block !important
|
||||
opacity: 1 !important
|
||||
margin: 0
|
||||
padding: .3rem 1.5rem
|
||||
color: $font-black
|
||||
text-shadow: none
|
||||
font-size: 0.8rem
|
||||
z-index: 0
|
||||
text-overflow: ellipsis
|
||||
overflow: hidden
|
||||
white-space: nowrap
|
||||
|
||||
i
|
||||
width: 30%
|
||||
text-align: left
|
||||
|
||||
span
|
||||
width 70%
|
||||
|
||||
&:hover
|
||||
color: $light-blue
|
||||
|
||||
.menus-expand
|
||||
position: absolute
|
||||
width: 30px !important
|
||||
height: 30px
|
||||
right: 0
|
||||
padding: 6px
|
||||
transform: rotate(0deg)
|
||||
transition: all .3s
|
||||
|
||||
&.menus-closed
|
||||
transform: rotate(180deg) !important
|
||||
transition: all .3s
|
||||
|
||||
.menus_item_child
|
||||
list-style: none
|
||||
margin: 0
|
||||
|
||||
#mobile-sidebar-toc
|
||||
padding: 15px 10px
|
||||
|
||||
ol,li
|
||||
list-style: none
|
||||
padding: 0 0 0 5px
|
||||
margin: 0
|
||||
|
||||
|
||||
.toc_mobile_headline
|
||||
text-align: center
|
||||
font-size: 18px
|
||||
font-weight: bold
|
||||
|
||||
a
|
||||
text-decoration: none
|
||||
color: $light-black
|
||||
|
||||
&:hover
|
||||
color: $light-blue
|
||||
|
||||
// 手機打開menus，toc特效
|
||||
.open-mobile-menus,
|
||||
.open-mobile-toc
|
||||
overflow: hidden
|
||||
#body-wrap
|
||||
transform: translateX(-250px)
|
||||
#page-header
|
||||
transform: translateX(-250px)
|
||||
&.fixed.visible
|
||||
transform: translate3d(-250px, 100%, 0)
|
||||
#rightside
|
||||
transform: translate3d(-288px, 0, 0) !important
|
||||
|
||||
.open-mobile-menus
|
||||
#mobile-sidebar
|
||||
#mobile-sidebar-menus
|
||||
transform: translateX(-254px)
|
||||
|
||||
.open-mobile-toc
|
||||
#mobile-sidebar
|
||||
#mobile-sidebar-toc
|
||||
transform: translateX(-254px)
|
||||
|
||||
@media screen and (max-width: $sm)
|
||||
#mobile-sidebar-menus
|
||||
display: block !important
|
||||
|
||||
@media screen and (max-width: $bg)
|
||||
#mobile-sidebar-toc
|
||||
display: block !important
|
||||
|
||||
|
||||
@@ -1,11 +1,17 @@
|
||||
if hexo-config("nightshift") && hexo-config("nightshift.enable")
|
||||
.night-mode
|
||||
color: #99a9bf
|
||||
background-color: #2d3032
|
||||
|
||||
#sidebar
|
||||
background: #2d3035 !important
|
||||
box-shadow: -0.25rem 0 0.25rem #2d3035 !important
|
||||
|
||||
&::-webkit-scrollbar-thumb
|
||||
background: lighten(#2d3035,5)
|
||||
|
||||
#toggle-sidebar
|
||||
color: #99a9bf !important
|
||||
|
||||
if hexo-config("local_search") && hexo-config("local_search.enable")
|
||||
#local-search
|
||||
@@ -66,8 +72,12 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
|
||||
.vcontent.expand:after
|
||||
background: hsla(204, 5%, 22%, 1)
|
||||
|
||||
.recent-post-item .article-title
|
||||
color: #99a9bf
|
||||
.recent-post-item
|
||||
background: #2d3032 !important
|
||||
|
||||
.article-title,
|
||||
a
|
||||
color: #99a9bf !important
|
||||
|
||||
#page-header
|
||||
&.fixed
|
||||
@@ -144,7 +154,12 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
|
||||
.translate_chn_to_cht,
|
||||
.nightshift,
|
||||
#readmode,
|
||||
#to_comment
|
||||
#to_comment,
|
||||
#font_plus,
|
||||
#font_minus,
|
||||
#rightside_config,
|
||||
#go-up,
|
||||
#mobile-toc-button
|
||||
background-color: #2d3035 !important
|
||||
|
||||
img
|
||||
@@ -207,12 +222,16 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
|
||||
#top-container a,
|
||||
#footer,
|
||||
#footer a,
|
||||
#page-header a
|
||||
#page-header a,
|
||||
#page-header .toggle-menu
|
||||
color: rgba(238,238,238,.6)
|
||||
|
||||
#footer
|
||||
background-color: #2d3032
|
||||
|
||||
//打賞 分享
|
||||
.post-reward
|
||||
.reward-buttom
|
||||
.reward-button
|
||||
background-color: #616a6b
|
||||
.post_share
|
||||
filter: brightness(0.6)
|
||||
@@ -222,20 +241,6 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
|
||||
&::-webkit-scrollbar-thumb
|
||||
background: lighten(#2d3035,5)
|
||||
|
||||
|
||||
#post_bottom
|
||||
background: #2d3035
|
||||
box-shadow: 0 -5px 6px -5px rgba(133,133,133,0)
|
||||
|
||||
i
|
||||
color: #99a9bf !important
|
||||
|
||||
#toc_mobile
|
||||
background: #2d3035
|
||||
|
||||
a
|
||||
color: #99a9bf !important
|
||||
|
||||
#web_bg
|
||||
background-color: #2d3032
|
||||
|
||||
@@ -246,46 +251,34 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
|
||||
background-color: #616a6b
|
||||
|
||||
|
||||
@media screen and (max-width: 768px)
|
||||
.night-mode
|
||||
color: #99a9bf
|
||||
background-color: rgb(45, 48, 53)
|
||||
#mobile-sidebar
|
||||
#mobile-sidebar-menus
|
||||
background: #2d3035
|
||||
|
||||
#page-header
|
||||
.menus
|
||||
background: #2d3035
|
||||
|
||||
.headline
|
||||
color: #99a9bf !important
|
||||
|
||||
.length_num
|
||||
color: darken(#99a9bf,10) !important
|
||||
a
|
||||
color: #99a9bf !important
|
||||
.menu-icon-first,
|
||||
.menu-icon-second,
|
||||
.menu-icon-third
|
||||
background-color: #99a9bf !important
|
||||
|
||||
|
||||
@media screen and (min-width: 768px)
|
||||
.night-mode
|
||||
color: #99a9bf
|
||||
background-color: #2d3032
|
||||
.headline
|
||||
color: #99a9bf !important
|
||||
|
||||
.recent-post-item
|
||||
background: #2d3035 !important
|
||||
.length_num
|
||||
color: darken(#99a9bf,10) !important
|
||||
a
|
||||
color: #99a9bf !important
|
||||
|
||||
#page-header
|
||||
.menus_item_child
|
||||
background-color: #2d3035 !important
|
||||
#mobile-sidebar-toc
|
||||
background: #2d3035
|
||||
a
|
||||
color: #99a9bf !important
|
||||
|
||||
&:before
|
||||
border-color: transparent transparent #2d3035 !important
|
||||
|
||||
li
|
||||
a
|
||||
color: #99a9bf
|
||||
#page-header
|
||||
.menus_item_child
|
||||
background-color: #2d3035 !important
|
||||
|
||||
&:before
|
||||
border-color: transparent transparent #2d3035 !important
|
||||
|
||||
li
|
||||
a
|
||||
color: #99a9bf
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -39,10 +39,10 @@
|
||||
|
||||
p, ul, ol, table, pre, blockquote, img
|
||||
&:first-child
|
||||
margin-top: 0
|
||||
margin-top: 0 !important
|
||||
|
||||
&:last-child
|
||||
margin-bottom: 0
|
||||
margin-bottom: 0 !important
|
||||
|
||||
|
||||
if ($note-icons)
|
||||
|
||||
@@ -125,20 +125,25 @@ galleryItemStyle(w, h)
|
||||
color: $light-blue !important
|
||||
|
||||
.tag-cloud
|
||||
padding: 1.5rem 1rem 2rem
|
||||
text-align: center
|
||||
padding: 40px 44px 44px
|
||||
|
||||
a
|
||||
display: inline-block
|
||||
margin: 0 0.4rem
|
||||
text-decoration: none
|
||||
cursor: pointer
|
||||
transition: all .3s
|
||||
|
||||
&:hover
|
||||
color: $ruby !important
|
||||
transform: scale(1.1)
|
||||
|
||||
&__title
|
||||
font-size: 1.8rem
|
||||
text-align: center
|
||||
|
||||
&-tags
|
||||
text-align: center
|
||||
|
||||
#tag,
|
||||
#category,
|
||||
@@ -186,7 +191,7 @@ galleryItemStyle(w, h)
|
||||
|
||||
&-item
|
||||
position: relative
|
||||
margin-bottom: 1rem
|
||||
margin: 0 0 1rem 0.5rem
|
||||
transition: all 0.2s ease-in-out
|
||||
|
||||
&:hover
|
||||
@@ -196,8 +201,8 @@ galleryItemStyle(w, h)
|
||||
&:before
|
||||
$w = 0.3rem
|
||||
position: absolute
|
||||
top: 0.48rem
|
||||
left: calc(-1rem - 7px)
|
||||
top: 1.8rem
|
||||
left: calc(-1rem - 17px)
|
||||
width: w = $w
|
||||
height: h = w
|
||||
border: 0.5 * w solid $light-blue
|
||||
@@ -217,20 +222,57 @@ galleryItemStyle(w, h)
|
||||
&:before
|
||||
top: 0.7rem
|
||||
border-color: $ruby
|
||||
|
||||
|
||||
&__time
|
||||
position: absolute
|
||||
top: 0.1rem
|
||||
color: $a-link-color
|
||||
font-size: 0.7rem
|
||||
padding-left: 0.4rem
|
||||
|
||||
&__title
|
||||
display: block
|
||||
margin-left: 5rem
|
||||
color: $font-black
|
||||
font-size: 0.75rem
|
||||
height: 60px
|
||||
overflow: hidden
|
||||
display: -webkit-box
|
||||
-webkit-line-clamp: 2
|
||||
-webkit-box-orient: vertical
|
||||
transition: all .3s
|
||||
|
||||
&:hover
|
||||
color: $light-blue
|
||||
transform: translateX(20px)
|
||||
|
||||
&__img
|
||||
img
|
||||
height: 100%
|
||||
width: 100%
|
||||
object-fit: cover
|
||||
padding: 0
|
||||
transition: all .6s
|
||||
|
||||
&:hover
|
||||
transform: scale(1.1)
|
||||
|
||||
&__post
|
||||
text-decoration: none
|
||||
font-size: 0.8rem
|
||||
cursor: pointer
|
||||
|
||||
&:hover
|
||||
color: $a-link-color
|
||||
|
||||
&-img
|
||||
height: 80px
|
||||
width: 80px
|
||||
display: inline-block
|
||||
overflow: hidden
|
||||
|
||||
&-post
|
||||
display: inline-block
|
||||
top: 0
|
||||
position: absolute
|
||||
margin-left: 1rem
|
||||
|
||||
|
||||
.category-lists
|
||||
padding: 1rem 0 1.5rem
|
||||
|
||||
|
||||
@@ -22,7 +22,8 @@
|
||||
color: $white
|
||||
cursor: default
|
||||
|
||||
img.prev_cover, img.next_cover
|
||||
img.prev_cover,
|
||||
img.next_cover
|
||||
position: absolute
|
||||
padding: 0
|
||||
top: 0
|
||||
|
||||
@@ -385,14 +385,13 @@ img
|
||||
|
||||
|
||||
// 文章字體
|
||||
#post-content p {
|
||||
#post-content p
|
||||
font-size: 1.1em
|
||||
}
|
||||
|
||||
#post-content ol, #post-content ul {
|
||||
|
||||
#post-content ol,
|
||||
#post-content ul
|
||||
font-size: 1em
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 1024px)
|
||||
@@ -400,33 +399,21 @@ img
|
||||
margin: 0 15px
|
||||
width: auto
|
||||
|
||||
|
||||
|
||||
|
||||
.layout_post
|
||||
padding: 50px
|
||||
-webkit-box-shadow: 0 4px 8px 6px rgba(7,17,27,0.06)
|
||||
box-shadow: 0 4px 8px 6px rgba(7,17,27,0.06)
|
||||
border-radius: 8px
|
||||
-webkit-transition: all 0.3s
|
||||
-moz-transition: all 0.3s
|
||||
-o-transition: all 0.3s
|
||||
-ms-transition: all 0.3s
|
||||
transition: all 0.3s
|
||||
background: #fff
|
||||
margin-top: 40px
|
||||
margin-bottom: 40px
|
||||
|
||||
&:hover
|
||||
-webkit-box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
|
||||
box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
|
||||
|
||||
img
|
||||
margin:0 auto
|
||||
display:block
|
||||
|
||||
|
||||
|
||||
.tag_share
|
||||
display: block
|
||||
|
||||
@@ -455,4 +442,35 @@ img
|
||||
#post
|
||||
a
|
||||
text-decoration: none
|
||||
color: $light-blue
|
||||
color: $light-blue
|
||||
|
||||
h1
|
||||
margin: 0.8rem 0
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6
|
||||
margin: 1rem 0 0.5rem 0
|
||||
|
||||
img
|
||||
margin: 0 auto 0.8rem
|
||||
|
||||
blockquote,
|
||||
p
|
||||
margin: 0 0 0.8rem 0
|
||||
|
||||
|
||||
table,.note
|
||||
margin: 0.8rem 0
|
||||
|
||||
figure
|
||||
margin: 0.8rem 0
|
||||
|
||||
table
|
||||
margin: 0
|
||||
|
||||
blockquote
|
||||
p
|
||||
margin: 0.5rem 0
|
||||
|
||||
@@ -1,70 +0,0 @@
|
||||
#post_bottom
|
||||
position: fixed
|
||||
bottom: -50px
|
||||
background: alpha($white, 0.8)
|
||||
width: 100%
|
||||
border: none
|
||||
box-shadow: 0 -5px 6px -5px alpha($grey, 0.6)
|
||||
display: none
|
||||
transition: all .2s
|
||||
cursor: pointer
|
||||
z-index: 100
|
||||
|
||||
&.toc_mobile_show
|
||||
bottom: 0
|
||||
|
||||
#mobile_to_comment,#mobile_toc
|
||||
width: 50%
|
||||
text-align: center
|
||||
font-size: 18px
|
||||
padding: 7px 0
|
||||
display: inline-block
|
||||
color: $light-black
|
||||
|
||||
a
|
||||
text-decoration: none
|
||||
color: $light-black
|
||||
|
||||
#toc_mobile
|
||||
box-shadow: 0 0 4px alpha($grey, 0.6)
|
||||
background: $white
|
||||
width: 50%
|
||||
height: 70%
|
||||
position: fixed
|
||||
bottom: 60px
|
||||
right: 10px
|
||||
overflow: scroll
|
||||
padding: 15px 10px
|
||||
font-size: 15px
|
||||
border-radius: 10px
|
||||
display: none
|
||||
|
||||
ol,li
|
||||
list-style: none
|
||||
padding: 0 0 0 5px
|
||||
margin: 0
|
||||
|
||||
a
|
||||
&:hover
|
||||
color: $light-blue
|
||||
|
||||
.toc_mobile_headline
|
||||
text-align: center
|
||||
font-size: 18px
|
||||
font-weight: bold
|
||||
|
||||
&.no_comment_show
|
||||
#mobile_toc
|
||||
width: 100%
|
||||
padding: 16px 0
|
||||
|
||||
#toc_mobile
|
||||
right: 25%
|
||||
|
||||
&.no_toc_show
|
||||
#mobile_to_comment
|
||||
width: 100%
|
||||
|
||||
@media screen and (max-width:768px)
|
||||
#post_bottom
|
||||
display: block
|
||||
@@ -7,47 +7,49 @@ if hexo-config("readmode") && hexo-config("readmode.enable")
|
||||
#toggle-sidebar
|
||||
display: none
|
||||
|
||||
#page-header
|
||||
#site-name,
|
||||
.site-page,
|
||||
.toggle-menu
|
||||
text-shadow: none
|
||||
color: $font-black
|
||||
|
||||
.menus_item_child
|
||||
background-color: darken($pale-yellow,5) !important
|
||||
|
||||
&:before
|
||||
border-color: transparent transparent darken($pale-yellow,5) !important
|
||||
|
||||
#top-container
|
||||
background-image: none !important
|
||||
height: 14rem
|
||||
background-color: $pale-yellow
|
||||
|
||||
a
|
||||
color: #4c4948
|
||||
|
||||
color: $font-black
|
||||
|
||||
&:before
|
||||
opacity: 0
|
||||
|
||||
#site-name,
|
||||
.site-page
|
||||
text-shadow: none
|
||||
color: #4c4948
|
||||
|
||||
|
||||
#post-info
|
||||
text-align: center
|
||||
padding: 0
|
||||
color: #4c4948
|
||||
color: $font-black
|
||||
|
||||
#post-title,
|
||||
#post-meta
|
||||
text-shadow: none
|
||||
|
||||
#page-header
|
||||
&.fixed
|
||||
background: alpha(darken($pale-yellow,5),0.5)
|
||||
box-shadow: none
|
||||
#page-header
|
||||
&.fixed
|
||||
background: alpha(darken($pale-yellow,5),0.5)
|
||||
box-shadow: none
|
||||
|
||||
&.open-sidebar
|
||||
.site-page
|
||||
display: inline-block
|
||||
opacity: 1
|
||||
&.open-sidebar
|
||||
.site-page
|
||||
display: inline-block
|
||||
opacity: 1
|
||||
|
||||
.toggle-menu
|
||||
.menu-icon-first,
|
||||
.menu-icon-second,
|
||||
.menu-icon-third
|
||||
background-color: #4c4948
|
||||
|
||||
.layout_post
|
||||
box-shadow: none
|
||||
@@ -98,31 +100,6 @@ if hexo-config("readmode") && hexo-config("readmode.enable")
|
||||
|
||||
.copy-notice
|
||||
background: darken($pale-yellow,10)
|
||||
|
||||
.toc_mobile_show
|
||||
background: alpha(darken($pale-yellow,5),0.5) !important
|
||||
box-shadow: none !important
|
||||
|
||||
#post_bottom_items
|
||||
#mobile_to_comment
|
||||
display: none
|
||||
#mobile_toc
|
||||
width: 100%
|
||||
padding: 16px 0
|
||||
#toc_mobile
|
||||
right: 25%
|
||||
background: darken($pale-yellow,5)
|
||||
|
||||
|
||||
@media screen and (min-width: 768px)
|
||||
.read-mode
|
||||
.menus_item_child
|
||||
background-color: darken($pale-yellow,5) !important
|
||||
|
||||
&:before
|
||||
border-color: transparent transparent darken($pale-yellow,5) !important
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
text-align: center
|
||||
display: block
|
||||
|
||||
.reward-buttom
|
||||
.reward-button
|
||||
text-align: center
|
||||
display: inline-block
|
||||
cursor: pointer
|
||||
|
||||
64
source/css/_layout/rightside.styl
Normal file
64
source/css/_layout/rightside.styl
Normal file
@@ -0,0 +1,64 @@
|
||||
#rightside
|
||||
right: -38px
|
||||
position: fixed
|
||||
bottom: 40px
|
||||
transition: all .3s
|
||||
opacity 0
|
||||
|
||||
#rightside-config-hide
|
||||
transition: all .3s
|
||||
display none
|
||||
|
||||
#readmode,
|
||||
#font_plus,
|
||||
#font_minus,
|
||||
#to_comment,
|
||||
.nightshift,
|
||||
#mobile-toc-button,
|
||||
#go-up,
|
||||
#rightside_config
|
||||
width: 30px
|
||||
height: 30px
|
||||
background-color: $light-blue
|
||||
color: $white
|
||||
text-align: center
|
||||
line-height: 29px
|
||||
font-size: 16px
|
||||
display: block
|
||||
margin-bottom: 2px
|
||||
cursor: pointer
|
||||
text-decoration: none
|
||||
|
||||
&:hover
|
||||
background-color: $ruby
|
||||
|
||||
#rightside_config
|
||||
i
|
||||
animation: avatar_turn_around 2s linear infinite
|
||||
|
||||
.translate_chn_to_cht
|
||||
width: 30px
|
||||
height: 30px
|
||||
background-color: $light-blue
|
||||
color: $white
|
||||
text-align: center
|
||||
line-height: 29px
|
||||
font-size: 16px
|
||||
display: block
|
||||
margin-bottom: 2px
|
||||
cursor: pointer
|
||||
text-decoration: none
|
||||
|
||||
&:hover
|
||||
background-color: $ruby
|
||||
|
||||
#mobile-toc-button
|
||||
display: none
|
||||
|
||||
|
||||
@media screen and (max-width: $bg)
|
||||
#rightside
|
||||
#mobile-toc-button
|
||||
display: block
|
||||
|
||||
|
||||
@@ -41,35 +41,33 @@
|
||||
padding: 0
|
||||
margin: 0
|
||||
object-fit: cover
|
||||
|
||||
|
||||
&:hover
|
||||
transform:scale(1.1)
|
||||
|
||||
#pagination
|
||||
margin-top: 2rem
|
||||
|
||||
.recent-post-info
|
||||
padding: 50px 40px
|
||||
display: inline-block
|
||||
width: 55%
|
||||
overflow hidden
|
||||
|
||||
|
||||
.recent-post-info
|
||||
padding: 50px 40px
|
||||
display: inline-block
|
||||
width: 55%
|
||||
overflow hidden
|
||||
a.article-meta__categories
|
||||
text-decoration: none
|
||||
color: #858585
|
||||
|
||||
&:hover
|
||||
color: #49b1f5 !important
|
||||
|
||||
a.article-meta__categories
|
||||
text-decoration: none
|
||||
color: #858585
|
||||
|
||||
&:hover
|
||||
color: #49b1f5 !important
|
||||
|
||||
.content
|
||||
display: -webkit-box
|
||||
-webkit-line-clamp: 3
|
||||
-webkit-box-orient: vertical
|
||||
overflow: hidden
|
||||
height: 90px
|
||||
.content
|
||||
display: -webkit-box
|
||||
-webkit-line-clamp: 3
|
||||
-webkit-box-orient: vertical
|
||||
overflow: hidden
|
||||
height: 90px
|
||||
|
||||
.layout_page
|
||||
display: flex
|
||||
@@ -93,19 +91,14 @@ a.article-meta__categories
|
||||
.card_widget,#archive,.tag-cloud,#tag,.category-content,#category,#page,.flink
|
||||
|
||||
&:hover
|
||||
-webkit-box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
|
||||
box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
|
||||
|
||||
|
||||
|
||||
@media screen and (min-width: 900px)
|
||||
if hexo-config("aside.position") == "left"
|
||||
#recent-posts
|
||||
#recent-posts,#page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
|
||||
order: 2
|
||||
|
||||
#page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
|
||||
order: 2
|
||||
|
||||
|
||||
@media screen and (max-width: 900px)
|
||||
#page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
|
||||
@@ -121,9 +114,9 @@ a.article-meta__categories
|
||||
border-radius: 8px
|
||||
|
||||
.post_cover
|
||||
width: 100% !important
|
||||
height: 230px !important
|
||||
border-radius: 8px !important
|
||||
width: 100% !important
|
||||
height: 230px !important
|
||||
border-radius: 8px !important
|
||||
|
||||
.recent-post-item,#page,.tag-cloud,.flink
|
||||
margin-top: 1px
|
||||
@@ -164,12 +157,13 @@ a.article-meta__categories
|
||||
.category-lists
|
||||
padding: 0
|
||||
|
||||
.recent-post-info
|
||||
padding: 20px 10px !important
|
||||
width: 100%
|
||||
#recent-posts
|
||||
.recent-post-info
|
||||
padding: 20px 10px !important
|
||||
width: 100%
|
||||
|
||||
#recent-posts #pagination
|
||||
margin-bottom: 0
|
||||
#pagination
|
||||
margin-bottom: 0
|
||||
|
||||
#nav
|
||||
#site-social-icons
|
||||
@@ -202,17 +196,20 @@ footer
|
||||
animation: main 1s
|
||||
|
||||
#nav,
|
||||
#top-container
|
||||
#top-container,
|
||||
#page-header
|
||||
animation: header 1s
|
||||
|
||||
#site-title
|
||||
animation: titlescale 1s
|
||||
|
||||
canvas,#web_bg
|
||||
canvas,
|
||||
#web_bg
|
||||
animation: to_show 4s
|
||||
|
||||
.card-announcement-animation
|
||||
animation: announ_animation 1.5s infinite
|
||||
animation: announ_animation .8s linear infinite
|
||||
color: #FF0000
|
||||
|
||||
.scroll-down-effects
|
||||
animation: scroll-down-effect 1.5s infinite
|
||||
@@ -222,8 +219,11 @@ if hexo-config("avatar_effect") == true
|
||||
animation: avatar_turn_around 2s linear infinite
|
||||
|
||||
.reward-main
|
||||
animation: donate_effcet .3s .1s ease both;
|
||||
animation: donate_effcet .3s .1s ease both
|
||||
|
||||
.rightside-in
|
||||
animation: rightside_in_animate .3s
|
||||
display: block !important
|
||||
|
||||
@keyframes scroll-down-effect
|
||||
0%
|
||||
@@ -286,4 +286,17 @@ if hexo-config("avatar_effect") == true
|
||||
transform: translateY(-20px)
|
||||
100%
|
||||
opacity: 1
|
||||
transform: translateY(0)
|
||||
transform: translateY(0)
|
||||
|
||||
@keyframes announ_animation
|
||||
0%,to
|
||||
transform: scale(1)
|
||||
50%
|
||||
transform: scale(1.2)
|
||||
|
||||
@keyframes rightside_in_animate
|
||||
0%
|
||||
transform: translateX(28px)
|
||||
100%
|
||||
transform: translateX(0)
|
||||
|
||||
|
||||
@@ -60,9 +60,9 @@ $lg = 1450px
|
||||
$sidebar-icon-top = 20px
|
||||
$sidebar-icon-left = $sidebar-icon-top - 4px
|
||||
$sidebar-icon-size = 16px
|
||||
$go-up-bottom = $sidebar-icon-top
|
||||
$go-up-right = -($sidebar-icon-left)
|
||||
$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%
|
||||
// Global color & SVG
|
||||
$pale-blue = $theme-hr-color
|
||||
$light-blue = $theme-color
|
||||
|
||||
BIN
source/img/icp.png
Normal file
BIN
source/img/icp.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
@@ -1,4 +1,8 @@
|
||||
$(function () {
|
||||
|
||||
/**
|
||||
* 進入post頁sidebar自動打開
|
||||
*/
|
||||
if ($('#sidebar').hasClass('auto_open')) {
|
||||
if ($(".sidebar-toc__content").children().length > 0) {
|
||||
$(".layout_post").animate({}, function () {
|
||||
@@ -32,8 +36,9 @@ $(function () {
|
||||
}
|
||||
|
||||
|
||||
//-------------------------------------------------------------------------------------------------------
|
||||
//sidebar
|
||||
/**
|
||||
* 點擊左下角箭頭,顯示sidebar
|
||||
*/
|
||||
$('#toggle-sidebar').on('click', function () {
|
||||
|
||||
if (!isMobile() && $('#sidebar').is(':visible')) {
|
||||
@@ -76,25 +81,25 @@ $(function () {
|
||||
}
|
||||
})
|
||||
|
||||
//-----------------------------------------------------------------------------------------------------
|
||||
// 首页fullpage添加
|
||||
// 添加class
|
||||
/**
|
||||
* 首頁fullpage添加
|
||||
* 添加class
|
||||
*/
|
||||
if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {} else {
|
||||
$('.full_page .nav_bg').css('background-attachment', 'fixed');
|
||||
$('#to_comment').css("display", "block")
|
||||
}
|
||||
|
||||
//---------------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* 首頁top_img底下的箭頭
|
||||
*/
|
||||
$(".scroll-down").on("click", function () {
|
||||
|
||||
scrollTo('#content-outer')
|
||||
|
||||
});
|
||||
|
||||
|
||||
//--------------------------------------------------------------------------------------------------------
|
||||
// bookmark
|
||||
/**
|
||||
* BOOKMARK 書簽
|
||||
*/
|
||||
$.fancyConfirm = function (opts) {
|
||||
opts = $.extend(true, {
|
||||
title: 'Are you sure?',
|
||||
@@ -109,7 +114,7 @@ $(function () {
|
||||
src: '<div class="fc-content">' +
|
||||
'<h3>' + opts.title + '</h3>' +
|
||||
'<p>' + opts.message + '</p>' +
|
||||
'<p class="tright">' +
|
||||
'<p class="is_right">' +
|
||||
'<button data-value="1" data-fancybox-close class="bookmark-ok">' + opts.okButton + '</button>' +
|
||||
'</p>' +
|
||||
'</div>',
|
||||
@@ -147,9 +152,10 @@ $(function () {
|
||||
}
|
||||
});
|
||||
|
||||
//-------------------------------------------------------------------------------------------------------
|
||||
//代码copy
|
||||
// Add copy icon
|
||||
/**
|
||||
* 代碼copy
|
||||
* Add copy icon
|
||||
*/
|
||||
$('figure.highlight').wrap('<div class="code-area-wrap"></div>')
|
||||
|
||||
var highlight_copy = GLOBAL_CONFIG.highlight_copy
|
||||
@@ -209,7 +215,9 @@ $(function () {
|
||||
})
|
||||
}
|
||||
|
||||
//代碼框語言識別
|
||||
/**
|
||||
* 代碼框語言識別
|
||||
*/
|
||||
var highlight_lang = GLOBAL_CONFIG.highlight_lang
|
||||
if (highlight_lang == 'true') {
|
||||
var $highlight_lang = $('<div class="code_lang"></div>')
|
||||
@@ -231,7 +239,9 @@ $(function () {
|
||||
|
||||
})
|
||||
}
|
||||
//代碼收縮
|
||||
/**
|
||||
* 代碼收縮
|
||||
*/
|
||||
var highlight_shrink = GLOBAL_CONFIG.highlight_shrink
|
||||
if (highlight_shrink == 'true') {
|
||||
var $code_expand = $('<i class="fa fa-angle-down code-expand code-closed" aria-hidden="true"></i>')
|
||||
@@ -249,8 +259,9 @@ $(function () {
|
||||
}
|
||||
})
|
||||
|
||||
//---------------------------------------------------------------------------------------------------
|
||||
//fancybox
|
||||
/**
|
||||
* fancybox
|
||||
*/
|
||||
var imgList = $(".recent-post-info img").not('.no-fancybox');
|
||||
if (imgList.length === 0) {
|
||||
imgList = $("#post-content img").not('.no-fancybox');
|
||||
@@ -304,55 +315,71 @@ $(function () {
|
||||
|
||||
});
|
||||
|
||||
//---------------------------------------------------------------------------------------------------------
|
||||
/** head点击*/
|
||||
$('.toggle-menu').on('click', function () {
|
||||
/**
|
||||
* 手機menu和toc按鈕點擊
|
||||
* 顯示menu和toc的sidebar
|
||||
*/
|
||||
function mobile_menu_close() {
|
||||
if ($(".toggle-menu").hasClass("open")) {
|
||||
$(".toggle-menu").removeClass("open").addClass("close");
|
||||
$('body').addClass("is_hidden");
|
||||
$('.menus').animate({
|
||||
right: 0
|
||||
}, 300)
|
||||
$('.menu_mask,.menus').css("display", "block")
|
||||
$('body').removeClass("open-mobile-menus");
|
||||
$('#menu_mask').fadeOut()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function mobile_toc_close() {
|
||||
if ($("#mobile-toc-button").hasClass("open")) {
|
||||
$("#mobile-toc-button").removeClass("open").addClass("close");
|
||||
$('body').removeClass("open-mobile-toc");
|
||||
$('#menu_mask').fadeOut();
|
||||
}
|
||||
|
||||
}
|
||||
$('.toggle-menu').on('click', function () {
|
||||
if ($(".toggle-menu").hasClass("close")) {
|
||||
$(".toggle-menu").removeClass("close").addClass("open");
|
||||
$('body').addClass("open-mobile-menus");
|
||||
$('#menu_mask').fadeIn();
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
$('.menu_mask ').on('click touchstart', function () {
|
||||
$(".toggle-menu").removeClass("close").addClass("open");
|
||||
$('body').removeClass("is_hidden");
|
||||
$('.menus').animate({
|
||||
right: -250
|
||||
}, 300, function () {
|
||||
{
|
||||
$('.menus').css({
|
||||
'display': ''
|
||||
})
|
||||
}
|
||||
})
|
||||
$('.menu_mask').css("display", "")
|
||||
$('#mobile-toc-button').on('click', function () {
|
||||
if ($("#mobile-toc-button").hasClass("close")) {
|
||||
$("#mobile-toc-button").removeClass("close").addClass("open");
|
||||
$('body').addClass("open-mobile-toc");
|
||||
$('#menu_mask').fadeIn();
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
$('#menu_mask').on('click touchstart', function () {
|
||||
mobile_menu_close()
|
||||
mobile_toc_close()
|
||||
})
|
||||
|
||||
$(window).on('resize', function (e) {
|
||||
if (!$('.toggle-menu').is(':visible')) {
|
||||
if ($(".toggle-menu").hasClass("close")) {
|
||||
$(".toggle-menu").removeClass("close").addClass("open");
|
||||
$('body').removeClass("is_hidden");
|
||||
$('.menus').animate({
|
||||
right: -250
|
||||
}, 300)
|
||||
$('.menu_mask').css("display", "")
|
||||
}
|
||||
mobile_menu_close()
|
||||
}
|
||||
if (!$('#mobile-toc-button').is(':visible')) {
|
||||
mobile_toc_close()
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
//點擊toc，收起sidebar
|
||||
$("#mobile-sidebar-toc a").on('click', function () {
|
||||
mobile_toc_close()
|
||||
})
|
||||
|
||||
//---------------------------------------------------------------------------------------------------------
|
||||
/** scroll 滚动 toc*/
|
||||
/**
|
||||
* scroll 滚动 toc
|
||||
*/
|
||||
var initTop = 0
|
||||
$('.toc-child').hide()
|
||||
|
||||
var is_post_bottom = ($('#post_bottom').hasClass('no_comment_show')) && ($('#post_bottom').hasClass('no_toc_show'))
|
||||
|
||||
// main of scroll
|
||||
$(window).scroll(throttle(function (event) {
|
||||
var currentTop = $(this).scrollTop()
|
||||
@@ -362,84 +389,39 @@ $(function () {
|
||||
// head position
|
||||
findHeadPosition(currentTop)
|
||||
auto_scroll_toc(currentTop)
|
||||
|
||||
|
||||
}
|
||||
var isUp = scrollDirection(currentTop)
|
||||
|
||||
if ($(".toggle-menu").hasClass("open")) {
|
||||
if (currentTop > 56) {
|
||||
|
||||
if (isUp) {
|
||||
$('#page-header').hasClass('visible') ? $('#page-header').removeClass('visible') : console.log()
|
||||
if (!is_post_bottom) {
|
||||
$('#post_bottom').removeClass('toc_mobile_show')
|
||||
$('#toc_mobile').hasClass('is_visible') ? $('#toc_mobile').removeClass('is_visible') : console.log()
|
||||
}
|
||||
|
||||
} else {
|
||||
$('#page-header').hasClass('visible') ? console.log() : $('#page-header').addClass('visible')
|
||||
if (!is_post_bottom) {
|
||||
$('#post_bottom').addClass('toc_mobile_show')
|
||||
$('#toc_mobile').hasClass('is_visible') ? $('#toc_mobile').removeClass('is_visible') : console.log()
|
||||
}
|
||||
|
||||
}
|
||||
$('#page-header').addClass('fixed')
|
||||
if ($('#go-up').css('opacity') === '0') {
|
||||
|
||||
$('#go-up').animate({}, function () {
|
||||
$('#go-up').css({
|
||||
'opacity': '1',
|
||||
'transform': 'translateX(-30px) rotateZ(360deg)'
|
||||
})
|
||||
})
|
||||
}
|
||||
if ($('#rightside').css('opacity') === '0') {
|
||||
|
||||
$('#rightside').animate({}, function () {
|
||||
$('#rightside').css({
|
||||
'opacity': '1',
|
||||
'transform': 'translateX(-38px)'
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
if (currentTop > 56) {
|
||||
if (isUp) {
|
||||
$('#page-header').hasClass('visible') ? $('#page-header').removeClass('visible') : console.log()
|
||||
|
||||
} else {
|
||||
if (currentTop === 0) {
|
||||
$('#page-header').removeClass('fixed').removeClass('visible')
|
||||
if (!is_post_bottom) {
|
||||
$('#post_bottom').removeClass('toc_mobile_show')
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$('#go-up').animate({}, function () {
|
||||
$('#go-up').css({
|
||||
'opacity': '0',
|
||||
'transform': 'translateX(0) rotateZ(180deg) '
|
||||
})
|
||||
})
|
||||
$('#page-header').hasClass('visible') ? console.log() : $('#page-header').addClass('visible')
|
||||
}
|
||||
$('#page-header').addClass('fixed')
|
||||
|
||||
if ($('#rightside').css('opacity') === '0') {
|
||||
$('#rightside').animate({}, function () {
|
||||
$('#rightside').css({
|
||||
'opacity': '0',
|
||||
'transform': 'translateX(0)'
|
||||
$(this).css({
|
||||
'opacity': '1',
|
||||
'transform': 'translateX(-38px)'
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
if (!is_post_bottom) {
|
||||
if ($(window).width() <= 768 && $('#post_bottom').hasClass('toc_mobile_show')) {
|
||||
$('#rightside').css('bottom', '110px')
|
||||
$('#go-up').css('bottom', '70px')
|
||||
|
||||
} else {
|
||||
$('#rightside').css('bottom', '60px')
|
||||
$('#go-up').css('bottom', '20px')
|
||||
} else {
|
||||
if (currentTop === 0) {
|
||||
$('#page-header').removeClass('fixed').removeClass('visible')
|
||||
}
|
||||
|
||||
$('#rightside').animate({}, function () {
|
||||
$('#rightside').css({
|
||||
'opacity': '',
|
||||
'transform': ''
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
}, 50, 100))
|
||||
@@ -546,7 +528,6 @@ $(function () {
|
||||
.find('.toc-child').hide()
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
function auto_scroll_toc(currentTop) {
|
||||
@@ -561,63 +542,123 @@ $(function () {
|
||||
}
|
||||
}
|
||||
|
||||
//閲讀模式
|
||||
/**
|
||||
* 閲讀模式
|
||||
*/
|
||||
$("#readmode").click(function () {
|
||||
if (Cookies.get("night-mode") == "night") {
|
||||
$('body').toggleClass('night-mode');
|
||||
$('body').toggleClass('read-mode');
|
||||
$('#font_plus,#font_minus,#to_comment').toggleClass('is_visible');
|
||||
$('#to_comment').toggleClass('is_invisible');
|
||||
|
||||
} else {
|
||||
$('body').toggleClass('read-mode');
|
||||
$('#font_plus,#font_minus,#to_comment').toggleClass('is_visible');
|
||||
$('#to_comment').toggleClass('is_invisible');
|
||||
}
|
||||
});
|
||||
|
||||
//閲讀模式下字體調整
|
||||
/**
|
||||
* 字體調整
|
||||
*/
|
||||
$("#font_plus").click(function () {
|
||||
var font_size_record = parseFloat($('body').css('font-size'))
|
||||
var code_size_record = parseFloat($('pre').css('font-size'))
|
||||
var pre_size_record = parseFloat($('pre').css('font-size'))
|
||||
var code_size_record = parseFloat($('code').css('font-size'))
|
||||
$('body').css('font-size', font_size_record + 1)
|
||||
$('pre').css('font-size', font_size_record + 1)
|
||||
$('code').css('font-size', font_size_record + 1)
|
||||
$('pre').css('font-size', pre_size_record + 1)
|
||||
$('code').css('font-size', code_size_record + 1)
|
||||
});
|
||||
|
||||
$("#font_minus").click(function () {
|
||||
var font_size_record = parseFloat($('body').css('font-size'))
|
||||
var code_size_record = parseFloat($('pre').css('font-size'))
|
||||
var pre_size_record = parseFloat($('pre').css('font-size'))
|
||||
var code_size_record = parseFloat($('code').css('font-size'))
|
||||
$('body').css('font-size', font_size_record - 1)
|
||||
$('pre').css('font-size', font_size_record - 1)
|
||||
$('code').css('font-size', font_size_record - 1)
|
||||
$('pre').css('font-size', pre_size_record - 1)
|
||||
$('code').css('font-size', code_size_record - 1)
|
||||
});
|
||||
|
||||
// 手機顯示toc
|
||||
$('#mobile_toc').on('click', function () {
|
||||
$("#toc_mobile").toggleClass('is_visible')
|
||||
})
|
||||
/**
|
||||
* sub-menus 位置調整
|
||||
*/
|
||||
|
||||
// sub-menus 位置調整
|
||||
if ( $(window).width() > 768 ) {
|
||||
if ($(window).width() > 768) {
|
||||
$('.menus_item_child').each(function () {
|
||||
var a_width= $(this).siblings('a').outerWidth(true);
|
||||
var a_width = $(this).siblings('a').outerWidth(true);
|
||||
var child_width = $(this).outerWidth(true);
|
||||
$(this).css("margin-left", -(child_width/ 2 - a_width/ 2))
|
||||
$(this).css("margin-left", -(child_width / 2 - a_width / 2))
|
||||
})
|
||||
}
|
||||
|
||||
// 手機端sub-menu 展開/收縮
|
||||
$('.menus-expand').on('click', function () {
|
||||
if ($(this).hasClass('menus-closed')) {
|
||||
$(this).parents('.menus_item').find('.menus_item_child').show();
|
||||
$(this).removeClass('menus-closed');
|
||||
} else {
|
||||
$(this).parents('.menus_item').find('.menus_item_child').hide();
|
||||
$(this).addClass('menus-closed');
|
||||
}
|
||||
})
|
||||
/**
|
||||
* 手機端sub-menu 展開/收縮
|
||||
*/
|
||||
$('.menus-expand').on('click', function () {
|
||||
if ($(this).hasClass('menus-closed')) {
|
||||
$(this).parents('.menus_item').find('.menus_item_child').show();
|
||||
$(this).removeClass('menus-closed');
|
||||
} else {
|
||||
$(this).parents('.menus_item').find('.menus_item_child').hide();
|
||||
$(this).addClass('menus-closed');
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* rightside 點擊設置 按鈕 展開
|
||||
*/
|
||||
$('#rightside_config').on('click', function () {
|
||||
$('#rightside-config-hide').toggleClass("rightside-in")
|
||||
})
|
||||
|
||||
/**
|
||||
* 調正recent_post 上下間距
|
||||
*/
|
||||
function recent_post_padding() {
|
||||
$(".recent-post-info").each(function () {
|
||||
var k = $(".recent-post-item").height();
|
||||
var e = $(this).height();
|
||||
$(this).css({
|
||||
"padding-top": (k - e) / 2,
|
||||
"padding-bottom": (k - e) / 2
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
//recent-post-item垂直置中
|
||||
if ($(window).width() > 768) {
|
||||
recent_post_padding();
|
||||
}
|
||||
|
||||
$(window).bind("resize", function () {
|
||||
if ($(window).width() > 768) {
|
||||
recent_post_padding();
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* 複製時加上版權信息
|
||||
*/
|
||||
var copy_copyright_js = GLOBAL_CONFIG.copy_copyright_js
|
||||
var copyright = GLOBAL_CONFIG.copyright
|
||||
if (copyright) {
|
||||
document.body.oncopy = event => {
|
||||
event.preventDefault();
|
||||
let textFont, copyFont = window.getSelection(0).toString();
|
||||
if (copyFont.length > 45) {
|
||||
textFont = copyFont + '\n' + '\n' + '\n' +
|
||||
copyright.languages.author + '\n' +
|
||||
copyright.languages.link + '\n' +
|
||||
copyright.languages.source + '\n' +
|
||||
copyright.languages.info;
|
||||
} else {
|
||||
textFont = copyFont;
|
||||
}
|
||||
if (event.clipboardData) {
|
||||
return event.clipboardData.setData('text', textFont);
|
||||
} else {
|
||||
// 兼容IE
|
||||
return window.clipboardData.setData("text", textFont);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user