biss/hexo-theme-butterfly
1
0
Fork 0
mirror of https://github.com/jerryc127/hexo-theme-butterfly.git synced 2026-04-16 19:30:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

v2.1.0

Browse Source 
1. 可設置隱藏文章
2. 適配 Hexo 的 Tag Plugins Code Block With marked lines 顯示
3. 可配置首頁cover顯示的位置
4. 更改深色模式下的配色
5. activate_power_mode 增加關閉顏色和抖動
6. 增加谷歌廣告，騰訊分析
7. 相關文章增加時間顯示，調整佈局，垂直居中
8. 文章頁面，top_img增加評論數顯示
9. 可以取消點擊圖片觀看大圖
10. mathjax和kathex可設置每頁都加載還是按需加載
11. 深色模式下，滾動條顔色的適配
12. 優化gitalk 在 dark mode下的顯示
13. 文章頁，文章標題過長時，只顯示三行內容
14. 深色模式下，背景圖片加上蒙板
15. 優化深色/閲讀模式下，canvas的顯示
16. 優化打賞的特效和移動到二維碼不會立刻消失
17. 優化sub-menu樣式
18. 修改aside 的tags顔色，在深色模式下不會出現觀看困難
19. 升級 normalize.css 到最新版
20. 優化手機上toc和menu的打開動畫
21. 優化代碼框打開關閉的特效
22. 精簡js,部分操作改為css控制
23. 優化主題的一些動畫，不會過於生硬

1. 修復當圖片被a標簽包圍時，點擊圖標沒有跳轉到對應網頁而是出現大圖觀看模式的bug
2. 修復當網址有subdirectory時，menu、打賞二維碼和lodding_bg 鏈接路徑錯誤的bug
3. 修復當網址有subdirectory時,
4. 修復katex 的 CSS無法讀取bug
5. 修復搜索按鈕在文章頁不顯示的bug
6. 修復gitalk css引用失敗的bug
7. 修復 點擊特效 煙花 無效的bug
8. 修復gitalk報path.startsWith is not a function的bug
9. 修復 閲讀模式下，背景沒有變純色的bug
10. 修復閲讀模式下，header 偶爾出現沒有靠攏頂部的bug
11. 修復Hexo Tag Plugins Block Quote 裏的鏈接顯示出外面的Bug
12. 修復aside歸檔日期過長導致錯位的bug
13. 修復toc為空時，toc按鈕仍存在的bug
14. 修復關閉懶加載後，頭像無法顯示的bug
15. 修復深色模式下，切換readmode偶爾會無效的bug
16. 修復在一些手機設備上，toc和menu的按鈕顯示不對齊的bug #72
This commit is contained in:
Jerry
2019-12-20 02:19:43 +08:00
Unverified
parent 90726f1a59
commit eae694806c
104 changed files with 3220 additions and 3956 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
source/css/_global/index.styl
View File

@@ -4,10 +4,8 @@ html
body
position: relative
display: flex
flex-direction: column
min-height: 100%
background: #fff
background: $white
color: $font-black
font-size: $font-size
font-family: $font-family
@@ -20,11 +18,11 @@ body
-ms-user-select: none
#body-wrap
position relative
flex: 1 auto
position: relative
display: flex
flex: 1 auto
flex-direction: column
transition: all .3s
transition: all .5s
*::-webkit-scrollbar
width: 8px
@@ -36,18 +34,16 @@ body
*::-webkit-scrollbar-track
background-color: transparent
#web_bg
background: $web-bg
height: 100%
width: 100%
background-size: cover
position: fixed
z-index: -999
width: 100%
height: 100%
background: $web-bg
background-attachment: local
background-repeat: no-repeat
background-position: center
background-size: cover
background-repeat: no-repeat
h1,
h2,
@@ -56,11 +52,11 @@ h4,
h5,
h6
position: relative
margin: 0.2rem 0
margin: 1rem 0 .7rem
color: lighten($font-color, 15%)
font-weight: bold
code
code
font-size: inherit !important
#content-outer
@@ -69,20 +65,15 @@ h6
*
box-sizing: border-box
#content-inner
.img-alt
text-decoration: none
color: $a-link-color
#toggle-sidebar
position: fixed
bottom: $sidebar-icon-top
left: $sidebar-icon-left
z-index: 100
font-size: $sidebar-icon-size
cursor: pointer
transition: all 0.2s
opacity: 0
cursor: pointer
transition: all .2s
hr
position: relative
@@ -106,9 +97,12 @@ hr
font-size: 20px
transition: all 1s ease-in-out
iframe
margin: 0 0 1rem
// collapse/expand beautify
details
padding: 0.3rem
padding: .3rem
border: 2px solid darken($light-grey, 10%)
summary
@@ -117,13 +111,14 @@ details
// set <caption> of <figure> to center-align
// use class="not-code" to avoid conflicts because code also use <figure> tag
.not-code
margin: 0.5em
padding: 0.5em
margin: .5em
padding: .5em
border: thin silver solid
text-align: center
table
overflow: auto
margin: 0 0 1rem
width: 100%
border-spacing: 0
border-collapse: collapse
@@ -133,7 +128,7 @@ table
th,
td
padding: 0.3rem 0.6rem
padding: .3rem .6rem
border: 1px solid darken($light-grey, 10%)
vertical-align: top
@@ -141,21 +136,21 @@ table
background: $selection
color: $pale-grey
.full_page #site-title,
.full_page #site-sub-title,
// 字體
.full_page #site-title,
.full_page #site-sub-title,
#site-name,
#aside_content .author-info__name,
#aside_content .author-info__description
font-family: $site-name-font
.is_right
text-align: right
text-align: right
.is_left
text-align: left
.is_center
.is-center
text-align: center
.is_visible
@@ -173,50 +168,61 @@ table
.pull_right
float: right
// button hover
.button--primary
color: $ruby
.button--animated
transition-duration: 1s
transition-property: color
&:before
position: absolute
top: 0
right: 0
bottom: 0
left: 0
z-index: -1
background: $ruby
content: ''
transition-timing-function: ease-out
transition-duration: .5s
transition-property: transform
transform: scaleX(0)
transform-origin: 0 50%
&:hover
&:before
transition-timing-function: cubic-bezier(.45, 1.64, .47, .66)
transform: scaleX(1)
// third-party
.fireworks
position: fixed
z-index: -1
z-index: 99999
pointer-events: none
.fireworks
z-index: 99999
@media screen and (max-width: $bg)
i#toggle-sidebar,
#sidebar
display: none
body
padding-left: 0 !important
// 懶加載
.lazyload,
.lazyloading
opacity: 0
.lazyloaded
opacity: 1
transition: opacity 0.3s
img[src=""],img:not([src])
img[src=''],
img:not([src])
opacity: 0
.justified-gallery
margin: 1rem 0
img
opacity 0
.fancybox
img
opacity: 0
.fancybox
width: auto
text-align: inherit
text-align: inherit
.img-alt
display: none
.medium-zoom-image--opened
margin: 0 !important
z-index: 99999 !important
margin: 0 !important
.medium-zoom-overlay
z-index: 99999 !important
@@ -224,19 +230,18 @@ img[src=""],img:not([src])
// hexo tag video
.video-container
position: relative
overflow: hidden
margin-bottom: .8rem
padding-top: 56.25%
height: 0
overflow: hidden
margin-bottom: 0.8rem
iframe
position: absolute
top: 0
left: 0
margin-top: 0
width: 100%
height: 100%
margin-top: 0
.layout_page,
.layout_post,
@@ -255,60 +260,63 @@ canvas,
animation: to_show 4s
.card-announcement-animation
animation: announ_animation .8s linear infinite
color: #FF0000
animation: announ_animation .8s linear infinite
.scroll-down-effects
animation: scroll-down-effect 1.5s infinite
if hexo-config("avatar_effect") == true
.avatar_img
if hexo-config('avatar_effect') == true
.avatar-img
animation: avatar_turn_around 2s linear infinite
.reward-main
animation: donate_effcet .3s .1s ease both
#rightside-config-hide
animation: rightside_in_animate .3s
@keyframes scroll-down-effect
0%
opacity: 0.4
top: 0
opacity: .4
50%
opacity: 1
top: -16px
opacity: 1
100%
opacity: 0.4
top: 0
@keyframes header
0%
opacity: .4
@keyframes header
0%
opacity: 0
transform: translateY(-50px)
100%
100%
opacity: 1
transform: translateY(0)
@keyframes headerNoOpacity
0%
0%
transform: translateY(-50px)
100%
100%
transform: translateY(0)
@keyframes main
0%
0%
opacity: 0
transform: translateY(50px)
100%
100%
opacity: 1
transform: translateY(0)
@keyframes titlescale
0%
opacity: 0
transform: scale(0.7)
100%
transform: scale(.7)
100%
opacity: 1
transform: scale(1)
@@ -316,19 +324,22 @@ if hexo-config("avatar_effect") == true
0%
opacity: 1
transform: scale(1)
100%
100%
opacity: 0
transform: scale(0.7)
transform: scale(.7)
@keyframes to_show
0%
opacity: 0
100%
opacity: 1
@keyframes avatar_turn_around
from
transform: rotate(0deg)
transform: rotate(0)
to
transform: rotate(360deg)
@@ -336,6 +347,7 @@ if hexo-config("avatar_effect") == true
0%
opacity: 0
transform: translateY(10px)
100%
opacity: 1
transform: translateY(0)
@@ -344,31 +356,23 @@ if hexo-config("avatar_effect") == true
0%
opacity: 0
transform: translateY(-20px)
100%
opacity: 1
transform: translateY(0)
@keyframes announ_animation
0%,to
0%,
to
transform: scale(1)
50%
transform: scale(1.2)
@keyframes rightside_in_animate
0%
transform: translateX(28px)
100%
transform: translateX(0)
@media screen and (max-width: $bg)
i#toggle-sidebar,
#sidebar
display: none
@keyframes rightside_out_animate
0%
transform: translateX(0)
100%
transform: translateX(28px)
@keyframes right_to_left
0%
transform: translateX(100px)
100%
transform: translateX(0)
body
padding-left: 0 !important

94
source/css/_highlight/highlight.styl
View File

@@ -1,14 +1,13 @@
// https://github.com/equinusocio/vsc-material-theme
@require "theme"
@require "diff"
@require 'theme'
@require 'diff'
wordWrap = !hexo-config("rootConfig.highlight.line_number") && hexo-config("code_word_wrap")
wordWrap = !hexo-config('rootConfig.highlight.line_number') && hexo-config('code_word_wrap')
$code-block
overflow: auto
margin: 1rem 0
margin: 0 0 1rem
padding: 0
padding-top: 1.4rem
background: $highlight-background
color: $highlight-foreground
font-size: $code-font-size
@@ -18,26 +17,34 @@ $code-block
counter-reset: line
white-space: pre-wrap
.code-area-wrap
position: relative
margin: 0 0 1rem
figure.highlight
position: relative
blockquote
margin: 0
padding: 0.1rem 0.8rem
border-left: 0.2rem solid $blockquote-padding-color
margin: 0 0 1rem
padding: .1rem .8rem
border-left: .2rem solid $blockquote-padding-color
background-color: lighten($blockquote-padding-color, 33)
color: $blockquote-color
background-color: lighten($blockquote-padding-color,33)
a
word-break: break-all
p
margin: 0 !important
padding: 0.5rem 0
padding: .5rem 0
footer
padding: 0 0 0.5rem 0
cite
padding: 0 0 .5rem
cite
&:before
content: "—"
padding: 0 .3em
content: '—'
.article-container
pre,
@@ -45,7 +52,7 @@ blockquote
font-family: $code-font !important
code
padding: 0.1rem 0.2rem
padding: .1rem .2rem
background: $code-background
color: $code-foreground
word-wrap: break-word
@@ -53,6 +60,7 @@ blockquote
pre
@extend $code-block
padding: 10px 20px
code
padding: 0
@@ -60,21 +68,14 @@ blockquote
color: $highlight-foreground
text-shadow: none
figure.highlight
&:after
position: absolute
top: 0
z-index: 0
min-width: 100%
height: 1.4rem
background: darken($highlight-background, 5)
content: ""
.highlight
@extend $code-block
position: relative
border-radius: 1px
if hexo-config('highlight_shrink') == true
display: none
pre
margin: 0
padding: 8px 0
@@ -88,31 +89,22 @@ blockquote
if wordWrap
&:before
display: inline-block
padding: 0 0.3rem 0 0
padding: 0 .3rem 0 0
min-width: 1.6rem
color: $highlight-gutter.color
content: counter(line)
counter-increment: line
text-align: left
&.marked
background-color: $highlight-selection
table
position: relative
margin: 0
width: auto
border: none
if hexo-config('highlight_shrink') == true
display: none
&:after
position: absolute
top: -1.4rem
z-index: 0
width: 100%
height: 1.4rem
background: darken($highlight-background, 5)
content: ""
td
padding: 0
border: none
@@ -122,7 +114,7 @@ blockquote
position: absolute
z-index: 1
margin-bottom: 1em
padding: 0.2em 0 0.2em 0.7rem
padding: .2rem 0 .2rem .7rem
width: 100%
height: 1.4em
color: $highlight-foreground
@@ -145,7 +137,7 @@ blockquote
border-bottom-color: $highlight-foreground
&+table
margin-top: 1em
margin-top: 1.1rem
&:before
margin-top: -2.1rem
@@ -154,15 +146,15 @@ blockquote
top: -2.1rem
.gutter pre
padding-right: 0.5rem
padding-left: 0.5rem
padding-right: .5rem
padding-left: .5rem
background-color: $highlight-gutter.bg-color
color: $highlight-gutter.color
text-align: right
.code pre
padding-right: 0.5rem
padding-left: 0.5rem
padding-right: .5rem
padding-left: .5rem
width: 100%
background-color: $highlight-background
@@ -289,4 +281,18 @@ blockquote
&::selection
background: $highlight-selection
color: $highlight-foreground
color: $highlight-foreground
.highlight-tools
position: relative
width: 100%
height: 1.4rem
background: darken($highlight-background, 5)
color: $highlight-foreground
font-size: 14px
& + figure
margin: 0 !important
.highlight-close
height: 0 !important

12
source/css/_highlight/theme.styl
View File

@@ -1,6 +1,6 @@
$highlight_theme = hexo-config("highlight_theme")
$highlight_theme = hexo-config('highlight_theme')
if $highlight_theme == "default"
if $highlight_theme == 'default'
$highlight-background = #263238
$highlight-current-line = #efefef
$highlight-selection = #80CBC420
@@ -18,7 +18,7 @@ if $highlight_theme == "default"
bg-color: $highlight-background
}
if $highlight_theme == "darker"
if $highlight_theme == 'darker'
$highlight-background = #212121
$highlight-current-line = #282a2e
$highlight-selection = #61616150
@@ -36,7 +36,7 @@ if $highlight_theme == "darker"
bg-color: $highlight-background
}
if $highlight_theme == "pale night"
if $highlight_theme == 'pale night'
$highlight-background = #292D3E
$highlight-current-line = #393939
$highlight-selection = #717CB450
@@ -54,7 +54,7 @@ if $highlight_theme == "pale night"
bg-color: $highlight-background
}
if $highlight_theme == "ocean"
if $highlight_theme == 'ocean'
$highlight-background = #0F111A
$highlight-current-line = #000000
$highlight-selection = #717CB450
@@ -72,7 +72,7 @@ if $highlight_theme == "ocean"
bg-color: $highlight-background
}
if $highlight_theme == "light"
if $highlight_theme == 'light'
$highlight-background = #F6F8FA
$highlight-current-line = #00346e
$highlight-selection = #80CBC440

340
source/css/_layout/aside.styl
View File

