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

Breaking Change

Browse Source 
1. 不再支持hexo 4.0.0以下版本
2. 添加hexo fragment_cache,加快生成速度
3. 完善V5圖標顯示，不再需要同時加載V4和v5圖標
4. 去除cheerio依賴
5. 整合豆瓣配置，增加配置遊戲，圖書頁面top_img,可設置是否設置meta,解決部分瀏覽器無法顯示圖片問題
6. 友情鏈接除列表外可自定義內容
7. 可設置主頁標題距離頂部距離
8. 側邊欄可隱藏,可設置手機頁面是否隱藏
9. 增加disqusjs和utterances 兩個評論
10. 主頁文章增加tags和更新日期顯示，可以配置post_meta
11. 首頁subtitle可關閉打字效果，可設置打字效果顯示一次或loop
12. 增加valine和gitalk的配置
13. darkmode配置整理
14. 增加404頁面
15. post_beautify改為beautify，頁面美化不再只限於post頁，page頁也一樣
16. 可設置是否顯示cover，可設置各位置的cover顯示
17. 增加mermaid,可畫流程圖、狀態圖、時序圖、甘特圖等等
18. 增加pangu配置，中英文之間添加空格
19. 整合部分配置
20. post-copyright增加decode網址 (可以顯示中文)
21. 增加部分顏色配置
Feature
1. 適配IE
2. 增加一個Tag Plugins: 圖庫集
3. 增加一個Tag Plugins: tag-hide 功能 inline/block
4. 去除page頁開頭顯示與標題一樣的內容
5. aside 公告欄設置，支持html代碼
6. 手機界面sidebar顯示進度條和加深對應的標題
7. 主頁subtitle 的 hitokoto 顯示內容出處
9. footer 的hexo鏈接改為https
10. 修改手機下，menus和toc的打開效果
11. 手機頁面下，搜索界面全屏顯示
12. SEO優化，標題欄改為h1顯示
13. 閲讀模式優化，可根據light mode 和darkmode調整背景
14. 當屏蔽js時，header會出現（之前用js控制，會隱藏）
Fixed
1. 修復Tencent Analytics的script加載為https #105
2. 修復相關文章，日期顯示錯誤bug
3. 修復gitalk報錯問題
4. 修復當valine background 是絕對地址時無法顯示的bug
5. 修復medium-zoom 無法使用的bug
6. 修復在safari下，點擊或移動到首頁文章cover，圓角變成正方形的bug #114
7. 修復在部分瀏覽器下，aside,友情鏈接頭像轉動變形的bug
8. 修復在寬度限制下，表格內容溢出屏幕外而出現滾動條的bug \#138
9. 修復gitalk js 在一些沒有設置評論的page里加載的bug
10. 修復tag plugins 的gist 在不同主題下的背景顏色問題（黑色主題下，文字不易觀看）
11. 修復highlight figcaption 顯示不全的bug
12. 修復disqus評論數無法獲取的bug
13. 修復子目錄在觸摸屏下點擊,偶爾不出現的bug
14. 修復a標籤太長（連續英文字母）不會換行的bug
15. 修復toc滾動時，閲讀進度條也跟著滾動的bug
16. 修復aside的圖片，可點擊顯示大圖bug
17. 修復activate-power-mode設置參數無效bug
18. 修復語言上的錯誤 \#156
19. 修復主頁在safari桌面端，首頁滾動卡頓的bug
This commit is contained in:
Jerry
2020-03-17 21:28:27 +08:00
Unverified
parent 9c996d0a73
commit 321091befb
125 changed files with 3824 additions and 2684 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,11 +5,12 @@ html
body
position: relative
min-height: 100%
background: $white
background: $body-bg
color: $font-black
font-size: $font-size
font-family: $font-family
line-height: $text-line-height
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
if !hexo-config('copy.enable')
user-select: none
@@ -17,13 +18,6 @@ body
-webkit-user-select: none
-ms-user-select: none
#body-wrap
position: relative
display: flex
flex: 1 auto
flex-direction: column
transition: all .5s
*::-webkit-scrollbar
width: 8px
height: 8px
@@ -59,9 +53,6 @@ h6
code
font-size: inherit !important
#content-outer
flex: 1 auto
*
box-sizing: border-box
@@ -79,8 +70,7 @@ hr
position: relative
margin: 2rem auto
width: calc(100% - 4px)
border: 2px dashed $pale-blue
background: $white
border: 2px dashed lighten($theme-hr-color, 50%)
&:hover
&:before
@@ -91,54 +81,51 @@ hr
top: $hr-icon-top
left: 5%
z-index: 1
color: $light-blue
color: $theme-hr-color
content: $hr-icon
font: normal normal normal 14px / 1 FontAwesome
font-style: normal
font-variant: normal
font-size: 20px
line-height: 1
transition: all 1s ease-in-out
text-rendering: auto
-webkit-font-smoothing: antialiased
if hexo-config('fontawesome_v5') && hexo-config('fontawesome_v5.enable')
font-weight: 600
font-family: 'Font Awesome 5 Free'
else
font-weight: normal
font-family: FontAwesome
iframe
margin: 0 0 1rem
// collapse/expand beautify
details
padding: .3rem
border: 2px solid darken($light-grey, 10%)
summary
color: $theme-color
// set <caption> of <figure> to center-align
// use class="not-code" to avoid conflicts because code also use <figure> tag
.not-code
margin: .5em
padding: .5em
border: thin silver solid
text-align: center
table
display: block
overflow: auto
margin: 0 0 1rem
width: 100%
border-spacing: 0
border-collapse: collapse
empty-cells: show
thead
background: alpha($a-link-color, 10%)
background: alpha($table-thead-bg, 10%)
th,
td
padding: .3rem .6rem
border: 1px solid darken($light-grey, 10%)
vertical-align: top
vertical-align: middle
*::selection
background: $selection
color: $pale-grey
background: $theme-text-selection-color
color: #F7F7F7
// 字體
.full_page #site-title,
.full_page #site-sub-title,
// font
#nav #site_title,
#nav #site_subtitle,
#site-name,
#aside_content .author-info__name,
#aside_content .author-info__description
@@ -170,7 +157,7 @@ table
// button hover
.button--primary
color: $ruby
color: $theme-button-hover-color
.button--animated
transition-duration: 1s
@@ -183,7 +170,7 @@ table
bottom: 0
left: 0
z-index: -1
background: $ruby
background: $theme-button-hover-color
content: ''
transition-timing-function: ease-out
transition-duration: .5s
@@ -196,37 +183,10 @@ table
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
img[src=''],
img:not([src])
opacity: 0
.justified-gallery
margin: 1rem 0
img
opacity: 0
.fancybox
width: auto
text-align: inherit
.img-alt
display: none
.medium-zoom-image--opened
z-index: 99999 !important
margin: 0 !important
.medium-zoom-overlay
z-index: 99999 !important
// hexo tag video
.video-container
position: relative
@@ -243,16 +203,51 @@ img:not([src])
width: 100%
height: 100%
.layout_page,
.layout_post,
// tag-hide
.hide-inline,
.hide-block
& > .hide-button
position: relative
z-index: 1
display: inline-block
padding: 0 1rem
background: $tag-hide-bg
text-align: center
cursor: pointer
&:hover
text-decoration: none !important
& > .hide-content
display: none
.hide-inline
& > .hide-button
margin: 0 .3rem
& > .hide-content
margin: 0 .3rem
.hide-block
margin: 0 0 .8rem
.comment_headling
margin-bottom: 10px
font-weight: 700
font-size: 20px
#content-inner,
#footer
animation: main 1s
#nav,
#top-container
animation: header 1s
#nav
animation: nav-effect 1s
#site-title
#page-header
animation: header-effect 1s
#site_title,
#site_subtitle
animation: titlescale 1s
canvas,
@@ -266,13 +261,33 @@ canvas,
.scroll-down-effects
animation: scroll-down-effect 1.5s infinite
if hexo-config('avatar_effect') == true
if hexo-config('avatar.effect') == true
.avatar-img
animation: avatar_turn_around 2s linear infinite
.reward-main
animation: donate_effcet .3s .1s ease both
.tocOpenPc
.sidebar-toc__title
animation: tocsidebarLtoR .5s
.sidebar-toc__progress
animation: tocsidebarLtoR .7s
.sidebar-toc__content
animation: tocsidebarLtoR .9s
.tocOpenMobile
.sidebar-toc__title
animation: tocsidebarRtoL .5s
.sidebar-toc__progress
animation: tocsidebarRtoL .5s
.sidebar-toc__content
animation: tocsidebarRtoL .7s
@keyframes scroll-down-effect
0%
top: 0
@@ -286,7 +301,7 @@ if hexo-config('avatar_effect') == true
top: 0
opacity: .4
@keyframes header
@keyframes nav-effect
0%
opacity: 0
transform: translateY(-50px)
@@ -295,6 +310,18 @@ if hexo-config('avatar_effect') == true
opacity: 1
transform: translateY(0)
@keyframes header-effect
0%
opacity: 0
50%
opacity: 0
transform: translateY(-50px)
100%
opacity: 1
transform: translateY(0)
@keyframes headerNoOpacity
0%
transform: translateY(-50px)
@@ -369,10 +396,23 @@ if hexo-config('avatar_effect') == true
50%
transform: scale(1.2)
@media screen and (max-width: $bg)
i#toggle-sidebar,
#sidebar
display: none
@keyframes sidebarItem
0%
transform: translateX(200px)
body
padding-left: 0 !important
100%
transform: translateX(0)
@keyframes tocsidebarRtoL
0%
transform: translateX(200px)
100%
transform: translateX(0)
@keyframes tocsidebarLtoR
0%
transform: translateX(-200px)
100%
transform: translateX(0)

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

