biss/hexo-theme-butterfly
1
0
Fork 0
mirror of https://github.com/jerryc127/hexo-theme-butterfly.git synced 2026-06-06 05:11:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev' into dev

Browse Source
This commit is contained in:
Jerry Wong
2020-06-24 13:45:07 +08:00
committed by GitHub
Unverified
parent dbd6ba240b 2847e9a237
commit 7c3945fe1e
136 changed files with 4039 additions and 3054 deletions
Download Patch File Download Diff File Expand all files Collapse all files
source/css/_global/function.styl
+18
View File
@@ -0,0 +1,18 @@
.limit-one-line
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
.limit-more-line
display: -webkit-box
overflow: hidden
-webkit-box-orient: vertical
.fontawesomeIcon
display: inline-block
font-weight: 600
font-style: normal
font-variant: normal
font-family: 'Font Awesome 5 Free'
text-rendering: auto
-webkit-font-smoothing: antialiased
source/css/_global/index.styl
+63 -107
View File
@@ -14,9 +14,6 @@ body
if !hexo-config('copy.enable')
user-select: none
-moz-user-select: none
-webkit-user-select: none
-ms-user-select: none
*::-webkit-scrollbar
width: 8px
@@ -62,49 +59,39 @@ h6
left: $sidebar-icon-left
z-index: 100
font-size: $sidebar-icon-size
opacity: 0
cursor: pointer
transition: all .2s
hr
position: relative
margin: 2rem auto
width: calc(100% - 4px)
border: 2px dashed lighten($theme-hr-color, 50%)
&:hover
if hexo-config('hr_icon.enable')
width: calc(100% - 4px)
&:hover
&:before
left: calc(95% - 20px)
&:before
left: calc(95% - 20px)
position: absolute
top: $hr-icon-top
left: 5%
z-index: 1
color: lighten($theme-hr-color, 30%)
content: $hr-icon
font-size: 20px
line-height: 1
transition: all 1s ease-in-out
@extend .fontawesomeIcon
&:before
position: absolute
top: $hr-icon-top
left: 5%
z-index: 1
color: $theme-hr-color
content: $hr-icon
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
.table-wrap
overflow-x: scroll
margin: 0 0 1rem
table
display: block
overflow: auto
margin: 0 0 1rem
display: table
width: 100%
border-spacing: 0
border-collapse: collapse
@@ -123,18 +110,26 @@ table
background: $theme-text-selection-color
color: #F7F7F7
button
margin: 0
padding: 0
outline: 0
border: none
background: none
cursor: pointer
// font
#nav #site_title,
#nav #site_subtitle,
#page-header #site_title,
#page-header #site_subtitle,
#site-name,
#aside_content .author-info__name,
#aside_content .author-info__description
font-family: $site-name-font
.is_right
.is-right
text-align: right
.is_left
.is-left
text-align: left
.is-center
@@ -143,22 +138,24 @@ table
.is_visible
display: block !important
.is_invisible
.is-visible-inline
display: inline-block !important
.is-invisible
display: none !important
.is_hidden
.is-hidden
overflow: hidden
.pull_left
.copy-true
user-select: all
.pull-left
float: left
.pull_right
.pull-right
float: right
// button hover
.button--primary
color: $theme-button-hover-color
.button--animated
transition-duration: 1s
transition-property: color
@@ -187,49 +184,12 @@ img[src=''],
img:not([src])
opacity: 0
// hexo tag video
.video-container
position: relative
overflow: hidden
margin-bottom: .8rem
padding-top: 56.25%
height: 0
.img-alt
margin: -.5rem 0 .5rem
color: $font-black
iframe
position: absolute
top: 0
left: 0
margin-top: 0
width: 100%
height: 100%
// 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
&:hover
text-decoration: none !important
.comment_headling
margin-bottom: 10px
@@ -237,19 +197,17 @@ img:not([src])
font-size: 20px
.post-ad
margin: 2rem 0 !important
margin: 2rem 0
.ad_height
height: auto !important
display: block !important
height: auto !important
// animation
#content-inner,
#footer
animation: main 1s
#nav
animation: nav-effect 1s
#page-header
animation: header-effect 1s
@@ -257,10 +215,13 @@ img:not([src])
#site_subtitle
animation: titlescale 1s
canvas,
canvas:not(#ribbon-canvas),
#web_bg
animation: to_show 4s
#ribbon-canvas
animation: ribbon_to_show 4s
.card-announcement-animation
color: #FF0000
animation: announ_animation .8s linear infinite
@@ -287,10 +248,10 @@ if hexo-config('avatar.effect') == true
.tocOpenMobile
.sidebar-toc__title
animation: tocsidebarRtoL .5s
animation: tocsidebarRtoL .4s
.sidebar-toc__progress
animation: tocsidebarRtoL .5s
animation: tocsidebarRtoL .6s
.sidebar-toc__content
animation: tocsidebarRtoL .7s
@@ -308,21 +269,9 @@ if hexo-config('avatar.effect') == true
top: 0
opacity: .4
@keyframes nav-effect
0%
opacity: 0
transform: translateY(-50px)
100%
opacity: 1
transform: translateY(0)
@keyframes header-effect
0%
opacity: 0
50%
opacity: 0
transform: translateY(-50px)
100%
@@ -370,6 +319,13 @@ if hexo-config('avatar.effect') == true
100%
opacity: 1
@keyframes ribbon_to_show
0%
opacity: 0
100%
opacity: hexo-config('canvas_ribbon.alpha')
@keyframes avatar_turn_around
from
transform: rotate(0)
source/css/_highlight/diff.styl
+72 -7
View File
@@ -1,8 +1,73 @@
$highlight_theme = hexo-config('highlight_theme')
// For diff highlight
pre .deletion
color: $highlight-deletion
if $highlight_theme == 'light'
$highlight-deletion = #fdd
$highlight-addition = #dfd
else
$highlight-deletion = #008000
$highlight-addition = #800000
pre .addition
color: $highlight-addition
pre .meta
color: $highlight-purple
pre
.comment
color: $highlight-comment
.variable,
.attribute,
.regexp,
.ruby .constant,
.xml .tag .title,
.xml .pi,
.xml .doctype,
.html .doctype,
.css .id,
.tag .name,
.css .class,
.css .pseudo
color: $highlight-red
.tag
color: $highlight-aqua
.number,
.preprocessor,
.literal,
.params,
.constant,
.command
color: $highlight-orange
.built_in
color: $highlight-yellow
.ruby .class .title,
.css .rules .attribute,
.string,
.value,
.inheritance,
.header,
.ruby .symbol,
.xml .cdata,
.special,
.number,
.formula
color: $highlight-green
.keyword,
.title,
.css .hexcolor
color: $highlight-aqua
.function,
.python .decorator,
.python .title,
.ruby .function .title,
.ruby .title .keyword,
.perl .sub,
.javascript .title,
.coffeescript .title
color: $highlight-blue
.tag .attr,
.javascript .function
color: $highlight-purple
source/css/_highlight/highlight.styl
+87 -139
View File
@@ -1,6 +1,10 @@
// https://github.com/equinusocio/vsc-material-theme
$highlight_theme = hexo-config('highlight_theme')
@require 'theme'
@require 'diff'
if $highlight_theme != false
@require 'diff'
wordWrap = !hexo-config('rootConfig.highlight.line_number') && hexo-config('code_word_wrap')
@@ -16,13 +20,6 @@ $code-block
counter-reset: line
white-space: pre-wrap
.code-area-wrap
position: relative
margin: 0 0 1rem
figure.highlight
position: relative
blockquote
margin: 0 0 1rem
padding: .1rem .8rem
@@ -71,10 +68,6 @@ blockquote
figure.highlight
@extend $code-block
position: relative
border-radius: 1px
if hexo-config('highlight_shrink') == true
display: none
pre
margin: 0
@@ -82,10 +75,6 @@ blockquote
border: none
.line
&::selection
background: $highlight-selection
color: $highlight-foreground
if wordWrap
&:before
display: inline-block
@@ -100,10 +89,8 @@ blockquote
background-color: $highlight-selection
table
position: relative
display: table
margin: 0
width: auto
display: block
overflow: auto
border: none
td
@@ -113,7 +100,6 @@ blockquote
figcaption
clearfix()
padding: .3rem 0 .1rem .7rem
color: $highlight-foreground
font-size: 1em
line-height: 1em
@@ -136,16 +122,59 @@ blockquote
padding-right: .5rem
padding-left: .5rem
width: 100%
background-color: $highlight-background
.line
height: 1rem
.highlight-tools
position: relative
overflow: hidden
width: 100%
height: 1.5rem
background: $highlight-tools.bg-color
color: $highlight-tools.color
font-size: 14px
.code-expand
position: absolute
padding: .4rem .7rem
cursor: pointer
transition: all .3s
transform: rotate(0)
& + .code-lang
left: 1.7rem
&.code-closed
transition: all .3s
transform: rotate(-90deg) !important
.code-lang
position: absolute
left: .7rem
text-transform: capitalize
font-weight: bold
font-size: .8rem
line-height: 1.5rem
.copy-notice
position: absolute
top: .25rem
right: 1.7rem
opacity: 0
.copy-button
position: absolute
top: .4rem
right: .7rem
cursor: pointer
transition: color .2s
&:hover
color: $theme-color
.gutter
user-select: none
-webkit-user-select: none
-moz-user-select: none
-ms-user-select: none
.gist table
width: auto
@@ -153,124 +182,43 @@ blockquote
td
border: none
// For diff highlight
pre .deletion
background: $highlight-deletion
if $highlight_theme == 'mac'
figure.highlight
margin: 0 0 1.2rem
border-radius: 7px
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .4)
-webkit-transform: translateZ(0)
pre .addition
background: $highlight-addition
.highlight-tools
&:after
position: absolute
top: .45rem
left: .7rem
width: 12px
height: 12px
border-radius: 50%
background: #fc625d
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b
content: ' '
pre .meta
color: $highlight-purple
.code-expand
right: 0
pre
.comment
color: $highlight-comment
&.code-closed
transition: all .3s
transform: rotate(90deg) !important
&::selection
background: $highlight-selection
color: $highlight-foreground
& ~ .copy-notice
right: 2.8rem
.variable,
.attribute,
.regexp,
.ruby .constant,
.xml .tag .title,
.xml .pi,
.xml .doctype,
.html .doctype,
.css .id,
.tag .name,
.css .class,
.css .pseudo
color: $highlight-red
& ~ .copy-button
right: 1.8rem
&::selection
background: $highlight-selection
color: $highlight-foreground
.code-lang
left: 3.8rem !important
.tag
color: $highlight-aqua
&::selection
background: $highlight-selection
color: $highlight-foreground
.number,
.preprocessor,
.literal,
.params,
.constant,
.command
color: $highlight-orange
&::selection
background: $highlight-selection
color: $highlight-foreground
.built_in
color: $highlight-yellow
&::selection
background: $highlight-selection
color: $highlight-foreground
.ruby .class .title,
.css .rules .attribute,
.string,
.value,
.inheritance,
.header,
.ruby .symbol,
.xml .cdata,
.special,
.number,
.formula
color: $highlight-green
&::selection
background: $highlight-selection
color: $highlight-foreground
.keyword,
.title,
.css .hexcolor
color: $highlight-aqua
&::selection
background: $highlight-selection
color: $highlight-foreground
.function,
.python .decorator,
.python .title,
.ruby .function .title,
.ruby .title .keyword,
.perl .sub,
.javascript .title,
.coffeescript .title
color: $highlight-blue
&::selection
background: $highlight-selection
color: $highlight-foreground
.tag .attr,
.javascript .function
color: $highlight-purple
&::selection
background: $highlight-selection
color: $highlight-foreground
.highlight-tools
position: relative
overflow: hidden
width: 100%
height: 1.4rem
background: darken($highlight-background, 5)
color: $highlight-foreground
font-size: 14px
.highlight-close
height: 0 !important
// when the page.highlight_shrink set to true
#body-wrap.code-close
figure.highlight
& > :not(.highlight-tools)
display: none
source/css/_highlight/theme.styl
+52 -9
View File
@@ -13,17 +13,23 @@ if $highlight_theme == 'default'
$highlight-aqua = #89DDFF
$highlight-blue = #82AAFF
$highlight-purple = #C792EA
$highlight-deletion = #BF42BF
$highlight-addition = #105EDE
$highlight-gutter = {
color: #37474F,
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
}
$highlight-tools = {
color: alpha($highlight-foreground, .8),
bg-color: darken($highlight-background, 2)
}
if $highlight_theme == 'darker'
if $highlight_theme == 'darker' || ($highlight_theme == 'mac')
$highlight-background = #212121
$highlight-current-line = #282a2e
$highlight-selection = #61616150
$highlight-foreground = #EEFFFF
$highlight-comment = #4A4A4A
$highlight-comment = #969896
$highlight-red = #FF5370
$highlight-orange = #F78C6C
$highlight-yellow = #FFCB6B
@@ -31,10 +37,16 @@ if $highlight_theme == 'darker'
$highlight-aqua = #89DDFF
$highlight-blue = #82AAFF
$highlight-purple = #C792EA
$highlight-deletion = #BF42BF
$highlight-addition = #105EDE
$highlight-gutter = {
color: #424242,
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
}
$highlight-tools = {
color: alpha($highlight-foreground, .8),
bg-color: darken($highlight-background, 2)
}
if $highlight_theme == 'pale night'
$highlight-background = #292D3E
@@ -49,17 +61,23 @@ if $highlight_theme == 'pale night'
$highlight-aqua = #89DDFF
$highlight-blue = #82AAFF
$highlight-purple = #C792EA
$highlight-deletion = #BF42BF
$highlight-addition = #105EDE
$highlight-gutter = {
color: #3A3F58,
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
}
$highlight-tools = {
color: $highlight-foreground,
bg-color: darken($highlight-background, 2)
}
if $highlight_theme == 'ocean'
$highlight-background = #0F111A
$highlight-current-line = #000000
$highlight-selection = #717CB450
$highlight-foreground = #8F93A2
$highlight-comment = #464B5D
$highlight-comment = rgba(101, 115, 126, .8)
$highlight-red = #FF5370
$highlight-orange = #F78C6C
$highlight-yellow = #FFCB6B
@@ -67,17 +85,23 @@ if $highlight_theme == 'ocean'
$highlight-aqua = #89DDFF
$highlight-blue = #82AAFF
$highlight-purple = #C792EA
$highlight-deletion = #BF42BF
$highlight-addition = #105EDE
$highlight-gutter = {
color: #3B3F5180,
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
}
$highlight-tools = {
color: $highlight-foreground,
bg-color: darken($highlight-background, 2)
}
if $highlight_theme == 'light'
$highlight-background = #F6F8FA
$highlight-current-line = #00346e
$highlight-selection = #80CBC440
$highlight-foreground = #90A4AE
$highlight-comment = #90A4AE90
$highlight-comment = rgba(149, 165, 166, .8)
$highlight-red = #E53935
$highlight-orange = #F76D47
$highlight-yellow = #FFB62C
@@ -85,7 +109,26 @@ if $highlight_theme == 'light'
$highlight-aqua = #39ADB5
$highlight-blue = #6182B8
$highlight-purple = #7C4DFF
$highlight-deletion = #BF42BF
$highlight-addition = #105EDE
$highlight-gutter = {
color: #CFD8DC,
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
}
$highlight-tools = {
color: $highlight-foreground,
bg-color: darken($highlight-background, 5)
}
if $highlight_theme == false
$highlight-background = #F6F8FA
$highlight-foreground = #90A4AE
$highlight-selection = #80CBC440
$highlight-gutter = {
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
}
$highlight-tools = {
color: $highlight-foreground,
bg-color: darken($highlight-background, 5)
}
source/css/_layout/404.styl
+70 -34
View File
@@ -1,44 +1,80 @@
if hexo-config('error_404.enable')
#nav.error-no-found
display: flex
flex-direction: column
justify-content: center
height: 100vh
#error-wrap
position: absolute
top: 50%
right: 0
left: 0
margin: 0 auto
padding: 0 1rem
max-width: 1000px
transform: translate(0, -50%)
&:before
width: 100%
height: 100%
background-color: alpha($dark-black, .5)
content: ''
.error-content
display: flex
flex-direction: row
justify-content: center
align-items: center
margin: 0 1rem
height: 18rem
border-radius: 8px
background: #fff
box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
#error_info
position: absolute
padding: 0 4rem
width: 100%
letter-spacing: 3px
line-height: 1
#error_title,
#error_subtitle
@media screen and (max-width: 768px)
flex-direction: column
margin: 0
padding: 0
color: $light-grey
letter-spacing: 5px
height: 25rem
.error-img
flex: 1
height: 100%
border-top-left-radius: 8px
border-bottom-left-radius: 8px
background-color: #49b1f5
background-position: center
background-size: cover
@media screen and (max-width: 768px)
flex: 1
width: 100%
border-top-right-radius: 8px
border-bottom-left-radius: 0
.error-info
flex: 1
padding: .5rem
text-align: center
font-size: 14px
font-family: $site-name-font
#error_title
font-size: 10rem
@media screen and (max-width: 768px)
flex: 1.1
width: 100%
#error_subtitle
font-size: 2rem
.error_title
margin-top: -4rem
color: $font-color
font-size: 9em
@media screen and (max-width: $sm)
#nav.error-no-found
#error_info
padding: 0 2rem
@media screen and (max-width: 768px)
margin-top: -3rem
#error_title
font-size: 7rem !important
.error_subtitle
@extend .limit-more-line
margin-top: -3.5rem
color: $font-color
word-break: break-word
font-size: 1.6em
-webkit-line-clamp: 2
#error_subtitle
font-size: 1rem !important
a
position: relative
z-index: 1
display: inline-block
margin-top: .5rem
padding: .3rem 1.5rem
background: $theme-color
color: white
i
padding-right: .3rem
source/css/_layout/aside.styl
+60 -37
View File
@@ -16,14 +16,13 @@
.card-info
img
display: inline-block
width: 110px
height: 110px
border-radius: 70px
transition: all .3s
transition: all .5s
&:hover
transform: rotate(540deg)
transform: rotate(360deg)
.author-info
&__name
@@ -34,23 +33,22 @@
margin-top: -.3rem
.card-info-data
display: table
padding: .7rem 0
width: 100%
table-layout: fixed
& > .card-info-data-item
display: inline-block
width: 33.3%
display: table-cell
a
.headline
display: block
overflow: hidden
@extend .limit-one-line
color: $font-black
// text-transform: uppercase
text-overflow: ellipsis
white-space: nowrap
font-size: .7rem
.length_num
margin-top: -.3rem
color: $dark-black
font-size: 1rem
@@ -73,9 +71,9 @@
position: relative
z-index: 1
display: block
width: 100%
background-color: $light-blue
color: $button-color
text-transform: uppercase
line-height: 1.6rem
span
@@ -92,7 +90,8 @@
.card-tag-cloud
a
word-break: keep-all
display: inline-block
padding: 0 .1rem
&:hover
color: $light-blue !important
@@ -132,13 +131,11 @@
font-size: .6rem
.aside-post_title
display: -webkit-box
overflow: hidden
@extend .limit-more-line
padding-left: 10px
height: 40px
line-height: 1rem
-webkit-line-clamp: 2
-webkit-box-orient: vertical
&:hover
color: $light-blue !important
@@ -147,31 +144,28 @@
.aside-post_title
height: auto
.card-archives ul.archive-list,
.card-categories ul.aside-category-item
.card-archives ul.card-archive-list,
.card-categories ul.card-category-list
margin: 0
padding: .2rem 0 0
list-style: none
.card-archives ul.archive-list > .archive-list-item,
.card-categories ul.aside-category-item > .aside-category-list
padding: .2rem 1rem
cursor: pointer
transition: all .3s
&:hover
padding: .2rem .85rem
background-color: $light-blue
.card-archives ul.card-archive-list > .card-archive-list-item,
.card-categories ul.card-category-list > .card-category-list-item
a
display: inline-block
padding: .15rem 1rem
width: 100%
color: $font-black
transition: all .4s
&:hover
padding: .15rem .85rem
background-color: $light-blue
span
display: inline-block
overflow: hidden
vertical-align: bottom
text-overflow: ellipsis
white-space: nowrap
&:first-child
width: 80%
@@ -180,14 +174,43 @@
width: 20%
text-align: right
.card-categories
.aside-category-item
&.child
padding: 0 0 0 1.2rem
&.more
span
padding-right: .3rem
width: auto !important
transition: .5s
.card-archives
.archive-list-link-more
justify-content: center
&:hover
span
padding-right: .6rem
.card-categories
.card-category-list
&.child
padding: 0 0 0 1rem
> .parent
.card-category-list
&-name
width: 70% !important
&-count
width: 18%
text-align: right
&-icon
float: right
margin-right: -.35rem
padding: .35rem
transition: transform .3s
transform: rotate(0)
&.expand
transform: rotate(-90deg)
if hexo-config('aside.card_categories.expand') == false
+ .child
display: none
.card-webinfo
.webinfo
source/css/_layout/chat.styl
+8
View File
@@ -0,0 +1,8 @@
// chat
if hexo-config('chat_btn') == true && hexo-config('chatra.enable')
#chatra:not(.chatra--expanded)
visibility: hidden !important
width: 1px !important
height: 1px !important
opacity: 0 !important
pointer-events: none
source/css/_layout/flink.styl
+69 -75
View File
@@ -1,82 +1,76 @@
.flink#article-container
.post-cards
margin: -10px 10px 0
.flink-desc
margin: .2rem 0 .5rem
.md-links
overflow: auto
text-align: center
.flink-list
overflow: auto
padding: 10px 10px 0
text-align: center
& > .md-links-item
position: relative
float: left
overflow: hidden
margin: 20px 7px
width: calc(100% / 3 - 15px)
height: 90px
border-radius: 8px
line-height: 17px
transform: perspective(1px) translateZ(0)
& > .flink-list-item
position: relative
float: left
overflow: hidden
margin: 20px 7px
width: calc(100% / 3 - 15px)
height: 90px
border-radius: 8px
line-height: 17px
transform: perspective(1px) translateZ(0)
&:hover
img
transform: rotate(540deg)
&:before
position: absolute
top: 0
right: 0
bottom: 0
left: 0
z-index: -1
background: $light-blue
content: ''
transition-timing-function: ease-out
transition-duration: .3s
transition-property: transform
transform: scale(0)
&:hover:before,
&:focus:before,
&:active:before
transform: scale(1)
a
color: $font-color
text-decoration: none
img
float: left
margin: 13px 0 0 10px
width: 65px
height: 65px
border-radius: 35px
transition: all .3s
.md-links-title
overflow: hidden
padding: 16px 10px 0 0
height: 40px
text-overflow: ellipsis
white-space: nowrap
font-weight: bold
font-size: 20px
.md-links-des
overflow: hidden
padding: 16px 10px
height: 50px
text-overflow: ellipsis
white-space: nowrap
font-size: 13px
@media screen and (max-width: 1100px)
.flink
.md-links
.md-links-item
@media screen and (max-width: 1100px)
width: calc(50% - 15px) !important
@media screen and (max-width: 600px)
.flink
.md-links
.md-links-item
@media screen and (max-width: 600px)
width: calc(100% - 15px) !important
&:hover
img
transform: rotate(360deg)
&:before
position: absolute
top: 0
right: 0
bottom: 0
left: 0
z-index: -1
background: $light-blue
content: ''
transition-timing-function: ease-out
transition-duration: .3s
transition-property: transform
transform: scale(0)
&:hover:before,
&:focus:before,
&:active:before
transform: scale(1)
a
color: $font-color
text-decoration: none
img
float: left
margin: 13px 0 0 10px
width: 65px
height: 65px
border-radius: 35px
transition: all .3s
.img-alt
display: none
.flink-item-name
@extend .limit-one-line
padding: 16px 10px 0 0
height: 40px
font-weight: bold
font-size: 20px
.flink-item-desc
@extend .limit-one-line
padding: 16px 10px
height: 50px
font-size: 13px
source/css/_layout/head.styl
+95 -78
View File
@@ -1,8 +1,8 @@
#nav
#page-header
position: relative
width: 100%
background-color: $light-blue
background-attachment: local
background-attachment: scroll
background-position: center center
background-size: cover
background-repeat: no-repeat
@@ -11,6 +11,7 @@
// index
&.full_page
height: $index_top_img_height
background-attachment: fixed
#site-info
position: absolute
@@ -43,7 +44,7 @@
margin: 0 .5rem
color: $light-grey
text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
font-size: .9rem
font-size: 1rem
cursor: pointer
#scroll_down
@@ -94,18 +95,16 @@
font-size: 1.5rem
.posttitle
display: -webkit-box
overflow: hidden
@extend .limit-more-line
line-height: 1.5
-webkit-line-clamp: 3
-webkit-box-orient: vertical
#post-meta
font-size: 95%
> .meta-secondline,
> .meta-thirdline
display inline
display: inline
.word-count,
#busuanzi_value_page_pv,
@@ -118,7 +117,7 @@
&__icon
margin-right: .2rem
a
color: $light-grey
transition: all .3s ease-out
@@ -127,25 +126,38 @@
color: $light-blue
text-decoration: underline
#page-header
// css hack
// all browser in ios and safari in all apple device
_::-webkit-full-page-media,
_:future,
:root #page-header.full_page
background-attachment: scroll !important
#nav
position: absolute
top: 0
z-index: 99
z-index: 90
padding: 10px 36px
width: 100%
height: 58px
border: none
font-size: 18px
opacity: 0
transition: all .5s
&:not(.fixed)
.menus
padding-right: 0 !important
.toggle-menu
display: none
padding: .1rem 0 0 .3rem
vertical-align: top
&:hover
color: $white
&.is_visible
&.is-visible-inline
.site-page
font-size: inherit
@@ -158,16 +170,11 @@
&.fixed
position: fixed
top: -60px
z-index: 101
z-index: 91
background: alpha($white, .8)
box-shadow: 0 5px 6px -5px alpha($grey, .6)
transition: transform .2s ease-in-out, opacity .2s ease-in-out
&.open-sidebar
.menus,
#search_button
display: none
a,
#site-name,
.toggle-menu
@@ -189,71 +196,76 @@
font-weight: bold
cursor: pointer
.menus_item
position: relative
display: inline-block
padding: 0 0 0 .7rem
.menus_items
display: inline
&:hover
.menus_item_child
display: block
.menus-expand
transform: rotate(180deg) !important
.menus-expand
padding: 4px
transition: all .3s
transform: rotate(0)
& > a
&:after
position: absolute
bottom: 0
left: 0
z-index: -1
width: 0
height: 3px
background-color: lighten($theme-color, 30%)
content: ''
transition: all .3s ease-in-out
.menus_item
position: relative
display: inline-block
padding: 0 0 0 .7rem
&:hover
.menus_item_child
display: block
.menus-expand
transform: rotate(180deg) !important
.menus-expand
padding: 4px
transition: all .3s
transform: rotate(0)
& > a
&:after
width: 100%
.menus_item_child
position: absolute
right: 0
display: none
margin-top: 8px
padding: 0
width: max-content
background-color: alpha($white, .8)
box-shadow: 0 5px 20px -4px rgba($dark-black, .5)
animation: sub_menus .3s .1s ease both
&:before
position: absolute
top: -8px
left: 0
width: 100%
height: 20px
content: ''
li
padding: 1px 10px
list-style: none
text-align: center
position: absolute
bottom: 0
left: 0
z-index: -1
width: 0
height: 3px
background-color: lighten($theme-color, 30%)
content: ''
transition: all .3s ease-in-out
&:hover
background: $theme-color
&:after
width: 100%
a
color: $font-black
text-shadow: none
.menus_item_child
position: absolute
right: 0
display: none
margin-top: 8px
padding: 0
width: max-content
background-color: alpha($white, .8)
box-shadow: 0 5px 20px -4px rgba($dark-black, .5)
animation: sub_menus .3s .1s ease both
&:before
position: absolute
top: -8px
left: 0
width: 100%
height: 20px
content: ''
li
list-style: none
&:hover
background: $theme-color
a
display: inline-block
padding: .3rem .7rem
width: 100%
color: $font-black
text-shadow: none
#search_button
display: inline
padding: 0 0 0 .7rem
.site-page
@@ -264,7 +276,7 @@
cursor: pointer
@media screen and (min-width: $sm)
#nav
#page-header
#site_title
font-size: 2rem
@@ -272,10 +284,10 @@
font-size: 1.2rem
@media screen and (max-width: $sm)
#page-header
#nav
padding: 10px .8rem
#nav
#page-header
#site_social_icons
display: block
@@ -300,10 +312,15 @@
.post-meta__categories
display: none
.meta-thirdline
display: block
.post-meta-pv-cv
.post-meta__separator:first-child
display: none
display: none
if !hexo-config('busuanzi.page_pv')
.post-meta-commentcount
.post-meta__separator
display: none
source/css/_layout/loadding.styl
+94
View File
@@ -0,0 +1,94 @@
if hexo-config('preloader')
loading-bg()
position: fixed
z-index: 1000
width: 50%
height: 100%
background-color: $preloader-bg
transition: all .5s
#loading-box
.loading-left-bg
loading-bg()
.loading-right-bg
loading-bg()
right: 0
.spinner-box
position: fixed
z-index: 1001
display: flex
justify-content: center
align-items: center
width: 100%
height: 100vh
.configure-border-1
position: absolute
padding: 3px
width: 115px
height: 115px
background: #ffab91
animation: configure-clockwise 3s ease-in-out 0s infinite alternate
.configure-border-2
left: -115px
padding: 3px
width: 115px
height: 115px
background: rgb(63, 249, 220)
transform: rotate(45deg)
animation: configure-xclockwise 3s ease-in-out 0s infinite alternate
.loading-word
position: absolute
color: $white
font-size: .8rem
.configure-core
width: 100%
height: 100%
background-color: $preloader-bg
&.loaded
.loading-left-bg
transform: translate(-100%, 0)
.loading-right-bg
transform: translate(100%, 0)
.spinner-box
display: none
@keyframes configure-clockwise
0%
transform: rotate(0)
25%
transform: rotate(90deg)
50%
transform: rotate(180deg)
75%
transform: rotate(270deg)
100%
transform: rotate(360deg)
@keyframes configure-xclockwise
0%
transform: rotate(45deg)
25%
transform: rotate(-45deg)
50%
transform: rotate(-135deg)
75%
transform: rotate(-225deg)
100%
transform: rotate(-315deg)
source/css/_layout/mobile-sidebar.styl
+24 -36
View File
@@ -1,12 +1,10 @@
#mobile-sidebar
#menu_mask
position: fixed
top: 0
right: 0
bottom: 0
left: 0
z-index: 102
display: none
width: 100%
height: 100%
background: alpha($dark-black, .8)
#mobile-sidebar-menus
@@ -14,9 +12,8 @@
top: 0
right: -250px
z-index: 103
display: block
overflow: hidden
overflow-y: scroll
overflow-x: hidden
overflow-y: auto
width: 250px
height: 100%
background: #f6f8fa
@@ -27,25 +24,26 @@
text-align: center
img
display: inline-block
padding: 0
width: 110px
height: 110px
border-radius: 70px
transition: all .3s
transition: all .5s
&:hover
transform: rotate(360deg)
.mobile_post_data
display: table
padding: .6rem .5rem 0
width: 100%
table-layout: fixed
.mobile_data_item
display: inline-block
width: 33.3%
display: table-cell
.mobile_data_link
& > a > div
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
@extend .limit-one-line
.length_num
color: $dark-black
@@ -54,52 +52,42 @@
.headline
display: block
color: $font-black
// text-transform: uppercase
font-size: .7rem
hr
margin: 1rem auto
.menus_items
margin-bottom: 5rem
padding: 0 .5rem
padding: 0 .5rem 2rem
.site-page
@extend .limit-one-line
position: relative
z-index: 0
display: block
overflow: hidden
margin: 0
padding: .3rem 1.5rem
color: $font-black
text-overflow: ellipsis
text-shadow: none
white-space: nowrap
font-size: .8rem
cursor: pointer
i
width: 30%
text-align: left
i:first-child
width: 30%
text-align: left
span
width: 70%
span
width: 70%
&:hover
color: $light-blue
&:hover
color: $light-blue
.menus-expand
position: absolute
right: 0
padding: 6px
width: 30px !important
height: 30px
padding: .4rem
transition: all .3s
transform: rotate(0)
&.menus-closed
transition: all .3s
transform: rotate(180deg) !important
transform: rotate(90deg) !important
.menus_item_child
margin: 0
source/css/_layout/note.styl
-287
View File
@@ -1,287 +0,0 @@
.note
$note-icons = hexo-config('note.icons')
$note-style = hexo-config('note.style')
position: relative
margin: 0 0 1rem
padding: 15px
if ($note-style == 'simple')
border: 1px solid $light-grey
border-left-width: 5px
if ($note-style == 'modern')
border: 1px solid transparent
background-color: $whitesmoke
if ($note-style == 'flat')
border: initial
border-left: 5px solid $light-grey
background-color: lighten($light-grey, 65%)
if hexo-config('note.border_radius') is a 'unit'
border-radius: unit(hexo-config('note.border_radius'), px)
h2,
h3,
h4,
h5,
h6
if $note-icons
margin-top: 3px
else
margin-top: 0
margin-bottom: 0
padding-top: 0 !important
border-bottom: initial
p,
ul,
ol,
table,
pre,
blockquote,
img
&:first-child
margin-top: 0 !important
&:last-child
margin-bottom: 0 !important
if $note-icons
&:not(.no-icon)
padding-left: 45px
&::before
position: absolute
top: 13px
left: 15px
font-size: larger
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')
background-color: $note-default-bg
if ($note-style == 'modern')
border-color: $note-modern-default-border
background-color: $note-modern-default-bg
color: $note-modern-default-text
a,
span.exturl
&:not(.btn)
border-bottom: 1px solid $note-modern-default-text
color: $note-modern-default-text
&:hover
border-bottom: 1px solid $note-modern-default-hover
color: $note-modern-default-hover
if ($note-style != 'modern')
border-left-color: $note-default-border
h2,
h3,
h4,
h5,
h6
color: $note-default-text
if $note-icons
&:not(.no-icon)
&::before
content: $note-default-icon
if ($note-style != 'modern')
color: $note-default-text
&.primary
if ($note-style == 'flat')
background-color: $note-primary-bg
if ($note-style == 'modern')
border-color: $note-modern-primary-border
background-color: $note-modern-primary-bg
color: $note-modern-primary-text
a,
span.exturl
&:not(.btn)
border-bottom: 1px solid $note-modern-primary-text
color: $note-modern-primary-text
&:hover
border-bottom: 1px solid $note-modern-primary-hover
color: $note-modern-primary-hover
if ($note-style != 'modern')
border-left-color: $note-primary-border
h2,
h3,
h4,
h5,
h6
color: $note-primary-text
if $note-icons
&:not(.no-icon)
&::before
content: $note-primary-icon
if ($note-style != 'modern')
color: $note-primary-text
&.info
if ($note-style == 'flat')
background-color: $note-info-bg
if ($note-style == 'modern')
border-color: $note-modern-info-border
background-color: $note-modern-info-bg
color: $note-modern-info-text
a,
span.exturl
&:not(.btn)
border-bottom: 1px solid $note-modern-info-text
color: $note-modern-info-text
&:hover
border-bottom: 1px solid $note-modern-info-hover
color: $note-modern-info-hover
if ($note-style != 'modern')
border-left-color: $note-info-border
h2,
h3,
h4,
h5,
h6
color: $note-info-text
if $note-icons
&:not(.no-icon)
&::before
content: $note-info-icon
if ($note-style != 'modern')
color: $note-info-text
&.success
if ($note-style == 'flat')
background-color: $note-success-bg
if ($note-style == 'modern')
border-color: $note-modern-success-border
background-color: $note-modern-success-bg
color: $note-modern-success-text
a,
span.exturl
&:not(.btn)
border-bottom: 1px solid $note-modern-success-text
color: $note-modern-success-text
&:hover
border-bottom: 1px solid $note-modern-success-hover
color: $note-modern-success-hover
if ($note-style != 'modern')
border-left-color: $note-success-border
h2,
h3,
h4,
h5,
h6
color: $note-success-text
if $note-icons
&:not(.no-icon)
&::before
content: $note-success-icon
if ($note-style != 'modern')
color: $note-success-text
&.warning
if ($note-style == 'flat')
background-color: $note-warning-bg
if ($note-style == 'modern')
border-color: $note-modern-warning-border
background-color: $note-modern-warning-bg
color: $note-modern-warning-text
a,
span.exturl
&:not(.btn)
border-bottom: 1px solid $note-modern-warning-text
color: $note-modern-warning-text
&:hover
border-bottom: 1px solid $note-modern-warning-hover
color: $note-modern-warning-hover
if ($note-style != 'modern')
border-left-color: $note-warning-border
h2,
h3,
h4,
h5,
h6
color: $note-warning-text
if $note-icons
&:not(.no-icon)
&::before
content: $note-warning-icon
if ($note-style != 'modern')
color: $note-warning-text
&.danger
if ($note-style == 'flat')
background-color: $note-danger-bg
if ($note-style == 'modern')
border-color: $note-modern-danger-border
background-color: $note-modern-danger-bg
color: $note-modern-danger-text
a,
span.exturl
&:not(.btn)
border-bottom: 1px solid $note-modern-danger-text
color: $note-modern-danger-text
&:hover
border-bottom: 1px solid $note-modern-danger-hover
color: $note-modern-danger-hover
if ($note-style != 'modern')
border-left-color: $note-danger-border
h2,
h3,
h4,
h5,
h6
color: $note-danger-text
if $note-icons
&:not(.no-icon)
&::before
content: $note-danger-icon
if ($note-style != 'modern')
color: $note-danger-text
source/css/_layout/page.styl
+18 -19
View File
@@ -80,26 +80,23 @@
width: 100%
& > .article-title
display: -webkit-box
overflow: hidden
@extend .limit-more-line
margin-bottom: .3rem
color: $font-black
text-overflow: ellipsis
word-wrap: break-word
font-size: 1.2rem
line-height: 1.4
transition: all .2s ease-in-out
-webkit-box-orient: vertical
-webkit-line-clamp: 2
&:hover
color: $light-blue !important
& > .article-meta-wrap
font-size: 95%
font-size: 85%
& > time
color: $theme-meta-color
cursor: default
& > .article-meta
color: $theme-meta-color
@@ -110,12 +107,14 @@
i
margin: 0 .2rem 0 0
.article-meta__separator,
.article-meta__link
.article-meta__separator
margin: 0 .3rem
.article-meta__link
margin: 0 .2rem
.fa-angle-right
margin: 0 .3rem
margin: 0 .2rem
a.article-meta__categories,
a.article-meta__tags
@@ -126,13 +125,9 @@
text-decoration: underline
& > .content
display: -webkit-box
overflow: hidden
@extend .limit-more-line
margin-top: .3rem
height: 85px
word-break: break-word
-webkit-line-clamp: 3
-webkit-box-orient: vertical
// tags page
.tag-cloud
@@ -260,16 +255,14 @@
font-size: .7rem
&__title
display: -webkit-box
overflow: hidden
@extend .limit-more-line
color: $font-black
font-size: .75rem
transition: all .3s
-webkit-line-clamp: 2
-webkit-box-orient: vertical
&:hover
color: $light-blue
color: $light-blue !important
transform: translateX(20px)
&__img
@@ -378,4 +371,10 @@
@media screen and (max-width: 900px)
.layout_page
& > div:first-child:not(.recent-posts)
width: 100% !important
width: 100% !important
// ie10-ios11使用
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)
.recent-post-info
.content
height: 90px
source/css/_layout/pagination.styl
+6 -8
View File
@@ -20,8 +20,8 @@
color: $button-color
cursor: default
img.prev_cover,
img.next_cover
img.prev-cover,
img.next-cover
position: absolute
width: 100%
height: 100%
@@ -38,10 +38,8 @@
.prev_info,
.next_info
overflow: hidden
@extend .limit-one-line
color: $button-color
text-overflow: ellipsis
white-space: nowrap
font-weight: 500
.next-post
@@ -68,12 +66,12 @@
height: 150px
&:hover
img.prev_cover,
img.next_cover
img.prev-cover,
img.next-cover
opacity: .8
transform: scale(1.1)
&.pagination_post
&.pagination-post
margin: 2rem 0 !important
background: $dark-black
source/css/_layout/post.styl
+133 -166
View File
@@ -1,147 +1,148 @@
#article-container
if hexo-config('beautify.enable')
headStyle(fontsize)
padding-left: unit(fontsize + .4, 'rem')
beautify()
headStyle(fontsize)
padding-left: unit(fontsize + .4, 'rem')
code
font-size: unit(fontsize, 'rem')
code
font-size: unit(fontsize, 'rem')
&:before
margin-left: unit((-(fontsize + .2)), 'rem')
font-size: unit(fontsize, 'rem')
&:before
margin-left: unit((-(fontsize + .2)), 'rem')
font-size: unit(fontsize, 'rem')
&:hover
padding-left: unit(fontsize + .6, 'rem')
&:hover
padding-left: unit(fontsize + .6, 'rem')
h1,
h2,
h3,
h4,
h5,
h6
cursor: pointer
h1,
h2,
h3,
h4,
h5,
h6
cursor: pointer
transition: all .2s ease-out
&:before
position: absolute
top: calc(50% - .35rem)
color: $title-prefix-icon-color
content: $title-prefix-icon
line-height: 1
transition: all .2s ease-out
@extend .fontawesomeIcon
&:hover
&:before
position: absolute
top: calc(50% - .35rem)
color: $title-prefix-icon-color
content: $title-prefix-icon
font-style: normal
font-variant: normal
line-height: 1
transition: all .2s ease-out
text-rendering: auto
-webkit-font-smoothing: antialiased
color: $light-blue
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
h1
headStyle(1)
&:hover
&:before
color: $light-blue
h2
headStyle(.9)
h1
headStyle(1)
h3
headStyle(.8)
h2
headStyle(.9)
h4
headStyle(.7)
h3
headStyle(.8)
h5
headStyle(.6)
h4
headStyle(.7)
h6
headStyle(.6)
h5
headStyle(.6)
ol,
ul
margin-top: .4rem
padding: 0 0 0 .8rem
list-style: none
counter-reset: li
h6
headStyle(.6)
p
margin: 0 0 .5rem
ol,
ul
margin-top: .4rem
padding: 0 0 0 .8rem
list-style: none
counter-reset: li
padding-left: .5rem
p
margin: 0 0 .5rem
ol,
ul
padding-left: .5rem
li
li
&:not(.tab)
position: relative
margin: .2rem 0
padding: .1rem .5rem .1rem 1.5rem
&:hover
&:before
transform: rotate(360deg)
&:hover
&:before
position: absolute
top: 0
left: 0
background: $light-blue
color: $card-bg
cursor: pointer
transition: all .3s ease-out
transform: rotate(360deg)
ol
> li
&:before
position: absolute
top: 0
left: 0
background: $light-blue
color: $card-bg
cursor: pointer
transition: all .3s ease-out
ol
> li
&:before
margin-top: .2rem
width: w = 1.2rem
height: h = w
border-radius: .5 * w
content: counter(li)
counter-increment: li
text-align: center
font-size: .6rem
line-height: h
ul
> li:not(.tab)
&:hover
&:before
margin-top: .2rem
width: w = 1.2rem
height: h = w
border-radius: .5 * w
content: counter(li)
counter-increment: li
text-align: center
font-size: .6rem
line-height: h
border-color: $theme-button-hover-color
ul
> li
&:hover
&:before
border-color: $theme-button-hover-color
&:before
$w = .3rem
top: 10px
margin-left: .45rem
width: w = $w
height: h = w
border: .5 * w solid $light-blue
border-radius: w
background: transparent
content: ''
line-height: h
no-beautify()
ol,
ul
margin-top: .4rem
p
margin: 0 0 .5rem
&:before
$w = .3rem
top: 10px
margin-left: .45rem
width: w = $w
height: h = w
border: .5 * w solid $light-blue
border-radius: w
background: transparent
content: ''
line-height: h
else
ol,
ul
margin-top: .4rem
counter-reset: li
padding-left: .5rem
p
margin: 0 0 .5rem
li
position: relative
margin: .3rem 0
padding-left: .3rem
ol,
ul
padding-left: .5rem
#article-container
if hexo-config('beautify.enable') && hexo-config('beautify.field') == 'site'
beautify()
else if hexo-config('beautify.enable') && hexo-config('beautify.field') == 'post'
no-beautify()
li
position: relative
margin: .3rem 0
padding-left: .3rem
&.post-content
beautify()
else
no-beautify()
a
color: $a-link-color
@@ -163,64 +164,10 @@ a.fancybox
width: 100%
text-align: center
p
margin: 0 0 .8rem
img
max-width: 100%
transition: all .2s
// highlight
.highlight-tools
.code-expand
position: absolute
top: 0
z-index: 1
padding: 7px 10px
color: $highlight-foreground
cursor: pointer
transition: all .3s
transform: rotate(0)
& + .code-lang
left: 30px
&.code-closed
transition: all .3s
transform: rotate(-90deg) !important
.code-lang
position: absolute
left: 15px
z-index: 1
color: $highlight-foreground
text-transform: capitalize
font-weight: bold
font-size: .8rem
line-height: 1.4rem
cursor: pointer
.copy-notice
position: absolute
top: 0
right: 0
z-index: 1
background: darken($highlight-background, 5)
color: $highlight-aqua
opacity: 0
.fa-clipboard
position: absolute
top: .4rem
right: 10px
z-index: 1
color: $highlight-aqua
cursor: pointer
transition: color .2s
&:hover
color: darken($highlight-aqua, 20%)
.katex-wrap
overflow: auto
@@ -319,6 +266,9 @@ img
text-decoration: none
#article-container
word-wrap: break-word
overflow-wrap: break-word
a
color: $theme-link-color
@@ -328,6 +278,12 @@ img
img
margin: 0 auto .8rem
p
margin: 0 0 .8rem
iframe
margin: 0 0 1rem
@media screen and (max-width: 1024px)
.layout_post
width: auto
@@ -337,4 +293,15 @@ img
padding: 1rem 5px
& > #post
padding: 1.8rem .7rem
padding: 1.8rem .7rem
// adjust the layout width in big screen
@media screen and (min-width: $lr)
.layout_post
max-width: 1300px
.layout_page
max-width: 1500px
&.hide-aside
max-width: 1300px
source/css/_layout/relatedposts.styl
+13 -21
View File
@@ -8,18 +8,27 @@
.relatedPosts_item
position: relative
float: left
display: inline-block
overflow: hidden
margin: 5px
width: calc(100% / 3 - 10px)
margin: 3px
width: calc(33.333% - 6px)
height: 200px
background: $dark-black
vertical-align: bottom
&:hover
.relatedPosts_cover
opacity: .8
transform: scale(1.1)
@media screen and (max-width: 768px)
margin: 2px
width: calc(50% - 4px)
height: 150px
@media screen and (max-width: 480px)
width: calc(100% - 4px)
.relatedPosts_cover
width: 100%
height: 100%
@@ -40,22 +49,5 @@
font-size: 90%
.relatedPosts_title
display: -webkit-box
overflow: hidden
@extend .limit-more-line
-webkit-line-clamp: 2
-webkit-box-orient: vertical
.clear_both
clear: both
@media screen and (max-width: 768px)
.relatedPosts
.relatedPosts_item
margin: 2px
width: calc(100% / 2 - 4px)
height: 150px
@media screen and (max-width: 480px)
.relatedPosts
.relatedPosts_item
width: calc(100% - 4px)
source/css/_layout/reward.styl
+14 -17
View File
@@ -1,20 +1,18 @@
.post-reward
margin: 75px auto 0
position: relative
margin-top: 4rem
width: 100%
text-align: center
.reward-button
position: relative
z-index: 1
display: inline-block
width: 100px
padding: .5rem 1.2rem
background: $light-blue
color: $button-color
text-align: center
line-height: 36px
cursor: pointer
transition: all .4s
&:hover
box-shadow: inset 9em 0 0 0 $theme-button-hover-color
.reward-main
display: block
@@ -22,17 +20,15 @@
position: absolute
bottom: 40px
left: 0
z-index: 100
display: none
margin: 0
padding: 0 0 15px
width: 100%
transition: all .6s
.reward-all
display: inline-block
margin: 0 0 0 -110px
padding: 20px 10px 8px
width: 320px
margin: 0
padding: 1rem .5rem
border-radius: 4px
background: $reward-pop-up-bg
@@ -61,14 +57,15 @@
display: inline-block
padding: 0 8px
list-style-type: none
vertical-align: top
img
position: relative
max-width: 130px
width: 130px
border-radius: 3px
height: 130px
.post-qr-code__desc
margin: -5px 0
padding-top: .4rem
width: 130px
color: $reward-pop-up-color
text-align: center
word-break: break-all
source/css/_layout/rightside.styl
+5 -8
View File
@@ -1,7 +1,8 @@
#rightside
position: fixed
right: -38px
bottom: 40px
bottom: $rightside-bottom
z-index: 100
opacity: 0
transition: all .5s
@@ -16,9 +17,8 @@
animation: rightsideOut .3s
& > div
& > i,
& > a,
& > div
& > button,
& > a
display: block
margin-bottom: 2px
width: 30px
@@ -27,7 +27,6 @@
color: $button-color
text-align: center
font-size: 16px
line-height: 29px
cursor: pointer
&:hover
@@ -40,9 +39,7 @@
#mobile-toc-button
display: none
@media screen and (max-width: $bg)
#rightside
#mobile-toc-button
@media screen and (max-width: $bg)
display: block
@keyframes rightsideIn
source/css/_layout/third-party.styl
+15 -11
View File
@@ -1,28 +1,25 @@
if hexo-config('valine.enable')
// valine
#vcomment
button
padding: .3rem 1rem
padding: .3rem .8rem
border-color: $button-color
background-color: $light-blue
color: $button-color
font-size: .7rem
transition: all .3s
&:hover
background-color: $theme-button-hover-color
textarea
if hexo-config('valine.bg')
if hexo-config('valine.bg')
textarea
background: url(hexo-config('valine.bg')) 100% 100% no-repeat
.info
display: none
.vimg
border: 0
transition: all .3s
&:hover
transform: rotate(540deg)
transform: rotate(360deg)
.vat
padding: 0 .8rem
@@ -30,6 +27,7 @@ if hexo-config('valine.enable')
border-radius: 5px
color: $light-blue
font-size: .7125rem
transition: all .3s
&:hover
background-color: $light-blue
@@ -51,11 +49,12 @@ if hexo-config('beautify.enable')
content: none
// third-party
// fireworks
.fireworks
position: fixed
top: 0
left: 0
z-index: 999999
z-index: $fireworks-zIndex
pointer-events: none
.medium-zoom-image--opened
@@ -85,4 +84,9 @@ if hexo-config('beautify.enable')
padding: .3rem 0 .8em
.has-jax
overflow: auto
overflow: auto
//aplayer
#article-container
.aplayer
margin: 0 0 1rem
source/css/_mode/darkmode.styl
+139 -116
View File
@@ -20,7 +20,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
background-color: alpha($dark-black, .7)
content: ''
#nav,
#page-header,
.layout_post > #post,
.layout_page > div:first-child:not(.recent-posts)
background-color: #121212
@@ -39,47 +39,64 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
.article-title
color: alpha(#FFFFFF, .8) !important
// 頭部
#page-header
&.fixed
background: alpha(#121212, .8)
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
&:before
position: absolute
top: 0
right: 0
bottom: 0
left: 0
background-color: alpha($dark-black, .7)
content: ''
.toggle-menu,
#site-name,
& > #nav
a
color: alpha(#FFFFFF, .8)
color: alpha(#FFFFFF, .8) !important
.menus_item_child
background-color: lighten(#121212, 5) !important
li
&:hover
background: lighten(#121212, 20)
&.fixed
background: alpha(#121212, .8)
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
.toggle-menu,
#site-name,
a
color: alpha(#FFFFFF, .6)
color: alpha(#FFFFFF, .8)
.menus_item_child
background-color: lighten(#121212, 5) !important
li
&:hover
background: lighten(#121212, 20) !important
a
color: alpha(#FFFFFF, .8)
#site_subtitle
& > span
color: alpha(#FFFFFF, .6)
// 代碼框
#article-container pre,
#article-container pre code
background-color: lighten(#121212, 2)
#article-container
pre,
.highlight:not(.js-file-line-container)
background-color: lighten(#121212, 2) !important
color: alpha(#FFFFFF, .6) !important
figure.highlight
.line:before
color: alpha(#FFFFFF, .6) !important
.gutter pre
background-color: lighten(#121212, 2) !important
.hljs
background-color: lighten(#121212, 2) !important
.highlight-tools
background: lighten(#121212, 3)
#article-container .highlight:not(.js-file-line-container)
background-color: lighten(#121212, 2)
.code pre,
.gutter pre
background-color: lighten(#121212, 2)
table
.copy-notice
background: lighten(#121212, 3)
.copy-notice
background: lighten(#121212, 3)
background: lighten(#121212, 3) !important
color: #90a4ae !important
blockquote
background-color: lighten(#121212, 10)
@@ -109,6 +126,9 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
.post-copyright-info
color: alpha(#FFFFFF, .6)
&:after
background: #121212
// 音樂播放器
.aplayer
filter: brightness(.7)
@@ -117,14 +137,13 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
// 右下角按鈕
#rightside
& > div
& > i,
& > a,
& > div
background-color: lighten(#121212, 5) !important
color: alpha(#FFFFFF, .6) !important
& > button,
& > a
background-color: lighten(#121212, 5)
color: alpha(#FFFFFF, .6)
&:hover
background: lighten(#121212, 20) !important
background: lighten(#121212, 20)
// 打賞按鈕
.post-reward
@@ -137,17 +156,19 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
&:after
border-top: 13px solid lighten(#121212, 10) !important
.md-links-item:before,
.aside-category-list:hover,
.archive-list-item:hover,
.flink-list-item:before,
.card-category-list-item a:hover,
.card-archive-list-item a:hover,
#bookmark-it
background-color: lighten(#121212, 10) !important
img,
iframe:not(.utterances-frame),
.gist
filter: brightness(.7)
#article-container iframe
filter: brightness(.7)
// 側邊欄
#aside_content
.card-widget
@@ -156,33 +177,21 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
.headline,
.length_num,
.aside-post_title,
.aside-category-list_link,
.archive-list-link,
.social-icon
.card-category-list-link,
.card-archive-list-link,
.social-icon,
.card-category-list-link-more,
.card-archive-list-link-more
color: alpha(#FFFFFF, .6) !important
.button--animated:before
background: lighten(#121212, 20) !important
background: lighten(#121212, 20)
// 頭部
#nav
&:before
position: absolute
top: 0
right: 0
bottom: 0
left: 0
background-color: alpha($dark-black, .7)
content: ''
#nav span,
#nav i,
#page-header a,
#page-header .toggle-menu,
#post-meta,
#post-meta a,
#footer-wrap,
#footer-wrap a
#footer-wrap a,
.img-alt
color: alpha(#FFFFFF, .6) !important
.posttitle,
@@ -198,11 +207,11 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
.recent-posts .article-meta,
.recent-posts a,
.post-reward .reward-button,
.fa-clipboard,
.copy-button,
.gutter pre,
#bookmark-it,
.copy-notice,
.md-links-item a,
.flink-list-item a,
.category-list-link,
.relatedPosts_date,
.prev-post .label,
@@ -215,11 +224,13 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
color: alpha(#FFFFFF, .8) !important
// 時間軸界面
.article-sort-item__title
color: alpha(#FFFFFF, .6)
.article-sort
&-item__title
color: alpha(#FFFFFF, .6)
&:hover
color: #49b1f5
&-item:before,
&-title:before
background: #121212
// 手機 MENU,TOC
#mobile-sidebar
@@ -235,6 +246,24 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
a
color: alpha(#FFFFFF, .6) !important
// error 404
#error-wrap
.error-content
background: #121212
.error-img
filter: brightness(.7)
.error-info
.error_title
color: alpha(#FFFFFF, .8)
.error_subtitle
color: alpha(#FFFFFF, .6)
a
background: #2c2c2c
// note
if hexo-config('note.style') == 'modern'
.note
@@ -245,6 +274,35 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
filter: brightness(.7)
color: #4c4948
// hide-tags
.hide-button,
.btn-beautify
filter: brightness(.8)
// tabs
#article-container
.tabs
border: 2px solid #2c2c2c
border-top: none
> .nav-tabs
background: #2c2c2c
button
border-top: 2px solid #2c2c2c
background: #2c2c2c
color: alpha(#FFFFFF, .6)
.tab:not(.active)
button
&:hover
border-top: 2px solid lighten(#121212, 20)
background: lighten(#121212, 20)
.active
button
background: #121212
// 第三方
// 插件 hexo-blog-encrypt
#hexo-blog-encrypt
@@ -255,6 +313,9 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
input
background-color: #121212
.mermaid
filter: brightness(.7)
if hexo-config('gitalk') && hexo-config('gitalk.enable')
#gitalk-container
.gt-header-textarea,
@@ -268,61 +329,16 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
fill: alpha(#FFFFFF, .6) !important
if hexo-config('valine') && hexo-config('valine.enable')
// 評論
#vcomment
p,
a,
textarea,
.vemoji-btn,
.vpreview-btn,
input,
path,
.vcount,
.vnum,
.vtime,
.vsys,
.vsys,
.vnick
color: alpha(#FFFFFF, .6) !important
.vsys
background: rgb(97, 106, 107) !important
.vbtn,
.vat
border: 1px solid alpha(#FFFFFF, .6)
background: lighten(#121212, 5) !important
background: #121212 !important
color: alpha(#FFFFFF, .6) !important
&:hover
background: lighten(#121212, 20) !important
.vwrap
border: 1px solid alpha(#FFFFFF, .6)
input
border-bottom: 1px dashed #616a6b
.vh
border-bottom: 1px dashed #616a6b
pre
border: 1px solid alpha(#FFFFFF, .6)
background-color: #121212
code
background: transparent
code
background-color: #2c2c2c
color: alpha(#FFFFFF, .6)
.vcontent.expand:before
background: linear-gradient(180deg, hsla(0, 0, 0, 0), hsl(218, 8%, 19%))
.vcontent.expand:after
background: hsla(204, 5%, 22%, 1)
if hexo-config('local_search') && hexo-config('local_search.enable')
#local-search
background: #121212
@@ -366,5 +382,12 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
blockquote
color: alpha(#FFFFFF, .6)
.mermaid
filter: brightness(.7)
if hexo-config('preloader')
#loading-box
.loading-left-bg,
.loading-right-bg,
.configure-core
background-color: darken(#121212, 2)
.loading-word
color: alpha(#FFFFFF, .6)
source/css/_mode/readmode.styl
+129 -31
View File
@@ -1,9 +1,11 @@
if hexo-config('readmode') && hexo-config('readmode.enable')
if hexo-config('readmode')
[data-theme='light']
.read-mode
background: #fff
$light-redmode-bg = #fff
#nav.post-bg
.read-mode
background: $light-redmode-bg
#page-header.post-bg
a
color: $font-black !important
@@ -12,17 +14,27 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
.highlight:not(.js-file-line-container)
background: #f7f7f7 !important
*
color: $font-black !important
figure.highlight
.line:before
color: $font-black !important
.hljs
background: #f7f7f7 !important
code
color: #4c4948
blockquote
border-left: .2rem solid #ddd
background-color: transparent
background-color: $light-redmode-bg
ol,
li
&:before
background: transparent
background: $light-redmode-bg
color: #4c4948
ul
@@ -32,41 +44,66 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
hr
border: 2px dashed #d6dbdf
background: transparent
background: $light-redmode-bg
&:before
color: darken(#d6dbdf, 10)
.hide-button
background: darken(#d6dbdf, 10) !important
.hide-toggle
border: 1px solid darken(#d6dbdf, 10) !important
.hide-button,
.btn-beautify
background: $light-redmode-bg !important
color: #4c4948 !important
.btn-beautify
border: 1px solid darken(#d6dbdf, 10)
&.button--animated:before
background: $light-redmode-bg
.hide-inline,
.hide-block
& >.hide-button
border: 1px solid darken(#d6dbdf, 10)
& > .button--animated:before
background: $light-redmode-bg
.note
border: 2px solid #eee
border-left-color: transparent
background-color: transparent
background-color: $light-redmode-bg
#mobile-sidebar-menus,
#rightside i,
#rightside a,
#rightside #rightside_config
background: darken(#d6dbdf, 10) !important
.tabs
border: 1px solid darken(#d6dbdf, 10)
#rightside button
background: darken(#d6dbdf, 20) !important
[data-theme='dark']
$dark-readmode-bg = #0d0d0d
.read-mode
background: #0d0d0d
background: $dark-readmode-bg
#article-container
pre,
.highlight:not(.js-file-line-container)
*
color: rgba(255, 255, 255, .6) !important
code
color: rgba(255, 255, 255, .6)
blockquote
border-left: .2rem solid rgba(255, 255, 255, .6)
background-color: transparent
background-color: $dark-readmode-bg
ol,
li
&:before
background: transparent
background: $dark-readmode-bg
color: rgba(255, 255, 255, .6)
ul
@@ -74,21 +111,43 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
&:before
border: .15rem solid rgba(255, 255, 255, .6)
.hide-toggle
border: 1px solid rgba(255, 255, 255, .6) !important
.hide-button,
.btn-beautify
background: $dark-readmode-bg !important
filter: none
color: rgba(255, 255, 255, .6) !important
.btn-beautify
border: 1px solid rgba(255, 255, 255, .6)
&.button--animated:before
background: $dark-readmode-bg !important
.hide-inline,
.hide-block
& >.hide-button
border: 1px solid rgba(255, 255, 255, .6)
& > .button--animated:before
background: $dark-readmode-bg !important
.note
border: 2px solid rgba(255, 255, 255, .6)
border-left-color: transparent
filter: none
background-color: transparent
background-color: $dark-readmode-bg
color: rgba(255, 255, 255, .6)
.hide-button
background: #1f1f1f !important
.tabs
border: 2px solid rgba(255, 255, 255, .6)
.read-mode
#body-wrap
padding-left: 0 !important
#nav.post-bg
#page-header.post-bg
background-color: transparent
background-image: none !important
@@ -111,29 +170,38 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
&:hover
box-shadow: none
.highlight
display: block !important
figure.highlight
border-radius: 0 !important
box-shadow: none !important
#rightside
#darkmode
display: none
& > :not(.highlight-tools)
display: block !important
& > canvas
display: none !important
.code-area-wrap > .highlight-tools,
.highlight-tools,
#footer,
#post > *:not(:first-child),
#to_comment,
#sidebar,
#toggle-sidebar,
#mobile-toc-button,
#page-header
#nav
display: none !important
#web_bg
background: none
if !hexo-config('chat_btn')
#chatra,
#tidio-chat-code,
#tidio-chat,
#daodream-container,
.gitter-chat-embed,
.gitter-open-chat-button
display: none !important
#article-container
h1,
h2,
@@ -145,3 +213,33 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
&:before
content: ''
&:hover
padding: 0
ul,
li,
ol
&:hover:before
transform: none !important
.tabs
> .nav-tabs
background: transparent
> .tab
border-bottom: 0
button
border-top: none !important
background: transparent
&:hover
background: none !important
&.active
button
text-decoration: underline
> .tab-contents .tab-item-content.active
animation: none
source/css/_search/algolia.styl
+4
View File
@@ -45,6 +45,10 @@
&:hover
color: $search-color
em
color: $search-keyword-highlight
font-weight: bold
.ais-pagination.pagination
margin: .8rem 0 0
padding: 0
source/css/_search/index.styl
+2 -1
View File
@@ -50,4 +50,5 @@
height: 100%
.search-result-list
max-height: 100% !important
padding-bottom: 2rem
max-height: 75vh !important
source/css/_search/local-search.styl
+12 -2
View File
@@ -18,7 +18,8 @@
.local-search__hit-item
position: relative
padding-left: 1.5rem
padding-left: 1.3rem
line-height: 1.7
&:hover
&:before
@@ -27,7 +28,7 @@
&:before
$w = .3rem
position: absolute
top: .4rem
top: .3rem
left: 0
width: w = $w
height: h = w
@@ -41,12 +42,21 @@
a
display: block
color: $font-black
font-weight: 600
font-size: 14px
cursor: pointer
&:hover
color: $search-color
.search-result
margin: 0 0 .4rem
word-break: break-all
.search-keyword
color: $search-keyword-highlight
font-weight: bold
.local-search-stats__hr
display: none !important
source/css/_tags/button.styl
+60
View File
@@ -0,0 +1,60 @@
#article-container
.btn-center
margin: 0 0 1rem
text-align: center
.btn-beautify
position: relative
z-index: 1
display: inline-block
margin: 0 .2rem .3rem
padding: 0 1rem
background-color: $btn-default-color
color: $btn-color
line-height: 2
&:not(.block) + .btn-beautify:not(.block)
margin: 0 .2rem 1rem
&.block
display: block
margin: 0 0 1rem
width: fit-content
width: -moz-fit-content
&.center
margin: 0 auto 1rem
&.right
margin: 0 0 1rem auto
&.larger
padding: .3rem 1.3rem
&:hover
text-decoration: none
for $type in $btn-types
&.{$type}
background-color: lookup('$btn-' + $type + '-color')
&.outline
border: 1px solid transparent
border-color: $btn-default-color
background-color: transparent
color: $btn-default-color
transition: all .3s
&.button--animated:before
background: $btn-default-color
&:hover
color: white !important
for $type in $btn-types
&.{$type}
border-color: lookup('$btn-' + $type + '-color')
color: lookup('$btn-' + $type + '-color')
&.button--animated:before
background: lookup('$btn-' + $type + '-color')
source/css/_layout/gallery.styl → source/css/_tags/gallery.styl
+9 -11
View File
@@ -9,6 +9,9 @@ figure.gallery-group
background: $dark-black
-webkit-transform: translate3d(0, 0, 0)
@media screen and (max-width: 600px)
width: calc(100% - .4rem)
&:hover
img
opacity: .4
@@ -54,8 +57,7 @@ figure.gallery-group
opacity: 0
p
display: -webkit-box
overflow: hidden
@extend .limit-more-line
margin: 0
padding: .4rem 0 0
letter-spacing: 1px
@@ -65,19 +67,16 @@ figure.gallery-group
transition: opacity .35s, transform .35s
transform: translate3d(100%, 0, 0)
-webkit-line-clamp: 4
-webkit-box-orient: vertical
.gallery-group-name
@extend .limit-more-line
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
@@ -100,10 +99,9 @@ figure.gallery-group
img
opacity: 0
.img-alt
display: none
.fancybox
width: auto
text-align: inherit
@media screen and (max-width: 600px)
figure.gallery-group
width: calc(100% - .4rem)
text-align: inherit
source/css/_tags/hexo.styl
+30
View File
@@ -0,0 +1,30 @@
// pullquote
blockquote
&.pullquote
position: relative
max-width: 45%
font-size: 110%
&.left
float: left
margin: 1em .5em 0 0
&.right
float: right
margin: 1em 0 0 .5rem
// hexo tag video
.video-container
position: relative
overflow: hidden
margin-bottom: .8rem
padding-top: 56.25%
height: 0
iframe
position: absolute
top: 0
left: 0
margin-top: 0
width: 100%
height: 100%
source/css/_tags/hide.styl
+48
View File
@@ -0,0 +1,48 @@
// tag-hide
.hide-inline,
.hide-block
& > .hide-button
position: relative
z-index: 1
display: inline-block
padding: .3rem 1rem
background: $tag-hide-bg
color: $white !important
&.open
display: none
& > .hide-content
display: none
.hide-inline
& > .hide-button
margin: 0 .3rem
& > .hide-content
margin: 0 .3rem
.hide-block
margin: 0 0 .8rem
.hide-toggle
margin-bottom: 1rem
border: 1px solid $tag-hide-toggle-bg
& > .hide-button
padding: .3rem .5rem
background: $tag-hide-toggle-bg
color: $font-color
cursor: pointer
& > i
font-size: 1.2em
transition: all .3s
&.open
i
transform: rotate(90deg)
& > .hide-content
display: none
margin: 1.5rem 1.2rem
source/css/_tags/note.styl
+97
View File
@@ -0,0 +1,97 @@
.note
$note-icons = hexo-config('note.icons')
$note-style = hexo-config('note.style')
position: relative
margin: 0 0 1rem
padding: 15px
if ($note-style == 'simple')
border: 1px solid $light-grey
border-left-width: 5px
if ($note-style == 'modern')
border: 1px solid transparent
background-color: $whitesmoke
if ($note-style == 'flat')
border: initial
border-left: 5px solid $light-grey
background-color: lighten($light-grey, 65%)
if hexo-config('note.border_radius') is a 'unit'
border-radius: unit(hexo-config('note.border_radius'), px)
h2,
h3,
h4,
h5,
h6
if $note-icons
margin-top: 3px
else
margin-top: 0
margin-bottom: 0
padding-top: 0 !important
border-bottom: initial
p,
ul,
ol,
table,
pre,
blockquote,
img
&:first-child
margin-top: 0 !important
&:last-child
margin-bottom: 0 !important
if $note-icons
&:not(.no-icon)
padding-left: 45px
&::before
position: absolute
top: 13px
left: 15px
font-size: larger
@extend .fontawesomeIcon
for $type in $note-types
&.{$type}
if ($note-style == 'flat')
background: lookup('$note-' + $type + '-bg')
if ($note-style == 'modern')
border-color: lookup('$note-modern-' + $type + '-border')
background: lookup('$note-modern-' + $type + '-bg')
color: lookup('$note-modern-' + $type + '-text')
a,
span.exturl
&:not(.btn)
border-bottom: 1px solid lookup('$note-modern-' + $type + '-text')
color: lookup('$note-modern-' + $type + '-text')
&:hover
border-bottom: 1px solid lookup('$note-modern-' + $type + '-hover')
color: lookup('$note-modern-' + $type + '-hover')
if ($note-style != 'modern')
border-left-color: lookup('$note-' + $type + '-border')
h2,
h3,
h4,
h5,
h6
color: lookup('$note-' + $type + '-text')
if $note-icons
&:not(.no-icon)::before
content: lookup('$note-' + $type + '-icon')
if ($note-style != 'modern')
color: lookup('$note-' + $type + '-text')
source/css/_tags/tabs.styl
+70
View File
@@ -0,0 +1,70 @@
#article-container
.tabs
position: relative
margin: 0 0 1rem
border: 1px solid $tab-border-color
border-top: none
> .nav-tabs
display: flex
flex-wrap: wrap
margin: 0
padding: 0
background: $tab-botton-bg
> .tab
margin: 0
padding: 0
list-style: none
@media screen and (max-width: 768px)
flex-grow: 1
button
display: block
padding: .5rem 1rem
border-top: 2px solid $tab-border-color
background: $tab-botton-bg
color: $font-color
width 100%
line-height: 2
transition: all .4s
&:hover
border-top: 2px solid $tab-button-hover-bg
background: $tab-button-hover-bg
i
width: 1.5em
&.active
button
border-top: 2px solid $tab-active-border-color
background: $card-bg
cursor: default
> .tab-contents
.tab-item-content
position: relative
display: none
padding: 1.8rem 1.2rem
@media screen and (max-width: 768px)
padding: 1.2rem .7rem
&.active
display: block
animation: tabshow .5s
.tab-to-top
position: relative
display: block
margin: 0 0 0 auto
color: $tab-to-top-color
@keyframes tabshow
0%
transform: translateY(15px)
100%
transform: translateY(0)
source/css/index.styl
+2 -1
View File
@@ -2,9 +2,10 @@
@import '_third-party/normalize.min.css'
// project
@import 'var'
@import '_global'
@import '_global/*'
@import '_highlight/highlight'
@import '_layout/*'
@import '_tags/*'
@import '_mode/*'
// search
source/css/var.styl
+39 -22
View File
@@ -3,7 +3,6 @@ $bright-blue = #49B1F5
$strong-cyan = #00c4b6
$light-orange = #FF7242
$light-red = #F47466
$themeColorEnable = hexo-config('theme_color') && hexo-config('theme_color.enable')
$theme-color = $themeColorEnable ? convert(hexo-config('theme_color.main')) : $bright-blue
$theme-paginator-color = $themeColorEnable ? convert(hexo-config('theme_color.paginator')) : $strong-cyan
@@ -14,23 +13,20 @@ $theme-hr-color = $themeColorEnable ? convert(hexo-config('theme_color.hr_color'
$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
// 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'
//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
$dafault-font-family = -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif
$dafault-code-font = consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', sans-serif
$font-family = hexo-config('font.font-family') ? unquote(hexo-config('font.font-family')) : $dafault-font-family
$code-font = hexo-config('font.code-font') ? unquote(hexo-config('font.code-font')) : $dafault-code-font
$site-name-font = hexo-config('blog_title_font.font-family') ? unquote(hexo-config('blog_title_font.font-family')) : $font-family
// hr
$hrEnable = hexo-config('hr_icon') && hexo-config('hr_icon.enable')
$hr-icon = $hrEnable && hexo-config('hr_icon.icon') ? hexo-config('hr_icon.icon') : '\f0c4'
$hr-icon-top = $hrEnable && hexo-config('hr_icon.icon-top') ? convert(hexo-config('hr_icon.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
@@ -39,6 +35,7 @@ $rem = 20px
$text-line-height = 2
$sm = 768px
$bg = 1024px
$lr = 2000px
$web-bg = convert(hexo-config('background'))
$index_top_img_height = convert(hexo-config('index_top_img_height')) || 100vh
$index_site_info_top = convert(hexo-config('index_site_info_top')) || 43%
@@ -52,11 +49,10 @@ $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)
$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
@@ -78,16 +74,21 @@ $reward-pop-up-color = #858585
// search
$search-bg = #f6f8fa
$search-color = $theme-color
//gallery
$search-keyword-highlight = #F47466
// gallery
$gallery-color = #fff
// tag-hide
$tag-hide-bg = $theme-color
// Note colors
// --------------------------------------------------
$tag-hide-toggle-bg = #f0f0f0
// preloader
$preloader-bg = #37474f
// rightside
$rightside-bottom = hexo-config('rightside-bottom') is a 'unit' ? unit(hexo-config('rightside-bottom'), px) : 40px
// fireworks
$fireworks-zIndex = hexo-config('fireworks.zIndex') ? hexo-config('fireworks.zIndex') : 99999
// Tag Plugins - Note
hexo-config('note.light_bg_offset') is a 'unit' ? ($lbg = unit(hexo-config('note.light_bg_offset'), '%')) : ($lbg = 0)
$note-types = 'default' 'primary' 'info' 'success' 'warning' 'danger'
// Default
$note-default-border = #777
$note-default-bg = lighten(spin($note-default-border, 0), 94% + $lbg)
@@ -142,3 +143,19 @@ $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%)
// Tag Plugins - Button
$btn-types = 'blue' 'pink' 'red' 'purple' 'orange' 'green'
$btn-color = #fff
$btn-default-color = #777
$btn-blue-color = #428bca
$btn-pink-color = #FF69B4
$btn-red-color = #FF0000
$btn-orange-color = #FF8C00
$btn-purple-color = #6f42c1
$btn-green-color = #5cb85c
// Tag Plugins - Tab
$tab-border-color = #f0f0f0
$tab-botton-bg = #f0f0f0
$tab-button-hover-bg = darken($tab-border-color, 8)
$tab-active-border-color = $theme-color
$tab-to-top-color = #99a9bf
source/img/avatar.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 76 KiB

source/img/comment_bg.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.0 KiB

source/img/favicon.ico
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

source/img/favicon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 323 B

source/img/index.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 247 KiB

source/img/post.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 52 KiB

source/img/post_loadding.svg
-1
View File
@@ -1 +0,0 @@
<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-pacman" style="background: none;"><g ng-attr-style="display:{{config.showBean}}" style="display:block"><circle cx="74.5405" cy="50" r="4" ng-attr-fill="{{config.c2}}" fill="#a3d9ef"><animate attributeName="cx" calcMode="linear" values="95;35" keyTimes="0;1" dur="0.8" begin="-0.536s" repeatCount="indefinite"></animate><animate attributeName="fill-opacity" calcMode="linear" values="0;1;1" keyTimes="0;0.2;1" dur="0.8" begin="-0.536s" repeatCount="indefinite"></animate></circle><circle cx="94.9405" cy="50" r="4" ng-attr-fill="{{config.c2}}" fill="#a3d9ef"><animate attributeName="cx" calcMode="linear" values="95;35" keyTimes="0;1" dur="0.8" begin="-0.264s" repeatCount="indefinite"></animate><animate attributeName="fill-opacity" calcMode="linear" values="0;1;1" keyTimes="0;0.2;1" dur="0.8" begin="-0.264s" repeatCount="indefinite"></animate></circle><circle cx="54.7405" cy="50" r="4" ng-attr-fill="{{config.c2}}" fill="#a3d9ef"><animate attributeName="cx" calcMode="linear" values="95;35" keyTimes="0;1" dur="0.8" begin="0s" repeatCount="indefinite"></animate><animate attributeName="fill-opacity" calcMode="linear" values="0;1;1" keyTimes="0;0.2;1" dur="0.8" begin="0s" repeatCount="indefinite"></animate></circle></g><g ng-attr-transform="translate({{config.showBeanOffset}} 0)" transform="translate(-15 0)"><path d="M50 50L20 50A30 30 0 0 0 80 50Z" ng-attr-fill="{{config.c1}}" fill="#82bbe4" transform="rotate(29.6108 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;45 50 50;0 50 50" keyTimes="0;0.5;1" dur="0.8s" begin="0s" repeatCount="indefinite"></animateTransform></path><path d="M50 50L20 50A30 30 0 0 1 80 50Z" ng-attr-fill="{{config.c1}}" fill="#82bbe4" transform="rotate(-29.6108 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;-45 50 50;0 50 50" keyTimes="0;0.5;1" dur="0.8s" begin="0s" repeatCount="indefinite"></animateTransform></path></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 KiB

source/js/main.js
+262 -227
View File
@@ -1,92 +1,68 @@
$(function () {
const isSnackbar = GLOBAL_CONFIG.Snackbar !== undefined
const isTocContent = $('#sidebar .sidebar-toc__content').children().length > 0
const $pageHead = $('#page-header')
const $nav = $('#nav')
const $rightside = $('#rightside')
const $body = $('body')
/**
* 當menu過多時，自動適配，避免UI錯亂
*/
const searchWidth = $('#search_button').outerWidth() !== undefined ? $('#search_button').outerWidth() : 0
const blogNameWidth = $('#blog_name').width()
var mw = 0
var $menusItem = $pageHead.find('.menus_item')
for (var i = 0; i < $menusItem.length; i++) {
mw = mw + $menusItem.eq(i).outerWidth()
}
/**
* 傳入 1 sidebar打開時
* 傳入 1 sidebar打開時
* 傳入 2 正常狀態下
* 傳入 3 resize時使用
*/
var blogNameWidth = $('#blog_name').width()
var menusWidth = $('.menus').width()
var sidebarWidth = $('#sidebar').width()
function isAdjust (n) {
var t
if (n === 1) {
t = blogNameWidth + searchWidth + mw > $pageHead.width() - 300
t = blogNameWidth + menusWidth > $nav.width() - sidebarWidth - 20
} else if (n === 2) {
t = blogNameWidth + searchWidth + mw > $pageHead.width()
t = blogNameWidth + menusWidth > $nav.width() - 20
}
if (t) headerAdjust()
else headerAdjustBack()
}
function headerAdjust () {
$nav.find('.toggle-menu').addClass('is-visible-inline')
$nav.find('.menus_items').addClass('is-invisible')
$nav.find('#search_button span').addClass('is-invisible')
}
function headerAdjustBack () {
$nav.find('.toggle-menu').removeClass('is-visible-inline')
$nav.find('.menus_items').removeClass('is-invisible')
$nav.find('#search_button span').removeClass('is-invisible')
}
// 初始化header
function initAjust () {
if (window.innerWidth < 768) headerAdjust()
else isAdjust(2)
}
initAjust()
function headerAdjust () {
$pageHead.find('.toggle-menu').addClass('is_visible')
$pageHead.find('.menus').addClass('is_invisible')
$pageHead.find('#search_button span').addClass('is_invisible')
}
function headerAdjustBack () {
$pageHead.find('.toggle-menu').removeClass('is_visible')
$pageHead.find('.menus').removeClass('is_invisible')
$pageHead.find('#search_button span').removeClass('is_invisible')
}
$('#nav').css({ opacity: '1', animation: 'headerNoOpacity 1s' })
$(window).on('resize', function () {
if (!$pageHead.hasClass('open-sidebar')) {
if ($('#sidebar').hasClass('tocOpenPc') && $nav.hasClass('fixed')) {
isAdjust(1)
} else {
initAjust()
}
})
/**
* windows時 設置主頁top_img 為 fixed
*/
if (GLOBAL_CONFIG_SITE.isHome) {
var isSafari = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)
if (!isSafari && isDesktop()) {
$('#nav').css('background-attachment', 'fixed')
}
}
/**
* 進入post頁sidebar處理
*/
var isSidebarOpen = $('#toggle-sidebar').hasClass('on') && isTocContent
var isPcSidebarOpen = false
if (window.innerWidth > 1024 && isSidebarOpen) {
setTimeout(function () {
openSidebar()
}, 400)
}
// 當toc爲空時，隱藏toc按鈕
if (isTocContent) {
$('#toggle-sidebar').css('opacity', '1')
} else {
$('#toggle-sidebar').css('display', 'none')
$('#mobile-toc-button').css('display', 'none')
if (GLOBAL_CONFIG_SITE.isPost) {
if (window.innerWidth > 1024 && $('#toggle-sidebar').hasClass('on')) {
setTimeout(function () {
openSidebar()
}, 400)
}
}
/**
@@ -94,9 +70,10 @@ $(function () {
*/
function closeSidebar () {
isPcSidebarOpen = false
$pageHead.removeClass('open-sidebar')
$('#sidebar').removeClass('tocOpenPc')
$('.menus').animate({
paddingRight: 0
}, 400)
$('#body-wrap').animate({
paddingLeft: 0
}, 400)
@@ -114,9 +91,10 @@ $(function () {
}
function openSidebar () {
isPcSidebarOpen = true
$pageHead.addClass('open-sidebar')
$('#sidebar').addClass('tocOpenPc')
$('.menus').animate({
paddingRight: 300
}, 400)
$('#body-wrap').animate({
paddingLeft: 300
}, 400)
@@ -129,7 +107,8 @@ $(function () {
opacity: '1'
})
var isAdjustTimeCount = window.setInterval(function () {
isAdjust(1)
if ($nav.hasClass('fixed')) isAdjust(1)
else isAdjust(2)
}, 100)
setTimeout(function () {
clearInterval(isAdjustTimeCount)
@@ -165,7 +144,7 @@ $(function () {
$toggleMenu.removeClass('close').addClass('open')
$mobileSidevarMenus.css('transform', 'translate3d(-100%,0,0)')
var $mobileSidevarMenusChild = $mobileSidevarMenus.children()
for (i = 0; i <= $mobileSidevarMenusChild.length; i++) {
for (let i = 0; i <= $mobileSidevarMenusChild.length; i++) {
const duration = i / 5 + 0.2
$mobileSidevarMenusChild.eq(i).css('animation', 'sidebarItem ' + duration + 's')
}
@@ -221,9 +200,9 @@ $(function () {
const mql = window.matchMedia('(max-width: 1024px)')
mql.addListener(function (ev) {
if (ev.matches) {
if (isPcSidebarOpen === true) closeSidebar()
if ($('#sidebar').hasClass('tocOpenPc')) closeSidebar()
} else {
if ($('#toggle-sidebar').hasClass('on') && isTocContent) openSidebar()
if ($('#toggle-sidebar').hasClass('on')) openSidebar()
if ($mobileTocButton.hasClass('open')) closeMobileSidebar('toc')
}
})
@@ -232,7 +211,7 @@ $(function () {
* 首頁top_img底下的箭頭
*/
$('#scroll_down').on('click', function () {
scrollTo('#content-inner')
scrollToDest('#content-inner')
})
/**
@@ -258,122 +237,143 @@ $(function () {
/**
* 代碼
* 只適用於Hexo默認的代碼渲染
*/
const isHighlightCopy = GLOBAL_CONFIG.highlightCopy
const isHighlightLang = GLOBAL_CONFIG.highlightLang
const isHighlightShrink = GLOBAL_CONFIG.highlightShrink
const $figureHighlight = $('figure.highlight')
if (isHighlightCopy || isHighlightLang || isHighlightShrink !== 'none') {
$figureHighlight.wrap('<div class="code-area-wrap"></div>').before('<div class="highlight-tools"></div>')
}
/**
if ($figureHighlight.length) {
const isHighlightCopy = GLOBAL_CONFIG.highlightCopy
const isHighlightLang = GLOBAL_CONFIG.highlightLang
const isHighlightShrink = GLOBAL_CONFIG_SITE.isHighlightShrink
if (isHighlightCopy || isHighlightLang || isHighlightShrink !== undefined) {
$figureHighlight.prepend('<div class="highlight-tools"></div>')
}
/**
* 代碼收縮
*/
const $highlightTools = $('.highlight-tools')
if (isHighlightShrink === true) {
$highlightTools.append('<i class="fa fa-angle-down code-expand code-closed" aria-hidden="true"></i>')
} else if (isHighlightShrink === false) {
$highlightTools.append('<i class="fa fa-angle-down code-expand" aria-hidden="true"></i>')
}
$(document).on('click', '.highlight-tools >.code-expand', function () {
var $table = $(this).parent().next()
if ($(this).hasClass('code-closed')) {
$table.css('display', '')
$(this).removeClass('code-closed')
} else {
$table.css('display', 'none')
$(this).addClass('code-closed')
const $highlightTools = $('.highlight-tools')
if (isHighlightShrink === true) {
$highlightTools.append('<i class="fas fa-angle-down code-expand code-closed"></i>')
} else if (isHighlightShrink === false) {
$highlightTools.append('<i class="fas fa-angle-down code-expand"></i>')
}
})
/**
* 代碼語言
*/
if (isHighlightLang) {
var langNameIndex, langName
$figureHighlight.each(function () {
langNameIndex = langName = $(this).attr('class').split(' ')[1]
if (langNameIndex === "plain" || langNameIndex === undefined)
langName = "Code";
$(this).prev().append('<div class="code-lang">' + langName + '</div>')
})
}
/**
* 代碼copy
* copy function
*/
if (isHighlightCopy) {
$highlightTools.append('<div class="copy-notice"></div><i class="fa fa-clipboard" aria-hidden="true"></i>')
var copy = function (text, ctx) {
if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
try {
document.execCommand('copy') // Security exception may be thrown by some browsers.
if (isSnackbar) {
snackbarShow(GLOBAL_CONFIG.copy.success)
} else {
$(ctx).prev('.copy-notice')
.text(GLOBAL_CONFIG.copy.success)
.animate({
opacity: 1,
right: 30
}, 450, function () {
setTimeout(function () {
$(ctx).prev('.copy-notice').animate({
opacity: 0,
right: 0
}, 650)
}, 400)
})
}
} catch (ex) {
if (isSnackbar) {
snackbarShow(GLOBAL_CONFIG.copy.success)
} else {
$(ctx).prev('.copy-notice')
.text(GLOBAL_CONFIG.copy.error)
.animate({
opacity: 1,
right: 30
}, 650, function () {
setTimeout(function () {
$(ctx).prev('.copy-notice').animate({
opacity: 0,
right: 0
}, 650)
}, 400)
})
return false
}
}
$(document).on('click', '.highlight-tools >.code-expand', function () {
var $hideItem = $(this).parent().nextAll()
if ($(this).hasClass('code-closed')) {
$hideItem.css('display', 'block')
$(this).removeClass('code-closed')
} else {
if (isSnackbar) {
snackbarShow(GLOBAL_CONFIG.copy.noSupport)
$hideItem.css('display', 'none')
$(this).addClass('code-closed')
}
})
/**
* 代碼語言
*/
if (isHighlightLang) {
var langNameIndex, langName
$figureHighlight.each(function () {
langNameIndex = langName = $(this).attr('class').split(' ')[1]
if (langNameIndex === 'plain' || langNameIndex === undefined) langName = 'Code'
$(this).find('.highlight-tools').append('<div class="code-lang">' + langName + '</div>')
})
}
/**
* 代碼copy
* copy function
*/
if (isHighlightCopy) {
$highlightTools.append('<div class="copy-notice"></div><i class="fas fa-paste copy-button"></i>')
var copy = function (text, ctx) {
if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
try {
document.execCommand('copy') // Security exception may be thrown by some browsers.
if (isSnackbar) {
snackbarShow(GLOBAL_CONFIG.copy.success)
} else {
$(ctx).prev('.copy-notice')
.text(GLOBAL_CONFIG.copy.success)
.animate({
opacity: 1
}, 450, function () {
setTimeout(function () {
$(ctx).prev('.copy-notice').animate({
opacity: 0
}, 650)
}, 400)
})
}
} catch (ex) {
if (isSnackbar) {
snackbarShow(GLOBAL_CONFIG.copy.success)
} else {
$(ctx).prev('.copy-notice')
.text(GLOBAL_CONFIG.copy.error)
.animate({
opacity: 1
}, 650, function () {
setTimeout(function () {
$(ctx).prev('.copy-notice').animate({
opacity: 0
}, 650)
}, 400)
})
return false
}
}
} else {
$(ctx).prev('.copy-notice').text(GLOBAL_CONFIG.copy.noSupport)
if (isSnackbar) {
snackbarShow(GLOBAL_CONFIG.copy.noSupport)
} else {
$(ctx).prev('.copy-notice').text(GLOBAL_CONFIG.copy.noSupport)
}
}
}
}
// click events
$(document).on('click', '.highlight-tools>.fa-clipboard', function () {
var selection = window.getSelection()
var range = document.createRange()
range.selectNodeContents($(this).parent().next().find('.code pre')[0])
selection.removeAllRanges()
selection.addRange(range)
var text = selection.toString()
copy(text, this)
selection.removeAllRanges()
// click events
$(document).on('click', '.highlight-tools>.copy-button', function () {
var $buttonParent = $(this).parents('figure.highlight')
$buttonParent.addClass('copy-true')
var selection = window.getSelection()
var range = document.createRange()
range.selectNodeContents($buttonParent.find('table .code pre')[0])
selection.removeAllRanges()
selection.addRange(range)
var text = selection.toString()
copy(text, this)
selection.removeAllRanges()
$buttonParent.removeClass('copy-true')
})
}
}
/**
* PhotoFigcaption
*/
function addPhotoFigcaption () {
const images = $('#article-container img').not('.justified-gallery img')
images.each(function (i, o) {
var $this = $(o)
if ($this.attr('alt')) {
var t = $('<div class="img-alt is-center">' + $this.attr('alt') + '</div>')
$this.after(t)
}
})
}
if (GLOBAL_CONFIG.isPhotoFigcaption) addPhotoFigcaption()
/**
* justified-gallery 圖庫排版
*/
var $justifiedGallery = $('.justified-gallery')
var isJustifiedGallery = false
if ($justifiedGallery.length) {
isJustifiedGallery = true
var $imgList = $justifiedGallery.find('img')
$imgList.unwrap()
if ($imgList.length) {
@@ -382,13 +382,21 @@ $(function () {
$(o).wrap('<div></div>')
})
}
$('head').append('<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css">')
loadScript('https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js', function () {
$justifiedGallery.not($('.hide-content .justified-gallery')).justifiedGallery({
rowHeight: 220,
margins: 4
})
$('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.justifiedGallery.css}">`)
loadScript(`${GLOBAL_CONFIG.justifiedGallery.js}`, function () {
initJustifiedGallery($justifiedGallery)
})
var initJustifiedGallery = function (selector) {
selector.each(function (i, o) {
if ($(this).is(':visible')) {
$(this).justifiedGallery({
rowHeight: 220,
margins: 4
})
}
})
}
}
/**
@@ -401,13 +409,7 @@ $(function () {
var images = $('#article-container img:not(.gallery-group-img)').not($('a>img'))
images.each(function (i, o) {
var lazyloadSrc = $(o).attr('data-src') ? $(o).attr('data-src') : $(o).attr('src')
$(o).wrap(
'<a href="' +
lazyloadSrc +
'" data-fancybox="group" data-caption="' +
$(o).attr('alt') +
'" class="fancybox"></a>'
)
$(o).wrap(`<a href="${lazyloadSrc}" data-fancybox="group" data-caption="${$(o).attr('alt')}" class="fancybox"></a>`)
})
$().fancybox({
@@ -420,41 +422,48 @@ $(function () {
} else if (isMediumZoom) {
const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a)>img'))
zoom.on('open', function (event) {
const photoBg = $(document.documentElement).attr('data-theme') === 'dark' ? '#121212' : '#fff'
var photoBg = $(document.documentElement).attr('data-theme') === 'dark' ? '#121212' : '#fff'
zoom.update({
background: photoBg
})
})
}
// 點擊toc，收起sidebar
// $('.toc-link').on('click', function () {
// closeMobileSidebar('toc')
// })
/**
* 滾動處理
*/
var initTop = 0
$(window).scroll(function (event) {
var isChatShow = true
var isChatBtnHide = typeof chatBtnHide === 'function'
var isChatBtnShow = typeof chatBtnShow === 'function'
$(window).scroll(throttle(function (event) {
var currentTop = $(this).scrollTop()
var isUp = scrollDirection(currentTop)
var isDown = scrollDirection(currentTop)
if (currentTop > 56) {
if (isUp) {
if ($pageHead.hasClass('visible')) $pageHead.removeClass('visible')
if (isDown) {
if ($nav.hasClass('visible')) $nav.removeClass('visible')
if (isChatBtnShow && isChatShow === true) {
chatBtnHide()
isChatShow = false
}
} else {
if (!$pageHead.hasClass('visible')) $pageHead.addClass('visible')
if (!$nav.hasClass('visible')) $nav.addClass('visible')
if (isChatBtnHide && isChatShow === false) {
window.chatBtnShow()
isChatShow = true
}
}
$pageHead.addClass('fixed')
$nav.addClass('fixed')
if ($rightside.css('opacity') === '0') {
$rightside.css({ opacity: '1', transform: 'translateX(-38px)' })
}
} else {
if (currentTop === 0) {
$pageHead.removeClass('fixed').removeClass('visible')
$nav.removeClass('fixed').removeClass('visible')
}
$rightside.css({ opacity: '', transform: '' })
}
})
}, 200))
// find the scroll direction
function scrollDirection (currentTop) {
@@ -467,14 +476,14 @@ $(function () {
* 點擊滾回頂部
*/
$('#go-up').on('click', function () {
scrollTo('body')
scrollToDest('body')
})
/**
* toc
*/
if (GLOBAL_CONFIG_SITE.isPost && isTocContent) {
if (GLOBAL_CONFIG_SITE.isPost && GLOBAL_CONFIG_SITE.isSidebar) {
$('.toc-child').hide()
// main of scroll
@@ -491,7 +500,7 @@ $(function () {
closeMobileSidebar('toc')
} else {
e.preventDefault()
scrollTo($(this).attr('href'))
scrollToDest($(this).attr('href'))
}
})
@@ -518,6 +527,8 @@ $(function () {
}, 100)
}
// anchor
var isanchor = GLOBAL_CONFIG.isanchor
var updateAnchor = function (anchor) {
if (window.history.replaceState && anchor !== window.location.hash) {
window.history.replaceState(undefined, undefined, anchor)
@@ -551,7 +562,7 @@ $(function () {
var currentActive = $('.toc-link.active')
if (currentId && currentActive.attr('href') !== currentId) {
updateAnchor(currentId)
if (isanchor) updateAnchor(currentId)
$('.toc-link').removeClass('active')
@@ -620,7 +631,7 @@ $(function () {
})
$(window).on('touchmove', function (e) {
var $menusChild = $('#page-header .menus_item_child')
var $menusChild = $('#nav .menus_item_child')
if ($menusChild.is(':visible')) {
$menusChild.css('display', 'none')
}
@@ -648,7 +659,7 @@ $(function () {
if (copyFont.length > 45) {
textFont = copyFont + '\n' + '\n' + '\n' +
copyright.languages.author + '\n' +
copyright.languages.link + '\n' +
copyright.languages.link + window.location.href + '\n' +
copyright.languages.source + '\n' +
copyright.languages.info
} else {
@@ -666,43 +677,23 @@ $(function () {
/**
* Darkmode
*/
var isFontAwesomeV5 = GLOBAL_CONFIG.isFontAwesomeV5
var $darkModeButtom = $('#darkmode')
if (typeof autoChangeMode !== 'undefined') {
if (Cookies.get('theme') === 'dark') changeLightIcon()
else changeDarkIcon()
}
function changeLightIcon () {
isFontAwesomeV5 ? $darkModeButtom.removeClass('fa-moon').addClass('fa-sun') : $darkModeButtom.removeClass('fa-moon-o').addClass('fa-sun-o')
}
function changeDarkIcon () {
isFontAwesomeV5 ? $darkModeButtom.removeClass('fa-sun').addClass('fa-moon') : $darkModeButtom.removeClass('fa-sun-o').addClass('fa-moon-o')
}
function switchReadMode () {
var nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
if (nowMode === 'light') {
changeLightIcon()
activateDarkMode()
Cookies.set('theme', 'dark', { expires: 2 })
Cookies.set('theme', 'dark', 2)
if (isSnackbar) snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
} else {
changeDarkIcon()
activateLightMode()
Cookies.set('theme', 'light', { expires: 2 })
Cookies.set('theme', 'light', 2)
if (isSnackbar) snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
}
}
$darkModeButtom.click(function () {
switchReadMode()
try {
utterancesTheme()
} catch (e) {
return false
}
if (typeof utterancesTheme === 'function') utterancesTheme()
})
/**
@@ -711,7 +702,7 @@ $(function () {
if (GLOBAL_CONFIG.runtime) {
// get user config
var $runtimeCount = $('#webinfo-runtime-count')
var startDate = $runtimeCount.attr('start_date')
var startDate = $runtimeCount.attr('publish_date')
var showDateTime = function () {
var BirthDay = new Date(startDate)
var today = new Date()
@@ -725,6 +716,18 @@ $(function () {
interval = setInterval(showDateTime, 10000)
}
/**
* table overflow
*/
var $table = $('#article-container table').not($('figure.highlight > table'))
$table.each(function () {
$(this).wrap('<div class="table-wrap"></div>')
})
/**
* 百度推送
*/
if (GLOBAL_CONFIG.baiduPush) {
(function () {
var bp = document.createElement('script')
@@ -743,14 +746,46 @@ $(function () {
* tag-hide
*/
var $hideInline = $('.hide-button')
$hideInline.on('click', function (e) {
e.preventDefault()
$(this).hide()
var $hideContent = $(this).next('.hide-content')
$hideContent.show()
$hideContent.find('.justified-gallery').justifiedGallery({
rowHeight: 220,
margins: 4
if ($hideInline.length) {
$hideInline.on('click', function (e) {
var $this = $(this)
var $hideContent = $(this).next('.hide-content')
$this.toggleClass('open')
$hideContent.toggle()
if ($this.hasClass('open')) {
if (isJustifiedGallery && $hideContent.find('.justified-gallery').length > 0) {
initJustifiedGallery($hideContent.find('.justified-gallery'))
}
}
})
}
const $tab = $('#article-container .tabs')
$tab.find('.tab button').on('click', function (e) {
const $this = $(this)
const $tabItem = $this.parent()
if (!$tabItem.hasClass('active')) {
const $tacbContent = $this.parents('.nav-tabs').next()
$tabItem.siblings('.active').removeClass('active')
$tabItem.addClass('active')
const tabId = $this.attr('data-href')
$tacbContent.find('> .tab-item-content').removeClass('active')
$tacbContent.find(`> ${tabId}`).addClass('active')
const $isTabJustifiedGallery = $tacbContent.find(tabId).find('.justified-gallery')
if (isJustifiedGallery && $isTabJustifiedGallery.length > 0) {
initJustifiedGallery($isTabJustifiedGallery)
}
}
})
var $cardCategory = $('.card-category-list-item.parent a')
$cardCategory.on('click', function (e) {
if ($(event.target).hasClass('card-category-list-icon')) {
var $this = $(this)
$this.find('.card-category-list-icon').toggleClass('expand')
$this.parent().next().toggle()
return false
}
})
})
source/js/search/algolia.js
+5 -5
View File
@@ -100,7 +100,7 @@ $(function () {
return (
'<hr>' +
stats +
'<span class="algolia-logo pull_right">' +
'<span class="algolia-logo pull-right">' +
' <img src="' + GLOBAL_CONFIG.root + 'img/algolia.svg" alt="Algolia" />' +
'</span>'
)
@@ -115,10 +115,10 @@ $(function () {
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>'
first: '<i class="fas fa-angle-double-left"></i>',
last: '<i class="fas fa-angle-double-right"></i>',
previous: '<i class="fas fa-angle-left"></i>',
next: '<i class="fas fa-angle-right"></i>'
},
cssClasses: {
root: 'pagination',
source/js/search/local-search.js
+53 -5
View File
@@ -1,7 +1,10 @@
$(function () {
var loadFlag = false
$('a.social-icon.search').on('click', function () {
$('body').css({ width: '100%', overflow: 'hidden' })
$('body').css({
width: '100%',
overflow: 'hidden'
})
$('.search-dialog').css('display', 'block')
$('#local-search-input input').focus()
$('.search-mask').fadeIn()
@@ -52,6 +55,7 @@ $(function () {
url: $('url', this).text()
}
}).get()
var $input = $('#local-search-input input')[0]
var $resultContent = $('#local-hits')[0]
$input.addEventListener('input', function () {
@@ -66,13 +70,17 @@ $(function () {
// perform local searching
datas.forEach(function (data) {
var isMatch = true
if (!data.title || data.title.trim() === '') {
data.title = 'Untitled'
}
var dataTitle = data.title.trim().toLowerCase()
var dataContent = data.content.trim().replace(/<[^>]+>/g, '').toLowerCase()
var dataUrl = data.url
var indexTitle = -1
var indexContent = -1
var firstOccur = -1
// only match artiles with not empty titles and contents
if (dataTitle !== '' && dataContent !== '') {
if (dataTitle !== '' || dataContent !== '') {
keywords.forEach(function (keyword, i) {
indexTitle = dataTitle.indexOf(keyword)
indexContent = dataContent.indexOf(keyword)
@@ -82,20 +90,60 @@ $(function () {
if (indexContent < 0) {
indexContent = 0
}
if (i === 0) {
firstOccur = indexContent
}
}
})
} else {
isMatch = false
}
// 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()
var content = data.content.trim().replace(/<[^>]+>/g, '')
if (firstOccur >= 0) {
// cut out 130 characters
var start = firstOccur - 30
var end = firstOccur + 100
if (start < 0) {
start = 0
}
if (start === 0) {
end = 100
}
if (end > content.length) {
end = content.length
}
var matchContent = content.substring(start, end)
// highlight all keywords
keywords.forEach(function (keyword) {
var regS = new RegExp(keyword, 'gi')
matchContent = matchContent.replace(regS, '<span class="search-keyword">' + keyword + '</span>')
dataTitle = dataTitle.replace(regS, '<span class="search-keyword">' + keyword + '</span>')
})
str += '<div class="local-search__hit-item"><a href="' + dataUrl + '" class="search-result-title">' + dataTitle + '</a>'
count += 1
$('.local-search-stats__hr').show()
if (dataContent !== '') {
str += '<p class="search-result">' + matchContent + '...</p>'
}
}
str += '</div>'
}
})
if (count === 0) {
str += '<div id="local-search__hits-empty">' + GLOBAL_CONFIG.localSearch.languages.hits_empty.replace(/\$\{query}/, this.value.trim()) +
'</div>'
}
str += '</div>'
$resultContent.innerHTML = str
})
}
source/js/third-party/canvas-ribbon.js
Vendored
+67 -51
View File
@@ -5,31 +5,32 @@
* 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))) {
!(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
}
var 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) {
function attr(node, attr, default_value) {
if (default_value === true) {
return node.getAttribute(attr) || default_value
return node.getAttribute(attr) || default_value;
}
return Number(node.getAttribute(attr)) || default_value
return Number(node.getAttribute(attr)) || default_value;
}
var canvas = document.createElement('canvas'),
g2d = canvas.getContext('2d'),
var canvas = document.createElement("canvas"),
g2d = canvas.getContext("2d"),
pr = window.devicePixelRatio || 1,
width = window.innerWidth,
height = window.innerHeight,
@@ -40,52 +41,67 @@
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
random = m.random;
canvas.id = "ribbon-canvas";
canvas.width = width * pr;
canvas.height = height * pr;
g2d.scale(pr, pr);
g2d.globalAlpha = config.a;
canvas.style.cssText =
'opacity: ' +
"opacity: " +
config.a +
';position:fixed;top:0;left:0;z-index: ' +
";position:fixed;top:0;left:0;z-index: " +
config.z +
';width:100%;height:100%;pointer-events:none;'
";width:100%;height:100%;pointer-events:none;";
// create canvas
document.getElementsByTagName('body')[0].appendChild(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 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)
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
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 }
).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
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
if (config.c !== "false") {
document.onclick = redraw;
document.ontouchstart = redraw;
}
redraw()
})()
redraw();
})();
source/js/tw_cn.js
+67 -92
View File
File diff suppressed because one or more lines are too long
source/js/utils.js
+32 -13
View File
@@ -48,10 +48,10 @@ function throttle (func, wait, options) {
return throttled
}
function sidebarPaddingR() {
let innerWidth = window.innerWidth
let clientWidth = document.body.clientWidth
let paddingRight = innerWidth - clientWidth
function sidebarPaddingR () {
var innerWidth = window.innerWidth
var clientWidth = document.body.clientWidth
var paddingRight = innerWidth - clientWidth
if (innerWidth !== clientWidth) {
$('body').css('padding-right', paddingRight)
}
@@ -59,7 +59,7 @@ function sidebarPaddingR() {
// iPadOS
function isIpad () {
return navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1
return navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1
}
function isTMobile () {
@@ -76,10 +76,10 @@ function isDesktop () {
return !this.isMobile()
}
function scrollTo (name) {
function scrollToDest (name, offset = 0) {
var scrollOffset = $(name).offset()
$('body,html').animate({
scrollTop: scrollOffset.top
scrollTop: scrollOffset.top - offset
})
};
@@ -117,10 +117,29 @@ function snackbarShow (text, showAction, duration) {
})
}
window.debounce = debounce
const Cookies = {
get: function (name) {
const value = `; ${document.cookie}`
const parts = value.split(`; ${name}=`)
if (parts.length === 2) return parts.pop().split(';').shift()
},
set: function (name, value, days) {
var expires = ''
if (days) {
var date = new Date()
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000))
expires = '; expires=' + date.toUTCString()
}
document.cookie = name + '=' + (value || '') + expires + '; path=/'
}
}
window.throttle = throttle
window.isMobile = isMobile
window.loadScript = loadScript
/**
* lazyload
*/
if (GLOBAL_CONFIG.islazyload) {
window.lazyLoadOptions = {
elements_selector: 'img',
threshold: 0
}
}