@@ -1,26 +1,25 @@
#aside_content
width: 25%
.card_widget
-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
transition: all .3s
background: #fff
margin-top: 20px
.card-widget
overflow: hidden
margin-top: 20px
border-radius: 8px
background: $white
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,0.15)
box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
.card-author
.card-info
img
height: 120px
width: 120px
padding: 0
display: inline-block
vertical-align: top
padding: 5px
width: 120px
height: 120px
border-radius: 70px
vertical-align: top
transition: all .3s
&:hover
@@ -28,254 +27,199 @@
.author-info
&__name
font-size: 1.1rem
display: block
margin: -0.1rem auto
font-weight: 500
font-size: 1.1rem
&__description
display: block
margin: -0.1rem auto
margin-top: -.3rem
.data_link
a
text-decoration: none
.card-info-data
display: flex
padding: .7rem 0
.length_num
font-size: 1rem
color: #000
& > .card-info-data-item
flex: 1 1
min-width: 0
.headline
display: block
font-size: 0.7rem
margin-bottom: -21px
text-transform: uppercase
color:$font-black
a
text-decoration: none
#aside-social-icons
margin: 0.5rem auto -0.7rem
width: 15rem
text-align: center
.headline
display: block
overflow: hidden
color: $font-black
text-transform: uppercase
text-overflow: ellipsis
white-space: nowrap
font-size: .7rem
.social-icon
margin: 0 0.5rem
.length_num
color: $dark-black
font-size: 1rem
.card-info-social-icons
margin: .3rem 0 -.3rem
.social-icon
margin: 0 .5rem
color: $font-black
font-size: 1rem
cursor: pointer
i
transition: all 0.3s
transition: all .3s
&:hover
transform: rotate(540deg)
#bookmark-it
margin-top: .2rem
height: 1.6rem
background-color: $light-blue
color: #fff
text-decoration: none
line-height: 1.6rem
position: relative
text-transform: uppercase
z-index: 1
display: block
background-color: $light-blue
color: $white
text-decoration: none
text-transform: uppercase
line-height: 1.6rem
span
padding-left: 10px
padding-left: .5rem
.bookmark--primary
color: $ruby
.bookmark--animated
transition-property: color
transition-duration: 1s
&:before
content: ""
position: absolute
top: 0
left: 0
right: 0
bottom: 0
background: $ruby
transform: scaleX(0)
transform-origin: 0 50%
transition-property: transform
transition-duration: 0.5s
transition-timing-function: ease-out
z-index: -1
&:hover
color: white
&:before
transform: scaleX(1)
transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66)
.card-content
.card-content
padding: 1rem 1.2rem
.post_data
display: flex
.data-item
flex-grow: 1
align-items: center
flex-basis: auto
justify-content: center
.item-headline
font-size: .8rem
.item_headline
font-size: 0.8rem
span
margin-left: 10px
span
margin-left: .5rem
.card-tag-cloud
.card-tag-cloud
a
text-decoration: none
position: relative
padding-bottom: 0.3rem
word-break: keep-all
&:hover
color: $light-blue !important
// &::after
// width: 100%
.card-recent-post
.aside-recent-item
margin: 10px 0 -15px
.aside_recent_item
margin: 10px 0 -15px 0
.aside_recent_post
a
text-decoration: none
color: $font-black
& > .aside-recent-post
margin-bottom: 10px
.aside_recent_post
margin-bottom: 10px
width: 100%
& > a
color: $font-black
text-decoration: none
.aside_post_cover
height: 66px
width: 66px
float: left
overflow: hidden
.aside-post-cover
float: left
overflow: hidden
width: 66px
height: 66px
.aside_post_bg
object-fit: cover
width: 100%
height: 100%
max-width: 100%
padding: 0
transition: all .6s
.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_title
.aside_post_meta
font-size: 0.6rem
padding-left: 10px
color: #99a9bf
&:hover
box-shadow: none
transform: scale(1.1)
.aside_post_title
line-height: 1rem
display: -webkit-box
-webkit-line-clamp: 2
-webkit-box-orient: vertical
overflow: hidden
height: 40px
padding-left: 10px
.aside-post-title
.aside-post_meta
padding-left: 10px
color: $theme-link-color
font-size: .6rem
&:hover
color: $light-blue !important
.aside-post_title
display: -webkit-box
overflow: hidden
padding-left: 10px
height: 40px
line-height: 1rem
-webkit-line-clamp: 2
-webkit-box-orient: vertical
.aside_category_item,.archive-list
&:hover
color: $light-blue !important
.card-archives ul.archive-list,
.card-categories ul.aside-category-item
margin: 0
padding: .2rem 0 0
list-style: none
margin-bottom: -3px
margin-block-start: 0.2rem
.aside_category_item.child
margin-bottom: -3px
margin-block-start: 0rem
.aside_category_list
margin-left: -50px
.aside_category_list,.archive-list-item
margin-left: -40px
.card-archives ul.archive-list > .archive-list-item,
.card-categories ul.aside-category-item > .aside-category-list
padding: .2rem 1rem
cursor: pointer
transition: all .3s
&:hover
padding: .2rem .85rem
background-color: $light-blue
color: #363636
a
text-decoration: none
display: flex
color: $font-black
padding: 0.2rem 1rem
transition: .2s
text-decoration: none
&:hover
padding: 0.2rem 0.85rem
.aside_category_list_name,.archive-list-link
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
flex: auto
span
&:first-child
flex: auto
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
.card-categories
.aside-category-item
&.child
padding: 0 0 0 1.2rem
.aside_category_list_link,.archive-list-item
display: flex
.aside_category_list_length,.archive-list-count
float: right
.card-archives
margin-bottom: 20px
.archive-list-link-more
justify-content: center
.card-webinfo
.webinfo
padding: 0.2rem 1rem
padding: .2rem 1rem
.webinfo_item
.webinfo-item
display: block
padding: 4px 0 0
.webinfo_article_name,
.webinfo_runtime_name,
.webinfo_site_uv_name,
.webinfo_site_name
display: inline-block
.webinfo_article_count,
.webinfo_runtime_count,
.webinfo_site_uv_count,
.webinfo_site_pv_count
float: right
display: inline-block
div
&:first-child
display: inline-block
@media screen and (max-width: 900px)
&:last-child
display: inline-block
float: right
@media screen and (max-width: 900px)
.layout_page
flex-direction: column
#recent-posts,#aside_content
#recent-posts,
#aside_content
width: 100% !important
.card_widget
margin-left: 0
margin-right: 0
@media screen and (min-width: 900px)
#aside_content
.card_widget
if hexo-config("aside.position") == "right"
margin-left: 15px
else
margin-right: 15px
@media screen and (min-width: 900px)
#aside_content
.card-widget
if hexo-config('aside.position') == 'right'
margin-left: 15px
else
margin-right: 15px
if hexo-config('aside_mobile') == false
@media screen and (max-width: $sm)
#aside_content
display: none
display: none

26
source/css/_layout/category.styl
View File

@@ -1,8 +1,8 @@
.category-content
ol,
ul
margin-top: 0.4rem
padding: 0 0 0 0.8rem
margin-top: .4rem
padding: 0 0 0 .8rem
list-style: none
counter-reset: li
@@ -11,12 +11,12 @@
ol,
ul
padding-left: 0.5rem
padding-left: .5rem
li
position: relative
margin: 0.3rem 0
padding: 0.1rem 0.5rem 0.1rem 1.5rem !important
margin: .3rem 0
padding: .1rem .5rem .1rem 1.5rem !important
&:hover
&:before
@@ -29,19 +29,19 @@
background: $light-blue
color: $white
cursor: pointer
transition: all 0.3s ease-out
transition: all .3s ease-out
ol
li
&:before
margin-top: 0.2rem
margin-top: .2rem
width: w = 1.2rem
height: h = w
border-radius: 0.5 * w
border-radius: .5 * w
content: counter(li)
counter-increment: li
text-align: center
font-size: 0.6rem
font-size: .6rem
line-height: h
ul
@@ -51,13 +51,13 @@
border-color: $ruby
&:before
$w = 0.3rem
$w = .3rem
top: 10px
margin-left: 0.45rem
margin-left: .45rem
width: w = $w
height: h = w
border: 0.5 * w solid $light-blue
border: .5 * w solid $light-blue
border-radius: w
background: $white
content: ""
content: ''
line-height: h

56
source/css/_layout/comments.styl
View File

@@ -2,65 +2,67 @@
margin-top: 1rem
.comment_headling
font-size: 20px
font-weight: 700
margin-bottom: 10px
font-weight: 700
font-size: 20px
// valine
// valine
#vcomment
font-size: inherit
input
font-size: 0.65rem
button
font-size: .7rem
input
font-size: .65rem
button
padding: .3rem 1rem
border-color: #fff
background-color: $light-blue
color: #fff
border-color: #fff
font-size: .7rem
&: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
textarea
font-size: .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
.vcount
font-size: .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: 1px solid $cyan
border-radius: 5px
color: $cyan
font-size: .7125rem
&:hover
background-color: alpha($cyan,0.5)
code, pre
font-size: 98%
background-color: alpha($cyan, .5)
code,
pre
font-size: 98%

193
source/css/_layout/flink.styl
View File

@@ -1,122 +1,91 @@
.flink
.md-links
min-height: calc(100% - 120px - 5pc - 6em)
text-align: center
overflow: auto
padding: 0
margin: 0 auto
.post-cards
margin: -10px 10px 0
a
color: #333
text-decoration: none
li
width: calc(100%/3 - 14px)
float: left
list-style: none
.md-links-item
height: 90px
line-height: 17px
margin: 20px 7px
padding: 0px 0px
transition: box-shadow 0.25s
text-overflow: ellipsis
overflow: hidden
border-radius: 8px
transform: perspective(1px) translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
position: relative
transition-property: color
transition-duration: 0.3s
img
float: left
border-radius: 35px
margin: 11px 10px
width: 70px
height: 70px
border: 0px solid #eaeefb
transition: all .3s
&:hover
img
filter: unqoute("progid:DXImageTransform.Microsoft.BasicImage(rotation=3)")
transform: rotate(540deg)
&:before
content: ""
position: absolute
z-index: -1
top: 0
left: 0
right: 0
bottom: 0
background: $light-blue !important
transform: scale(0)
transition-property: transform
transition-duration: 0.3s
transition-timing-function: ease-out
.md-links
overflow: auto
margin: 0 auto
padding: 0
text-align: center
.md-links-item:hover,
.md-links-item:focus,
.md-links-item:active
color: white
& > .md-links-item
position: relative
float: left
overflow: hidden
margin: 20px 7px
padding: 0
width: calc(100% / 3 - 14px)
height: 90px
border-radius: 8px
list-style: none
line-height: 17px
transform: perspective(1px) translateZ(0)
.md-links-item:hover:before,
.md-links-item:focus:before,
.md-links-item:active:before
-webkit-transform: scale(1)
transform: scale(1)
.md-links-item a:hover
cursor: pointer
.md-links-title
padding-top: 16px
padding-right: 10px
font-size: 20px
font-weight: bold
height:40px
overflow: hidden
white-space: nowrap
text-overflow: ellipsis
&:hover
img
transform: rotate(540deg)
&:before
position: absolute
top: 0
right: 0
bottom: 0
left: 0
z-index: -1
background: $light-blue
content: ''
transition-timing-function: ease-out
transition-duration: .3s
transition-property: transform
transform: scale(0)
&:hover:before,
&:focus:before,
&:active:before
transform: scale(1)
a
color: #333
text-decoration: none
img
float: left
margin: 11px 10px
padding: 4px
width: 70px
height: 70px
border-radius: 35px
transition: all .3s
.md-links-title
overflow: hidden
padding: 16px 10px 0 0
height: 40px
text-overflow: ellipsis
white-space: nowrap
font-weight: bold
font-size: 20px
.md-links-des
overflow: hidden
padding: 16px 10px
height: 50px
text-overflow: ellipsis
white-space: nowrap
font-size: 13px
.post-cards
margin-top: 5px
min-height: 100px
padding: 0 15px
border-radius: 15px
.comment-word
font-weight:bold
font-size:1.7em
.md-links-des
padding: 16px 10px
font-size:13px
overflow: hidden
height:50px
white-space: nowrap
text-overflow: ellipsis
font-weight: bold
font-size: 1.7em
@media screen and (max-width:1100px)
@media screen and (max-width: 1100px)
.flink
.post-cards
position: relative
margin: -20px -16px 0
border-radius: 18px
padding: 16px
.md-links
li
width: calc(100%/2 - 14px)
.md-links
.md-links-item
width: calc(50% - 14px) !important
@media screen and (max-width:600px)
@media screen and (max-width: 600px)
.flink
.md-links
li
width: calc(100%/1 - 14px)
.md-links
.md-links-item
width: calc(100% - 14px) !important

15
source/css/_layout/footer.styl
View File

@@ -1,28 +1,26 @@
#footer
position: relative
margin-top: 1rem
background: $light-blue
background-attachment: local
background-position: bottom
background-size: cover
position: relative
if hexo-config('footer_bg') != false
&:before
position: absolute
top: 0
right: 0
bottom: 0
left: 0
display: block
background-color: alpha($dark-black, .5)
content: ''
width: 100%
height: 100%
background-color: alpha($dark-black,0.5)
#footer-wrap
position: relative
padding: 2rem 1rem
color: $light-grey
text-align: center
position: relative
a
color: $light-grey
@@ -33,9 +31,8 @@
color: $white
.footer-separator
margin: 0 0.2rem
margin: 0 .2rem
.icp-icon
padding: 0 4px
vertical-align: text-bottom

179
source/css/_layout/head.styl
View File

@@ -1,31 +1,30 @@
#nav
position: relative
margin-bottom: 1rem
width: 100%
background-color: $light-blue
background-attachment: local
background-position: center
background-size: cover
&.full_page
display: flex
align-items: center
height: $index_top_img_height
.nav_bg
width: 100%
height: 100%
background-color: $light-blue
background-position: center
background-size: cover
background-attachment: local
&.not_index_bg
height: 20rem
#site-social-icons
display: none
margin: 0 auto
width: 15rem
text-align: center
display: none
.social-icon
margin: 0 0.5rem
margin: 0 .5rem
color: $light-grey
text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
font-size: .9rem
cursor: pointer
@@ -35,13 +34,12 @@
#site-info
position: absolute
width: 100%
top: $index_site_info_top
#site-title,
#site-sub-title
color: $light-grey
text-align: center
text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
line-height: 1.5
#site-title
@@ -49,7 +47,7 @@
font-size: 1.3rem
#site-sub-title
font-size: 0.8rem
font-size: .8rem
#page_site-info
position: absolute
@@ -60,16 +58,16 @@
position: absolute
bottom: 0
width: 100%
cursor: pointer
height: 42px
font-size: 30px
text-align: center
font-size: 30px
cursor: pointer
.scroll-down-effects
position: absolute
color: $white
#header
header
position: relative
#page-header
@@ -78,20 +76,23 @@
z-index: 99
padding: 10px 36px
width: 100%
height: 58px
border: none
font-size: 18px
transition: all .3s
opacity: 0
transition: all .5s
.toggle-menu
display: none
padding-top: 0.6rem
color: $light-grey
cursor: pointer
padding: .1rem 0 0 .3rem
&:hover
color: $white
&.is_visible
.site-page
font-size: inherit
a
color: $light-grey
text-decoration: none
@@ -103,9 +104,9 @@
position: fixed
top: -60px
z-index: 101
background: alpha($white, 0.8)
box-shadow: 0 5px 6px -5px alpha($grey, 0.6)
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out
background: alpha($white, .8)
box-shadow: 0 5px 6px -5px alpha($grey, .6)
transition: transform .2s ease-in-out, opacity .2s ease-in-out
&.open-sidebar
.site-page
@@ -118,118 +119,106 @@
text-shadow: none
&:hover
color: $light-blue
color: $light-blue
&.visible
transition: all .5s
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)
text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
font-weight: bold
cursor: pointer
.menus_item
position: relative
display: inline-block
padding: 0 0 0 0.7rem
padding: 0 0 0 .7rem
&:hover,&:focus
&:hover
.menus_item_child
display: block
.menus-expand
transform: rotate(180deg) !important
.menus-expand
padding: 4px
transform: rotate(0deg)
padding: 4px
transition: all .3s
transform: rotate(0)
& > a
&:after
position: absolute
bottom: 0
left: 0
z-index: -1
width: 0
height: 3px
background-color: lighten($theme-color, 30%)
content: ''
transition: all .3s ease-in-out
&:hover
&::after
width: 100%
.menus_item_child
position: absolute
background-color: alpha($white, 0.8)
border-radius: 5px
box-shadow: 0 5px 20px -4px rgba(0,0,0,.5)
right: 0
display: none
opacity: 1
animation: sub_menus .3s .1s ease both
margin-top: 8px
padding: 0
margin-top: 10px
width: max-content
background-color: alpha($white, .8)
box-shadow: 0 5px 20px -4px rgba(0, 0, 0, .5)
animation: sub_menus .3s .1s ease both
&:before
content: ""
position: absolute
top: -20px
left: 50%
margin-left: -10px
border-width: 10px
border-style: solid
border-color: transparent transparent alpha($white, 0.8)
top: -8px
left: 0
width: 100%
height: 20px
content: ''
li
padding: 1px 10px
list-style: none
text-align: center
padding: 0px 10px
&:first-child
padding: 6px 10px 0
&:last-child
padding: 0px 10px 6px
&:hover
a,i
color: $theme-color
background: $theme-color
a
color: #3b3a3a
text-shadow: none
#search_button
padding: 0 0 0 0.7rem
.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
#search_button
padding: 0 0 0 .7rem
#page-header .menus_item > .site-page
&::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
.site-page
position: relative
padding-bottom: .3rem
text-shadow: .05rem .05rem .1rem rgba(0, 0, 0, .3)
font-size: .7rem
cursor: pointer
&:hover
&::after
width: 100%
@media screen and (min-width: $sm)
@media screen and (min-width: $sm)
#site-title
font-size: 2rem
#site-sub-title
font-size: 1.2rem
@media screen and (max-width: $sm)
#page-header
padding: 10px 0.8rem
#nav
padding: 10px .8rem
#nav
#site-social-icons
display: block
@@ -238,19 +227,7 @@
#page_site-info
top: 7rem
#top-container
height: 14rem
#post-info
bottom: 1rem
padding: 0 5%
.mobile_hidden
display: none
@media screen and (max-width: $bg)
#page-header
&.fixed

166
source/css/_layout/mobile-sidebar.styl
View File

@@ -2,43 +2,39 @@
#menu_mask
position: fixed
top: 0
bottom: 0
width: 100%
height: 110vh
left: 0
right: 0
background: alpha($black,0.7)
bottom: 0
left: 0
z-index: 102
display: none
background: alpha($dark-black, .7)
#mobile-sidebar-menus,#mobile-sidebar-toc
#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: transform .3s
opacity: 0
will-change: transform
overflow-y: scroll
width: 250px
height: 100%
background: $white
box-shadow: 0 0 4px alpha($dark-black, .27)
transition: all .5s
#mobile-sidebar-menus
.mobile_author_icon
& > .mobile_author_icon
padding: 1.3rem 1.5rem 0
text-align: center
img
height: 120px
width: 120px
padding: 0
display: inline-block
vertical-align: top
padding: 0
width: 120px
height: 120px
border-radius: 70px
vertical-align: top
transition: all .3s
.mobile_post_data
@@ -49,126 +45,86 @@
.mobile_data_item
flex: 1
.mobile_data_link
.mobile_data_link
a
text-decoration: none
.length_num
font-size: .9rem
.length_num
color: $dark-black
font-size: .9rem
.headline
.headline
display: block
font-size: 0.7rem
color: $font-black
text-transform: uppercase
color:$font-black
hr
font-size: .7rem
hr
margin: 1rem auto
.menus_items
padding: 0 .5rem
margin-bottom: 5rem
padding: 0 .5rem
a
display: block !important
opacity: 1 !important
.site-page
position: relative
z-index: 0
display: block
overflow: hidden
margin: 0
padding: .3rem 1.5rem
color: $font-black
text-shadow: none
font-size: 0.8rem
z-index: 0
text-decoration: none
text-overflow: ellipsis
overflow: hidden
white-space: nowrap
text-shadow: none
white-space: nowrap
font-size: .8rem
cursor: pointer
i
width: 30%
text-align: left
text-align: left
span
width 70%
width: 70%
&:hover
color: $light-blue
.menus-expand
position: absolute
right: 0
padding: 6px
width: 30px !important
height: 30px
right: 0
padding: 6px
transform: rotate(0deg)
transition: all .3s
transform: rotate(0)
&.menus-closed
transform: rotate(180deg) !important
transition: all .3s
transform: rotate(180deg) !important
.menus_item_child
list-style: none
margin: 0
#mobile-sidebar-toc
padding: 1rem 0.5rem 5rem 0.3rem
list-style: none
ol,li
list-style: none
padding: 0 0 0 8px
#mobile-sidebar-toc
padding: 1rem .5rem 5rem .3rem
ol,
li
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
padding-left: 0 !important
#mobile-sidebar
#mobile-sidebar-menus
transform: translateX(-254px)
opacity: 1
// pc界面打開mobile-menus需關閉sidebar
#sidebar
left: -300px !important
.open-mobile-toc
#mobile-sidebar
#mobile-sidebar-toc
transform: translateX(-254px)
opacity: 1
@media screen and (max-width: $sm)
#mobile-sidebar-menus
display: block !important
@media screen and (max-width: $bg)
#mobile-sidebar-toc
display: block !important
padding: 0 0 0 8px
list-style: none
.toc_mobile_headline
text-align: center
font-weight: bold
font-size: 18px
.toc_mobile_items-link
color: $font-color
text-decoration: none
&:hover
color: $light-blue