@@ -10,7 +10,6 @@ $code-block
padding: 0
background: $highlight-background
color: $highlight-foreground
font-size: $code-font-size
line-height: $line-height-code-block
if wordWrap
@@ -28,7 +27,7 @@ blockquote
margin: 0 0 1rem
padding: .1rem .8rem
border-left: .2rem solid $blockquote-padding-color
background-color: lighten($blockquote-padding-color, 33)
background-color: $blockquote-background-color
color: $blockquote-color
a
@@ -46,7 +45,7 @@ blockquote
padding: 0 .3em
content: '—'
.article-container
#article-container
pre,
code
font-family: $code-font !important
@@ -56,7 +55,8 @@ blockquote
background: $code-background
color: $code-foreground
word-wrap: break-word
font-size: $code-font-size
word-break: break-word
overflow-wrap: break-word
pre
@extend $code-block
@@ -68,7 +68,7 @@ blockquote
color: $highlight-foreground
text-shadow: none
.highlight
figure.highlight
@extend $code-block
position: relative
border-radius: 1px
@@ -101,6 +101,7 @@ blockquote
table
position: relative
display: table
margin: 0
width: auto
border: none
@@ -111,23 +112,11 @@ blockquote
figcaption
clearfix()
position: absolute
z-index: 1
margin-bottom: 1em
padding: .2rem 0 .2rem .7rem
width: 100%
height: 1.4em
padding: .3rem 0 .1rem .7rem
color: $highlight-foreground
font-size: 1em
line-height: 1em
span
float: left
overflow: hidden
max-width: 100%
text-overflow: ellipsis
white-space: nowrap
a
float: right
padding-right: 10px
@@ -136,15 +125,6 @@ blockquote
&:hover
border-bottom-color: $highlight-foreground
&+table
margin-top: 1.1rem
&:before
margin-top: -2.1rem
&:after
top: -2.1rem
.gutter pre
padding-right: .5rem
padding-left: .5rem
@@ -285,14 +265,12 @@ blockquote
.highlight-tools
position: relative
overflow: hidden
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

44
source/css/_layout/404.styl Normal file
View File

@@ -0,0 +1,44 @@
if hexo-config('error_404.enable')
#nav.error-no-found
display: flex
flex-direction: column
justify-content: center
height: 100vh
&:before
width: 100%
height: 100%
background-color: alpha($dark-black, .5)
content: ''
#error_info
position: absolute
padding: 0 4rem
width: 100%
letter-spacing: 3px
line-height: 1
#error_title,
#error_subtitle
margin: 0
padding: 0
color: $light-grey
letter-spacing: 5px
font-family: $site-name-font
#error_title
font-size: 10rem
#error_subtitle
font-size: 2rem
@media screen and (max-width: $sm)
#nav.error-no-found
#error_info
padding: 0 2rem
#error_title
font-size: 7rem !important
#error_subtitle
font-size: 1rem !important

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

@@ -1,11 +1,13 @@
#aside_content
width: 25%
.card-widget:not(:first-child)
margin-top: 1rem
.card-widget
overflow: hidden
margin-top: 20px
border-radius: 8px
background: $white
background: $card-bg
box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
transition: all .3s
@@ -15,11 +17,9 @@
.card-info
img
display: inline-block
padding: 5px
width: 120px
height: 120px
width: 110px
height: 110px
border-radius: 70px
vertical-align: top
transition: all .3s
&:hover
@@ -34,21 +34,18 @@
margin-top: -.3rem
.card-info-data
display: flex
padding: .7rem 0
& > .card-info-data-item
flex: 1 1
min-width: 0
display: inline-block
width: 33.3%
a
text-decoration: none
.headline
display: block
overflow: hidden
color: $font-black
text-transform: uppercase
// text-transform: uppercase
text-overflow: ellipsis
white-space: nowrap
font-size: .7rem
@@ -77,8 +74,7 @@
z-index: 1
display: block
background-color: $light-blue
color: $white
text-decoration: none
color: $button-color
text-transform: uppercase
line-height: 1.6rem
@@ -96,7 +92,6 @@
.card-tag-cloud
a
text-decoration: none
word-break: keep-all
&:hover
@@ -111,7 +106,6 @@
& > a
color: $font-black
text-decoration: none
.aside-post-cover
float: left
@@ -134,7 +128,7 @@
.aside-post-title
.aside-post_meta
padding-left: 10px
color: $theme-link-color
color: $theme-meta-color
font-size: .6rem
.aside-post_title
@@ -149,6 +143,10 @@
&:hover
color: $light-blue !important
&.no-aside-cover
.aside-post_title
height: auto
.card-archives ul.archive-list,
.card-categories ul.aside-category-item
margin: 0
@@ -164,19 +162,23 @@
&:hover
padding: .2rem .85rem
background-color: $light-blue
color: #363636
a
display: flex
color: $font-black
text-decoration: none
span
display: inline-block
overflow: hidden
vertical-align: bottom
text-overflow: ellipsis
white-space: nowrap
&:first-child
flex: auto
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
width: 80%
&:last-child
width: 20%
text-align: right
.card-categories
.aside-category-item
@@ -211,6 +213,10 @@
#aside_content
width: 100% !important
#aside_content
.card-widget:first-child
margin-top: 1rem
@media screen and (min-width: 900px)
#aside_content
.card-widget
@@ -219,7 +225,7 @@
else
margin-right: 15px
if hexo-config('aside_mobile') == false
if hexo-config('aside.mobile') == false
@media screen and (max-width: $sm)
#aside_content
display: none

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

@@ -27,7 +27,7 @@
top: 0
left: 0
background: $light-blue
color: $white
color: $card-bg
cursor: pointer
transition: all .3s ease-out
@@ -48,7 +48,7 @@
li
&:hover
&:before
border-color: $ruby
border-color: $theme-button-hover-color
&:before
$w = .3rem
@@ -58,6 +58,6 @@
height: h = w
border: .5 * w solid $light-blue
border-radius: w
background: $white
background: transparent
content: ''
line-height: h

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

@@ -1,68 +0,0 @@
#disqus_thread
margin-top: 1rem
.comment_headling
margin-bottom: 10px
font-weight: 700
font-size: 20px
// valine
#vcomment
font-size: inherit
input
font-size: .65rem
button
padding: .3rem 1rem
border-color: #fff
background-color: $light-blue
color: #fff
font-size: .7rem
&:hover
background-color: darken($light-blue, 40)
textarea
font-size: .7rem
if hexo-config('valine.bg')
background: url(hexo-config('valine.bg')) 100% 100% no-repeat
.info
display: none
.vimg
border: 0
&:hover
transform: rotate(540deg)
.vcount
font-size: .775rem
.vnum
font-size: 1.1rem
.vsys
font-size: 80%
.vtime
font-size: .65rem
.vcontent
font-size: 100%
.vat
padding: 0 .8rem
border: 1px solid $cyan
border-radius: 5px
color: $cyan
font-size: .7125rem
&:hover
background-color: alpha($cyan, .5)
code,
pre
font-size: 98%

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

@@ -1,11 +1,9 @@
.flink
.flink#article-container
.post-cards
margin: -10px 10px 0
.md-links
overflow: auto
margin: 0 auto
padding: 0
text-align: center
& > .md-links-item
@@ -13,11 +11,9 @@
float: left
overflow: hidden
margin: 20px 7px
padding: 0
width: calc(100% / 3 - 14px)
width: calc(100% / 3 - 15px)
height: 90px
border-radius: 8px
list-style: none
line-height: 17px
transform: perspective(1px) translateZ(0)
@@ -45,15 +41,14 @@
transform: scale(1)
a
color: #333
color: $font-color
text-decoration: none
img
float: left
margin: 11px 10px
padding: 4px
width: 70px
height: 70px
margin: 13px 0 0 10px
width: 65px
height: 65px
border-radius: 35px
transition: all .3s
@@ -74,18 +69,14 @@
white-space: nowrap
font-size: 13px
.comment-word
font-weight: bold
font-size: 1.7em
@media screen and (max-width: 1100px)
.flink
.md-links
.md-links-item
width: calc(50% - 14px) !important
width: calc(50% - 15px) !important
@media screen and (max-width: 600px)
.flink
.md-links
.md-links-item
width: calc(100% - 14px) !important
width: calc(100% - 15px) !important

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

@@ -1,6 +1,5 @@
#footer
position: relative
margin-top: 1rem
background: $light-blue
background-attachment: local
background-position: bottom
@@ -9,10 +8,8 @@
if hexo-config('footer_bg') != false
&:before
position: absolute
top: 0
right: 0
bottom: 0
left: 0
width: 100%
height: 100%
background-color: alpha($dark-black, .5)
content: ''
@@ -24,11 +21,11 @@
a
color: $light-grey
text-decoration: none
cursor: pointer
&:hover
color: $white
color: $theme-color
text-decoration: underline
.footer-separator
margin: 0 .2rem

109
source/css/_layout/gallery.styl Normal file
View File

