提交主题
This commit is contained in:
@@ -0,0 +1,253 @@
|
||||
.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
|
||||
|
||||
// card hover
|
||||
.cardHover
|
||||
border-radius: 8px
|
||||
background: var(--card-bg)
|
||||
box-shadow: var(--card-box-shadow)
|
||||
transition: all .3s
|
||||
|
||||
&: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
|
||||
img
|
||||
opacity: .8
|
||||
transform: scale(1.1)
|
||||
|
||||
img
|
||||
position: absolute
|
||||
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
|
||||
|
||||
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}
|
||||
|
||||
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
|
||||
animation: header-effect 1s
|
||||
|
||||
#site-title,
|
||||
#site-subtitle
|
||||
animation: titleScale 1s
|
||||
|
||||
#nav.show
|
||||
animation: headerNoOpacity 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 / 5)s
|
||||
|
||||
.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%
|
||||
top: 0
|
||||
opacity: .4
|
||||
|
||||
50%
|
||||
top: -16px
|
||||
opacity: 1
|
||||
|
||||
100%
|
||||
top: 0
|
||||
opacity: .4
|
||||
|
||||
@keyframes header-effect
|
||||
0%
|
||||
opacity: 0
|
||||
transform: translateY(-50px)
|
||||
|
||||
100%
|
||||
opacity: 1
|
||||
transform: translateY(0)
|
||||
|
||||
@keyframes headerNoOpacity
|
||||
0%
|
||||
transform: translateY(-50px)
|
||||
|
||||
100%
|
||||
transform: translateY(0)
|
||||
|
||||
@keyframes bottom-top
|
||||
0%
|
||||
margin-top: 50px
|
||||
opacity: 0
|
||||
|
||||
100%
|
||||
margin-top: 0
|
||||
opacity: 1
|
||||
|
||||
@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)
|
||||
@@ -0,0 +1,220 @@
|
||||
: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-result-title: $search-result-title
|
||||
--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
|
||||
--sidebar-bg: $sidebar-background
|
||||
--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
|
||||
|
||||
body
|
||||
position: relative
|
||||
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)
|
||||
|
||||
if !hexo-config('copy.enable')
|
||||
user-select: none
|
||||
|
||||
// scrollbar - chrome/safari
|
||||
*::-webkit-scrollbar
|
||||
width: 8px
|
||||
height: 8px
|
||||
|
||||
*::-webkit-scrollbar-thumb
|
||||
background: var(--scrollbar-color)
|
||||
|
||||
*::-webkit-scrollbar-track
|
||||
background-color: transparent
|
||||
|
||||
// scrollbar - firefox
|
||||
*
|
||||
scrollbar-width: thin
|
||||
scrollbar-color: var(--scrollbar-color) transparent
|
||||
|
||||
input::placeholder
|
||||
color: var(--font-color)
|
||||
|
||||
if $web-bg
|
||||
#web_bg
|
||||
position: fixed
|
||||
z-index: -999
|
||||
width: 100%
|
||||
height: 100%
|
||||
background: $web-bg
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
.table-wrap
|
||||
overflow-x: scroll
|
||||
margin: 0 0 20px
|
||||
|
||||
table
|
||||
display: table
|
||||
width: 100%
|
||||
border-spacing: 0
|
||||
border-collapse: collapse
|
||||
empty-cells: show
|
||||
|
||||
thead
|
||||
background: alpha($table-thead-bg, 10%)
|
||||
|
||||
th,
|
||||
td
|
||||
padding: 6px 12px
|
||||
border: 1px solid var(--light-grey)
|
||||
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
|
||||
|
||||
.is-center
|
||||
text-align: center
|
||||
|
||||
.copy-true
|
||||
user-select: all
|
||||
|
||||
.pull-left
|
||||
float: left
|
||||
|
||||
.pull-right
|
||||
float: 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: 12px 15px
|
||||
border-left: 3px solid $blockquote-padding-color
|
||||
background-color: var(--blockquote-bg)
|
||||
color: var(--blockquote-color)
|
||||
|
||||
footer
|
||||
cite
|
||||
&:before
|
||||
padding: 0 5px
|
||||
content: '—'
|
||||
|
||||
& > :last-child
|
||||
margin-bottom: 0 !important
|
||||
@@ -0,0 +1,209 @@
|
||||
$highlight_theme = hexo-config('highlight_theme')
|
||||
wordWrap = $highlight_enable && !$highlight_line_number && hexo-config('code_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))
|
||||
|
||||
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
|
||||
|
||||
#article-container
|
||||
pre,
|
||||
code
|
||||
font-size: $code-font-size
|
||||
font-family: $code-font-family !important
|
||||
|
||||
code
|
||||
padding: 2px 4px
|
||||
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
|
||||
|
||||
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)
|
||||
|
||||
.highlight-tools
|
||||
position: relative
|
||||
display: flex
|
||||
align-items: center
|
||||
overflow: hidden
|
||||
min-height: 24px
|
||||
height: 2.15em
|
||||
background: var(--hltools-bg)
|
||||
color: var(--hltools-color)
|
||||
font-size: $code-font-size
|
||||
|
||||
&.closed ~ *
|
||||
display: none
|
||||
|
||||
.expand
|
||||
position: absolute
|
||||
padding: .57em .7em
|
||||
cursor: pointer
|
||||
transition: transform .3s
|
||||
|
||||
& + .code-lang
|
||||
left: 1.7em
|
||||
|
||||
&.closed
|
||||
transition: all .3s
|
||||
transform: rotate(-90deg) !important
|
||||
|
||||
.code-lang
|
||||
position: absolute
|
||||
left: 14px
|
||||
text-transform: uppercase
|
||||
font-weight: bold
|
||||
font-size: 1.15em
|
||||
user-select: none
|
||||
|
||||
.copy-notice
|
||||
position: absolute
|
||||
right: 2.4em
|
||||
opacity: 0
|
||||
transition: opacity .4s
|
||||
|
||||
.copy-button
|
||||
position: absolute
|
||||
right: 14px
|
||||
cursor: pointer
|
||||
transition: color .2s
|
||||
|
||||
&:hover
|
||||
color: $theme-color
|
||||
|
||||
.gutter
|
||||
user-select: none
|
||||
|
||||
.gist table
|
||||
width: auto
|
||||
|
||||
td
|
||||
border: none
|
||||
|
||||
if $highlight_theme == 'mac' || ($highlight_theme == 'mac light')
|
||||
figure.highlight
|
||||
margin: 0 0 24px
|
||||
border-radius: 7px
|
||||
box-shadow: 0 5px 10px 0 $highlight-mac-border
|
||||
-webkit-transform: translateZ(0)
|
||||
|
||||
.highlight-tools
|
||||
&:after
|
||||
position: absolute
|
||||
left: 14px
|
||||
width: 12px
|
||||
height: 12px
|
||||
border-radius: 50%
|
||||
background: #fc625d
|
||||
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b
|
||||
content: ' '
|
||||
|
||||
.expand
|
||||
right: 0
|
||||
|
||||
&.closed
|
||||
transition: all .3s
|
||||
transform: rotate(90deg) !important
|
||||
|
||||
& ~ .copy-notice
|
||||
right: 3.45em
|
||||
|
||||
& ~ .copy-button
|
||||
right: 2.1em
|
||||
|
||||
.code-lang
|
||||
left: 75px
|
||||
|
||||
if hexo-config('highlight_height_limit')
|
||||
.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('highlight_height_limit'), px)
|
||||
|
||||
@keyframes code-expand-key
|
||||
0%
|
||||
opacity: .6
|
||||
|
||||
50%
|
||||
opacity: .1
|
||||
|
||||
100%
|
||||
opacity: .6
|
||||
@@ -0,0 +1,79 @@
|
||||
figure.highlight
|
||||
table
|
||||
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
|
||||
@@ -0,0 +1,39 @@
|
||||
if $highlight_theme != false
|
||||
@require 'diff'
|
||||
|
||||
#article-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%
|
||||
@@ -0,0 +1,302 @@
|
||||
if $highlight_theme == 'light' || ($highlight_theme == 'mac 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' || ($highlight_theme == 'mac')
|
||||
// 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
|
||||
@@ -0,0 +1,22 @@
|
||||
if $prismjs_line_number
|
||||
@require 'line-number'
|
||||
|
||||
if $highlight_theme != false
|
||||
@require 'diff'
|
||||
|
||||
#article-container
|
||||
pre[class*='language-']
|
||||
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
|
||||
@@ -0,0 +1,41 @@
|
||||
#article-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_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
|
||||
|
||||
& > 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
|
||||
@@ -0,0 +1,119 @@
|
||||
if $highlight_theme == 'darker' || ($highlight_theme == 'mac')
|
||||
$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-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-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_theme == 'mac 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)
|
||||
@@ -0,0 +1,410 @@
|
||||
#aside-content
|
||||
width: 26%
|
||||
|
||||
+minWidth900()
|
||||
if hexo-config('aside.position') == 'right'
|
||||
padding-left: 15px
|
||||
else
|
||||
padding-right: 15px
|
||||
|
||||
+maxWidth900()
|
||||
width: 100%
|
||||
|
||||
> .card-widget:first-child
|
||||
margin-top: 0
|
||||
|
||||
+maxWidth900()
|
||||
margin-top: 20px
|
||||
|
||||
.card-widget
|
||||
@extend .cardHover
|
||||
position: relative
|
||||
overflow: hidden
|
||||
margin-top: 20px
|
||||
padding: 20px 24px
|
||||
|
||||
if hexo-config('aside.mobile') == false
|
||||
+maxWidth768()
|
||||
&:not(#card-toc)
|
||||
display: none
|
||||
|
||||
.card-info
|
||||
.author-info
|
||||
&__name
|
||||
font-weight: 500
|
||||
font-size: 1.57em
|
||||
|
||||
&__description
|
||||
margin-top: -.42em
|
||||
|
||||
.card-info-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(540deg)
|
||||
|
||||
#card-info-btn
|
||||
display: block
|
||||
margin-top: 14px
|
||||
background-color: var(--btn-bg)
|
||||
color: var(--btn-color)
|
||||
text-align: center
|
||||
line-height: 2.4
|
||||
|
||||
&: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
|
||||
|
||||
&: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 = 4.2em
|
||||
height: w
|
||||
|
||||
& > img
|
||||
@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: $theme-meta-color
|
||||
font-size: 85%
|
||||
|
||||
& > .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
|
||||
padding: 3px 10px
|
||||
color: var(--font-color)
|
||||
transition: all .4s
|
||||
|
||||
&:hover
|
||||
padding: 3px 17px
|
||||
background-color: var(--text-bg-hover)
|
||||
|
||||
span
|
||||
@extend .limit-one-line
|
||||
|
||||
&:first-child
|
||||
flex: 1
|
||||
|
||||
.card-categories
|
||||
.card-category-list
|
||||
&.child
|
||||
padding: 0 0 0 16px
|
||||
|
||||
> .parent
|
||||
> a
|
||||
.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)
|
||||
|
||||
&.expand
|
||||
transform: rotate(-90deg)
|
||||
|
||||
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: -100%
|
||||
bottom: 30px
|
||||
z-index: 100
|
||||
max-width: $toc-mobile-maxWidth
|
||||
max-height: calc(100% - 60px)
|
||||
width: $toc-mobile-width
|
||||
opacity: 0
|
||||
transition: initial
|
||||
transform-origin: right bottom
|
||||
|
||||
.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)
|
||||
|
||||
+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 6px
|
||||
color: var(--toc-link-color)
|
||||
transition: all .2s ease-in-out
|
||||
|
||||
&:hover
|
||||
color: $theme-color
|
||||
|
||||
&.active
|
||||
background: $theme-toc-color
|
||||
color: $toc-active-color
|
||||
|
||||
:only-child
|
||||
> .card-widget
|
||||
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)
|
||||
|
||||
.length-num
|
||||
margin-top: -.32em
|
||||
color: var(--text-highlight-color)
|
||||
font-size: 1.4em
|
||||
|
||||
@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('newest_comments.sort_order')
|
||||
#card-newest-comments
|
||||
order: hexo-config('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')
|
||||
@@ -0,0 +1,17 @@
|
||||
// chat
|
||||
if hexo-config('chat_btn') == true && hexo-config('chatra.enable')
|
||||
#chatra:not(.chatra--expanded)
|
||||
visibility: hidden !important
|
||||
width: 1px !important
|
||||
height: 1px !important
|
||||
opacity: 0 !important
|
||||
pointer-events: none
|
||||
|
||||
if hexo-config('chat_btn') == true && hexo-config('messenger.enable')
|
||||
.fb_dialog,
|
||||
.fb-customerchat
|
||||
visibility: hidden !important
|
||||
width: 1px !important
|
||||
height: 1px !important
|
||||
opacity: 0 !important
|
||||
pointer-events: none
|
||||
@@ -0,0 +1,64 @@
|
||||
#post-comment
|
||||
.comment-head
|
||||
margin-bottom: 20px
|
||||
|
||||
.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
|
||||
|
||||
&.move
|
||||
background-color: $comments-switch-second-text
|
||||
|
||||
&:before
|
||||
transform: translateX(20px)
|
||||
|
||||
.comment-wrap
|
||||
> div:nth-child(2)
|
||||
display: none
|
||||
@@ -0,0 +1,35 @@
|
||||
#footer
|
||||
position: relative
|
||||
background: $light-blue
|
||||
background-attachment: scroll
|
||||
background-position: bottom
|
||||
background-size: cover
|
||||
|
||||
if hexo-config('footer_bg') != false
|
||||
&:before
|
||||
position: absolute
|
||||
width: 100%
|
||||
height: 100%
|
||||
background-color: alpha($dark-black, .5)
|
||||
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
|
||||
@@ -0,0 +1,376 @@
|
||||
#page-header
|
||||
position: relative
|
||||
width: 100%
|
||||
background-color: $light-blue
|
||||
background-position: center center
|
||||
background-size: cover
|
||||
background-repeat: no-repeat
|
||||
transition: all .5s
|
||||
|
||||
&:not(.not-top-img):before
|
||||
position: absolute
|
||||
width: 100%
|
||||
height: 100%
|
||||
background-color: alpha($dark-black, .3)
|
||||
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
|
||||
width: 300px
|
||||
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: 0
|
||||
width: 100%
|
||||
cursor: pointer
|
||||
|
||||
.scroll-down-effects
|
||||
position: relative
|
||||
width: 100%
|
||||
color: var(--light-grey)
|
||||
font-size: 30px
|
||||
|
||||
// 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
|
||||
|
||||
&:before
|
||||
background-color: alpha($dark-black, .5)
|
||||
|
||||
#post-info
|
||||
position: absolute
|
||||
bottom: 100px
|
||||
padding: 0 8%
|
||||
width: 100%
|
||||
text-align: center
|
||||
|
||||
+maxWidth900()
|
||||
bottom: 30px
|
||||
text-align: left
|
||||
|
||||
+maxWidth768()
|
||||
bottom: 22px
|
||||
padding: 0 22px
|
||||
|
||||
&.not-top-img
|
||||
margin-bottom: 10px
|
||||
height: 60px
|
||||
background: 0
|
||||
|
||||
#nav
|
||||
background: rgba(255, 255, 255, .8)
|
||||
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, .6)
|
||||
|
||||
a
|
||||
color: var(--font-color)
|
||||
text-shadow: none
|
||||
|
||||
&.nav-fixed
|
||||
#nav
|
||||
position: fixed
|
||||
top: -60px
|
||||
z-index: 91
|
||||
background: rgba(255, 255, 255, .8)
|
||||
box-shadow: 0 5px 6px -5px alpha($grey, .6)
|
||||
transition: transform .2s ease-in-out, opacity .2s ease-in-out
|
||||
|
||||
a,
|
||||
#site-name,
|
||||
#toggle-menu
|
||||
color: var(--font-color)
|
||||
text-shadow: none
|
||||
|
||||
&:hover
|
||||
color: $light-blue
|
||||
|
||||
&.nav-visible
|
||||
#nav
|
||||
transition: all .5s
|
||||
transform: translate3d(0, 100%, 0)
|
||||
|
||||
& + .layout
|
||||
& > .aside-content > .sticky_layout
|
||||
top: 70px
|
||||
transition: top .5s
|
||||
|
||||
#page
|
||||
h1.page-title
|
||||
margin: 8px 0 20px
|
||||
|
||||
// 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_name
|
||||
flex: 1
|
||||
|
||||
#toggle-menu
|
||||
display: none
|
||||
padding: 2px 0 0 6px
|
||||
vertical-align: top
|
||||
|
||||
&:hover
|
||||
color: var(--white)
|
||||
|
||||
a
|
||||
color: var(--light-grey)
|
||||
|
||||
&:hover
|
||||
color: var(--white)
|
||||
|
||||
#site-name
|
||||
text-shadow: 2px 2px 4px rgba($dark-black, .15)
|
||||
font-weight: bold
|
||||
cursor: pointer
|
||||
|
||||
.menus_items
|
||||
display: inline
|
||||
|
||||
.menus_item
|
||||
position: relative
|
||||
display: inline-block
|
||||
padding: 0 0 0 14px
|
||||
|
||||
&:hover
|
||||
.menus_item_child
|
||||
display: block
|
||||
|
||||
& > a > i:last-child
|
||||
transform: rotate(180deg)
|
||||
|
||||
& > a > 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
|
||||
border-radius: 5px
|
||||
background-color: var(--sidebar-bg)
|
||||
box-shadow: 0 5px 20px -4px rgba($dark-black, .5)
|
||||
animation: sub_menus .3s .1s ease both
|
||||
|
||||
&:before
|
||||
position: absolute
|
||||
top: -8px
|
||||
left: 0
|
||||
width: 100%
|
||||
height: 20px
|
||||
content: ''
|
||||
|
||||
li
|
||||
list-style: none
|
||||
|
||||
&:hover
|
||||
background: var(--text-bg-hover)
|
||||
|
||||
&: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
|
||||
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
|
||||
|
||||
&:hover
|
||||
&:after
|
||||
width: 100%
|
||||
@@ -0,0 +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)
|
||||
@@ -0,0 +1,83 @@
|
||||
#pagination
|
||||
.pagination
|
||||
margin-top: 20px
|
||||
text-align: center
|
||||
|
||||
.page-number
|
||||
&.current
|
||||
background: $theme-paginator-color
|
||||
color: var(--white)
|
||||
|
||||
.pagination-info
|
||||
position: absolute
|
||||
top: 50%
|
||||
padding: 20px 40px
|
||||
width: 100%
|
||||
transform: translate(0, -50%)
|
||||
|
||||
.prev_info,
|
||||
.next_info
|
||||
@extend .limit-one-line
|
||||
color: var(--white)
|
||||
font-weight: 500
|
||||
|
||||
.next-post
|
||||
.pagination-info
|
||||
text-align: right
|
||||
|
||||
.pull-full
|
||||
width: 100% !important
|
||||
|
||||
.prev-post .label,
|
||||
.next-post .label
|
||||
color: var(--light-grey)
|
||||
text-transform: uppercase
|
||||
font-size: 90%
|
||||
|
||||
.prev-post,
|
||||
.next-post
|
||||
@extend .postImgHover
|
||||
width: 50%
|
||||
|
||||
+maxWidth768()
|
||||
width: 100%
|
||||
|
||||
a
|
||||
position: relative
|
||||
display: block
|
||||
overflow: hidden
|
||||
height: 150px
|
||||
|
||||
&.pagination-post
|
||||
overflow: hidden
|
||||
margin-top: 40px
|
||||
width: 100%
|
||||
background: $dark-black
|
||||
|
||||
.layout
|
||||
& > .recent-posts
|
||||
.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)
|
||||
|
||||
& > div:not(.recent-posts)
|
||||
.pagination
|
||||
.page-number
|
||||
display: inline-block
|
||||
margin: 0 4px
|
||||
min-width: w = 24px
|
||||
height: w
|
||||
text-align: center
|
||||
line-height: w
|
||||
cursor: pointer
|
||||
@@ -0,0 +1,255 @@
|
||||
beautify()
|
||||
headStyle(fontsize)
|
||||
padding-left: unit(fontsize + 12, 'px')
|
||||
|
||||
&:before
|
||||
margin-left: unit((-(fontsize + 6)), 'px')
|
||||
font-size: unit(fontsize, 'px')
|
||||
|
||||
&:hover
|
||||
padding-left: unit(fontsize + 18, 'px')
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6
|
||||
transition: all .2s ease-out
|
||||
|
||||
&:before
|
||||
position: absolute
|
||||
top: calc(50% - 7px)
|
||||
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
|
||||
|
||||
#article-container
|
||||
word-wrap: break-word
|
||||
overflow-wrap: break-word
|
||||
|
||||
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
|
||||
|
||||
p
|
||||
margin: 0 0 16px
|
||||
|
||||
iframe
|
||||
margin: 0 0 20px
|
||||
|
||||
kbd
|
||||
margin: 0 3px
|
||||
padding: 3px 5px
|
||||
border: 1px solid #b4b4b4
|
||||
border-radius: 3px
|
||||
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
|
||||
|
||||
if hexo-config('anchor.button.enable')
|
||||
a.headerlink
|
||||
&:after
|
||||
@extend .fontawesomeIcon
|
||||
float: right
|
||||
color: var(--headline-presudo)
|
||||
content: $archor-button-icon
|
||||
font-size: .95em
|
||||
transition: all .3s
|
||||
|
||||
&:hover
|
||||
&:after
|
||||
color: var(--pseudo-hover)
|
||||
|
||||
if !hexo-config('anchor.button.always_show')
|
||||
a.headerlink
|
||||
&:after
|
||||
opacity: 0
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6
|
||||
&:hover
|
||||
a.headerlink
|
||||
&:after
|
||||
opacity: 1
|
||||
|
||||
ol,
|
||||
ul
|
||||
ol,
|
||||
ul
|
||||
padding-left: 20px
|
||||
|
||||
li
|
||||
margin: 4px 0
|
||||
|
||||
p
|
||||
margin: 0 0 8px
|
||||
|
||||
if hexo-config('beautify.enable')
|
||||
if hexo-config('beautify.field') == 'site'
|
||||
beautify()
|
||||
else if hexo-config('beautify.field') == 'post'
|
||||
&.post-content
|
||||
beautify()
|
||||
|
||||
> :last-child
|
||||
margin-bottom: 0 !important
|
||||
|
||||
#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
|
||||
|
||||
&: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
|
||||
|
||||
&-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
|
||||
border-radius: 3px
|
||||
background-color: $noticeOutdate-bg
|
||||
color: $noticeOutdate-color
|
||||
|
||||
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
|
||||
@@ -0,0 +1,43 @@
|
||||
.relatedPosts
|
||||
margin-top: 40px
|
||||
|
||||
& > .headline
|
||||
margin-bottom: 5px
|
||||
font-weight: 700
|
||||
font-size: 1.43em
|
||||
|
||||
& > .relatedPosts-list
|
||||
& > div
|
||||
position: relative
|
||||
display: inline-block
|
||||
overflow: hidden
|
||||
margin: 3px
|
||||
width: calc(33.333% - 6px)
|
||||
height: 200px
|
||||
background: $dark-black
|
||||
vertical-align: bottom
|
||||
@extend .postImgHover
|
||||
|
||||
+maxWidth768()
|
||||
margin: 2px
|
||||
width: calc(50% - 4px)
|
||||
height: 150px
|
||||
|
||||
+maxWidth600()
|
||||
width: calc(100% - 4px)
|
||||
|
||||
.content
|
||||
position: absolute
|
||||
top: 50%
|
||||
padding: 0 20px
|
||||
width: 100%
|
||||
transform: translate(0, -50%)
|
||||
|
||||
.date
|
||||
color: var(--light-grey)
|
||||
font-size: 90%
|
||||
|
||||
.title
|
||||
@extend .limit-more-line
|
||||
color: var(--white)
|
||||
-webkit-line-clamp: 2
|
||||
@@ -0,0 +1,74 @@
|
||||
.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
|
||||
|
||||
&: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%
|
||||
|
||||
.reward-all
|
||||
display: inline-block
|
||||
margin: 0
|
||||
padding: 20px 10px
|
||||
border-radius: 4px
|
||||
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
|
||||
@@ -0,0 +1,49 @@
|
||||
#rightside
|
||||
position: fixed
|
||||
right: -48px
|
||||
bottom: $rightside-bottom
|
||||
z-index: 100
|
||||
opacity: 0
|
||||
transition: all .5s
|
||||
|
||||
#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
|
||||
border-radius: 5px
|
||||
background-color: var(--btn-bg)
|
||||
color: var(--btn-color)
|
||||
text-align: center
|
||||
font-size: 16px
|
||||
line-height: w
|
||||
|
||||
&:hover
|
||||
background-color: var(--btn-hover-color)
|
||||
|
||||
#mobile-toc-button
|
||||
display: none
|
||||
|
||||
+maxWidth900()
|
||||
display: block
|
||||
|
||||
+maxWidth900()
|
||||
#hide-aside-btn
|
||||
display: none
|
||||
@@ -0,0 +1,68 @@
|
||||
#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: auto
|
||||
width: $sidebar-width
|
||||
height: 100%
|
||||
background: var(--sidebar-bg)
|
||||
transition: all .5s
|
||||
|
||||
&.open
|
||||
transform: translate3d(-100%, 0, 0)
|
||||
|
||||
& > .avatar-img
|
||||
margin: 20px auto
|
||||
|
||||
.sidebar-site-data
|
||||
padding: 0 10px
|
||||
|
||||
hr
|
||||
margin: 20px auto
|
||||
|
||||
.menus_items
|
||||
padding: 0 10px 40px
|
||||
|
||||
.site-page
|
||||
@extend .limit-one-line
|
||||
position: relative
|
||||
display: block
|
||||
padding: 6px 30px 6px 22px
|
||||
color: var(--font-color)
|
||||
font-size: 1.15em
|
||||
|
||||
&:hover
|
||||
background: var(--text-bg-hover)
|
||||
|
||||
i:first-child
|
||||
width: 15%
|
||||
text-align: left
|
||||
|
||||
&.group
|
||||
& > i:last-child
|
||||
position: absolute
|
||||
top: .78em
|
||||
right: 18px
|
||||
transition: transform .3s
|
||||
|
||||
&.hide
|
||||
& > i:last-child
|
||||
transform: rotate(90deg)
|
||||
|
||||
& + .menus_item_child
|
||||
display: none
|
||||
|
||||
.menus_item_child
|
||||
margin: 0
|
||||
list-style: none
|
||||
@@ -0,0 +1,116 @@
|
||||
#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
|
||||
|
||||
.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
|
||||
|
||||
.mermaid-wrap
|
||||
margin: 0 0 20px
|
||||
text-align: center
|
||||
|
||||
& > svg
|
||||
height: 100%
|
||||
|
||||
.utterances,
|
||||
.fb-comments iframe
|
||||
width: 100% !important
|
||||
|
||||
#gitalk-container
|
||||
.gt-meta
|
||||
margin: 0 0 .8em
|
||||
padding: 6px 0 16px
|
||||
|
||||
.katex-wrap
|
||||
overflow: auto
|
||||
|
||||
if hexo-config('katex') && hexo-config('katex.hide_scrollbar')
|
||||
&::-webkit-scrollbar
|
||||
display: none
|
||||
|
||||
// Mathjax
|
||||
.mathjax-overflow
|
||||
overflow-x: auto
|
||||
overflow-y: hidden
|
||||
|
||||
span.mathjax-overflow
|
||||
display: inline-block
|
||||
padding: 0 2px
|
||||
max-width: 100%
|
||||
vertical-align: bottom
|
||||
|
||||
.aplayer
|
||||
color: $font-black
|
||||
|
||||
#article-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-css
|
||||
border-radius: 5px !important
|
||||
@@ -0,0 +1,150 @@
|
||||
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-result-title: alpha(#FFFFFF, .9)
|
||||
--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
|
||||
--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)
|
||||
--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))
|
||||
--scrollbar-color: lighten(#121212, 5)
|
||||
--timeline-bg: lighten(#121212, 5)
|
||||
|
||||
#web_bg:before,
|
||||
#footer:before,
|
||||
#page-header:before
|
||||
position: absolute
|
||||
width: 100%
|
||||
height: 100%
|
||||
background-color: alpha($dark-black, .7)
|
||||
content: ''
|
||||
|
||||
#article-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,
|
||||
#article-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)
|
||||
@@ -0,0 +1,197 @@
|
||||
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
|
||||
border-radius: 8px
|
||||
background: var(--exit-btn-bg)
|
||||
color: var(--exit-btn-color)
|
||||
font-size: 16px
|
||||
transition: background .3s
|
||||
|
||||
+maxWidth768()
|
||||
top: initial
|
||||
bottom: 30px
|
||||
|
||||
&:hover
|
||||
background: var(--exit-btn-hover)
|
||||
|
||||
#aside-content
|
||||
display: none
|
||||
|
||||
#page-header.post-bg
|
||||
background-color: transparent
|
||||
background-image: 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
|
||||
|
||||
#article-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-bottom: 0
|
||||
|
||||
button
|
||||
border-top: none !important
|
||||
background: transparent
|
||||
|
||||
&:hover
|
||||
background: none !important
|
||||
|
||||
&.active
|
||||
button
|
||||
text-decoration: underline
|
||||
|
||||
> .tab-contents .tab-item-content.active
|
||||
animation: none
|
||||
|
||||
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)
|
||||
@@ -0,0 +1,69 @@
|
||||
if hexo-config('error_404.enable')
|
||||
.error404
|
||||
#error-wrap
|
||||
position: absolute
|
||||
top: 50%
|
||||
right: 0
|
||||
left: 0
|
||||
margin: 0 auto
|
||||
padding: 60px 20px 0
|
||||
max-width: 1000px
|
||||
transform: translate(0, -50%)
|
||||
|
||||
.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
|
||||
|
||||
& + #rightside
|
||||
display: none
|
||||
@@ -0,0 +1,109 @@
|
||||
.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
|
||||
|
||||
&:hover
|
||||
&:before
|
||||
border-color: $light-blue
|
||||
|
||||
&:before
|
||||
border-color: var(--pseudo-hover)
|
||||
|
||||
&-time
|
||||
color: $theme-meta-color
|
||||
font-size: 95%
|
||||
|
||||
time
|
||||
padding-left: 6px
|
||||
cursor: default
|
||||
|
||||
&-title
|
||||
@extend .limit-more-line
|
||||
color: var(--font-color)
|
||||
font-size: 1.1em
|
||||
transition: all .3s
|
||||
-webkit-line-clamp: 2
|
||||
|
||||
&:hover
|
||||
color: $text-hover
|
||||
transform: translateX(10px)
|
||||
|
||||
&-img
|
||||
overflow: hidden
|
||||
width: 80px
|
||||
height: 80px
|
||||
|
||||
img
|
||||
@extend .imgHover
|
||||
|
||||
&-info
|
||||
flex: 1
|
||||
padding: 0 16px
|
||||
@@ -0,0 +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: $theme-meta-color
|
||||
|
||||
&: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
|
||||
@@ -0,0 +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: 1500px
|
||||
|
||||
& > div:first-child:not(.recent-posts)
|
||||
@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)
|
||||
@@ -0,0 +1,87 @@
|
||||
#article-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
|
||||
border-radius: 8px
|
||||
line-height: 17px
|
||||
-webkit-transform: translateZ(0)
|
||||
|
||||
+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: 35px
|
||||
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
|
||||
@@ -0,0 +1,113 @@
|
||||
#recent-posts
|
||||
& > .recent-post-item:not(:first-child)
|
||||
margin-top: 20px
|
||||
|
||||
& > .recent-post-item
|
||||
@extend .cardHover
|
||||
display: flex
|
||||
flex-direction: row
|
||||
align-items: center
|
||||
overflow: hidden
|
||||
height: 18em
|
||||
|
||||
+maxWidth768()
|
||||
flex-direction: column
|
||||
height: auto
|
||||
|
||||
&:hover
|
||||
img.post_bg
|
||||
transform: scale(1.1)
|
||||
|
||||
&.ads-wrap
|
||||
display: block !important
|
||||
height: auto !important
|
||||
|
||||
.post_cover
|
||||
overflow: hidden
|
||||
width: 44%
|
||||
height: 100%
|
||||
|
||||
+maxWidth768()
|
||||
width: 100%
|
||||
height: 230px
|
||||
|
||||
img.post_bg
|
||||
@extend .imgHover
|
||||
|
||||
&.right
|
||||
order: 1
|
||||
|
||||
+maxWidth768()
|
||||
order: 0
|
||||
|
||||
& >.recent-post-info
|
||||
padding: 0 40px
|
||||
width: 57%
|
||||
|
||||
+maxWidth768()
|
||||
padding: 20px 20px 30px
|
||||
width: 100%
|
||||
|
||||
&.no-cover
|
||||
width: 100%
|
||||
|
||||
+maxWidth768()
|
||||
padding: 30px 20px
|
||||
|
||||
& > .article-title
|
||||
@extend .limit-more-line
|
||||
color: var(--text-highlight-color)
|
||||
font-size: 1.72em
|
||||
line-height: 1.4
|
||||
transition: all .2s ease-in-out
|
||||
-webkit-line-clamp: 2
|
||||
|
||||
+maxWidth768()
|
||||
font-size: 1.43em
|
||||
|
||||
&:hover
|
||||
color: $text-hover
|
||||
|
||||
& > .article-meta-wrap
|
||||
margin: 6px 0
|
||||
color: $theme-meta-color
|
||||
font-size: 90%
|
||||
|
||||
& > .post-meta-date
|
||||
cursor: default
|
||||
|
||||
.sticky
|
||||
color: $sticky-color
|
||||
|
||||
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: $theme-meta-color
|
||||
|
||||
&:hover
|
||||
color: $text-hover
|
||||
text-decoration: underline
|
||||
|
||||
& > .content
|
||||
@extend .limit-more-line
|
||||
-webkit-line-clamp: 2
|
||||
@@ -0,0 +1,23 @@
|
||||
.tag-cloud
|
||||
&-list
|
||||
a
|
||||
display: inline-block
|
||||
padding: 0 8px
|
||||
transition: all .3s
|
||||
|
||||
&:hover
|
||||
color: $text-hover !important
|
||||
transform: scale(1.1)
|
||||
|
||||
+maxWidth768()
|
||||
zoom: .85
|
||||
|
||||
&-title
|
||||
font-size: 2.57em
|
||||
|
||||
+maxWidth768()
|
||||
font-size: 2em
|
||||
|
||||
h1.page-title
|
||||
& + .tag-cloud-list
|
||||
text-align: left
|
||||
@@ -0,0 +1,91 @@
|
||||
#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-Hits-list
|
||||
margin: 0
|
||||
padding: 0
|
||||
@extend .list-beauty
|
||||
|
||||
a
|
||||
color: var(--search-result-title)
|
||||
|
||||
&:hover
|
||||
color: $search-color
|
||||
|
||||
mark
|
||||
background: transparent
|
||||
color: $search-keyword-highlight
|
||||
font-weight: bold
|
||||
|
||||
.algolia-hit-item-content
|
||||
margin: 0 0 8px
|
||||
word-break: break-all
|
||||
|
||||
.ais-Pagination
|
||||
margin: 20px 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
|
||||
|
||||
.ais-Pagination-item--selected
|
||||
a
|
||||
background: $theme-paginator-color
|
||||
color: #eee
|
||||
cursor: default
|
||||
|
||||
.ais-Pagination-item--disabled
|
||||
visibility: hidden
|
||||
|
||||
.algolia-logo
|
||||
padding-top: 2px
|
||||
width: 80px
|
||||
height: 30px
|
||||
|
||||
#algolia-hits
|
||||
> div
|
||||
overflow-y: scroll
|
||||
|
||||
+minWidth768()
|
||||
max-height: calc(80vh - 240px)
|
||||
|
||||
+maxWidth768()
|
||||
height: calc(100vh - 260px)
|
||||
|
||||
#algolia-info
|
||||
div
|
||||
display: inline
|
||||
|
||||
.algolia-poweredBy
|
||||
float: right
|
||||
|
||||
.apple
|
||||
#algolia-search
|
||||
#algolia-hits
|
||||
> div
|
||||
+maxWidth768()
|
||||
height: calc(90vh - 260px)
|
||||
@@ -0,0 +1,49 @@
|
||||
.search-dialog
|
||||
position: fixed
|
||||
top: 10%
|
||||
left: 50%
|
||||
z-index: 1001
|
||||
display: none
|
||||
margin-left: -300px
|
||||
padding: 20px
|
||||
width: 600px
|
||||
border-radius: 8px
|
||||
background: var(--search-bg)
|
||||
|
||||
+maxWidth768()
|
||||
top: 0
|
||||
left: 0
|
||||
margin: 0
|
||||
width: 100%
|
||||
height: 100%
|
||||
border-radius: 0
|
||||
|
||||
hr
|
||||
margin: 20px auto
|
||||
|
||||
.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
|
||||
|
||||
#search-mask
|
||||
position: fixed
|
||||
top: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
left: 0
|
||||
z-index: 1000
|
||||
display: none
|
||||
background: rgba($dark-black, .6)
|
||||
@@ -0,0 +1,67 @@
|
||||
#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
|
||||
position: relative
|
||||
padding-left: 24px
|
||||
line-height: 1.7
|
||||
|
||||
&:hover
|
||||
&:before
|
||||
border-color: var(--pseudo-hover)
|
||||
|
||||
&:before
|
||||
$w = .5em
|
||||
position: absolute
|
||||
top: .45em
|
||||
left: 0
|
||||
width: w = $w
|
||||
height: h = w
|
||||
border: 3px solid $search-color
|
||||
border-radius: w
|
||||
background: transparent
|
||||
content: ''
|
||||
line-height: h
|
||||
transition: all .2s ease-in-out
|
||||
|
||||
a
|
||||
display: block
|
||||
color: var(--search-result-title)
|
||||
font-weight: 600
|
||||
cursor: pointer
|
||||
|
||||
&:hover
|
||||
color: $search-color
|
||||
|
||||
.search-result
|
||||
margin: 0 8px 8px 0
|
||||
word-break: break-all
|
||||
|
||||
.search-keyword
|
||||
color: $search-keyword-highlight
|
||||
font-weight: bold
|
||||
|
||||
.search-result-list
|
||||
overflow-y: auto
|
||||
max-height: calc(80vh - 130px)
|
||||
|
||||
+maxWidth768()
|
||||
padding-bottom: 40px
|
||||
max-height: 75vh !important
|
||||
@@ -0,0 +1,55 @@
|
||||
#article-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
|
||||
|
||||
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
|
||||
@@ -0,0 +1,102 @@
|
||||
#article-container
|
||||
figure.gallery-group
|
||||
position: relative
|
||||
float: left
|
||||
overflow: hidden
|
||||
margin: 6px 4px
|
||||
width: calc(50% - 8px)
|
||||
height: 250px
|
||||
border-radius: 8px
|
||||
background: $dark-black
|
||||
-webkit-transform: translate3d(0, 0, 0)
|
||||
|
||||
+maxWidth600()
|
||||
width: calc(100% - 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
|
||||
|
||||
.fj-gallery
|
||||
margin: 0 0 16px
|
||||
opacity: 0
|
||||
|
||||
.img-alt
|
||||
display: none
|
||||
@@ -0,0 +1,30 @@
|
||||
// pullquote
|
||||
blockquote
|
||||
&.pullquote
|
||||
position: relative
|
||||
max-width: 45%
|
||||
font-size: 110%
|
||||
|
||||
&.left
|
||||
float: left
|
||||
margin: 1em .5em 0 0
|
||||
|
||||
&.right
|
||||
float: right
|
||||
margin: 1em 0 0 .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%
|
||||
@@ -0,0 +1,46 @@
|
||||
// tag-hide
|
||||
.hide-inline,
|
||||
.hide-block
|
||||
& > .hide-button
|
||||
display: inline-block
|
||||
padding: 5px 18px
|
||||
background: $tag-hide-bg
|
||||
color: var(--white)
|
||||
|
||||
&: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
|
||||
|
||||
& > .toggle-button
|
||||
padding: 6px 15px
|
||||
background: $tag-hide-toggle-bg
|
||||
color: #1F2D3D
|
||||
cursor: pointer
|
||||
|
||||
& > .toggle-content
|
||||
margin: 30px 24px
|
||||
@@ -0,0 +1,6 @@
|
||||
#article-container
|
||||
.inline-img
|
||||
display: inline
|
||||
margin: 0 3px
|
||||
height: 1.1em
|
||||
vertical-align: text-bottom
|
||||
@@ -0,0 +1,11 @@
|
||||
.hl-label
|
||||
padding: 2px 4px
|
||||
border-radius: 3px
|
||||
color: $btn-color
|
||||
|
||||
&.default
|
||||
background-color: $btn-default-color
|
||||
|
||||
for $type in $color-types
|
||||
&.{$type}
|
||||
background-color: lookup('$tagsP-' + $type + '-color')
|
||||
@@ -0,0 +1,121 @@
|
||||
.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
|
||||
|
||||
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')
|
||||
@@ -0,0 +1,74 @@
|
||||
|
||||
#article-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)
|
||||
|
||||
> .nav-tabs
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
margin: 0
|
||||
padding: 0
|
||||
background: var(--tab-botton-bg)
|
||||
|
||||
> .tab
|
||||
margin: 0
|
||||
padding: 0
|
||||
list-style: none
|
||||
|
||||
+maxWidth768()
|
||||
flex-grow: 1
|
||||
|
||||
button
|
||||
display: block
|
||||
padding: 8px 18px
|
||||
width: 100%
|
||||
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
|
||||
button
|
||||
border-top: 2px solid $tab-active-border-color
|
||||
background: var(--tab-button-active-bg)
|
||||
cursor: default
|
||||
|
||||
&:not(.active)
|
||||
button
|
||||
&:hover
|
||||
border-top: 2px solid var(--tab-button-hover-bg)
|
||||
background: var(--tab-button-hover-bg)
|
||||
|
||||
> .tab-contents
|
||||
.tab-item-content
|
||||
position: relative
|
||||
display: none
|
||||
padding: 36px 24px
|
||||
|
||||
+maxWidth768()
|
||||
padding: 24px 14px
|
||||
|
||||
&.active
|
||||
display: block
|
||||
animation: tabshow .5s
|
||||
|
||||
.tab-to-top
|
||||
position: relative
|
||||
display: block
|
||||
margin: 0 0 0 auto
|
||||
color: $tab-to-top-color
|
||||
|
||||
@keyframes tabshow
|
||||
0%
|
||||
transform: translateY(15px)
|
||||
|
||||
100%
|
||||
transform: translateY(0)
|
||||
@@ -0,0 +1,68 @@
|
||||
#article-container
|
||||
.timeline
|
||||
margin: 0 0 20px 10px
|
||||
padding: 14px 20px 5px
|
||||
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
|
||||
@@ -0,0 +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
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
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('algolia_search.enable')
|
||||
@import '_search/index'
|
||||
@import '_search/algolia'
|
||||
|
||||
if hexo-config('local_search') && hexo-config('local_search.enable')
|
||||
@import '_search/index'
|
||||
@import '_search/local-search'
|
||||
@@ -0,0 +1,185 @@
|
||||
// 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
|
||||
$dafault-font-family = -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif
|
||||
$dafault-code-font = consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', sans-serif
|
||||
$font-family = hexo-config('font.font-family') ? unquote(hexo-config('font.font-family')) : $dafault-font-family
|
||||
$code-font-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
|
||||
$web-bg = hexo-config('background') && unquote(hexo-config('background'))
|
||||
$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 = 300px
|
||||
// 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-result-title = $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
|
||||
// Tag Plugins - timeline
|
||||
$timeline-default-color = $theme-color
|
||||
// archor
|
||||
$archor-button-icon = hexo-config('anchor.button.icon') ? hexo-config('anchor.button.icon') : '\f0c1'
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 323 B |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
@@ -0,0 +1,778 @@
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
let blogNameWidth, menusWidth, searchWidth, $nav
|
||||
let mobileSidebarOpen = false
|
||||
|
||||
const adjustMenu = (init) => {
|
||||
if (init) {
|
||||
blogNameWidth = document.getElementById('site-name').offsetWidth
|
||||
const $menusEle = document.querySelectorAll('#menus .menus_item')
|
||||
menusWidth = 0
|
||||
$menusEle.length && $menusEle.forEach(i => { menusWidth += i.offsetWidth })
|
||||
const $searchEle = document.querySelector('#search-button')
|
||||
searchWidth = $searchEle ? $searchEle.offsetWidth : 0
|
||||
$nav = document.getElementById('nav')
|
||||
}
|
||||
|
||||
let hideMenuIndex = ''
|
||||
if (window.innerWidth <= 768) hideMenuIndex = true
|
||||
else hideMenuIndex = blogNameWidth + menusWidth + searchWidth > $nav.offsetWidth - 120
|
||||
|
||||
if (hideMenuIndex) {
|
||||
$nav.classList.add('hide-menu')
|
||||
} else {
|
||||
$nav.classList.remove('hide-menu')
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化header
|
||||
const initAdjust = () => {
|
||||
adjustMenu(true)
|
||||
$nav.classList.add('show')
|
||||
}
|
||||
|
||||
// sidebar menus
|
||||
const sidebarFn = {
|
||||
open: () => {
|
||||
btf.sidebarPaddingR()
|
||||
document.body.style.overflow = 'hidden'
|
||||
btf.animateIn(document.getElementById('menu-mask'), 'to_show 0.5s')
|
||||
document.getElementById('sidebar-menus').classList.add('open')
|
||||
mobileSidebarOpen = true
|
||||
},
|
||||
close: () => {
|
||||
const $body = document.body
|
||||
$body.style.overflow = ''
|
||||
$body.style.paddingRight = ''
|
||||
btf.animateOut(document.getElementById('menu-mask'), 'to_hide 0.5s')
|
||||
document.getElementById('sidebar-menus').classList.remove('open')
|
||||
mobileSidebarOpen = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 首頁top_img底下的箭頭
|
||||
*/
|
||||
const scrollDownInIndex = () => {
|
||||
const $scrollDownEle = document.getElementById('scroll-down')
|
||||
$scrollDownEle && $scrollDownEle.addEventListener('click', function () {
|
||||
btf.scrollToDest(document.getElementById('content-inner').offsetTop, 300)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 代碼
|
||||
* 只適用於Hexo默認的代碼渲染
|
||||
*/
|
||||
const addHighlightTool = function () {
|
||||
const highLight = GLOBAL_CONFIG.highlight
|
||||
if (!highLight) return
|
||||
|
||||
const isHighlightCopy = highLight.highlightCopy
|
||||
const isHighlightLang = highLight.highlightLang
|
||||
const isHighlightShrink = GLOBAL_CONFIG_SITE.isHighlightShrink
|
||||
const highlightHeightLimit = highLight.highlightHeightLimit
|
||||
const isShowTool = isHighlightCopy || isHighlightLang || isHighlightShrink !== undefined
|
||||
const $figureHighlight = highLight.plugin === 'highlighjs' ? document.querySelectorAll('figure.highlight') : document.querySelectorAll('pre[class*="language-"]')
|
||||
|
||||
if (!((isShowTool || highlightHeightLimit) && $figureHighlight.length)) return
|
||||
|
||||
const isPrismjs = highLight.plugin === 'prismjs'
|
||||
|
||||
let highlightShrinkEle = ''
|
||||
let highlightCopyEle = ''
|
||||
const highlightShrinkClass = isHighlightShrink === true ? 'closed' : ''
|
||||
|
||||
if (isHighlightShrink !== undefined) {
|
||||
highlightShrinkEle = `<i class="fas fa-angle-down expand ${highlightShrinkClass}"></i>`
|
||||
}
|
||||
|
||||
if (isHighlightCopy) {
|
||||
highlightCopyEle = '<div class="copy-notice"></div><i class="fas fa-paste copy-button"></i>'
|
||||
}
|
||||
|
||||
const copy = (text, ctx) => {
|
||||
if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
|
||||
document.execCommand('copy')
|
||||
if (GLOBAL_CONFIG.Snackbar !== undefined) {
|
||||
btf.snackbarShow(GLOBAL_CONFIG.copy.success)
|
||||
} else {
|
||||
const prevEle = ctx.previousElementSibling
|
||||
prevEle.innerText = GLOBAL_CONFIG.copy.success
|
||||
prevEle.style.opacity = 1
|
||||
setTimeout(() => { prevEle.style.opacity = 0 }, 700)
|
||||
}
|
||||
} else {
|
||||
if (GLOBAL_CONFIG.Snackbar !== undefined) {
|
||||
btf.snackbarShow(GLOBAL_CONFIG.copy.noSupport)
|
||||
} else {
|
||||
ctx.previousElementSibling.innerText = GLOBAL_CONFIG.copy.noSupport
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// click events
|
||||
const highlightCopyFn = (ele) => {
|
||||
const $buttonParent = ele.parentNode
|
||||
$buttonParent.classList.add('copy-true')
|
||||
const selection = window.getSelection()
|
||||
const range = document.createRange()
|
||||
if (isPrismjs) range.selectNodeContents($buttonParent.querySelectorAll('pre code')[0])
|
||||
else range.selectNodeContents($buttonParent.querySelectorAll('table .code pre')[0])
|
||||
selection.removeAllRanges()
|
||||
selection.addRange(range)
|
||||
const text = selection.toString()
|
||||
copy(text, ele.lastChild)
|
||||
selection.removeAllRanges()
|
||||
$buttonParent.classList.remove('copy-true')
|
||||
}
|
||||
|
||||
const highlightShrinkFn = (ele) => {
|
||||
const $nextEle = [...ele.parentNode.children].slice(1)
|
||||
ele.firstChild.classList.toggle('closed')
|
||||
if (btf.isHidden($nextEle[$nextEle.length - 1])) {
|
||||
$nextEle.forEach(e => { e.style.display = 'block' })
|
||||
} else {
|
||||
$nextEle.forEach(e => { e.style.display = 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
const highlightToolsFn = function (e) {
|
||||
const $target = e.target.classList
|
||||
if ($target.contains('expand')) highlightShrinkFn(this)
|
||||
else if ($target.contains('copy-button')) highlightCopyFn(this)
|
||||
}
|
||||
|
||||
const expandCode = function () {
|
||||
this.classList.toggle('expand-done')
|
||||
}
|
||||
|
||||
function createEle (lang, item, service) {
|
||||
const fragment = document.createDocumentFragment()
|
||||
|
||||
if (isShowTool) {
|
||||
const hlTools = document.createElement('div')
|
||||
hlTools.className = `highlight-tools ${highlightShrinkClass}`
|
||||
hlTools.innerHTML = highlightShrinkEle + lang + highlightCopyEle
|
||||
hlTools.addEventListener('click', highlightToolsFn)
|
||||
fragment.appendChild(hlTools)
|
||||
}
|
||||
|
||||
if (highlightHeightLimit && item.offsetHeight > highlightHeightLimit + 30) {
|
||||
const ele = document.createElement('div')
|
||||
ele.className = 'code-expand-btn'
|
||||
ele.innerHTML = '<i class="fas fa-angle-double-down"></i>'
|
||||
ele.addEventListener('click', expandCode)
|
||||
fragment.appendChild(ele)
|
||||
}
|
||||
|
||||
if (service === 'hl') {
|
||||
item.insertBefore(fragment, item.firstChild)
|
||||
} else {
|
||||
item.parentNode.insertBefore(fragment, item)
|
||||
}
|
||||
}
|
||||
|
||||
if (isHighlightLang) {
|
||||
if (isPrismjs) {
|
||||
$figureHighlight.forEach(function (item) {
|
||||
const langName = item.getAttribute('data-language') ? item.getAttribute('data-language') : 'Code'
|
||||
const highlightLangEle = `<div class="code-lang">${langName}</div>`
|
||||
btf.wrap(item, 'figure', { class: 'highlight' })
|
||||
createEle(highlightLangEle, item)
|
||||
})
|
||||
} else {
|
||||
$figureHighlight.forEach(function (item) {
|
||||
let langName = item.getAttribute('class').split(' ')[1]
|
||||
if (langName === 'plain' || langName === undefined) langName = 'Code'
|
||||
const highlightLangEle = `<div class="code-lang">${langName}</div>`
|
||||
createEle(highlightLangEle, item, 'hl')
|
||||
})
|
||||
}
|
||||
} else {
|
||||
if (isPrismjs) {
|
||||
$figureHighlight.forEach(function (item) {
|
||||
btf.wrap(item, 'figure', { class: 'highlight' })
|
||||
createEle('', item)
|
||||
})
|
||||
} else {
|
||||
$figureHighlight.forEach(function (item) {
|
||||
createEle('', item, 'hl')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* PhotoFigcaption
|
||||
*/
|
||||
function addPhotoFigcaption () {
|
||||
document.querySelectorAll('#article-container img').forEach(function (item) {
|
||||
const parentEle = item.parentNode
|
||||
const altValue = item.title || item.alt
|
||||
if (altValue && !parentEle.parentNode.classList.contains('justified-gallery')) {
|
||||
const ele = document.createElement('div')
|
||||
ele.className = 'img-alt is-center'
|
||||
ele.textContent = altValue
|
||||
parentEle.insertBefore(ele, item.nextSibling)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Lightbox
|
||||
*/
|
||||
const runLightbox = () => {
|
||||
btf.loadLightbox(document.querySelectorAll('#article-container img:not(.no-lightbox)'))
|
||||
}
|
||||
|
||||
/**
|
||||
* justified-gallery 圖庫排版
|
||||
*/
|
||||
const runJustifiedGallery = function (ele) {
|
||||
ele.forEach(item => {
|
||||
const $imgList = item.querySelectorAll('img')
|
||||
|
||||
$imgList.forEach(i => {
|
||||
const dataLazySrc = i.getAttribute('data-lazy-src')
|
||||
if (dataLazySrc) i.src = dataLazySrc
|
||||
btf.wrap(i, 'div', { class: 'fj-gallery-item' })
|
||||
})
|
||||
})
|
||||
|
||||
if (window.fjGallery) {
|
||||
setTimeout(() => { btf.initJustifiedGallery(ele) }, 100)
|
||||
return
|
||||
}
|
||||
|
||||
const newEle = document.createElement('link')
|
||||
newEle.rel = 'stylesheet'
|
||||
newEle.href = GLOBAL_CONFIG.source.justifiedGallery.css
|
||||
document.body.appendChild(newEle)
|
||||
getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`).then(() => { btf.initJustifiedGallery(ele) })
|
||||
}
|
||||
|
||||
/**
|
||||
* 滾動處理
|
||||
*/
|
||||
const scrollFn = function () {
|
||||
const $rightside = document.getElementById('rightside')
|
||||
const innerHeight = window.innerHeight + 56
|
||||
|
||||
// 當滾動條小于 56 的時候
|
||||
if (document.body.scrollHeight <= innerHeight) {
|
||||
$rightside.style.cssText = 'opacity: 1; transform: translateX(-58px)'
|
||||
return
|
||||
}
|
||||
|
||||
// find the scroll direction
|
||||
function scrollDirection (currentTop) {
|
||||
const result = currentTop > initTop // true is down & false is up
|
||||
initTop = currentTop
|
||||
return result
|
||||
}
|
||||
|
||||
let initTop = 0
|
||||
let isChatShow = true
|
||||
const $header = document.getElementById('page-header')
|
||||
const isChatBtnHide = typeof chatBtnHide === 'function'
|
||||
const isChatBtnShow = typeof chatBtnShow === 'function'
|
||||
|
||||
const scrollTask = btf.throttle(() => {
|
||||
const currentTop = window.scrollY || document.documentElement.scrollTop
|
||||
const isDown = scrollDirection(currentTop)
|
||||
if (currentTop > 56) {
|
||||
if (isDown) {
|
||||
if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible')
|
||||
if (isChatBtnShow && isChatShow === true) {
|
||||
chatBtnHide()
|
||||
isChatShow = false
|
||||
}
|
||||
} else {
|
||||
if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible')
|
||||
if (isChatBtnHide && isChatShow === false) {
|
||||
chatBtnShow()
|
||||
isChatShow = true
|
||||
}
|
||||
}
|
||||
$header.classList.add('nav-fixed')
|
||||
if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') {
|
||||
$rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
|
||||
}
|
||||
} else {
|
||||
if (currentTop === 0) {
|
||||
$header.classList.remove('nav-fixed', 'nav-visible')
|
||||
}
|
||||
$rightside.style.cssText = "opacity: ''; transform: ''"
|
||||
}
|
||||
|
||||
if (document.body.scrollHeight <= innerHeight) {
|
||||
$rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
|
||||
}
|
||||
}, 200)
|
||||
|
||||
window.scrollCollect = scrollTask
|
||||
|
||||
window.addEventListener('scroll', scrollCollect)
|
||||
}
|
||||
|
||||
/**
|
||||
* toc,anchor
|
||||
*/
|
||||
const scrollFnToDo = function () {
|
||||
const isToc = GLOBAL_CONFIG_SITE.isToc
|
||||
const isAnchor = GLOBAL_CONFIG.isAnchor
|
||||
const $article = document.getElementById('article-container')
|
||||
|
||||
if (!($article && (isToc || isAnchor))) return
|
||||
|
||||
let $tocLink, $cardToc, scrollPercent, autoScrollToc, isExpand
|
||||
|
||||
if (isToc) {
|
||||
const $cardTocLayout = document.getElementById('card-toc')
|
||||
$cardToc = $cardTocLayout.getElementsByClassName('toc-content')[0]
|
||||
$tocLink = $cardToc.querySelectorAll('.toc-link')
|
||||
const $tocPercentage = $cardTocLayout.querySelector('.toc-percentage')
|
||||
isExpand = $cardToc.classList.contains('is-expand')
|
||||
|
||||
scrollPercent = currentTop => {
|
||||
const docHeight = $article.clientHeight
|
||||
const winHeight = document.documentElement.clientHeight
|
||||
const headerHeight = $article.offsetTop
|
||||
const contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : (document.documentElement.scrollHeight - winHeight)
|
||||
const scrollPercent = (currentTop - headerHeight) / (contentMath)
|
||||
const scrollPercentRounded = Math.round(scrollPercent * 100)
|
||||
const percentage = (scrollPercentRounded > 100) ? 100 : (scrollPercentRounded <= 0) ? 0 : scrollPercentRounded
|
||||
$tocPercentage.textContent = percentage
|
||||
}
|
||||
|
||||
window.mobileToc = {
|
||||
open: () => {
|
||||
$cardTocLayout.style.cssText = 'animation: toc-open .3s; opacity: 1; right: 55px'
|
||||
},
|
||||
|
||||
close: () => {
|
||||
$cardTocLayout.style.animation = 'toc-close .2s'
|
||||
setTimeout(() => {
|
||||
$cardTocLayout.style.cssText = "opacity:''; animation: ''; right: ''"
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
|
||||
// toc元素點擊
|
||||
$cardToc.addEventListener('click', e => {
|
||||
e.preventDefault()
|
||||
const target = e.target.classList
|
||||
if (target.contains('toc-content')) return
|
||||
const $target = target.contains('toc-link')
|
||||
? e.target
|
||||
: e.target.parentElement
|
||||
btf.scrollToDest(btf.getEleTop(document.getElementById(decodeURI($target.getAttribute('href')).replace('#', ''))), 300)
|
||||
if (window.innerWidth < 900) {
|
||||
window.mobileToc.close()
|
||||
}
|
||||
})
|
||||
|
||||
autoScrollToc = item => {
|
||||
const activePosition = item.getBoundingClientRect().top
|
||||
const sidebarScrollTop = $cardToc.scrollTop
|
||||
if (activePosition > (document.documentElement.clientHeight - 100)) {
|
||||
$cardToc.scrollTop = sidebarScrollTop + 150
|
||||
}
|
||||
if (activePosition < 100) {
|
||||
$cardToc.scrollTop = sidebarScrollTop - 150
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// find head position & add active class
|
||||
const list = $article.querySelectorAll('h1,h2,h3,h4,h5,h6')
|
||||
let detectItem = ''
|
||||
const findHeadPosition = function (top) {
|
||||
if (top === 0) {
|
||||
return false
|
||||
}
|
||||
|
||||
let currentId = ''
|
||||
let currentIndex = ''
|
||||
|
||||
list.forEach(function (ele, index) {
|
||||
if (top > btf.getEleTop(ele) - 80) {
|
||||
const id = ele.id
|
||||
currentId = id ? '#' + encodeURI(id) : ''
|
||||
currentIndex = index
|
||||
}
|
||||
})
|
||||
|
||||
if (detectItem === currentIndex) return
|
||||
|
||||
if (isAnchor) btf.updateAnchor(currentId)
|
||||
|
||||
detectItem = currentIndex
|
||||
|
||||
if (isToc) {
|
||||
$cardToc.querySelectorAll('.active').forEach(i => { i.classList.remove('active') })
|
||||
|
||||
if (currentId === '') {
|
||||
return
|
||||
}
|
||||
|
||||
const currentActive = $tocLink[currentIndex]
|
||||
currentActive.classList.add('active')
|
||||
|
||||
setTimeout(() => {
|
||||
autoScrollToc(currentActive)
|
||||
}, 0)
|
||||
|
||||
if (isExpand) return
|
||||
let parent = currentActive.parentNode
|
||||
|
||||
for (; !parent.matches('.toc'); parent = parent.parentNode) {
|
||||
if (parent.matches('li')) parent.classList.add('active')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// main of scroll
|
||||
window.tocScrollFn = function () {
|
||||
return btf.throttle(function () {
|
||||
const currentTop = window.scrollY || document.documentElement.scrollTop
|
||||
isToc && scrollPercent(currentTop)
|
||||
findHeadPosition(currentTop)
|
||||
}, 100)()
|
||||
}
|
||||
window.addEventListener('scroll', tocScrollFn)
|
||||
}
|
||||
|
||||
/**
|
||||
* Rightside
|
||||
*/
|
||||
const rightSideFn = {
|
||||
switchReadMode: () => { // read-mode
|
||||
const $body = document.body
|
||||
$body.classList.add('read-mode')
|
||||
const newEle = document.createElement('button')
|
||||
newEle.type = 'button'
|
||||
newEle.className = 'fas fa-sign-out-alt exit-readmode'
|
||||
$body.appendChild(newEle)
|
||||
|
||||
function clickFn () {
|
||||
$body.classList.remove('read-mode')
|
||||
newEle.remove()
|
||||
newEle.removeEventListener('click', clickFn)
|
||||
}
|
||||
|
||||
newEle.addEventListener('click', clickFn)
|
||||
},
|
||||
switchDarkMode: () => { // Switch Between Light And Dark Mode
|
||||
const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
|
||||
if (nowMode === 'light') {
|
||||
activateDarkMode()
|
||||
saveToLocal.set('theme', 'dark', 2)
|
||||
GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
|
||||
} else {
|
||||
activateLightMode()
|
||||
saveToLocal.set('theme', 'light', 2)
|
||||
GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
|
||||
}
|
||||
// handle some cases
|
||||
typeof utterancesTheme === 'function' && utterancesTheme()
|
||||
typeof changeGiscusTheme === 'function' && changeGiscusTheme()
|
||||
typeof FB === 'object' && window.loadFBComment && window.loadFBComment()
|
||||
typeof runMermaid === 'function' && window.runMermaid()
|
||||
},
|
||||
showOrHideBtn: (e) => { // rightside 點擊設置 按鈕 展開
|
||||
const rightsideHideClassList = document.getElementById('rightside-config-hide').classList
|
||||
rightsideHideClassList.toggle('show')
|
||||
if (e.classList.contains('show')) {
|
||||
rightsideHideClassList.add('status')
|
||||
setTimeout(() => {
|
||||
rightsideHideClassList.remove('status')
|
||||
}, 300)
|
||||
}
|
||||
e.classList.toggle('show')
|
||||
},
|
||||
scrollToTop: () => { // Back to top
|
||||
btf.scrollToDest(0, 500)
|
||||
},
|
||||
hideAsideBtn: () => { // Hide aside
|
||||
const $htmlDom = document.documentElement.classList
|
||||
$htmlDom.contains('hide-aside')
|
||||
? saveToLocal.set('aside-status', 'show', 2)
|
||||
: saveToLocal.set('aside-status', 'hide', 2)
|
||||
$htmlDom.toggle('hide-aside')
|
||||
},
|
||||
|
||||
runMobileToc: () => {
|
||||
if (window.getComputedStyle(document.getElementById('card-toc')).getPropertyValue('opacity') === '0') window.mobileToc.open()
|
||||
else window.mobileToc.close()
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('rightside').addEventListener('click', function (e) {
|
||||
const $target = e.target.id ? e.target : e.target.parentNode
|
||||
switch ($target.id) {
|
||||
case 'go-up':
|
||||
rightSideFn.scrollToTop()
|
||||
break
|
||||
case 'rightside_config':
|
||||
rightSideFn.showOrHideBtn($target)
|
||||
break
|
||||
case 'mobile-toc-button':
|
||||
rightSideFn.runMobileToc()
|
||||
break
|
||||
case 'readmode':
|
||||
rightSideFn.switchReadMode()
|
||||
break
|
||||
case 'darkmode':
|
||||
rightSideFn.switchDarkMode()
|
||||
break
|
||||
case 'hide-aside-btn':
|
||||
rightSideFn.hideAsideBtn()
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* menu
|
||||
* 側邊欄sub-menu 展開/收縮
|
||||
*/
|
||||
const clickFnOfSubMenu = () => {
|
||||
document.querySelectorAll('#sidebar-menus .site-page.group').forEach(function (item) {
|
||||
item.addEventListener('click', function () {
|
||||
this.classList.toggle('hide')
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 複製時加上版權信息
|
||||
*/
|
||||
const addCopyright = () => {
|
||||
const copyright = GLOBAL_CONFIG.copyright
|
||||
document.body.oncopy = (e) => {
|
||||
e.preventDefault()
|
||||
let textFont; const copyFont = window.getSelection(0).toString()
|
||||
if (copyFont.length > copyright.limitCount) {
|
||||
textFont = copyFont + '\n' + '\n' + '\n' +
|
||||
copyright.languages.author + '\n' +
|
||||
copyright.languages.link + window.location.href + '\n' +
|
||||
copyright.languages.source + '\n' +
|
||||
copyright.languages.info
|
||||
} else {
|
||||
textFont = copyFont
|
||||
}
|
||||
if (e.clipboardData) {
|
||||
return e.clipboardData.setData('text', textFont)
|
||||
} else {
|
||||
return window.clipboardData.setData('text', textFont)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 網頁運行時間
|
||||
*/
|
||||
const addRuntime = () => {
|
||||
const $runtimeCount = document.getElementById('runtimeshow')
|
||||
if ($runtimeCount) {
|
||||
const publishDate = $runtimeCount.getAttribute('data-publishDate')
|
||||
$runtimeCount.innerText = btf.diffDate(publishDate) + ' ' + GLOBAL_CONFIG.runtime
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 最後一次更新時間
|
||||
*/
|
||||
const addLastPushDate = () => {
|
||||
const $lastPushDateItem = document.getElementById('last-push-date')
|
||||
if ($lastPushDateItem) {
|
||||
const lastPushDate = $lastPushDateItem.getAttribute('data-lastPushDate')
|
||||
$lastPushDateItem.innerText = btf.diffDate(lastPushDate, true)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* table overflow
|
||||
*/
|
||||
const addTableWrap = () => {
|
||||
const $table = document.querySelectorAll('#article-container :not(.highlight) > table, #article-container > table')
|
||||
if ($table.length) {
|
||||
$table.forEach(item => {
|
||||
btf.wrap(item, 'div', { class: 'table-wrap' })
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* tag-hide
|
||||
*/
|
||||
const clickFnOfTagHide = function () {
|
||||
const $hideInline = document.querySelectorAll('#article-container .hide-button')
|
||||
if ($hideInline.length) {
|
||||
$hideInline.forEach(function (item) {
|
||||
item.addEventListener('click', function (e) {
|
||||
const $this = this
|
||||
$this.classList.add('open')
|
||||
const $fjGallery = $this.nextElementSibling.querySelectorAll('.fj-gallery')
|
||||
$fjGallery.length && btf.initJustifiedGallery($fjGallery)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const tabsFn = {
|
||||
clickFnOfTabs: function () {
|
||||
document.querySelectorAll('#article-container .tab > button').forEach(function (item) {
|
||||
item.addEventListener('click', function (e) {
|
||||
const $this = this
|
||||
const $tabItem = $this.parentNode
|
||||
|
||||
if (!$tabItem.classList.contains('active')) {
|
||||
const $tabContent = $tabItem.parentNode.nextElementSibling
|
||||
const $siblings = btf.siblings($tabItem, '.active')[0]
|
||||
$siblings && $siblings.classList.remove('active')
|
||||
$tabItem.classList.add('active')
|
||||
const tabId = $this.getAttribute('data-href').replace('#', '')
|
||||
const childList = [...$tabContent.children]
|
||||
childList.forEach(item => {
|
||||
if (item.id === tabId) item.classList.add('active')
|
||||
else item.classList.remove('active')
|
||||
})
|
||||
const $isTabJustifiedGallery = $tabContent.querySelectorAll(`#${tabId} .fj-gallery`)
|
||||
if ($isTabJustifiedGallery.length > 0) {
|
||||
btf.initJustifiedGallery($isTabJustifiedGallery)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
backToTop: () => {
|
||||
document.querySelectorAll('#article-container .tabs .tab-to-top').forEach(function (item) {
|
||||
item.addEventListener('click', function () {
|
||||
btf.scrollToDest(btf.getEleTop(btf.getParents(this, '.tabs')), 300)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const toggleCardCategory = function () {
|
||||
const $cardCategory = document.querySelectorAll('#aside-cat-list .card-category-list-item.parent i')
|
||||
if ($cardCategory.length) {
|
||||
$cardCategory.forEach(function (item) {
|
||||
item.addEventListener('click', function (e) {
|
||||
e.preventDefault()
|
||||
const $this = this
|
||||
$this.classList.toggle('expand')
|
||||
const $parentEle = $this.parentNode.nextElementSibling
|
||||
if (btf.isHidden($parentEle)) {
|
||||
$parentEle.style.display = 'block'
|
||||
} else {
|
||||
$parentEle.style.display = 'none'
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const switchComments = function () {
|
||||
let switchDone = false
|
||||
const $switchBtn = document.querySelector('#comment-switch > .switch-btn')
|
||||
$switchBtn && $switchBtn.addEventListener('click', function () {
|
||||
this.classList.toggle('move')
|
||||
document.querySelectorAll('#post-comment > .comment-wrap > div').forEach(function (item) {
|
||||
if (btf.isHidden(item)) {
|
||||
item.style.cssText = 'display: block;animation: tabshow .5s'
|
||||
} else {
|
||||
item.style.cssText = "display: none;animation: ''"
|
||||
}
|
||||
})
|
||||
|
||||
if (!switchDone && typeof loadOtherComment === 'function') {
|
||||
switchDone = true
|
||||
loadOtherComment()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const addPostOutdateNotice = function () {
|
||||
const data = GLOBAL_CONFIG.noticeOutdate
|
||||
const diffDay = btf.diffDate(GLOBAL_CONFIG_SITE.postUpdate)
|
||||
if (diffDay >= data.limitDay) {
|
||||
const ele = document.createElement('div')
|
||||
ele.className = 'post-outdate-notice'
|
||||
ele.textContent = data.messagePrev + ' ' + diffDay + ' ' + data.messageNext
|
||||
const $targetEle = document.getElementById('article-container')
|
||||
if (data.position === 'top') {
|
||||
$targetEle.insertBefore(ele, $targetEle.firstChild)
|
||||
} else {
|
||||
$targetEle.appendChild(ele)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const lazyloadImg = () => {
|
||||
window.lazyLoadInstance = new LazyLoad({
|
||||
elements_selector: 'img',
|
||||
threshold: 0,
|
||||
data_src: 'lazy-src'
|
||||
})
|
||||
}
|
||||
|
||||
const relativeDate = function (selector) {
|
||||
selector.forEach(item => {
|
||||
const $this = item
|
||||
const timeVal = $this.getAttribute('datetime')
|
||||
$this.innerText = btf.diffDate(timeVal, true)
|
||||
$this.style.display = 'inline'
|
||||
})
|
||||
}
|
||||
|
||||
const unRefreshFn = function () {
|
||||
window.addEventListener('resize', () => {
|
||||
adjustMenu(false)
|
||||
btf.isHidden(document.getElementById('toggle-menu')) && mobileSidebarOpen && sidebarFn.close()
|
||||
})
|
||||
|
||||
document.getElementById('menu-mask').addEventListener('click', e => { sidebarFn.close() })
|
||||
|
||||
clickFnOfSubMenu()
|
||||
GLOBAL_CONFIG.islazyload && lazyloadImg()
|
||||
GLOBAL_CONFIG.copyright !== undefined && addCopyright()
|
||||
}
|
||||
|
||||
window.refreshFn = function () {
|
||||
initAdjust()
|
||||
|
||||
if (GLOBAL_CONFIG_SITE.isPost) {
|
||||
GLOBAL_CONFIG.noticeOutdate !== undefined && addPostOutdateNotice()
|
||||
GLOBAL_CONFIG.relativeDate.post && relativeDate(document.querySelectorAll('#post-meta time'))
|
||||
} else {
|
||||
GLOBAL_CONFIG.relativeDate.homepage && relativeDate(document.querySelectorAll('#recent-posts time'))
|
||||
GLOBAL_CONFIG.runtime && addRuntime()
|
||||
addLastPushDate()
|
||||
toggleCardCategory()
|
||||
}
|
||||
|
||||
scrollFnToDo()
|
||||
GLOBAL_CONFIG_SITE.isHome && scrollDownInIndex()
|
||||
addHighlightTool()
|
||||
GLOBAL_CONFIG.isPhotoFigcaption && addPhotoFigcaption()
|
||||
scrollFn()
|
||||
|
||||
const $jgEle = document.querySelectorAll('#article-container .fj-gallery')
|
||||
$jgEle.length && runJustifiedGallery($jgEle)
|
||||
|
||||
runLightbox()
|
||||
addTableWrap()
|
||||
clickFnOfTagHide()
|
||||
tabsFn.clickFnOfTabs()
|
||||
tabsFn.backToTop()
|
||||
switchComments()
|
||||
document.getElementById('toggle-menu').addEventListener('click', () => { sidebarFn.open() })
|
||||
}
|
||||
|
||||
refreshFn()
|
||||
unRefreshFn()
|
||||
})
|
||||
@@ -0,0 +1,163 @@
|
||||
window.addEventListener('load', () => {
|
||||
const openSearch = () => {
|
||||
const bodyStyle = document.body.style
|
||||
bodyStyle.width = '100%'
|
||||
bodyStyle.overflow = 'hidden'
|
||||
btf.animateIn(document.getElementById('search-mask'), 'to_show 0.5s')
|
||||
btf.animateIn(document.querySelector('#algolia-search .search-dialog'), 'titleScale 0.5s')
|
||||
setTimeout(() => { document.querySelector('#algolia-search .ais-SearchBox-input').focus() }, 100)
|
||||
|
||||
// shortcut: ESC
|
||||
document.addEventListener('keydown', function f (event) {
|
||||
if (event.code === 'Escape') {
|
||||
closeSearch()
|
||||
document.removeEventListener('keydown', f)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const closeSearch = () => {
|
||||
const bodyStyle = document.body.style
|
||||
bodyStyle.width = ''
|
||||
bodyStyle.overflow = ''
|
||||
btf.animateOut(document.querySelector('#algolia-search .search-dialog'), 'search_close .5s')
|
||||
btf.animateOut(document.getElementById('search-mask'), 'to_hide 0.5s')
|
||||
}
|
||||
|
||||
const searchClickFn = () => {
|
||||
document.querySelector('#search-button > .search').addEventListener('click', openSearch)
|
||||
}
|
||||
|
||||
const searchClickFnOnce = () => {
|
||||
document.getElementById('search-mask').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 = '...'
|
||||
}
|
||||
|
||||
let matchContent = pre + content.substring(start, end) + post
|
||||
return matchContent
|
||||
}
|
||||
|
||||
const algolia = GLOBAL_CONFIG.algolia
|
||||
const isAlgoliaValid = algolia.appId && algolia.apiKey && algolia.indexName
|
||||
if (!isAlgoliaValid) {
|
||||
return console.error('Algolia setting is invalid!')
|
||||
}
|
||||
|
||||
const search = instantsearch({
|
||||
indexName: algolia.indexName,
|
||||
searchClient: algoliasearch(algolia.appId, algolia.apiKey),
|
||||
searchFunction(helper) {
|
||||
helper.state.query && helper.search()
|
||||
},
|
||||
})
|
||||
|
||||
const configure = instantsearch.widgets.configure({
|
||||
hitsPerPage: 5
|
||||
})
|
||||
|
||||
const searchBox = instantsearch.widgets.searchBox({
|
||||
container: '#algolia-search-input',
|
||||
showReset: false,
|
||||
showSubmit: false,
|
||||
placeholder: GLOBAL_CONFIG.algolia.languages.input_placeholder,
|
||||
showLoadingIndicator: true
|
||||
})
|
||||
|
||||
const hits = instantsearch.widgets.hits({
|
||||
container: '#algolia-hits',
|
||||
templates: {
|
||||
item(data) {
|
||||
const link = data.permalink ? 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">
|
||||
${result.title.value || 'no-title'}
|
||||
</a>
|
||||
<p class="algolia-hit-item-content">${content}</p>`
|
||||
},
|
||||
empty: function (data) {
|
||||
return (
|
||||
'<div id="algolia-hits-empty">' +
|
||||
GLOBAL_CONFIG.algolia.languages.hits_empty.replace(/\$\{query}/, data.query) +
|
||||
'</div>'
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const stats = instantsearch.widgets.stats({
|
||||
container: '#algolia-info > .algolia-stats',
|
||||
templates: {
|
||||
text: function (data) {
|
||||
const stats = GLOBAL_CONFIG.algolia.languages.hits_stats
|
||||
.replace(/\$\{hits}/, data.nbHits)
|
||||
.replace(/\$\{time}/, data.processingTimeMS)
|
||||
return (
|
||||
`<hr>${stats}`
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const powerBy = instantsearch.widgets.poweredBy({
|
||||
container: '#algolia-info > .algolia-poweredBy',
|
||||
})
|
||||
|
||||
const pagination = 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([configure,searchBox,hits,stats,powerBy,pagination]) // add the widgets to the instantsearch instance
|
||||
|
||||
search.start()
|
||||
|
||||
searchClickFn()
|
||||
searchClickFnOnce()
|
||||
|
||||
window.addEventListener('pjax:complete', () => {
|
||||
getComputedStyle(document.querySelector('#algolia-search .search-dialog')).display === 'block' && closeSearch()
|
||||
searchClickFn()
|
||||
})
|
||||
|
||||
window.pjax && search.on('render', () => {
|
||||
window.pjax.refresh(document.getElementById('algolia-hits'))
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,188 @@
|
||||
window.addEventListener('load', () => {
|
||||
let loadFlag = false
|
||||
let dataObj = []
|
||||
const $searchMask = document.getElementById('search-mask')
|
||||
|
||||
const openSearch = () => {
|
||||
const bodyStyle = document.body.style
|
||||
bodyStyle.width = '100%'
|
||||
bodyStyle.overflow = 'hidden'
|
||||
btf.animateIn($searchMask, 'to_show 0.5s')
|
||||
btf.animateIn(document.querySelector('#local-search .search-dialog'), 'titleScale 0.5s')
|
||||
setTimeout(() => { document.querySelector('#local-search-input input').focus() }, 100)
|
||||
if (!loadFlag) {
|
||||
search()
|
||||
loadFlag = true
|
||||
}
|
||||
// shortcut: ESC
|
||||
document.addEventListener('keydown', function f (event) {
|
||||
if (event.code === 'Escape') {
|
||||
closeSearch()
|
||||
document.removeEventListener('keydown', f)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const closeSearch = () => {
|
||||
const bodyStyle = document.body.style
|
||||
bodyStyle.width = ''
|
||||
bodyStyle.overflow = ''
|
||||
btf.animateOut(document.querySelector('#local-search .search-dialog'), 'search_close .5s')
|
||||
btf.animateOut($searchMask, 'to_hide 0.5s')
|
||||
}
|
||||
|
||||
const searchClickFn = () => {
|
||||
document.querySelector('#search-button > .search').addEventListener('click', openSearch)
|
||||
}
|
||||
|
||||
const searchClickFnOnce = () => {
|
||||
document.querySelector('#local-search .search-close-button').addEventListener('click', closeSearch)
|
||||
$searchMask.addEventListener('click', closeSearch)
|
||||
if (GLOBAL_CONFIG.localSearch.preload) dataObj = fetchData(GLOBAL_CONFIG.localSearch.path)
|
||||
}
|
||||
|
||||
// check url is json or not
|
||||
const isJson = url => {
|
||||
const reg = /\.json$/
|
||||
return reg.test(url)
|
||||
}
|
||||
|
||||
const fetchData = async (path) => {
|
||||
let data = []
|
||||
const response = await fetch(path)
|
||||
if (isJson(path)) {
|
||||
data = await response.json()
|
||||
} else {
|
||||
const res = await response.text()
|
||||
const t = await new window.DOMParser().parseFromString(res, 'text/xml')
|
||||
const a = await t
|
||||
data = [...a.querySelectorAll('entry')].map(item =>{
|
||||
return {
|
||||
title: item.querySelector('title').textContent,
|
||||
content: item.querySelector('content') && item.querySelector('content').textContent,
|
||||
url: item.querySelector('url').textContent
|
||||
}
|
||||
})
|
||||
}
|
||||
if (response.ok) {
|
||||
const $loadDataItem = document.getElementById('loading-database')
|
||||
$loadDataItem.nextElementSibling.style.display = 'block'
|
||||
$loadDataItem.remove()
|
||||
}
|
||||
return data
|
||||
}
|
||||
|
||||
const search = () => {
|
||||
if (!GLOBAL_CONFIG.localSearch.preload) {
|
||||
dataObj = fetchData(GLOBAL_CONFIG.localSearch.path)
|
||||
}
|
||||
|
||||
const $input = document.querySelector('#local-search-input input')
|
||||
const $resultContent = document.getElementById('local-search-results')
|
||||
const $loadingStatus = document.getElementById('loading-status')
|
||||
|
||||
$input.addEventListener('input', function () {
|
||||
const keywords = this.value.trim().toLowerCase().split(/[\s]+/)
|
||||
if (keywords[0] !== '') $loadingStatus.innerHTML = '<i class="fas fa-spinner fa-pulse"></i>'
|
||||
|
||||
$resultContent.innerHTML = ''
|
||||
let str = '<div class="search-result-list">'
|
||||
if (keywords.length <= 0) return
|
||||
let count = 0
|
||||
// perform local searching
|
||||
dataObj.then(data => {
|
||||
data.forEach(data => {
|
||||
let isMatch = true
|
||||
let dataTitle = data.title ? data.title.trim().toLowerCase() : ''
|
||||
const dataContent = data.content ? data.content.trim().replace(/<[^>]+>/g, '').toLowerCase() : ''
|
||||
const dataUrl = data.url.startsWith('/') ? data.url : GLOBAL_CONFIG.root + data.url
|
||||
let indexTitle = -1
|
||||
let indexContent = -1
|
||||
let firstOccur = -1
|
||||
// only match articles with not empty titles and contents
|
||||
if (dataTitle !== '' || dataContent !== '') {
|
||||
keywords.forEach((keyword, i) => {
|
||||
indexTitle = dataTitle.indexOf(keyword)
|
||||
indexContent = dataContent.indexOf(keyword)
|
||||
if (indexTitle < 0 && indexContent < 0) {
|
||||
isMatch = false
|
||||
} else {
|
||||
if (indexContent < 0) {
|
||||
indexContent = 0
|
||||
}
|
||||
if (i === 0) {
|
||||
firstOccur = indexContent
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
isMatch = false
|
||||
}
|
||||
|
||||
// show search results
|
||||
if (isMatch) {
|
||||
if (firstOccur >= 0) {
|
||||
// cut out 130 characters
|
||||
// let start = firstOccur - 30 < 0 ? 0 : firstOccur - 30
|
||||
// let end = firstOccur + 50 > dataContent.length ? dataContent.length : firstOccur + 50
|
||||
let start = firstOccur - 30
|
||||
let end = firstOccur + 100
|
||||
let pre = ''
|
||||
let post = ''
|
||||
|
||||
if (start < 0) {
|
||||
start = 0
|
||||
}
|
||||
|
||||
if (start === 0) {
|
||||
end = 100
|
||||
} else {
|
||||
pre = '...'
|
||||
}
|
||||
|
||||
if (end > dataContent.length) {
|
||||
end = dataContent.length
|
||||
} else {
|
||||
post = '...'
|
||||
}
|
||||
|
||||
let matchContent = dataContent.substring(start, end)
|
||||
|
||||
// highlight all keywords
|
||||
keywords.forEach(keyword => {
|
||||
const regS = new RegExp(keyword, 'gi')
|
||||
matchContent = matchContent.replace(regS, '<span class="search-keyword">' + keyword + '</span>')
|
||||
dataTitle = dataTitle.replace(regS, '<span class="search-keyword">' + keyword + '</span>')
|
||||
})
|
||||
|
||||
str += '<div class="local-search__hit-item"><a href="' + dataUrl + '" class="search-result-title">' + dataTitle + '</a>'
|
||||
count += 1
|
||||
|
||||
if (dataContent !== '') {
|
||||
str += '<p class="search-result">' + pre + matchContent + post + '</p>'
|
||||
}
|
||||
}
|
||||
str += '</div>'
|
||||
}
|
||||
})
|
||||
if (count === 0) {
|
||||
str += '<div id="local-search__hits-empty">' + GLOBAL_CONFIG.localSearch.languages.hits_empty.replace(/\$\{query}/, this.value.trim()) +
|
||||
'</div>'
|
||||
}
|
||||
str += '</div>'
|
||||
$resultContent.innerHTML = str
|
||||
if (keywords[0] !== '') $loadingStatus.innerHTML = ''
|
||||
window.pjax && window.pjax.refresh($resultContent)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
searchClickFn()
|
||||
searchClickFnOnce()
|
||||
|
||||
// pjax
|
||||
window.addEventListener('pjax:complete', () => {
|
||||
!btf.isHidden($searchMask) && closeSearch()
|
||||
searchClickFn()
|
||||
})
|
||||
})
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,278 @@
|
||||
const btf = {
|
||||
debounce: function (func, wait, immediate) {
|
||||
let timeout
|
||||
return function () {
|
||||
const context = this
|
||||
const args = arguments
|
||||
const later = function () {
|
||||
timeout = null
|
||||
if (!immediate) func.apply(context, args)
|
||||
}
|
||||
const callNow = immediate && !timeout
|
||||
clearTimeout(timeout)
|
||||
timeout = setTimeout(later, wait)
|
||||
if (callNow) func.apply(context, args)
|
||||
}
|
||||
},
|
||||
|
||||
throttle: function (func, wait, options) {
|
||||
let timeout, context, args
|
||||
let previous = 0
|
||||
if (!options) options = {}
|
||||
|
||||
const later = function () {
|
||||
previous = options.leading === false ? 0 : new Date().getTime()
|
||||
timeout = null
|
||||
func.apply(context, args)
|
||||
if (!timeout) context = args = null
|
||||
}
|
||||
|
||||
const throttled = function () {
|
||||
const now = new Date().getTime()
|
||||
if (!previous && options.leading === false) previous = now
|
||||
const remaining = wait - (now - previous)
|
||||
context = this
|
||||
args = arguments
|
||||
if (remaining <= 0 || remaining > wait) {
|
||||
if (timeout) {
|
||||
clearTimeout(timeout)
|
||||
timeout = null
|
||||
}
|
||||
previous = now
|
||||
func.apply(context, args)
|
||||
if (!timeout) context = args = null
|
||||
} else if (!timeout && options.trailing !== false) {
|
||||
timeout = setTimeout(later, remaining)
|
||||
}
|
||||
}
|
||||
|
||||
return throttled
|
||||
},
|
||||
|
||||
sidebarPaddingR: () => {
|
||||
const innerWidth = window.innerWidth
|
||||
const clientWidth = document.body.clientWidth
|
||||
const paddingRight = innerWidth - clientWidth
|
||||
if (innerWidth !== clientWidth) {
|
||||
document.body.style.paddingRight = paddingRight + 'px'
|
||||
}
|
||||
},
|
||||
|
||||
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: text,
|
||||
backgroundColor: bg,
|
||||
showAction: showAction,
|
||||
duration: duration,
|
||||
pos: position,
|
||||
customClass: 'snackbar-css'
|
||||
})
|
||||
},
|
||||
|
||||
diffDate: (d, more = false) => {
|
||||
const dateNow = new Date()
|
||||
const datePost = new Date(d)
|
||||
const dateDiff = dateNow.getTime() - datePost.getTime()
|
||||
const minute = 1000 * 60
|
||||
const hour = minute * 60
|
||||
const day = hour * 24
|
||||
const month = day * 30
|
||||
|
||||
let result
|
||||
if (more) {
|
||||
const monthCount = dateDiff / month
|
||||
const dayCount = dateDiff / day
|
||||
const hourCount = dateDiff / hour
|
||||
const minuteCount = dateDiff / minute
|
||||
|
||||
if (monthCount > 12) {
|
||||
result = datePost.toLocaleDateString().replace(/\//g, '-')
|
||||
} else if (monthCount >= 1) {
|
||||
result = parseInt(monthCount) + ' ' + GLOBAL_CONFIG.date_suffix.month
|
||||
} else if (dayCount >= 1) {
|
||||
result = parseInt(dayCount) + ' ' + GLOBAL_CONFIG.date_suffix.day
|
||||
} else if (hourCount >= 1) {
|
||||
result = parseInt(hourCount) + ' ' + GLOBAL_CONFIG.date_suffix.hour
|
||||
} else if (minuteCount >= 1) {
|
||||
result = parseInt(minuteCount) + ' ' + GLOBAL_CONFIG.date_suffix.min
|
||||
} else {
|
||||
result = GLOBAL_CONFIG.date_suffix.just
|
||||
}
|
||||
} else {
|
||||
result = parseInt(dateDiff / day)
|
||||
}
|
||||
return result
|
||||
},
|
||||
|
||||
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.pageYOffset
|
||||
if (currentPos > pos) pos = pos - 70
|
||||
|
||||
if ('scrollBehavior' in document.documentElement.style) {
|
||||
window.scrollTo({
|
||||
top: pos,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
let start = null
|
||||
pos = +pos
|
||||
window.requestAnimationFrame(function step (currentTime) {
|
||||
start = !start ? currentTime : start
|
||||
const progress = currentTime - start
|
||||
if (currentPos < pos) {
|
||||
window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos)
|
||||
} else {
|
||||
window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time))
|
||||
}
|
||||
if (progress < time) {
|
||||
window.requestAnimationFrame(step)
|
||||
} else {
|
||||
window.scrollTo(0, pos)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
animateIn: (ele, text) => {
|
||||
ele.style.display = 'block'
|
||||
ele.style.animation = text
|
||||
},
|
||||
|
||||
animateOut: (ele, text) => {
|
||||
ele.addEventListener('animationend', function f () {
|
||||
ele.style.display = ''
|
||||
ele.style.animation = ''
|
||||
ele.removeEventListener('animationend', f)
|
||||
})
|
||||
ele.style.animation = text
|
||||
},
|
||||
|
||||
getParents: (elem, selector) => {
|
||||
for (; elem && elem !== document; elem = elem.parentNode) {
|
||||
if (elem.matches(selector)) return elem
|
||||
}
|
||||
return null
|
||||
},
|
||||
|
||||
siblings: (ele, selector) => {
|
||||
return [...ele.parentNode.children].filter((child) => {
|
||||
if (selector) {
|
||||
return child !== ele && child.matches(selector)
|
||||
}
|
||||
return child !== ele
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {*} selector
|
||||
* @param {*} eleType the type of create element
|
||||
* @param {*} options object key: value
|
||||
*/
|
||||
wrap: (selector, eleType, options) => {
|
||||
const creatEle = document.createElement(eleType)
|
||||
for (const [key, value] of Object.entries(options)) {
|
||||
creatEle.setAttribute(key, value)
|
||||
}
|
||||
selector.parentNode.insertBefore(creatEle, selector)
|
||||
creatEle.appendChild(selector)
|
||||
},
|
||||
|
||||
unwrap: el => {
|
||||
const elParentNode = el.parentNode
|
||||
if (elParentNode !== document.body) {
|
||||
elParentNode.parentNode.insertBefore(el, elParentNode)
|
||||
elParentNode.parentNode.removeChild(elParentNode)
|
||||
}
|
||||
},
|
||||
|
||||
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 === 'mediumZoom') {
|
||||
const zoom = mediumZoom(ele)
|
||||
zoom.on('open', e => {
|
||||
const photoBg = document.documentElement.getAttribute('data-theme') === 'dark' ? '#121212' : '#fff'
|
||||
zoom.update({
|
||||
background: photoBg
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
if (service === 'fancybox') {
|
||||
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: {
|
||||
autoStart: false
|
||||
}
|
||||
})
|
||||
window.fancyboxRun = true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
initJustifiedGallery: function (selector) {
|
||||
selector.forEach(function (i) {
|
||||
if (!btf.isHidden(i)) {
|
||||
fjGallery(i, {
|
||||
itemSelector: '.fj-gallery-item',
|
||||
rowHeight: 220,
|
||||
gutter: 4,
|
||||
onJustify: function () {
|
||||
this.$container.style.opacity = '1'
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
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
|
||||
}, title, anchor)
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user