294
source/css/_layout/note.styl
View File

@@ -1,256 +1,282 @@
.note
.note
$note-icons = hexo-config('note.icons')
$note-style = hexo-config('note.style')
margin: 10px 0
padding: 15px
position: relative
margin: 0 0 1rem
padding: 15px
if ($note-style == 'simple')
if ($note-style == 'simple')
border: 1px solid $light-grey
border-left-width: 5px
if ($note-style == 'modern')
background-color: $whitesmoke
if ($note-style == 'modern')
border: 1px solid transparent
background-color: $whitesmoke
if ($note-style == 'flat')
background-color: lighten($light-grey, 65%)
if ($note-style == 'flat')
border: initial
border-left: 5px solid $light-grey
background-color: lighten($light-grey, 65%)
if (hexo-config('note.border_radius') is a 'unit')
if hexo-config('note.border_radius') is a 'unit'
border-radius: unit(hexo-config('note.border_radius'), px)
h2, h3, h4, h5, h6
if ($note-icons)
h2,
h3,
h4,
h5,
h6
if $note-icons
margin-top: 3px
else
else
margin-top: 0
border-bottom: initial
margin-bottom: 0
padding-top: 0 !important
border-bottom: initial
p, ul, ol, table, pre, blockquote, img
&:first-child
p,
ul,
ol,
table,
pre,
blockquote,
img
&:first-child
margin-top: 0 !important
&:last-child
&:last-child
margin-bottom: 0 !important
if ($note-icons)
&:not(.no-icon)
if $note-icons
&:not(.no-icon)
padding-left: 45px
&::before
font-family: 'FontAwesome'
font-size: larger
left: 15px
&::before
position: absolute
top: 13px
&.default
if ($note-style == 'flat')
background-color: $note-default-bg
left: 15px
font-size: larger
font-family: 'FontAwesome'
if ($note-style == 'modern')
background-color: $note-modern-default-bg
&.default
if ($note-style == 'flat')
background-color: $note-default-bg
if ($note-style == 'modern')
border-color: $note-modern-default-border
background-color: $note-modern-default-bg
color: $note-modern-default-text
a, span.exturl
&:not(.btn)
a,
span.exturl
&:not(.btn)
border-bottom: 1px solid $note-modern-default-text
color: $note-modern-default-text
&:hover
&:hover
border-bottom: 1px solid $note-modern-default-hover
color: $note-modern-default-hover
if ($note-style != 'modern')
if ($note-style != 'modern')
border-left-color: $note-default-border
h2, h3, h4, h5, h6
h2,
h3,
h4,
h5,
h6
color: $note-default-text
if ($note-icons)
&:not(.no-icon)
&::before
if $note-icons
&:not(.no-icon)
&::before
content: $note-default-icon
if ($note-style != 'modern')
if ($note-style != 'modern')
color: $note-default-text
&.primary
if ($note-style == 'flat')
&.primary
if ($note-style == 'flat')
background-color: $note-primary-bg
if ($note-style == 'modern')
background-color: $note-modern-primary-bg
if ($note-style == 'modern')
border-color: $note-modern-primary-border
background-color: $note-modern-primary-bg
color: $note-modern-primary-text
a, span.exturl
&:not(.btn)
a,
span.exturl
&:not(.btn)
border-bottom: 1px solid $note-modern-primary-text
color: $note-modern-primary-text
&:hover
&:hover
border-bottom: 1px solid $note-modern-primary-hover
color: $note-modern-primary-hover
if ($note-style != 'modern')
if ($note-style != 'modern')
border-left-color: $note-primary-border
h2, h3, h4, h5, h6
h2,
h3,
h4,
h5,
h6
color: $note-primary-text
if ($note-icons)
&:not(.no-icon)
&::before
if $note-icons
&:not(.no-icon)
&::before
content: $note-primary-icon
if ($note-style != 'modern')
if ($note-style != 'modern')
color: $note-primary-text
&.info
if ($note-style == 'flat')
background-color: $note-info-bg
if ($note-style == 'modern')
background-color: $note-modern-info-bg
&.info
if ($note-style == 'flat')
background-color: $note-info-bg
if ($note-style == 'modern')
border-color: $note-modern-info-border
background-color: $note-modern-info-bg
color: $note-modern-info-text
a, span.exturl
&:not(.btn)
a,
span.exturl
&:not(.btn)
border-bottom: 1px solid $note-modern-info-text
color: $note-modern-info-text
&:hover
&:hover
border-bottom: 1px solid $note-modern-info-hover
color: $note-modern-info-hover
if ($note-style != 'modern')
if ($note-style != 'modern')
border-left-color: $note-info-border
h2, h3, h4, h5, h6
h2,
h3,
h4,
h5,
h6
color: $note-info-text
if ($note-icons)
&:not(.no-icon)
&::before
if $note-icons
&:not(.no-icon)
&::before
content: $note-info-icon
if ($note-style != 'modern')
if ($note-style != 'modern')
color: $note-info-text
&.success
if ($note-style == 'flat')
background-color: $note-success-bg
if ($note-style == 'modern')
background-color: $note-modern-success-bg
&.success
if ($note-style == 'flat')
background-color: $note-success-bg
if ($note-style == 'modern')
border-color: $note-modern-success-border
background-color: $note-modern-success-bg
color: $note-modern-success-text
a, span.exturl
&:not(.btn)
a,
span.exturl
&:not(.btn)
border-bottom: 1px solid $note-modern-success-text
color: $note-modern-success-text
&:hover
&:hover
border-bottom: 1px solid $note-modern-success-hover
color: $note-modern-success-hover
if ($note-style != 'modern')
if ($note-style != 'modern')
border-left-color: $note-success-border
h2, h3, h4, h5, h6
h2,
h3,
h4,
h5,
h6
color: $note-success-text
if ($note-icons)
&:not(.no-icon)
&::before
if $note-icons
&:not(.no-icon)
&::before
content: $note-success-icon
if ($note-style != 'modern')
if ($note-style != 'modern')
color: $note-success-text
&.warning
if ($note-style == 'flat')
background-color: $note-warning-bg
if ($note-style == 'modern')
background-color: $note-modern-warning-bg
&.warning
if ($note-style == 'flat')
background-color: $note-warning-bg
if ($note-style == 'modern')
border-color: $note-modern-warning-border
background-color: $note-modern-warning-bg
color: $note-modern-warning-text
a, span.exturl
&:not(.btn)
a,
span.exturl
&:not(.btn)
border-bottom: 1px solid $note-modern-warning-text
color: $note-modern-warning-text
&:hover
&:hover
border-bottom: 1px solid $note-modern-warning-hover
color: $note-modern-warning-hover
if ($note-style != 'modern')
if ($note-style != 'modern')
border-left-color: $note-warning-border
h2, h3, h4, h5, h6
h2,
h3,
h4,
h5,
h6
color: $note-warning-text
if ($note-icons)
&:not(.no-icon)
&::before
if $note-icons
&:not(.no-icon)
&::before
content: $note-warning-icon
if ($note-style != 'modern')
if ($note-style != 'modern')
color: $note-warning-text
&.danger
if ($note-style == 'flat')
background-color: $note-danger-bg
if ($note-style == 'modern')
background-color: $note-modern-danger-bg
&.danger
if ($note-style == 'flat')
background-color: $note-danger-bg
if ($note-style == 'modern')
border-color: $note-modern-danger-border
background-color: $note-modern-danger-bg
color: $note-modern-danger-text
a, span.exturl
&:not(.btn)
a,
span.exturl
&:not(.btn)
border-bottom: 1px solid $note-modern-danger-text
color: $note-modern-danger-text
&:hover
&:hover
border-bottom: 1px solid $note-modern-danger-hover
color: $note-modern-danger-hover
if ($note-style != 'modern')
if ($note-style != 'modern')
border-left-color: $note-danger-border
h2, h3, h4, h5, h6
h2,
h3,
h4,
h5,
h6
color: $note-danger-text
if ($note-icons)
&:not(.no-icon)
&::before
if $note-icons
&:not(.no-icon)
&::before
content: $note-danger-icon
if ($note-style != 'modern')
if ($note-style != 'modern')
color: $note-danger-text

332
source/css/_layout/page.styl
View File

@@ -1,122 +1,134 @@
.layout_page
display: flex
margin: 0 auto
max-width: 1200px
display: flex
align-items: flex-start
margin: 0 auto
padding: 0 15px
max-width: 1200px
//index
// index
#recent-posts
width: 75%
.recent-post-item
padding: 0
box-shadow: 0 4px 8px 6px rgba(7,17,27,0.06)
border-radius: 8px
transition: all 0.3s
background: #fff
& > .recent-post-item
display: flex
flex-direction: row
align-items: center
margin-top: 20px
padding: 0
height: 280px
border-radius: 8px
background: #fff
box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
transition: all .3s
&: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)
&:hover
box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
img.post_bg
transform:scale(1.1)
.left_radius
border-top-left-radius: 8px
border-bottom-left-radius: 8px
transform: scale(1.1)
.right_radius
border-top-right-radius: 8px
border-bottom-right-radius: 8px
if hexo-config('index_post_cover') == 'both'
.left_radius
border-radius: 8px 0 0 8px
.post_cover
width: 45%
height: 280px
overflow: hidden
.right_radius
order: 2
border-radius: 0 8px 8px 0
else if hexo-config('index_post_cover') == 'left'
.left_radius
border-radius: 8px 0 0 8px
.post_bg
border: 0
transition: all .6s
display: block
width: 100%
height: 100%
padding: 0
margin: 0
object-fit: cover
.right_radius
border-radius: 8px 0 0 8px
else if hexo-config('index_post_cover') == 'right'
.left_radius
order: 2
border-radius: 0 8px 8px 0
&:hover
transform:scale(1.1)
.recent-post-info
padding: 50px 40px
display: inline-block
width: 55%
overflow hidden
.right_radius
order: 2
border-radius: 0 8px 8px 0
.post_cover
overflow: hidden
width: 45%
height: 280px
a.article-meta__categories
text-decoration: none
color: #858585
img.post_bg
display: block
margin: 0
padding: 0
width: 100%
height: 100%
border: 0
transition: all .6s
object-fit: cover
&:hover
color: #49b1f5 !important
&:hover
transform: scale(1.1)
.content
display: -webkit-box
-webkit-line-clamp: 3
-webkit-box-orient: vertical
overflow: hidden
height: 90px
margin-top: 0.5rem
word-break: break-word
& >.recent-post-info
display: inline-block
overflow: hidden
padding: 0 40px
width: 55%
.article-meta
color: $grey
& > .article-title
display: -webkit-box
overflow: hidden
margin-bottom: .3rem
color: $black
text-decoration: none
text-overflow: ellipsis
word-wrap: break-word
font-size: 1.2rem
line-height: 1.4
transition: all .2s ease-in-out
-webkit-box-orient: vertical
-webkit-line-clamp: 2
.sticky
color: $theme-button-hover-color
&:hover
color: $light-blue !important
i
margin: 0 0.2rem 0 0.3rem
& > time
color: $grey
&__separator
margin-left: 0.3rem
& > .article-meta
color: $grey
.fa-angle-right,
&__link
margin: 0 0 0 0.3rem
.sticky
color: $theme-button-hover-color
time
color: $grey
i
margin: 0 .2rem 0 .3rem
.article-title
margin-bottom: 0.3rem
color: $black
text-decoration: none
font-size: 1.2rem
cursor: pointer
transition: all 0.2s ease-in-out
line-height: 1.4
text-overflow: ellipsis
display: -webkit-box
-webkit-box-orient: vertical
-webkit-line-clamp: 2
overflow: hidden
word-wrap: break-word
.article-meta__separator
margin-left: .3rem
&:hover
color: $light-blue !important
.fa-angle-right
margin: 0 0 0 .3rem
a.article-meta__categories
color: #858585
text-decoration: none
&:hover
color: #49b1f5 !important
& > .content
display: -webkit-box
overflow: hidden
margin-top: .5rem
height: 90px
word-break: break-word
-webkit-line-clamp: 3
-webkit-box-orient: vertical
// tags page
.tag-cloud
padding: 40px 44px 44px
a
display: inline-block
margin: 0 0.4rem
padding: 0 .4rem
text-decoration: none
cursor: pointer
transition: all .3s
@@ -126,8 +138,8 @@
transform: scale(1.1)
&__title
font-size: 1.8rem
text-align: center
font-size: 1.8rem
&-tags
text-align: center
@@ -135,14 +147,14 @@
#tag,
#category,
#archive
padding: 3rem 3rem 3rem
padding: 3rem
.tag-cloud,
#page,
.category-content,
.flink
padding: 40px 44px 44px
#page,
.category-content,
#archive,
@@ -150,16 +162,15 @@
.flink,
#tag,
#category
box-shadow: 0 4px 8px 6px rgba(7,17,27,.06)
border-radius: 8px
transition: all .3s
background: #fff
margin-top: 20px
width: 75%
border-radius: 8px
background: $white
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,0.15)
box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
.article-sort
padding-left: 1rem
@@ -178,50 +189,50 @@
&:before
position: absolute
top: 0.25rem
left: calc(-0.5rem + 1px)
top: .25rem
left: calc(-.5rem + 1px)
z-index: 1
width: w = 0.5rem
width: w = .5rem
height: h = w
border: 0.5 * w solid $light-blue
border: .5 * w solid $light-blue
border-radius: w
background: $white
content: ""
content: ''
line-height: h
transition: all 0.2s ease-in-out
transition: all .2s ease-in-out
&:after
position: absolute
bottom: 0
left: 0
z-index: 0
width: 0.1rem
width: .1rem
height: 1.3rem
background: $pale-blue
content: ""
content: ''
&-item
position: relative
margin: 0 0 1rem 0.5rem
transition: all 0.2s ease-in-out
margin: 0 0 1rem .5rem
transition: all .2s ease-in-out
&:hover
&:before
border-color: $ruby
&:before
$w = 0.3rem
$w = .3rem
position: absolute
top: 1.8rem
left: calc(-1rem - 17px)
width: w = $w
height: h = w
border: 0.5 * w solid $light-blue
border: .5 * w solid $light-blue
border-radius: w
background: $white
content: ""
content: ''
line-height: h
transition: all 0.2s ease-in-out
transition: all .2s ease-in-out
&.year
font-size: 1rem
@@ -231,36 +242,36 @@
border-color: $light-blue
&:before
top: 0.7rem
top: .7rem
border-color: $ruby
&__time
padding-left: .4rem
color: $a-link-color
font-size: 0.7rem
padding-left: 0.4rem
font-size: .7rem
&__title
color: $font-black
font-size: 0.75rem
height: 60px
overflow: hidden
display: -webkit-box
overflow: hidden
height: 60px
color: $font-black
font-size: .75rem
transition: all .3s
-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
width: 100%
height: 100%
transition: all .6s
object-fit: cover
&:hover
transform: scale(1.1)
@@ -272,17 +283,16 @@
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
width: 80px
height: 80px
&-post
position: absolute
top: 0
display: inline-block
margin-left: 1rem
.category-lists
padding: 1rem 0 1.5rem
@@ -298,19 +308,19 @@
cursor: pointer
.category-list-count
margin-left: 0.4rem
margin-left: .4rem
color: $a-link-color
&:before
content: "("
content: '('
&:after
content: ")"
content: ')'
@media screen and (max-width: $sm)
.layout_page
padding: 0 5px !important
#page,
.category-content,
#archive,
@@ -318,39 +328,55 @@
.flink,
#tag,
#category
padding: 1.8rem 1.3rem
margin: 0
padding: 1.8rem 1.3rem
.category-lists
padding: 0
#recent-posts
#recent-posts
.recent-post-item
flex-direction: column
height: auto !important
.post_cover
width: 100%
height: 230px
.post_cover
order: 1 !important
width: 100%
height: 230px
border-radius: 8px 8px 0 0
.recent-post-info
padding: 30px 25px 18px!important
.recent-post-info
order: 2 !important
padding: 30px 25px 18px !important
width: 100%
.article-title
font-size: 1rem
.article-meta.tags
display: none
&:first-child
margin: 0
@media screen and (min-width: 900px)
if hexo-config("aside.position") == "left"
#recent-posts,#page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
@media screen and (min-width: 900px)
if hexo-config('aside.position') == 'left'
#recent-posts,
#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
width: 100% !important
@media screen and (max-width: 900px)
#page,
.category-content,
#archive,
.tag-cloud,
.flink,
#tag,
#category
width: 100% !important

95
source/css/_layout/pagination.styl
View File