@@ -0,0 +1,109 @@
figure.gallery-group
position: relative
float: left
overflow: hidden
margin: .3rem .2rem
width: calc(50% - .4rem)
height: 250px
border-radius: 8px
background: $dark-black
-webkit-transform: translate3d(0, 0, 0)
&:hover
img
opacity: .4
transform: translate3d(0, 0, 0)
.gallery-group-name::after
transform: translate3d(0, 0, 0)
p
opacity: 1
transform: translate3d(0, 0, 0)
img
position: relative
margin: 0 !important
max-width: none
width: calc(100% + 20px)
height: 250px
backface-visibility: hidden
opacity: .8
transition: opacity .35s, transform .35s
transform: translate3d(-10px, 0, 0)
object-fit: cover
figcaption
position: absolute
top: 0
left: 0
padding: 1.5rem
width: 100%
height: 100%
color: $gallery-color
text-transform: uppercase
backface-visibility: hidden
& > a
position: absolute
top: 0
right: 0
bottom: 0
left: 0
z-index: 1000
opacity: 0
p
display: -webkit-box
overflow: hidden
margin: 0
padding: .4rem 0 0
letter-spacing: 1px
font-size: .8rem
line-height: 1.5
opacity: 0
transition: opacity .35s, transform .35s
transform: translate3d(100%, 0, 0)
-webkit-line-clamp: 4
-webkit-box-orient: vertical
.gallery-group-name
position: relative
display: -webkit-box
overflow: hidden
margin: 0
padding: .4rem 0
font-weight: bold
font-size: 1.2rem
line-height: 1.5
-webkit-line-clamp: 2
-webkit-box-orient: vertical
&:after
position: absolute
bottom: 0
left: 0
width: 100%
height: 2px
background: $gallery-color
content: ''
transition: transform .35s
transform: translate3d(-100%, 0, 0)
.gallery-group-main
overflow: auto
padding: 0 0 .8rem
.justified-gallery
margin: 0 0 .8rem
img
opacity: 0
.fancybox
width: auto
text-align: inherit
@media screen and (max-width: 600px)
figure.gallery-group
width: calc(100% - .4rem)

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

@@ -1,21 +1,39 @@
#nav
position: relative
margin-bottom: 1rem
width: 100%
background-color: $light-blue
background-attachment: local
background-position: center
background-position: center center
background-size: cover
background-repeat: no-repeat
transition: all .5s
// index
&.full_page
display: flex
align-items: center
height: $index_top_img_height
&.not_index_bg
height: 20rem
#site-info
position: absolute
top: $index_site_info_top
padding: 0 .5rem
width: 100%
#site-social-icons
#site_title,
#site_subtitle,
#scroll_down .scroll-down-effects
color: $light-grey
text-align: center
text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
line-height: 1.5
#site_title
margin: 0
font-size: 1.3rem
#site_subtitle
font-size: .8rem
#site_social_icons
display: none
margin: 0 auto
width: 15rem
@@ -28,47 +46,83 @@
font-size: .9rem
cursor: pointer
&:hover
color: $white
#site-info
position: absolute
width: 100%
#site-title,
#site-sub-title
color: $light-grey
text-align: center
text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
line-height: 1.5
#site-title
font-weight: bold
font-size: 1.3rem
#site-sub-title
font-size: .8rem
#page_site-info
position: absolute
top: 10rem
width: 100%
.scroll-down
position: absolute
bottom: 0
width: 100%
height: 42px
text-align: center
font-size: 30px
cursor: pointer
.scroll-down-effects
#scroll_down
position: absolute
color: $white
bottom: 0
width: 100%
cursor: pointer
header
position: relative
.scroll-down-effects
position: relative
width: 100%
font-size: 30px
// page
&.not-index-bg
height: 20rem
#page_site-info
position: absolute
top: 10rem
padding: 0 .5rem
width: 100%
// post
&.post-bg
height: 20rem
&:before
position: absolute
top: 0
left: 0
display: block
width: 100%
height: 100%
background-color: alpha($dark-black, .5)
content: ''
#post-info
position: absolute
bottom: 1.5rem
padding: 0 8%
width: 100%
color: $light-grey
text-align: left
#post-title
margin-bottom: .4rem
font-size: 1.5rem
.posttitle
display: -webkit-box
overflow: hidden
line-height: 1.5
-webkit-line-clamp: 3
-webkit-box-orient: vertical
#post-meta
.word-count,
#busuanzi_value_page_pv,
.comment-count
padding-left: .2rem
.post-meta
&__separator
margin: 0 .3rem
&__icon
margin-right: .2rem
&-pv-cv
display: inline-block
a
color: $light-grey
transition: all .3s ease-out
&:hover
color: $light-blue
text-decoration: underline
#page-header
position: absolute
@@ -79,7 +133,6 @@ header
height: 58px
border: none
font-size: 18px
opacity: 0
transition: all .5s
.toggle-menu
@@ -95,7 +148,6 @@ header
a
color: $light-grey
text-decoration: none
&:hover
color: $white
@@ -109,13 +161,14 @@ header
transition: transform .2s ease-in-out, opacity .2s ease-in-out
&.open-sidebar
.site-page
visibility: hidden
.menus,
#search_button
display: none
a,
#site-name,
.toggle-menu
color: $light-black
color: $font-black
text-shadow: none
&:hover
@@ -129,7 +182,7 @@ header
background-color: $white !important
#site-name
text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
text-shadow: .1rem .1rem .2rem rgba($dark-black, .15)
font-weight: bold
cursor: pointer
@@ -163,7 +216,7 @@ header
transition: all .3s ease-in-out
&:hover
&::after
&:after
width: 100%
.menus_item_child
@@ -174,7 +227,7 @@ header
padding: 0
width: max-content
background-color: alpha($white, .8)
box-shadow: 0 5px 20px -4px rgba(0, 0, 0, .5)
box-shadow: 0 5px 20px -4px rgba($dark-black, .5)
animation: sub_menus .3s .1s ease both
&:before
@@ -194,7 +247,7 @@ header
background: $theme-color
a
color: #3b3a3a
color: $font-black
text-shadow: none
#search_button
@@ -203,34 +256,50 @@ header
.site-page
position: relative
padding-bottom: .3rem
text-shadow: .05rem .05rem .1rem rgba(0, 0, 0, .3)
text-shadow: .05rem .05rem .1rem rgba($dark-black, .3)
font-size: .7rem
cursor: pointer
@media screen and (min-width: $sm)
#site-title
font-size: 2rem
#nav
#site_title
font-size: 2rem
#site-sub-title
font-size: 1.2rem
#site_subtitle
font-size: 1.2rem
@media screen and (max-width: $sm)
#page-header
padding: 10px .8rem
#nav
#site-social-icons
#site_social_icons
display: block
&.not_index_bg
&.not-index-bg
height: 14rem
#page_site-info
top: 7rem
@media screen and (max-width: $bg)
#page-header
&.fixed
&.open-sidebar
.site-page
visibility: visible
&.post-bg
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

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

@@ -7,23 +7,21 @@
left: 0
z-index: 102
display: none
background: alpha($dark-black, .7)
background: alpha($dark-black, .8)
#mobile-sidebar-menus,
#mobile-sidebar-toc
#mobile-sidebar-menus
position: fixed
top: 0
right: -254px
right: -250px
z-index: 103
display: block
overflow: hidden
overflow-y: scroll
width: 250px
height: 100%
background: $white
box-shadow: 0 0 4px alpha($dark-black, .27)
background: #f6f8fa
transition: all .5s
#mobile-sidebar-menus
& > .mobile_author_icon
padding: 1.3rem 1.5rem 0
text-align: center
@@ -31,33 +29,33 @@
img
display: inline-block
padding: 0
width: 120px
height: 120px
width: 110px
height: 110px
border-radius: 70px
vertical-align: top
transition: all .3s
.mobile_post_data
display: flex
justify-content: center
padding: .6rem .5rem 0
.mobile_data_item
flex: 1
display: inline-block
width: 33.3%
.mobile_data_link
a
text-decoration: none
.mobile_data_link
& > a > div
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
.length_num
color: $dark-black
font-size: .9rem
.length_num
color: $dark-black
font-size: .9rem
.headline
display: block
color: $font-black
text-transform: uppercase
font-size: .7rem
.headline
display: block
color: $font-black
// text-transform: uppercase
font-size: .7rem
hr
margin: 1rem auto
@@ -74,7 +72,6 @@
margin: 0
padding: .3rem 1.5rem
color: $font-black
text-decoration: none
text-overflow: ellipsis
text-shadow: none
white-space: nowrap
@@ -106,25 +103,4 @@
.menus_item_child
margin: 0
list-style: none
#mobile-sidebar-toc
padding: 1rem .5rem 5rem .3rem
ol,
li
margin: 0
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
list-style: none

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

@@ -57,7 +57,12 @@
top: 13px
left: 15px
font-size: larger
font-family: 'FontAwesome'
if hexo-config('fontawesome_v5') && hexo-config('fontawesome_v5.enable')
font-weight: 600
font-family: 'Font Awesome 5 Free'
else
font-family: 'FontAwesome'
&.default
if ($note-style == 'flat')

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

