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

update

Browse Source
This commit is contained in:
Jerry
2025-02-16 20:38:17 +08:00
Unverified
parent 1f3ea55890
commit f605e6dc89
210 changed files with 16126 additions and 16118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
source/css/_global/function.styl
+280 -280
View File
@@ -1,280 +1,280 @@
.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-family: 'Font Awesome 6 Free'
text-rendering: auto
-webkit-font-smoothing: antialiased
addBorderRadius(x = 6, hide = false)
if hexo-config('rounded_corners_ui')
border-radius: unit(x, 'px')
if hide
overflow: hidden
// card hover
.cardHover
background: var(--card-bg)
box-shadow: var(--card-box-shadow)
transition: all .3s
addBorderRadius(8)
&:hover
box-shadow: var(--card-hover-box-shadow)
.imgHover
width: 100%
height: 100%
transition: filter 375ms ease-in .2s, transform .6s
object-fit: cover
&:hover
transform: scale(1.1)
.postImgHover
&:hover
.cover
opacity: .5
transform: scale(1.1)
.cover
width: 100%
height: 100%
opacity: .4
transition: all .6s, filter 375ms ease-in .2s
object-fit: cover
.list-beauty
list-style: none
li
position: relative
padding: .12em .4em .12em 1.4em
&:hover
&:before
border-color: var(--pseudo-hover)
&:before
position: absolute
top: .67em
left: 0
width: w = .43em
height: h = w
border: .5 * w solid $light-blue
border-radius: w
background: transparent
content: ''
cursor: pointer
transition: all .3s ease-out
.custom-hr
position: relative
margin: 40px auto
border: 2px dashed var(--hr-border)
if hexo-config('hr_icon.enable')
width: calc(100% - 4px)
&:hover
&:before
left: calc(95% - 20px)
&:before
position: absolute
top: $hr-icon-top
left: 5%
z-index: 1
color: var(--hr-before-color)
content: $hr-icon
font-size: 20px
line-height: 1
transition: all 1s ease-in-out
@extend .fontawesomeIcon
.verticalCenter
position: absolute
top: 50%
width: 100%
transform: translate(0, -50%)
maxWidth600()
@media screen and (max-width: 600px)
{block}
maxWidth768()
@media screen and (max-width: 768px)
{block}
minWidth768()
@media screen and (min-width: 768px)
{block}
maxWidth1024()
@media screen and (max-width: 1024px)
{block}
minWidth1024()
@media screen and (min-width: 1024px)
{block}
maxWidth900()
@media screen and (max-width: 900px)
{block}
minWidth901()
@media screen and (min-width: 901px)
{block}
minWidth900()
@media screen and (min-width: 900px)
{block}
minWidth2000()
@media screen and (min-width: 2000px)
{block}
// animation
if hexo-config('enter_transitions')
#content-inner,
#footer
animation: bottom-top 1s
#page-header:not(.full_page),
#nav.show
animation: header-effect 1s
#site-title,
#site-subtitle
animation: titleScale 1s
canvas:not(#ribbon-canvas),
#web_bg
animation: to_show 4s
#ribbon-canvas
animation: ribbon_to_show 4s
#sidebar-menus
&.open
for i in 1 2 3 4
> :nth-child({i})
animation: sidebarItem (i / 5s)
.scroll-down-effects
animation: scroll-down-effect 1.5s infinite
if hexo-config('avatar.effect') == true
.avatar-img
animation: avatar_turn_around 2s linear infinite
.reward-main
animation: donate_effcet .3s .1s ease both
@keyframes scroll-down-effect
0%
opacity: .4
transform: translate(0, 0)
50%
opacity: 1
transform: translate(0, -16px)
100%
opacity: .4
transform: translate(0, 0)
@keyframes header-effect
0%
transform: translateY(-35px)
100%
transform: translateY(0)
@keyframes bottom-top
0%
transform: translateY(35px)
100%
transform: translateY(0)
@keyframes titleScale
0%
opacity: 0
transform: scale(.7)
100%
opacity: 1
transform: scale(1)
@keyframes search_close
0%
opacity: 1
transform: scale(1)
100%
opacity: 0
transform: scale(.7)
@keyframes to_show
0%
opacity: 0
100%
opacity: 1
@keyframes to_hide
0%
opacity: 1
100%
opacity: 0
@keyframes ribbon_to_show
0%
opacity: 0
100%
opacity: hexo-config('canvas_ribbon.alpha')
@keyframes avatar_turn_around
from
transform: rotate(0)
to
transform: rotate(360deg)
@keyframes sub_menus
0%
opacity: 0
transform: translateY(10px)
100%
opacity: 1
transform: translateY(0)
@keyframes donate_effcet
0%
opacity: 0
transform: translateY(-20px)
100%
opacity: 1
transform: translateY(0)
@keyframes sidebarItem
0%
transform: translateX(200px)
100%
transform: translateX(0)
.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-family: 'Font Awesome 6 Free'
text-rendering: auto
-webkit-font-smoothing: antialiased
addBorderRadius(x = 6, hide = false)
if hexo-config('rounded_corners_ui')
border-radius: unit(x, 'px')
if hide
overflow: hidden
// card hover
.cardHover
background: var(--card-bg)
box-shadow: var(--card-box-shadow)
transition: all .3s
addBorderRadius(8)
&:hover
box-shadow: var(--card-hover-box-shadow)
.imgHover
width: 100%
height: 100%
transition: filter 375ms ease-in .2s, transform .6s
object-fit: cover
&:hover
transform: scale(1.1)
.postImgHover
&:hover
.cover
opacity: .5
transform: scale(1.1)
.cover
width: 100%
height: 100%
opacity: .4
transition: all .6s, filter 375ms ease-in .2s
object-fit: cover
.list-beauty
list-style: none
li
position: relative
padding: .12em .4em .12em 1.4em
&:hover
&:before
border-color: var(--pseudo-hover)
&:before
position: absolute
top: .67em
left: 0
width: w = .43em
height: h = w
border: .5 * w solid $light-blue
border-radius: w
background: transparent
content: ''
cursor: pointer
transition: all .3s ease-out
.custom-hr
position: relative
margin: 40px auto
border: 2px dashed var(--hr-border)
if hexo-config('hr_icon.enable')
width: calc(100% - 4px)
&:hover
&:before
left: calc(95% - 20px)
&:before
position: absolute
top: $hr-icon-top
left: 5%
z-index: 1
color: var(--hr-before-color)
content: $hr-icon
font-size: 20px
line-height: 1
transition: all 1s ease-in-out
@extend .fontawesomeIcon
.verticalCenter
position: absolute
top: 50%
width: 100%
transform: translate(0, -50%)
maxWidth600()
@media screen and (max-width: 600px)
{block}
maxWidth768()
@media screen and (max-width: 768px)
{block}
minWidth768()
@media screen and (min-width: 768px)
{block}
maxWidth1024()
@media screen and (max-width: 1024px)
{block}
minWidth1024()
@media screen and (min-width: 1024px)
{block}
maxWidth900()
@media screen and (max-width: 900px)
{block}
minWidth901()
@media screen and (min-width: 901px)
{block}
minWidth900()
@media screen and (min-width: 900px)
{block}
minWidth2000()
@media screen and (min-width: 2000px)
{block}
// animation
if hexo-config('enter_transitions')
#content-inner,
#footer
animation: bottom-top 1s
#page-header:not(.full_page),
#nav.show
animation: header-effect 1s
#site-title,
#site-subtitle
animation: titleScale 1s
canvas:not(#ribbon-canvas),
#web_bg
animation: to_show 4s
#ribbon-canvas
animation: ribbon_to_show 4s
#sidebar-menus
&.open
for i in 1 2 3 4
> :nth-child({i})
animation: sidebarItem (i / 5s)
.scroll-down-effects
animation: scroll-down-effect 1.5s infinite
if hexo-config('avatar.effect') == true
.avatar-img
animation: avatar_turn_around 2s linear infinite
.reward-main
animation: donate_effcet .3s .1s ease both
@keyframes scroll-down-effect
0%
opacity: .4
transform: translate(0, 0)
50%
opacity: 1
transform: translate(0, -16px)
100%
opacity: .4
transform: translate(0, 0)
@keyframes header-effect
0%
transform: translateY(-35px)
100%
transform: translateY(0)
@keyframes bottom-top
0%
transform: translateY(35px)
100%
transform: translateY(0)
@keyframes titleScale
0%
opacity: 0
transform: scale(.7)
100%
opacity: 1
transform: scale(1)
@keyframes search_close
0%
opacity: 1
transform: scale(1)
100%
opacity: 0
transform: scale(.7)
@keyframes to_show
0%
opacity: 0
100%
opacity: 1
@keyframes to_hide
0%
opacity: 1
100%
opacity: 0
@keyframes ribbon_to_show
0%
opacity: 0
100%
opacity: hexo-config('canvas_ribbon.alpha')
@keyframes avatar_turn_around
from
transform: rotate(0)
to
transform: rotate(360deg)
@keyframes sub_menus
0%
opacity: 0
transform: translateY(10px)
100%
opacity: 1
transform: translateY(0)
@keyframes donate_effcet
0%
opacity: 0
transform: translateY(-20px)
100%
opacity: 1
transform: translateY(0)
@keyframes sidebarItem
0%
transform: translateX(200px)
100%
transform: translateX(0)
source/css/_global/index.styl
+224 -224
View File
@@ -1,224 +1,224 @@
:root
--global-font-size: $font-size
--global-bg: $body-bg
--font-color: $font-black
--hr-border: lighten($theme-hr-color, 50%)
--hr-before-color: lighten($theme-hr-color, 30%)
--search-bg: $search-bg
--search-input-color: $search-input-color
--search-a-color: $search-a-color
--preloader-bg: $preloader-bg
--preloader-color: $preloader-word-color
--tab-border-color: $tab-border-color
--tab-botton-bg: $tab-botton-bg
--tab-botton-color: $tab-botton-color
--tab-button-hover-bg: $tab-button-hover-bg
--tab-button-active-bg: $tab-button-active-bg
--card-bg: $card-bg
--card-meta: $theme-meta-color
--sidebar-bg: $sidebar-background
--sidebar-menu-bg: $white
--btn-hover-color: $button-hover-color
--btn-color: $button-color
--btn-bg: $button-bg
--text-bg-hover: rgba($text-bg-hover, .7)
--light-grey: $light-grey
--dark-grey: $dark-grey
--white: $white
--text-highlight-color: $text-highlight-color
--blockquote-color: $blockquote-color
--blockquote-bg: $blockquote-background-color
--reward-pop: $reward-pop-up-bg
--toc-link-color: $toc-link-color
--card-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .05)
--card-hover-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .09)
--pseudo-hover: $pseudo-hover
--headline-presudo: #a0a0a0
--scrollbar-color: $scrollbar-color
--default-bg-color: $theme-color
--zoom-bg: #fff
--mark-bg: alpha($dark-black, .3)
body
position: relative
overflow-y: scroll
min-height: 100%
background: var(--global-bg)
color: var(--font-color)
font-size: var(--global-font-size)
font-family: $font-family
line-height: $text-line-height
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
scroll-behavior: smooth
if !hexo-config('copy.enable')
user-select: none
-webkit-user-select: none
// scrollbar - firefox
@-moz-document url-prefix()
*
scrollbar-width: thin
scrollbar-color: var(--scrollbar-color) transparent
// scrollbar - chrome/safari
*::-webkit-scrollbar
width: 5px
height: 5px
*::-webkit-scrollbar-thumb
background: var(--scrollbar-color)
*::-webkit-scrollbar-track
background-color: transparent
input::placeholder
color: var(--font-color)
if hexo-config('background')
#web_bg
position: fixed
z-index: -999
width: 100%
height: 100%
background-attachment: local
background-position: center
background-size: cover
background-repeat: no-repeat
h1,
h2,
h3,
h4,
h5,
h6
position: relative
margin: 20px 0 14px
color: var(--text-highlight-color)
font-weight: bold
code
font-size: inherit !important
*
box-sizing: border-box
.table-wrap
overflow-x: scroll
margin: 0 0 20px
if hexo-config('rounded_corners_ui')
$borderRadius = 5px
border-radius: $borderRadius
table
border-radius: $borderRadius
thead > tr:first-child
th:first-child
border-top-left-radius: $borderRadius
th:last-child
border-top-right-radius: $borderRadius
tbody > tr:last-child
td:first-child
border-bottom-left-radius: $borderRadius
td:last-child
border-bottom-right-radius: $borderRadius
table
display: table
width: 100%
border-spacing: 0
border-collapse: separate
border-top: 1px solid var(--light-grey)
border-left: 1px solid var(--light-grey)
empty-cells: show
thead
background: alpha($table-thead-bg, 10%)
th,
td
padding: 6px 12px
border: 1px solid var(--light-grey)
border-top: none
border-left: none
vertical-align: middle
*::selection
background: $theme-text-selection-color
color: #F7F7F7
button
padding: 0
outline: 0
border: none
background: none
cursor: pointer
touch-action: manipulation
a
color: $a-link-color
text-decoration: none
word-wrap: break-word
transition: all .2s
overflow-wrap: break-word
&:hover
color: $light-blue
// font
if $site-name-font
#site-title,
#site-subtitle,
.site-name,
#aside-content .author-info-name,
#aside-content .author-info-description
font-family: $site-name-font
.text-center
text-align: center
.text-right
text-align: right
img
&[src=''],
&:not([src])
opacity: 0
// lazyload blur
if hexo-config('lazyload.enable') && hexo-config('lazyload.blur') && !hexo-config('lazyload.placeholder')
img
&[data-lazy-src]:not(.loaded)
filter: blur(8px) brightness(1)
&[data-lazy-src].error
filter: none
.img-alt
margin: -10px 0 10px
color: #858585
&:hover
text-decoration: none !important
blockquote
margin: 0 0 20px
padding: 7px 15px
border-left: 4px solid $blockquote-padding-color
background-color: var(--blockquote-bg)
color: var(--blockquote-color)
addBorderRadius()
footer
cite
&:before
padding: 0 5px
content: '—'
& > :last-child
margin-bottom: 0 !important
:root
--global-font-size: $font-size
--global-bg: $body-bg
--font-color: $font-black
--hr-border: lighten($theme-hr-color, 50%)
--hr-before-color: lighten($theme-hr-color, 30%)
--search-bg: $search-bg
--search-input-color: $search-input-color
--search-a-color: $search-a-color
--preloader-bg: $preloader-bg
--preloader-color: $preloader-word-color
--tab-border-color: $tab-border-color
--tab-botton-bg: $tab-botton-bg
--tab-botton-color: $tab-botton-color
--tab-button-hover-bg: $tab-button-hover-bg
--tab-button-active-bg: $tab-button-active-bg
--card-bg: $card-bg
--card-meta: $theme-meta-color
--sidebar-bg: $sidebar-background
--sidebar-menu-bg: $white
--btn-hover-color: $button-hover-color
--btn-color: $button-color
--btn-bg: $button-bg
--text-bg-hover: rgba($text-bg-hover, .7)
--light-grey: $light-grey
--dark-grey: $dark-grey
--white: $white
--text-highlight-color: $text-highlight-color
--blockquote-color: $blockquote-color
--blockquote-bg: $blockquote-background-color
--reward-pop: $reward-pop-up-bg
--toc-link-color: $toc-link-color
--card-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .05)
--card-hover-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .09)
--pseudo-hover: $pseudo-hover
--headline-presudo: #a0a0a0
--scrollbar-color: $scrollbar-color
--default-bg-color: $theme-color
--zoom-bg: #fff
--mark-bg: alpha($dark-black, .3)
body
position: relative
overflow-y: scroll
min-height: 100%
background: var(--global-bg)
color: var(--font-color)
font-size: var(--global-font-size)
font-family: $font-family
line-height: $text-line-height
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
scroll-behavior: smooth
if !hexo-config('copy.enable')
user-select: none
-webkit-user-select: none
// scrollbar - firefox
@-moz-document url-prefix()
*
scrollbar-width: thin
scrollbar-color: var(--scrollbar-color) transparent
// scrollbar - chrome/safari
*::-webkit-scrollbar
width: 5px
height: 5px
*::-webkit-scrollbar-thumb
background: var(--scrollbar-color)
*::-webkit-scrollbar-track
background-color: transparent
input::placeholder
color: var(--font-color)
if hexo-config('background')
#web_bg
position: fixed
z-index: -999
width: 100%
height: 100%
background-attachment: local
background-position: center
background-size: cover
background-repeat: no-repeat
h1,
h2,
h3,
h4,
h5,
h6
position: relative
margin: 20px 0 14px
color: var(--text-highlight-color)
font-weight: bold
code
font-size: inherit !important
*
box-sizing: border-box
.table-wrap
overflow-x: scroll
margin: 0 0 20px
if hexo-config('rounded_corners_ui')
$borderRadius = 5px
border-radius: $borderRadius
table
border-radius: $borderRadius
thead > tr:first-child
th:first-child
border-top-left-radius: $borderRadius
th:last-child
border-top-right-radius: $borderRadius
tbody > tr:last-child
td:first-child
border-bottom-left-radius: $borderRadius
td:last-child
border-bottom-right-radius: $borderRadius
table
display: table
width: 100%
border-spacing: 0
border-collapse: separate
border-top: 1px solid var(--light-grey)
border-left: 1px solid var(--light-grey)
empty-cells: show
thead
background: alpha($table-thead-bg, 10%)
th,
td
padding: 6px 12px
border: 1px solid var(--light-grey)
border-top: none
border-left: none
vertical-align: middle
*::selection
background: $theme-text-selection-color
color: #F7F7F7
button
padding: 0
outline: 0
border: none
background: none
cursor: pointer
touch-action: manipulation
a
color: $a-link-color
text-decoration: none
word-wrap: break-word
transition: all .2s
overflow-wrap: break-word
&:hover
color: $light-blue
// font
if $site-name-font
#site-title,
#site-subtitle,
.site-name,
#aside-content .author-info-name,
#aside-content .author-info-description
font-family: $site-name-font
.text-center
text-align: center
.text-right
text-align: right
img
&[src=''],
&:not([src])
opacity: 0
// lazyload blur
if hexo-config('lazyload.enable') && hexo-config('lazyload.blur') && !hexo-config('lazyload.placeholder')
img
&[data-lazy-src]:not(.loaded)
filter: blur(8px) brightness(1)
&[data-lazy-src].error
filter: none
.img-alt
margin: -10px 0 10px
color: #858585
&:hover
text-decoration: none !important
blockquote
margin: 0 0 20px
padding: 7px 15px
border-left: 4px solid $blockquote-padding-color
background-color: var(--blockquote-bg)
color: var(--blockquote-color)
addBorderRadius()
footer
cite
&:before
padding: 0 5px
content: '—'
& > :last-child
margin-bottom: 0 !important
source/css/_highlight/highlight.styl
+280 -280
View File
@@ -1,281 +1,281 @@
$highlight_theme = hexo-config('code_blocks.theme')
$highlight_macstyle = hexo-config('code_blocks.macStyle')
wordWrap = $highlight_enable && !$highlight_line_number && hexo-config('code_blocks.word_wrap')
@require 'theme'
:root
--hl-color: $highlight-foreground
--hl-bg: $highlight-background
--hltools-bg: $highlight-tools.bg-color
--hltools-color: $highlight-tools.color
--hlnumber-bg: $highlight-gutter.bg-color
--hlnumber-color: $highlight-gutter.color
--hlscrollbar-bg: $highlight-scrollbar
--hlexpand-bg: linear-gradient(180deg, rgba($highlight-background, .6), rgba($highlight-background, .9))
[data-theme='dark']
--hl-color: alpha(#FFFFFF, .7)
--hl-bg: lighten(#121212, 2)
--hltools-bg: lighten(#121212, 3)
--hltools-color: #90a4ae
--hlnumber-bg: lighten(#121212, 2)
--hlnumber-color: alpha(#FFFFFF, .4)
--hlscrollbar-bg: lighten(#121212, 5)
--hlexpand-bg: linear-gradient(180deg, rgba(lighten(#121212, 2), .6), rgba(lighten(#121212, 2), .9))
if $highlight_enable
@require 'highlight/index'
if $prismjs_enable
@require 'prismjs/index'
$code-block
overflow: auto
margin: 0 0 20px
padding: 0
background: var(--hl-bg)
color: var(--hl-color)
line-height: $line-height-code-block
if wordWrap
counter-reset: line
white-space: pre-wrap
.container
pre,
code
font-size: $code-font-size
font-family: $code-font-family !important
addBorderRadius()
code
padding: 2px 5px
background: $code-background
color: $code-foreground
pre
@extend $code-block
padding: 10px 20px
code
padding: 0
background: none
color: var(--hl-color)
text-shadow: none
figure.highlight
@extend $code-block
position: relative
addBorderRadius()
pre
margin: 0
padding: 8px 0
border: none
figcaption,
.caption
padding: 6px 0 2px 14px
font-size: $code-font-size
line-height: 1em
a
float: right
padding-right: 10px
color: var(--hl-color)
&:hover
border-bottom-color: var(--hl-color)
&.copy-true
user-select: all
-webkit-user-select: all
& > table,
& > pre
display: block !important
opacity: 0
.highlight-tools
display: flex
align-items: center
padding: 0 8px
min-height: 24px
height: 2.15em
background: var(--hltools-bg)
color: var(--hltools-color)
font-size: $code-font-size
overflow: hidden
& > *
padding: 5px
i
cursor: pointer
transition: all .3s
&:hover
color: $theme-color
&.closed
& ~ *
display: none
.expand
transform: rotate(-90deg)
if !$highlight_macstyle
& > .macStyle
padding: 0
.code-lang
flex: 1
text-transform: uppercase
font-weight: bold
font-size: 1.15em
user-select: none
-webkit-user-select: none
padding 2px
.copy-notice
padding-right: 2px
opacity: 0
transition: opacity .4s
if hexo-config('code_blocks.language')
.code-lang
flex: 1
else if (!$highlight_macstyle && hexo-config('code_blocks.shrink') != 'none')
& > div:nth-child(2)
flex: 1
else
.macStyle
flex: 1
.gutter
user-select: none
-webkit-user-select: none
.gist table
width: auto
td
border: none
if $highlight_macstyle
.container
figure.highlight
margin: 0 0 24px
border-radius: 7px
box-shadow: 0 5px 10px 0 $highlight-mac-border
-webkit-transform: translateZ(0)
.highlight-tools
.macStyle
display: flex
& > *
margin-right: 8px
width: 12px
height: 12px
border-radius: 50%
& > :last-child
margin-right: 5px
.mac-close
background: #fc625d
.mac-minimize
background: #fdbc40
.mac-maximize
background: #35cd4b
if hexo-config('code_blocks.shrink') != 'none'
& > :nth-child(2)
order: 8
&.closed
.expand
transform: rotate(90deg)
if hexo-config('code_blocks.height_limit')
.container
.code-expand-btn
position: absolute
bottom: 0
z-index: 10
width: 100%
background: var(--hlexpand-bg)
text-align: center
font-size: $code-font-size
cursor: pointer
i
padding: 6px 0
color: var(--hlnumber-color)
animation: code-expand-key 1.2s infinite
&.expand-done
& > i
transform: rotate(180deg)
& + table,
& + pre
margin-bottom: 1.8em
&:not(.expand-done)
& ~ table,
& ~ pre
overflow: hidden
height: unit(hexo-config('code_blocks.height_limit'), px)
@keyframes code-expand-key
0%
opacity: .6
50%
opacity: .1
100%
opacity: .6
if hexo-config('code_blocks.fullpage')
.container
figure.highlight.code-fullpage
position: fixed
top: 0
right: 0
bottom: 0
left: 0
z-index: 9999
margin: 0
border-radius: 0
animation: code-fullpage .3s
.code-expand-btn,
.expand
display: none
.highlight-tools
& ~ pre,
& ~ table
display: block
overflow: auto
height: calc(100vh - 2.15em)
margin-bottom: 0
@keyframes code-fullpage
0%,
100%
transform: translateX(0)
20%,
60%
transform: translateX(-5px)
40%,
80%
$highlight_theme = hexo-config('code_blocks.theme')
$highlight_macstyle = hexo-config('code_blocks.macStyle')
wordWrap = $highlight_enable && !$highlight_line_number && hexo-config('code_blocks.word_wrap')
@require 'theme'
:root
--hl-color: $highlight-foreground
--hl-bg: $highlight-background
--hltools-bg: $highlight-tools.bg-color
--hltools-color: $highlight-tools.color
--hlnumber-bg: $highlight-gutter.bg-color
--hlnumber-color: $highlight-gutter.color
--hlscrollbar-bg: $highlight-scrollbar
--hlexpand-bg: linear-gradient(180deg, rgba($highlight-background, .6), rgba($highlight-background, .9))
[data-theme='dark']
--hl-color: alpha(#FFFFFF, .7)
--hl-bg: lighten(#121212, 2)
--hltools-bg: lighten(#121212, 3)
--hltools-color: #90a4ae
--hlnumber-bg: lighten(#121212, 2)
--hlnumber-color: alpha(#FFFFFF, .4)
--hlscrollbar-bg: lighten(#121212, 5)
--hlexpand-bg: linear-gradient(180deg, rgba(lighten(#121212, 2), .6), rgba(lighten(#121212, 2), .9))
if $highlight_enable
@require 'highlight/index'
if $prismjs_enable
@require 'prismjs/index'
$code-block
overflow: auto
margin: 0 0 20px
padding: 0
background: var(--hl-bg)
color: var(--hl-color)
line-height: $line-height-code-block
if wordWrap
counter-reset: line
white-space: pre-wrap
.container
pre,
code
font-size: $code-font-size
font-family: $code-font-family !important
addBorderRadius()
code
padding: 2px 5px
background: $code-background
color: $code-foreground
pre
@extend $code-block
padding: 10px 20px
code
padding: 0
background: none
color: var(--hl-color)
text-shadow: none
figure.highlight
@extend $code-block
position: relative
addBorderRadius()
pre
margin: 0
padding: 8px 0
border: none
figcaption,
.caption
padding: 6px 0 2px 14px
font-size: $code-font-size
line-height: 1em
a
float: right
padding-right: 10px
color: var(--hl-color)
&:hover
border-bottom-color: var(--hl-color)
&.copy-true
user-select: all
-webkit-user-select: all
& > table,
& > pre
display: block !important
opacity: 0
.highlight-tools
display: flex
align-items: center
padding: 0 8px
min-height: 24px
height: 2.15em
background: var(--hltools-bg)
color: var(--hltools-color)
font-size: $code-font-size
overflow: hidden
& > *
padding: 5px
i
cursor: pointer
transition: all .3s
&:hover
color: $theme-color
&.closed
& ~ *
display: none
.expand
transform: rotate(-90deg)
if !$highlight_macstyle
& > .macStyle
padding: 0
.code-lang
flex: 1
text-transform: uppercase
font-weight: bold
font-size: 1.15em
user-select: none
-webkit-user-select: none
padding 2px
.copy-notice
padding-right: 2px
opacity: 0
transition: opacity .4s
if hexo-config('code_blocks.language')
.code-lang
flex: 1
else if (!$highlight_macstyle && hexo-config('code_blocks.shrink') != 'none')
& > div:nth-child(2)
flex: 1
else
.macStyle
flex: 1
.gutter
user-select: none
-webkit-user-select: none
.gist table
width: auto
td
border: none
if $highlight_macstyle
.container
figure.highlight
margin: 0 0 24px
border-radius: 7px
box-shadow: 0 5px 10px 0 $highlight-mac-border
-webkit-transform: translateZ(0)
.highlight-tools
.macStyle
display: flex
& > *
margin-right: 8px
width: 12px
height: 12px
border-radius: 50%
& > :last-child
margin-right: 5px
.mac-close
background: #fc625d
.mac-minimize
background: #fdbc40
.mac-maximize
background: #35cd4b
if hexo-config('code_blocks.shrink') != 'none'
& > :nth-child(2)
order: 8
&.closed
.expand
transform: rotate(90deg)
if hexo-config('code_blocks.height_limit')
.container
.code-expand-btn
position: absolute
bottom: 0
z-index: 10
width: 100%
background: var(--hlexpand-bg)
text-align: center
font-size: $code-font-size
cursor: pointer
i
padding: 6px 0
color: var(--hlnumber-color)
animation: code-expand-key 1.2s infinite
&.expand-done
& > i
transform: rotate(180deg)
& + table,
& + pre
margin-bottom: 1.8em
&:not(.expand-done)
& ~ table,
& ~ pre
overflow: hidden
height: unit(hexo-config('code_blocks.height_limit'), px)
@keyframes code-expand-key
0%
opacity: .6
50%
opacity: .1
100%
opacity: .6
if hexo-config('code_blocks.fullpage')
.container
figure.highlight.code-fullpage
position: fixed
top: 0
right: 0
bottom: 0
left: 0
z-index: 9999
margin: 0
border-radius: 0
animation: code-fullpage .3s
.code-expand-btn,
.expand
display: none
.highlight-tools
& ~ pre,
& ~ table
display: block
overflow: auto
height: calc(100vh - 2.15em)
margin-bottom: 0
@keyframes code-fullpage
0%,
100%
transform: translateX(0)
20%,
60%
transform: translateX(-5px)
40%,
80%
transform: translateX(5px)
source/css/_highlight/highlight/diff.styl
+81 -81
View File
@@ -1,81 +1,81 @@
figure.highlight
table
// scrollbar - firefox
@-moz-document url-prefix()
scrollbar-color: var(--hlscrollbar-bg) transparent
&::-webkit-scrollbar-thumb
background: var(--hlscrollbar-bg)
pre .deletion
color: $highlight-deletion
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
figure.highlight
table
// scrollbar - firefox
@-moz-document url-prefix()
scrollbar-color: var(--hlscrollbar-bg) transparent
&::-webkit-scrollbar-thumb
background: var(--hlscrollbar-bg)
pre .deletion
color: $highlight-deletion
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/index.styl
+39 -39
View File
@@ -1,39 +1,39 @@
if $highlight_theme != false
@require 'diff'
.container
figure.highlight
.line
if wordWrap
&:before
display: inline-block
padding: 0 6px 0 0
min-width: 30px
color: var(--hlnumber-color)
content: counter(line)
counter-increment: line
text-align: left
&.marked
background-color: $highlight-selection
table
display: block
overflow: auto
border: none
td
padding: 0
border: none
.gutter pre
padding-right: 10px
padding-left: 10px
background-color: var(--hlnumber-bg)
color: var(--hlnumber-color)
text-align: right
.code pre
padding-right: 10px
padding-left: 10px
width: 100%
if $highlight_theme != false
@require 'diff'
.container
figure.highlight
.line
if wordWrap
&:before
display: inline-block
padding: 0 6px 0 0
min-width: 30px
color: var(--hlnumber-color)
content: counter(line)
counter-increment: line
text-align: left
&.marked
background-color: $highlight-selection
table
display: block
overflow: auto
border: none
td
padding: 0
border: none
.gutter pre
padding-right: 10px
padding-left: 10px
background-color: var(--hlnumber-bg)
color: var(--hlnumber-color)
text-align: right
.code pre
padding-right: 10px
padding-left: 10px
width: 100%
source/css/_highlight/prismjs/diff.styl
+301 -301
View File
@@ -1,302 +1,302 @@
if $highlight_theme == 'light'
// prism-base16-ateliersulphurpool.light
pre[class*='language-']
.token.function
color: #ffb62c
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata
color: rgba(149, 165, 166, .8)
.token.punctuation
color: #5e6687
.token.namespace
opacity: .7
.token.operator,
.token.boolean,
.token.number
color: #c76b29
.token.property
color: #c08b30
.token.tag
color: #3d8fd1
.token.string
color: #22a2c9
.token.selector
color: #6679cc
.token.attr-name
color: #c76b29
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string
color: #22a2c9
.token.attr-value,
.token.keyword,
.token.control,
.token.directive,
.token.unit
color: #ac9739
.token.statement,
.token.regex,
.token.atrule
color: #22a2c9
.token.placeholder,
.token.variable
color: #3d8fd1
.token.deleted
text-decoration: line-through
.token.inserted
border-bottom: 1px dotted #202746
text-decoration: none
.token.italic
font-style: italic
.token.important,
.token.bold
font-weight: bold
.token.important
color: #c94922
.token.entity
cursor: help
pre > code.highlight
outline: .4em solid #c94922
outline-offset: .4em
if $highlight_theme == 'darker'
// prism-atom-dark
pre[class*='language-']
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata
color: #7C7C7C
.token.punctuation
color: #c5c8c6
.namespace
opacity: .7
.token.property,
.token.keyword,
.token.tag
color: #96CBFE
.token.class-name
color: #FFFFB6
.token.boolean,
.token.constant
color: #99CC99
.token.symbol,
.token.deleted
color: #f92672
.token.number
color: #FF73FD
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted
color: #A8FF60
.token.variable
color: #C6C5FE
.token.operator
color: #EDEDED
.token.entity
color: #FFFFB6
cursor: help
.token.url
color: #96CBFE
.language-css .token.string,
.style .token.string
color: #87C38A
.token.atrule,
.token.attr-value
color: #F9EE98
.token.function
color: #DAD085
.token.regex
color: #E9C062
.token.important
color: #fd971f
.token.important,
.token.bold
font-weight: bold
.token.italic
font-style: italic
if $highlight_theme == 'pale night'
// prism-dracula
pre[class*='language-']
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata
color: #6272a4
.token.punctuation
color: #f8f8f2
.namespace
opacity: .7
.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted
color: #ff79c6
.token.boolean,
.token.number
color: #bd93f9
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted
color: #50fa7b
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable
color: #f8f8f2
.token.atrule,
.token.attr-value,
.token.function,
.token.class-name
color: #f1fa8c
.token.keyword
color: #8be9fd
.token.regex,
.token.important
color: #ffb86c
.token.important,
.token.bold
font-weight: bold
.token.italic
font-style: italic
.token.entity
cursor: help
if $highlight_theme == 'ocean'
// prism-material-oceanic
pre[class*='language-']
&.language-css > code,
&.language-sass > code,
&.language-scss > code
color: #fd9170 !important
.namespace
opacity: .7
.token.atrule,
.token.symbol,
.token.constant,
.token.boolean,
.token.function
color: #c792ea
.token.attr-name,
.token.builtin,
.token.class
color: #ffcb6b
.token.attr-value,
.token.attribute,
.token.pseudo-class,
.token.pseudo-element,
.token.string
color: #c3e88d
.token.cdata,
.token.property,
.token.char,
.token.inserted
color: #80cbc4
.token.class-name,
.token.color,
.token.hexcode,
.token.regex
color: #f2ff00
.token.comment,
.token.prolog,
.token.doctype
color: #546e7a
.token.deleted,
.token.variable,
.token.entity,
.token.selector,
.token.tag,
.token.unit
color: #f07178
.token.id
color: #c792ea
font-weight: bold
.token.important
color: #c792ea
font-weight: bold
.token.keyword
color: #c792ea
font-style: italic
.token.number,
.token.url
color: #fd9170
.token.operator,
.token.punctuation
if $highlight_theme == 'light'
// prism-base16-ateliersulphurpool.light
pre[class*='language-']
.token.function
color: #ffb62c
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata
color: rgba(149, 165, 166, .8)
.token.punctuation
color: #5e6687
.token.namespace
opacity: .7
.token.operator,
.token.boolean,
.token.number
color: #c76b29
.token.property
color: #c08b30
.token.tag
color: #3d8fd1
.token.string
color: #22a2c9
.token.selector
color: #6679cc
.token.attr-name
color: #c76b29
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string
color: #22a2c9
.token.attr-value,
.token.keyword,
.token.control,
.token.directive,
.token.unit
color: #ac9739
.token.statement,
.token.regex,
.token.atrule
color: #22a2c9
.token.placeholder,
.token.variable
color: #3d8fd1
.token.deleted
text-decoration: line-through
.token.inserted
border-bottom: 1px dotted #202746
text-decoration: none
.token.italic
font-style: italic
.token.important,
.token.bold
font-weight: bold
.token.important
color: #c94922
.token.entity
cursor: help
pre > code.highlight
outline: .4em solid #c94922
outline-offset: .4em
if $highlight_theme == 'darker'
// prism-atom-dark
pre[class*='language-']
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata
color: #7C7C7C
.token.punctuation
color: #c5c8c6
.namespace
opacity: .7
.token.property,
.token.keyword,
.token.tag
color: #96CBFE
.token.class-name
color: #FFFFB6
.token.boolean,
.token.constant
color: #99CC99
.token.symbol,
.token.deleted
color: #f92672
.token.number
color: #FF73FD
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted
color: #A8FF60
.token.variable
color: #C6C5FE
.token.operator
color: #EDEDED
.token.entity
color: #FFFFB6
cursor: help
.token.url
color: #96CBFE
.language-css .token.string,
.style .token.string
color: #87C38A
.token.atrule,
.token.attr-value
color: #F9EE98
.token.function
color: #DAD085
.token.regex
color: #E9C062
.token.important
color: #fd971f
.token.important,
.token.bold
font-weight: bold
.token.italic
font-style: italic
if $highlight_theme == 'pale night'
// prism-dracula
pre[class*='language-']
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata
color: #6272a4
.token.punctuation
color: #f8f8f2
.namespace
opacity: .7
.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted
color: #ff79c6
.token.boolean,
.token.number
color: #bd93f9
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted
color: #50fa7b
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable
color: #f8f8f2
.token.atrule,
.token.attr-value,
.token.function,
.token.class-name
color: #f1fa8c
.token.keyword
color: #8be9fd
.token.regex,
.token.important
color: #ffb86c
.token.important,
.token.bold
font-weight: bold
.token.italic
font-style: italic
.token.entity
cursor: help
if $highlight_theme == 'ocean'
// prism-material-oceanic
pre[class*='language-']
&.language-css > code,
&.language-sass > code,
&.language-scss > code
color: #fd9170 !important
.namespace
opacity: .7
.token.atrule,
.token.symbol,
.token.constant,
.token.boolean,
.token.function
color: #c792ea
.token.attr-name,
.token.builtin,
.token.class
color: #ffcb6b
.token.attr-value,
.token.attribute,
.token.pseudo-class,
.token.pseudo-element,
.token.string
color: #c3e88d
.token.cdata,
.token.property,
.token.char,
.token.inserted
color: #80cbc4
.token.class-name,
.token.color,
.token.hexcode,
.token.regex
color: #f2ff00
.token.comment,
.token.prolog,
.token.doctype
color: #546e7a
.token.deleted,
.token.variable,
.token.entity,
.token.selector,
.token.tag,
.token.unit
color: #f07178
.token.id
color: #c792ea
font-weight: bold
.token.important
color: #c792ea
font-weight: bold
.token.keyword
color: #c792ea
font-style: italic
.token.number,
.token.url
color: #fd9170
.token.operator,
.token.punctuation
color: #89ddff
source/css/_highlight/prismjs/index.styl
+24 -24
View File
@@ -1,24 +1,24 @@
if $prismjs_line_number
@require 'line-number'
if $highlight_theme != false
@require 'diff'
.container
pre[class*='language-']
// scrollbar - firefox
@-moz-document url-prefix()
scrollbar-color: var(--hlscrollbar-bg) transparent
&::-webkit-scrollbar-thumb
background: var(--hlscrollbar-bg)
&:not(.line-numbers)
padding: 10px 20px
.caption
margin-left: -3.8em
padding: 4px 16px !important
a
padding: 0 !important
if $prismjs_line_number
@require 'line-number'
if $highlight_theme != false
@require 'diff'
.container
pre[class*='language-']
// scrollbar - firefox
@-moz-document url-prefix()
scrollbar-color: var(--hlscrollbar-bg) transparent
&::-webkit-scrollbar-thumb
background: var(--hlscrollbar-bg)
&:not(.line-numbers)
padding: 10px 20px
.caption
margin-left: -3.8em
padding: 4px 16px !important
a
padding: 0 !important
source/css/_highlight/prismjs/line-number.styl
+42 -42
View File
@@ -1,42 +1,42 @@
.container
pre[class*='language-']
&.line-numbers
position: relative
padding-left: 3.8em
counter-reset: linenumber
line-height: $line-height-code-block
> code
position: relative
line-height: $line-height-code-block
if hexo-config('code_blocks.word_wrap')
white-space: pre-wrap
else
white-space: inherit
word-wrap: normal
word-break: normal
overflow-wrap: normal
.line-numbers-rows
position: absolute
top: 0
left: -3.8em
width: 3em
letter-spacing: -1px
font-size: 100%
pointer-events: none
user-select: none
-webkit-user-select: none
& > span
display: block
counter-increment: linenumber
pointer-events: none
&:before
display: block
padding-right: .8em
color: var(--hlnumber-color)
content: counter(linenumber)
text-align: right
.container
pre[class*='language-']
&.line-numbers
position: relative
padding-left: 3.8em
counter-reset: linenumber
line-height: $line-height-code-block
> code
position: relative
line-height: $line-height-code-block
if hexo-config('code_blocks.word_wrap')
white-space: pre-wrap
else
white-space: inherit
word-wrap: normal
word-break: normal
overflow-wrap: normal
.line-numbers-rows
position: absolute
top: 0
left: -3.8em
width: 3em
letter-spacing: -1px
font-size: 100%
pointer-events: none
user-select: none
-webkit-user-select: none
& > span
display: block
counter-increment: linenumber
pointer-events: none
&:before
display: block
padding-right: .8em
color: var(--hlnumber-color)
content: counter(linenumber)
text-align: right
source/css/_highlight/theme.styl
+121 -121
View File
@@ -1,121 +1,121 @@
if $highlight_theme == 'darker'
$highlight-background = #212121
$highlight-selection = #61616150
$highlight-foreground = #EEFFFF
$highlight-mac-border = rgba(0, 0, 0, .4)
$highlight-gutter = {
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
}
$highlight-tools = {
color: alpha($highlight-foreground, .8),
bg-color: darken($highlight-background, 2)
}
$highlight-scrollbar = lighten($highlight-background, 8)
if $highlight_enable
$highlight-comment = #969896
$highlight-red = #FF5370
$highlight-orange = #F78C6C
$highlight-yellow = #FFCB6B
$highlight-green = #C3E88D
$highlight-aqua = #89DDFF
$highlight-blue = #82AAFF
$highlight-purple = #C792EA
$highlight-deletion = #BF42BF
$highlight-addition = #105EDE
if $highlight_theme == 'pale night'
$highlight-background = #292D3E
$highlight-selection = #717CB450
$highlight-foreground = #A6ACCD
$highlight-mac-border = rgba($highlight-background, .4)
$highlight-gutter = {
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
}
$highlight-tools = {
color: $highlight-foreground,
bg-color: darken($highlight-background, 2)
}
$highlight-scrollbar = lighten($highlight-background, 8)
if $highlight_enable
$highlight-comment = #676E95
$highlight-red = #FF5370
$highlight-orange = #F78C6C
$highlight-yellow = #FFCB6B
$highlight-green = #C3E88D
$highlight-aqua = #89DDFF
$highlight-blue = #82AAFF
$highlight-purple = #C792EA
$highlight-deletion = #BF42BF
$highlight-addition = #105EDE
if $highlight_theme == 'ocean'
$highlight-background = #0F111A
$highlight-selection = #717CB450
$highlight-foreground = #8F93A2
$highlight-mac-border = rgba($highlight-background, .4)
$highlight-gutter = {
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
}
$highlight-tools = {
color: $highlight-foreground,
bg-color: darken($highlight-background, 2)
}
$highlight-scrollbar = lighten($highlight-background, 8)
if $highlight_enable
$highlight-comment = rgba(101, 115, 126, .8)
$highlight-red = #FF5370
$highlight-orange = #F78C6C
$highlight-yellow = #FFCB6B
$highlight-green = #C3E88D
$highlight-aqua = #89DDFF
$highlight-blue = #82AAFF
$highlight-purple = #C792EA
$highlight-deletion = #BF42BF
$highlight-addition = #105EDE
if $highlight_theme == 'light'
$highlight-background = #F6F8FA
$highlight-selection = #80CBC440
$highlight-foreground = #90A4AE
$highlight-mac-border = rgba(144, 164, 174, .4)
$highlight-tools = {
color: $highlight-foreground,
bg-color: darken($highlight-background, 5)
}
$highlight-gutter = {
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
}
$highlight-scrollbar = darken($highlight-background, 8)
if $highlight_enable
$highlight-comment = rgba(149, 165, 166, .8)
$highlight-red = #E53935
$highlight-orange = #F76D47
$highlight-yellow = #FFB62C
$highlight-green = #91B859
$highlight-aqua = #39ADB5
$highlight-blue = #6182B8
$highlight-purple = #7C4DFF
$highlight-deletion = #BF42BF
$highlight-addition = #105EDE
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)
}
$highlight-scrollbar = darken($highlight-background, 8)
if $highlight_theme == 'darker'
$highlight-background = #212121
$highlight-selection = #61616150
$highlight-foreground = #EEFFFF
$highlight-mac-border = rgba(0, 0, 0, .4)
$highlight-gutter = {
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
}
$highlight-tools = {
color: alpha($highlight-foreground, .8),
bg-color: darken($highlight-background, 2)
}
$highlight-scrollbar = lighten($highlight-background, 8)
if $highlight_enable
$highlight-comment = #969896
$highlight-red = #FF5370
$highlight-orange = #F78C6C
$highlight-yellow = #FFCB6B
$highlight-green = #C3E88D
$highlight-aqua = #89DDFF
$highlight-blue = #82AAFF
$highlight-purple = #C792EA
$highlight-deletion = #BF42BF
$highlight-addition = #105EDE
if $highlight_theme == 'pale night'
$highlight-background = #292D3E
$highlight-selection = #717CB450
$highlight-foreground = #A6ACCD
$highlight-mac-border = rgba($highlight-background, .4)
$highlight-gutter = {
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
}
$highlight-tools = {
color: $highlight-foreground,
bg-color: darken($highlight-background, 2)
}
$highlight-scrollbar = lighten($highlight-background, 8)
if $highlight_enable
$highlight-comment = #676E95
$highlight-red = #FF5370
$highlight-orange = #F78C6C
$highlight-yellow = #FFCB6B
$highlight-green = #C3E88D
$highlight-aqua = #89DDFF
$highlight-blue = #82AAFF
$highlight-purple = #C792EA
$highlight-deletion = #BF42BF
$highlight-addition = #105EDE
if $highlight_theme == 'ocean'
$highlight-background = #0F111A
$highlight-selection = #717CB450
$highlight-foreground = #8F93A2
$highlight-mac-border = rgba($highlight-background, .4)
$highlight-gutter = {
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
}
$highlight-tools = {
color: $highlight-foreground,
bg-color: darken($highlight-background, 2)
}
$highlight-scrollbar = lighten($highlight-background, 8)
if $highlight_enable
$highlight-comment = rgba(101, 115, 126, .8)
$highlight-red = #FF5370
$highlight-orange = #F78C6C
$highlight-yellow = #FFCB6B
$highlight-green = #C3E88D
$highlight-aqua = #89DDFF
$highlight-blue = #82AAFF
$highlight-purple = #C792EA
$highlight-deletion = #BF42BF
$highlight-addition = #105EDE
if $highlight_theme == 'light'
$highlight-background = #F6F8FA
$highlight-selection = #80CBC440
$highlight-foreground = #90A4AE
$highlight-mac-border = rgba(144, 164, 174, .4)
$highlight-tools = {
color: $highlight-foreground,
bg-color: darken($highlight-background, 5)
}
$highlight-gutter = {
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
}
$highlight-scrollbar = darken($highlight-background, 8)
if $highlight_enable
$highlight-comment = rgba(149, 165, 166, .8)
$highlight-red = #E53935
$highlight-orange = #F76D47
$highlight-yellow = #FFB62C
$highlight-green = #91B859
$highlight-aqua = #39ADB5
$highlight-blue = #6182B8
$highlight-purple = #7C4DFF
$highlight-deletion = #BF42BF
$highlight-addition = #105EDE
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)
}
$highlight-scrollbar = darken($highlight-background, 8)
source/css/_layout/aside.styl
+424 -424
View File
@@ -1,424 +1,424 @@
#aside-content
width: 26%
+minWidth900()
if hexo-config('aside.position') == 'right'
padding-left: 15px
else
padding-right: 15px
+maxWidth900()
margin-top: 20px
width: 100%
.card-widget
@extend .cardHover
position: relative
overflow: hidden
margin-bottom: 20px
padding: 20px 24px
if hexo-config('aside.mobile') == false
+maxWidth768()
&:not(#card-toc)
display: none
&:last-child
margin-bottom: 0
.card-info
.author-info
&-name
font-weight: 500
font-size: 1.57em
&-description
margin-top: -.42em
.site-data
margin: 14px 0 4px
.card-info-social-icons
margin: 6px 0 -6px
.social-icon
margin: 0 10px
color: var(--font-color)
font-size: 1.4em
i
transition: all .3s
&:hover
transform: rotate(360deg)
#card-info-btn
display: block
margin-top: 14px
background-color: var(--btn-bg)
color: var(--btn-color)
text-align: center
line-height: 2.4
addBorderRadius(7)
&:hover
background-color: var(--btn-hover-color)
span
padding-left: 10px
.item-headline
padding-bottom: 6px
font-size: 1.2em
span
margin-left: 6px
.sticky_layout
+minWidth900()
position: sticky
position: -webkit-sticky
top: 20px
transition: top .3s
.card-tag-cloud
a
display: inline-block
padding: 0 4px
line-height: 1.8
&:hover
color: $text-hover !important
.aside-list
& > span
display: block
margin-bottom: 10px
text-align: center
& > .aside-list-item
display: flex
align-items: center
padding: 6px 0
&:first-child
padding-top: 0
&:not(:last-child)
border-bottom: 1px dashed #f5f5f5
&:last-child
padding-bottom: 0
.thumbnail
overflow: hidden
width: w = 4em
height: w
addBorderRadius()
:first-child
@extend .imgHover
.content
flex: 1
padding-left: 10px
word-break: break-all
& > .name
@extend .limit-more-line
-webkit-line-clamp: 1
& > time,
& > .name
display: block
color: var(--card-meta)
font-size: .85em
& > .title,
& > .comment
@extend .limit-more-line
color: var(--font-color)
// font-size: 95%
line-height: 1.5
-webkit-line-clamp: 2
&:hover
color: $text-hover
&.no-cover
min-height: 4.4em
.card-archives ul.card-archive-list,
.card-categories ul.card-category-list
margin: 0
padding: 0
list-style: none
.card-archives ul.card-archive-list > .card-archive-list-item,
.card-categories ul.card-category-list > .card-category-list-item
a
display: flex
flex-direction: row
margin: 2px 0
padding: 2px 8px
color: var(--font-color)
transition: all .3s
addBorderRadius()
&:hover
padding: 2px 12px
background-color: var(--text-bg-hover)
color: var(--white)
span
@extend .limit-one-line
&:first-child
flex: 1
.card-categories
.card-category-list
&.child
padding: 0 0 0 16px
> .parent
> a
&.expand
i
transform: rotate(-90deg)
& + .child
display: block
.card-category-list
&-name
width: 70% !important
&-count
width: calc(100% - 70% - 20px)
text-align: right
i
float: right
margin-right: -.5em
padding: .5em
transition: transform .3s
transform: rotate(0)
if hexo-config('aside.card_categories.expand') == false
> .child
display: none
.card-webinfo
.webinfo
.webinfo-item
display: flex
align-items: center
padding: 2px 10px 0
div
&:first-child
flex: 1
padding-right: 20px
// toc
#card-toc
+minWidth901()
right: 0 !important
+maxWidth900()
position: fixed
right: 55px
bottom: 30px
z-index: 100
max-width: $toc-mobile-maxWidth
max-height: calc(100% - 60px)
width: $toc-mobile-width
transition: none
transform: scale(0)
transform-origin: right bottom
&.open
transform: scale(1)
.toc-percentage
float: right
margin-top: -9px
color: #a9a9a9
font-style: italic
font-size: 140%
.toc-content
overflow-y: scroll
overflow-y: overlay
margin: 0 -24px
max-height: calc(100vh - 120px)
width: calc(100% + 48px)
+maxWidth900()
max-height: calc(100vh - 140px)
& > *
margin: 0 20px !important
& > .toc-item > .toc-child
margin-left: 10px
padding-left: 10px
border-left: 1px solid var(--dark-grey)
&:not(.is-expand)
.toc-child
display: none
+maxWidth900()
display: block !important
.toc-item
&.active
.toc-child
display: block
ol,
li
list-style: none
> ol
padding: 0 !important
ol
margin: 0
padding-left: 18px
.toc-link
display: block
margin: 4px 0
padding: 1px 8px
color: var(--toc-link-color)
transition: all .2s ease-in-out
addBorderRadius()
&:hover
color: $theme-color
&.active
background: $theme-toc-color
color: $toc-active-color
.sticky_layout:only-child
> :first-child
margin-top: 0
.card-more-btn
float: right
color: inherit
&:hover
animation: more-btn-move 1s infinite
.card-announcement
.item-headline
i
color: #FF0000
.avatar-img
overflow: hidden
margin: 0 auto
width: 110px
height: 110px
border-radius: 70px
img
width: 100%
height: 100%
transition: filter 375ms ease-in .2s, transform .3s
object-fit: cover
&:hover
transform: rotate(360deg)
.site-data
display: table
width: 100%
table-layout: fixed
& > a
display: table-cell
div
transition: all .3s
&:hover
div
color: $theme-color !important
.headline
@extend .limit-one-line
color: var(--font-color)
font-size: .95em
.length-num
margin-top: -.45em
color: var(--text-highlight-color)
font-size: 1.2em
@keyframes more-btn-move
0%,
100%
transform: translateX(0)
50%
transform: translateX(3px)
@keyframes toc-open
0%
transform: scale(.7)
100%
transform: scale(1)
@keyframes toc-close
0%
transform: scale(1)
100%
transform: scale(.7)
+minWidth900()
html.hide-aside
.layout
justify-content: center
> .aside-content
display: none
> div:first-child
width: 80%
.page
.sticky_layout
display: flex
flex-direction: column
if hexo-config('aside.card_recent_post.sort_order')
.card-recent-post
order: hexo-config('aside.card_recent_post.sort_order')
if hexo-config('aside.card_newest_comments.sort_order')
#card-newest-comments
order: hexo-config('aside.card_newest_comments.sort_order')
if hexo-config('aside.card_categories.sort_order')
.card-categories
order: hexo-config('aside.card_categories.sort_order')
if hexo-config('aside.card_tags.sort_order')
.card-tags
order: hexo-config('aside.card_tags.sort_order')
if hexo-config('aside.card_archives.sort_order')
.card-archives
order: hexo-config('aside.card_archives.sort_order')
if hexo-config('aside.card_webinfo.sort_order')
.card-webinfo
order: hexo-config('aside.card_webinfo.sort_order')
#aside-content
width: 26%
+minWidth900()
if hexo-config('aside.position') == 'right'
padding-left: 15px
else
padding-right: 15px
+maxWidth900()
margin-top: 20px
width: 100%
.card-widget
@extend .cardHover
position: relative
overflow: hidden
margin-bottom: 20px
padding: 20px 24px
if hexo-config('aside.mobile') == false
+maxWidth768()
&:not(#card-toc)
display: none
&:last-child
margin-bottom: 0
.card-info
.author-info
&-name
font-weight: 500
font-size: 1.57em
&-description
margin-top: -.42em
.site-data
margin: 14px 0 4px
.card-info-social-icons
margin: 6px 0 -6px
.social-icon
margin: 0 10px
color: var(--font-color)
font-size: 1.4em
i
transition: all .3s
&:hover
transform: rotate(360deg)
#card-info-btn
display: block
margin-top: 14px
background-color: var(--btn-bg)
color: var(--btn-color)
text-align: center
line-height: 2.4
addBorderRadius(7)
&:hover
background-color: var(--btn-hover-color)
span
padding-left: 10px
.item-headline
padding-bottom: 6px
font-size: 1.2em
span
margin-left: 6px
.sticky_layout
+minWidth900()
position: sticky
position: -webkit-sticky
top: 20px
transition: top .3s
.card-tag-cloud
a
display: inline-block
padding: 0 4px
line-height: 1.8
&:hover
color: $text-hover !important
.aside-list
& > span
display: block
margin-bottom: 10px
text-align: center
& > .aside-list-item
display: flex
align-items: center
padding: 6px 0
&:first-child
padding-top: 0
&:not(:last-child)
border-bottom: 1px dashed #f5f5f5
&:last-child
padding-bottom: 0
.thumbnail
overflow: hidden
width: w = 4em
height: w
addBorderRadius()
:first-child
@extend .imgHover
.content
flex: 1
padding-left: 10px
word-break: break-all
& > .name
@extend .limit-more-line
-webkit-line-clamp: 1
& > time,
& > .name
display: block
color: var(--card-meta)
font-size: .85em
& > .title,
& > .comment
@extend .limit-more-line
color: var(--font-color)
// font-size: 95%
line-height: 1.5
-webkit-line-clamp: 2
&:hover
color: $text-hover
&.no-cover
min-height: 4.4em
.card-archives ul.card-archive-list,
.card-categories ul.card-category-list
margin: 0
padding: 0
list-style: none
.card-archives ul.card-archive-list > .card-archive-list-item,
.card-categories ul.card-category-list > .card-category-list-item
a
display: flex
flex-direction: row
margin: 2px 0
padding: 2px 8px
color: var(--font-color)
transition: all .3s
addBorderRadius()
&:hover
padding: 2px 12px
background-color: var(--text-bg-hover)
color: var(--white)
span
@extend .limit-one-line
&:first-child
flex: 1
.card-categories
.card-category-list
&.child
padding: 0 0 0 16px
> .parent
> a
&.expand
i
transform: rotate(-90deg)
& + .child
display: block
.card-category-list
&-name
width: 70% !important
&-count
width: calc(100% - 70% - 20px)
text-align: right
i
float: right
margin-right: -.5em
padding: .5em
transition: transform .3s
transform: rotate(0)
if hexo-config('aside.card_categories.expand') == false
> .child
display: none
.card-webinfo
.webinfo
.webinfo-item
display: flex
align-items: center
padding: 2px 10px 0
div
&:first-child
flex: 1
padding-right: 20px
// toc
#card-toc
+minWidth901()
right: 0 !important
+maxWidth900()
position: fixed
right: 55px
bottom: 30px
z-index: 100
max-width: $toc-mobile-maxWidth
max-height: calc(100% - 60px)
width: $toc-mobile-width
transition: none
transform: scale(0)
transform-origin: right bottom
&.open
transform: scale(1)
.toc-percentage
float: right
margin-top: -9px
color: #a9a9a9
font-style: italic
font-size: 140%
.toc-content
overflow-y: scroll
overflow-y: overlay
margin: 0 -24px
max-height: calc(100vh - 120px)
width: calc(100% + 48px)
+maxWidth900()
max-height: calc(100vh - 140px)
& > *
margin: 0 20px !important
& > .toc-item > .toc-child
margin-left: 10px
padding-left: 10px
border-left: 1px solid var(--dark-grey)
&:not(.is-expand)
.toc-child
display: none
+maxWidth900()
display: block !important
.toc-item
&.active
.toc-child
display: block
ol,
li
list-style: none
> ol
padding: 0 !important
ol
margin: 0
padding-left: 18px
.toc-link
display: block
margin: 4px 0
padding: 1px 8px
color: var(--toc-link-color)
transition: all .2s ease-in-out
addBorderRadius()
&:hover
color: $theme-color
&.active
background: $theme-toc-color
color: $toc-active-color
.sticky_layout:only-child
> :first-child
margin-top: 0
.card-more-btn
float: right
color: inherit
&:hover
animation: more-btn-move 1s infinite
.card-announcement
.item-headline
i
color: #FF0000
.avatar-img
overflow: hidden
margin: 0 auto
width: 110px
height: 110px
border-radius: 70px
img
width: 100%
height: 100%
transition: filter 375ms ease-in .2s, transform .3s
object-fit: cover
&:hover
transform: rotate(360deg)
.site-data
display: table
width: 100%
table-layout: fixed
& > a
display: table-cell
div
transition: all .3s
&:hover
div
color: $theme-color !important
.headline
@extend .limit-one-line
color: var(--font-color)
font-size: .95em
.length-num
margin-top: -.45em
color: var(--text-highlight-color)
font-size: 1.2em
@keyframes more-btn-move
0%,
100%
transform: translateX(0)
50%
transform: translateX(3px)
@keyframes toc-open
0%
transform: scale(.7)
100%
transform: scale(1)
@keyframes toc-close
0%
transform: scale(1)
100%
transform: scale(.7)
+minWidth900()
html.hide-aside
.layout
justify-content: center
> .aside-content
display: none
> div:first-child
width: 80%
.page
.sticky_layout
display: flex
flex-direction: column
if hexo-config('aside.card_recent_post.sort_order')
.card-recent-post
order: hexo-config('aside.card_recent_post.sort_order')
if hexo-config('aside.card_newest_comments.sort_order')
#card-newest-comments
order: hexo-config('aside.card_newest_comments.sort_order')
if hexo-config('aside.card_categories.sort_order')
.card-categories
order: hexo-config('aside.card_categories.sort_order')
if hexo-config('aside.card_tags.sort_order')
.card-tags
order: hexo-config('aside.card_tags.sort_order')
if hexo-config('aside.card_archives.sort_order')
.card-archives
order: hexo-config('aside.card_archives.sort_order')
if hexo-config('aside.card_webinfo.sort_order')
.card-webinfo
order: hexo-config('aside.card_webinfo.sort_order')
source/css/_layout/chat.styl
+8 -8
View File
@@ -1,9 +1,9 @@
// chat
if hexo-config('chat.rightside_button') == true
if hexo-config('chat.use') == 'chatra'
#chatra:not(.chatra--expanded)
visibility: hidden !important
width: 1px !important
height: 1px !important
opacity: 0 !important
// chat
if hexo-config('chat.rightside_button') == true
if hexo-config('chat.use') == 'chatra'
#chatra:not(.chatra--expanded)
visibility: hidden !important
width: 1px !important
height: 1px !important
opacity: 0 !important
pointer-events: none
source/css/_layout/comments.styl
+80 -80
View File
@@ -1,81 +1,81 @@
#post-comment
.comment-head
margin-bottom: 20px
&:after
display: block
clear: both
content: ''
.comment-headline
display: inline-block
vertical-align: middle
font-weight: 700
font-size: 1.43em
.comment-switch
display: inline-block
if hexo-config('comments.text')
float: right
margin: 2px auto 0
padding: 4px 16px
width: max-content
border-radius: 8px
background: $comments-switch-bg
else
vertical-align: middle
> span
display: none
.first-comment
color: $comments-switch-first-text
.second-comment
color: $comments-switch-second-text
#switch-btn
position: relative
display: inline-block
margin: -4px 8px 0
width: 42px
height: 22px
border-radius: 34px
background-color: $comments-switch-first-text
vertical-align: middle
cursor: pointer
transition: .4s
&:before
position: absolute
bottom: 4px
left: 4px
width: 14px
height: 14px
border-radius: 50%
background-color: $comments-switch-round
content: ''
transition: .4s
.comment-wrap
> div
animation: tabshow .5s
&:nth-child(2)
display: none
&.move
#switch-btn
background-color: $comments-switch-second-text
&:before
transform: translateX(20px)
.comment-wrap
> div
&:first-child
display: none
&:last-child
#post-comment
.comment-head
margin-bottom: 20px
&:after
display: block
clear: both
content: ''
.comment-headline
display: inline-block
vertical-align: middle
font-weight: 700
font-size: 1.43em
.comment-switch
display: inline-block
if hexo-config('comments.text')
float: right
margin: 2px auto 0
padding: 4px 16px
width: max-content
border-radius: 8px
background: $comments-switch-bg
else
vertical-align: middle
> span
display: none
.first-comment
color: $comments-switch-first-text
.second-comment
color: $comments-switch-second-text
#switch-btn
position: relative
display: inline-block
margin: -4px 8px 0
width: 42px
height: 22px
border-radius: 34px
background-color: $comments-switch-first-text
vertical-align: middle
cursor: pointer
transition: .4s
&:before
position: absolute
bottom: 4px
left: 4px
width: 14px
height: 14px
border-radius: 50%
background-color: $comments-switch-round
content: ''
transition: .4s
.comment-wrap
> div
animation: tabshow .5s
&:nth-child(2)
display: none
&.move
#switch-btn
background-color: $comments-switch-second-text
&:before
transform: translateX(20px)
.comment-wrap
> div
&:first-child
display: none
&:last-child
display: block
source/css/_layout/footer.styl
+35 -35
View File
@@ -1,35 +1,35 @@
#footer
position: relative
background-color: $light-blue
background-attachment: scroll
background-position: bottom
background-size: cover
if hexo-config('footer_img') != false && hexo-config('mask.footer')
&:before
position: absolute
width: 100%
height: 100%
background-color: var(--mark-bg)
content: ''
#footer-wrap
position: relative
padding: 40px 20px
color: var(--light-grey)
text-align: center
a
color: var(--light-grey)
&:hover
text-decoration: underline
.footer-separator
margin: 0 4px
.icp-icon
padding: 0 4px
max-height: 1.4em
width: auto
vertical-align: text-bottom
#footer
position: relative
background-color: $light-blue
background-attachment: scroll
background-position: bottom
background-size: cover
if hexo-config('footer_img') != false && hexo-config('mask.footer')
&:before
position: absolute
width: 100%
height: 100%
background-color: var(--mark-bg)
content: ''
#footer-wrap
position: relative
padding: 40px 20px
color: var(--light-grey)
text-align: center
a
color: var(--light-grey)
&:hover
text-decoration: underline
.footer-separator
margin: 0 4px
.icp-icon
padding: 0 4px
max-height: 1.4em
width: auto
vertical-align: text-bottom
source/css/_layout/head.styl
+437 -437
View File
@@ -1,438 +1,438 @@
#page-header
position: relative
width: 100%
background-color: $light-blue
background-position: center center
background-size: cover
background-repeat: no-repeat
transition: all .5s
if hexo-config('mask.header')
&:not(.not-top-img):before
position: absolute
width: 100%
height: 100%
background-color: var(--mark-bg)
content: ''
// index
&.full_page
height: $index_top_img_height
background-attachment: fixed
#site-info
position: absolute
top: $index_site_info_top
padding: 0 10px
width: 100%
#site-title,
#site-subtitle,
#scroll-down .scroll-down-effects
text-align: center
text-shadow: 2px 2px 4px rgba(0, 0, 0, .15)
line-height: 1.5
#site-title
margin: 0
color: var(--white)
font-size: 1.85em
+minWidth768()
font-size: 2.85em
#site-subtitle
color: var(--light-grey)
font-size: 1.15em
+minWidth768()
font-size: 1.72em
#site_social_icons
display: none
margin: 0 auto
text-align: center
+maxWidth768()
display: block
.social-icon
margin: 0 10px
color: var(--light-grey)
text-shadow: 2px 2px 4px rgba(0, 0, 0, .15)
font-size: 1.43em
#scroll-down
position: absolute
bottom: 10px
width: 100%
cursor: pointer
.scroll-down-effects
position: relative
width: 100%
color: var(--light-grey)
font-size: 20px
// page
&.not-home-page
height: 400px
+maxWidth768()
height: 280px
#page-site-info
position: absolute
top: 200px
padding: 0 10px
width: 100%
+maxWidth768()
top: 140px
// post
&.post-bg
height: 400px
+maxWidth768()
height: 360px
#post-info
position: absolute
width: 100%
if hexo-config('post_meta.post.position') == 'center'
top: calc(50% + 30px)
padding: 0 8%
text-align: center
transform: translateY(-50%)
+maxWidth768()
padding: 0 15px
else
bottom: 30px
& > *
margin: 0 auto
padding: 0 15px
max-width: 1200px
@media screen and (min-width: 768px) and (max-width: 1300px)
padding: 0 30px
+minWidth2000()
max-width: 70%
&.not-top-img
margin-bottom: 10px
height: 60px
background: 0
.title-seo
display: none
#nav
background: rgba(255, 255, 255, .8)
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, .6)
a,
span.site-page,
.site-name
color: var(--font-color)
text-shadow: none
&.nav-fixed
#nav
position: fixed
top: -60px
z-index: 91
background: rgba(255, 255, 255, .7)
box-shadow: 0 5px 6px -5px alpha($grey, .6)
transition: transform .2s ease-in-out, opacity .2s ease-in-out
will-change: transform
backdrop-filter: blur(7px)
#blog-info
color: var(--font-color)
&:hover
color: $light-blue
.site-name
text-shadow: none
& > a:first-child
display: none
& > a:last-child
display: inline
a,
span.site-page,
#toggle-menu
color: var(--font-color)
text-shadow: none
&:hover
color: $light-blue
&.fixed
#nav
top: 0
transition: all .5s
&.nav-visible:not(.fixed)
#nav
transition: all .5s
transform: translate3d(0, 100%, 0)
& + .layout
& > .aside-content > .sticky_layout
top: 70px
transition: top .5s
&.fixed
#nav
position: fixed
& + .layout
& > .aside-content > .sticky_layout
top: 70px
transition: top .5s
#card-toc
.toc-content
max-height: calc(100vh - 170px)
#page
.page-title
margin: 0 0 10px
font-weight: bold
font-size: 2em
// for not top_img
#post
& > #post-info
margin-bottom: 30px
.post-title
padding-bottom: 4px
border-bottom: 1px solid var(--light-grey)
color: var(--text-highlight-color)
.post-edit-link
float: right
#post-meta,
#post-meta a
color: #78818a
#post-info
.post-title
@extend .limit-more-line
margin-bottom: 8px
color: var(--white)
font-weight: normal
font-size: 2.5em
line-height: 1.5
-webkit-line-clamp: 3
+maxWidth768()
font-size: 2.1em
.post-edit-link
padding-left: 10px
#post-meta
color: var(--light-grey)
font-size: 95%
+minWidth768()
> .meta-secondline
> span:first-child
display: none
+maxWidth768()
font-size: 90%
> .meta-firstline,
> .meta-secondline
display: inline
.post-meta
&-separator
margin: 0 5px
&-icon
margin-right: 4px
&-label
if hexo-config('post_meta.post.label')
margin-right: 4px
else
display: none
a
color: var(--light-grey)
transition: all .3s ease-out
&:hover
color: $text-hover
text-decoration: underline
if hexo-config('post_meta.post.date_format') == 'relative'
time
display: none
#nav
position: absolute
top: 0
z-index: 90
display: flex
align-items: center
padding: 0 36px
width: 100%
height: 60px
font-size: 1.3em
opacity: 0
transition: all .5s
+maxWidth768()
padding: 0 16px
&.show
opacity: 1
#blog-info
flex: 1
color: var(--light-grey)
@extend .limit-one-line
.site-icon
margin-right: 6px
height: 36px
vertical-align: middle
.nav-page-title
display: none
#toggle-menu
display: none
padding: 2px 0 0 6px
vertical-align: top
&:hover
color: var(--white)
a,
span.site-page
color: var(--light-grey)
&:hover
color: var(--white)
.site-name
text-shadow: 2px 2px 4px rgba($dark-black, .15)
font-weight: bold
.menus_items
display: inline
.menus_item
position: relative
display: inline-block
padding: 0 0 0 14px
&:hover
.menus_item_child
display: block
& > span > i:last-child
transform: rotate(180deg)
& > span > i:last-child
padding: 4px
transition: transform .3s
.menus_item_child
position: absolute
right: 0
display: none
margin-top: 8px
padding: 0
width: max-content
background-color: var(--sidebar-bg)
box-shadow: 0 5px 20px -4px rgba($dark-black, .5)
animation: sub_menus .3s .1s ease both
addBorderRadius(5)
&:before
position: absolute
top: -8px
left: 0
width: 100%
height: 20px
content: ''
li
list-style: none
&:hover
background: var(--text-bg-hover)
if hexo-config('rounded_corners_ui')
&:first-child
border-top-left-radius: 5px
border-top-right-radius: 5px
&:last-child
border-bottom-right-radius: 5px
border-bottom-left-radius: 5px
a
display: inline-block
padding: 8px 16px
width: 100%
color: var(--font-color) !important
text-shadow: none !important
&.hide-menu
#toggle-menu
display: inline-block !important
.site-page
font-size: inherit
.menus_items
display: none
#search-button span:not(.site-page)
display: none
#search-button
display: inline
padding: 0 0 0 14px
.site-page
position: relative
padding-bottom: 6px
text-shadow: 1px 1px 2px rgba($dark-black, .3)
font-size: .78em
cursor: pointer
&:not(.child)
&: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
addBorderRadius()
&:hover
&:after
#page-header
position: relative
width: 100%
background-color: $light-blue
background-position: center center
background-size: cover
background-repeat: no-repeat
transition: all .5s
if hexo-config('mask.header')
&:not(.not-top-img):before
position: absolute
width: 100%
height: 100%
background-color: var(--mark-bg)
content: ''
// index
&.full_page
height: $index_top_img_height
background-attachment: fixed
#site-info
position: absolute
top: $index_site_info_top
padding: 0 10px
width: 100%
#site-title,
#site-subtitle,
#scroll-down .scroll-down-effects
text-align: center
text-shadow: 2px 2px 4px rgba(0, 0, 0, .15)
line-height: 1.5
#site-title
margin: 0
color: var(--white)
font-size: 1.85em
+minWidth768()
font-size: 2.85em
#site-subtitle
color: var(--light-grey)
font-size: 1.15em
+minWidth768()
font-size: 1.72em
#site_social_icons
display: none
margin: 0 auto
text-align: center
+maxWidth768()
display: block
.social-icon
margin: 0 10px
color: var(--light-grey)
text-shadow: 2px 2px 4px rgba(0, 0, 0, .15)
font-size: 1.43em
#scroll-down
position: absolute
bottom: 10px
width: 100%
cursor: pointer
.scroll-down-effects
position: relative
width: 100%
color: var(--light-grey)
font-size: 20px
// page
&.not-home-page
height: 400px
+maxWidth768()
height: 280px
#page-site-info
position: absolute
top: 200px
padding: 0 10px
width: 100%
+maxWidth768()
top: 140px
// post
&.post-bg
height: 400px
+maxWidth768()
height: 360px
#post-info
position: absolute
width: 100%
if hexo-config('post_meta.post.position') == 'center'
top: calc(50% + 30px)
padding: 0 8%
text-align: center
transform: translateY(-50%)
+maxWidth768()
padding: 0 15px
else
bottom: 30px
& > *
margin: 0 auto
padding: 0 15px
max-width: 1200px
@media screen and (min-width: 768px) and (max-width: 1300px)
padding: 0 30px
+minWidth2000()
max-width: 70%
&.not-top-img
margin-bottom: 10px
height: 60px
background: 0
.title-seo
display: none
#nav
background: rgba(255, 255, 255, .8)
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, .6)
a,
span.site-page,
.site-name
color: var(--font-color)
text-shadow: none
&.nav-fixed
#nav
position: fixed
top: -60px
z-index: 91
background: rgba(255, 255, 255, .7)
box-shadow: 0 5px 6px -5px alpha($grey, .6)
transition: transform .2s ease-in-out, opacity .2s ease-in-out
will-change: transform
backdrop-filter: blur(7px)
#blog-info
color: var(--font-color)
&:hover
color: $light-blue
.site-name
text-shadow: none
& > a:first-child
display: none
& > a:last-child
display: inline
a,
span.site-page,
#toggle-menu
color: var(--font-color)
text-shadow: none
&:hover
color: $light-blue
&.fixed
#nav
top: 0
transition: all .5s
&.nav-visible:not(.fixed)
#nav
transition: all .5s
transform: translate3d(0, 100%, 0)
& + .layout
& > .aside-content > .sticky_layout
top: 70px
transition: top .5s
&.fixed
#nav
position: fixed
& + .layout
& > .aside-content > .sticky_layout
top: 70px
transition: top .5s
#card-toc
.toc-content
max-height: calc(100vh - 170px)
#page
.page-title
margin: 0 0 10px
font-weight: bold
font-size: 2em
// for not top_img
#post
& > #post-info
margin-bottom: 30px
.post-title
padding-bottom: 4px
border-bottom: 1px solid var(--light-grey)
color: var(--text-highlight-color)
.post-edit-link
float: right
#post-meta,
#post-meta a
color: #78818a
#post-info
.post-title
@extend .limit-more-line
margin-bottom: 8px
color: var(--white)
font-weight: normal
font-size: 2.5em
line-height: 1.5
-webkit-line-clamp: 3
+maxWidth768()
font-size: 2.1em
.post-edit-link
padding-left: 10px
#post-meta
color: var(--light-grey)
font-size: 95%
+minWidth768()
> .meta-secondline
> span:first-child
display: none
+maxWidth768()
font-size: 90%
> .meta-firstline,
> .meta-secondline
display: inline
.post-meta
&-separator
margin: 0 5px
&-icon
margin-right: 4px
&-label
if hexo-config('post_meta.post.label')
margin-right: 4px
else
display: none
a
color: var(--light-grey)
transition: all .3s ease-out
&:hover
color: $text-hover
text-decoration: underline
if hexo-config('post_meta.post.date_format') == 'relative'
time
display: none
#nav
position: absolute
top: 0
z-index: 90
display: flex
align-items: center
padding: 0 36px
width: 100%
height: 60px
font-size: 1.3em
opacity: 0
transition: all .5s
+maxWidth768()
padding: 0 16px
&.show
opacity: 1
#blog-info
flex: 1
color: var(--light-grey)
@extend .limit-one-line
.site-icon
margin-right: 6px
height: 36px
vertical-align: middle
.nav-page-title
display: none
#toggle-menu
display: none
padding: 2px 0 0 6px
vertical-align: top
&:hover
color: var(--white)
a,
span.site-page
color: var(--light-grey)
&:hover
color: var(--white)
.site-name
text-shadow: 2px 2px 4px rgba($dark-black, .15)
font-weight: bold
.menus_items
display: inline
.menus_item
position: relative
display: inline-block
padding: 0 0 0 14px
&:hover
.menus_item_child
display: block
& > span > i:last-child
transform: rotate(180deg)
& > span > i:last-child
padding: 4px
transition: transform .3s
.menus_item_child
position: absolute
right: 0
display: none
margin-top: 8px
padding: 0
width: max-content
background-color: var(--sidebar-bg)
box-shadow: 0 5px 20px -4px rgba($dark-black, .5)
animation: sub_menus .3s .1s ease both
addBorderRadius(5)
&:before
position: absolute
top: -8px
left: 0
width: 100%
height: 20px
content: ''
li
list-style: none
&:hover
background: var(--text-bg-hover)
if hexo-config('rounded_corners_ui')
&:first-child
border-top-left-radius: 5px
border-top-right-radius: 5px
&:last-child
border-bottom-right-radius: 5px
border-bottom-left-radius: 5px
a
display: inline-block
padding: 8px 16px
width: 100%
color: var(--font-color) !important
text-shadow: none !important
&.hide-menu
#toggle-menu
display: inline-block !important
.site-page
font-size: inherit
.menus_items
display: none
#search-button span:not(.site-page)
display: none
#search-button
display: inline
padding: 0 0 0 14px
.site-page
position: relative
padding-bottom: 6px
text-shadow: 1px 1px 2px rgba($dark-black, .3)
font-size: .78em
cursor: pointer
&:not(.child)
&: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
addBorderRadius()
&:hover
&:after
width: 100%
source/css/_layout/loading.styl
+95 -95
View File
@@ -1,95 +1,95 @@
if hexo-config('preloader.enable') && hexo-config('preloader.source') == 1
.loading-bg
position: fixed
z-index: 1000
width: 50%
height: 100%
background-color: var(--preloader-bg)
#loading-box
.loading-left-bg
@extend .loading-bg
.loading-right-bg
@extend .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: var(--preloader-color)
font-size: 16px
.configure-core
width: 100%
height: 100%
background-color: var(--preloader-bg)
&.loaded
.loading-left-bg
transition: all .5s
transform: translate(-100%, 0)
.loading-right-bg
transition: all .5s
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)
if hexo-config('preloader.enable') && hexo-config('preloader.source') == 1
.loading-bg
position: fixed
z-index: 1000
width: 50%
height: 100%
background-color: var(--preloader-bg)
#loading-box
.loading-left-bg
@extend .loading-bg
.loading-right-bg
@extend .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: var(--preloader-color)
font-size: 16px
.configure-core
width: 100%
height: 100%
background-color: var(--preloader-bg)
&.loaded
.loading-left-bg
transition: all .5s
transform: translate(-100%, 0)
.loading-right-bg
transition: all .5s
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/pagination.styl
+105 -105
View File
@@ -1,106 +1,106 @@
#pagination
.pagination
margin-top: 20px
text-align: center
.page-number
&.current
background: $theme-paginator-color
color: var(--white)
.full-width
width: 100% !important
.pagination-related
height: 150px
+minWidth768()
flex: 1
.info-1
.info-item-2
-webkit-line-clamp: 1
.info-2
.info-item-1
-webkit-line-clamp: 2
&.pagination-post
overflow: hidden
margin-top: 40px
width: 100%
addBorderRadius()
display: flex
+maxWidth768()
flex-direction: column
.layout
.pagination
& > *
display: inline-block
margin: 0 6px
width: w = 2.5em
height: w
line-height: w
& > *:not(.space)
@extend .cardHover
&:hover
background: var(--btn-hover-color)
color: var(--btn-color)
#archive
.pagination
margin-top: 30px
& > *:not(.space)
box-shadow: none
.pagination-related
position: relative
display: inline-block
overflow: hidden
background: $dark-black
vertical-align: bottom
@extend .postImgHover
&.next-post
.info
text-align: right
.info
.info-1,
.info-2
@extend .verticalCenter
padding: 20px 40px
color: var(--white)
transition: transform .3s, opacity .3s
.info-1
.info-item-1
color: var(--light-grey)
text-transform: uppercase
font-size: 90%
.info-item-2
@extend .limit-more-line
color: var(--white)
font-weight: 500
.info-2
opacity: 0
transform: translate(0, 0)
.info-item-1
@extend .limit-more-line
&:not(.no-desc):hover
.info-1
opacity: 0
transform: translate(0, -100%)
.info-2
opacity: 1
#pagination
.pagination
margin-top: 20px
text-align: center
.page-number
&.current
background: $theme-paginator-color
color: var(--white)
.full-width
width: 100% !important
.pagination-related
height: 150px
+minWidth768()
flex: 1
.info-1
.info-item-2
-webkit-line-clamp: 1
.info-2
.info-item-1
-webkit-line-clamp: 2
&.pagination-post
overflow: hidden
margin-top: 40px
width: 100%
addBorderRadius()
display: flex
+maxWidth768()
flex-direction: column
.layout
.pagination
& > *
display: inline-block
margin: 0 6px
width: w = 2.5em
height: w
line-height: w
& > *:not(.space)
@extend .cardHover
&:hover
background: var(--btn-hover-color)
color: var(--btn-color)
#archive
.pagination
margin-top: 30px
& > *:not(.space)
box-shadow: none
.pagination-related
position: relative
display: inline-block
overflow: hidden
background: $dark-black
vertical-align: bottom
@extend .postImgHover
&.next-post
.info
text-align: right
.info
.info-1,
.info-2
@extend .verticalCenter
padding: 20px 40px
color: var(--white)
transition: transform .3s, opacity .3s
.info-1
.info-item-1
color: var(--light-grey)
text-transform: uppercase
font-size: 90%
.info-item-2
@extend .limit-more-line
color: var(--white)
font-weight: 500
.info-2
opacity: 0
transform: translate(0, 0)
.info-item-1
@extend .limit-more-line
&:not(.no-desc):hover
.info-1
opacity: 0
transform: translate(0, -100%)
.info-2
opacity: 1
transform: translate(0, -50%)
source/css/_layout/post.styl
+264 -264
View File
@@ -1,264 +1,264 @@
beautify()
headStyle(fontsize)
padding-left: unit(fontsize + 8, 'px')
&:before
font-size: unit(fontsize - 2, 'px')
&:hover
padding-left: unit(fontsize + 12, 'px')
h1,
h2,
h3,
h4,
h5,
h6
transition: all .2s ease-out
&:before
position: absolute
top: calc(50% - 7px)
left: 0
color: $title-prefix-icon-color
content: $title-prefix-icon
line-height: 1
transition: all .2s ease-out
@extend .fontawesomeIcon
&:hover
&:before
color: $light-blue
h1
headStyle(20)
h2
headStyle(18)
h3
headStyle(16)
h4
headStyle(14)
h5
headStyle(12)
h6
headStyle(12)
ol,
ul
p
margin: 0 0 8px
li
&::marker
color: $light-blue
font-weight: 600
font-size: 1.05em
&:hover
&::marker
color: var(--pseudo-hover)
ul > li
list-style-type: circle
hr
@extend .custom-hr
.container
word-wrap: break-word
overflow-wrap: break-word
if hexo-config('text_align_justify')
text-align: justify
a
color: $theme-link-color
&:hover
text-decoration: underline
img
display: block
margin: 0 auto 20px
max-width: 100%
transition: filter 375ms ease-in .2s
addBorderRadius()
p
margin: 0 0 16px
iframe
margin: 0 0 20px
kbd
margin: 0 3px
padding: 3px 5px
border: 1px solid #b4b4b4
background-color: #f8f8f8
box-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 2px 1px 0 rgba(255, 255, 255, .6) inset
color: #34495e
white-space: nowrap
font-weight: 600
font-size: .9em
font-family: Monaco, 'Ubuntu Mono', monospace
line-height: 1em
addBorderRadius(3)
if hexo-config('anchor.click_to_scroll')
h1,
h2,
h3,
h4,
h5,
h6
width: fit-content
a:not(.headerlink)
position: relative
z-index: 10
a.headerlink
position: absolute
top: 0
right: 0
bottom: 0
left: 0
width: 100%
height: 100%
ol,
ul
ol,
ul
padding-left: 20px
li
margin: 4px 0
p
margin: 0 0 8px
> :last-child
margin-bottom: 0 !important
hr
margin: 20px 0
if hexo-config('beautify.enable')
if hexo-config('beautify.field') == 'site'
beautify()
else if hexo-config('beautify.field') == 'post'
&.post-content
beautify()
#post
.tag_share
&:after
display: block
clear: both
content: ''
.post-meta
&__tag-list
display: inline-block
&__tags
display: inline-block
margin: 8px 8px 8px 0
padding: 0 12px
width: fit-content
border: 1px solid $light-blue
border-radius: 12px
color: $light-blue
font-size: .85em
transition: all .2s ease-in-out
&:hover
background: $light-blue
color: var(--white)
.post-share
display: inline-block
float: right
margin: 8px 0 0
width: fit-content
.social-share
font-size: .85em
.social-share-icon
margin: 0 4px
width: w = 1.85em
height: w
font-size: 1.2em
line-height: w
.post-copyright
position: relative
margin: 40px 0 10px
padding: 10px 16px
border: 1px solid var(--light-grey)
transition: box-shadow .3s ease-in-out
addBorderRadius()
&:before
@extend .fontawesomeIcon
position: absolute
top: 2px
right: 12px
color: $theme-color
content: '\f1f9'
font-size: 1.3em
&:hover
box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)
.post-copyright
&-meta
color: $light-blue
font-weight: bold
i
margin-right: 3px
&-info
padding-left: 6px
a
text-decoration: underline
word-break: break-word
&:hover
text-decoration: none
#post-outdate-notice
position: relative
margin: 0 0 20px
padding: .5em 1.2em
background-color: $noticeOutdate-bg
color: $noticeOutdate-color
addBorderRadius(3)
.num
padding: 0 4px
if hexo-config('noticeOutdate.style') == 'flat'
padding: .5em 1em .5em 2.6em
border-left: 5px solid $noticeOutdate-border
&:before
@extend .fontawesomeIcon
position: absolute
top: 50%
left: .9em
color: $noticeOutdate-border
content: '\f071'
transform: translateY(-50%)
.ads-wrap
margin: 40px 0
beautify()
headStyle(fontsize)
padding-left: unit(fontsize + 8, 'px')
&:before
font-size: unit(fontsize - 2, 'px')
&:hover
padding-left: unit(fontsize + 12, 'px')
h1,
h2,
h3,
h4,
h5,
h6
transition: all .2s ease-out
&:before
position: absolute
top: calc(50% - 7px)
left: 0
color: $title-prefix-icon-color
content: $title-prefix-icon
line-height: 1
transition: all .2s ease-out
@extend .fontawesomeIcon
&:hover
&:before
color: $light-blue
h1
headStyle(20)
h2
headStyle(18)
h3
headStyle(16)
h4
headStyle(14)
h5
headStyle(12)
h6
headStyle(12)
ol,
ul
p
margin: 0 0 8px
li
&::marker
color: $light-blue
font-weight: 600
font-size: 1.05em
&:hover
&::marker
color: var(--pseudo-hover)
ul > li
list-style-type: circle
hr
@extend .custom-hr
.container
word-wrap: break-word
overflow-wrap: break-word
if hexo-config('text_align_justify')
text-align: justify
a
color: $theme-link-color
&:hover
text-decoration: underline
img
display: block
margin: 0 auto 20px
max-width: 100%
transition: filter 375ms ease-in .2s
addBorderRadius()
p
margin: 0 0 16px
iframe
margin: 0 0 20px
kbd
margin: 0 3px
padding: 3px 5px
border: 1px solid #b4b4b4
background-color: #f8f8f8
box-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 2px 1px 0 rgba(255, 255, 255, .6) inset
color: #34495e
white-space: nowrap
font-weight: 600
font-size: .9em
font-family: Monaco, 'Ubuntu Mono', monospace
line-height: 1em
addBorderRadius(3)
if hexo-config('anchor.click_to_scroll')
h1,
h2,
h3,
h4,
h5,
h6
width: fit-content
a:not(.headerlink)
position: relative
z-index: 10
a.headerlink
position: absolute
top: 0
right: 0
bottom: 0
left: 0
width: 100%
height: 100%
ol,
ul
ol,
ul
padding-left: 20px
li
margin: 4px 0
p
margin: 0 0 8px
> :last-child
margin-bottom: 0 !important
hr
margin: 20px 0
if hexo-config('beautify.enable')
if hexo-config('beautify.field') == 'site'
beautify()
else if hexo-config('beautify.field') == 'post'
&.post-content
beautify()
#post
.tag_share
&:after
display: block
clear: both
content: ''
.post-meta
&__tag-list
display: inline-block
&__tags
display: inline-block
margin: 8px 8px 8px 0
padding: 0 12px
width: fit-content
border: 1px solid $light-blue
border-radius: 12px
color: $light-blue
font-size: .85em
transition: all .2s ease-in-out
&:hover
background: $light-blue
color: var(--white)
.post-share
display: inline-block
float: right
margin: 8px 0 0
width: fit-content
.social-share
font-size: .85em
.social-share-icon
margin: 0 4px
width: w = 1.85em
height: w
font-size: 1.2em
line-height: w
.post-copyright
position: relative
margin: 40px 0 10px
padding: 10px 16px
border: 1px solid var(--light-grey)
transition: box-shadow .3s ease-in-out
addBorderRadius()
&:before
@extend .fontawesomeIcon
position: absolute
top: 2px
right: 12px
color: $theme-color
content: '\f1f9'
font-size: 1.3em
&:hover
box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)
.post-copyright
&-meta
color: $light-blue
font-weight: bold
i
margin-right: 3px
&-info
padding-left: 6px
a
text-decoration: underline
word-break: break-word
&:hover
text-decoration: none
#post-outdate-notice
position: relative
margin: 0 0 20px
padding: .5em 1.2em
background-color: $noticeOutdate-bg
color: $noticeOutdate-color
addBorderRadius(3)
.num
padding: 0 4px
if hexo-config('noticeOutdate.style') == 'flat'
padding: .5em 1em .5em 2.6em
border-left: 5px solid $noticeOutdate-border
&:before
@extend .fontawesomeIcon
position: absolute
top: 50%
left: .9em
color: $noticeOutdate-border
content: '\f071'
transform: translateY(-50%)
.ads-wrap
margin: 40px 0
source/css/_layout/relatedposts.styl
+30 -30
View File
@@ -1,31 +1,31 @@
.relatedPosts
margin-top: 40px
& > .headline
margin-bottom: 5px
font-weight: 700
font-size: 1.43em
& > .relatedPosts-list
& > a
margin: 3px
width: calc(33.333% - 6px)
height: 200px
addBorderRadius()
+maxWidth768()
margin: 2px
width: calc(50% - 4px)
height: 150px
+maxWidth600()
width: calc(100% - 4px)
.info
.info-1
.info-item-2
-webkit-line-clamp: 2
.info-2
.info-item-1
.relatedPosts
margin-top: 40px
& > .headline
margin-bottom: 5px
font-weight: 700
font-size: 1.43em
& > .relatedPosts-list
& > a
margin: 3px
width: calc(33.333% - 6px)
height: 200px
addBorderRadius()
+maxWidth768()
margin: 2px
width: calc(50% - 4px)
height: 150px
+maxWidth600()
width: calc(100% - 4px)
.info
.info-1
.info-item-2
-webkit-line-clamp: 2
.info-2
.info-item-1
-webkit-line-clamp: 3
source/css/_layout/reward.styl
+78 -78
View File
@@ -1,78 +1,78 @@
.post-reward
position: relative
margin-top: 80px
width: 100%
text-align: center
pointer-events: none
& > *
pointer-events: auto
.reward-button
display: inline-block
padding: 4px 24px
background: var(--btn-bg)
color: var(--btn-color)
cursor: pointer
addBorderRadius()
i
margin-right: 5px
&:hover
.reward-button
background: var(--btn-hover-color)
& > .reward-main
display: block
.reward-main
position: absolute
bottom: 40px
left: 0
z-index: 100
display: none
padding: 0 0 15px
width: 100%
addBorderRadius()
.reward-all
display: inline-block
margin: 0
padding: 20px 10px
background: var(--reward-pop)
&:before
position: absolute
bottom: -10px
left: 0
width: 100%
height: 20px
content: ''
&:after
position: absolute
right: 0
bottom: 2px
left: 0
margin: 0 auto
width: 0
height: 0
border-top: 13px solid var(--reward-pop)
border-right: 13px solid transparent
border-left: 13px solid transparent
content: ''
.reward-item
display: inline-block
padding: 0 8px
list-style-type: none
vertical-align: top
img
width: 130px
height: 130px
.post-qr-code-desc
width: 130px
color: $reward-pop-up-color
.post-reward
position: relative
margin-top: 80px
width: 100%
text-align: center
pointer-events: none
& > *
pointer-events: auto
.reward-button
display: inline-block
padding: 4px 24px
background: var(--btn-bg)
color: var(--btn-color)
cursor: pointer
addBorderRadius()
i
margin-right: 5px
&:hover
.reward-button
background: var(--btn-hover-color)
& > .reward-main
display: block
.reward-main
position: absolute
bottom: 40px
left: 0
z-index: 100
display: none
padding: 0 0 15px
width: 100%
addBorderRadius()
.reward-all
display: inline-block
margin: 0
padding: 20px 10px
background: var(--reward-pop)
&:before
position: absolute
bottom: -10px
left: 0
width: 100%
height: 20px
content: ''
&:after
position: absolute
right: 0
bottom: 2px
left: 0
margin: 0 auto
width: 0
height: 0
border-top: 13px solid var(--reward-pop)
border-right: 13px solid transparent
border-left: 13px solid transparent
content: ''
.reward-item
display: inline-block
padding: 0 8px
list-style-type: none
vertical-align: top
img
width: 130px
height: 130px
.post-qr-code-desc
width: 130px
color: $reward-pop-up-color
source/css/_layout/rightside.styl
+72 -72
View File
@@ -1,72 +1,72 @@
#rightside
position: fixed
right: -48px
bottom: $rightside-bottom
z-index: 100
opacity: 0
transition: all .5s
&.rightside-show
opacity: .8
transform: translate(-58px, 0)
#rightside-config-hide
height: 0
opacity: 0
transition: transform .4s
transform: translate(45px, 0)
&.show
height: auto
opacity: 1
transform: translate(0, 0)
&.status
height: auto
opacity: 1
& > div
& > button,
& > a
display: block
margin-bottom: 5px
width: w = 35px
height: w
background-color: var(--btn-bg)
color: var(--btn-color)
text-align: center
font-size: 16px
line-height: w
addBorderRadius(5)
&:hover
background-color: var(--btn-hover-color)
#mobile-toc-button
display: none
+maxWidth900()
display: block
+maxWidth900()
#hide-aside-btn
display: none
if hexo-config('rightside_scroll_percent')
#go-up
.scroll-percent
display: none
&.show-percent
.scroll-percent
display: block
& + i
display: none
&:hover
.scroll-percent
display: none
& + i
display: block
#rightside
position: fixed
right: -48px
bottom: $rightside-bottom
z-index: 100
opacity: 0
transition: all .5s
&.rightside-show
opacity: .8
transform: translate(-58px, 0)
#rightside-config-hide
height: 0
opacity: 0
transition: transform .4s
transform: translate(45px, 0)
&.show
height: auto
opacity: 1
transform: translate(0, 0)
&.status
height: auto
opacity: 1
& > div
& > button,
& > a
display: block
margin-bottom: 5px
width: w = 35px
height: w
background-color: var(--btn-bg)
color: var(--btn-color)
text-align: center
font-size: 16px
line-height: w
addBorderRadius(5)
&:hover
background-color: var(--btn-hover-color)
#mobile-toc-button
display: none
+maxWidth900()
display: block
+maxWidth900()
#hide-aside-btn
display: none
if hexo-config('rightside_scroll_percent')
#go-up
.scroll-percent
display: none
&.show-percent
.scroll-percent
display: block
& + i
display: none
&:hover
.scroll-percent
display: none
& + i
display: block
source/css/_layout/sidebar.styl
+77 -77
View File
@@ -1,78 +1,78 @@
#sidebar
#menu-mask
position: fixed
z-index: 102
display: none
width: 100%
height: 100%
background: alpha($dark-black, .8)
#sidebar-menus
position: fixed
top: 0
right: -($sidebar-width)
z-index: 103
overflow-x: hidden
overflow-y: scroll
padding-left: 5px
width: $sidebar-width
height: 100%
background: var(--sidebar-bg)
transition: all .5s
&.open
transform: translate3d(-100%, 0, 0)
& > .avatar-img
margin: 20px auto
.site-data
padding: 0 10px
hr
margin: 20px auto
.menus_items
margin: 20px
padding: 15px
background: var(--sidebar-menu-bg)
box-shadow: 0 0 1px 1px rgba(7, 17, 27, .05)
addBorderRadius(10)
.site-page
@extend .limit-one-line
position: relative
display: block
margin: 4px 0
padding: 2px 23px 2px 15px
color: var(--font-color)
font-size: 1.15em
cursor: pointer
addBorderRadius(6)
&:hover
background: var(--text-bg-hover)
color: var(--white)
i:first-child
width: 15%
text-align: left
&.group
& > i:last-child
position: absolute
top: .6em
right: 10px
transition: transform .3s
&.hide
& > i:last-child
transform: rotate(90deg)
& + .menus_item_child
display: none
.menus_item_child
margin: 0
padding-left: 25px
#sidebar
#menu-mask
position: fixed
z-index: 102
display: none
width: 100%
height: 100%
background: alpha($dark-black, .8)
#sidebar-menus
position: fixed
top: 0
right: -($sidebar-width)
z-index: 103
overflow-x: hidden
overflow-y: scroll
padding-left: 5px
width: $sidebar-width
height: 100%
background: var(--sidebar-bg)
transition: all .5s
&.open
transform: translate3d(-100%, 0, 0)
& > .avatar-img
margin: 20px auto
.site-data
padding: 0 10px
hr
margin: 20px auto
.menus_items
margin: 20px
padding: 15px
background: var(--sidebar-menu-bg)
box-shadow: 0 0 1px 1px rgba(7, 17, 27, .05)
addBorderRadius(10)
.site-page
@extend .limit-one-line
position: relative
display: block
margin: 4px 0
padding: 2px 23px 2px 15px
color: var(--font-color)
font-size: 1.15em
cursor: pointer
addBorderRadius(6)
&:hover
background: var(--text-bg-hover)
color: var(--white)
i:first-child
width: 15%
text-align: left
&.group
& > i:last-child
position: absolute
top: .6em
right: 10px
transition: transform .3s
&.hide
& > i:last-child
transform: rotate(90deg)
& + .menus_item_child
display: none
.menus_item_child
margin: 0
padding-left: 25px
list-style: none
source/css/_layout/third-party.styl
+186 -186
View File
@@ -1,187 +1,187 @@
#vcomment
font-size: 1.1em
.vbtn
border: none
background: var(--btn-bg)
color: var(--btn-color)
&:hover
background: var(--btn-hover-color)
.vimg
transition: all .3s
&:hover
transform: rotate(360deg)
.vcards .vcard .vcontent.expand
&:before,
&:after
z-index: 22
#waline-wrap
--waline-font-size: 1.1em
--waline-theme-color: $button-bg
--waline-active-color: $button-hover-color
.wl-comment-actions > button:not(last-child)
padding-right: 4px
if hexo-config('valine.bg')
#vcomment
textarea
background: url(hexo-config('valine.bg')) 100% 100% no-repeat
&:focus
background-image: none
if hexo-config('waline.bg')
#waline-wrap
textarea
background: url(hexo-config('waline.bg')) 100% 100% no-repeat
&:focus
background-image: none
.twikoo
.tk-content
p
margin: 3px 0
.fireworks
position: fixed
top: 0
left: 0
z-index: $fireworks-zIndex
pointer-events: none
.medium-zoom-image--opened
z-index: 99999 !important
margin: 0 !important
.medium-zoom-overlay
z-index: 99999 !important
if hexo-config('mermaid.enable')
.mermaid-wrap
margin: 0 0 20px
text-align: center
& > svg
height: 100%
if hexo-config('mermaid.code_write')
pre > code.mermaid
display: none
if hexo-config('chartjs.enable')
.chartjs-container
display: flex
flex-direction: column
justify-content: center
align-items: center
margin: 0 0 20px
text-align: center
gap: 20px
+maxWidth600()
.chartjs-wrap
width: 100% !important
&.chartjs-abreast
flex-direction: row
+maxWidth600()
flex-direction: column
.chartjs-wrap
width: -webkit-fill-available
canvas
display: inline-block !important
.utterances,
.fb-comments iframe
width: 100% !important
#gitalk-container
.gt-meta
margin: 0 0 .8em
padding: 6px 0 16px
if hexo-config('math.use')
.katex-display
overflow: auto hidden
padding: 5px
.katex-show
display: block
.katex
display: none
&.katex-show
display: inline
if hexo-config('math.hide_scrollbar')
.katex-display,
mjx-container
scrollbar-width: none
&::-webkit-scrollbar
display: none
// Mathjax
mjx-container
overflow-x: auto
overflow-y: hidden
padding-bottom: 4px
max-width: 100%
&[display]
display: block !important
min-width: auto !important
&:not([display])
display: inline-grid !important
mjx-assistive-mml
right: 0
bottom: 0
.aplayer
color: $font-black
.container
.aplayer
margin: 0 0 20px
if hexo-config('beautify.enable')
ol,
ul
margin: 0
padding: 0
li
margin: 0
padding: 0 15px
&:before
content: none
.snackbar-container.snackbar-css
addBorderRadius(5)
opacity: .85 !important
.abc-music-sheet
margin: 0 0 20px
opacity: 0
transition: opacity .3s
&.abcjs-container
opacity: 1
+maxWidth768()
.fancybox__toolbar__column.is-middle
#vcomment
font-size: 1.1em
.vbtn
border: none
background: var(--btn-bg)
color: var(--btn-color)
&:hover
background: var(--btn-hover-color)
.vimg
transition: all .3s
&:hover
transform: rotate(360deg)
.vcards .vcard .vcontent.expand
&:before,
&:after
z-index: 22
#waline-wrap
--waline-font-size: 1.1em
--waline-theme-color: $button-bg
--waline-active-color: $button-hover-color
.wl-comment-actions > button:not(last-child)
padding-right: 4px
if hexo-config('valine.bg')
#vcomment
textarea
background: url(hexo-config('valine.bg')) 100% 100% no-repeat
&:focus
background-image: none
if hexo-config('waline.bg')
#waline-wrap
textarea
background: url(hexo-config('waline.bg')) 100% 100% no-repeat
&:focus
background-image: none
.twikoo
.tk-content
p
margin: 3px 0
.fireworks
position: fixed
top: 0
left: 0
z-index: $fireworks-zIndex
pointer-events: none
.medium-zoom-image--opened
z-index: 99999 !important
margin: 0 !important
.medium-zoom-overlay
z-index: 99999 !important
if hexo-config('mermaid.enable')
.mermaid-wrap
margin: 0 0 20px
text-align: center
& > svg
height: 100%
if hexo-config('mermaid.code_write')
pre > code.mermaid
display: none
if hexo-config('chartjs.enable')
.chartjs-container
display: flex
flex-direction: column
justify-content: center
align-items: center
margin: 0 0 20px
text-align: center
gap: 20px
+maxWidth600()
.chartjs-wrap
width: 100% !important
&.chartjs-abreast
flex-direction: row
+maxWidth600()
flex-direction: column
.chartjs-wrap
width: -webkit-fill-available
canvas
display: inline-block !important
.utterances,
.fb-comments iframe
width: 100% !important
#gitalk-container
.gt-meta
margin: 0 0 .8em
padding: 6px 0 16px
if hexo-config('math.use')
.katex-display
overflow: auto hidden
padding: 5px
.katex-show
display: block
.katex
display: none
&.katex-show
display: inline
if hexo-config('math.hide_scrollbar')
.katex-display,
mjx-container
scrollbar-width: none
&::-webkit-scrollbar
display: none
// Mathjax
mjx-container
overflow-x: auto
overflow-y: hidden
padding-bottom: 4px
max-width: 100%
&[display]
display: block !important
min-width: auto !important
&:not([display])
display: inline-grid !important
mjx-assistive-mml
right: 0
bottom: 0
.aplayer
color: $font-black
.container
.aplayer
margin: 0 0 20px
if hexo-config('beautify.enable')
ol,
ul
margin: 0
padding: 0
li
margin: 0
padding: 0 15px
&:before
content: none
.snackbar-container.snackbar-css
addBorderRadius(5)
opacity: .85 !important
.abc-music-sheet
margin: 0 0 20px
opacity: 0
transition: opacity .3s
&.abcjs-container
opacity: 1
+maxWidth768()
.fancybox__toolbar__column.is-middle
display: none
source/css/_mode/darkmode.styl
+159 -159
View File
@@ -1,160 +1,160 @@
if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
[data-theme='dark']
--global-bg: darken(#121212, 2)
--font-color: alpha(#FFFFFF, .7)
--hr-border: alpha(#FFFFFF, .4)
--hr-before-color: alpha(#FFFFFF, .7)
--search-bg: #121212
--search-input-color: alpha(#FFFFFF, .7)
--search-a-color: alpha(#FFFFFF, .7)
--preloader-bg: darken(#121212, 2)
--preloader-color: alpha(#FFFFFF, .7)
--tab-border-color: #2c2c2c
--tab-botton-bg: #2c2c2c
--tab-botton-color: alpha(#FFFFFF, .7)
--tab-button-hover-bg: lighten(#121212, 15)
--tab-button-active-bg: #121212
--card-bg: #121212
--sidebar-bg: #121212
--sidebar-menu-bg: lighten(#121212, 5)
--btn-hover-color: lighten(#121212, 40)
--btn-color: alpha(#FFFFFF, .7)
--btn-bg: lighten(#121212, 5)
--text-bg-hover: lighten(#121212, 15)
--light-grey: alpha(#FFFFFF, .7)
--dark-grey: alpha(#FFFFFF, .2)
--white: alpha(#FFFFFF, .9)
--text-highlight-color: alpha(#FFFFFF, .9)
--blockquote-color: alpha(#FFFFFF, .7)
--blockquote-bg: lighten(#121212, 10)
--reward-pop: lighten(#121212, 10)
--toc-link-color: alpha(#FFFFFF, .6)
--scrollbar-color: lighten(#121212, 25)
--timeline-bg: lighten(#121212, 5)
--zoom-bg: #121212
--mark-bg: alpha($dark-black, .6)
#web_bg:before
position: absolute
width: 100%
height: 100%
background-color: alpha($dark-black, .7)
content: ''
.container
code
background: #2c2c2c
pre > code
background: lighten(#121212, 2)
figure.highlight
box-shadow: none
.note
code
background: $code-background
.aplayer
filter: brightness(.8)
kbd
border-color: #696969
background-color: #525252
color: #e2f1ff
// 頭部
#page-header
&.nav-fixed > #nav,
&.not-top-img > #nav
background: alpha(#121212, .8)
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
#post-comment
.comment-switch
if hexo-config('comments.text')
background: #2c2c2c !important
#switch-btn
filter: brightness(.8)
// note
if hexo-config('note.style') == 'modern' || hexo-config('note.style') == 'flat'
.note
filter: brightness(.8)
// hide-tags
.hide-button,
.btn-beautify,
.hl-label,
#post-outdate-notice,
.error-img,
.container iframe,
.gist,
.ads-wrap
filter: brightness(.8)
img
if hexo-config('lazyload.enable') && hexo-config('lazyload.blur') && !hexo-config('lazyload.placeholder')
filter: blur(0) brightness(.8)
else
filter: brightness(.8)
#aside-content .aside-list > .aside-list-item:not(:last-child)
border-bottom: 1px dashed alpha(#FFFFFF, .1)
// Gitalk
#gitalk-container
filter: brightness(.8)
svg
fill: alpha(#FFFFFF, .9) !important
// Disqusjs 反代模式下的適配
#disqusjs
#dsqjs
&:hover,
&:focus,
.dsqjs-tab-active,
.dsqjs-no-comment
color: alpha(#FFFFFF, .7)
.dsqjs-order-label
background-color: lighten(#121212, 5)
.dsqjs-post-body
color: alpha(#FFFFFF, .7)
code,
pre
background: #2c2c2c
blockquote
color: alpha(#FFFFFF, .7)
#artitalk_main #lazy
background: #121212
#operare_artitalk .c2
background: #121212
#card-toc
+maxWidth900()
background: lighten(#121212, 5)
// artalk
.artalk.atk-dark-mode,
.atk-layer-wrap.atk-dark-mode
--at-color-font: alpha(#FFFFFF, .7)
--at-color-meta: alpha(#FFFFFF, .7)
--at-color-grey: alpha(#FFFFFF, .7)
.atk-send-btn,
.atk-badge
color: alpha(#FFFFFF, .7) !important
// waline
#waline-wrap
--waline-color: alpha(#FFFFFF, .7)
--waline-dark-grey: alpha(#FFFFFF, .7)
if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
[data-theme='dark']
--global-bg: darken(#121212, 2)
--font-color: alpha(#FFFFFF, .7)
--hr-border: alpha(#FFFFFF, .4)
--hr-before-color: alpha(#FFFFFF, .7)
--search-bg: #121212
--search-input-color: alpha(#FFFFFF, .7)
--search-a-color: alpha(#FFFFFF, .7)
--preloader-bg: darken(#121212, 2)
--preloader-color: alpha(#FFFFFF, .7)
--tab-border-color: #2c2c2c
--tab-botton-bg: #2c2c2c
--tab-botton-color: alpha(#FFFFFF, .7)
--tab-button-hover-bg: lighten(#121212, 15)
--tab-button-active-bg: #121212
--card-bg: #121212
--sidebar-bg: #121212
--sidebar-menu-bg: lighten(#121212, 5)
--btn-hover-color: lighten(#121212, 40)
--btn-color: alpha(#FFFFFF, .7)
--btn-bg: lighten(#121212, 5)
--text-bg-hover: lighten(#121212, 15)
--light-grey: alpha(#FFFFFF, .7)
--dark-grey: alpha(#FFFFFF, .2)
--white: alpha(#FFFFFF, .9)
--text-highlight-color: alpha(#FFFFFF, .9)
--blockquote-color: alpha(#FFFFFF, .7)
--blockquote-bg: lighten(#121212, 10)
--reward-pop: lighten(#121212, 10)
--toc-link-color: alpha(#FFFFFF, .6)
--scrollbar-color: lighten(#121212, 25)
--timeline-bg: lighten(#121212, 5)
--zoom-bg: #121212
--mark-bg: alpha($dark-black, .6)
#web_bg:before
position: absolute
width: 100%
height: 100%
background-color: alpha($dark-black, .7)
content: ''
.container
code
background: #2c2c2c
pre > code
background: lighten(#121212, 2)
figure.highlight
box-shadow: none
.note
code
background: $code-background
.aplayer
filter: brightness(.8)
kbd
border-color: #696969
background-color: #525252
color: #e2f1ff
// 頭部
#page-header
&.nav-fixed > #nav,
&.not-top-img > #nav
background: alpha(#121212, .8)
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
#post-comment
.comment-switch
if hexo-config('comments.text')
background: #2c2c2c !important
#switch-btn
filter: brightness(.8)
// note
if hexo-config('note.style') == 'modern' || hexo-config('note.style') == 'flat'
.note
filter: brightness(.8)
// hide-tags
.hide-button,
.btn-beautify,
.hl-label,
#post-outdate-notice,
.error-img,
.container iframe,
.gist,
.ads-wrap
filter: brightness(.8)
img
if hexo-config('lazyload.enable') && hexo-config('lazyload.blur') && !hexo-config('lazyload.placeholder')
filter: blur(0) brightness(.8)
else
filter: brightness(.8)
#aside-content .aside-list > .aside-list-item:not(:last-child)
border-bottom: 1px dashed alpha(#FFFFFF, .1)
// Gitalk
#gitalk-container
filter: brightness(.8)
svg
fill: alpha(#FFFFFF, .9) !important
// Disqusjs 反代模式下的適配
#disqusjs
#dsqjs
&:hover,
&:focus,
.dsqjs-tab-active,
.dsqjs-no-comment
color: alpha(#FFFFFF, .7)
.dsqjs-order-label
background-color: lighten(#121212, 5)
.dsqjs-post-body
color: alpha(#FFFFFF, .7)
code,
pre
background: #2c2c2c
blockquote
color: alpha(#FFFFFF, .7)
#artitalk_main #lazy
background: #121212
#operare_artitalk .c2
background: #121212
#card-toc
+maxWidth900()
background: lighten(#121212, 5)
// artalk
.artalk.atk-dark-mode,
.atk-layer-wrap.atk-dark-mode
--at-color-font: alpha(#FFFFFF, .7)
--at-color-meta: alpha(#FFFFFF, .7)
--at-color-grey: alpha(#FFFFFF, .7)
.atk-send-btn,
.atk-badge
color: alpha(#FFFFFF, .7) !important
// waline
#waline-wrap
--waline-color: alpha(#FFFFFF, .7)
--waline-dark-grey: alpha(#FFFFFF, .7)
--waline-info-color: alpha(#FFFFFF, .5)
source/css/_mode/readmode.styl
+185 -185
View File
@@ -1,185 +1,185 @@
if hexo-config('readmode')
.read-mode
--font-color: #4c4948
--readmode-light-color: #fff
--white: #4c4948
--light-grey: #4c4948
--gray: #d6dbdf
--hr-border: #d6dbdf
--hr-before-color: darken(#d6dbdf, 10)
--highlight-bg: #f7f7f7
--exit-btn-bg: #C0C0C0
--exit-btn-color: #fff
--exit-btn-hover: darken(#C0C0C0, 20)
--pseudo-hover: none
[data-theme='dark']
.read-mode
--font-color: rgba(255, 255, 255, .7)
--readmode-light-color: #0d0d0d
--white: rgba(255, 255, 255, .9)
--light-grey: rgba(255, 255, 255, .7)
--gray: rgba(255, 255, 255, .7)
--hr-border: rgba(255, 255, 255, .5)
--hr-before-color: rgba(255, 255, 255, .7)
--highlight-bg: #171717
--exit-btn-bg: #1f1f1f
--exit-btn-color: rgba(255, 255, 255, .9)
--exit-btn-hover: lighten(#1f1f1f, 20)
.read-mode
background: var(--readmode-light-color)
.exit-readmode
position: fixed
top: 30px
right: 30px
z-index: 100
width: 40px
height: 40px
background: var(--exit-btn-bg)
color: var(--exit-btn-color)
font-size: 16px
transition: background .3s
addBorderRadius(8)
+maxWidth768()
top: initial
bottom: 30px
&:hover
background: var(--exit-btn-hover)
#aside-content
display: none
#page-header.post-bg
background: none !important
&:before
opacity: 0
& > #post-info
text-align: center
#post
margin: 0 auto
background: transparent
box-shadow: none
&:hover
box-shadow: none
& > canvas
display: none !important
.highlight-tools,
#footer,
#post > *:not(#post-info):not(.post-content),
#nav,
#post-outdate-notice,
#web_bg,
#rightside,
.not-top-img
display: none !important
.container
a
color: #99a9bf
pre,
.highlight:not(.js-file-line-container)
background: var(--highlight-bg) !important
*
color: var(--font-color) !important
figure.highlight
border-radius: 0 !important
box-shadow: none !important
& > :not(.highlight-tools)
display: block !important
.line:before
color: var(--font-color) !important
.hljs
background: var(--highlight-bg) !important
h1,
h2,
h3,
h4,
h5,
h6
padding: 0
&:before
content: ''
&:hover
padding: 0
ul,
li,
ol
&:hover:before
transform: none !important
ol,
li
&:before
background: transparent !important
color: var(--font-color) !important
ul
>li
&:before
border-color: var(--gray) !important
.tabs
border: 2px solid var(--tab-border-color)
> .nav-tabs
background: transparent
> .tab
border-top: none !important
> .tab-contents .tab-item-content.active
animation: none
code
color: var(--font-color)
blockquote
border-color: var(--gray)
background-color: var(--readmode-light-color)
kbd
border: 1px solid var(--gray)
background-color: transparent
box-shadow: none
color: var(--font-color)
.hide-toggle
border: 1px solid var(--gray) !important
.hide-button,
.btn-beautify,
.hl-label
border: 1px solid var(--gray) !important
background: var(--readmode-light-color) !important
color: var(--font-color) !important
.note
border: 2px solid var(--gray)
border-left-color: var(--gray) !important
filter: none
background-color: var(--readmode-light-color) !important
color: var(--font-color)
&:before,
.note-icon
color: var(--font-color)
if hexo-config('readmode')
.read-mode
--font-color: #4c4948
--readmode-light-color: #fff
--white: #4c4948
--light-grey: #4c4948
--gray: #d6dbdf
--hr-border: #d6dbdf
--hr-before-color: darken(#d6dbdf, 10)
--highlight-bg: #f7f7f7
--exit-btn-bg: #C0C0C0
--exit-btn-color: #fff
--exit-btn-hover: darken(#C0C0C0, 20)
--pseudo-hover: none
[data-theme='dark']
.read-mode
--font-color: rgba(255, 255, 255, .7)
--readmode-light-color: #0d0d0d
--white: rgba(255, 255, 255, .9)
--light-grey: rgba(255, 255, 255, .7)
--gray: rgba(255, 255, 255, .7)
--hr-border: rgba(255, 255, 255, .5)
--hr-before-color: rgba(255, 255, 255, .7)
--highlight-bg: #171717
--exit-btn-bg: #1f1f1f
--exit-btn-color: rgba(255, 255, 255, .9)
--exit-btn-hover: lighten(#1f1f1f, 20)
.read-mode
background: var(--readmode-light-color)
.exit-readmode
position: fixed
top: 30px
right: 30px
z-index: 100
width: 40px
height: 40px
background: var(--exit-btn-bg)
color: var(--exit-btn-color)
font-size: 16px
transition: background .3s
addBorderRadius(8)
+maxWidth768()
top: initial
bottom: 30px
&:hover
background: var(--exit-btn-hover)
#aside-content
display: none
#page-header.post-bg
background: none !important
&:before
opacity: 0
& > #post-info
text-align: center
#post
margin: 0 auto
background: transparent
box-shadow: none
&:hover
box-shadow: none
& > canvas
display: none !important
.highlight-tools,
#footer,
#post > *:not(#post-info):not(.post-content),
#nav,
#post-outdate-notice,
#web_bg,
#rightside,
.not-top-img
display: none !important
.container
a
color: #99a9bf
pre,
.highlight:not(.js-file-line-container)
background: var(--highlight-bg) !important
*
color: var(--font-color) !important
figure.highlight
border-radius: 0 !important
box-shadow: none !important
& > :not(.highlight-tools)
display: block !important
.line:before
color: var(--font-color) !important
.hljs
background: var(--highlight-bg) !important
h1,
h2,
h3,
h4,
h5,
h6
padding: 0
&:before
content: ''
&:hover
padding: 0
ul,
li,
ol
&:hover:before
transform: none !important
ol,
li
&:before
background: transparent !important
color: var(--font-color) !important
ul
>li
&:before
border-color: var(--gray) !important
.tabs
border: 2px solid var(--tab-border-color)
> .nav-tabs
background: transparent
> .tab
border-top: none !important
> .tab-contents .tab-item-content.active
animation: none
code
color: var(--font-color)
blockquote
border-color: var(--gray)
background-color: var(--readmode-light-color)
kbd
border: 1px solid var(--gray)
background-color: transparent
box-shadow: none
color: var(--font-color)
.hide-toggle
border: 1px solid var(--gray) !important
.hide-button,
.btn-beautify,
.hl-label
border: 1px solid var(--gray) !important
background: var(--readmode-light-color) !important
color: var(--font-color) !important
.note
border: 2px solid var(--gray)
border-left-color: var(--gray) !important
filter: none
background-color: var(--readmode-light-color) !important
color: var(--font-color)
&:before,
.note-icon
color: var(--font-color)
source/css/_page/404.styl
+65 -65
View File
@@ -1,66 +1,66 @@
if hexo-config('error_404.enable')
.type-404
.error-content
@extend .cardHover
overflow: hidden
margin: 0 20px
height: 360px
+maxWidth768()
margin: 0
height: 500px
.error-img
display: inline-block
overflow: hidden
width: 50%
height: 100%
+maxWidth768()
width: 100%
height: 45%
img
@extend .imgHover
background-color: $theme-color
.error-info
display: inline-flex
flex-direction: column
justify-content: center
align-content: center
width: 50%
height: 100%
vertical-align: top
text-align: center
if $site-name-font
font-family: $site-name-font
+maxWidth768()
width: 100%
height: 55%
.error_title
margin-top: -.6em
font-size: 9em
+maxWidth768()
font-size: 8em
.error_subtitle
@extend .limit-more-line
margin-top: -3em
word-break: break-word
font-size: 1.6em
-webkit-line-clamp: 2
.nc
margin-top: 5%
padding: 0 20px
#footer
display: none
& + #rightside
if hexo-config('error_404.enable')
.type-404
.error-content
@extend .cardHover
overflow: hidden
margin: 0 20px
height: 360px
+maxWidth768()
margin: 0
height: 500px
.error-img
display: inline-block
overflow: hidden
width: 50%
height: 100%
+maxWidth768()
width: 100%
height: 45%
img
@extend .imgHover
background-color: $theme-color
.error-info
display: inline-flex
flex-direction: column
justify-content: center
align-content: center
width: 50%
height: 100%
vertical-align: top
text-align: center
if $site-name-font
font-family: $site-name-font
+maxWidth768()
width: 100%
height: 55%
.error_title
margin-top: -.6em
font-size: 9em
+maxWidth768()
font-size: 8em
.error_subtitle
@extend .limit-more-line
margin-top: -3em
word-break: break-word
font-size: 1.6em
-webkit-line-clamp: 2
.nc
margin-top: 5%
padding: 0 20px
#footer
display: none
& + #rightside
display: none
source/css/_page/archives.styl
+115 -115
View File
@@ -1,115 +1,115 @@
.article-sort
margin-left: 10px
padding-left: 20px
border-left: 2px solid lighten($light-blue, 20)
&-title
position: relative
margin-left: 10px
padding-bottom: 20px
padding-left: 20px
font-size: 1.72em
&:hover
&:before
border-color: var(--pseudo-hover)
&:before
position: absolute
top: calc(((100% - 36px) / 2))
left: -9px
z-index: 1
width: w = 10px
height: h = w
border: .5 * w solid $light-blue
border-radius: w
background: var(--card-bg)
content: ''
line-height: h
transition: all .2s ease-in-out
&:after
position: absolute
bottom: 0
left: 0
z-index: 0
width: 2px
height: 1.5em
background: lighten($light-blue, 20)
content: ''
&-item
position: relative
display: flex
align-items: center
margin: 0 0 20px 10px
transition: all .2s ease-in-out
&:hover
&:before
border-color: var(--pseudo-hover)
&:before
$w = 6px
position: absolute
left: calc(-20px - 17px)
width: w = $w
height: h = w
border: .5 * w solid $light-blue
border-radius: w
background: var(--card-bg)
content: ''
transition: all .2s ease-in-out
&.no-article-cover
height: 80px
.article-sort-item-info
padding: 0
&.year
font-size: 1.43em
margin-bottom: 10px
&:hover
&:before
border-color: $light-blue
&:before
border-color: var(--pseudo-hover)
&-time
color: var(--card-meta)
font-size: .85em
time
padding-left: 6px
cursor: default
&-title
@extend .limit-more-line
color: var(--font-color)
font-size: 1.05em
transition: all .3s
-webkit-line-clamp: 2
&:hover
color: $text-hover
transform: translateX(10px)
&-img
overflow: hidden
width: 100px
height: 70px
addBorderRadius()
+maxWidth768()
width: 70px
height: 70px
:first-child
@extend .imgHover
&-info
flex: 1
padding: 0 16px
.article-sort
margin-left: 10px
padding-left: 20px
border-left: 2px solid lighten($light-blue, 20)
&-title
position: relative
margin-left: 10px
padding-bottom: 20px
padding-left: 20px
font-size: 1.72em
&:hover
&:before
border-color: var(--pseudo-hover)
&:before
position: absolute
top: calc(((100% - 36px) / 2))
left: -9px
z-index: 1
width: w = 10px
height: h = w
border: .5 * w solid $light-blue
border-radius: w
background: var(--card-bg)
content: ''
line-height: h
transition: all .2s ease-in-out
&:after
position: absolute
bottom: 0
left: 0
z-index: 0
width: 2px
height: 1.5em
background: lighten($light-blue, 20)
content: ''
&-item
position: relative
display: flex
align-items: center
margin: 0 0 20px 10px
transition: all .2s ease-in-out
&:hover
&:before
border-color: var(--pseudo-hover)
&:before
$w = 6px
position: absolute
left: calc(-20px - 17px)
width: w = $w
height: h = w
border: .5 * w solid $light-blue
border-radius: w
background: var(--card-bg)
content: ''
transition: all .2s ease-in-out
&.no-article-cover
height: 80px
.article-sort-item-info
padding: 0
&.year
font-size: 1.43em
margin-bottom: 10px
&:hover
&:before
border-color: $light-blue
&:before
border-color: var(--pseudo-hover)
&-time
color: var(--card-meta)
font-size: .85em
time
padding-left: 6px
cursor: default
&-title
@extend .limit-more-line
color: var(--font-color)
font-size: 1.05em
transition: all .3s
-webkit-line-clamp: 2
&:hover
color: $text-hover
transform: translateX(10px)
&-img
overflow: hidden
width: 100px
height: 70px
addBorderRadius()
+maxWidth768()
width: 70px
height: 70px
:first-child
@extend .imgHover
&-info
flex: 1
padding: 0 16px
source/css/_page/categories.styl
+37 -37
View File
@@ -1,37 +1,37 @@
.category-lists
.category-title
font-size: 2.57em
+maxWidth768()
font-size: 2em
.category-list
margin-bottom: 0
a
color: var(--font-color)
&:hover
color: $text-hover
.category-list-count
margin-left: 8px
color: var(--card-meta)
&:before
content: '('
&:after
content: ')'
ul
padding: 0 0 0 20px
@extend .list-beauty
ul
padding-left: 4px
li
position: relative
margin: 6px 0
padding: .12em .4em .12em 1.4em
.category-lists
.category-title
font-size: 2.57em
+maxWidth768()
font-size: 2em
.category-list
margin-bottom: 0
a
color: var(--font-color)
&:hover
color: $text-hover
.category-list-count
margin-left: 8px
color: var(--card-meta)
&:before
content: '('
&:after
content: ')'
ul
padding: 0 0 0 20px
@extend .list-beauty
ul
padding-left: 4px
li
position: relative
margin: 6px 0
padding: .12em .4em .12em 1.4em
source/css/_page/common.styl
+60 -60
View File
@@ -1,60 +1,60 @@
#body-wrap
display: flex
flex-direction: column
min-height: 100vh
.layout
display: flex
flex: 1 auto
margin: 0 auto
padding: 40px 15px
max-width: 1200px
width: 100%
+maxWidth900()
flex-direction: column
+maxWidth768()
padding: 20px 5px
+minWidth2000()
max-width: 70%
& > div:first-child:not(.nc)
@extend .cardHover
align-self: flex-start
padding: 50px 40px
+maxWidth768()
padding: 36px 14px
& > div:first-child
width: 74%
transition: all .3s
+maxWidth900()
width: 100% !important
if hexo-config('aside.position') == 'left'
+minWidth900()
order: 2
// 隱藏aside
&.hide-aside
max-width: 1000px
+minWidth2000()
max-width: 1300px
& > div
width: 100% !important
// for apple device
.apple
#page-header.full_page
background-attachment: scroll !important
.recent-post-item,
.avatar-img,
.flink-item-icon
transform: translateZ(0)
#body-wrap
display: flex
flex-direction: column
min-height: 100vh
.layout
display: flex
flex: 1 auto
margin: 0 auto
padding: 40px 15px
max-width: 1200px
width: 100%
+maxWidth900()
flex-direction: column
+maxWidth768()
padding: 20px 5px
+minWidth2000()
max-width: 70%
& > div:first-child:not(.nc)
@extend .cardHover
align-self: flex-start
padding: 50px 40px
+maxWidth768()
padding: 36px 14px
& > div:first-child
width: 74%
transition: all .3s
+maxWidth900()
width: 100% !important
if hexo-config('aside.position') == 'left'
+minWidth900()
order: 2
// 隱藏aside
&.hide-aside
max-width: 1000px
+minWidth2000()
max-width: 1300px
& > div
width: 100% !important
// for apple device
.apple
#page-header.full_page
background-attachment: scroll !important
.recent-post-item,
.avatar-img,
.flink-item-icon
transform: translateZ(0)
source/css/_page/flink.styl
+86 -86
View File
@@ -1,87 +1,87 @@
.container
.flink
margin-bottom: 20px
.flink-list
overflow: auto
padding: 10px 10px 0
text-align: center
& > .flink-list-item
position: relative
float: left
overflow: hidden
margin: 15px 7px
width: calc(100% / 3 - 15px)
height: 90px
line-height: 17px
-webkit-transform: translateZ(0)
addBorderRadius(8)
+maxWidth1024()
width: calc(50% - 15px) !important
+maxWidth600()
width: calc(100% - 15px) !important
&:hover
.flink-item-icon
margin-left: -10px
width: 0
&:before
position: absolute
top: 0
right: 0
bottom: 0
left: 0
z-index: -1
background: var(--text-bg-hover)
content: ''
transition: transform .3s ease-out
transform: scale(0)
&:hover:before,
&:focus:before,
&:active:before
transform: scale(1)
a
color: var(--font-color)
text-decoration: none
.flink-item-icon
float: left
overflow: hidden
margin: 15px 10px
width: 60px
height: 60px
border-radius: 7px
transition: width .3s ease-out
img
width: 100%
height: 100%
transition: filter 375ms ease-in .2s, transform .3s
object-fit: cover
.img-alt
display: none
.flink-item-name
@extend .limit-one-line
padding: 16px 10px 0 0
height: 40px
font-weight: bold
font-size: 1.43em
.flink-item-desc
@extend .limit-one-line
padding: 16px 10px 16px 0
height: 50px
font-size: .93em
.flink-name
margin-bottom: 5px
font-weight: bold
.container
.flink
margin-bottom: 20px
.flink-list
overflow: auto
padding: 10px 10px 0
text-align: center
& > .flink-list-item
position: relative
float: left
overflow: hidden
margin: 15px 7px
width: calc(100% / 3 - 15px)
height: 90px
line-height: 17px
-webkit-transform: translateZ(0)
addBorderRadius(8)
+maxWidth1024()
width: calc(50% - 15px) !important
+maxWidth600()
width: calc(100% - 15px) !important
&:hover
.flink-item-icon
margin-left: -10px
width: 0
&:before
position: absolute
top: 0
right: 0
bottom: 0
left: 0
z-index: -1
background: var(--text-bg-hover)
content: ''
transition: transform .3s ease-out
transform: scale(0)
&:hover:before,
&:focus:before,
&:active:before
transform: scale(1)
a
color: var(--font-color)
text-decoration: none
.flink-item-icon
float: left
overflow: hidden
margin: 15px 10px
width: 60px
height: 60px
border-radius: 7px
transition: width .3s ease-out
img
width: 100%
height: 100%
transition: filter 375ms ease-in .2s, transform .3s
object-fit: cover
.img-alt
display: none
.flink-item-name
@extend .limit-one-line
padding: 16px 10px 0 0
height: 40px
font-weight: bold
font-size: 1.43em
.flink-item-desc
@extend .limit-one-line
padding: 16px 10px 16px 0
height: 50px
font-size: .93em
.flink-name
margin-bottom: 5px
font-weight: bold
font-size: 1.5em
source/css/_page/homepage.styl
+173 -173
View File
@@ -1,174 +1,174 @@
$indexLayout = hexo-config('index_layout') || 1
$indexEnable = hexo-config('cover.index_enable')
#recent-posts
.recent-post-item
@extend .cardHover
position: relative
overflow: hidden
margin-bottom: 20px
if $indexLayout == 6 || ($indexLayout == 7)
display: inline-block
width: calc(100% / 2 - 8px)
vertical-align: top
+maxWidth768()
width: 100%
+minWidth2000()
width: calc(100% / 3 - 8px)
if $indexLayout == 1 || ($indexLayout == 2 || ($indexLayout == 3))
display: flex
flex-direction: row
align-items: center
height: 16.8em
+maxWidth768()
flex-direction: column
height: auto
+minWidth2000()
height: 18.8em
&:hover
.post-bg
transform: scale(1.1)
&.ads-wrap
display: block !important
height: auto !important
.post_cover
overflow: hidden
if ($indexLayout != 5 && ($indexLayout != 7))
+maxWidth768()
width: 100%
height: 230px
if $indexLayout == 1 || ($indexLayout == 2 || ($indexLayout == 3))
width: 42%
height: 100%
&.right
order: 1
+maxWidth768()
order: 0
if $indexLayout == 4 || ($indexLayout == 5 || ($indexLayout == 6 || ($indexLayout == 7)))
width: 100%
if ($indexLayout == 5 || ($indexLayout == 7))
height: 17em
else
height: 230px
if ($indexLayout == 5 || ($indexLayout == 7)) && $indexEnable
&:before
position: absolute
z-index: 1
width: 100%
height: 100%
background-color: rgba(18, 18, 18, .4)
content: ''
backdrop-filter: blur(3px)
.post-bg
z-index: -4
@extend .imgHover
& >.recent-post-info
+maxWidth768()
padding: 20px 20px 30px
width: 100%
if $indexLayout == 1 || ($indexLayout == 2 || ($indexLayout == 3))
padding: 0 40px
width: 58%
if $indexLayout == 4 || ($indexLayout == 5 || ($indexLayout == 6 || ($indexLayout == 7)))
padding: 30px 30px 25px
if ($indexLayout == 5 || ($indexLayout == 7)) && $indexEnable
&:not(.no-cover)
position: absolute
top: 50%
z-index: 2
width: 100%
color: var(--text-highlight-color)
transform: translateY(-50%)
--text-highlight-color: rgba(255, 255, 255, 1)
--card-meta: rgba(255, 255, 255, .7)
&.no-cover
+maxWidth768()
padding: 30px 20px
if $indexLayout == 1 || ($indexLayout == 2 || ($indexLayout == 3))
width: 100%
if $indexLayout == 4 || ($indexLayout == 5 || ($indexLayout == 6 || ($indexLayout == 7)))
padding: 35px 30px
& > .article-title
@extend .limit-more-line
color: var(--text-highlight-color)
font-size: 1.55em
line-height: 1.4
transition: all .2s ease-in-out
-webkit-line-clamp: 2
.sticky
margin-right: 10px
color: $sticky-color
transform: rotate(45deg)
+maxWidth768()
font-size: 1.43em
&:hover
color: $text-hover
& > .article-meta-wrap
margin: 6px 0
color: var(--card-meta)
font-size: .9em
& > .post-meta-date
cursor: default
i
margin: 0 4px 0 0
.fa-spinner
margin: 0
.article-meta-label
if hexo-config('post_meta.page.label')
padding-right: 4px
else
display: none
.article-meta-separator
margin: 0 6px
.article-meta-link
margin: 0 4px
if hexo-config('post_meta.page.date_format') == 'relative'
time
display: none
a
color: var(--card-meta)
&:hover
color: $text-hover
text-decoration: underline
& > .content
@extend .limit-more-line
$indexLayout = hexo-config('index_layout') || 1
$indexEnable = hexo-config('cover.index_enable')
#recent-posts
.recent-post-item
@extend .cardHover
position: relative
overflow: hidden
margin-bottom: 20px
if $indexLayout == 6 || ($indexLayout == 7)
display: inline-block
width: calc(100% / 2 - 8px)
vertical-align: top
+maxWidth768()
width: 100%
+minWidth2000()
width: calc(100% / 3 - 8px)
if $indexLayout == 1 || ($indexLayout == 2 || ($indexLayout == 3))
display: flex
flex-direction: row
align-items: center
height: 16.8em
+maxWidth768()
flex-direction: column
height: auto
+minWidth2000()
height: 18.8em
&:hover
.post-bg
transform: scale(1.1)
&.ads-wrap
display: block !important
height: auto !important
.post_cover
overflow: hidden
if ($indexLayout != 5 && ($indexLayout != 7))
+maxWidth768()
width: 100%
height: 230px
if $indexLayout == 1 || ($indexLayout == 2 || ($indexLayout == 3))
width: 42%
height: 100%
&.right
order: 1
+maxWidth768()
order: 0
if $indexLayout == 4 || ($indexLayout == 5 || ($indexLayout == 6 || ($indexLayout == 7)))
width: 100%
if ($indexLayout == 5 || ($indexLayout == 7))
height: 17em
else
height: 230px
if ($indexLayout == 5 || ($indexLayout == 7)) && $indexEnable
&:before
position: absolute
z-index: 1
width: 100%
height: 100%
background-color: rgba(18, 18, 18, .4)
content: ''
backdrop-filter: blur(3px)
.post-bg
z-index: -4
@extend .imgHover
& >.recent-post-info
+maxWidth768()
padding: 20px 20px 30px
width: 100%
if $indexLayout == 1 || ($indexLayout == 2 || ($indexLayout == 3))
padding: 0 40px
width: 58%
if $indexLayout == 4 || ($indexLayout == 5 || ($indexLayout == 6 || ($indexLayout == 7)))
padding: 30px 30px 25px
if ($indexLayout == 5 || ($indexLayout == 7)) && $indexEnable
&:not(.no-cover)
position: absolute
top: 50%
z-index: 2
width: 100%
color: var(--text-highlight-color)
transform: translateY(-50%)
--text-highlight-color: rgba(255, 255, 255, 1)
--card-meta: rgba(255, 255, 255, .7)
&.no-cover
+maxWidth768()
padding: 30px 20px
if $indexLayout == 1 || ($indexLayout == 2 || ($indexLayout == 3))
width: 100%
if $indexLayout == 4 || ($indexLayout == 5 || ($indexLayout == 6 || ($indexLayout == 7)))
padding: 35px 30px
& > .article-title
@extend .limit-more-line
color: var(--text-highlight-color)
font-size: 1.55em
line-height: 1.4
transition: all .2s ease-in-out
-webkit-line-clamp: 2
.sticky
margin-right: 10px
color: $sticky-color
transform: rotate(45deg)
+maxWidth768()
font-size: 1.43em
&:hover
color: $text-hover
& > .article-meta-wrap
margin: 6px 0
color: var(--card-meta)
font-size: .9em
& > .post-meta-date
cursor: default
i
margin: 0 4px 0 0
.fa-spinner
margin: 0
.article-meta-label
if hexo-config('post_meta.page.label')
padding-right: 4px
else
display: none
.article-meta-separator
margin: 0 6px
.article-meta-link
margin: 0 4px
if hexo-config('post_meta.page.date_format') == 'relative'
time
display: none
a
color: var(--card-meta)
&:hover
color: $text-hover
text-decoration: underline
& > .content
@extend .limit-more-line
-webkit-line-clamp: 2
source/css/_page/shuoshuo.styl
+78 -78
View File
@@ -1,78 +1,78 @@
#article-container
.shuoshuo-item
@extend .cardHover
margin-bottom: 20px
padding: 35px 30px 30px
+maxWidth768()
padding: 25px 20px 20px
.shuoshuo-item-header
display: flex
align-items: center
cursor: default
.shuoshuo-avatar
overflow: hidden
width: 40px
height: 40px
border-radius: 40px
img
margin: 0
width: 100%
height: 100%
.shuoshuo-info
margin-left: 10px
line-height: 1.5
.shuoshuo-date
color: #858585
font-size: .8em
.shuoshuo-content
padding: 15px 0 10px
& > *:last-child
margin-bottom: 0
.shuoshuo-footer
display: flex
align-items: center
&.flex-between
justify-content: space-between
&.flex-end
justify-content: flex-end
.shuoshuo-tag
display: inline-block
margin-right: 8px
padding: 0 8px
width: fit-content
border: 1px solid $light-blue
border-radius: 12px
color: $light-blue
font-size: .85em
cursor: default
transition: all .2s ease-in-out
&:hover
background: $light-blue
color: var(--white)
.shuoshuo-comment-btn
padding: 2px
color: #90a4ae
cursor: pointer
&:hover
color: $light-blue
.shuoshuo-comment
padding-top: 10px
&.no-comment
display: none
#article-container
.shuoshuo-item
@extend .cardHover
margin-bottom: 20px
padding: 35px 30px 30px
+maxWidth768()
padding: 25px 20px 20px
.shuoshuo-item-header
display: flex
align-items: center
cursor: default
.shuoshuo-avatar
overflow: hidden
width: 40px
height: 40px
border-radius: 40px
img
margin: 0
width: 100%
height: 100%
.shuoshuo-info
margin-left: 10px
line-height: 1.5
.shuoshuo-date
color: #858585
font-size: .8em
.shuoshuo-content
padding: 15px 0 10px
& > *:last-child
margin-bottom: 0
.shuoshuo-footer
display: flex
align-items: center
&.flex-between
justify-content: space-between
&.flex-end
justify-content: flex-end
.shuoshuo-tag
display: inline-block
margin-right: 8px
padding: 0 8px
width: fit-content
border: 1px solid $light-blue
border-radius: 12px
color: $light-blue
font-size: .85em
cursor: default
transition: all .2s ease-in-out
&:hover
background: $light-blue
color: var(--white)
.shuoshuo-comment-btn
padding: 2px
color: #90a4ae
cursor: pointer
&:hover
color: $light-blue
.shuoshuo-comment
padding-top: 10px
&.no-comment
display: none
source/css/_page/tags.styl
+27 -27
View File
@@ -1,27 +1,27 @@
.tag-cloud
&-list
a
display: inline-block
margin: 2px
padding: 2px 7px
line-height: 1.7
transition: all .3s
addBorderRadius(5)
&:hover
background: var(--btn-bg) !important
box-shadow: 2px 2px 6px rgba(0, 0, 0, .2)
color: var(--btn-color) !important
+maxWidth768()
zoom: .85
&-title
font-size: 2.57em
+maxWidth768()
font-size: 2em
.page-title
& + .tag-cloud-list
text-align: left
.tag-cloud
&-list
a
display: inline-block
margin: 2px
padding: 2px 7px
line-height: 1.7
transition: all .3s
addBorderRadius(5)
&:hover
background: var(--btn-bg) !important
box-shadow: 2px 2px 6px rgba(0, 0, 0, .2)
color: var(--btn-color) !important
+maxWidth768()
zoom: .85
&-title
font-size: 2.57em
+maxWidth768()
font-size: 2em
.page-title
& + .tag-cloud-list
text-align: left
source/css/_search/algolia.styl
+92 -92
View File
@@ -1,93 +1,93 @@
#algolia-search
.search-dialog
.ais-SearchBox
input
padding: 5px 14px
width: 100%
outline: none
border: 2px solid $search-color
border-radius: 40px
background: var(--search-bg)
color: var(--search-input-color)
.ais-SearchBox-loadingIndicator
position: absolute
top: 18px
left: 67px
.ais-Hits-list
margin: 0
padding: 0
@extend .list-beauty
a
color: var(--search-a-color)
&:hover
color: $search-color
mark
background: transparent
color: $search-keyword-highlight
font-weight: bold
.algolia-hits-item-title
font-weight: 600
.algolia-hit-item-content
margin: 0 0 8px
word-break: break-word
.ais-Pagination
margin: 15px 0 0
padding: 0
text-align: center
.ais-Pagination-list
margin: 0
padding: 0
list-style: none
.ais-Pagination-item
display: inline
margin: 0 4px
padding: 0
.ais-Pagination-link
display: inline-block
min-width: 24px
height: 24px
text-align: center
line-height: 24px
addBorderRadius()
.ais-Pagination-item--selected
a
background: $theme-paginator-color
color: #eee
cursor: default
.ais-Pagination-item--disabled
visibility: hidden
#algolia-hits
> div
overflow-y: overlay
margin: 0 -20px
padding: 0 22px
max-height: calc(80vh - 220px)
+maxWidth768()
max-height: none
height: calc(var(--search-height) - 235px)
#algolia-info
div
display: inline
.algolia-poweredBy
float: right
vertical-align: text-top
svg
#algolia-search
.search-dialog
.ais-SearchBox
input
padding: 5px 14px
width: 100%
outline: none
border: 2px solid $search-color
border-radius: 40px
background: var(--search-bg)
color: var(--search-input-color)
.ais-SearchBox-loadingIndicator
position: absolute
top: 18px
left: 67px
.ais-Hits-list
margin: 0
padding: 0
@extend .list-beauty
a
color: var(--search-a-color)
&:hover
color: $search-color
mark
background: transparent
color: $search-keyword-highlight
font-weight: bold
.algolia-hits-item-title
font-weight: 600
.algolia-hit-item-content
margin: 0 0 8px
word-break: break-word
.ais-Pagination
margin: 15px 0 0
padding: 0
text-align: center
.ais-Pagination-list
margin: 0
padding: 0
list-style: none
.ais-Pagination-item
display: inline
margin: 0 4px
padding: 0
.ais-Pagination-link
display: inline-block
min-width: 24px
height: 24px
text-align: center
line-height: 24px
addBorderRadius()
.ais-Pagination-item--selected
a
background: $theme-paginator-color
color: #eee
cursor: default
.ais-Pagination-item--disabled
visibility: hidden
#algolia-hits
> div
overflow-y: overlay
margin: 0 -20px
padding: 0 22px
max-height: calc(80vh - 220px)
+maxWidth768()
max-height: none
height: calc(var(--search-height) - 235px)
#algolia-info
div
display: inline
.algolia-poweredBy
float: right
vertical-align: text-top
svg
height: 1.1em
source/css/_search/index.styl
+55 -55
View File
@@ -1,56 +1,56 @@
.search-dialog
position: fixed
top: 10%
left: 50%
z-index: 1001
display: none
margin-left: -300px
padding: 20px
width: 600px
background: var(--search-bg)
--search-height: 100vh
addBorderRadius(8)
+maxWidth768()
top: 0
left: 0
margin: 0
width: 100%
height: 100%
border-radius: 0
.search-nav
margin: 0 0 14px
color: $search-color
font-size: 1.4em
line-height: 1
.search-dialog-title
margin-right: 10px
.search-close-button
float: right
color: $grey
transition: color .2s ease-in-out
&:hover
color: $search-color
hr
margin: 15px auto
@extend .custom-hr
#search-mask
position: fixed
top: 0
right: 0
bottom: 0
left: 0
z-index: 1000
display: none
background: rgba($dark-black, .6)
if hexo-config('search.use') == 'algolia_search'
@require 'algolia'
else if hexo-config('search.use') == 'local_search'
.search-dialog
position: fixed
top: 10%
left: 50%
z-index: 1001
display: none
margin-left: -300px
padding: 20px
width: 600px
background: var(--search-bg)
--search-height: 100vh
addBorderRadius(8)
+maxWidth768()
top: 0
left: 0
margin: 0
width: 100%
height: 100%
border-radius: 0
.search-nav
margin: 0 0 14px
color: $search-color
font-size: 1.4em
line-height: 1
.search-dialog-title
margin-right: 10px
.search-close-button
float: right
color: $grey
transition: color .2s ease-in-out
&:hover
color: $search-color
hr
margin: 15px auto
@extend .custom-hr
#search-mask
position: fixed
top: 0
right: 0
bottom: 0
left: 0
z-index: 1000
display: none
background: rgba($dark-black, .6)
if hexo-config('search.use') == 'algolia_search'
@require 'algolia'
else if hexo-config('search.use') == 'local_search'
@require 'local-search'
source/css/_search/local-search.styl
+56 -56
View File
@@ -1,57 +1,57 @@
#local-search
.search-dialog
.local-search-box
margin: 0 auto
max-width: 100%
width: 100%
input
padding: 5px 14px
width: 100%
outline: none
border: 2px solid $search-color
border-radius: 40px
background: var(--search-bg)
color: var(--search-input-color)
-webkit-appearance: none
.search-wrap
display: none
.local-search-hit-item
margin-left: 24px
padding-left: 3px
line-height: 1.8
&::marker
color: $search-color
font-weight: bold
font-style: italic
a
color: var(--search-a-color)
&:hover
color: $search-color
.search-result-title
font-weight: 600
.search-result
margin: 0 0 8px
word-break: break-all
font-size: .9em
.search-result-list
overflow-y: overlay
margin: 0 -20px
padding: 0 22px
max-height: calc(80vh - 180px)
+maxWidth768()
max-height: calc(var(--search-height) - 190px) !important
.search-keyword
background: transparent
color: $search-keyword-highlight
#local-search
.search-dialog
.local-search-box
margin: 0 auto
max-width: 100%
width: 100%
input
padding: 5px 14px
width: 100%
outline: none
border: 2px solid $search-color
border-radius: 40px
background: var(--search-bg)
color: var(--search-input-color)
-webkit-appearance: none
.search-wrap
display: none
.local-search-hit-item
margin-left: 24px
padding-left: 3px
line-height: 1.8
&::marker
color: $search-color
font-weight: bold
font-style: italic
a
color: var(--search-a-color)
&:hover
color: $search-color
.search-result-title
font-weight: 600
.search-result
margin: 0 0 8px
word-break: break-all
font-size: .9em
.search-result-list
overflow-y: overlay
margin: 0 -20px
padding: 0 22px
max-height: calc(80vh - 180px)
+maxWidth768()
max-height: calc(var(--search-height) - 190px) !important
.search-keyword
background: transparent
color: $search-keyword-highlight
font-weight: 600
source/css/_tags/button.styl
+56 -56
View File
@@ -1,56 +1,56 @@
.container
.btn-center
margin: 0 0 20px
text-align: center
.btn-beautify
display: inline-block
margin: 0 4px 6px
padding: 0 15px
background-color: var(--btn-beautify-color, $btn-default-color)
color: $btn-color
line-height: 2
addBorderRadius()
for $type in $color-types
&.{$type}
--btn-beautify-color: lookup('$tagsP-' + $type + '-color')
&:hover
background-color: var(--btn-hover-color)
i + span
margin-left: 6px
&:not(.block) + .btn-beautify:not(.block)
margin: 0 4px 20px
&.block
display: block
margin: 0 0 20px
width: fit-content
width: -moz-fit-content
&.center
margin: 0 auto 20px
&.right
margin: 0 0 20px auto
&.larger
padding: 6px 15px
&:hover
text-decoration: none
&.outline
border: 1px solid transparent
border-color: var(--btn-beautify-color, $btn-default-color)
background-color: transparent
color: var(--btn-beautify-color, $btn-default-color)
&:hover
background-color: var(--btn-beautify-color, $btn-default-color)
&:hover
color: white !important
.container
.btn-center
margin: 0 0 20px
text-align: center
.btn-beautify
display: inline-block
margin: 0 4px 6px
padding: 0 15px
background-color: var(--btn-beautify-color, $btn-default-color)
color: $btn-color
line-height: 2
addBorderRadius()
for $type in $color-types
&.{$type}
--btn-beautify-color: lookup('$tagsP-' + $type + '-color')
&:hover
background-color: var(--btn-hover-color)
i + span
margin-left: 6px
&:not(.block) + .btn-beautify:not(.block)
margin: 0 4px 20px
&.block
display: block
margin: 0 0 20px
width: fit-content
width: -moz-fit-content
&.center
margin: 0 auto 20px
&.right
margin: 0 0 20px auto
&.larger
padding: 6px 15px
&:hover
text-decoration: none
&.outline
border: 1px solid transparent
border-color: var(--btn-beautify-color, $btn-default-color)
background-color: transparent
color: var(--btn-beautify-color, $btn-default-color)
&:hover
background-color: var(--btn-beautify-color, $btn-default-color)
&:hover
color: white !important
source/css/_tags/gallery.styl
+218 -218
View File
@@ -1,218 +1,218 @@
.container
figure.gallery-group
position: relative
float: left
overflow: hidden
margin: 6px 4px
width: calc(50% - 8px)
height: 250px
border-radius: 10px
background: $dark-black
-webkit-transform: translate3d(0, 0, 0)
+maxWidth600()
width: calc(100% - 8px)
+minWidth1024()
width: calc(100% / 3 - 8px)
&:hover
img
opacity: .4
transform: translate3d(0, 0, 0)
.gallery-group-name::after
transform: translate3d(0, 0, 0)
p
opacity: 1
transform: translate3d(0, 0, 0)
img
position: relative
margin: 0
max-width: none
width: calc(100% + 20px)
height: 250px
backface-visibility: hidden
opacity: .8
transition: all .3s, filter 375ms ease-in .2s
transform: translate3d(-10px, 0, 0)
object-fit: cover
figcaption
position: absolute
top: 0
left: 0
padding: 30px
width: 100%
height: 100%
color: $gallery-color
text-transform: uppercase
backface-visibility: hidden
& > a
position: absolute
top: 0
right: 0
bottom: 0
left: 0
z-index: 1000
opacity: 0
p
@extend .limit-more-line
margin: 0
padding: 8px 0 0
letter-spacing: 1px
font-size: 1.1em
line-height: 1.5
opacity: 0
transition: opacity .35s, transform .35s
transform: translate3d(100%, 0, 0)
-webkit-line-clamp: 4
.gallery-group-name
@extend .limit-more-line
position: relative
margin: 0
padding: 8px 0
font-weight: bold
font-size: 1.65em
line-height: 1.5
-webkit-line-clamp: 2
&:after
position: absolute
bottom: 0
left: 0
width: 100%
height: 2px
background: $gallery-color
content: ''
transition: transform .35s
transform: translate3d(-100%, 0, 0)
.gallery-group-main
overflow: auto
padding: 0 0 16px
.gallery-container
margin: 0 0 20px
text-align: center
opacity: 0
&.loaded
opacity: 1
img
display: initial
margin: 0
width: 100%
height: 100%
.gallery-data
display: none
button
margin-top: 25px
padding: 8px 14px
background: var(--btn-bg)
color: var(--btn-color)
font-weight: bold
font-size: 1.1em
transition: all .3s
addBorderRadius(5)
&:hover
background: var(--btn-hover-color)
i
margin-left: 8px
i
margin-left: 4px
transition: all .3s
.loading-container
display: inline-block
overflow: hidden
width: 154px
height: 154px
.loading-item
position: relative
width: 100%
height: 100%
backface-visibility: hidden
transform: translateZ(0) scale(1)
transform-origin: 0 0
div
position: absolute
width: 30.8px
height: 30.8px
border-radius: 50%
background: #e15b64
transform: translate(61.6px, 61.6px) scale(1)
animation: loading-ball 1.92s infinite cubic-bezier(0, .5, .5, 1)
&:nth-child(1)
background: #f47e60
transform: translate(113.96px, 61.6px) scale(1)
animation: loading-ball-r .48s infinite cubic-bezier(0, .5, .5, 1), loading-ball-c 1.92s infinite step-start
&:nth-child(2)
background: #e15b64
animation-delay: -.48s
&:nth-child(3)
background: #f47e60
animation-delay: -.96s
&:nth-child(4)
background: #f8b26a
animation-delay: -1.44s
&:nth-child(5)
background: #abbd81
animation-delay: -1.92s
@keyframes loading-ball
0%
transform: translate(9.24px, 61.6px) scale(0)
25%
transform: translate(9.24px, 61.6px) scale(0)
50%
transform: translate(9.24px, 61.6px) scale(1)
75%
transform: translate(61.6px, 61.6px) scale(1)
100%
transform: translate(113.96px, 61.6px) scale(1)
@keyframes loading-ball-r
0%
transform: translate(113.96px, 61.6px) scale(1)
100%
transform: translate(113.96px, 61.6px) scale(0)
@keyframes loading-ball-c
0%
background: #e15b64
25%
background: #abbd81
50%
background: #f8b26a
75%
background: #f47e60
100%
background: #e15b64
.container
figure.gallery-group
position: relative
float: left
overflow: hidden
margin: 6px 4px
width: calc(50% - 8px)
height: 250px
border-radius: 10px
background: $dark-black
-webkit-transform: translate3d(0, 0, 0)
+maxWidth600()
width: calc(100% - 8px)
+minWidth1024()
width: calc(100% / 3 - 8px)
&:hover
img
opacity: .4
transform: translate3d(0, 0, 0)
.gallery-group-name::after
transform: translate3d(0, 0, 0)
p
opacity: 1
transform: translate3d(0, 0, 0)
img
position: relative
margin: 0
max-width: none
width: calc(100% + 20px)
height: 250px
backface-visibility: hidden
opacity: .8
transition: all .3s, filter 375ms ease-in .2s
transform: translate3d(-10px, 0, 0)
object-fit: cover
figcaption
position: absolute
top: 0
left: 0
padding: 30px
width: 100%
height: 100%
color: $gallery-color
text-transform: uppercase
backface-visibility: hidden
& > a
position: absolute
top: 0
right: 0
bottom: 0
left: 0
z-index: 1000
opacity: 0
p
@extend .limit-more-line
margin: 0
padding: 8px 0 0
letter-spacing: 1px
font-size: 1.1em
line-height: 1.5
opacity: 0
transition: opacity .35s, transform .35s
transform: translate3d(100%, 0, 0)
-webkit-line-clamp: 4
.gallery-group-name
@extend .limit-more-line
position: relative
margin: 0
padding: 8px 0
font-weight: bold
font-size: 1.65em
line-height: 1.5
-webkit-line-clamp: 2
&:after
position: absolute
bottom: 0
left: 0
width: 100%
height: 2px
background: $gallery-color
content: ''
transition: transform .35s
transform: translate3d(-100%, 0, 0)
.gallery-group-main
overflow: auto
padding: 0 0 16px
.gallery-container
margin: 0 0 20px
text-align: center
opacity: 0
&.loaded
opacity: 1
img
display: initial
margin: 0
width: 100%
height: 100%
.gallery-data
display: none
button
margin-top: 25px
padding: 8px 14px
background: var(--btn-bg)
color: var(--btn-color)
font-weight: bold
font-size: 1.1em
transition: all .3s
addBorderRadius(5)
&:hover
background: var(--btn-hover-color)
i
margin-left: 8px
i
margin-left: 4px
transition: all .3s
.loading-container
display: inline-block
overflow: hidden
width: 154px
height: 154px
.loading-item
position: relative
width: 100%
height: 100%
backface-visibility: hidden
transform: translateZ(0) scale(1)
transform-origin: 0 0
div
position: absolute
width: 30.8px
height: 30.8px
border-radius: 50%
background: #e15b64
transform: translate(61.6px, 61.6px) scale(1)
animation: loading-ball 1.92s infinite cubic-bezier(0, .5, .5, 1)
&:nth-child(1)
background: #f47e60
transform: translate(113.96px, 61.6px) scale(1)
animation: loading-ball-r .48s infinite cubic-bezier(0, .5, .5, 1), loading-ball-c 1.92s infinite step-start
&:nth-child(2)
background: #e15b64
animation-delay: -.48s
&:nth-child(3)
background: #f47e60
animation-delay: -.96s
&:nth-child(4)
background: #f8b26a
animation-delay: -1.44s
&:nth-child(5)
background: #abbd81
animation-delay: -1.92s
@keyframes loading-ball
0%
transform: translate(9.24px, 61.6px) scale(0)
25%
transform: translate(9.24px, 61.6px) scale(0)
50%
transform: translate(9.24px, 61.6px) scale(1)
75%
transform: translate(61.6px, 61.6px) scale(1)
100%
transform: translate(113.96px, 61.6px) scale(1)
@keyframes loading-ball-r
0%
transform: translate(113.96px, 61.6px) scale(1)
100%
transform: translate(113.96px, 61.6px) scale(0)
@keyframes loading-ball-c
0%
background: #e15b64
25%
background: #abbd81
50%
background: #f8b26a
75%
background: #f47e60
100%
background: #e15b64
source/css/_tags/hexo.styl
+30 -30
View File
@@ -1,30 +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 .5em
// hexo tag video
.video-container
position: relative
overflow: hidden
margin-bottom: 16px
padding-top: 56.25%
height: 0
iframe
position: absolute
top: 0
left: 0
margin-top: 0
width: 100%
height: 100%
// 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 .5em
// hexo tag video
.video-container
position: relative
overflow: hidden
margin-bottom: 16px
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 -48
View File
@@ -1,48 +1,48 @@
// tag-hide
.hide-inline,
.hide-block
& > .hide-button
display: inline-block
padding: 5px 18px
background: $tag-hide-bg
color: var(--white)
addBorderRadius()
&:hover
background-color: var(--btn-hover-color)
&.open
display: none
& + div
display: block
& + span
display: inline
& > .hide-content
display: none
.hide-inline
& > .hide-button
margin: 0 6px
& > .hide-content
margin: 0 6px
.hide-block
margin: 0 0 16px
.toggle
margin-bottom: 20px
border: 1px solid $tag-hide-toggle-bg
addBorderRadius(5, true)
& > .toggle-button
padding: 6px 15px
background: $tag-hide-toggle-bg
color: #1F2D3D
cursor: pointer
& > .toggle-content
margin: 30px 24px
// tag-hide
.hide-inline,
.hide-block
& > .hide-button
display: inline-block
padding: 5px 18px
background: $tag-hide-bg
color: var(--white)
addBorderRadius()
&:hover
background-color: var(--btn-hover-color)
&.open
display: none
& + div
display: block
& + span
display: inline
& > .hide-content
display: none
.hide-inline
& > .hide-button
margin: 0 6px
& > .hide-content
margin: 0 6px
.hide-block
margin: 0 0 16px
.toggle
margin-bottom: 20px
border: 1px solid $tag-hide-toggle-bg
addBorderRadius(5, true)
& > .toggle-button
padding: 6px 15px
background: $tag-hide-toggle-bg
color: #1F2D3D
cursor: pointer
& > .toggle-content
margin: 30px 24px
source/css/_tags/inlineImg.styl
+5 -5
View File
@@ -1,6 +1,6 @@
.container
.inline-img
display: inline
margin: 0 3px
height: 1.1em
.container
.inline-img
display: inline
margin: 0 3px
height: 1.1em
vertical-align: text-bottom
source/css/_tags/label.styl
+11 -11
View File
@@ -1,11 +1,11 @@
.hl-label
padding: 2px 4px
color: $btn-color
addBorderRadius(3)
&.default
background-color: $btn-default-color
for $type in $color-types
&.{$type}
background-color: lookup('$tagsP-' + $type + '-color')
.hl-label
padding: 2px 4px
color: $btn-color
addBorderRadius(3)
&.default
background-color: $btn-default-color
for $type in $color-types
&.{$type}
background-color: lookup('$tagsP-' + $type + '-color')
source/css/_tags/note.styl
+124 -124
View File
@@ -1,124 +1,124 @@
.note
$note-icons = hexo-config('note.icons')
position: relative
margin: 0 0 20px
padding: 15px
if hexo-config('note.border_radius') is a 'unit'
border-radius: unit(hexo-config('note.border_radius'), px)
&.icon-padding
padding-left: 3em
& > .note-icon
position: absolute
top: calc(50% - .5em)
left: .8em
font-size: larger
for $type in $color-types
&.{$type}
&:not(.disabled)
border-left-color: lookup('$tagsP-' + $type + '-color') !important
&.modern
border-left-color: transparent !important
color: lookup('$tagsP-' + $type + '-color')
&:not(.simple)
background: lighten(lookup('$tagsP-' + $type + '-color'), 85%) !important
& > .note-icon
color: lookup('$tagsP-' + $type + '-color')
&.simple
border: 1px solid #EEEEEE
border-left-width: 5px
&.modern
border: 1px solid transparent !important
background-color: #f5f5f5
color: $font-black
&.flat
border: initial
border-left: 5px solid #EEEEEE
background-color: lighten(#EEEEEE, 65%)
color: $font-black
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
.img-alt
margin: 5px 0 10px
if $note-icons
&:not(.no-icon)
padding-left: 3em
&::before
position: absolute
top: calc(50% - .95em)
left: .8em
font-size: larger
@extend .fontawesomeIcon
for $type in $note-types
&.{$type}
&.flat
background: lookup('$note-' + $type + '-bg')
&.modern
border-color: lookup('$note-modern-' + $type + '-border')
background: lookup('$note-modern-' + $type + '-bg')
color: lookup('$note-modern-' + $type + '-text')
a
&:not(.btn)
color: lookup('$note-modern-' + $type + '-text')
&:hover
color: lookup('$note-modern-' + $type + '-hover')
&:not(.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')
&:not(.modern)
&::before
color: lookup('$note-' + $type + '-text')
.note
$note-icons = hexo-config('note.icons')
position: relative
margin: 0 0 20px
padding: 15px
if hexo-config('note.border_radius') is a 'unit'
border-radius: unit(hexo-config('note.border_radius'), px)
&.icon-padding
padding-left: 3em
& > .note-icon
position: absolute
top: calc(50% - .5em)
left: .8em
font-size: larger
for $type in $color-types
&.{$type}
&:not(.disabled)
border-left-color: lookup('$tagsP-' + $type + '-color') !important
&.modern
border-left-color: transparent !important
color: lookup('$tagsP-' + $type + '-color')
&:not(.simple)
background: lighten(lookup('$tagsP-' + $type + '-color'), 85%) !important
& > .note-icon
color: lookup('$tagsP-' + $type + '-color')
&.simple
border: 1px solid #EEEEEE
border-left-width: 5px
&.modern
border: 1px solid transparent !important
background-color: #f5f5f5
color: $font-black
&.flat
border: initial
border-left: 5px solid #EEEEEE
background-color: lighten(#EEEEEE, 65%)
color: $font-black
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
.img-alt
margin: 5px 0 10px
if $note-icons
&:not(.no-icon)
padding-left: 3em
&::before
position: absolute
top: calc(50% - .95em)
left: .8em
font-size: larger
@extend .fontawesomeIcon
for $type in $note-types
&.{$type}
&.flat
background: lookup('$note-' + $type + '-bg')
&.modern
border-color: lookup('$note-modern-' + $type + '-border')
background: lookup('$note-modern-' + $type + '-bg')
color: lookup('$note-modern-' + $type + '-text')
a
&:not(.btn)
color: lookup('$note-modern-' + $type + '-text')
&:hover
color: lookup('$note-modern-' + $type + '-hover')
&:not(.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')
&:not(.modern)
&::before
color: lookup('$note-' + $type + '-text')
source/css/_tags/series.styl
+4 -4
View File
@@ -1,5 +1,5 @@
.container
.series-items
a
&:hover
.container
.series-items
a
&:hover
color: var(--pseudo-hover)
source/css/_tags/tabs.styl
+77 -77
View File
@@ -1,77 +1,77 @@
.container
.tabs
position: relative
margin: 0 0 20px
border-right: 1px solid var(--tab-border-color)
border-bottom: 1px solid var(--tab-border-color)
border-left: 1px solid var(--tab-border-color)
addBorderRadius()
overflow: hidden
> .nav-tabs
display: flex
flex-wrap: wrap
margin: 0
padding: 0
background: var(--tab-botton-bg)
> .tab
flex-grow: 1
padding: 8px 18px
border-top: 2px solid var(--tab-border-color)
background: var(--tab-botton-bg)
color: var(--tab-botton-color)
line-height: 2
transition: all .4s
i
width: 1.5em
&.active
border-top: 2px solid $tab-active-border-color
background: var(--tab-button-active-bg)
cursor: default
&:not(.active)
&:hover
border-top: 2px solid var(--tab-button-hover-bg)
background: var(--tab-button-hover-bg)
&.no-default
& ~ .tab-to-top
display: none
> .tab-contents
.tab-item-content
position: relative
display: none
padding: 36px 24px 10px
+maxWidth768()
padding: 24px 14px
&.active
display: block
animation: tabshow .5s
> :last-child
margin-bottom: 0
> .tab-to-top
padding: 0 16px 10px 0
width: 100%
text-align: right
button
color: $tab-to-top-color
&:hover
color: $tab-to-top-hover-color
@keyframes tabshow
0%
transform: translateY(15px)
100%
transform: translateY(0)
.container
.tabs
position: relative
margin: 0 0 20px
border-right: 1px solid var(--tab-border-color)
border-bottom: 1px solid var(--tab-border-color)
border-left: 1px solid var(--tab-border-color)
addBorderRadius()
overflow: hidden
> .nav-tabs
display: flex
flex-wrap: wrap
margin: 0
padding: 0
background: var(--tab-botton-bg)
> .tab
flex-grow: 1
padding: 8px 18px
border-top: 2px solid var(--tab-border-color)
background: var(--tab-botton-bg)
color: var(--tab-botton-color)
line-height: 2
transition: all .4s
i
width: 1.5em
&.active
border-top: 2px solid $tab-active-border-color
background: var(--tab-button-active-bg)
cursor: default
&:not(.active)
&:hover
border-top: 2px solid var(--tab-button-hover-bg)
background: var(--tab-button-hover-bg)
&.no-default
& ~ .tab-to-top
display: none
> .tab-contents
.tab-item-content
position: relative
display: none
padding: 36px 24px 10px
+maxWidth768()
padding: 24px 14px
&.active
display: block
animation: tabshow .5s
> :last-child
margin-bottom: 0
> .tab-to-top
padding: 0 16px 10px 0
width: 100%
text-align: right
button
color: $tab-to-top-color
&:hover
color: $tab-to-top-hover-color
@keyframes tabshow
0%
transform: translateY(15px)
100%
transform: translateY(0)
source/css/_tags/timeline.styl
+67 -67
View File
@@ -1,68 +1,68 @@
.container
.timeline
margin: 0 10px 20px
padding: 14px 0 5px 20px
border-left: 2px solid var(--timeline-color, $theme-color)
for $type in $color-types
&.{$type}
--timeline-color: lookup('$tagsP-' + $type + '-color')
--timeline-bg: s('rgba(%s,%s,%s, 0.2)', red(lookup('$tagsP-' + $type + '-color')), green(lookup('$tagsP-' + $type + '-color')), blue(lookup('$tagsP-' + $type + '-color')))
.timeline-item
margin: 0 0 15px
&:hover
.item-circle
&:before
border-color: var(--timeline-color, $theme-color)
&.headline
.timeline-item-title
.item-circle
> p
font-weight: 600
font-size: 1.2em
&:before
left: -28px
border: 4px solid var(--timeline-color, $theme-color)
&:hover
.item-circle
&:before
border-color: var(--pseudo-hover)
.timeline-item-title
position: relative
.item-circle
&:before
position: absolute
top: 50%
left: -27px
width: 6px
height: 6px
border: 3px solid var(--pseudo-hover)
border-radius: 50%
background: var(--card-bg)
content: ''
transition: all .3s
transform: translate(0, -50%)
> p
margin: 0 0 8px
font-weight: 500
.timeline-item-content
position: relative
padding: 12px 15px
border-radius: 8px
background: var(--timeline-bg, lighten($theme-color, 85%))
font-size: .93em
& > :last-child
margin-bottom: 0
& + .timeline
.container
.timeline
margin: 0 10px 20px
padding: 14px 0 5px 20px
border-left: 2px solid var(--timeline-color, $theme-color)
for $type in $color-types
&.{$type}
--timeline-color: lookup('$tagsP-' + $type + '-color')
--timeline-bg: s('rgba(%s,%s,%s, 0.2)', red(lookup('$tagsP-' + $type + '-color')), green(lookup('$tagsP-' + $type + '-color')), blue(lookup('$tagsP-' + $type + '-color')))
.timeline-item
margin: 0 0 15px
&:hover
.item-circle
&:before
border-color: var(--timeline-color, $theme-color)
&.headline
.timeline-item-title
.item-circle
> p
font-weight: 600
font-size: 1.2em
&:before
left: -28px
border: 4px solid var(--timeline-color, $theme-color)
&:hover
.item-circle
&:before
border-color: var(--pseudo-hover)
.timeline-item-title
position: relative
.item-circle
&:before
position: absolute
top: 50%
left: -27px
width: 6px
height: 6px
border: 3px solid var(--pseudo-hover)
border-radius: 50%
background: var(--card-bg)
content: ''
transition: all .3s
transform: translate(0, -50%)
> p
margin: 0 0 8px
font-weight: 500
.timeline-item-content
position: relative
padding: 12px 15px
border-radius: 8px
background: var(--timeline-bg, lighten($theme-color, 85%))
font-size: .93em
& > :last-child
margin-bottom: 0
& + .timeline
margin-top: -20px
source/css/_third-party/normalize.min.css
Vendored
+179 -179
View File
@@ -1,180 +1,180 @@
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%
}
body {
margin: 0
}
main {
display: block
}
h1 {
font-size: 2em;
margin: .67em 0
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible
}
pre {
font-family: monospace, monospace;
font-size: 1em
}
a {
background-color: transparent
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted
}
b,
strong {
font-weight: bolder
}
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em
}
small {
font-size: 80%
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sub {
bottom: -.25em
}
sup {
top: -.5em
}
img {
border-style: none
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0
}
button,
input {
overflow: visible
}
button,
select {
text-transform: none
}
[type=button],
[type=reset],
[type=submit],
button {
-webkit-appearance: button
}
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
border-style: none;
padding: 0
}
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
outline: 1px dotted ButtonText
}
fieldset {
padding: .35em .75em .625em
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal
}
progress {
vertical-align: baseline
}
textarea {
overflow: auto
}
[type=checkbox],
[type=radio] {
box-sizing: border-box;
padding: 0
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}
[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
details {
display: block
}
summary {
display: list-item
}
template {
display: none
}
[hidden] {
display: none
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%
}
body {
margin: 0
}
main {
display: block
}
h1 {
font-size: 2em;
margin: .67em 0
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible
}
pre {
font-family: monospace, monospace;
font-size: 1em
}
a {
background-color: transparent
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted
}
b,
strong {
font-weight: bolder
}
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em
}
small {
font-size: 80%
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sub {
bottom: -.25em
}
sup {
top: -.5em
}
img {
border-style: none
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0
}
button,
input {
overflow: visible
}
button,
select {
text-transform: none
}
[type=button],
[type=reset],
[type=submit],
button {
-webkit-appearance: button
}
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
border-style: none;
padding: 0
}
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
outline: 1px dotted ButtonText
}
fieldset {
padding: .35em .75em .625em
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal
}
progress {
vertical-align: baseline
}
textarea {
overflow: auto
}
[type=checkbox],
[type=radio] {
box-sizing: border-box;
padding: 0
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}
[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
details {
display: block
}
summary {
display: list-item
}
template {
display: none
}
[hidden] {
display: none
}
source/css/index.styl
+14 -14
View File
@@ -1,15 +1,15 @@
if hexo-config('css_prefix')
@import 'nib'
@import '_third-party/normalize.min.css'
// project
@import 'var'
@import '_global/*'
@import '_highlight/highlight'
@import '_page/*'
@import '_layout/*'
@import '_tags/*'
@import '_mode/*'
// search
if hexo-config('css_prefix')
@import 'nib'
@import '_third-party/normalize.min.css'
// project
@import 'var'
@import '_global/*'
@import '_highlight/highlight'
@import '_page/*'
@import '_layout/*'
@import '_tags/*'
@import '_mode/*'
// search
@import '_search/index'
source/css/var.styl
+186 -186
View File
@@ -1,186 +1,186 @@
// color
$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 && hexo-config('theme_color.main') ? convert(hexo-config('theme_color.main')) : $bright-blue
$theme-paginator-color = $themeColorEnable && hexo-config('theme_color.paginator') ? convert(hexo-config('theme_color.paginator')) : $strong-cyan
$theme-text-selection-color = $themeColorEnable && hexo-config('theme_color.text_selection') ? convert(hexo-config('theme_color.text_selection')) : $strong-cyan
$theme-link-color = $themeColorEnable && hexo-config('theme_color.link_color') ? convert(hexo-config('theme_color.link_color')) : $bright-blue
$theme-hr-color = $themeColorEnable && hexo-config('theme_color.hr_color') ? convert(hexo-config('theme_color.hr_color')) : $bright-blue
$code-foreground = $themeColorEnable && hexo-config('theme_color.code_foreground') ? convert(hexo-config('theme_color.code_foreground')) : $light-red
$code-background = $themeColorEnable && hexo-config('theme_color.code_background') ? convert(hexo-config('theme_color.code_background')) : rgba(27, 31, 35, .05)
$theme-toc-color = $themeColorEnable && hexo-config('theme_color.toc_color') ? convert(hexo-config('theme_color.toc_color')) : $strong-cyan
// font
$chinseFont = $language == 'zh-CN' ? 'Microsoft YaHei' : 'Microsoft JhengHei'
$dafault-font-family = -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', $chinseFont, sans-serif
$dafault-code-font = consolas, Menlo, monospace, 'PingFang SC', $chinseFont, sans-serif
$font-family = hexo-config('font.font_family') ? unquote(hexo-config('font.font_family')) : $dafault-font-family
$code-font-family = hexo-config('font.code_font_family') ? unquote(hexo-config('font.code_font_family')) : $dafault-code-font
$site-name-font = hexo-config('blog_title_font.font_family') && unquote(hexo-config('blog_title_font.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') ? hexo-config('beautify.title_prefix_icon') : '\f0c1'
$title-prefix-icon-color = $beautifyEnable && hexo-config('beautify.title_prefix_icon_color') ? convert(hexo-config('beautify.title_prefix_icon_color')) : $light-red
// Global Variables
$font-size = hexo-config('font.global_font_size') ? convert(hexo-config('font.global_font_size')) : 14px
$code-font-size = hexo-config('font.code_font_size') ? convert(hexo-config('font.code_font_size')) : var(--global-font-size)
$font-color = #1F2D3D
$text-line-height = 2
$index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 100vh
$index_site_info_top = hexo-config('index_site_info_top') ? convert(hexo-config('index_site_info_top')) : 43%
// Global color & SVG
$light-blue = $theme-color
$dark-black = #000000
$light-grey = #EEEEEE
$grey = #858585
$dark-grey = #cacaca
$white = #FFFFFF
$whitesmoke = #f5f5f5
$font-black = #4C4948
$card-bg = $white
$text-highlight-color = $font-color
$text-hover = $theme-color
$text-bg-hover = $theme-color
// code
$line-height-code-block = 1.6
$blockquote-color = #6a737d
$blockquote-padding-color = $themeColorEnable && hexo-config('theme_color.blockquote_padding_color') ? convert(hexo-config('theme_color.blockquote_padding_color')) : #49B1F5
$blockquote-background-color = $themeColorEnable && hexo-config('theme_color.blockquote_background_color') ? alpha(convert(hexo-config('theme_color.blockquote_background_color')), .1) : alpha($blockquote-padding-color, .1)
// page
$body-bg = #fff
$a-link-color = #99a9bf
$sticky-color = $light-orange
$theme-meta-color = $themeColorEnable && hexo-config('theme_color.meta_color') ? convert(hexo-config('theme_color.meta_color')) : #858585
// sidebar
$sidebar-background = #f6f8fa
$sidebar-width = 330px
// aside
$toc-link-color = #666261
$toc-mobile-width = calc(100% - 80px)
$toc-mobile-maxWidth = 380px
$toc-active-color = #fff
// Button
$button-color = #fff
$button-hover-color = $themeColorEnable && hexo-config('theme_color.button_hover') ? convert(hexo-config('theme_color.button_hover')) : $light-orange
$button-bg = $theme-color
$pseudo-hover = $button-hover-color
// scrollbar
$scrollbar-color = $themeColorEnable && hexo-config('theme_color.scrollbar_color') ? convert(hexo-config('theme_color.scrollbar_color')) : $theme-color
// table
$table-thead-bg = #99a9bf
// reward
$reward-pop-up-bg = #f5f5f5
$reward-pop-up-color = #858585
// search
$search-bg = #f6f8fa
$search-input-color = $font-black
$search-color = $theme-color
$search-keyword-highlight = #F47466
$search-a-color = $font-black
// comments
$comments-switch-first-text = $bright-blue
$comments-switch-second-text = $light-orange
$comments-switch-round = #fff
$comments-switch-bg = #f6f8fa
// noticeOutdate
$noticeOutdate-bg = #ffe6e6
$noticeOutdate-color = #ff6666
$noticeOutdate-border = #ff8080
// gallery
$gallery-color = #fff
// tag-hide
$tag-hide-bg = $theme-color
$tag-hide-toggle-bg = #f0f0f0
// preloader
$preloader-bg = #37474f
$preloader-word-color = #fff
// rightside
$rightside-bottom = hexo-config('rightside_bottom') ? convert(hexo-config('rightside_bottom')) : 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)
$note-default-text = $note-default-border
$note-default-icon = '\f0a9'
$note-modern-default-border = #e1e1e1
$note-modern-default-bg = lighten(spin($note-modern-default-border, 10), 60% + ($lbg * 4))
$note-modern-default-text = #666
$note-modern-default-hover = darken(spin($note-modern-default-text, -10), 32%)
// Primary
$note-primary-border = #6f42c1
$note-primary-bg = lighten(spin($note-primary-border, 10), 92% + $lbg)
$note-primary-text = $note-primary-border
$note-primary-icon = '\f055'
$note-modern-primary-border = #e1c2ff
$note-modern-primary-bg = lighten(spin($note-modern-primary-border, 10), 40% + ($lbg * 4))
$note-modern-primary-text = #6f42c1
$note-modern-primary-hover = darken(spin($note-modern-primary-text, -10), 22%)
// Info
$note-info-border = #428bca
$note-info-bg = lighten(spin($note-info-border, -10), 91% + $lbg)
$note-info-text = $note-info-border
$note-info-icon = '\f05a'
$note-modern-info-border = #b3e5ef
$note-modern-info-bg = lighten(spin($note-modern-info-border, 10), 50% + ($lbg * 4))
$note-modern-info-text = #31708f
$note-modern-info-hover = darken(spin($note-modern-info-text, -10), 32%)
// Success
$note-success-border = #5cb85c
$note-success-bg = lighten(spin($note-success-border, 10), 90% + $lbg)
$note-success-text = $note-success-border
$note-success-icon = '\f058'
$note-modern-success-border = #d0e6be
$note-modern-success-bg = lighten(spin($note-modern-success-border, 10), 40% + ($lbg * 4))
$note-modern-success-text = #3c763d
$note-modern-success-hover = darken(spin($note-modern-success-text, -10), 27%)
// Warning
$note-warning-border = #f0ad4e
$note-warning-bg = lighten(spin($note-warning-border, 10), 88% + $lbg)
$note-warning-text = $note-warning-border
$note-warning-icon = '\f06a'
$note-modern-warning-border = #fae4cd
$note-modern-warning-bg = lighten(spin($note-modern-warning-border, 10), 43% + ($lbg * 4))
$note-modern-warning-text = #8a6d3b
$note-modern-warning-hover = darken(spin($note-modern-warning-text, -10), 18%)
// Danger
$note-danger-border = #d9534f
$note-danger-bg = lighten(spin($note-danger-border, -10), 92% + $lbg)
$note-danger-text = $note-danger-border
$note-danger-icon = '\f056'
$note-modern-danger-border = #ebcdd2
$note-modern-danger-bg = lighten(spin($note-modern-danger-border, 10), 35% + ($lbg * 4))
$note-modern-danger-text = #a94442
$note-modern-danger-hover = darken(spin($note-modern-danger-text, -10), 22%)
// Tag Plugins - Button/note
$color-types = 'blue' 'pink' 'red' 'purple' 'orange' 'green'
$btn-color = #fff
$btn-default-color = #777
$tagsP-blue-color = #428bca
$tagsP-pink-color = #FF69B4
$tagsP-red-color = #FF0000
$tagsP-orange-color = #FF8C00
$tagsP-purple-color = #6f42c1
$tagsP-green-color = #5cb85c
// Tag Plugins - Tab
$tab-border-color = #f0f0f0
$tab-botton-bg = #f0f0f0
$tab-botton-color = $font-color
$tab-button-hover-bg = darken($tab-border-color, 8)
$tab-active-border-color = $theme-color
$tab-button-active-bg = $card-bg
$tab-to-top-color = #99a9bf
$tab-to-top-hover-color = $theme-color
// Tag Plugins - timeline
$timeline-default-color = $theme-color
// color
$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 && hexo-config('theme_color.main') ? convert(hexo-config('theme_color.main')) : $bright-blue
$theme-paginator-color = $themeColorEnable && hexo-config('theme_color.paginator') ? convert(hexo-config('theme_color.paginator')) : $strong-cyan
$theme-text-selection-color = $themeColorEnable && hexo-config('theme_color.text_selection') ? convert(hexo-config('theme_color.text_selection')) : $strong-cyan
$theme-link-color = $themeColorEnable && hexo-config('theme_color.link_color') ? convert(hexo-config('theme_color.link_color')) : $bright-blue
$theme-hr-color = $themeColorEnable && hexo-config('theme_color.hr_color') ? convert(hexo-config('theme_color.hr_color')) : $bright-blue
$code-foreground = $themeColorEnable && hexo-config('theme_color.code_foreground') ? convert(hexo-config('theme_color.code_foreground')) : $light-red
$code-background = $themeColorEnable && hexo-config('theme_color.code_background') ? convert(hexo-config('theme_color.code_background')) : rgba(27, 31, 35, .05)
$theme-toc-color = $themeColorEnable && hexo-config('theme_color.toc_color') ? convert(hexo-config('theme_color.toc_color')) : $strong-cyan
// font
$chinseFont = $language == 'zh-CN' ? 'Microsoft YaHei' : 'Microsoft JhengHei'
$dafault-font-family = -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', $chinseFont, sans-serif
$dafault-code-font = consolas, Menlo, monospace, 'PingFang SC', $chinseFont, sans-serif
$font-family = hexo-config('font.font_family') ? unquote(hexo-config('font.font_family')) : $dafault-font-family
$code-font-family = hexo-config('font.code_font_family') ? unquote(hexo-config('font.code_font_family')) : $dafault-code-font
$site-name-font = hexo-config('blog_title_font.font_family') && unquote(hexo-config('blog_title_font.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') ? hexo-config('beautify.title_prefix_icon') : '\f0c1'
$title-prefix-icon-color = $beautifyEnable && hexo-config('beautify.title_prefix_icon_color') ? convert(hexo-config('beautify.title_prefix_icon_color')) : $light-red
// Global Variables
$font-size = hexo-config('font.global_font_size') ? convert(hexo-config('font.global_font_size')) : 14px
$code-font-size = hexo-config('font.code_font_size') ? convert(hexo-config('font.code_font_size')) : var(--global-font-size)
$font-color = #1F2D3D
$text-line-height = 2
$index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 100vh
$index_site_info_top = hexo-config('index_site_info_top') ? convert(hexo-config('index_site_info_top')) : 43%
// Global color & SVG
$light-blue = $theme-color
$dark-black = #000000
$light-grey = #EEEEEE
$grey = #858585
$dark-grey = #cacaca
$white = #FFFFFF
$whitesmoke = #f5f5f5
$font-black = #4C4948
$card-bg = $white
$text-highlight-color = $font-color
$text-hover = $theme-color
$text-bg-hover = $theme-color
// code
$line-height-code-block = 1.6
$blockquote-color = #6a737d
$blockquote-padding-color = $themeColorEnable && hexo-config('theme_color.blockquote_padding_color') ? convert(hexo-config('theme_color.blockquote_padding_color')) : #49B1F5
$blockquote-background-color = $themeColorEnable && hexo-config('theme_color.blockquote_background_color') ? alpha(convert(hexo-config('theme_color.blockquote_background_color')), .1) : alpha($blockquote-padding-color, .1)
// page
$body-bg = #fff
$a-link-color = #99a9bf
$sticky-color = $light-orange
$theme-meta-color = $themeColorEnable && hexo-config('theme_color.meta_color') ? convert(hexo-config('theme_color.meta_color')) : #858585
// sidebar
$sidebar-background = #f6f8fa
$sidebar-width = 330px
// aside
$toc-link-color = #666261
$toc-mobile-width = calc(100% - 80px)
$toc-mobile-maxWidth = 380px
$toc-active-color = #fff
// Button
$button-color = #fff
$button-hover-color = $themeColorEnable && hexo-config('theme_color.button_hover') ? convert(hexo-config('theme_color.button_hover')) : $light-orange
$button-bg = $theme-color
$pseudo-hover = $button-hover-color
// scrollbar
$scrollbar-color = $themeColorEnable && hexo-config('theme_color.scrollbar_color') ? convert(hexo-config('theme_color.scrollbar_color')) : $theme-color
// table
$table-thead-bg = #99a9bf
// reward
$reward-pop-up-bg = #f5f5f5
$reward-pop-up-color = #858585
// search
$search-bg = #f6f8fa
$search-input-color = $font-black
$search-color = $theme-color
$search-keyword-highlight = #F47466
$search-a-color = $font-black
// comments
$comments-switch-first-text = $bright-blue
$comments-switch-second-text = $light-orange
$comments-switch-round = #fff
$comments-switch-bg = #f6f8fa
// noticeOutdate
$noticeOutdate-bg = #ffe6e6
$noticeOutdate-color = #ff6666
$noticeOutdate-border = #ff8080
// gallery
$gallery-color = #fff
// tag-hide
$tag-hide-bg = $theme-color
$tag-hide-toggle-bg = #f0f0f0
// preloader
$preloader-bg = #37474f
$preloader-word-color = #fff
// rightside
$rightside-bottom = hexo-config('rightside_bottom') ? convert(hexo-config('rightside_bottom')) : 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)
$note-default-text = $note-default-border
$note-default-icon = '\f0a9'
$note-modern-default-border = #e1e1e1
$note-modern-default-bg = lighten(spin($note-modern-default-border, 10), 60% + ($lbg * 4))
$note-modern-default-text = #666
$note-modern-default-hover = darken(spin($note-modern-default-text, -10), 32%)
// Primary
$note-primary-border = #6f42c1
$note-primary-bg = lighten(spin($note-primary-border, 10), 92% + $lbg)
$note-primary-text = $note-primary-border
$note-primary-icon = '\f055'
$note-modern-primary-border = #e1c2ff
$note-modern-primary-bg = lighten(spin($note-modern-primary-border, 10), 40% + ($lbg * 4))
$note-modern-primary-text = #6f42c1
$note-modern-primary-hover = darken(spin($note-modern-primary-text, -10), 22%)
// Info
$note-info-border = #428bca
$note-info-bg = lighten(spin($note-info-border, -10), 91% + $lbg)
$note-info-text = $note-info-border
$note-info-icon = '\f05a'
$note-modern-info-border = #b3e5ef
$note-modern-info-bg = lighten(spin($note-modern-info-border, 10), 50% + ($lbg * 4))
$note-modern-info-text = #31708f
$note-modern-info-hover = darken(spin($note-modern-info-text, -10), 32%)
// Success
$note-success-border = #5cb85c
$note-success-bg = lighten(spin($note-success-border, 10), 90% + $lbg)
$note-success-text = $note-success-border
$note-success-icon = '\f058'
$note-modern-success-border = #d0e6be
$note-modern-success-bg = lighten(spin($note-modern-success-border, 10), 40% + ($lbg * 4))
$note-modern-success-text = #3c763d
$note-modern-success-hover = darken(spin($note-modern-success-text, -10), 27%)
// Warning
$note-warning-border = #f0ad4e
$note-warning-bg = lighten(spin($note-warning-border, 10), 88% + $lbg)
$note-warning-text = $note-warning-border
$note-warning-icon = '\f06a'
$note-modern-warning-border = #fae4cd
$note-modern-warning-bg = lighten(spin($note-modern-warning-border, 10), 43% + ($lbg * 4))
$note-modern-warning-text = #8a6d3b
$note-modern-warning-hover = darken(spin($note-modern-warning-text, -10), 18%)
// Danger
$note-danger-border = #d9534f
$note-danger-bg = lighten(spin($note-danger-border, -10), 92% + $lbg)
$note-danger-text = $note-danger-border
$note-danger-icon = '\f056'
$note-modern-danger-border = #ebcdd2
$note-modern-danger-bg = lighten(spin($note-modern-danger-border, 10), 35% + ($lbg * 4))
$note-modern-danger-text = #a94442
$note-modern-danger-hover = darken(spin($note-modern-danger-text, -10), 22%)
// Tag Plugins - Button/note
$color-types = 'blue' 'pink' 'red' 'purple' 'orange' 'green'
$btn-color = #fff
$btn-default-color = #777
$tagsP-blue-color = #428bca
$tagsP-pink-color = #FF69B4
$tagsP-red-color = #FF0000
$tagsP-orange-color = #FF8C00
$tagsP-purple-color = #6f42c1
$tagsP-green-color = #5cb85c
// Tag Plugins - Tab
$tab-border-color = #f0f0f0
$tab-botton-bg = #f0f0f0
$tab-botton-color = $font-color
$tab-button-hover-bg = darken($tab-border-color, 8)
$tab-active-border-color = $theme-color
$tab-button-active-bg = $card-bg
$tab-to-top-color = #99a9bf
$tab-to-top-hover-color = $theme-color
// Tag Plugins - timeline
$timeline-default-color = $theme-color
source/js/main.js
+930 -930
View File
File diff suppressed because it is too large Load Diff
source/js/search/algolia.js
+174 -174
View File
@@ -1,174 +1,174 @@
window.addEventListener('load', () => {
const { algolia } = GLOBAL_CONFIG
const { appId, apiKey, indexName, hitsPerPage = 5, languages } = algolia
if (!appId || !apiKey || !indexName) {
return console.error('Algolia setting is invalid!')
}
const $searchMask = document.getElementById('search-mask')
const $searchDialog = document.querySelector('#algolia-search .search-dialog')
const animateElements = show => {
const action = show ? 'animateIn' : 'animateOut'
const maskAnimation = show ? 'to_show 0.5s' : 'to_hide 0.5s'
const dialogAnimation = show ? 'titleScale 0.5s' : 'search_close .5s'
btf[action]($searchMask, maskAnimation)
btf[action]($searchDialog, dialogAnimation)
}
const fixSafariHeight = () => {
if (window.innerWidth < 768) {
$searchDialog.style.setProperty('--search-height', `${window.innerHeight}px`)
}
}
const openSearch = () => {
btf.overflowPaddingR.add()
animateElements(true)
setTimeout(() => { document.querySelector('#algolia-search .ais-SearchBox-input').focus() }, 100)
const handleEscape = event => {
if (event.code === 'Escape') {
closeSearch()
document.removeEventListener('keydown', handleEscape)
}
}
document.addEventListener('keydown', handleEscape)
fixSafariHeight()
window.addEventListener('resize', fixSafariHeight)
}
const closeSearch = () => {
btf.overflowPaddingR.remove()
animateElements(false)
window.removeEventListener('resize', fixSafariHeight)
}
const searchClickFn = () => {
btf.addEventListenerPjax(document.querySelector('#search-button > .search'), 'click', openSearch)
}
const searchFnOnce = () => {
$searchMask.addEventListener('click', closeSearch)
document.querySelector('#algolia-search .search-close-button').addEventListener('click', closeSearch)
}
const cutContent = (content) => {
if (!content) return ''
const firstOccur = content.indexOf('<mark>')
let start = firstOccur - 30
let end = firstOccur + 120
let pre = ''
let post = ''
if (start <= 0) {
start = 0
end = 140
} else {
pre = '...'
}
if (end > content.length) {
end = content.length
} else {
post = '...'
}
return `${pre}${content.substring(start, end)}${post}`
}
const disableDiv = [
document.getElementById('algolia-hits'),
document.getElementById('algolia-pagination'),
document.querySelector('#algolia-info .algolia-stats')
]
const searchClient = typeof algoliasearch === 'function' ? algoliasearch : window['algoliasearch/lite'].liteClient
const search = instantsearch({
indexName,
searchClient: searchClient(appId, apiKey),
searchFunction (helper) {
disableDiv.forEach(item => {
item.style.display = helper.state.query ? '' : 'none'
})
if (helper.state.query) helper.search()
}
})
const widgets = [
instantsearch.widgets.configure({ hitsPerPage }),
instantsearch.widgets.searchBox({
container: '#algolia-search-input',
showReset: false,
showSubmit: false,
placeholder: languages.input_placeholder,
showLoadingIndicator: true
}),
instantsearch.widgets.hits({
container: '#algolia-hits',
templates: {
item (data) {
const link = data.permalink || (GLOBAL_CONFIG.root + data.path)
const result = data._highlightResult
const content = result.contentStripTruncate
? cutContent(result.contentStripTruncate.value)
: result.contentStrip
? cutContent(result.contentStrip.value)
: result.content
? cutContent(result.content.value)
: ''
return `
<a href="${link}" class="algolia-hit-item-link">
<span class="algolia-hits-item-title">${result.title.value || 'no-title'}</span>
${content ? `<div class="algolia-hit-item-content">${content}</div>` : ''}
</a>`
},
empty (data) {
return `<div id="algolia-hits-empty">${languages.hits_empty.replace(/\$\{query}/, data.query)}</div>`
}
}
}),
instantsearch.widgets.stats({
container: '#algolia-info > .algolia-stats',
templates: {
text (data) {
const stats = languages.hits_stats
.replace(/\$\{hits}/, data.nbHits)
.replace(/\$\{time}/, data.processingTimeMS)
return `<hr>${stats}`
}
}
}),
instantsearch.widgets.poweredBy({
container: '#algolia-info > .algolia-poweredBy'
}),
instantsearch.widgets.pagination({
container: '#algolia-pagination',
totalPages: 5,
templates: {
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>'
}
})
]
search.addWidgets(widgets)
search.start()
searchClickFn()
searchFnOnce()
window.addEventListener('pjax:complete', () => {
if (!btf.isHidden($searchMask)) closeSearch()
searchClickFn()
})
if (window.pjax) {
search.on('render', () => {
window.pjax.refresh(document.getElementById('algolia-hits'))
})
}
})
window.addEventListener('load', () => {
const { algolia } = GLOBAL_CONFIG
const { appId, apiKey, indexName, hitsPerPage = 5, languages } = algolia
if (!appId || !apiKey || !indexName) {
return console.error('Algolia setting is invalid!')
}
const $searchMask = document.getElementById('search-mask')
const $searchDialog = document.querySelector('#algolia-search .search-dialog')
const animateElements = show => {
const action = show ? 'animateIn' : 'animateOut'
const maskAnimation = show ? 'to_show 0.5s' : 'to_hide 0.5s'
const dialogAnimation = show ? 'titleScale 0.5s' : 'search_close .5s'
btf[action]($searchMask, maskAnimation)
btf[action]($searchDialog, dialogAnimation)
}
const fixSafariHeight = () => {
if (window.innerWidth < 768) {
$searchDialog.style.setProperty('--search-height', `${window.innerHeight}px`)
}
}
const openSearch = () => {
btf.overflowPaddingR.add()
animateElements(true)
setTimeout(() => { document.querySelector('#algolia-search .ais-SearchBox-input').focus() }, 100)
const handleEscape = event => {
if (event.code === 'Escape') {
closeSearch()
document.removeEventListener('keydown', handleEscape)
}
}
document.addEventListener('keydown', handleEscape)
fixSafariHeight()
window.addEventListener('resize', fixSafariHeight)
}
const closeSearch = () => {
btf.overflowPaddingR.remove()
animateElements(false)
window.removeEventListener('resize', fixSafariHeight)
}
const searchClickFn = () => {
btf.addEventListenerPjax(document.querySelector('#search-button > .search'), 'click', openSearch)
}
const searchFnOnce = () => {
$searchMask.addEventListener('click', closeSearch)
document.querySelector('#algolia-search .search-close-button').addEventListener('click', closeSearch)
}
const cutContent = (content) => {
if (!content) return ''
const firstOccur = content.indexOf('<mark>')
let start = firstOccur - 30
let end = firstOccur + 120
let pre = ''
let post = ''
if (start <= 0) {
start = 0
end = 140
} else {
pre = '...'
}
if (end > content.length) {
end = content.length
} else {
post = '...'
}
return `${pre}${content.substring(start, end)}${post}`
}
const disableDiv = [
document.getElementById('algolia-hits'),
document.getElementById('algolia-pagination'),
document.querySelector('#algolia-info .algolia-stats')
]
const searchClient = typeof algoliasearch === 'function' ? algoliasearch : window['algoliasearch/lite'].liteClient
const search = instantsearch({
indexName,
searchClient: searchClient(appId, apiKey),
searchFunction (helper) {
disableDiv.forEach(item => {
item.style.display = helper.state.query ? '' : 'none'
})
if (helper.state.query) helper.search()
}
})
const widgets = [
instantsearch.widgets.configure({ hitsPerPage }),
instantsearch.widgets.searchBox({
container: '#algolia-search-input',
showReset: false,
showSubmit: false,
placeholder: languages.input_placeholder,
showLoadingIndicator: true
}),
instantsearch.widgets.hits({
container: '#algolia-hits',
templates: {
item (data) {
const link = data.permalink || (GLOBAL_CONFIG.root + data.path)
const result = data._highlightResult
const content = result.contentStripTruncate
? cutContent(result.contentStripTruncate.value)
: result.contentStrip
? cutContent(result.contentStrip.value)
: result.content
? cutContent(result.content.value)
: ''
return `
<a href="${link}" class="algolia-hit-item-link">
<span class="algolia-hits-item-title">${result.title.value || 'no-title'}</span>
${content ? `<div class="algolia-hit-item-content">${content}</div>` : ''}
</a>`
},
empty (data) {
return `<div id="algolia-hits-empty">${languages.hits_empty.replace(/\$\{query}/, data.query)}</div>`
}
}
}),
instantsearch.widgets.stats({
container: '#algolia-info > .algolia-stats',
templates: {
text (data) {
const stats = languages.hits_stats
.replace(/\$\{hits}/, data.nbHits)
.replace(/\$\{time}/, data.processingTimeMS)
return `<hr>${stats}`
}
}
}),
instantsearch.widgets.poweredBy({
container: '#algolia-info > .algolia-poweredBy'
}),
instantsearch.widgets.pagination({
container: '#algolia-pagination',
totalPages: 5,
templates: {
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>'
}
})
]
search.addWidgets(widgets)
search.start()
searchClickFn()
searchFnOnce()
window.addEventListener('pjax:complete', () => {
if (!btf.isHidden($searchMask)) closeSearch()
searchClickFn()
})
if (window.pjax) {
search.on('render', () => {
window.pjax.refresh(document.getElementById('algolia-hits'))
})
}
})
source/js/search/local-search.js
+360 -360
View File
@@ -1,360 +1,360 @@
/**
* Refer to hexo-generator-searchdb
* https://github.com/next-theme/hexo-generator-searchdb/blob/main/dist/search.js
* Modified by hexo-theme-butterfly
*/
class LocalSearch {
constructor ({
path = '',
unescape = false,
top_n_per_article = 1
}) {
this.path = path
this.unescape = unescape
this.top_n_per_article = top_n_per_article
this.isfetched = false
this.datas = null
}
getIndexByWord (words, text, caseSensitive = false) {
const index = []
const included = new Set()
if (!caseSensitive) {
text = text.toLowerCase()
}
words.forEach(word => {
if (this.unescape) {
const div = document.createElement('div')
div.innerText = word
word = div.innerHTML
}
const wordLen = word.length
if (wordLen === 0) return
let startPosition = 0
let position = -1
if (!caseSensitive) {
word = word.toLowerCase()
}
while ((position = text.indexOf(word, startPosition)) > -1) {
index.push({ position, word })
included.add(word)
startPosition = position + wordLen
}
})
// Sort index by position of keyword
index.sort((left, right) => {
if (left.position !== right.position) {
return left.position - right.position
}
return right.word.length - left.word.length
})
return [index, included]
}
// Merge hits into slices
mergeIntoSlice (start, end, index) {
let item = index[0]
let { position, word } = item
const hits = []
const count = new Set()
while (position + word.length <= end && index.length !== 0) {
count.add(word)
hits.push({
position,
length: word.length
})
const wordEnd = position + word.length
// Move to next position of hit
index.shift()
while (index.length !== 0) {
item = index[0]
position = item.position
word = item.word
if (wordEnd > position) {
index.shift()
} else {
break
}
}
}
return {
hits,
start,
end,
count: count.size
}
}
// Highlight title and content
highlightKeyword (val, slice) {
let result = ''
let index = slice.start
for (const { position, length } of slice.hits) {
result += val.substring(index, position)
index = position + length
result += `<mark class="search-keyword">${val.substr(position, length)}</mark>`
}
result += val.substring(index, slice.end)
return result
}
getResultItems (keywords) {
const resultItems = []
this.datas.forEach(({ title, content, url }) => {
// The number of different keywords included in the article.
const [indexOfTitle, keysOfTitle] = this.getIndexByWord(keywords, title)
const [indexOfContent, keysOfContent] = this.getIndexByWord(keywords, content)
const includedCount = new Set([...keysOfTitle, ...keysOfContent]).size
// Show search results
const hitCount = indexOfTitle.length + indexOfContent.length
if (hitCount === 0) return
const slicesOfTitle = []
if (indexOfTitle.length !== 0) {
slicesOfTitle.push(this.mergeIntoSlice(0, title.length, indexOfTitle))
}
let slicesOfContent = []
while (indexOfContent.length !== 0) {
const item = indexOfContent[0]
const { position } = item
// Cut out 120 characters. The maxlength of .search-input is 80.
const start = Math.max(0, position - 20)
const end = Math.min(content.length, position + 100)
slicesOfContent.push(this.mergeIntoSlice(start, end, indexOfContent))
}
// Sort slices in content by included keywords' count and hits' count
slicesOfContent.sort((left, right) => {
if (left.count !== right.count) {
return right.count - left.count
} else if (left.hits.length !== right.hits.length) {
return right.hits.length - left.hits.length
}
return left.start - right.start
})
// Select top N slices in content
const upperBound = parseInt(this.top_n_per_article, 10)
if (upperBound >= 0) {
slicesOfContent = slicesOfContent.slice(0, upperBound)
}
let resultItem = ''
url = new URL(url, location.origin)
url.searchParams.append('highlight', keywords.join(' '))
if (slicesOfTitle.length !== 0) {
resultItem += `<li class="local-search-hit-item"><a href="${url.href}"><span class="search-result-title">${this.highlightKeyword(title, slicesOfTitle[0])}</span>`
} else {
resultItem += `<li class="local-search-hit-item"><a href="${url.href}"><span class="search-result-title">${title}</span>`
}
slicesOfContent.forEach(slice => {
resultItem += `<p class="search-result">${this.highlightKeyword(content, slice)}...</p></a>`
})
resultItem += '</li>'
resultItems.push({
item: resultItem,
id: resultItems.length,
hitCount,
includedCount
})
})
return resultItems
}
fetchData () {
const isXml = !this.path.endsWith('json')
fetch(this.path)
.then(response => response.text())
.then(res => {
// Get the contents from search data
this.isfetched = true
this.datas = isXml
? [...new DOMParser().parseFromString(res, 'text/xml').querySelectorAll('entry')].map(element => ({
title: element.querySelector('title').textContent,
content: element.querySelector('content').textContent,
url: element.querySelector('url').textContent
}))
: JSON.parse(res)
// Only match articles with non-empty titles
this.datas = this.datas.filter(data => data.title).map(data => {
data.title = data.title.trim()
data.content = data.content ? data.content.trim().replace(/<[^>]+>/g, '') : ''
data.url = decodeURIComponent(data.url).replace(/\/{2,}/g, '/')
return data
})
// Remove loading animation
window.dispatchEvent(new Event('search:loaded'))
})
}
// Highlight by wrapping node in mark elements with the given class name
highlightText (node, slice, className) {
const val = node.nodeValue
let index = slice.start
const children = []
for (const { position, length } of slice.hits) {
const text = document.createTextNode(val.substring(index, position))
index = position + length
const mark = document.createElement('mark')
mark.className = className
mark.appendChild(document.createTextNode(val.substr(position, length)))
children.push(text, mark)
}
node.nodeValue = val.substring(index, slice.end)
children.forEach(element => {
node.parentNode.insertBefore(element, node)
})
}
// Highlight the search words provided in the url in the text
highlightSearchWords (body) {
const params = new URL(location.href).searchParams.get('highlight')
const keywords = params ? params.split(' ') : []
if (!keywords.length || !body) return
const walk = document.createTreeWalker(body, NodeFilter.SHOW_TEXT, null)
const allNodes = []
while (walk.nextNode()) {
if (!walk.currentNode.parentNode.matches('button, select, textarea, .mermaid')) allNodes.push(walk.currentNode)
}
allNodes.forEach(node => {
const [indexOfNode] = this.getIndexByWord(keywords, node.nodeValue)
if (!indexOfNode.length) return
const slice = this.mergeIntoSlice(0, node.nodeValue.length, indexOfNode)
this.highlightText(node, slice, 'search-keyword')
})
}
}
window.addEventListener('load', () => {
// Search
const { path, top_n_per_article, unescape, languages } = GLOBAL_CONFIG.localSearch
const localSearch = new LocalSearch({
path,
top_n_per_article,
unescape
})
const input = document.querySelector('#local-search-input input')
const statsItem = document.getElementById('local-search-stats-wrap')
const $loadingStatus = document.getElementById('loading-status')
const isXml = !path.endsWith('json')
const inputEventFunction = () => {
if (!localSearch.isfetched) return
let searchText = input.value.trim().toLowerCase()
isXml && (searchText = searchText.replace(/</g, '&lt;').replace(/>/g, '&gt;'))
if (searchText !== '') $loadingStatus.innerHTML = '<i class="fas fa-spinner fa-pulse"></i>'
const keywords = searchText.split(/[-\s]+/)
const container = document.getElementById('local-search-results')
let resultItems = []
if (searchText.length > 0) {
// Perform local searching
resultItems = localSearch.getResultItems(keywords)
}
if (keywords.length === 1 && keywords[0] === '') {
container.textContent = ''
statsItem.textContent = ''
} else if (resultItems.length === 0) {
container.textContent = ''
const statsDiv = document.createElement('div')
statsDiv.className = 'search-result-stats'
statsDiv.textContent = languages.hits_empty.replace(/\$\{query}/, searchText)
statsItem.innerHTML = statsDiv.outerHTML
} else {
resultItems.sort((left, right) => {
if (left.includedCount !== right.includedCount) {
return right.includedCount - left.includedCount
} else if (left.hitCount !== right.hitCount) {
return right.hitCount - left.hitCount
}
return right.id - left.id
})
const stats = languages.hits_stats.replace(/\$\{hits}/, resultItems.length)
container.innerHTML = `<ol class="search-result-list">${resultItems.map(result => result.item).join('')}</ol>`
statsItem.innerHTML = `<hr><div class="search-result-stats">${stats}</div>`
window.pjax && window.pjax.refresh(container)
}
$loadingStatus.textContent = ''
}
let loadFlag = false
const $searchMask = document.getElementById('search-mask')
const $searchDialog = document.querySelector('#local-search .search-dialog')
// fix safari
const fixSafariHeight = () => {
if (window.innerWidth < 768) {
$searchDialog.style.setProperty('--search-height', window.innerHeight + 'px')
}
}
const openSearch = () => {
btf.overflowPaddingR.add()
btf.animateIn($searchMask, 'to_show 0.5s')
btf.animateIn($searchDialog, 'titleScale 0.5s')
setTimeout(() => { input.focus() }, 300)
if (!loadFlag) {
!localSearch.isfetched && localSearch.fetchData()
input.addEventListener('input', inputEventFunction)
loadFlag = true
}
// shortcut: ESC
document.addEventListener('keydown', function f (event) {
if (event.code === 'Escape') {
closeSearch()
document.removeEventListener('keydown', f)
}
})
fixSafariHeight()
window.addEventListener('resize', fixSafariHeight)
}
const closeSearch = () => {
btf.overflowPaddingR.remove()
btf.animateOut($searchDialog, 'search_close .5s')
btf.animateOut($searchMask, 'to_hide 0.5s')
window.removeEventListener('resize', fixSafariHeight)
}
const searchClickFn = () => {
btf.addEventListenerPjax(document.querySelector('#search-button > .search'), 'click', openSearch)
}
const searchFnOnce = () => {
document.querySelector('#local-search .search-close-button').addEventListener('click', closeSearch)
$searchMask.addEventListener('click', closeSearch)
if (GLOBAL_CONFIG.localSearch.preload) {
localSearch.fetchData()
}
localSearch.highlightSearchWords(document.getElementById('article-container'))
}
window.addEventListener('search:loaded', () => {
const $loadDataItem = document.getElementById('loading-database')
$loadDataItem.nextElementSibling.style.display = 'block'
$loadDataItem.remove()
})
searchClickFn()
searchFnOnce()
// pjax
window.addEventListener('pjax:complete', () => {
!btf.isHidden($searchMask) && closeSearch()
localSearch.highlightSearchWords(document.getElementById('article-container'))
searchClickFn()
})
})
/**
* Refer to hexo-generator-searchdb
* https://github.com/next-theme/hexo-generator-searchdb/blob/main/dist/search.js
* Modified by hexo-theme-butterfly
*/
class LocalSearch {
constructor ({
path = '',
unescape = false,
top_n_per_article = 1
}) {
this.path = path
this.unescape = unescape
this.top_n_per_article = top_n_per_article
this.isfetched = false
this.datas = null
}
getIndexByWord (words, text, caseSensitive = false) {
const index = []
const included = new Set()
if (!caseSensitive) {
text = text.toLowerCase()
}
words.forEach(word => {
if (this.unescape) {
const div = document.createElement('div')
div.innerText = word
word = div.innerHTML
}
const wordLen = word.length
if (wordLen === 0) return
let startPosition = 0
let position = -1
if (!caseSensitive) {
word = word.toLowerCase()
}
while ((position = text.indexOf(word, startPosition)) > -1) {
index.push({ position, word })
included.add(word)
startPosition = position + wordLen
}
})
// Sort index by position of keyword
index.sort((left, right) => {
if (left.position !== right.position) {
return left.position - right.position
}
return right.word.length - left.word.length
})
return [index, included]
}
// Merge hits into slices
mergeIntoSlice (start, end, index) {
let item = index[0]
let { position, word } = item
const hits = []
const count = new Set()
while (position + word.length <= end && index.length !== 0) {
count.add(word)
hits.push({
position,
length: word.length
})
const wordEnd = position + word.length
// Move to next position of hit
index.shift()
while (index.length !== 0) {
item = index[0]
position = item.position
word = item.word
if (wordEnd > position) {
index.shift()
} else {
break
}
}
}
return {
hits,
start,
end,
count: count.size
}
}
// Highlight title and content
highlightKeyword (val, slice) {
let result = ''
let index = slice.start
for (const { position, length } of slice.hits) {
result += val.substring(index, position)
index = position + length
result += `<mark class="search-keyword">${val.substr(position, length)}</mark>`
}
result += val.substring(index, slice.end)
return result
}
getResultItems (keywords) {
const resultItems = []
this.datas.forEach(({ title, content, url }) => {
// The number of different keywords included in the article.
const [indexOfTitle, keysOfTitle] = this.getIndexByWord(keywords, title)
const [indexOfContent, keysOfContent] = this.getIndexByWord(keywords, content)
const includedCount = new Set([...keysOfTitle, ...keysOfContent]).size
// Show search results
const hitCount = indexOfTitle.length + indexOfContent.length
if (hitCount === 0) return
const slicesOfTitle = []
if (indexOfTitle.length !== 0) {
slicesOfTitle.push(this.mergeIntoSlice(0, title.length, indexOfTitle))
}
let slicesOfContent = []
while (indexOfContent.length !== 0) {
const item = indexOfContent[0]
const { position } = item
// Cut out 120 characters. The maxlength of .search-input is 80.
const start = Math.max(0, position - 20)
const end = Math.min(content.length, position + 100)
slicesOfContent.push(this.mergeIntoSlice(start, end, indexOfContent))
}
// Sort slices in content by included keywords' count and hits' count
slicesOfContent.sort((left, right) => {
if (left.count !== right.count) {
return right.count - left.count
} else if (left.hits.length !== right.hits.length) {
return right.hits.length - left.hits.length
}
return left.start - right.start
})
// Select top N slices in content
const upperBound = parseInt(this.top_n_per_article, 10)
if (upperBound >= 0) {
slicesOfContent = slicesOfContent.slice(0, upperBound)
}
let resultItem = ''
url = new URL(url, location.origin)
url.searchParams.append('highlight', keywords.join(' '))
if (slicesOfTitle.length !== 0) {
resultItem += `<li class="local-search-hit-item"><a href="${url.href}"><span class="search-result-title">${this.highlightKeyword(title, slicesOfTitle[0])}</span>`
} else {
resultItem += `<li class="local-search-hit-item"><a href="${url.href}"><span class="search-result-title">${title}</span>`
}
slicesOfContent.forEach(slice => {
resultItem += `<p class="search-result">${this.highlightKeyword(content, slice)}...</p></a>`
})
resultItem += '</li>'
resultItems.push({
item: resultItem,
id: resultItems.length,
hitCount,
includedCount
})
})
return resultItems
}
fetchData () {
const isXml = !this.path.endsWith('json')
fetch(this.path)
.then(response => response.text())
.then(res => {
// Get the contents from search data
this.isfetched = true
this.datas = isXml
? [...new DOMParser().parseFromString(res, 'text/xml').querySelectorAll('entry')].map(element => ({
title: element.querySelector('title').textContent,
content: element.querySelector('content').textContent,
url: element.querySelector('url').textContent
}))
: JSON.parse(res)
// Only match articles with non-empty titles
this.datas = this.datas.filter(data => data.title).map(data => {
data.title = data.title.trim()
data.content = data.content ? data.content.trim().replace(/<[^>]+>/g, '') : ''
data.url = decodeURIComponent(data.url).replace(/\/{2,}/g, '/')
return data
})
// Remove loading animation
window.dispatchEvent(new Event('search:loaded'))
})
}
// Highlight by wrapping node in mark elements with the given class name
highlightText (node, slice, className) {
const val = node.nodeValue
let index = slice.start
const children = []
for (const { position, length } of slice.hits) {
const text = document.createTextNode(val.substring(index, position))
index = position + length
const mark = document.createElement('mark')
mark.className = className
mark.appendChild(document.createTextNode(val.substr(position, length)))
children.push(text, mark)
}
node.nodeValue = val.substring(index, slice.end)
children.forEach(element => {
node.parentNode.insertBefore(element, node)
})
}
// Highlight the search words provided in the url in the text
highlightSearchWords (body) {
const params = new URL(location.href).searchParams.get('highlight')
const keywords = params ? params.split(' ') : []
if (!keywords.length || !body) return
const walk = document.createTreeWalker(body, NodeFilter.SHOW_TEXT, null)
const allNodes = []
while (walk.nextNode()) {
if (!walk.currentNode.parentNode.matches('button, select, textarea, .mermaid')) allNodes.push(walk.currentNode)
}
allNodes.forEach(node => {
const [indexOfNode] = this.getIndexByWord(keywords, node.nodeValue)
if (!indexOfNode.length) return
const slice = this.mergeIntoSlice(0, node.nodeValue.length, indexOfNode)
this.highlightText(node, slice, 'search-keyword')
})
}
}
window.addEventListener('load', () => {
// Search
const { path, top_n_per_article, unescape, languages } = GLOBAL_CONFIG.localSearch
const localSearch = new LocalSearch({
path,
top_n_per_article,
unescape
})
const input = document.querySelector('#local-search-input input')
const statsItem = document.getElementById('local-search-stats-wrap')
const $loadingStatus = document.getElementById('loading-status')
const isXml = !path.endsWith('json')
const inputEventFunction = () => {
if (!localSearch.isfetched) return
let searchText = input.value.trim().toLowerCase()
isXml && (searchText = searchText.replace(/</g, '&lt;').replace(/>/g, '&gt;'))
if (searchText !== '') $loadingStatus.innerHTML = '<i class="fas fa-spinner fa-pulse"></i>'
const keywords = searchText.split(/[-\s]+/)
const container = document.getElementById('local-search-results')
let resultItems = []
if (searchText.length > 0) {
// Perform local searching
resultItems = localSearch.getResultItems(keywords)
}
if (keywords.length === 1 && keywords[0] === '') {
container.textContent = ''
statsItem.textContent = ''
} else if (resultItems.length === 0) {
container.textContent = ''
const statsDiv = document.createElement('div')
statsDiv.className = 'search-result-stats'
statsDiv.textContent = languages.hits_empty.replace(/\$\{query}/, searchText)
statsItem.innerHTML = statsDiv.outerHTML
} else {
resultItems.sort((left, right) => {
if (left.includedCount !== right.includedCount) {
return right.includedCount - left.includedCount
} else if (left.hitCount !== right.hitCount) {
return right.hitCount - left.hitCount
}
return right.id - left.id
})
const stats = languages.hits_stats.replace(/\$\{hits}/, resultItems.length)
container.innerHTML = `<ol class="search-result-list">${resultItems.map(result => result.item).join('')}</ol>`
statsItem.innerHTML = `<hr><div class="search-result-stats">${stats}</div>`
window.pjax && window.pjax.refresh(container)
}
$loadingStatus.textContent = ''
}
let loadFlag = false
const $searchMask = document.getElementById('search-mask')
const $searchDialog = document.querySelector('#local-search .search-dialog')
// fix safari
const fixSafariHeight = () => {
if (window.innerWidth < 768) {
$searchDialog.style.setProperty('--search-height', window.innerHeight + 'px')
}
}
const openSearch = () => {
btf.overflowPaddingR.add()
btf.animateIn($searchMask, 'to_show 0.5s')
btf.animateIn($searchDialog, 'titleScale 0.5s')
setTimeout(() => { input.focus() }, 300)
if (!loadFlag) {
!localSearch.isfetched && localSearch.fetchData()
input.addEventListener('input', inputEventFunction)
loadFlag = true
}
// shortcut: ESC
document.addEventListener('keydown', function f (event) {
if (event.code === 'Escape') {
closeSearch()
document.removeEventListener('keydown', f)
}
})
fixSafariHeight()
window.addEventListener('resize', fixSafariHeight)
}
const closeSearch = () => {
btf.overflowPaddingR.remove()
btf.animateOut($searchDialog, 'search_close .5s')
btf.animateOut($searchMask, 'to_hide 0.5s')
window.removeEventListener('resize', fixSafariHeight)
}
const searchClickFn = () => {
btf.addEventListenerPjax(document.querySelector('#search-button > .search'), 'click', openSearch)
}
const searchFnOnce = () => {
document.querySelector('#local-search .search-close-button').addEventListener('click', closeSearch)
$searchMask.addEventListener('click', closeSearch)
if (GLOBAL_CONFIG.localSearch.preload) {
localSearch.fetchData()
}
localSearch.highlightSearchWords(document.getElementById('article-container'))
}
window.addEventListener('search:loaded', () => {
const $loadDataItem = document.getElementById('loading-database')
$loadDataItem.nextElementSibling.style.display = 'block'
$loadDataItem.remove()
})
searchClickFn()
searchFnOnce()
// pjax
window.addEventListener('pjax:complete', () => {
!btf.isHidden($searchMask) && closeSearch()
localSearch.highlightSearchWords(document.getElementById('article-container'))
searchClickFn()
})
})
source/js/tw_cn.js
+117 -117
View File
File diff suppressed because one or more lines are too long
source/js/utils.js
+313 -313
View File
@@ -1,313 +1,313 @@
(() => {
const btfFn = {
debounce: (func, wait = 0, immediate = false) => {
let timeout
return (...args) => {
const later = () => {
timeout = null
if (!immediate) func(...args)
}
const callNow = immediate && !timeout
clearTimeout(timeout)
timeout = setTimeout(later, wait)
if (callNow) func(...args)
}
},
throttle: function (func, wait, options = {}) {
let timeout, context, args
let previous = 0
const later = () => {
previous = options.leading === false ? 0 : new Date().getTime()
timeout = null
func.apply(context, args)
if (!timeout) context = args = null
}
const throttled = (...params) => {
const now = new Date().getTime()
if (!previous && options.leading === false) previous = now
const remaining = wait - (now - previous)
context = this
args = params
if (remaining <= 0 || remaining > wait) {
if (timeout) {
clearTimeout(timeout)
timeout = null
}
previous = now
func.apply(context, args)
if (!timeout) context = args = null
} else if (!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaining)
}
}
return throttled
},
overflowPaddingR: {
add: () => {
const paddingRight = window.innerWidth - document.body.clientWidth
if (paddingRight > 0) {
document.body.style.paddingRight = `${paddingRight}px`
document.body.style.overflow = 'hidden'
const menuElement = document.querySelector('#page-header.nav-fixed #menus')
if (menuElement) {
menuElement.style.paddingRight = `${paddingRight}px`
}
}
},
remove: () => {
document.body.style.paddingRight = ''
document.body.style.overflow = ''
const menuElement = document.querySelector('#page-header.nav-fixed #menus')
if (menuElement) {
menuElement.style.paddingRight = ''
}
}
},
snackbarShow: (text, showAction = false, duration = 2000) => {
const { position, bgLight, bgDark } = GLOBAL_CONFIG.Snackbar
const bg = document.documentElement.getAttribute('data-theme') === 'light' ? bgLight : bgDark
Snackbar.show({
text,
backgroundColor: bg,
showAction,
duration,
pos: position,
customClass: 'snackbar-css'
})
},
diffDate: (inputDate, more = false) => {
const dateNow = new Date()
const datePost = new Date(inputDate)
const diffMs = dateNow - datePost
const diffSec = diffMs / 1000
const diffMin = diffSec / 60
const diffHour = diffMin / 60
const diffDay = diffHour / 24
const diffMonth = diffDay / 30
const { dateSuffix } = GLOBAL_CONFIG
if (!more) return Math.floor(diffDay)
if (diffMonth > 12) return datePost.toISOString().slice(0, 10)
if (diffMonth >= 1) return `${Math.floor(diffMonth)} ${dateSuffix.month}`
if (diffDay >= 1) return `${Math.floor(diffDay)} ${dateSuffix.day}`
if (diffHour >= 1) return `${Math.floor(diffHour)} ${dateSuffix.hour}`
if (diffMin >= 1) return `${Math.floor(diffMin)} ${dateSuffix.min}`
return dateSuffix.just
},
loadComment: (dom, callback) => {
if ('IntersectionObserver' in window) {
const observerItem = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
callback()
observerItem.disconnect()
}
}, { threshold: [0] })
observerItem.observe(dom)
} else {
callback()
}
},
scrollToDest: (pos, time = 500) => {
const currentPos = window.scrollY
const isNavFixed = document.getElementById('page-header').classList.contains('fixed')
if (currentPos > pos || isNavFixed) pos = pos - 70
if ('scrollBehavior' in document.documentElement.style) {
window.scrollTo({
top: pos,
behavior: 'smooth'
})
return
}
const startTime = performance.now()
const animate = currentTime => {
const timeElapsed = currentTime - startTime
const progress = Math.min(timeElapsed / time, 1)
window.scrollTo(0, currentPos + (pos - currentPos) * progress)
if (progress < 1) {
requestAnimationFrame(animate)
}
}
requestAnimationFrame(animate)
},
animateIn: (ele, animation) => {
ele.style.display = 'block'
ele.style.animation = animation
},
animateOut: (ele, animation) => {
const handleAnimationEnd = () => {
ele.style.display = ''
ele.style.animation = ''
ele.removeEventListener('animationend', handleAnimationEnd)
}
ele.addEventListener('animationend', handleAnimationEnd)
ele.style.animation = animation
},
wrap: (selector, eleType, options) => {
const createEle = document.createElement(eleType)
for (const [key, value] of Object.entries(options)) {
createEle.setAttribute(key, value)
}
selector.parentNode.insertBefore(createEle, selector)
createEle.appendChild(selector)
},
isHidden: ele => ele.offsetHeight === 0 && ele.offsetWidth === 0,
getEleTop: ele => {
let actualTop = ele.offsetTop
let current = ele.offsetParent
while (current !== null) {
actualTop += current.offsetTop
current = current.offsetParent
}
return actualTop
},
loadLightbox: ele => {
const service = GLOBAL_CONFIG.lightbox
if (service === 'medium_zoom') {
mediumZoom(ele, { background: 'var(--zoom-bg)' })
}
if (service === 'fancybox') {
Array.from(ele).forEach(i => {
if (i.parentNode.tagName !== 'A') {
const dataSrc = i.dataset.lazySrc || i.src
const dataCaption = i.title || i.alt || ''
btf.wrap(i, 'a', { href: dataSrc, 'data-fancybox': 'gallery', 'data-caption': dataCaption, 'data-thumb': dataSrc })
}
})
if (!window.fancyboxRun) {
Fancybox.bind('[data-fancybox]', {
Hash: false,
Thumbs: {
showOnStart: false
},
Images: {
Panzoom: {
maxScale: 4
}
},
Carousel: {
transition: 'slide'
},
Toolbar: {
display: {
left: ['infobar'],
middle: [
'zoomIn',
'zoomOut',
'toggle1to1',
'rotateCCW',
'rotateCW',
'flipX',
'flipY'
],
right: ['slideshow', 'thumbs', 'close']
}
}
})
window.fancyboxRun = true
}
}
},
setLoading: {
add: ele => {
const html = `
<div class="loading-container">
<div class="loading-item">
<div></div><div></div><div></div><div></div><div></div>
</div>
</div>
`
ele.insertAdjacentHTML('afterend', html)
},
remove: ele => {
ele.nextElementSibling.remove()
}
},
updateAnchor: anchor => {
if (anchor !== window.location.hash) {
if (!anchor) anchor = location.pathname
const title = GLOBAL_CONFIG_SITE.title
window.history.replaceState({
url: location.href,
title
}, title, anchor)
}
},
getScrollPercent: (() => {
let docHeight, winHeight, headerHeight, contentMath
return (currentTop, ele) => {
if (!docHeight || ele.clientHeight !== docHeight) {
docHeight = ele.clientHeight
winHeight = window.innerHeight
headerHeight = ele.offsetTop
contentMath = Math.max(docHeight - winHeight, document.documentElement.scrollHeight - winHeight)
}
const scrollPercent = (currentTop - headerHeight) / contentMath
return Math.max(0, Math.min(100, Math.round(scrollPercent * 100)))
}
})(),
addEventListenerPjax: (ele, event, fn, option = false) => {
ele.addEventListener(event, fn, option)
btf.addGlobalFn('pjaxSendOnce', () => {
ele.removeEventListener(event, fn, option)
})
},
removeGlobalFnEvent: (key, parent = window) => {
const globalFn = parent.globalFn || {}
const keyObj = globalFn[key]
if (!keyObj) return
Object.keys(keyObj).forEach(i => keyObj[i]())
delete globalFn[key]
},
switchComments: (el = document, path) => {
const switchBtn = el.querySelector('#switch-btn')
if (!switchBtn) return
let switchDone = false
const postComment = el.querySelector('#post-comment')
const handleSwitchBtn = () => {
postComment.classList.toggle('move')
if (!switchDone && typeof loadOtherComment === 'function') {
switchDone = true
loadOtherComment(el, path)
}
}
btf.addEventListenerPjax(switchBtn, 'click', handleSwitchBtn)
}
}
window.btf = { ...window.btf, ...btfFn }
})()
(() => {
const btfFn = {
debounce: (func, wait = 0, immediate = false) => {
let timeout
return (...args) => {
const later = () => {
timeout = null
if (!immediate) func(...args)
}
const callNow = immediate && !timeout
clearTimeout(timeout)
timeout = setTimeout(later, wait)
if (callNow) func(...args)
}
},
throttle: function (func, wait, options = {}) {
let timeout, context, args
let previous = 0
const later = () => {
previous = options.leading === false ? 0 : new Date().getTime()
timeout = null
func.apply(context, args)
if (!timeout) context = args = null
}
const throttled = (...params) => {
const now = new Date().getTime()
if (!previous && options.leading === false) previous = now
const remaining = wait - (now - previous)
context = this
args = params
if (remaining <= 0 || remaining > wait) {
if (timeout) {
clearTimeout(timeout)
timeout = null
}
previous = now
func.apply(context, args)
if (!timeout) context = args = null
} else if (!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaining)
}
}
return throttled
},
overflowPaddingR: {
add: () => {
const paddingRight = window.innerWidth - document.body.clientWidth
if (paddingRight > 0) {
document.body.style.paddingRight = `${paddingRight}px`
document.body.style.overflow = 'hidden'
const menuElement = document.querySelector('#page-header.nav-fixed #menus')
if (menuElement) {
menuElement.style.paddingRight = `${paddingRight}px`
}
}
},
remove: () => {
document.body.style.paddingRight = ''
document.body.style.overflow = ''
const menuElement = document.querySelector('#page-header.nav-fixed #menus')
if (menuElement) {
menuElement.style.paddingRight = ''
}
}
},
snackbarShow: (text, showAction = false, duration = 2000) => {
const { position, bgLight, bgDark } = GLOBAL_CONFIG.Snackbar
const bg = document.documentElement.getAttribute('data-theme') === 'light' ? bgLight : bgDark
Snackbar.show({
text,
backgroundColor: bg,
showAction,
duration,
pos: position,
customClass: 'snackbar-css'
})
},
diffDate: (inputDate, more = false) => {
const dateNow = new Date()
const datePost = new Date(inputDate)
const diffMs = dateNow - datePost
const diffSec = diffMs / 1000
const diffMin = diffSec / 60
const diffHour = diffMin / 60
const diffDay = diffHour / 24
const diffMonth = diffDay / 30
const { dateSuffix } = GLOBAL_CONFIG
if (!more) return Math.floor(diffDay)
if (diffMonth > 12) return datePost.toISOString().slice(0, 10)
if (diffMonth >= 1) return `${Math.floor(diffMonth)} ${dateSuffix.month}`
if (diffDay >= 1) return `${Math.floor(diffDay)} ${dateSuffix.day}`
if (diffHour >= 1) return `${Math.floor(diffHour)} ${dateSuffix.hour}`
if (diffMin >= 1) return `${Math.floor(diffMin)} ${dateSuffix.min}`
return dateSuffix.just
},
loadComment: (dom, callback) => {
if ('IntersectionObserver' in window) {
const observerItem = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
callback()
observerItem.disconnect()
}
}, { threshold: [0] })
observerItem.observe(dom)
} else {
callback()
}
},
scrollToDest: (pos, time = 500) => {
const currentPos = window.scrollY
const isNavFixed = document.getElementById('page-header').classList.contains('fixed')
if (currentPos > pos || isNavFixed) pos = pos - 70
if ('scrollBehavior' in document.documentElement.style) {
window.scrollTo({
top: pos,
behavior: 'smooth'
})
return
}
const startTime = performance.now()
const animate = currentTime => {
const timeElapsed = currentTime - startTime
const progress = Math.min(timeElapsed / time, 1)
window.scrollTo(0, currentPos + (pos - currentPos) * progress)
if (progress < 1) {
requestAnimationFrame(animate)
}
}
requestAnimationFrame(animate)
},
animateIn: (ele, animation) => {
ele.style.display = 'block'
ele.style.animation = animation
},
animateOut: (ele, animation) => {
const handleAnimationEnd = () => {
ele.style.display = ''
ele.style.animation = ''
ele.removeEventListener('animationend', handleAnimationEnd)
}
ele.addEventListener('animationend', handleAnimationEnd)
ele.style.animation = animation
},
wrap: (selector, eleType, options) => {
const createEle = document.createElement(eleType)
for (const [key, value] of Object.entries(options)) {
createEle.setAttribute(key, value)
}
selector.parentNode.insertBefore(createEle, selector)
createEle.appendChild(selector)
},
isHidden: ele => ele.offsetHeight === 0 && ele.offsetWidth === 0,
getEleTop: ele => {
let actualTop = ele.offsetTop
let current = ele.offsetParent
while (current !== null) {
actualTop += current.offsetTop
current = current.offsetParent
}
return actualTop
},
loadLightbox: ele => {
const service = GLOBAL_CONFIG.lightbox
if (service === 'medium_zoom') {
mediumZoom(ele, { background: 'var(--zoom-bg)' })
}
if (service === 'fancybox') {
Array.from(ele).forEach(i => {
if (i.parentNode.tagName !== 'A') {
const dataSrc = i.dataset.lazySrc || i.src
const dataCaption = i.title || i.alt || ''
btf.wrap(i, 'a', { href: dataSrc, 'data-fancybox': 'gallery', 'data-caption': dataCaption, 'data-thumb': dataSrc })
}
})
if (!window.fancyboxRun) {
Fancybox.bind('[data-fancybox]', {
Hash: false,
Thumbs: {
showOnStart: false
},
Images: {
Panzoom: {
maxScale: 4
}
},
Carousel: {
transition: 'slide'
},
Toolbar: {
display: {
left: ['infobar'],
middle: [
'zoomIn',
'zoomOut',
'toggle1to1',
'rotateCCW',
'rotateCW',
'flipX',
'flipY'
],
right: ['slideshow', 'thumbs', 'close']
}
}
})
window.fancyboxRun = true
}
}
},
setLoading: {
add: ele => {
const html = `
<div class="loading-container">
<div class="loading-item">
<div></div><div></div><div></div><div></div><div></div>
</div>
</div>
`
ele.insertAdjacentHTML('afterend', html)
},
remove: ele => {
ele.nextElementSibling.remove()
}
},
updateAnchor: anchor => {
if (anchor !== window.location.hash) {
if (!anchor) anchor = location.pathname
const title = GLOBAL_CONFIG_SITE.title
window.history.replaceState({
url: location.href,
title
}, title, anchor)
}
},
getScrollPercent: (() => {
let docHeight, winHeight, headerHeight, contentMath
return (currentTop, ele) => {
if (!docHeight || ele.clientHeight !== docHeight) {
docHeight = ele.clientHeight
winHeight = window.innerHeight
headerHeight = ele.offsetTop
contentMath = Math.max(docHeight - winHeight, document.documentElement.scrollHeight - winHeight)
}
const scrollPercent = (currentTop - headerHeight) / contentMath
return Math.max(0, Math.min(100, Math.round(scrollPercent * 100)))
}
})(),
addEventListenerPjax: (ele, event, fn, option = false) => {
ele.addEventListener(event, fn, option)
btf.addGlobalFn('pjaxSendOnce', () => {
ele.removeEventListener(event, fn, option)
})
},
removeGlobalFnEvent: (key, parent = window) => {
const globalFn = parent.globalFn || {}
const keyObj = globalFn[key]
if (!keyObj) return
Object.keys(keyObj).forEach(i => keyObj[i]())
delete globalFn[key]
},
switchComments: (el = document, path) => {
const switchBtn = el.querySelector('#switch-btn')
if (!switchBtn) return
let switchDone = false
const postComment = el.querySelector('#post-comment')
const handleSwitchBtn = () => {
postComment.classList.toggle('move')
if (!switchDone && typeof loadOtherComment === 'function') {
switchDone = true
loadOtherComment(el, path)
}
}
btf.addEventListenerPjax(switchBtn, 'click', handleSwitchBtn)
}
}
window.btf = { ...window.btf, ...btfFn }
})()