@@ -5,12 +5,13 @@
.pagination
text-align: center
.space
color: $a-link-color
.page-number
display: inline-block
margin: 0 0.2rem
margin: 0 .2rem
min-width: w = 1.2rem
height: w
text-align: center
@@ -25,90 +26,76 @@
img.prev_cover,
img.next_cover
position: absolute
padding: 0
top: 0
left: 0
padding: 0
width: 100%
height: 100%
opacity: .4
background-size: cover
transition: all 0.6s;
object-fit: cover
opacity: .4
transition: all .6s
pointer-events: none
object-fit: cover
.prev_info
position: absolute
z-index: 100
font-weight: 400
width: 70%
color: #fff
overflow: hidden
white-space: nowrap
-o-text-overflow: ellipsis
text-overflow: ellipsis
display: block
bottom: 50px
.prev_info,
.next_info
position: absolute
z-index: 100
font-weight: 400
width: 70%
color: #fff
overflow: hidden
white-space: nowrap
-o-text-overflow: ellipsis
text-overflow: ellipsis
display: block
right: 40px
bottom: 50px
z-index: 100
display: block
overflow: hidden
width: 70%
color: $white
text-overflow: ellipsis
white-space: nowrap
font-weight: 400
.next_info
right: 40px
text-align: right
.pull-full
width: 100% !important
.prev-post .label
position: absolute
top: 50px
z-index: 100
font-size: 13px
display: block
text-transform: uppercase
color: rgba(255,255,255,.7)
.prev-post .label,
.next-post .label
position: absolute
top: 50px
right: 40px
z-index: 100
display: block
color: alpha($white, .9)
text-transform: uppercase
color: rgba(255,255,255,.7)
font-size: 90%
.prev-post, .next-post
width: 50%
.next-post .label
right: 40px
.prev-post,
.next-post
float: left
width: 50%
a
width: 100%
height: 150px
padding: 55px 40px
text-align: left
position: relative
display: block
float: left
overflow: hidden
padding: 55px 40px
width: 100%
height: 150px
text-align: left
&:hover
img.prev_cover, img.next_cover
img.prev_cover,
img.next_cover
opacity: .8
transform:scale(1.1)
transform: scale(1.1)
@media screen and (max-width:768px)
.prev-post, .next-post
width: 100% !important
.pagination_post
&.pagination_post
margin: 2rem 0 !important
background: #000
background: $dark-black
@media screen and (max-width: 768px)
.prev-post,
.next-post
width: 100% !important

494
source/css/_layout/post.styl
View File

@@ -1,119 +1,81 @@
if hexo-config("post_beautify.enable")
if hexo-config('post_beautify.enable')
headStyle(fontsize)
padding-left: unit(fontsize + 0.3, "rem")
code
font-size: unit(fontsize, "rem")
padding-left: unit(fontsize + .3, 'rem')
code
font-size: unit(fontsize, 'rem')
&:before
top: calc(50% - unit(fontsize / 2 - 0.05, "rem"))
font-size: unit(fontsize, "rem")
top: calc(50% - unit(fontsize / 2 - .05, 'rem'))
font-size: unit(fontsize, 'rem')
&:hover
padding-left: unit(fontsize + 0.2, "rem")
#post-title
font-size: 1.4rem
#post
overflow: hidden
&-meta
text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
#post-meta
color: $grey
a
text-decoration: none
i.fa.fa-comment-o
margin-right: 0.2rem
padding-left: unit(fontsize + .2, 'rem')
#top-container
position: relative
margin-bottom: 1rem
height: 19rem
background-color: $light-blue
background-attachment: local
background-position: center
background-size: cover
height: 19rem
&:before
position: absolute
top: 0
left: 0
display: block
content: ''
width: 100%
height: 100%
background-color: alpha($dark-black,0.5)
background-color: alpha($dark-black, .5)
content: ''
a
color: $light-grey
text-decoration: none
transition: all 0.3s ease-out
transition: all .3s ease-out
&:hover
color: $white
text-decoration: underline
#top-img
padding: 0
border: none
#site-name
font-weight: bold
cursor: pointer
#post-info
& > #post-info
position: absolute
bottom: 1.5rem
padding: 0 8%
width: 100%
color: $light-grey
text-align: left
padding: 0 8%
position: absolute
bottom: 1.5rem
#post-title
text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
font-size: 1.5rem
margin-bottom: 0.4rem
#post-title
margin-bottom: .4rem
font-size: 1.5rem
.posttitle
line-height: 1.5
.posttitle
display: -webkit-box
overflow: hidden
line-height: 1.5
-webkit-line-clamp: 3
-webkit-box-orient: vertical
i.fa.fa-angle-right
margin: 0 0.3rem 0 0.2rem
#post-meta
.word-count,
#busuanzi_value_page_pv,
.comment-count
padding-left: .2rem
.post-meta
&__separator
margin: 0 0.3rem
.post-meta
&__separator
margin: 0 .3rem
&__icon
margin-right: 0.2rem
&__tags
display: inline-block
width: fit-content
margin: 0.4rem 0.4rem 0.4rem 0
padding: 0rem 0.6rem
border: 1px solid $light-blue
border-radius: 0.6rem
background: $white
color: $light-blue
text-decoration: none
font-size: 12px
cursor: pointer
transition: all 0.2s ease-in-out
&:hover
background: $light-blue
color: $white
&__icon
margin-right: .2rem
&-pv-cv
display: inline-block
#post-content
if hexo-config("post_beautify.enable")
if hexo-config('post_beautify.enable')
h1,
h2,
h3,
@@ -121,17 +83,17 @@ if hexo-config("post_beautify.enable")
h5,
h6
cursor: pointer
transition: all 0.2s ease-out
transition: all .2s ease-out
&:before
position: absolute
top: calc(50% - 0.35rem)
top: calc(50% - .35rem)
left: 0
color: $title-prefix-icon-color
content: $title-prefix-icon
font: normal normal normal 14px / 1 FontAwesome
font-size: 0.8rem
transition: all 0.2s ease-out
font-size: .8rem
transition: all .2s ease-out
&:hover
padding-left: 1.1rem
@@ -143,38 +105,38 @@ if hexo-config("post_beautify.enable")
headStyle(1)
h2
headStyle(0.9)
headStyle(.9)
h3
headStyle(0.8)
headStyle(.8)
h4
headStyle(0.7)
headStyle(.7)
h5
headStyle(0.6)
headStyle(.6)
h6
headStyle(0.6)
headStyle(.6)
ol,
ul
margin-top: 0.4rem
padding: 0 0 0 0.8rem
margin-top: .4rem
padding: 0 0 0 .8rem
list-style: none
counter-reset: li
p
margin: 0
margin: 0 0 .5rem
ol,
ul
padding-left: 0.5rem
padding-left: .5rem
li
position: relative
margin: 0.2rem 0
padding: 0.1rem 0.5rem 0.1rem 1.5rem
margin: .2rem 0
padding: .1rem .5rem .1rem 1.5rem
&:hover
&:before
@@ -187,19 +149,19 @@ if hexo-config("post_beautify.enable")
background: $light-blue
color: $white
cursor: pointer
transition: all 0.3s ease-out
transition: all .3s ease-out
ol
> li
&:before
margin-top: 0.2rem
margin-top: .2rem
width: w = 1.2rem
height: h = w
border-radius: 0.5 * w
border-radius: .5 * w
content: counter(li)
counter-increment: li
text-align: center
font-size: 0.6rem
font-size: .6rem
line-height: h
ul
@@ -209,38 +171,37 @@ if hexo-config("post_beautify.enable")
border-color: $ruby
&:before
$w = 0.3rem
$w = .3rem
top: 10px
margin-left: 0.45rem
margin-left: .45rem
width: w = $w
height: h = w
border: 0.5 * w solid $light-blue
border: .5 * w solid $light-blue
border-radius: w
background: $white
content: ""
content: ''
line-height: h
else
ol,
ul
margin-top: 0.4rem
margin-top: .4rem
counter-reset: li
p
margin: 0
margin: 0 0 .5rem
ol,
ul
padding-left: 0.5rem
padding-left: .5rem
li
position: relative
margin: 0.3rem 0
padding-left: 0.3rem
margin: .3rem 0
padding-left: .3rem
a
color: $a-link-color
transition: all 0.2s
transition: all .2s
&:hover
color: $light-blue
@@ -260,206 +221,209 @@ a.fancybox
text-align: center
text-decoration: none
p
margin: 0 0 .8rem
img
padding: $img-border-padding
max-width: 100%
transition: all 0.2s
transition: all .2s
&:hover
box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5)
.code-area-wrap
position: relative
.fa-clipboard
position: absolute
top: 0.4rem
right: 10px
z-index: 1
color: $highlight-aqua
cursor: pointer
transition: color 0.2s
&:hover
color: darken($highlight-aqua, 20%)
.code_lang
position: absolute
font-weight: bold;
font-size: 0.8rem;
line-height: 1.4rem;
color: $highlight-foreground
left: 30px
z-index: 1
cursor: pointer
.code-expand
position: absolute
top: 0
color: $highlight-foreground
padding: 7px 10px
z-index: 1
cursor: pointer
transition: all .3s
transform: rotate(0deg)
.code-closed
transform: rotate(-90deg) !important
transition: all .3s
.copy-notice
position: absolute
top: 0
right: 0
z-index: 1
background: darken($highlight-background, 5)
color: $highlight-aqua
opacity: 0
.post-copyright
position: relative
margin: 1rem 0 0.5rem 0
padding: 0.5rem 0.8rem
border: 1px solid $light-grey
transition: box-shadow 0.3s ease-in-out
&:before
// highlight
.highlight-tools
.code-expand
position: absolute
top: t = 0.5rem
right: t
width: w = 0.8rem
height: w
border-radius: w
background: $light-blue
content: ""
top: 0
z-index: 1
padding: 7px 10px
color: $highlight-foreground
cursor: pointer
transition: all .3s
transform: rotate(0)
&:after
& + .code_lang
left: 30px
&.code-closed
transition: all .3s
transform: rotate(-90deg) !important
.code_lang
position: absolute
top: t = 0.7rem
right: t
width: w = 0.4rem
height: w
border-radius: w
background: $white
content: ""
&:hover
box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5)
&-meta
color: $light-blue
left: 15px
z-index: 1
color: $highlight-foreground
text-transform: capitalize
font-weight: bold
font-size: .8rem
line-height: 1.4rem
cursor: pointer
&-info
a
word-break: break-word
.copy-notice
position: absolute
top: 0
right: 0
z-index: 1
background: darken($highlight-background, 5)
color: $highlight-aqua
opacity: 0
.fa-clipboard
position: absolute
top: .4rem
right: 10px
z-index: 1
color: $highlight-aqua
cursor: pointer
transition: color .2s
@media screen and (max-width: $sm)
#top-container
#post-title
font-size: 1rem
#post-title
font-size: 1.1rem
&:hover
color: darken($highlight-aqua, 20%)
@media screen and (min-width: $md)
.layout_post
width: $content-large-width
.katex-wrap
overflow: auto
if hexo-config("katex") && hexo-config("katex.hide_scrollbar")
if hexo-config('katex') && hexo-config('katex.hide_scrollbar')
&::-webkit-scrollbar
display: none
// 文章字體
#post-content p
font-size: 1.1em
#post-content ol,
#post-content ul
font-size: 1em
.layout_post
padding: 50px
box-shadow: 0 4px 8px 6px rgba(7,17,27,0.06)
border-radius: 8px
transition: all 0.3s
background: #fff
.layout_post
margin: 40px auto
padding: 50px
max-width: 1000px
border-radius: 8px
background: #fff
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)
&:hover
box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
img
display:block
.tag_share
display: block
.post-meta__tag-list
display: inline-block
& >.tag_share
.post-meta
&__tag-list
display: inline-block
&__tags
display: inline-block
margin: .4rem .4rem .4rem 0
padding: 0 .6rem
width: fit-content
border: 1px solid $light-blue
border-radius: .6rem
background: $white
color: $light-blue
text-decoration: none
font-size: 12px
cursor: pointer
transition: all .2s ease-in-out
&:hover
background: $light-blue
color: $white
.post_share
width: fit-content;
display: inline-block;
float: right;
margin: 0.4rem 0
display: inline-block
float: right
margin: .4rem 0
width: fit-content
.social-share
font-size: 12px
.social-share .social-share-icon
width: 26px;
height: 26px;
font-size: 15px;
line-height: 25px;
.social-share-icon
margin: 0 4px
width: 26px
height: 26px
font-size: 15px
line-height: 25px
.social-share a
margin: 0 4px;
& > .post-copyright
position: relative
margin: 2rem 0 .5rem
padding: .5rem .8rem
border: 1px solid $light-grey
transition: box-shadow .3s ease-in-out
&:before
position: absolute
top: t = .5rem
right: t
width: w = .8rem
height: w
border-radius: w
background: $light-blue
content: ''
&:after
position: absolute
top: t = .7rem
right: t
width: w = .4rem
height: w
border-radius: w
background: $white
content: ''
&:hover
box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)
.post-copyright
&-meta
color: $light-blue
font-weight: bold
&-info
padding-left: .3rem
a
word-break: break-word
#post
a
text-decoration: none
color: $light-blue
h1,
h2,
h3,
h4,
h5,
h6
margin: 1rem 0 0.8rem 0
text-decoration: none
&:hover
text-decoration: underline
img
margin: 0 auto 0.8rem
blockquote,
p
margin: 0 0 0.8rem 0
iframe,.note
margin: 0 0 0.8rem 0
.layout_post,
.layout_page
opacity: 1
margin: .8rem auto
@media screen and (max-width: 1024px)
.layout_post
margin: 0 15px
width: auto
@media screen and (max-width:768px)
@media screen and (max-width: $sm)
.layout_post
margin: 0 5px
padding: 1.8rem 1rem
margin: 0px 5px
#top-container
height: 18rem
& > #post-info
bottom: 1rem
padding: 0 5%
& > #post-title
font-size: 1.2rem
& > #post-meta
font-size: 90%
& > span
display: none
.post-meta-pv-cv
display: block
.post-meta__separator:first-child
display: none

124
source/css/_layout/readmode.styl
View File