@@ -2,22 +2,24 @@
display: flex
align-items: flex-start
margin: 0 auto
padding: 0 15px
padding: 2rem 15px
max-width: 1200px
// index
#recent-posts
width: 75%
& > .recent-post-item:not(:first-child)
margin-top: 1rem
& > .recent-post-item
display: flex
flex-direction: row
align-items: center
margin-top: 20px
padding: 0
height: 280px
border-radius: 8px
background: #fff
background: $card-bg
box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
transition: all .3s
@@ -27,20 +29,20 @@
img.post_bg
transform: scale(1.1)
if hexo-config('index_post_cover') == 'both'
if hexo-config('cover.position') == 'both'
.left_radius
border-radius: 8px 0 0 8px
.right_radius
order: 2
border-radius: 0 8px 8px 0
else if hexo-config('index_post_cover') == 'left'
else if hexo-config('cover.position') == 'left'
.left_radius
border-radius: 8px 0 0 8px
.right_radius
border-radius: 8px 0 0 8px
else if hexo-config('index_post_cover') == 'right'
else if hexo-config('cover.position') == 'right'
.left_radius
order: 2
border-radius: 0 8px 8px 0
@@ -53,6 +55,7 @@
overflow: hidden
width: 45%
height: 280px
-webkit-mask-image: -webkit-radial-gradient(white, black)
img.post_bg
display: block
@@ -73,12 +76,14 @@
padding: 0 40px
width: 55%
&.no-cover
width: 100%
& > .article-title
display: -webkit-box
overflow: hidden
margin-bottom: .3rem
color: $black
text-decoration: none
color: $font-black
text-overflow: ellipsis
word-wrap: break-word
font-size: 1.2rem
@@ -90,36 +95,41 @@
&:hover
color: $light-blue !important
& > time
color: $grey
& > .article-meta-wrap
font-size: 95%
& > .article-meta
color: $grey
& > time
color: $theme-meta-color
& > .article-meta
color: $theme-meta-color
.sticky
color: $theme-button-hover-color
color: $sticky-color
i
margin: 0 .2rem 0 .3rem
margin: 0 .2rem 0 0
.article-meta__separator
margin-left: .3rem
.article-meta__separator,
.article-meta__link
margin: 0 .3rem
.fa-angle-right
margin: 0 0 0 .3rem
margin: 0 .3rem
a.article-meta__categories
color: #858585
text-decoration: none
a.article-meta__categories,
a.article-meta__tags
color: $theme-meta-color
&:hover
color: #49b1f5 !important
color: $light-blue !important
text-decoration: underline
& > .content
display: -webkit-box
overflow: hidden
margin-top: .5rem
height: 90px
margin-top: .3rem
height: 85px
word-break: break-word
-webkit-line-clamp: 3
-webkit-box-orient: vertical
@@ -129,12 +139,11 @@
a
display: inline-block
padding: 0 .4rem
text-decoration: none
cursor: pointer
transition: all .3s
&:hover
color: $ruby !important
color: $theme-button-hover-color !important
transform: scale(1.1)
&__title
@@ -144,40 +153,29 @@
&-tags
text-align: center
#tag,
#category,
#archive
padding: 3rem
.tag-cloud,
#page,
.category-content,
.flink
padding: 40px 44px 44px
#page,
.category-content,
#archive,
.tag-cloud,
.flink,
#tag,
#category
margin-top: 20px
width: 75%
.layout_post > #post,
.layout_page > div:first-child:not(.recent-posts)
padding: 50px 40px
border-radius: 8px
background: $white
background: $card-bg
box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
transition: all .3s
&:hover
box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
.layout_page
& > div:first-child:not(.recent-posts)
width: 75%
.article-sort
margin-left: .5rem
padding-left: 1rem
border-left: 2px solid $pale-blue
border-left: 2px solid lighten($light-blue, 20)
&-title
position: relative
margin-left: .5rem
padding-bottom: 1.2rem
padding-left: 1rem
font-size: 1.2rem
@@ -185,7 +183,7 @@
&:hover
&:before
border-color: $ruby
border-color: $theme-button-hover-color
&:before
position: absolute
@@ -196,7 +194,7 @@
height: h = w
border: .5 * w solid $light-blue
border-radius: w
background: $white
background: $card-bg
content: ''
line-height: h
transition: all .2s ease-in-out
@@ -208,17 +206,19 @@
z-index: 0
width: .1rem
height: 1.3rem
background: $pale-blue
background: lighten($light-blue, 20)
content: ''
&-item
position: relative
margin: 0 0 1rem .5rem
width: 100%
height: 80px
transition: all .2s ease-in-out
&:hover
&:before
border-color: $ruby
border-color: $theme-button-hover-color
&:before
$w = .3rem
@@ -229,12 +229,22 @@
height: h = w
border: .5 * w solid $light-blue
border-radius: w
background: $white
background: $card-bg
content: ''
line-height: h
transition: all .2s ease-in-out
&.no-article-cover
display: flex
flex-direction: column
justify-content: center
.article-sort-post
padding: 0
width: 100%
&.year
height: auto
font-size: 1rem
&:hover
@@ -243,17 +253,15 @@
&:before
top: .7rem
border-color: $ruby
border-color: $theme-button-hover-color
&__time
padding-left: .4rem
color: $a-link-color
font-size: .7rem
&__title
display: -webkit-box
overflow: hidden
height: 60px
color: $font-black
font-size: .75rem
transition: all .3s
@@ -276,23 +284,21 @@
transform: scale(1.1)
&__post
text-decoration: none
cursor: pointer
color: $theme-meta-color
&:hover
color: $a-link-color
color: $theme-meta-color
&-img
display: inline-block
float: left
overflow: hidden
width: 80px
height: 80px
&-post
position: absolute
top: 0
display: inline-block
margin-left: 1rem
padding: 0 1rem
width: calc(100% - 80px)
.category-lists
padding: 1rem 0 1.5rem
@@ -304,12 +310,11 @@
.category-list
a
color: $font-black
text-decoration: none
cursor: pointer
.category-list-count
margin-left: .4rem
color: $a-link-color
color: $theme-meta-color
&:before
content: '('
@@ -317,19 +322,19 @@
&:after
content: ')'
// 隱藏aside
.hide-aside
max-width: 1000px
& > div
width: 100% !important
@media screen and (max-width: $sm)
.layout_page
padding: 0 5px !important
padding: 1rem 5px !important
#page,
.category-content,
#archive,
.tag-cloud,
.flink,
#tag,
#category
margin: 0
padding: 1.8rem 1.3rem
& > div:first-child:not(.recent-posts)
padding: 1.8rem .7rem
.category-lists
padding: 0
@@ -347,17 +352,17 @@
.recent-post-info
order: 2 !important
padding: 30px 25px 18px !important
padding: 1rem 1rem 1.5rem
width: 100%
&.no-cover
padding: 1.5rem 1rem
.article-title
font-size: 1rem
.article-meta.tags
display: none
&:first-child
margin: 0
.content
height: auto
@media screen and (min-width: 900px)
if hexo-config('aside.position') == 'left'
@@ -366,17 +371,11 @@
.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
.layout_page
& > div:first-child:not(.recent-posts)
width: 100% !important

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

@@ -6,9 +6,6 @@
.pagination
text-align: center
.space
color: $a-link-color
.page-number
display: inline-block
margin: 0 .2rem
@@ -19,71 +16,56 @@
cursor: pointer
&.current
background: $cyan
color: $white
background: $theme-paginator-color
color: $button-color
cursor: default
img.prev_cover,
img.next_cover
position: absolute
top: 0
left: 0
padding: 0
width: 100%
height: 100%
background-size: cover
opacity: .4
transition: all .6s
pointer-events: none
object-fit: cover
.pagination-info
position: absolute
top: 50%
padding: 1rem 2rem
width: 100%
transform: translate(0, -50%)
.prev_info,
.next_info
position: absolute
bottom: 50px
z-index: 100
display: block
overflow: hidden
width: 70%
color: $white
color: $button-color
text-overflow: ellipsis
white-space: nowrap
font-weight: 400
font-weight: 500
.next_info
right: 40px
text-align: right
.next-post
.pagination-info
text-align: right
.pull-full
width: 100% !important
.prev-post .label,
.next-post .label
position: absolute
top: 50px
z-index: 100
display: block
color: alpha($white, .9)
text-transform: uppercase
font-size: 90%
.next-post .label
right: 40px
.prev-post,
.next-post
float: left
width: 50%
a
position: relative
display: block
float: left
overflow: hidden
padding: 55px 40px
width: 100%
height: 150px
text-align: left
&:hover
img.prev_cover,

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