@@ -1,117 +1,93 @@
if hexo-config("readmode") && hexo-config("readmode.enable")
if hexo-config('readmode') && hexo-config('readmode.enable')
.read-mode
background: $pale-yellow
padding: 0 !important
#sidebar,
#toggle-sidebar
display: none
background: $pale-yellow
#page-header
#site-name,
.site-page,
.toggle-menu
text-shadow: none
.site-page
color: $font-black
.menus_item_child
background-color: darken($pale-yellow,5) !important
text-shadow: none
&:before
border-color: transparent transparent darken($pale-yellow,5) !important
.menus_item_child
background-color: darken($pale-yellow, 3) !important
& > li
&:hover
background-color: darken($pale-yellow, 10) !important
#top-container
background-image: none !important
height: 14rem
background-color: $pale-yellow
background-image: none !important
a
color: $font-black
&:before
opacity: 0
#post-info
text-align: center
& > #post-info
padding: 0
color: $font-black
#post-title,
#post-meta
text-shadow: none
text-align: center
#page-header
&.fixed
background: alpha(darken($pale-yellow,5),0.5)
background: alpha(darken($pale-yellow, 5), .5)
box-shadow: none
&.open-sidebar
.site-page
display: inline-block
opacity: 1
visibility: visible
.layout_post
box-shadow: none
background: $pale-yellow
box-shadow: none
&:hover
box-shadow: none
.article-container
.article-container
pre,
.highlight
background: darken($pale-yellow,5);
.highlight
&:after
background: darken($pale-yellow,10);
table
&:after
background: darken($pale-yellow,10);
.highlight:not(.js-file-line-container)
background: darken($pale-yellow, 5)
.highlight
display: block !important
blockquote
border-left: 0.2rem solid #d6dbdf
background-color: rgba(102,128,153,.05)
border-left: .2rem solid #d6dbdf
background-color: rgba(102, 128, 153, .05)
#rightside
#darkmode
display: none
canvas
& > canvas
display: none !important
.code-area-wrap > .highlight-tools,
#sidebar,
#toggle-sidebar,
#footer,
#post-comment,
hr,
.relatedPosts,
#pagination,
.post-reward,
.tag_share,
.post-copyright
.layout_post > div,
.layout_post > hr,
.layout_post > nav
display: none
hr
border: 2px dashed #d6dbdf
background: transparent
&:before
color: darken(#d6dbdf, 10)
&::-webkit-scrollbar-thumb
background: darken($pale-yellow,15)
background: darken($pale-yellow, 10)
*::-webkit-scrollbar-thumb
background: darken($pale-yellow,15)
.copy-notice
background: darken($pale-yellow,10)
background: darken($pale-yellow, 10)
#web_bg
background: none

111
source/css/_layout/relatedposts.styl
View File

@@ -1,75 +1,74 @@
.relatedPosts
margin: 0 auto
padding: 0
margin-top: 1rem
width: 100%
margin: 0 auto
margin-top: 1rem
padding: 0
width: 100%
.relatedPosts_item
width: calc(100%/3 - 10px)
height: 200px
overflow: hidden
float: left
position: relative
margin: 5px
background: #000
.relatedPosts_item
position: relative
float: left
overflow: hidden
margin: 5px
width: calc(100% / 3 - 10px)
height: 200px
background: $dark-black
&:hover
.relatedPosts_cover
opacity: .8
transform:scale(1.1)
&:hover
.relatedPosts_cover
opacity: .8
transform: scale(1.1)
a
text-decoration: none
.relatedPosts_cover
border: 0
transition: all 0.6s
.relatedPosts_cover
position: absolute
display: block
margin: 0
padding: 0
width: 100%
height: 100%
border: 0
opacity: .4
transition: all .6s
object-fit: cover
.relatedPosts_main
position: relative
display: flex
flex-direction: column
justify-content: center
margin: 0
padding: 0 1rem
height: 100%
color: $white
.relatedPosts_date
display: block
width: 100%
height: 100%
padding: 0
opacity: 0.4
margin: 0
object-fit: cover
color: alpha($white, .9)
font-size: 90%
.relatedPosts_title
color: #fff
position: absolute
left: 0
right: 0
top: 45%
height: 60px
padding: 0 30px
display: -webkit-box
overflow: hidden
max-height: 60px
-webkit-line-clamp: 2
-webkit-box-orient: vertical
overflow: hidden
max-width: 100%
width: 100%
margin: 0 auto
text-align: center
.relatedPosts_headline
font-size: 20px
font-weight: 700
margin-bottom: 5px
.relatedPosts_headline
margin-bottom: 5px
font-weight: 700
font-size: 20px
.clear_both
clear: both
.clear_both
clear: both
@media screen and (max-width:768px)
@media screen and (max-width: 768px)
.relatedPosts_item
width: calc(100%/2 - 4px)
height: 150px
margin: 2px
.relatedPosts_title
top: 40%
width: calc(100% / 2 - 4px)
height: 150px
@media screen and (max-width:480px)
@media screen and (max-width: 480px)
.relatedPosts_item
width: calc(100% - 4px)
height: 150px
margin: 2px
.relatedPosts_title
top: 40%

76
source/css/_layout/reward.styl
View File

@@ -1,72 +1,74 @@
.post-reward
position: relative
width: 100%
margin: 75px auto 0
width: 100%
text-align: center
display: block
.reward-button
text-align: center
position: relative
z-index: 1
display: inline-block
cursor: pointer
color: #fff
line-height: 36px
width: 100px
background: $light-blue
width: 80px
color: $white
text-align: center
line-height: 36px
cursor: pointer
&:hover
background: darken($light-blue,30)
.reward-main
display: block
.reward-main
position: absolute
bottom: 40px
left: 0
display: none
margin: 0
padding: 0 0 15px
width: 100%
left: 0
transition: all 0.6s
display: none
opacity: 1
transition: all .6s
.reward-all
margin: 0 auto
padding: 20px 10px 8px
background: #f5f5f5
display: inline-block
margin: 0 0 0 -110px
padding: 20px 10px 8px
width: 320px
border-radius: 4px
cursor: auto
background: #f5f5f5
&:before
position: absolute
bottom: -10px
left: 0
width: 100%
height: 20px
content: ''
&:after
content: ""
width: 0
height: 0
border-left: 13px solid transparent
border-right: 13px solid transparent
border-top: 13px solid #f5f5f5
position: absolute
right: 0
bottom: 2px
left: 0
right: 0
margin: 0 auto
width: 0
height: 0
border-top: 13px solid #f5f5f5
border-right: 13px solid transparent
border-left: 13px solid transparent
content: ''
.reward-item
list-style-type: none
padding: 0 8px
display: inline-block
padding: 0 8px
list-style-type: none
img
width: 130px
max-width: 130px
border-radius: 3px
position: relative
max-width: 130px
width: 130px
border-radius: 3px
.post-qr-code__desc
text-align: center
margin: -10px 0
margin: -5px 0
color: #858585
text-align: center

90
source/css/_layout/rightside.styl
View File

@@ -1,63 +1,61 @@
#rightside
right: -38px
#rightside
position: fixed
right: -38px
bottom: 40px
transition: all .3s
opacity 0
opacity: 0
transition: all .5s
#rightside-config-hide
display none
transform: translate(35px, 0)
#readmode,
#font_plus,
#font_minus,
#to_comment,
.darkmode,
#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
.rightside-in
transform: translate(0, 0) !important
animation: rightsideIn .3s
.rightside-out
animation: rightsideOut .3s
& > div
& > i,
& > a,
& > div
display: block
margin-bottom: 2px
width: 30px
height: 30px
background-color: $light-blue
color: $white
text-align: center
text-decoration: none
font-size: 16px
line-height: 29px
cursor: pointer
&:hover
background-color: $ruby
&: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
#rightside
#mobile-toc-button
display: block
@keyframes rightsideIn
0%
transform: translate(30px, 0)
100%
transform: translate(0, 0)
@keyframes rightsideOut
0%
transform: translate(0, 0)
100%
transform: translate(30px, 0)

34
source/css/_layout/sidebar.styl
View File

@@ -4,35 +4,34 @@
left: -300px
z-index: 10
overflow-y: auto
padding: 1rem 0 2rem 0.5rem
padding: 1rem 0 2rem .5rem
width: $sidebar-width
height: 100%
background: $sidebar-background
box-shadow: -0.25rem 0 0.25rem rgba(232, 237, 250, 0.6) inset
opacity: 0.9
will-change: transform
transition: ease-in-out .2s
box-shadow: -.25rem 0 .25rem rgba(232, 237, 250, .6) inset
opacity: .9
transition: ease-in-out .4s
.sidebar-toc
ol,
li
list-style: none
ol
margin-top: 0.2rem
padding-left: 0.4rem
margin-top: .2rem
padding-left: .4rem
&__title
padding-right: 0.5rem
padding-right: .5rem
text-align: center
font-size: unit(0.9 * $rem, "px")
font-size: unit(.9 * $rem, 'px')
.toc-link
display: block
padding-left: 0.2rem
padding-left: .2rem
border-right: 3px solid transparent
text-decoration: none
transition: all 0.2s ease-in-out
transition: all .2s ease-in-out
&.active
border-right-color: darken($cyan, 20%)
@@ -41,21 +40,18 @@
&__progress
position: relative
margin-top: -0.3rem
padding-left: 0.6rem
margin-top: -.3rem
padding-left: .6rem
color: $cyan
.progress-notice
margin-right: 0.4rem
margin-right: .4rem
.progress-num
display: inline-block
min-width: 0.9rem
min-width: .9rem
&-bar
width: 0
height: 1px
background: $cyan

593
source/css/_layout/z-darkmode.styl
View File

@@ -1,303 +1,356 @@
[data-theme="dark"]
body
color: #99a9bf
background-color: #2d3032
if hexo-config('darkmode.enable') || hexo-config('autoChangeMode') == '1' || hexo-config('autoChangeMode') == '2'
[data-theme='dark']
body
background-color: darken(#121212, 2)
color: alpha(#FFFFFF, .6)
&::-webkit-scrollbar-thumb
background: lighten(#2d3035,5)
::-webkit-scrollbar-thumb
background: lighten(#121212, 5)
#sidebar
background: #2d3035
box-shadow: -0.25rem 0 0.25rem #2d3035
// 網站背景，footer背景
#web_bg[data-type=color],
#footer[data-type=color]
background: darken(#121212, 2)
&::-webkit-scrollbar-thumb
background: lighten(#2d3035,5)
if hexo-config("local_search") && hexo-config("local_search.enable")
#local-search
background: #2d3035
.local-search-box--input
background: #2d3035
color: #99a9bf
.search-result-title
color: #99a9bf
if hexo-config("algolia_search.enable")
#algolia-search
background: #2d3035
.ais-search-box--input
background: #2d3035
color: #99a9bf
#algolia-search-results
.algolia-hit-item-link
color: #99a9bf
.article-container code
background: #616a6b
color: #99a9bf
if hexo-config('valine') && hexo-config('valine.enable')
// 評論
#vcomment
p,a,textarea,.vemoji-btn,.vpreview-btn,input,path,.vcount,.vnum,.vtime,.vsys,.vsys,.vnick
color: #99a9bf !important
.vsys
background: rgb(97, 106, 107) !important
.vbtn
background: rgb(45, 48, 53) !important
color: #99a9bf !important
border: 1px solid #99a9bf
.vwrap
border: 1px solid #99a9bf
input
border-bottom: 1px dashed #616a6b
.vh
border-bottom: 1px dashed #616a6b
pre
background-color: #2d3035
border: 1px solid #99a9bf
.vcontent.expand:before
background: linear-gradient(180deg,hsla(0, 0%, 0%, 0),hsl(218, 8%, 19%))
.vcontent.expand:after
background: hsla(204, 5%, 22%, 1)
.recent-posts
.recent-post-item
background: #2d3032 !important
.article-title
color: #99a9bf !important
#page-header
&.fixed
background: #2d3035
box-shadow: 0 5px 6px -5px rgba(133,133,133,0)
a,
.toggle-menu,
#site-name
color: #99a9bf
blockquote
color: #99a9bf
background-color: lighten(#2d3035,10)
hr
background: 0
border: 2px dashed #616A6B
&:before
color: #99a9bf
.post-meta__tags
background: 0
border: 1px solid #99a9bf
color: #99a9bf
.post-copyright
border: 1px solid #99a9bf
*
color: #99a9bf
.article-container pre
background-color: lighten(#2d3035, 2)
.article-container .highlight:not(.js-file-line-container)
background-color: lighten(#2d3035, 2)
.code pre
background-color: lighten(#2d3035, 2)
.gutter pre
background: lighten(#2d3035, 3)
&:after
background: lighten(#2d3035, 3)
table
&:after,.copy-notice
background: lighten(#2d3035, 3)
&::-webkit-scrollbar-thumb
background: lighten(#2d3035, 8)
.copy-notice
background: lighten(#2d3035, 3)
.aplayer
color: #000000
filter: brightness(0.6)
.translate_chn_to_cht,
.darkmode,
#readmode,
#to_comment,
#font_plus,
#font_minus,
#rightside_config,
#go-up,
#mobile-toc-button
background-color: lighten(#2d3035,10) !important
color: #99a9bf !important
&:hover
background: lighten(#2d3035,20) !important
.md-links-item:before,
.aside_category_list:hover,
.archive-list-item:hover,
#bookmark-it,
.reward-button,
.reward-all,
.note
background-color: lighten(#2d3035,10) !important
img,iframe,.gist
filter: brightness(0.7)
#aside_content
.card_widget
background:#2d3035 !important
.headline,
.length_num,
.aside_post_title,
.aside_category_list_link,
.archive-list-link,
.social-icon
color: #99a9bf !important
#archive,
.tag-cloud,
#tag,
.category-content,
#category,
#page,
.flink,
.layout_post
background: #2d3035
#nav,
#top-container
&::before
content: ""
#web_bg[data-type=photo]:before,
#footer[data-type=photo]:before
position: absolute
top: 0
bottom: 0
left: 0
right: 0
background-color: alpha($dark-black,0.7)
width: 100%
height: 100%
background-color: alpha($dark-black, .7)
content: ''
#nav span,
#nav i,
#page-header a,
#page-header .toggle-menu,
#top-container #post-meta,
#top-container a,
.posttitle,
#footer-wrap,
#footer-wrap a
color: lighten(#99a9bf,10)
#archive,
.tag-cloud,
#tag,
.category-content,
#category,
#page,
.flink,
.layout_post
background: #121212
.recent-posts .post-meta__date,
.recent-posts .article-meta,
.recent-posts .article-meta__categories,
h1, h2, h3, h4, h5, h6,
.prev_info,
.next_info,
.post-reward .reward-button,
.fa-clipboard,
.gutter pre,
#bookmark-it,
.copy-notice,
.md-links-item a,
.category-list-link
color: #99a9bf !important
#sidebar
background: #121212
box-shadow: -.25rem 0 .25rem #121212
.article-sort-item__title
color: #99a9bf
&:hover
color: #49b1f5
.article-container code
background: #2c2c2c
//打賞 分享
.post-reward
.reward-all:after
border-top: 13px solid lighten(#2d3035,10) !important
.recent-posts
.recent-post-item
background: #121212 !important
#web_bg[data-type=color],
#footer[data-type=color]
background: #2d3032
.article-title
color: alpha(#FFFFFF, .8) !important
#web_bg[data-type=photo]:before,
#footer[data-type=photo]:before
background-color: alpha($dark-black,0.7)
#page-header
&.fixed
background: #121212
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
#hexo-blog-encrypt
label,input
color: #99a9bf !important
input
background-color: #2d3035
.toggle-menu,
#site-name,
a
color: alpha(#FFFFFF, .8)
.menus_item_child
background-color: lighten(#121212, 5) !important
#mobile-sidebar
#mobile-sidebar-menus
background: #2d3035
li
&:hover
background: lighten(#121212, 20)
.headline
color: #99a9bf !important
.length_num
color: darken(#99a9bf,10) !important
a
color: #99a9bf !important
a
color: alpha(#FFFFFF, .6)
#mobile-sidebar-toc
background: #2d3035
a
color: #99a9bf !important
// 代碼框
.article-container pre,
.article-container pre code
background-color: lighten(#121212, 2)
#page-header
.menus_item_child
background-color: #2d3035 !important
.highlight-tools
background: lighten(#121212, 3)
.article-container .highlight:not(.js-file-line-container)
background-color: lighten(#121212, 2)
.code pre,
.gutter pre
background-color: lighten(#121212, 2)
table
.copy-notice
background: lighten(#121212, 3)
.copy-notice
background: lighten(#121212, 3)
blockquote
background-color: lighten(#121212, 10)
color: alpha(#FFFFFF, .6)
hr
border: 2px dashed alpha(#FFFFFF, .3)
background: 0
&:before
border-color: transparent transparent #2d3035 !important
color: alpha(#FFFFFF, .6)
.layout_post >.tag_share .post-meta__tags
border: 1px solid alpha(#FFFFFF, .6)
background: 0
color: alpha(#FFFFFF, .6)
&:hover
background: darken(#FFFFFF, 60)
// 文章版權
.post-copyright
border: 1px solid alpha(#FFFFFF, .6)
.post-copyright-meta
color: alpha(#FFFFFF, .8)
.post-copyright-info
color: alpha(#FFFFFF, .6)
// 音樂播放器
.aplayer
filter: brightness(.7)
color: #000000
// 右下角按鈕
#rightside
& > div
& > i,
& > a,
& > div
background-color: lighten(#121212, 5) !important
color: alpha(#FFFFFF, .6) !important
&:hover
background: lighten(#121212, 20) !important
// 打賞按鈕
.post-reward
.reward-button
background-color: lighten(#121212, 10) !important
.reward-all
background-color: lighten(#121212, 10) !important
&:after
border-top: 13px solid lighten(#121212, 10) !important
.md-links-item:before,
.aside-category-list:hover,
.archive-list-item:hover,
#bookmark-it
background-color: lighten(#121212, 10) !important
img,
iframe,
.gist
filter: brightness(.7)
// 側邊欄
#aside_content
.card-widget
background: #121212 !important
.headline,
.length_num,
.aside-post_title,
.aside-category-list_link,
.archive-list-link,
.social-icon
color: alpha(#FFFFFF, .6) !important
.button--animated:before
background: lighten(#121212, 20) !important
// 頭部
#nav,
#top-container
&::before
position: absolute
top: 0
right: 0
bottom: 0
left: 0
background-color: alpha($dark-black, .7)
content: ''
#nav span,
#nav i,
#page-header a,
#page-header .toggle-menu,
#top-container #post-meta,
#top-container a,
#footer-wrap,
#footer-wrap a
color: alpha(#FFFFFF, .6)
.posttitle,
h1,
h2,
h3,
h4,
h5,
h6
color: alpha(#FFFFFF, .8)
.recent-posts .post-meta__date,
.recent-posts .article-meta,
.recent-posts .article-meta__categories,
.post-reward .reward-button,
.fa-clipboard,
.gutter pre,
#bookmark-it,
.copy-notice,
.md-links-item a,
.category-list-link,
.relatedPosts_date,
.prev-post .label,
.next-post .label
color: alpha(#FFFFFF, .6) !important
.prev_info,
.next_info,
.relatedPosts_title
color: alpha(#FFFFFF, .8) !important
// 時間軸界面
.article-sort-item__title
color: alpha(#FFFFFF, .6)
&:hover
color: #49b1f5
// 手機 MENU,TOC
#mobile-sidebar
#mobile-sidebar-menus
background: #121212
.headline
color: alpha(#FFFFFF, .6) !important
.length_num
color: alpha(#FFFFFF, .8) !important
li
a
color: #99a9bf
.bookmark--animated:before
background: lighten(#2d3035,20) !important
if hexo-config('gitalk') && hexo-config('gitalk.enable')
#gitalk-container
.gt-header-textarea
background-color: #2d3035 !important
color: #99a9bf
border: 1px solid #99a9bf
.gt-comment-content
filter: brightness(0.7)
color: alpha(#FFFFFF, .6) !important
#mobile-sidebar-toc
background: #121212
a
color: alpha(#FFFFFF, .6) !important
// note
if hexo-config('note.style') == 'modern'
.note
filter: brightness(.7)
if hexo-config('note.style') == 'flat'
.note
filter: brightness(.7)
color: #4c4948
// 第三方
// 插件 hexo-blog-encrypt
#hexo-blog-encrypt
label,
input
color: alpha(#FFFFFF, .6) !important
input
background-color: #121212
if hexo-config('gitalk') && hexo-config('gitalk.enable')
#gitalk-container
.gt-header-textarea,
.gt-header-preview,
.gt-comment-content,
button,
.gt-popup
filter: brightness(.7)
svg
fill: alpha(#FFFFFF, .6) !important
if hexo-config('valine') && hexo-config('valine.enable')
// 評論
#vcomment
p,
a,
textarea,
.vemoji-btn,
.vpreview-btn,
input,
path,
.vcount,
.vnum,
.vtime,
.vsys,
.vsys,
.vnick
color: alpha(#FFFFFF, .6) !important
.vsys
background: rgb(97, 106, 107) !important
.vbtn
border: 1px solid alpha(#FFFFFF, .6)
background: rgb(45, 48, 53) !important
color: alpha(#FFFFFF, .6) !important
.vwrap
border: 1px solid alpha(#FFFFFF, .6)
input
border-bottom: 1px dashed #616a6b
.vh
border-bottom: 1px dashed #616a6b
pre
border: 1px solid alpha(#FFFFFF, .6)
background-color: #121212
code
background: transparent
code
background-color: #2c2c2c
color: alpha(#FFFFFF, .6)
.vcontent.expand:before
background: linear-gradient(180deg, hsla(0, 0, 0, 0), hsl(218, 8%, 19%))
.vcontent.expand:after
background: hsla(204, 5%, 22%, 1)
if hexo-config('local_search') && hexo-config('local_search.enable')
#local-search
background: #121212
.local-search-box--input
background: #121212
color: alpha(#FFFFFF, .6)
.search-result-title
color: alpha(#FFFFFF, .6)
if hexo-config('algolia_search.enable')
#algolia-search
background: #121212
.ais-search-box--input
background: #121212
color: alpha(#FFFFFF, .6)
#algolia-search-results
.algolia-hit-item-link
color: alpha(#FFFFFF, .6)

18
source/css/_search/algolia.styl
View File

@@ -1,5 +1,5 @@
#algolia-search
animation: titlescale 0.5s
animation: titlescale .5s
.ais-search-box
margin: 0 auto
@@ -7,7 +7,7 @@
width: 100%
input
padding: 0.25rem 0.7rem
padding: .25rem .7rem
outline: none
border: 2px solid $light-blue
border-radius: 2rem
@@ -22,18 +22,18 @@
border-color: $ruby
&:before
$w = 0.3rem
$w = .3rem
position: absolute
top: 0.4rem
top: .4rem
left: 0
width: w = $w
height: h = w
border: 0.5 * w solid $light-blue
border: .5 * w solid $light-blue
border-radius: w
background: $white
content: ""
content: ''
line-height: h
transition: all 0.2s ease-in-out
transition: all .2s ease-in-out
a
display: block
@@ -46,12 +46,12 @@
color: $light-blue
.ais-pagination.pagination
margin: 0.8rem 0 0 0
margin: .8rem 0 0
padding: 0
text-align: center
.ais-pagination--item
margin: 0 0.2rem
margin: 0 .2rem
padding: 0
a

10
source/css/_search/index.styl
View File

@@ -14,18 +14,18 @@
span.search-close-button
position: absolute
top: 0.5rem
right: 0.5rem
top: .5rem
right: .5rem
color: $grey
line-height: 1
cursor: pointer
transition: color 0.2s ease-in-out
transition: color .2s ease-in-out
&:hover
color: $light-blue
&__title
padding: 0 0 0.7rem
padding: 0 0 .7rem
color: $light-blue
font-size: 1rem
line-height: 1
@@ -38,7 +38,7 @@
left: 0
z-index: 1000
display: none
background: rgba(0, 0, 0, 0.6)
background: rgba(0, 0, 0, .6)
@media screen and (max-width: $sm)
.search-dialog

14
source/css/_search/local-search.styl
View File

@@ -1,5 +1,5 @@
#local-search
animation: titlescale 0.5s
animation: titlescale .5s
.local-search-box
margin: 0 auto
@@ -7,7 +7,7 @@
width: 100%
input
padding: 0.25rem 0.7rem
padding: .25rem .7rem
width: 100%
outline: none
border: 2px solid $light-blue
@@ -23,18 +23,18 @@
border-color: $ruby
&:before
$w = 0.3rem
$w = .3rem
position: absolute
top: 0.4rem
top: .4rem
left: 0
width: w = $w
height: h = w
border: 0.5 * w solid $light-blue
border: .5 * w solid $light-blue
border-radius: w
background: $white
content: ""
content: ''
line-height: h
transition: all 0.2s ease-in-out
transition: all .2s ease-in-out
a
display: block

2
source/css/_third-party/normalize.min.css vendored
View File

@@ -1 +1 @@
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}/*# sourceMappingURL=normalize.min.css.map */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

28
source/css/index.styl
View File

@@ -1,18 +1,16 @@
@import "nib"
@import "_third-party/normalize.min.css"
@import 'nib'
@import '_third-party/normalize.min.css'
// project
@import "var"
@import "_global"
@import "_highlight/highlight"
@import "_layout/*"
@import 'var'
@import '_global'
@import '_highlight/highlight'
@import '_layout/*'
// search
if hexo-config("algolia_search.enable")
@import "_search/index"
@import "_search/algolia"
if hexo-config("local_search") && hexo-config("local_search.enable")
@import "_search/index"
@import "_search/local-search"
if hexo-config('algolia_search.enable')
@import '_search/index'
@import '_search/algolia'
if hexo-config('local_search') && hexo-config('local_search.enable')
@import '_search/index'
@import '_search/local-search'

2
source/css/var.styl
View File

@@ -62,7 +62,6 @@ $sidebar-icon-left = $sidebar-icon-top - 4px
$sidebar-icon-size = 16px
$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
@@ -109,7 +108,6 @@ $content-large-width = 1000px
$a-link-color = $theme-link-color
$a-hover-color = #82AAFF
$img-border-color = #eaeefb
$img-border-padding = 4px
// sidebar
$sidebar-width = 300px
$sidebar-background = #f6f8fa

BIN
source/img/404.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 55 KiB

After

Width:  |  Height:  |  Size: 17 KiB

BIN
source/img/avatar.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 433 KiB

After

Width:  |  Height:  |  Size: 76 KiB

BIN
source/img/comment_bg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 6.0 KiB

BIN
source/img/icp.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
source/img/loading.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

12
source/js/baidupush.js
View File

@@ -1,12 +0,0 @@
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();

1058
source/js/main.js
View File

File diff suppressed because it is too large Load Diff

19
source/js/runtimeshow.js
View File

@@ -1,19 +0,0 @@
// get user config
var start_date = document.getElementById("runtionshow").getAttribute("start_date")
function show_date_time() {
BirthDay=new Date(start_date);
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
webinfo_runtime_count.innerHTML= daysold + " " + GLOBAL_CONFIG.runtime_unit
}
var interval;
show_date_time();
clearInterval(interval);
interval = setInterval(show_date_time, 10000);

143
source/js/search/algolia.js
View File

@@ -1,143 +0,0 @@
$(function () {
$('a.social-icon.search').on('click', function () {
$('body').css('width', '100%')
$('body').css('overflow', 'hidden')
$('.search-dialog').animate({}, function () {
$('.search-dialog').css({
'display': 'block'
}),300
})
$('.ais-search-box--input').focus()
$('.search-mask').fadeIn();
// shortcut: ESC
document.addEventListener('keydown', function f(event) {
if (event.code == "Escape") {
closeSearch();
document.removeEventListener('keydown', f);
}
})
})
var closeSearch = function () {
$('body').css('width', '')
$('body').css('overflow', '')
$('.search-dialog').css({
'animation': 'search_close .5s'
})
$('.search-dialog').animate({}, function () {
setTimeout(function () {
$('.search-dialog').css({
'animation': '',
'display': 'none'
})
},500)
})
$('.search-mask').fadeOut();
}
$('.search-mask, .search-close-button').on('click', closeSearch)
var algolia = GLOBAL_CONFIG.algolia
var isAlgoliaValid = algolia.appId && algolia.apiKey && algolia.indexName
if (!isAlgoliaValid) {
return console.error('Algolia setting is invalid!')
}
var search = instantsearch({
appId: algolia.appId,
apiKey: algolia.apiKey,
indexName: algolia.indexName,
searchParameters: {
hitsPerPage: algolia.hits.per_page || 10
},
searchFunction: function (helper) {
var searchInput = $('#algolia-search-input').find('input')
if (searchInput.val()) {
helper.search()
}
}
})
search.addWidget(
instantsearch.widgets.searchBox({
container: '#algolia-search-input',
reset: false,
magnifier: false,
placeholder: GLOBAL_CONFIG.algolia.languages.input_placeholder
})
)
search.addWidget(
instantsearch.widgets.hits({
container: '#algolia-hits',
templates: {
item: function (data) {
var link = data.permalink ? data.permalink : (GLOBAL_CONFIG.root + data.path)
return (
'<a href="' + link + '" class="algolia-hit-item-link">' +
data._highlightResult.title.value +
'</a>'
)
},
empty: function (data) {
return (
'<div id="algolia-hits-empty">' +
GLOBAL_CONFIG.algolia.languages.hits_empty.replace(/\$\{query}/, data.query) +
'</div>'
)
}
},
cssClasses: {
item: 'algolia-hit-item'
}
})
)
search.addWidget(
instantsearch.widgets.stats({
container: '#algolia-stats',
templates: {
body: function (data) {
var stats = GLOBAL_CONFIG.algolia.languages.hits_stats
.replace(/\$\{hits}/, data.nbHits)
.replace(/\$\{time}/, data.processingTimeMS)
return (
'<hr>' +
stats +
'<span class="algolia-logo pull_right">' +
' <img src="' + GLOBAL_CONFIG.root + 'img/algolia.svg" alt="Algolia" />' +
'</span>'
)
}
}
})
)
search.addWidget(
instantsearch.widgets.pagination({
container: '#algolia-pagination',
scrollTo: false,
showFirstLast: false,
labels: {
first: '<i class="fa fa-angle-double-left"></i>',
last: '<i class="fa fa-angle-double-right"></i>',
previous: '<i class="fa fa-angle-left"></i>',
next: '<i class="fa fa-angle-right"></i>'
},
cssClasses: {
root: 'pagination',
item: 'pagination-item',
link: 'page-number',
active: 'current',
disabled: 'disabled-item'
}
})
)
search.start()
})

111
source/js/search/local-search.js
View File

@@ -1,111 +0,0 @@
$(function () {
var loadFlag = false
$('a.social-icon.search').on('click', function () {
$('body').css('width', '100%')
$('body').css('overflow', 'hidden')
$('.search-dialog').animate({}, function () {
$('.search-dialog').css({
'display': 'block'
}),300
})
$('#local-search-input input').focus()
$('.search-mask').fadeIn();
if (!loadFlag) {
search(GLOBAL_CONFIG.localSearch.path)
loadFlag = true
}
// shortcut: ESC
document.addEventListener('keydown', function f(event) {
if (event.code === 'Escape') {
closeSearch()
document.removeEventListener('keydown', f)
}
})
})
var closeSearch = function () {
$('body').css('width', '')
$('body').css('overflow', '')
$('.search-dialog').css({
'animation': 'search_close .5s'
})
$('.search-dialog').animate({}, function () {
setTimeout(function () {
$('.search-dialog').css({
'animation': '',
'display': 'none'
})
},500)
})
$('.search-mask').fadeOut();
}
$('.search-mask, .search-close-button').on('click', closeSearch)
function search(path) {
$.ajax({
url: GLOBAL_CONFIG.root + path,
dataType: 'xml',
success: function (xmlResponse) {
// get the contents from search data
var datas = $('entry', xmlResponse).map(function () {
return {
title: $('title', this).text(),
content: $('content', this).text(),
url: $('url', this).text()
}
}).get()
var $input = $('#local-search-input input')[0]
var $resultContent = $('#local-hits')[0]
$input.addEventListener('input', function () {
var str = '<div class="search-result-list">'
var keywords = this.value.trim().toLowerCase().split(/[\s]+/)
$resultContent.innerHTML = ''
if (this.value.trim().length <= 0) {
$('.local-search-stats__hr').hide()
return
}
var count = 0
// perform local searching
datas.forEach(function (data) {
var isMatch = true
var dataTitle = data.title.trim().toLowerCase()
var dataContent = data.content.trim().replace(/<[^>]+>/g, '').toLowerCase()
var dataUrl = data.url
var indexTitle = -1
var indexContent = -1
// only match artiles with not empty titles and contents
if (dataTitle !== '' && dataContent !== '') {
keywords.forEach(function (keyword, i) {
indexTitle = dataTitle.indexOf(keyword)
indexContent = dataContent.indexOf(keyword)
if (indexTitle < 0 && indexContent < 0) {
isMatch = false
} else {
if (indexContent < 0) {
indexContent = 0
}
}
})
}
// show search results
if (isMatch) {
str += '<div class="local-search__hit-item"><a href="' + dataUrl + '" class="search-result-title">' + dataTitle + '</a>' + '</div>'
count += 1
$('.local-search-stats__hr').show()
}
})
if (count === 0) {
str += '<div id="local-search__hits-empty">' + GLOBAL_CONFIG.localSearch.languages.hits_empty.replace(/\$\{query}/, this.value.trim()) +
'</div>'
}
$resultContent.innerHTML = str
})
}
})
}
})

42
source/js/third-party/ClickShowText.js vendored
View File

@@ -1,42 +0,0 @@
function co(){
var colorElements = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
var colorArray = colorElements.split(",");
var color ="#";
for(var i =0;i<6;i++){
color+=colorArray[Math.floor(Math.random()*16)];
}
return color;
};
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function (e) {
var config = GLOBAL_CONFIG.ClickShowText;
/*这个数组中的每一个字符是你要浮动显示的词或句子，每次点击鼠标后按顺序出现*/
var a = config.text.split(",");
var $i = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 150,
"top": y - 20,
"left": x -40,
"position": "absolute",
"font-weight": "bold",
"color": co(),
"cursor": "default",
"font-size": config.fontSize || "inherit"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});

1
source/js/third-party/activate-power-mode.js vendored
View File

@@ -1 +0,0 @@
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.POWERMODE=e():t.POWERMODE=e()}(this,function(){return function(o){var n={};function r(t){if(n[t])return n[t].exports;var e=n[t]={exports:{},id:t,loaded:!1};return o[t].call(e.exports,e,e.exports,r),e.loaded=!0,e.exports}return r.m=o,r.c=n,r.p="",r(0)}([function(t,e,l){"use strict";var r=document.createElement("canvas");r.width=window.innerWidth,r.height=window.innerHeight,r.style.cssText="position:fixed;top:0;left:0;pointer-events:none;z-index:999999",window.addEventListener("resize",function(){r.width=window.innerWidth,r.height=window.innerHeight}),document.body.appendChild(r);var i=r.getContext("2d"),c=[],u=0,p=!1;function o(t,e){return Math.random()*(e-t)+t}function f(t){if(h.colorful){var e=o(0,360);return"hsla("+o(e-10,e+10)+", 100%, "+o(50,80)+"%, 1)"}return window.getComputedStyle(t).color}function h(){for(var t=function(){var t,e=document.activeElement;if("TEXTAREA"===e.tagName||"INPUT"===e.tagName&&"text"===e.getAttribute("type")){var o=l(1)(e,e.selectionEnd);return t=e.getBoundingClientRect(),{x:o.left+t.left,y:o.top+t.top,color:f(e)}}var n=window.getSelection();if(n.rangeCount){var r=n.getRangeAt(0),i=r.startContainer;return i.nodeType===document.TEXT_NODE&&(i=i.parentNode),{x:(t=r.getBoundingClientRect()).left,y:t.top,color:f(i)}}return{x:0,y:0,color:"transparent"}}(),e=5+Math.round(10*Math.random());e--;)c[u]=(o=t.x,n=t.y,r=t.color,{x:o,y:n,alpha:1,color:r,velocity:{x:2*Math.random()-1,y:2*Math.random()-3.5}}),u=(u+1)%500;var o,n,r;if(h.shake){var i=1+2*Math.random(),a=i*(.5<Math.random()?-1:1),d=i*(.5<Math.random()?-1:1);document.body.style.marginLeft=a+"px",document.body.style.marginTop=d+"px",setTimeout(function(){document.body.style.marginLeft="",document.body.style.marginTop=""},75)}p||requestAnimationFrame(s)}function s(){p=!0,i.clearRect(0,0,r.width,r.height);for(var t=!1,e=r.getBoundingClientRect(),o=0;o<c.length;++o){var n=c[o];n.alpha<=.1||(n.velocity.y+=.075,n.x+=n.velocity.x,n.y+=n.velocity.y,n.alpha*=.96,i.globalAlpha=n.alpha,i.fillStyle=n.color,i.fillRect(Math.round(n.x-1.5)-e.left,Math.round(n.y-1.5)-e.top,3,3),t=!0)}t?requestAnimationFrame(s):p=!1}h.shake=!0,h.colorful=!1,t.exports=h},function(e,t){!function(){var u=["direction","boxSizing","width","height","overflowX","overflowY","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderStyle","paddingTop","paddingRight","paddingBottom","paddingLeft","fontStyle","fontVariant","fontWeight","fontStretch","fontSize","fontSizeAdjust","lineHeight","fontFamily","textAlign","textTransform","textIndent","textDecoration","letterSpacing","wordSpacing","tabSize","MozTabSize"],p=null!=window.mozInnerScreenX;function t(t,e,o){var n=o&&o.debug||!1;if(n){var r=document.querySelector("#input-textarea-caret-position-mirror-div");r&&r.parentNode.removeChild(r)}var i=document.createElement("div");i.id="input-textarea-caret-position-mirror-div",document.body.appendChild(i);var a=i.style,d=window.getComputedStyle?getComputedStyle(t):t.currentStyle;a.whiteSpace="pre-wrap","INPUT"!==t.nodeName&&(a.wordWrap="break-word"),a.position="absolute",n||(a.visibility="hidden"),u.forEach(function(t){a[t]=d[t]}),p?t.scrollHeight>parseInt(d.height)&&(a.overflowY="scroll"):a.overflow="hidden",i.textContent=t.value.substring(0,e),"INPUT"===t.nodeName&&(i.textContent=i.textContent.replace(/\s/g," "));var l=document.createElement("span");l.textContent=t.value.substring(e)||".",i.appendChild(l);var c={top:l.offsetTop+parseInt(d.borderTopWidth),left:l.offsetLeft+parseInt(d.borderLeftWidth)};return n?l.style.backgroundColor="#aaa":document.body.removeChild(i),c}void 0!==e&&void 0!==e.exports?e.exports=t:window.getCaretCoordinates=t}()}])});

27
source/js/third-party/anime.min.js vendored
View File

@@ -1,27 +0,0 @@
/*
2017 Julian Garnier
Released under the MIT license
*/
var $jscomp$this=this;
(function(v,p){"function"===typeof define&&define.amd?define([],p):"object"===typeof module&&module.exports?module.exports=p():v.anime=p()})(this,function(){function v(a){if(!g.col(a))try{return document.querySelectorAll(a)}catch(b){}}function p(a){return a.reduce(function(a,d){return a.concat(g.arr(d)?p(d):d)},[])}function w(a){if(g.arr(a))return a;g.str(a)&&(a=v(a)||a);return a instanceof NodeList||a instanceof HTMLCollection?[].slice.call(a):[a]}function F(a,b){return a.some(function(a){return a===b})}
function A(a){var b={},d;for(d in a)b[d]=a[d];return b}function G(a,b){var d=A(a),c;for(c in a)d[c]=b.hasOwnProperty(c)?b[c]:a[c];return d}function B(a,b){var d=A(a),c;for(c in b)d[c]=g.und(a[c])?b[c]:a[c];return d}function S(a){a=a.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(a,b,d,h){return b+b+d+d+h+h});var b=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);a=parseInt(b[1],16);var d=parseInt(b[2],16),b=parseInt(b[3],16);return"rgb("+a+","+d+","+b+")"}function T(a){function b(a,b,c){0>
c&&(c+=1);1<c&&--c;return c<1/6?a+6*(b-a)*c:.5>c?b:c<2/3?a+(b-a)*(2/3-c)*6:a}var d=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(a);a=parseInt(d[1])/360;var c=parseInt(d[2])/100,d=parseInt(d[3])/100;if(0==c)c=d=a=d;else{var e=.5>d?d*(1+c):d+c-d*c,l=2*d-e,c=b(l,e,a+1/3),d=b(l,e,a);a=b(l,e,a-1/3)}return"rgb("+255*c+","+255*d+","+255*a+")"}function x(a){if(a=/([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|pc|vw|vh|deg|rad|turn)?/.exec(a))return a[2]}function U(a){if(-1<a.indexOf("translate"))return"px";
if(-1<a.indexOf("rotate")||-1<a.indexOf("skew"))return"deg"}function H(a,b){return g.fnc(a)?a(b.target,b.id,b.total):a}function C(a,b){if(b in a.style)return getComputedStyle(a).getPropertyValue(b.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase())||"0"}function I(a,b){if(g.dom(a)&&F(V,b))return"transform";if(g.dom(a)&&(a.getAttribute(b)||g.svg(a)&&a[b]))return"attribute";if(g.dom(a)&&"transform"!==b&&C(a,b))return"css";if(null!=a[b])return"object"}function W(a,b){var d=U(b),d=-1<b.indexOf("scale")?
1:0+d;a=a.style.transform;if(!a)return d;for(var c=[],e=[],l=[],h=/(\w+)\((.+?)\)/g;c=h.exec(a);)e.push(c[1]),l.push(c[2]);a=l.filter(function(a,c){return e[c]===b});return a.length?a[0]:d}function J(a,b){switch(I(a,b)){case "transform":return W(a,b);case "css":return C(a,b);case "attribute":return a.getAttribute(b)}return a[b]||0}function K(a,b){var d=/^(\*=|\+=|-=)/.exec(a);if(!d)return a;b=parseFloat(b);a=parseFloat(a.replace(d[0],""));switch(d[0][0]){case "+":return b+a;case "-":return b-a;case "*":return b*
a}}function D(a){return g.obj(a)&&a.hasOwnProperty("totalLength")}function X(a,b){function d(c){c=void 0===c?0:c;return a.el.getPointAtLength(1<=b+c?b+c:0)}var c=d(),e=d(-1),l=d(1);switch(a.property){case "x":return c.x;case "y":return c.y;case "angle":return 180*Math.atan2(l.y-e.y,l.x-e.x)/Math.PI}}function L(a,b){var d=/-?\d*\.?\d+/g;a=D(a)?a.totalLength:a;if(g.col(a))b=g.rgb(a)?a:g.hex(a)?S(a):g.hsl(a)?T(a):void 0;else{var c=x(a);a=c?a.substr(0,a.length-c.length):a;b=b?a+b:a}b+="";return{original:b,
numbers:b.match(d)?b.match(d).map(Number):[0],strings:b.split(d)}}function Y(a,b){return b.reduce(function(b,c,e){return b+a[e-1]+c})}function M(a){return(a?p(g.arr(a)?a.map(w):w(a)):[]).filter(function(a,d,c){return c.indexOf(a)===d})}function Z(a){var b=M(a);return b.map(function(a,c){return{target:a,id:c,total:b.length}})}function aa(a,b){var d=A(b);if(g.arr(a)){var c=a.length;2!==c||g.obj(a[0])?g.fnc(b.duration)||(d.duration=b.duration/c):a={value:a}}return w(a).map(function(a,c){c=c?0:b.delay;
a=g.obj(a)&&!D(a)?a:{value:a};g.und(a.delay)&&(a.delay=c);return a}).map(function(a){return B(a,d)})}function ba(a,b){var d={},c;for(c in a){var e=H(a[c],b);g.arr(e)&&(e=e.map(function(a){return H(a,b)}),1===e.length&&(e=e[0]));d[c]=e}d.duration=parseFloat(d.duration);d.delay=parseFloat(d.delay);return d}function ca(a){return g.arr(a)?y.apply(this,a):N[a]}function da(a,b){var d;return a.tweens.map(function(c){c=ba(c,b);var e=c.value,l=J(b.target,a.name),h=d?d.to.original:l,h=g.arr(e)?e[0]:h,m=K(g.arr(e)?
e[1]:e,h),l=x(m)||x(h)||x(l);c.isPath=D(e);c.from=L(h,l);c.to=L(m,l);c.start=d?d.end:a.offset;c.end=c.start+c.delay+c.duration;c.easing=ca(c.easing);c.elasticity=(1E3-Math.min(Math.max(c.elasticity,1),999))/1E3;g.col(c.from.original)&&(c.round=1);return d=c})}function ea(a,b){return p(a.map(function(a){return b.map(function(b){var c=I(a.target,b.name);if(c){var d=da(b,a);b={type:c,property:b.name,animatable:a,tweens:d,duration:d[d.length-1].end,delay:d[0].delay}}else b=void 0;return b})})).filter(function(a){return!g.und(a)})}
function O(a,b,d){var c="delay"===a?Math.min:Math.max;return b.length?c.apply(Math,b.map(function(b){return b[a]})):d[a]}function fa(a){var b=G(ga,a),d=G(ha,a),c=Z(a.targets),e=[],g=B(b,d),h;for(h in a)g.hasOwnProperty(h)||"targets"===h||e.push({name:h,offset:g.offset,tweens:aa(a[h],d)});a=ea(c,e);return B(b,{children:[],animatables:c,animations:a,duration:O("duration",a,d),delay:O("delay",a,d)})}function n(a){function b(){return window.Promise&&new Promise(function(a){return Q=a})}function d(a){return f.reversed?
f.duration-a:a}function c(a){for(var b=0,c={},d=f.animations,e={};b<d.length;){var g=d[b],h=g.animatable,m=g.tweens;e.tween=m.filter(function(b){return a<b.end})[0]||m[m.length-1];e.isPath$1=e.tween.isPath;e.round=e.tween.round;e.eased=e.tween.easing(Math.min(Math.max(a-e.tween.start-e.tween.delay,0),e.tween.duration)/e.tween.duration,e.tween.elasticity);m=Y(e.tween.to.numbers.map(function(a){return function(b,c){c=a.isPath$1?0:a.tween.from.numbers[c];b=c+a.eased*(b-c);a.isPath$1&&(b=X(a.tween.value,
b));a.round&&(b=Math.round(b*a.round)/a.round);return b}}(e)),e.tween.to.strings);ia[g.type](h.target,g.property,m,c,h.id);g.currentValue=m;b++;e={isPath$1:e.isPath$1,tween:e.tween,eased:e.eased,round:e.round}}if(c)for(var k in c)E||(E=C(document.body,"transform")?"transform":"-webkit-transform"),f.animatables[k].target.style[E]=c[k].join(" ");f.currentTime=a;f.progress=a/f.duration*100}function e(a){if(f[a])f[a](f)}function g(){f.remaining&&!0!==f.remaining&&f.remaining--}function h(a){var h=f.duration,
l=f.offset,n=f.delay,P=f.currentTime,q=f.reversed,r=d(a),r=Math.min(Math.max(r,0),h);if(f.children){var p=f.children;if(r>=f.currentTime)for(var u=0;u<p.length;u++)p[u].seek(r);else for(u=p.length;u--;)p[u].seek(r)}r>l&&r<h?(c(r),!f.began&&r>=n&&(f.began=!0,e("begin")),e("run")):(r<=l&&0!==P&&(c(0),q&&g()),r>=h&&P!==h&&(c(h),q||g()));a>=h&&(f.remaining?(t=m,"alternate"===f.direction&&(f.reversed=!f.reversed)):(f.pause(),"Promise"in window&&(Q(),R=b()),f.completed||(f.completed=!0,e("complete"))),
k=0);e("update")}a=void 0===a?{}:a;var m,t,k=0,Q=null,R=b(),f=fa(a);f.reset=function(){var a=f.direction,b=f.loop;f.currentTime=0;f.progress=0;f.paused=!0;f.began=!1;f.completed=!1;f.reversed="reverse"===a;f.remaining="alternate"===a&&1===b?2:b;for(a=f.children.length;a--;)b=f.children[a],b.seek(b.offset),b.reset()};f.tick=function(a){m=a;t||(t=m);h((k+m-t)*n.speed)};f.seek=function(a){h(d(a))};f.pause=function(){var a=q.indexOf(f);-1<a&&q.splice(a,1);f.paused=!0};f.play=function(){f.paused&&(f.paused=
!1,t=0,k=d(f.currentTime),q.push(f),z||ja())};f.reverse=function(){f.reversed=!f.reversed;t=0;k=d(f.currentTime)};f.restart=function(){f.pause();f.reset();f.play()};f.finished=R;f.reset();f.autoplay&&f.play();return f}var ga={update:void 0,begin:void 0,run:void 0,complete:void 0,loop:1,direction:"normal",autoplay:!0,offset:0},ha={duration:1E3,delay:0,easing:"easeOutElastic",elasticity:500,round:0},V="translateX translateY translateZ rotate rotateX rotateY rotateZ scale scaleX scaleY scaleZ skewX skewY".split(" "),
E,g={arr:function(a){return Array.isArray(a)},obj:function(a){return-1<Object.prototype.toString.call(a).indexOf("Object")},svg:function(a){return a instanceof SVGElement},dom:function(a){return a.nodeType||g.svg(a)},str:function(a){return"string"===typeof a},fnc:function(a){return"function"===typeof a},und:function(a){return"undefined"===typeof a},hex:function(a){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a)},rgb:function(a){return/^rgb/.test(a)},hsl:function(a){return/^hsl/.test(a)},col:function(a){return g.hex(a)||
g.rgb(a)||g.hsl(a)}},y=function(){function a(a,d,c){return(((1-3*c+3*d)*a+(3*c-6*d))*a+3*d)*a}return function(b,d,c,e){if(0<=b&&1>=b&&0<=c&&1>=c){var g=new Float32Array(11);if(b!==d||c!==e)for(var h=0;11>h;++h)g[h]=a(.1*h,b,c);return function(h){if(b===d&&c===e)return h;if(0===h)return 0;if(1===h)return 1;for(var m=0,k=1;10!==k&&g[k]<=h;++k)m+=.1;--k;var k=m+(h-g[k])/(g[k+1]-g[k])*.1,l=3*(1-3*c+3*b)*k*k+2*(3*c-6*b)*k+3*b;if(.001<=l){for(m=0;4>m;++m){l=3*(1-3*c+3*b)*k*k+2*(3*c-6*b)*k+3*b;if(0===l)break;
var n=a(k,b,c)-h,k=k-n/l}h=k}else if(0===l)h=k;else{var k=m,m=m+.1,f=0;do n=k+(m-k)/2,l=a(n,b,c)-h,0<l?m=n:k=n;while(1e-7<Math.abs(l)&&10>++f);h=n}return a(h,d,e)}}}}(),N=function(){function a(a,b){return 0===a||1===a?a:-Math.pow(2,10*(a-1))*Math.sin(2*(a-1-b/(2*Math.PI)*Math.asin(1))*Math.PI/b)}var b="Quad Cubic Quart Quint Sine Expo Circ Back Elastic".split(" "),d={In:[[.55,.085,.68,.53],[.55,.055,.675,.19],[.895,.03,.685,.22],[.755,.05,.855,.06],[.47,0,.745,.715],[.95,.05,.795,.035],[.6,.04,.98,
.335],[.6,-.28,.735,.045],a],Out:[[.25,.46,.45,.94],[.215,.61,.355,1],[.165,.84,.44,1],[.23,1,.32,1],[.39,.575,.565,1],[.19,1,.22,1],[.075,.82,.165,1],[.175,.885,.32,1.275],function(b,c){return 1-a(1-b,c)}],InOut:[[.455,.03,.515,.955],[.645,.045,.355,1],[.77,0,.175,1],[.86,0,.07,1],[.445,.05,.55,.95],[1,0,0,1],[.785,.135,.15,.86],[.68,-.55,.265,1.55],function(b,c){return.5>b?a(2*b,c)/2:1-a(-2*b+2,c)/2}]},c={linear:y(.25,.25,.75,.75)},e={},l;for(l in d)e.type=l,d[e.type].forEach(function(a){return function(d,
e){c["ease"+a.type+b[e]]=g.fnc(d)?d:y.apply($jscomp$this,d)}}(e)),e={type:e.type};return c}(),ia={css:function(a,b,d){return a.style[b]=d},attribute:function(a,b,d){return a.setAttribute(b,d)},object:function(a,b,d){return a[b]=d},transform:function(a,b,d,c,e){c[e]||(c[e]=[]);c[e].push(b+"("+d+")")}},q=[],z=0,ja=function(){function a(){z=requestAnimationFrame(b)}function b(b){var c=q.length;if(c){for(var d=0;d<c;)q[d]&&q[d].tick(b),d++;a()}else cancelAnimationFrame(z),z=0}return a}();n.version="2.0.2";
n.speed=1;n.running=q;n.remove=function(a){a=M(a);for(var b=q.length;b--;)for(var d=q[b],c=d.animations,e=c.length;e--;)F(a,c[e].animatable.target)&&(c.splice(e,1),c.length||d.pause())};n.getValue=J;n.path=function(a,b){var d=g.str(a)?v(a)[0]:a,c=b||100;return function(a){return{el:d,property:a,totalLength:d.getTotalLength()*(c/100)}}};n.setDashoffset=function(a){var b=a.getTotalLength();a.setAttribute("stroke-dasharray",b);return b};n.bezier=y;n.easings=N;n.timeline=function(a){var b=n(a);b.pause();
b.duration=0;b.add=function(a){b.children.forEach(function(a){a.began=!0;a.completed=!0});w(a).forEach(function(a){var c=b.duration,d=a.offset;a.autoplay=!1;a.offset=g.und(d)?c:K(d,c);b.seek(a.offset);a=n(a);a.duration>c&&(b.duration=a.duration);a.began=!0;b.children.push(a)});b.reset();b.seek(0);b.autoplay&&b.restart();return b};return b};n.random=function(a,b){return Math.floor(Math.random()*(b-a+1))+a};return n});

88
source/js/third-party/canvas-nest.js vendored
View File

@@ -1,88 +0,0 @@
! function () {
var cn = document.getElementById('canvas_nest');
var mb = cn.getAttribute("mobile");
if (mb == 'false' && (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent))) {
return;
}
function o(w, v, i) {
return w.getAttribute(v) || i
}
function j(i) {
return document.getElementsByTagName(i)
}
function l() {
var i = j("script"),
w = i.length,
v = i[w - 1];
return {
l: w,
z: o(v, "zIndex", -1),
o: o(v, "opacity", 0.5),
c: o(v, "color", "0,0,0"),
n: o(v, "count", 99)
}
}
function k() {
r = u.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, n = u.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}
function b() {
e.clearRect(0, 0, r, n);
var w = [f].concat(t);
var x, v, A, B, z, y;
t.forEach(function (i) {
i.x += i.xa, i.y += i.ya, i.xa *= i.x > r || i.x < 0 ? -1 : 1, i.ya *= i.y > n || i.y < 0 ? -1 : 1, e.fillRect(i.x - 0.5, i.y - 0.5, 1, 1);
for (v = 0; v < w.length; v++) {
x = w[v];
if (i !== x && null !== x.x && null !== x.y) {
B = i.x - x.x, z = i.y - x.y, y = B * B + z * z;
y < x.max && (x === f && y >= x.max / 2 && (i.x -= 0.03 * B, i.y -= 0.03 * z), A = (x.max - y) / x.max, e.beginPath(), e.lineWidth = A / 2, e.strokeStyle = "rgba(" + s.c + "," + (A + 0.2) + ")", e.moveTo(i.x, i.y), e.lineTo(x.x, x.y), e.stroke())
}
}
w.splice(w.indexOf(i), 1)
}), m(b)
}
var u = document.createElement("canvas"),
s = l(),
c = "c_n" + s.l,
e = u.getContext("2d"),
r, n, m = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (i) {
window.setTimeout(i, 1000 / 45)
},
a = Math.random,
f = {
x: null,
y: null,
max: 20000
};
u.id = c;
u.style.cssText = "position:fixed;top:0;left:0;z-index:" + s.z + ";opacity:" + s.o;
j("body")[0].appendChild(u);
k(), window.onresize = k;
window.onmousemove = function (i) {
i = i || window.event, f.x = i.clientX, f.y = i.clientY
}, window.onmouseout = function () {
f.x = null, f.y = null
};
for (var t = [], p = 0; s.n > p; p++) {
var h = a() * r,
g = a() * n,
q = 2 * a() - 1,
d = 2 * a() - 1;
t.push({
x: h,
y: g,
xa: q,
ya: d,
max: 6000
})
}
setTimeout(function () {
b()
}, 100)
}();

91
source/js/third-party/canvas-ribbon.js vendored
View File

@@ -1,91 +0,0 @@
/**
* Copyright (c) 2016 hustcc
* License: MIT
* Version: v1.0.1
* GitHub: https://github.com/hustcc/ribbon.js
**/
!(function () {
var script = document.getElementById('ribbon');
var mb = script.getAttribute("mobile");
if (mb == 'false' && (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent))) {
return;
}
config = {
z: attr(script, 'zIndex', -1), // z-index
a: attr(script, 'alpha', 0.6), // alpha
s: attr(script, 'size', 90), // size
c: attr(script, 'data-click', true) // click-to-change
}
function attr (node, attr, default_value) {
if (default_value === true) {
return node.getAttribute(attr) || default_value
}
return Number(node.getAttribute(attr)) || default_value
}
var canvas = document.createElement('canvas'),
g2d = canvas.getContext('2d'),
pr = window.devicePixelRatio || 1,
width = window.innerWidth,
height = window.innerHeight,
f = config.s,
q,
t,
m = Math,
r = 0,
pi = m.PI * 2,
cos = m.cos,
random = m.random
canvas.width = width * pr
canvas.height = height * pr
g2d.scale(pr, pr)
g2d.globalAlpha = config.a
canvas.style.cssText =
'opacity: ' +
config.a +
';position:fixed;top:0;left:0;z-index: ' +
config.z +
';width:100%;height:100%;pointer-events:none;'
// create canvas
document.getElementsByTagName('body')[0].appendChild(canvas)
function redraw () {
g2d.clearRect(0, 0, width, height)
q = [{ x: 0, y: height * 0.7 + f }, { x: 0, y: height * 0.7 - f }]
while (q[1].x < width + f) draw(q[0], q[1])
}
function draw (i, j) {
g2d.beginPath()
g2d.moveTo(i.x, i.y)
g2d.lineTo(j.x, j.y)
var k = j.x + (random() * 2 - 0.25) * f,
n = line(j.y)
g2d.lineTo(k, n)
g2d.closePath()
r -= pi / -50
g2d.fillStyle =
'#' +
(
((cos(r) * 127 + 128) << 16) |
((cos(r + pi / 3) * 127 + 128) << 8) |
(cos(r + (pi / 3) * 2) * 127 + 128)
).toString(16)
g2d.fill()
q[0] = q[1]
q[1] = { x: k, y: n }
}
function line (p) {
t = p + (random() * 2 - 1.1) * f
return t > height || t < 0 ? line(p) : t
}
if (config.c !== 'false') {
document.onclick = redraw
document.ontouchstart = redraw
}
redraw()
})()

1
source/js/third-party/click_heart.js vendored
View File

@@ -1 +0,0 @@
!function(e,t,a){function r(e){var a=t.createElement("div");a.className="heart",n.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}),t.body.appendChild(a)}var n=[];e.requestAnimationFrame=e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)},function(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),function(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),r(e)}}(),function e(){for(var a=0;a<n.length;a++)n[a].alpha<=0?(t.body.removeChild(n[a].el),n.splice(a,1)):(n[a].y--,n[a].scale+=.004,n[a].alpha-=.013,n[a].el.style.cssText="left:"+n[a].x+"px;top:"+n[a].y+"px;opacity:"+n[a].alpha+";transform:scale("+n[a].scale+","+n[a].scale+") rotate(45deg);background:"+n[a].color+";z-index:99999");requestAnimationFrame(e)}()}(window,document);

129
source/js/third-party/fireworks.js vendored
View File

@@ -1,129 +0,0 @@
var canvasEl = document.querySelector('.fireworks')
if (canvasEl) {
var ctx = canvasEl.getContext('2d')
var numberOfParticules = 30
var pointerX = 0
var pointerY = 0
// var tap = ('ontouchstart' in window || navigator.msMaxTouchPoints) ? 'touchstart' : 'mousedown'
// Fixed the mobile scroll
var tap = 'mousedown'
var colors = ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C']
var setCanvasSize = debounce(function () {
canvasEl.width = window.innerWidth
canvasEl.height = window.innerHeight
canvasEl.style.width = window.innerWidth + 'px'
canvasEl.style.height = window.innerHeight + 'px'
canvasEl.getContext('2d').scale(1, 1)
}, 500)
var render = anime({
duration: Infinity,
update: function () {
ctx.clearRect(0, 0, canvasEl.width, canvasEl.height)
}
})
document.addEventListener(tap, function (e) {
if (e.target.id !== 'sidebar' && e.target.id !== 'toggle-sidebar' && e.target.nodeName !== 'A' && e.target.nodeName !== 'IMG') {
render.play()
updateCoords(e)
animateParticules(pointerX, pointerY)
}
}, false)
setCanvasSize()
window.addEventListener('resize', setCanvasSize, false)
}
function updateCoords (e) {
pointerX = (e.clientX || e.touches[0].clientX) - canvasEl.getBoundingClientRect().left
pointerY = e.clientY || e.touches[0].clientY - canvasEl.getBoundingClientRect().top
}
function setParticuleDirection (p) {
var angle = anime.random(0, 360) * Math.PI / 180
var value = anime.random(50, 180)
var radius = [-1, 1][anime.random(0, 1)] * value
return {
x: p.x + radius * Math.cos(angle),
y: p.y + radius * Math.sin(angle)
}
}
function createParticule (x, y) {
var p = {}
p.x = x
p.y = y
p.color = colors[anime.random(0, colors.length - 1)]
p.radius = anime.random(16, 32)
p.endPos = setParticuleDirection(p)
p.draw = function () {
ctx.beginPath()
ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true)
ctx.fillStyle = p.color
ctx.fill()
}
return p
}
function createCircle (x, y) {
var p = {}
p.x = x
p.y = y
p.color = '#F00'
p.radius = 0.1
p.alpha = 0.5
p.lineWidth = 6
p.draw = function () {
ctx.globalAlpha = p.alpha
ctx.beginPath()
ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true)
ctx.lineWidth = p.lineWidth
ctx.strokeStyle = p.color
ctx.stroke()
ctx.globalAlpha = 1
}
return p
}
function renderParticule (anim) {
for (var i = 0; i < anim.animatables.length; i++) {
anim.animatables[i].target.draw()
}
}
function animateParticules (x, y) {
var circle = createCircle(x, y)
var particules = []
for (var i = 0; i < numberOfParticules; i++) {
particules.push(createParticule(x, y))
}
anime.timeline().add({
targets: particules,
x: function (p) {
return p.endPos.x
},
y: function (p) {
return p.endPos.y
},
radius: 0.1,
duration: anime.random(1200, 1800),
easing: 'easeOutExpo',
update: renderParticule
})
.add({
targets: circle,
radius: anime.random(80, 160),
lineWidth: 0,
alpha: {
value: 0,
easing: 'linear',
duration: anime.random(600, 800)
},
duration: anime.random(1200, 1800),
easing: 'easeOutExpo',
update: renderParticule,
offset: 0
})
}

12
source/js/third-party/jquery.fancybox.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
source/js/third-party/jquery.min.js vendored
View File

File diff suppressed because one or more lines are too long

334
source/js/third-party/piao.js vendored
View File

@@ -1,334 +0,0 @@
(function (name, factory) {
if (typeof window === "object") {
window[name] = factory()
}
})("Ribbons", function () {
var _w = window,
_b = document.body,
_d = document.documentElement;
var random = function () {
if (arguments.length === 1) {
if (Array.isArray(arguments[0])) {
var index = Math.round(random(0, arguments[0].length - 1));
return arguments[0][index]
}
return random(0, arguments[0])
} else if (arguments.length === 2) {
return Math.random() * (arguments[1] - arguments[0]) + arguments[0]
}
return 0
};
var screenInfo = function (e) {
var width = Math.max(0, _w.innerWidth || _d.clientWidth || _b.clientWidth || 0),
height = Math.max(0, _w.innerHeight || _d.clientHeight || _b.clientHeight || 0),
scrollx = Math.max(0, _w.pageXOffset || _d.scrollLeft || _b.scrollLeft || 0) - (_d.clientLeft || 0),
scrolly = Math.max(0, _w.pageYOffset || _d.scrollTop || _b.scrollTop || 0) - (_d.clientTop || 0);
return {
width: width,
height: height,
ratio: width / height,
centerx: width / 2,
centery: height / 2,
scrollx: scrollx,
scrolly: scrolly
}
};
var mouseInfo = function (e) {
var screen = screenInfo(e),
mousex = e ? Math.max(0, e.pageX || e.clientX || 0) : 0,
mousey = e ? Math.max(0, e.pageY || e.clientY || 0) : 0;
return {
mousex: mousex,
mousey: mousey,
centerx: mousex - screen.width / 2,
centery: mousey - screen.height / 2
}
};
var Point = function (x, y) {
this.x = 0;
this.y = 0;
this.set(x, y)
};
Point.prototype = {
constructor: Point,
set: function (x, y) {
this.x = x || 0;
this.y = y || 0
},
copy: function (point) {
this.x = point.x || 0;
this.y = point.y || 0;
return this
},
multiply: function (x, y) {
this.x *= x || 1;
this.y *= y || 1;
return this
},
divide: function (x, y) {
this.x /= x || 1;
this.y /= y || 1;
return this
},
add: function (x, y) {
this.x += x || 0;
this.y += y || 0;
return this
},
subtract: function (x, y) {
this.x -= x || 0;
this.y -= y || 0;
return this
},
clampX: function (min, max) {
this.x = Math.max(min, Math.min(this.x, max));
return this
},
clampY: function (min, max) {
this.y = Math.max(min, Math.min(this.y, max));
return this
},
flipX: function () {
this.x *= -1;
return this
},
flipY: function () {
this.y *= -1;
return this
}
};
var Factory = function (options) {
this._canvas = null;
this._context = null;
this._sto = null;
this._width = 0;
this._height = 0;
this._scroll = 0;
this._ribbons = [];
this._options = {
colorSaturation: "80%",
colorBrightness: "60%",
colorAlpha: 0.65,
colorCycleSpeed: 6,
verticalPosition: "center",
horizontalSpeed: 150,
ribbonCount: 5,
strokeSize: 5,
parallaxAmount: -0.5,
animateSections: true
};
this._onDraw = this._onDraw.bind(this);
this._onResize = this._onResize.bind(this);
this._onScroll = this._onScroll.bind(this);
this.setOptions(options);
this.init()
};
Factory.prototype = {
constructor: Factory,
setOptions: function (options) {
if (typeof options === "object") {
for (var key in options) {
if (options.hasOwnProperty(key)) {
this._options[key] = options[key]
}
}
}
},
init: function () {
try {
this._canvas = document.createElement("canvas");
this._canvas.style["display"] = "block";
this._canvas.style["position"] = "fixed";
this._canvas.style["margin"] = "0";
this._canvas.style["padding"] = "0";
this._canvas.style["border"] = "0";
this._canvas.style["outline"] = "0";
this._canvas.style["left"] = "0";
this._canvas.style["top"] = "0";
this._canvas.style["width"] = "100%";
this._canvas.style["height"] = "100%";
this._canvas.style["z-index"] = "-1";
this._onResize();
this._context = this._canvas.getContext("2d");
this._context.clearRect(0, 0, this._width, this._height);
this._context.globalAlpha = this._options.colorAlpha;
window.addEventListener("resize", this._onResize);
window.addEventListener("scroll", this._onScroll);
document.body.appendChild(this._canvas)
} catch (e) {
console.warn("Canvas Context Error: " + e.toString());
return
}
this._onDraw()
},
addRibbon: function () {
var dir = Math.round(random(1, 9)) > 5 ? "right" : "left",
stop = 1000,
hide = 200,
min = 0 - hide,
max = this._width + hide,
movex = 0,
movey = 0,
startx = dir === "right" ? min : max,
starty = Math.round(random(0, this._height));
if (/^(top|min)$/i.test(this._options.verticalPosition)) {
starty = 0 + hide
} else if (/^(middle|center)$/i.test(this._options.verticalPosition)) {
starty = this._height / 2
} else if (/^(bottom|max)$/i.test(this._options.verticalPosition)) {
starty = this._height - hide
}
var ribbon = [],
point1 = new Point(startx, starty),
point2 = new Point(startx, starty),
point3 = null,
color = Math.round(random(0, 360)),
delay = 0;
while (true) {
if (stop <= 0) break;
stop--;
movex = Math.round((Math.random() * 1 - 0.2) * this._options.horizontalSpeed);
movey = Math.round((Math.random() * 1 - 0.5) * (this._height * 0.25));
point3 = new Point();
point3.copy(point2);
if (dir === "right") {
point3.add(movex, movey);
if (point2.x >= max) break
} else if (dir === "left") {
point3.subtract(movex, movey);
if (point2.x <= min) break
}
ribbon.push({
point1: new Point(point1.x, point1.y),
point2: new Point(point2.x, point2.y),
point3: point3,
color: color,
delay: delay,
dir: dir,
alpha: 0,
phase: 0
});
point1.copy(point2);
point2.copy(point3);
delay += 4;
color += this._options.colorCycleSpeed
}
this._ribbons.push(ribbon)
},
_drawRibbonSection: function (section) {
if (section) {
if (section.phase >= 1 && section.alpha <= 0) {
return true
}
if (section.delay <= 0) {
section.phase += 0.02;
section.alpha = Math.sin(section.phase) * 1;
section.alpha = section.alpha <= 0 ? 0 : section.alpha;
section.alpha = section.alpha >= 1 ? 1 : section.alpha;
if (this._options.animateSections) {
var mod = Math.sin(1 + section.phase * Math.PI / 2) * 0.1;
if (section.dir === "right") {
section.point1.add(mod, 0);
section.point2.add(mod, 0);
section.point3.add(mod, 0)
} else {
section.point1.subtract(mod, 0);
section.point2.subtract(mod, 0);
section.point3.subtract(mod, 0)
}
section.point1.add(0, mod);
section.point2.add(0, mod);
section.point3.add(0, mod)
}
} else {
section.delay -= 0.5
}
var s = this._options.colorSaturation,
l = this._options.colorBrightness,
c = "hsla(" + section.color + ", " + s + ", " + l + ", " + section.alpha + " )";
this._context.save();
if (this._options.parallaxAmount !== 0) {
this._context.translate(0, this._scroll * this._options.parallaxAmount)
}
this._context.beginPath();
this._context.moveTo(section.point1.x, section.point1.y);
this._context.lineTo(section.point2.x, section.point2.y);
this._context.lineTo(section.point3.x, section.point3.y);
this._context.fillStyle = c;
this._context.fill();
if (this._options.strokeSize > 0) {
this._context.lineWidth = this._options.strokeSize;
this._context.strokeStyle = c;
this._context.lineCap = "round";
this._context.stroke()
}
this._context.restore()
}
return false
},
_onDraw: function () {
for (var i = 0, t = this._ribbons.length; i < t; ++i) {
if (!this._ribbons[i]) {
this._ribbons.splice(i, 1)
}
}
this._context.clearRect(0, 0, this._width, this._height);
for (var a = 0; a < this._ribbons.length; ++a) {
var ribbon = this._ribbons[a],
numSections = ribbon.length,
numDone = 0;
for (var b = 0; b < numSections; ++b) {
if (this._drawRibbonSection(ribbon[b])) {
numDone++
}
}
if (numDone >= numSections) {
this._ribbons[a] = null
}
}
if (this._ribbons.length < this._options.ribbonCount) {
this.addRibbon()
}
requestAnimationFrame(this._onDraw)
},
_onResize: function (e) {
var screen = screenInfo(e);
this._width = screen.width;
this._height = screen.height;
if (this._canvas) {
this._canvas.width = this._width;
this._canvas.height = this._height;
if (this._context) {
this._context.globalAlpha = this._options.colorAlpha
}
}
},
_onScroll: function (e) {
var screen = screenInfo(e);
this._scroll = screen.scrolly
}
};
return Factory
});
var cn = document.getElementById('ribbon_piao');
var mb = cn.getAttribute("mobile");
if ( mb == 'false' && (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent))) {
} else {
new Ribbons({
colorSaturation: "60%",
colorBrightness: "50%",
colorAlpha: 0.5,
colorCycleSpeed: 5,
verticalPosition: "random",
horizontalSpeed: 200,
ribbonCount: 3,
strokeSize: 0,
parallaxAmount: -0.2,
animateSections: true
});
}

170
source/js/tw_cn.js
View File

File diff suppressed because one or more lines are too long

117
source/js/utils.js
View File

@@ -1,4 +1,8 @@
function debounce(func, wait, immediate) {
/**
* function
*/
function debounce (func, wait, immediate) {
var timeout
return function () {
var context = this
@@ -14,92 +18,89 @@ function debounce(func, wait, immediate) {
}
};
function throttle(func, wait, options) {
var timeout, context, args, result;
var previous = 0;
if (!options) options = {};
function throttle (func, wait, options) {
var timeout, context, args
var previous = 0
if (!options) options = {}
var later = function() {
previous = options.leading === false ? 0 : new Date().getTime();
timeout = null;
func.apply(context, args);
if (!timeout) context = args = null;
};
var later = function () {
previous = options.leading === false ? 0 : new Date().getTime()
timeout = null
func.apply(context, args)
if (!timeout) context = args = null
}
var throttled = function() {
var now = new Date().getTime();
if (!previous && options.leading === false) previous = now;
var remaining = wait - (now - previous);
context = this;
args = arguments;
if (remaining <= 0 || remaining > wait) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
func.apply(context, args);
if (!timeout) context = args = null;
} else if (!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaining);
var throttled = function () {
var now = new Date().getTime()
if (!previous && options.leading === false) previous = now
var remaining = wait - (now - previous)
context = this
args = arguments
if (remaining <= 0 || remaining > wait) {
if (timeout) {
clearTimeout(timeout)
timeout = null
}
};
previous = now
func.apply(context, args)
if (!timeout) context = args = null
} else if (!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaining)
}
}
return throttled;
return throttled
}
function isMobile() {
function isMobile () {
var check = false;
(function (a) { if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true })(navigator.userAgent || navigator.vendor || window.opera)
return check
};
function scrollTo(name) {
var scroll_offset = $(name).offset();
$("body,html").animate({
scrollTop: scroll_offset.top
})
function scrollTo (name) {
var scrollOffset = $(name).offset()
$('body,html').animate({
scrollTop: scrollOffset.top
})
};
function loadScript(url, callback) {
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState) { //IE
function loadScript (url, callback) {
var script = document.createElement('script')
script.type = 'text/javascript'
if (script.readyState) { // IE
script.onreadystatechange = function () {
if (script.readyState == "loaded" ||
script.readyState == "complete") {
script.onreadystatechange = null;
callback();
if (script.readyState === 'loaded' ||
script.readyState === 'complete') {
script.onreadystatechange = null
callback()
}
};
} else { //Others
}
} else { // Others
script.onload = function () {
callback();
};
callback()
}
}
script.src = url;
document.body.appendChild(script);
script.src = url
document.body.appendChild(script)
};
function snackbarShow(text, showAction, duration) {
var showAction = (typeof showAction !== 'undefined') ? showAction : false;
var duration = (typeof duration !== 'undefined') ? duration : 2000;
function snackbarShow (text, showAction, duration) {
var a = (typeof showAction !== 'undefined') ? showAction : false
var d = (typeof duration !== 'undefined') ? duration : 2000
var position = GLOBAL_CONFIG.Snackbar.position
var bg = document.documentElement.getAttribute('data-theme') === 'light' ? GLOBAL_CONFIG.Snackbar.bgLight : GLOBAL_CONFIG.Snackbar.bgDark
Snackbar.show({
text: text,
backgroundColor: bg,
showAction: showAction,
duration: duration,
showAction: a,
duration: d,
pos: position
});
})
}
window.debounce = debounce
window.throttle = throttle
window.isMobile = isMobile