@@ -1,81 +1,18 @@
if hexo-config('post_beautify.enable')
headStyle(fontsize)
padding-left: unit(fontsize + .3, 'rem')
#article-container
if hexo-config('beautify.enable')
headStyle(fontsize)
padding-left: unit(fontsize + .4, 'rem')
code
font-size: unit(fontsize, 'rem')
code
font-size: unit(fontsize, 'rem')
&:before
top: calc(50% - unit(fontsize / 2 - .05, 'rem'))
font-size: unit(fontsize, 'rem')
&:before
margin-left: unit((-(fontsize + .2)), 'rem')
font-size: unit(fontsize, 'rem')
&:hover
padding-left: unit(fontsize + .2, 'rem')
&:hover
padding-left: unit(fontsize + .6, 'rem')
#top-container
position: relative
margin-bottom: 1rem
height: 19rem
background-color: $light-blue
background-attachment: local
background-position: center
background-size: cover
&:before
position: absolute
top: 0
left: 0
display: block
width: 100%
height: 100%
background-color: alpha($dark-black, .5)
content: ''
a
color: $light-grey
text-decoration: none
transition: all .3s ease-out
&:hover
text-decoration: underline
& > #post-info
position: absolute
bottom: 1.5rem
padding: 0 8%
width: 100%
color: $light-grey
text-align: left
#post-title
margin-bottom: .4rem
font-size: 1.5rem
.posttitle
display: -webkit-box
overflow: hidden
line-height: 1.5
-webkit-line-clamp: 3
-webkit-box-orient: vertical
#post-meta
.word-count,
#busuanzi_value_page_pv,
.comment-count
padding-left: .2rem
.post-meta
&__separator
margin: 0 .3rem
&__icon
margin-right: .2rem
&-pv-cv
display: inline-block
#post-content
if hexo-config('post_beautify.enable')
h1,
h2,
h3,
@@ -88,16 +25,23 @@ if hexo-config('post_beautify.enable')
&:before
position: absolute
top: calc(50% - .35rem)
left: 0
color: $title-prefix-icon-color
content: $title-prefix-icon
font: normal normal normal 14px / 1 FontAwesome
font-size: .8rem
font-style: normal
font-variant: normal
line-height: 1
transition: all .2s ease-out
text-rendering: auto
-webkit-font-smoothing: antialiased
if hexo-config('fontawesome_v5') && hexo-config('fontawesome_v5.enable')
font-weight: 600
font-family: 'Font Awesome 5 Free'
else
font-weight: normal
font-family: FontAwesome
&:hover
padding-left: 1.1rem
&:before
color: $light-blue
@@ -147,7 +91,7 @@ if hexo-config('post_beautify.enable')
top: 0
left: 0
background: $light-blue
color: $white
color: $card-bg
cursor: pointer
transition: all .3s ease-out
@@ -168,7 +112,7 @@ if hexo-config('post_beautify.enable')
> li
&:hover
&:before
border-color: $ruby
border-color: $theme-button-hover-color
&:before
$w = .3rem
@@ -178,7 +122,7 @@ if hexo-config('post_beautify.enable')
height: h = w
border: .5 * w solid $light-blue
border-radius: w
background: $white
background: transparent
content: ''
line-height: h
else
@@ -201,14 +145,13 @@ if hexo-config('post_beautify.enable')
a
color: $a-link-color
text-decoration: none
word-wrap: break-word
transition: all .2s
overflow-wrap: break-word
&:hover
color: $light-blue
text-decoration: none
&#site-name
text-decoration: none
a.fancybox
outline: none
@@ -219,7 +162,6 @@ a.fancybox
display: inline-block
width: 100%
text-align: center
text-decoration: none
p
margin: 0 0 .8rem
@@ -240,14 +182,14 @@ img
transition: all .3s
transform: rotate(0)
& + .code_lang
& + .code-lang
left: 30px
&.code-closed
transition: all .3s
transform: rotate(-90deg) !important
.code_lang
.code-lang
position: absolute
left: 15px
z-index: 1
@@ -279,10 +221,6 @@ img
&:hover
color: darken($highlight-aqua, 20%)
@media screen and (min-width: $md)
.layout_post
width: $content-large-width
.katex-wrap
overflow: auto
@@ -291,21 +229,14 @@ img
display: none
.layout_post
margin: 40px auto
padding: 50px
margin: 0 auto
padding: 2rem 15px
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)
img
display: block
& >.tag_share
.tag_share
.post-meta
&__tag-list
display: inline-block
@@ -317,16 +248,14 @@ img
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
color: $button-color
.post_share
display: inline-block
@@ -344,7 +273,7 @@ img
font-size: 15px
line-height: 25px
& > .post-copyright
.post-copyright
position: relative
margin: 2rem 0 .5rem
padding: .5rem .8rem
@@ -383,47 +312,29 @@ img
padding-left: .3rem
a
text-decoration: underline
word-break: break-word
#post
a
color: $light-blue
text-decoration: none
&:hover
text-decoration: none
&:hover
text-decoration: underline
#article-container
a
color: $theme-link-color
img
margin: .8rem auto
&:hover
text-decoration: underline
img
margin: 0 auto .8rem
@media screen and (max-width: 1024px)
.layout_post
margin: 0 15px
width: auto
@media screen and (max-width: $sm)
.layout_post
margin: 0 5px
padding: 1.8rem 1rem
padding: 1rem 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
& > #post
padding: 1.8rem .7rem

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

@@ -1,93 +0,0 @@
if hexo-config('readmode') && hexo-config('readmode.enable')
.read-mode
padding: 0 !important
background: $pale-yellow
#page-header
#site-name,
.site-page
color: $font-black
text-shadow: none
.menus_item_child
background-color: darken($pale-yellow, 3) !important
& > li
&:hover
background-color: darken($pale-yellow, 10) !important
#top-container
height: 14rem
background-color: $pale-yellow
background-image: none !important
a
color: $font-black
&:before
opacity: 0
& > #post-info
padding: 0
color: $font-black
text-align: center
#page-header
&.fixed
background: alpha(darken($pale-yellow, 5), .5)
box-shadow: none
&.open-sidebar
.site-page
visibility: visible
.layout_post
background: $pale-yellow
box-shadow: none
&:hover
box-shadow: none
.article-container
pre,
.highlight:not(.js-file-line-container)
background: darken($pale-yellow, 5)
.highlight
display: block !important
blockquote
border-left: .2rem solid #d6dbdf
background-color: rgba(102, 128, 153, .05)
#rightside
#darkmode
display: none
& > canvas
display: none !important
.code-area-wrap > .highlight-tools,
#sidebar,
#toggle-sidebar,
#footer,
.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, 10)
*::-webkit-scrollbar-thumb
background: darken($pale-yellow, 10)
#web_bg
background: none

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

@@ -1,74 +1,61 @@
.relatedPosts
margin: 0 auto
margin-top: 1rem
padding: 0
width: 100%
.relatedPosts_item
position: relative
float: left
overflow: hidden
margin: 5px
width: calc(100% / 3 - 10px)
height: 200px
background: $dark-black
.relatedPosts_headline
margin-bottom: 5px
font-weight: 700
font-size: 20px
&:hover
.relatedPosts_cover
opacity: .8
transform: scale(1.1)
a
text-decoration: none
.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
color: alpha($white, .9)
font-size: 90%
.relatedPosts_title
display: -webkit-box
.relatedPosts_item
position: relative
float: left
overflow: hidden
max-height: 60px
-webkit-line-clamp: 2
-webkit-box-orient: vertical
margin: 5px
width: calc(100% / 3 - 10px)
height: 200px
background: $dark-black
.relatedPosts_headline
margin-bottom: 5px
font-weight: 700
font-size: 20px
&:hover
.relatedPosts_cover
opacity: .8
transform: scale(1.1)
.clear_both
clear: both
.relatedPosts_cover
width: 100%
height: 100%
opacity: .4
transition: all .6s
object-fit: cover
.relatedPosts_main
position: absolute
top: 50%
padding: 0 1rem
width: 100%
color: $white
transform: translate(0, -50%)
.relatedPosts_date
color: $light-grey
font-size: 90%
.relatedPosts_title
display: -webkit-box
overflow: hidden
-webkit-line-clamp: 2
-webkit-box-orient: vertical
.clear_both
clear: both
@media screen and (max-width: 768px)
.relatedPosts_item
margin: 2px
width: calc(100% / 2 - 4px)
height: 150px
.relatedPosts
.relatedPosts_item
margin: 2px
width: calc(100% / 2 - 4px)
height: 150px
@media screen and (max-width: 480px)
.relatedPosts_item
width: calc(100% - 4px)
.relatedPosts
.relatedPosts_item
width: calc(100% - 4px)

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

@@ -9,7 +9,7 @@
display: inline-block
width: 100px
background: $light-blue
color: $white
color: $button-color
text-align: center
line-height: 36px
cursor: pointer
@@ -34,7 +34,7 @@
padding: 20px 10px 8px
width: 320px
border-radius: 4px
background: #f5f5f5
background: $reward-pop-up-bg
&:before
position: absolute
@@ -52,7 +52,7 @@
margin: 0 auto
width: 0
height: 0
border-top: 13px solid #f5f5f5
border-top: 13px solid $reward-pop-up-bg
border-right: 13px solid transparent
border-left: 13px solid transparent
content: ''
@@ -70,5 +70,5 @@
.post-qr-code__desc
margin: -5px 0
color: #858585
color: $reward-pop-up-color
text-align: center

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

@@ -24,15 +24,14 @@
width: 30px
height: 30px
background-color: $light-blue
color: $white
color: $button-color
text-align: center
text-decoration: none
font-size: 16px
line-height: 29px
cursor: pointer
&:hover
background-color: $ruby
background-color: $theme-button-hover-color
#rightside_config
i

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

@@ -1,16 +1,14 @@
#sidebar
position: fixed
top: 0
left: -300px
left: -($sidebar-width)
z-index: 10
overflow-y: auto
padding: 1rem 0 2rem .5rem
width: $sidebar-width
height: 100%
background: $sidebar-background
box-shadow: -.25rem 0 .25rem rgba(232, 237, 250, .6) inset
box-shadow: -.25rem 0 .25rem rgba($sidebar-background, .6) inset
opacity: .9
transition: ease-in-out .4s
.sidebar-toc
ol,
@@ -24,25 +22,29 @@
&__title
padding-right: .5rem
text-align: center
font-size: unit(.9 * $rem, 'px')
font-size: 1.3em
&__content
overflow-y: scroll
padding-bottom: 5rem
height: 90vh
.toc-link
display: block
padding-left: .2rem
border-right: 3px solid transparent
text-decoration: none
transition: all .2s ease-in-out
&.active
border-right-color: darken($cyan, 20%)
background: $cyan
color: $white
border-right-color: darken($theme-toc-color, 20%)
background: $theme-toc-color
color: $sidebar-active-color
&__progress
position: relative
margin-top: -.3rem
margin-bottom: .3rem
padding-left: .6rem
color: $cyan
color: $theme-toc-color
.progress-notice
margin-right: .4rem
@@ -54,4 +56,19 @@
&-bar
width: 0
height: 1px
background: $cyan
background: $theme-toc-color
@media screen and (max-width: $bg)
i#toggle-sidebar
display: none
#sidebar
right: -($mobile-sidebar-width)
left: auto
z-index: 103
width: $mobile-sidebar-width
opacity: 1
transition: all .4s
.toc-child
display: block !important

88
source/css/_layout/third-party.styl Normal file
View File

@@ -0,0 +1,88 @@
if hexo-config('valine.enable')
// valine
#vcomment
button
padding: .3rem 1rem
border-color: $button-color
background-color: $light-blue
color: $button-color
font-size: .7rem
&:hover
background-color: $theme-button-hover-color
textarea
if hexo-config('valine.bg')
background: url(hexo-config('valine.bg')) 100% 100% no-repeat
.info
display: none
.vimg
border: 0
&:hover
transform: rotate(540deg)
.vat
padding: 0 .8rem
border: 1px solid $light-blue
border-radius: 5px
color: $light-blue
font-size: .7125rem
&:hover
background-color: $light-blue
color: $button-color
if hexo-config('beautify.enable')
#article-container
.aplayer
ol,
ul
margin: 0
padding: 0
li
margin: 0
padding: 0 15px
&:before
content: none
// third-party
.fireworks
position: fixed
top: 0
left: 0
z-index: 999999
pointer-events: none
.medium-zoom-image--opened
z-index: 99999 !important
margin: 0 !important
.medium-zoom-overlay
z-index: 99999 !important
.mermaid
overflow: auto
margin: 0 0 1rem
background: $white
text-align: center
opacity: 0
transition: all .3s
&[data-processed]
opacity: 1
.utterances
max-width: 100%
#gitalk-container
.gt-meta
margin: 0 0 .8em
padding: .3rem 0 .8em
.has-jax
overflow: auto

82
source/css/_layout/z-darkmode.styl → source/css/_mode/darkmode.styl
View File

@@ -1,4 +1,4 @@
if hexo-config('darkmode.enable') || hexo-config('autoChangeMode') == '1' || hexo-config('autoChangeMode') == '2'
if hexo-config('darkmode.enable')
[data-theme='dark']
body
background-color: darken(#121212, 2)
@@ -20,21 +20,16 @@ if hexo-config('darkmode.enable') || hexo-config('autoChangeMode') == '1' || hex
background-color: alpha($dark-black, .7)
content: ''
#archive,
.tag-cloud,
#tag,
.category-content,
#category,
#page,
.flink,
.layout_post
background: #121212
#nav,
.layout_post > #post,
.layout_page > div:first-child:not(.recent-posts)
background-color: #121212
#sidebar
background: #121212
box-shadow: -.25rem 0 .25rem #121212
.article-container code
#article-container code
background: #2c2c2c
.recent-posts
@@ -46,7 +41,7 @@ if hexo-config('darkmode.enable') || hexo-config('autoChangeMode') == '1' || hex
#page-header
&.fixed
background: #121212
background: alpha(#121212, .8)
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
.toggle-menu,
@@ -65,14 +60,14 @@ if hexo-config('darkmode.enable') || hexo-config('autoChangeMode') == '1' || hex
color: alpha(#FFFFFF, .6)
// 代碼框
.article-container pre,
.article-container pre code
#article-container pre,
#article-container pre code
background-color: lighten(#121212, 2)
.highlight-tools
background: lighten(#121212, 3)
.article-container .highlight:not(.js-file-line-container)
#article-container .highlight:not(.js-file-line-container)
background-color: lighten(#121212, 2)
.code pre,
@@ -97,9 +92,8 @@ if hexo-config('darkmode.enable') || hexo-config('autoChangeMode') == '1' || hex
&:before
color: alpha(#FFFFFF, .6)
.layout_post >.tag_share .post-meta__tags
.layout_post .tag_share .post-meta__tags
border: 1px solid alpha(#FFFFFF, .6)
background: 0
color: alpha(#FFFFFF, .6)
&:hover
@@ -118,7 +112,7 @@ if hexo-config('darkmode.enable') || hexo-config('autoChangeMode') == '1' || hex
// 音樂播放器
.aplayer
filter: brightness(.7)
color: #000000
color: $dark-black
// 右下角按鈕
#rightside
@@ -150,7 +144,7 @@ if hexo-config('darkmode.enable') || hexo-config('autoChangeMode') == '1' || hex
background-color: lighten(#121212, 10) !important
img,
iframe,
iframe:not(.utterances-frame),
.gist
filter: brightness(.7)
@@ -171,9 +165,8 @@ if hexo-config('darkmode.enable') || hexo-config('autoChangeMode') == '1' || hex
background: lighten(#121212, 20) !important
// 頭部
#nav,
#top-container
&::before
#nav
&:before
position: absolute
top: 0
right: 0
@@ -186,11 +179,11 @@ if hexo-config('darkmode.enable') || hexo-config('autoChangeMode') == '1' || hex
#nav i,
#page-header a,
#page-header .toggle-menu,
#top-container #post-meta,
#top-container a,
#post-meta,
#post-meta a,
#footer-wrap,
#footer-wrap a
color: alpha(#FFFFFF, .6)
color: alpha(#FFFFFF, .6) !important
.posttitle,
h1,
@@ -203,7 +196,7 @@ if hexo-config('darkmode.enable') || hexo-config('autoChangeMode') == '1' || hex
.recent-posts .post-meta__date,
.recent-posts .article-meta,
.recent-posts .article-meta__categories,
.recent-posts a,
.post-reward .reward-button,
.fa-clipboard,
.gutter pre,
@@ -242,12 +235,6 @@ if hexo-config('darkmode.enable') || hexo-config('autoChangeMode') == '1' || hex
a
color: alpha(#FFFFFF, .6) !important
#mobile-sidebar-toc
background: #121212
a
color: alpha(#FFFFFF, .6) !important
// note
if hexo-config('note.style') == 'modern'
.note
@@ -301,11 +288,15 @@ if hexo-config('darkmode.enable') || hexo-config('autoChangeMode') == '1' || hex
.vsys
background: rgb(97, 106, 107) !important
.vbtn
.vbtn,
.vat
border: 1px solid alpha(#FFFFFF, .6)
background: rgb(45, 48, 53) !important
background: lighten(#121212, 5) !important
color: alpha(#FFFFFF, .6) !important
&:hover
background: lighten(#121212, 20) !important
.vwrap
border: 1px solid alpha(#FFFFFF, .6)
@@ -354,3 +345,26 @@ if hexo-config('darkmode.enable') || hexo-config('autoChangeMode') == '1' || hex
#algolia-search-results
.algolia-hit-item-link
color: alpha(#FFFFFF, .6)
if hexo-config('disqusjs.enable')
#disqus_thread
#dsqjs
.dsqjs-tab-active,
.dsqjs-no-comment
color: alpha(#FFFFFF, .6)
.dsqjs-order-label
background-color: lighten(#121212, 5)
.dsqjs-post-body
color: alpha(#FFFFFF, .6)
code,
pre
background: #2c2c2c
blockquote
color: alpha(#FFFFFF, .6)
.mermaid
filter: brightness(.7)

147
source/css/_mode/readmode.styl Normal file
View File

@@ -0,0 +1,147 @@
if hexo-config('readmode') && hexo-config('readmode.enable')
[data-theme='light']
.read-mode
background: #fff
#nav.post-bg
a
color: $font-black !important
#article-container
pre,
.highlight:not(.js-file-line-container)
background: #f7f7f7 !important
code
color: #4c4948
blockquote
border-left: .2rem solid #ddd
background-color: transparent
ol,
li
&:before
background: transparent
color: #4c4948
ul
>li
&:before
border: .2rem solid #90a4ae
hr
border: 2px dashed #d6dbdf
background: transparent
&:before
color: darken(#d6dbdf, 10)
.hide-button
background: darken(#d6dbdf, 10) !important
.note
border: 2px solid #eee
border-left-color: transparent
background-color: transparent
#mobile-sidebar-menus,
#rightside i,
#rightside a,
#rightside #rightside_config
background: darken(#d6dbdf, 10) !important
[data-theme='dark']
.read-mode
background: #0d0d0d
#article-container
code
color: rgba(255, 255, 255, .6)
blockquote
border-left: .2rem solid rgba(255, 255, 255, .6)
background-color: transparent
ol,
li
&:before
background: transparent
color: rgba(255, 255, 255, .6)
ul
>li
&:before
border: .15rem solid rgba(255, 255, 255, .6)
.note
border: 2px solid rgba(255, 255, 255, .6)
border-left-color: transparent
filter: none
background-color: transparent
color: rgba(255, 255, 255, .6)
.hide-button
background: #1f1f1f !important
.read-mode
#body-wrap
padding-left: 0 !important
#nav.post-bg
background-color: transparent
background-image: none !important
a
text-shadow: none !important
&:before
opacity: 0
& > #post-info
padding: 0
color: $font-black
text-align: center
.layout_post
> #post
background: transparent
box-shadow: none
&:hover
box-shadow: none
.highlight
display: block !important
#rightside
#darkmode
display: none
& > canvas
display: none !important
.code-area-wrap > .highlight-tools,
#footer,
#post > *:not(:first-child),
#to_comment,
#sidebar,
#toggle-sidebar,
#mobile-toc-button,
#page-header
display: none !important
#web_bg
background: none
#article-container
h1,
h2,
h3,
h4,
h5,
h6
padding: 0
&:before
content: ''

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

@@ -9,8 +9,9 @@
input
padding: .25rem .7rem
outline: none
border: 2px solid $light-blue
border: 2px solid $search-color
border-radius: 2rem
background: $search-bg
font-size: 14px
.ais-hits--item.algolia-hit-item
@@ -19,7 +20,7 @@
&:hover
&:before
border-color: $ruby
border-color: $theme-button-hover-color
&:before
$w = .3rem
@@ -28,9 +29,9 @@
left: 0
width: w = $w
height: h = w
border: .5 * w solid $light-blue
border: .5 * w solid $search-color
border-radius: w
background: $white
background: transparent
content: ''
line-height: h
transition: all .2s ease-in-out
@@ -38,12 +39,11 @@
a
display: block
color: $font-black
text-decoration: none
font-size: 14px
cursor: pointer
&:hover
color: $light-blue
color: $search-color
.ais-pagination.pagination
margin: .8rem 0 0
@@ -63,9 +63,8 @@
.ais-pagination--item.current
a
background: $cyan
color: $white
text-decoration: none
background: $theme-paginator-color
color: #eee
cursor: default
.algolia-logo

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

@@ -7,26 +7,27 @@
margin-left: -15rem
padding: 1rem
width: 30rem
background: $white
background: $search-bg
hr
margin: 1rem auto
span.search-close-button
position: absolute
top: .5rem
right: .5rem
top: .8rem
right: 1rem
color: $grey
font-size: 1rem
line-height: 1
cursor: pointer
transition: color .2s ease-in-out
&:hover
color: $light-blue
color: $search-color
&__title
padding: 0 0 .7rem
color: $light-blue
color: $search-color
font-size: 1rem
line-height: 1
@@ -38,9 +39,15 @@
left: 0
z-index: 1000
display: none
background: rgba(0, 0, 0, .6)
background: rgba($dark-black, .6)
@media screen and (max-width: $sm)
.search-dialog
margin-left: -45%
width: 90%
top: 0
left: 0
margin: 0
width: 100%
height: 100%
.search-result-list
max-height: 100% !important

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

@@ -10,9 +10,11 @@
padding: .25rem .7rem
width: 100%
outline: none
border: 2px solid $light-blue
border: 2px solid $search-color
border-radius: 2rem
background: $search-bg
font-size: 14px
-webkit-appearance: none
.local-search__hit-item
position: relative
@@ -20,7 +22,7 @@
&:hover
&:before
border-color: $ruby
border-color: $theme-button-hover-color
&:before
$w = .3rem
@@ -29,9 +31,9 @@
left: 0
width: w = $w
height: h = w
border: .5 * w solid $light-blue
border: .5 * w solid $search-color
border-radius: w
background: $white
background: transparent
content: ''
line-height: h
transition: all .2s ease-in-out
@@ -39,12 +41,11 @@
a
display: block
color: $font-black
text-decoration: none
font-size: 14px
cursor: pointer
&:hover
color: $light-blue
color: $search-color
.local-search-stats__hr
display: none !important

1
source/css/_third-party/jquery.fancybox.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
source/css/index.styl
View File

@@ -5,6 +5,7 @@
@import '_global'
@import '_highlight/highlight'
@import '_layout/*'
@import '_mode/*'
// search
if hexo-config('algolia_search.enable')

276
source/css/var.styl
View File

@@ -1,184 +1,144 @@
// Theme Global Color
$theme-color = #49B1F5
$theme-paginator-color = #00c4b6
$theme-button-hover-color = #FF7242
$theme-text-selection-color = #00c4b6
$theme-meta-color = #858585
$theme-link-color = #99a9bf
$theme-hr-color = #A4D8FA
$theme-read-mode-bg-color = #FAF9DE
$inline-code-color = #F47466
$font-family= Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
$code-font = consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace, Helvetica Neue For Number
$site-name-font = "Titillium Web", Lato,PingFang SC, Hiragino Sans GB, "Microsoft JhengHei", "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
//hr icon
$hr-icon = '\f0c4'
$hr-icon-top = -10px
$title-prefix-icon = '\f0c1'
$title-prefix-icon-color = #F47466
// color
$bright-blue = #49B1F5
$strong-cyan = #00c4b6
$light-orange = #FF7242
$light-red = #F47466
if hexo-config("theme_color") && hexo-config("theme_color.enable")
$theme-color = convert(hexo-config("theme_color.main")) || #49B1F5
$theme-paginator-color = convert(hexo-config("theme_color.paginator")) || #00c4b6
$theme-button-hover-color = convert(hexo-config("theme_color.button_hover")) || #FF7242
$theme-text-selection-color = convert(hexo-config("theme_color.text_selection")) || #00c4b6
$theme-link-color = convert(hexo-config("theme_color.link_color")) || #99a9bf
$theme-meta-color = convert(hexo-config("theme_color.meta_color")) || #858585
$theme-hr-color = convert(hexo-config("theme_color.hr_color")) || #A4D8FA
$theme-read-mode-bg-color = convert(hexo-config("theme_color.read-mode-bg_color")) || #FAF9DE
$inline-code-color = convert(hexo-config("theme_color.inline-code-color")) || #F47466
$themeColorEnable = hexo-config('theme_color') && hexo-config('theme_color.enable')
$theme-color = $themeColorEnable ? convert(hexo-config('theme_color.main')) : $bright-blue
$theme-paginator-color = $themeColorEnable ? convert(hexo-config('theme_color.paginator')) : $strong-cyan
$theme-button-hover-color = $themeColorEnable ? convert(hexo-config('theme_color.button_hover')) : $light-orange
$theme-text-selection-color = $themeColorEnable ? convert(hexo-config('theme_color.text_selection')) : $strong-cyan
$theme-link-color = $themeColorEnable ? convert(hexo-config('theme_color.link_color')) : $bright-blue
$theme-hr-color = $themeColorEnable ? convert(hexo-config('theme_color.hr_color')) : $bright-blue
$code-foreground = $themeColorEnable ? convert(hexo-config('theme_color.code_foreground')) : $light-red
$code-background = $themeColorEnable ? convert(hexo-config('theme_color.code_background')) : rgba(27, 31, 35, .05)
$theme-toc-color = $themeColorEnable ? convert(hexo-config('theme_color.toc_color')) : $strong-cyan
if hexo-config("font") && hexo-config("font.enable")
$font-family = convert(hexo-config("font.font-family")) || 'Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif'
$code-font = convert(hexo-config("font.code-font")) || 'consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace, Helvetica Neue For Number'
// font
$fontEnable = hexo-config('font') && hexo-config('font.enable')
$font-family = $fontEnable ? convert(hexo-config('font.font-family')) : Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
$code-font = $fontEnable ? convert(hexo-config('font.code-font')) : consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace, Helvetica Neue For Number
$site-name-font = convert(hexo-config('blog_title_font.font-family')) || '"Titillium Web",Lato,PingFang SC, Hiragino Sans GB, "Microsoft JhengHei", "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif'
if hexo-config("blog_title_font.font-family")
$site-name-font = convert(hexo-config("blog_title_font.font-family")) || '"Titillium Web",Lato,PingFang SC, Hiragino Sans GB, "Microsoft JhengHei", "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif'
if hexo-config("hr") && hexo-config("hr.enable")
$hr-icon = hexo-config("hr.icon") || '\f0c4'
$hr-icon-top = convert(hexo-config("hr.icon-top")) || -10px
if hexo-config("post_beautify.enable")
$title-prefix-icon = hexo-config("post_beautify.title-prefix-icon") || '\f0c1'
$title-prefix-icon-color= convert(hexo-config("post_beautify.title-prefix-icon-color")) || #F47466
//hr
$hrEnable = hexo-config('hr') && hexo-config('hr.enable')
$hr-icon = $hrEnable ? hexo-config('hr.icon') : '\f0c4'
$hr-icon-top = $hrEnable ? convert(hexo-config('hr.icon-top')) : -10px
//page beatutify
$beautifyEnable = hexo-config('beautify.enable')
$title-prefix-icon = $beautifyEnable ? hexo-config('beautify.title-prefix-icon') : '\f0c1'
$title-prefix-icon-color = $beautifyEnable ? convert(hexo-config('beautify.title-prefix-icon-color')) : $light-red
// Global Variables
$font-size = 14px
$font-color = #1F2D3D
$button-color = #fff
$rem = 20px
$font-family = $font-family
$code-font = $code-font
$site-name-font = $site-name-font
$text-line-height = 2
$sm = 768px
$bg = 1024px
$md = 1300px
$lg = 1450px
$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
$light-blue = $theme-color
$dark-black = #000000
$light-grey = #EEEEEE
$grey = #858585
$white = #FFFFFF
$whitesmoke = #f5f5f5
$font-black = #4C4948
$card-bg = $white
// code
$code-font-family = $font-family
$line-height-code-block = 20px
$blockquote-color = #6a737d
$blockquote-padding-color = $themeColorEnable ? convert(hexo-config('theme_color.blockquote_padding_color')) : #49B1F5
$blockquote-background-color = $themeColorEnable ? alpha(convert(hexo-config('theme_color.blockquote_background_color')),.1) : alpha($blockquote-padding-color,.1)
// page
$body-bg = #fff
$a-link-color = #99a9bf
$sticky-color = $light-orange
$theme-meta-color = $themeColorEnable ? convert(hexo-config('theme_color.meta_color')) : #858585
// sidebar
$sidebar-icon-top = 20px
$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
// Global color & SVG
$pale-blue = $theme-hr-color
$light-blue = $theme-color
$blue = #1B9EF3
$dark-blue = #0790E8
$orange = #F1BE48
$pale-green = #B4E1C1
$light-green = #69C282
$green = #44B363
$dark-green = #379F54
$pale-cyan = #D1F4F2
$light-cyan = #8CE4DE
$cyan = $theme-paginator-color
$pale-red = #F9b9b3
$light-red = #F47466
$red = #F15140
$dark-red = #E63E2C
$ruby = $theme-button-hover-color
$light-black = #3B3A3A
$black = #2E2E2E
$dark-black = #000000
$pale-grey = #F7F7F7
$light-grey = #EEEEEE
$grey = $theme-meta-color
$pale-yellow = $theme-read-mode-bg-color
$white = #FFFFFF
$whitesmoke = #f5f5f5;
$dark-white = #F9F9F9
$font-black = #4C4948
$selection = $theme-text-selection-color
// code
$code-font-size = $font-size
$code-font-family = $font-family
$code-foreground = $inline-code-color
$code-background = rgba(27, 31, 35, 0.05)
$line-height-code-block = 20px
$blockquote-color = #6a737d
$blockquote-padding-color = $theme-color
$blockquote-background-color = rgba(73, 177, 245,0.1)
// page
$content-width = 800px
$content-large-width = 1000px
$a-link-color = $theme-link-color
$a-hover-color = #82AAFF
$img-border-color = #eaeefb
// sidebar
$sidebar-width = 300px
$sidebar-background = #f6f8fa
$sidebar-active-color = #fff
$mobile-sidebar-width = 250px
// table
$table-thead-bg = #99a9bf
// reward
$reward-pop-up-bg = #f5f5f5
$reward-pop-up-color = #858585
// search
$search-bg = #f6f8fa
$search-color = $theme-color
//gallery
$gallery-color = #fff
// tag-hide
$tag-hide-bg = $theme-color
// Note colors
// --------------------------------------------------
hexo-config('note.light_bg_offset') is a 'unit' ? ($lbg = unit(hexo-config('note.light_bg_offset'),"%")) : ($lbg = 0);
hexo-config('note.light_bg_offset') is a 'unit' ? ($lbg = unit(hexo-config('note.light_bg_offset'), '%')) : ($lbg = 0)
// Default
$note-default-border = #777;
$note-default-bg = lighten(spin($note-default-border, 0), 94% + $lbg);
$note-default-text = $note-default-border;
$note-default-icon = "\f0a9";
$note-modern-default-border = #e1e1e1;
$note-modern-default-bg = lighten(spin($note-modern-default-border, 10), 60% + ($lbg * 4));
$note-modern-default-text = #666;
$note-modern-default-hover = darken(spin($note-modern-default-text, -10), 32%);
$note-default-border = #777
$note-default-bg = lighten(spin($note-default-border, 0), 94% + $lbg)
$note-default-text = $note-default-border
$note-default-icon = '\f0a9'
$note-modern-default-border = #e1e1e1
$note-modern-default-bg = lighten(spin($note-modern-default-border, 10), 60% + ($lbg * 4))
$note-modern-default-text = #666
$note-modern-default-hover = darken(spin($note-modern-default-text, -10), 32%)
// Primary
$note-primary-border = #6f42c1;
$note-primary-bg = lighten(spin($note-primary-border, 10), 92% + $lbg);
$note-primary-text = $note-primary-border;
$note-primary-icon = "\f055";
$note-modern-primary-border = #e1c2ff;
$note-modern-primary-bg = lighten(spin($note-modern-primary-border, 10), 40% + ($lbg * 4));
$note-modern-primary-text = #6f42c1;
$note-modern-primary-hover = darken(spin($note-modern-primary-text, -10), 22%);
$note-primary-border = #6f42c1
$note-primary-bg = lighten(spin($note-primary-border, 10), 92% + $lbg)
$note-primary-text = $note-primary-border
$note-primary-icon = '\f055'
$note-modern-primary-border = #e1c2ff
$note-modern-primary-bg = lighten(spin($note-modern-primary-border, 10), 40% + ($lbg * 4))
$note-modern-primary-text = #6f42c1
$note-modern-primary-hover = darken(spin($note-modern-primary-text, -10), 22%)
// Info
$note-info-border = #428bca;
$note-info-bg = lighten(spin($note-info-border, -10), 91% + $lbg);
$note-info-text = $note-info-border;
$note-info-icon = "\f05a";
$note-modern-info-border = #b3e5ef;
$note-modern-info-bg = lighten(spin($note-modern-info-border, 10), 50% + ($lbg * 4));
$note-modern-info-text = #31708f;
$note-modern-info-hover = darken(spin($note-modern-info-text, -10), 32%);
$note-info-border = #428bca
$note-info-bg = lighten(spin($note-info-border, -10), 91% + $lbg)
$note-info-text = $note-info-border
$note-info-icon = '\f05a'
$note-modern-info-border = #b3e5ef
$note-modern-info-bg = lighten(spin($note-modern-info-border, 10), 50% + ($lbg * 4))
$note-modern-info-text = #31708f
$note-modern-info-hover = darken(spin($note-modern-info-text, -10), 32%)
// Success
$note-success-border = #5cb85c;
$note-success-bg = lighten(spin($note-success-border, 10), 90% + $lbg);
$note-success-text = $note-success-border;
$note-success-icon = "\f058";
$note-modern-success-border = #d0e6be;
$note-modern-success-bg = lighten(spin($note-modern-success-border, 10), 40% + ($lbg * 4));
$note-modern-success-text = #3c763d;
$note-modern-success-hover = darken(spin($note-modern-success-text, -10), 27%);
$note-success-border = #5cb85c
$note-success-bg = lighten(spin($note-success-border, 10), 90% + $lbg)
$note-success-text = $note-success-border
$note-success-icon = '\f058'
$note-modern-success-border = #d0e6be
$note-modern-success-bg = lighten(spin($note-modern-success-border, 10), 40% + ($lbg * 4))
$note-modern-success-text = #3c763d
$note-modern-success-hover = darken(spin($note-modern-success-text, -10), 27%)
// Warning
$note-warning-border = #f0ad4e;
$note-warning-bg = lighten(spin($note-warning-border, 10), 88% + $lbg);
$note-warning-text = $note-warning-border;
$note-warning-icon = "\f06a";
$note-modern-warning-border = #fae4cd;
$note-modern-warning-bg = lighten(spin($note-modern-warning-border, 10), 43% + ($lbg * 4));
$note-modern-warning-text = #8a6d3b;
$note-modern-warning-hover = darken(spin($note-modern-warning-text, -10), 18%);
$note-warning-border = #f0ad4e
$note-warning-bg = lighten(spin($note-warning-border, 10), 88% + $lbg)
$note-warning-text = $note-warning-border
$note-warning-icon = '\f06a'
$note-modern-warning-border = #fae4cd
$note-modern-warning-bg = lighten(spin($note-modern-warning-border, 10), 43% + ($lbg * 4))
$note-modern-warning-text = #8a6d3b
$note-modern-warning-hover = darken(spin($note-modern-warning-text, -10), 18%)
// Danger
$note-danger-border = #d9534f;
$note-danger-bg = lighten(spin($note-danger-border, -10), 92% + $lbg);
$note-danger-text = $note-danger-border;
$note-danger-icon = "\f056";
$note-modern-danger-border = #ebcdd2;
$note-modern-danger-bg = lighten(spin($note-modern-danger-border, 10), 35% + ($lbg * 4));
$note-modern-danger-text = #a94442;
$note-modern-danger-hover = darken(spin($note-modern-danger-text, -10), 22%);
$note-danger-border = #d9534f
$note-danger-bg = lighten(spin($note-danger-border, -10), 92% + $lbg)
$note-danger-text = $note-danger-border
$note-danger-icon = '\f056'
$note-modern-danger-border = #ebcdd2
$note-modern-danger-bg = lighten(spin($note-modern-danger-border, 10), 35% + ($lbg * 4))
$note-modern-danger-text = #a94442
$note-modern-danger-hover = darken(spin($note-modern-danger-text, -10), 22%)

BIN
source/img/404.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 16 KiB

BIN
source/img/index.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 247 KiB

BIN
source/img/post.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

1084
source/js/main.js
View File

File diff suppressed because it is too large Load Diff

133
source/js/search/algolia.js Normal file
View File

@@ -0,0 +1,133 @@
$(function () {
$('a.social-icon.search').on('click', function () {
$('body').css({ width: '100%', overflow: 'hidden' })
$('.search-dialog').css('display', 'block')
$('.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 touchstart', 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()
})

104
source/js/search/local-search.js Normal file
View File

@@ -0,0 +1,104 @@
$(function () {
var loadFlag = false
$('a.social-icon.search').on('click', function () {
$('body').css({ width: '100%', overflow: 'hidden' })
$('.search-dialog').css('display', 'block')
$('#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 touchstart', 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 Normal file
View File

@@ -0,0 +1,42 @@
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 Normal file
View File

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

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

@@ -0,0 +1,88 @@
! 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 Normal file
View File

@@ -0,0 +1,91 @@
/**
* 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()
})()

73
source/js/third-party/click_heart.js vendored Normal file
View File

@@ -0,0 +1,73 @@
!(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 += 0.004),
(n[a].alpha -= 0.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 Normal file
View File

@@ -0,0 +1,129 @@
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
})
}

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

@@ -0,0 +1,334 @@
(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
});
}

16
source/js/tw_cn.js
View File

File diff suppressed because one or more lines are too long

36
source/js/utils.js
View File

@@ -1,7 +1,3 @@
/**
* function
*/
function debounce (func, wait, immediate) {
var timeout
return function () {
@@ -52,11 +48,33 @@ function throttle (func, wait, options) {
return throttled
}
function sidebarPaddingR() {
let innerWidth = window.innerWidth
let clientWidth = document.body.clientWidth
let paddingRight = innerWidth - clientWidth
if (innerWidth !== clientWidth) {
$('body').css('padding-right', paddingRight)
}
}
// iPadOS
function isIpad () {
return navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1
}
function isTMobile () {
var ua = navigator.userAgent
var pa = /iPad|iPhone|iPod|Android|Opera Mini|BlackBerry|webOS|UCWEB|Blazer|PSP|IEMobile|Symbian/g
return window.screen.width < 992 && pa.test(ua)
}
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
};
return this.isIpad() || this.isTMobile()
}
function isDesktop () {
return !this.isMobile()
}
function scrollTo (name) {
var scrollOffset = $(name).offset()
@@ -104,3 +122,5 @@ window.debounce = debounce
window.throttle = throttle
window.isMobile = isMobile
window.loadScript = loadScript