[opt] custom css

This commit is contained in:
xaoxuu 2022-12-15 22:09:01 +08:00
parent 725ab8db8e
commit e4f6ac690a
29 changed files with 104 additions and 76 deletions

View File

@ -197,9 +197,10 @@ footer:
######## Tag Plugins ######## ######## Tag Plugins ########
tag_plugins: tag_plugins:
# {% note text %} # {% ablock %} / {% note %}
note: note:
default_color: '' # light, dark, red, orange, yellow, green, cyan, blue, purple, warning, error default_color: '' # light, dark, red, orange, yellow, green, cyan, blue, purple, warning, error
border: true # true / false
# {% checkbox %} # {% checkbox %}
checkbox: checkbox:
interactive: false # enable interactive for user interactive: false # enable interactive for user
@ -319,12 +320,22 @@ plugins:
style: style:
darkmode: auto # auto / always / false darkmode: auto # auto / always / false
smooth_scroll: true # true / false smooth_scroll: true # true / false
font-size: 16px font-size:
root: 16px
body: .9375rem # 15px
code: 85% # 14px
codeblock: 0.8125rem # 13px
font-family: font-family:
logo: 'system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif' logo: 'system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif'
body: 'system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif' body: 'system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif'
code: 'Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif' code: 'Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif'
codeblock: 'Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif'
text-align: left text-align: left
border-radius:
card: 12px
block: 12px
button: 8px
image: 8px
color: color:
# 动态颜色(会根据明暗主题重设明度值,只用关心色相和饱和度即可) # 动态颜色(会根据明暗主题重设明度值,只用关心色相和饱和度即可)
background: 'hsl(212 16% 98%)' # 浅色背景颜色 background: 'hsl(212 16% 98%)' # 浅色背景颜色

View File

@ -39,11 +39,11 @@ module.exports = ctx => function(args, content = '') {
const abbr = tabName + ' ' + ++tabId const abbr = tabName + ' ' + ++tabId
const href = abbr.toLowerCase().split(' ').join('-') const href = abbr.toLowerCase().split(' ').join('-')
const isActive = (tabActive > 0 && tabActive === tabId) || (tabActive === 0 && tabId === 1) ? ' active' : '' const isActive = (tabActive > 0 && tabActive === tabId) || (tabActive === 0 && tabId === 1) ? ' active' : ''
tabNav += `<li class="tab${isActive}"><a href="#${href}">${tab.header || abbr}</a></li>` tabNav += `<div class="tab${isActive}"><a href="#${href}">${tab.header || abbr}</a></div>`
tabContent += `<div class="tab-pane${isActive}" id="${href}">${content}</div>` tabContent += `<div class="tab-pane${isActive}" id="${href}">${content}</div>`
}) })
tabNav = `<ul class="nav-tabs">${tabNav}</ul>` tabNav = `<div class="nav-tabs">${tabNav}</div>`
tabContent = `<div class="tab-content">${tabContent}</div>` tabContent = `<div class="tab-content">${tabContent}</div>`
var el = '' var el = ''

View File

@ -1,6 +1,6 @@
pre pre
font-family: $ff-code font-family: $ff-codeblock
font-size: $fs-code font-size: $fs-codeblock
tab-size: 4 tab-size: 4
-moz-tab-size: 4 -moz-tab-size: 4
-o-tab-size: 4 -o-tab-size: 4

View File

@ -2,9 +2,9 @@ blockquote
display: block display: block
margin-left: 0 margin-left: 0
margin-right: 0 margin-right: 0
padding: 0.5rem 0.75rem padding: 0.25rem 0.75rem
background: var(--block) background: var(--block)
$bd-left = 4px $bd-left = 4px
border-left: $bd-left solid var(--text-meta) border-left: $bd-left solid var(--text-meta)
border-radius: $bd-left $border-block $border-block $bd-left border-radius: $bd-left $border-button $border-button $bd-left
color: var(--text-p2) color: var(--text-p2)

View File

@ -4,7 +4,7 @@ code
font-family: $ff-code font-family: $ff-code
p>code:not([class]),li>code:not([class]) p>code:not([class]),li>code:not([class])
font-size: 85% font-size: $fs-code
background: var(--block) background: var(--block)
padding: .2em padding: .2em
border-radius: 4px border-radius: 4px
@ -16,7 +16,7 @@ p>code:not([class]),li>code:not([class])
overflow: hidden overflow: hidden
background: var(--block) background: var(--block)
line-height: 1.5 line-height: 1.5
font-family: $ff-code font-family: $ff-codeblock
box-sizing: border-box box-sizing: border-box
@media screen and (min-width: $device-mobile) @media screen and (min-width: $device-mobile)
min-width: 180px min-width: 180px
@ -27,15 +27,16 @@ p>code:not([class]),li>code:not([class])
display: block display: block
figcaption figcaption
color: var(--text-p2) color: var(--text-p2)
font-size: $fs-code font-size: $fs-codeblock
padding: 4px 0.5rem font-weight: 500
position: sticky margin-left: 0.5rem
left: 0 display: inline-block
background: var(--block-hover)
border-top-left-radius: "calc(%s - 1px)" % $border-block
border-top-right-radius: "calc(%s - 1px)" % $border-block
span span
margin-right: 4px padding: 4px 0.5rem
display: block
border-bottom-left-radius: $border-button
border-bottom-right-radius: $border-button
background: var(--block-hover)
>table >table
overflow: auto overflow: auto
display: block display: block

View File

@ -20,7 +20,8 @@ $color-text = convert(hexo-config('style.color.text'))
// font-style: normal // font-style: normal
$ff-body = system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif $ff-body = system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif
$ff-code = Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif $ff-codeblock = Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif
$ff-code = $ff-codeblock
$ff-logo = $ff-body $ff-logo = $ff-body
if hexo-config('style.font-family.body') if hexo-config('style.font-family.body')
@ -29,12 +30,15 @@ if hexo-config('style.font-family.body')
if hexo-config('style.font-family.code') if hexo-config('style.font-family.code')
$ff-code = convert(hexo-config('style.font-family.code')) $ff-code = convert(hexo-config('style.font-family.code'))
if hexo-config('style.font-family.codeblock')
$ff-codeblock = convert(hexo-config('style.font-family.codeblock'))
if hexo-config('style.font-family.logo') if hexo-config('style.font-family.logo')
$ff-logo = convert(hexo-config('style.font-family.logo')) $ff-logo = convert(hexo-config('style.font-family.logo'))
// font size // font size
$fs-root = convert(hexo-config('style.font-size')) $fs-root = convert(hexo-config('style.font-size.root'))
$fs-15 = .9375rem $fs-15 = .9375rem
$fs-14 = .875rem $fs-14 = .875rem
$fs-13 = .8125rem $fs-13 = .8125rem
@ -46,19 +50,23 @@ $fs-h3 = 1.375rem // 22px
$fs-h4 = 1.125rem // 18px $fs-h4 = 1.125rem // 18px
$fs-h5 = $fs-15 $fs-h5 = $fs-15
$fs-h6 = $fs-12 $fs-h6 = $fs-12
$fs-p = $fs-15 $fs-p = convert(hexo-config('style.font-size.body'))
$fs-code = $fs-13 $fs-code = convert(hexo-config('style.font-size.code'))
$fs-codeblock = convert(hexo-config('style.font-size.codeblock'))
$border-card = 12px
$border-block = 6px $border-card = convert(hexo-config('style.border-radius.card'))
$border-image = 6px $border-block = convert(hexo-config('style.border-radius.block'))
$border-button = convert(hexo-config('style.border-radius.button'))
$border-image = convert(hexo-config('style.border-radius.image'))
// //
:root :root
--width-left: 288px --width-left: 288px
--width-main: 720px --width-main: 720px
--gap-l: 16px --gap-l: 16px
--gap-p: .75rem // gap for paragraph --gap-p: 1rem // gap for paragraph
--gap-p-compact: 0.75rem
// desktop 2k or larger // desktop 2k or larger
@media screen and (min-width: $device-2k) @media screen and (min-width: $device-2k)
--gap-l: 32px --gap-l: 32px

View File

@ -83,7 +83,7 @@ scrollbar-codeblock($height = 4px)
&::-webkit-scrollbar-thumb &::-webkit-scrollbar-thumb
background: transparent background: transparent
cursor: pointer cursor: pointer
border-radius: $border-block border-radius: $border-button
&:hover &:hover
&::-webkit-scrollbar-thumb &::-webkit-scrollbar-thumb
background: var(--text-meta) background: var(--text-meta)

View File

@ -38,7 +38,6 @@ set_text_light()
--block: hsl($color-block-h, $color-block-s, 95) --block: hsl($color-block-h, $color-block-s, 95)
--block-border: hsl($color-block-h, $color-block-s, 90) --block-border: hsl($color-block-h, $color-block-s, 90)
--block-hover: hsl($color-block-h, $color-block-s, 92) --block-hover: hsl($color-block-h, $color-block-s, 92)
--block-lighten: hsl($color-block-h, $color-block-s, 100)
set_text_dark() set_text_dark()
--theme-bg2: $color-theme --theme-bg2: $color-theme
--theme-link: $color-link --theme-link: $color-link
@ -46,11 +45,10 @@ set_text_light()
set_darkmode() set_darkmode()
:root :root
--site-bg: hsl($color-background-h, $color-background-s * 0.5, (100 - $color-background-l) * 2 + 8) --site-bg: hsl($color-background-h, $color-background-s * 0.5, (100 - $color-background-l) * 2 + 8)
--card: hsl($color-block-h, $color-block-s * 1.5, 24) --card: hsl($color-block-h, $color-block-s * 1.2, 24)
--block: hsl($color-block-h, $color-block-s, 16) --block: hsl($color-block-h, $color-block-s, 16)
--block-border: hsl($color-block-h, $color-block-s, 24) --block-border: hsl($color-block-h, $color-block-s, 24)
--block-hover: hsl($color-block-h, $color-block-s, 20) --block-hover: hsl($color-block-h, $color-block-s, 20)
--block-lighten: hsl($color-block-h, $color-block-s, 32)
set_text_light() set_text_light()
@media screen and (max-width: $device-mobile-max) @media screen and (max-width: $device-mobile-max)
--site-bg: black --site-bg: black

View File

@ -55,7 +55,6 @@
.post-list .post-card:hover .post-list .post-card:hover
box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.1), 0 4px 16px 0px rgba(0, 0, 0, 0.1) box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.1), 0 4px 16px 0px rgba(0, 0, 0, 0.1)
transform: translateY(-1px)
img img
transform: scale(1.02) transform: scale(1.02)
filter: brightness(80%) filter: brightness(80%)

View File

@ -60,9 +60,12 @@ h1.article-title
p,ul,ol p,ul,ol
font-size: $fs-14 font-size: $fs-14
line-height: 1.5 line-height: 1.5
code
font-size: inherit
padding: 0
p,blockquote,.tag-plugin,ul,ol,.highlight,table p,blockquote,.tag-plugin,ul,ol,.highlight,table
* *
--gap-p: .5rem --gap-p: var(--gap-p-compact)
p,ul,ol p,ul,ol
margin-top: 'calc(%s - 4px)' % var(--gap-p) margin-top: 'calc(%s - 4px)' % var(--gap-p)
margin-bottom: 'calc(%s - 4px)' % var(--gap-p) margin-bottom: 'calc(%s - 4px)' % var(--gap-p)
@ -71,6 +74,9 @@ h1.article-title
margin-bottom: var(--gap-p) margin-bottom: var(--gap-p)
iframe iframe
display: block display: block
ul>li, ol>li
margin-top: 4px
margin-bottom: 4px
// titles // titles
.md-text.content .md-text.content

View File

@ -47,7 +47,7 @@
&.child &.child
padding-left: 2rem padding-left: 2rem
padding: .5em 1rem padding: .5em 1rem
border-radius: $border-block border-radius: $border-button
color: var(--text-p2) color: var(--text-p2)
align-items: center align-items: center
justify-content: space-between justify-content: space-between

View File

@ -14,7 +14,7 @@
a.more a.more
padding: 0.25rem 0.5rem padding: 0.25rem 0.5rem
border-radius: $border-block border-radius: $border-button
color: var(--text-p1) color: var(--text-p1)
article.md-text.content+.related-wrap article.md-text.content+.related-wrap

View File

@ -28,7 +28,7 @@ nav.menu
text-align: center text-align: center
&.active, &:hover &.active, &:hover
color: var(--text-p1) color: var(--text-p1)
background: var(--block-lighten) background: var(--card)
box-shadow: $boxshadow-button box-shadow: $boxshadow-button
.l_left .menu a.nav-item .l_left .menu a.nav-item

View File

@ -1,8 +1,9 @@
.md-text .checkbox .md-text .tag-plugin.checkbox
display: flex display: flex
align-items: center
font-size: $fs-15 font-size: $fs-15
line-height: 1.2 line-height: 1.2
--gap-p: .25rem --gap-p: 'calc(%s / 2)' % var(--gap-p-compact)
input input
-webkit-appearance: none -webkit-appearance: none
-moz-appearance: none -moz-appearance: none
@ -20,8 +21,6 @@
margin-right: 8px margin-right: 8px
if hexo-config('tag_plugins.checkbox.interactive') != true if hexo-config('tag_plugins.checkbox.interactive') != true
pointer-events: none pointer-events: none
span
margin-top: 1px
/* Checkbox */ /* Checkbox */
input[type=checkbox] input[type=checkbox]
&:before, &:after &:before, &:after

View File

@ -16,8 +16,8 @@ set_dynamic_color($theme)
--theme-bg1: hsl(hue($theme), 90, 90) --theme-bg1: hsl(hue($theme), 90, 90)
--theme-bg2: hsl(hue($theme), 80, 95) --theme-bg2: hsl(hue($theme), 80, 95)
--theme-border: hsl(hue($theme), 50, 80) --theme-border: hsl(hue($theme), 50, 80)
--text-p0: hsl(hue($theme), 60, 16) --text-p0: hsl(hue($theme), 55, 16)
--text-p1: hsl(hue($theme), 50, 24) --text-p1: hsl(hue($theme), 55, 20)
--text-p2: hsl(hue($theme), 90, 24) --text-p2: hsl(hue($theme), 90, 24)
.tag-plugin .tag-plugin
@ -72,8 +72,8 @@ set_darkmode_tags()
--theme-bg1: hsl(hue($theme), 80, 20) --theme-bg1: hsl(hue($theme), 80, 20)
--theme-bg2: hsl(hue($theme), 16, 16) --theme-bg2: hsl(hue($theme), 16, 16)
--theme-border: hsl(hue($theme), 50, 24) --theme-border: hsl(hue($theme), 50, 24)
--text-p0: hsl(hue($theme), 80, 80) --text-p0: hsl(hue($theme), 100, 85)
--text-p1: hsl(hue($theme), 64, 80) --text-p1: hsl(hue($theme), 50, 75)
--text-p2: hsl(hue($theme), 80, 72) --text-p2: hsl(hue($theme), 80, 72)
.tag-plugin.tag .tag-plugin.tag
set_dynamic_color($color-theme) set_dynamic_color($color-theme)

View File

@ -3,7 +3,7 @@
justify-content: space-between justify-content: space-between
box-sizing: border-box box-sizing: border-box
background: var(--block) background: var(--block)
border-radius: $border-block border-radius: $border-button
border: 1px solid var(--block-border) border: 1px solid var(--block-border)
overflow: hidden overflow: hidden
width: 320px width: 320px

View File

@ -1,7 +1,7 @@
.tag-plugin.folders .tag-plugin.folders
display: block display: block
margin: 1rem 0 margin: 1rem 0
border-radius: $border-block border-radius: $border-button
font-size: $fs-14 font-size: $fs-14
border: 1px solid var(--theme-border) border: 1px solid var(--theme-border)
overflow: hidden overflow: hidden

View File

@ -2,7 +2,7 @@ details.folding
display: block display: block
padding: 1rem padding: 1rem
margin: 1rem 0 margin: 1rem 0
border-radius: $border-block border-radius: $border-button
font-size: $fs-14 font-size: $fs-14
background: var(--theme-bg2) background: var(--theme-bg2)
border: 1px solid var(--theme-border) border: 1px solid var(--theme-border)
@ -10,7 +10,7 @@ details.folding
cursor: pointer cursor: pointer
padding: .75rem 1rem padding: .75rem 1rem
margin: 0 - 1rem margin: 0 - 1rem
border-radius: $border-block border-radius: $border-button
color: var(--text-p2) color: var(--text-p2)
font-weight: 500 font-weight: 500
position: relative position: relative
@ -47,8 +47,8 @@ details.folding[open]
margin: 0 - 1rem margin: 0 - 1rem
margin-top: 0 margin-top: 0
background: var(--card) background: var(--card)
border-bottom-left-radius: 'calc(%s - 1px)' % $border-block border-bottom-left-radius: 'calc(%s - 1px)' % $border-button
border-bottom-right-radius: 'calc(%s - 1px)' % $border-block border-bottom-right-radius: 'calc(%s - 1px)' % $border-button
font-size: $fs-15 font-size: $fs-15
>:first-child >:first-child
margin-top: 0 margin-top: 0

View File

@ -17,7 +17,10 @@
margin-top: -0.25em margin-top: -0.25em
p:last-child p:last-child
margin-bottom: -0.25em margin-bottom: -0.25em
.md-text .tag-plugin.grid
margin-top: -0.5rem
margin-bottom: -0.5rem
.tag-plugin.grid .tag-plugin.grid
@media screen and (max-width: $device-tablet) @media screen and (max-width: $device-tablet)

View File

@ -18,7 +18,7 @@
@media screen and (max-width: $device-mobile-375) @media screen and (max-width: $device-mobile-375)
width: 100% width: 100%
box-shadow: $boxshadow-card box-shadow: $boxshadow-card
border-radius: $border-block border-radius: $border-button
trans2: box-shadow transform trans2: box-shadow transform
&:hover &:hover
box-shadow: $boxshadow-card-float box-shadow: $boxshadow-card-float

View File

@ -1,26 +1,25 @@
.md-text .tag-plugin.note .md-text .tag-plugin.note
position: relative position: relative
margin-top: 1rem padding: 0.25rem 1rem
margin-bottom: 1rem
padding: 0 1rem
border-radius: $border-block border-radius: $border-block
background: var(--theme-bg2) background: var(--theme-bg2)
border: 1px solid var(--theme-border) if hexo-config('tag_plugins.note.border') == true
border: 1px solid var(--theme-border)
color: var(--text-p1) color: var(--text-p1)
>.title >.title
font-size: $fs-15 font-size: $fs-15
line-height: 1.2 line-height: 1.5
margin-top: 1rem margin-top: var(--gap-p-compact)
font-weight: 500 font-weight: 500
color: var(--text-p0) color: var(--text-p0)
>.body >.body
&,p &,p
font-size: $fs-14 font-size: $fs-14
line-height: 1.5 line-height: 1.5
margin-top: .5rem margin-top: var(--gap-p-compact)
margin-bottom: 1rem margin-bottom: var(--gap-p-compact)
>.body:only-child >.body:only-child
margin: 1rem 0 margin: 'calc(%s - 0.25rem)' % var(--gap-p) 0
.md-text .tag-plugin.note[color] .md-text .tag-plugin.note[color]

View File

@ -20,7 +20,7 @@
max-width 400px max-width 400px
position: relative position: relative
// override // override
.tag-plugin.quot .md-text.content .tag-plugin.quot
h1 h1
font-size: $fs-h1 font-size: $fs-h1
font-weight: 900 font-weight: 900
@ -30,6 +30,7 @@
h2,h3,h4,h5,h6 h2,h3,h4,h5,h6
font-size: $fs-h3 font-size: $fs-h3
margin-top: 1em margin-top: 1em
margin-bottom: 0
p p
font-size: $fs-h4 font-size: $fs-h4
color: var(--text-p0) color: var(--text-p0)

View File

@ -16,7 +16,7 @@
align-self: flex-end align-self: flex-end
.tag-plugin.tabs .tag-plugin.tabs
ul.nav-tabs .nav-tabs
display: flex display: flex
align-self: center align-self: center
overflow: scroll visible overflow: scroll visible
@ -36,7 +36,7 @@
bottom: 0 bottom: 0
left: 0 left: 0
border-radius: 2px border-radius: 2px
li.tab .tab
list-style-type: none list-style-type: none
a a
display: block display: block

View File

@ -99,15 +99,11 @@
.tag-plugin.timeline .body .tag-plugin.timeline .body
background: var(--card) background: var(--card)
border-radius: 12px border-radius: $border-card
border-top-left-radius: 2px border-top-left-radius: 2px
padding: 0.5rem 1rem padding: 0.5rem 1rem
margin-top: 4px margin-top: 4px
box-shadow: $boxshadow-block box-shadow: $boxshadow-block
trans2: transform box-shadow
&:hover
transform: translateY(-1px)
box-shadow: $boxshadow-card-float
p p
font-size: $fs-14 font-size: $fs-14
img img

View File

@ -1,7 +1,7 @@
details.toc details.toc
background: var(--block) background: var(--block)
border: 1px solid var(--block-border) border: 1px solid var(--block-border)
border-radius: $border-block border-radius: $border-button
overflow: hidden overflow: hidden
color: var(--text-p2) color: var(--text-p2)
summary summary

View File

@ -16,7 +16,7 @@
line-height: 1 line-height: 1
box-sizing: border-box box-sizing: border-box
font-family: $ff-body font-family: $ff-body
border-radius: $border-block border-radius: $border-button
background-color: var(--card) background-color: var(--card)
color: var(--text-p0) color: var(--text-p0)
border: 1px solid var(--block-border) border: 1px solid var(--block-border)
@ -38,7 +38,7 @@
font-size: $fs-14 font-size: $fs-14
padding: 2rem padding: 2rem
background: var(--block) background: var(--block)
border-radius: $border-block border-radius: $border-button
#search-result #search-result
ul.search-result-list ul.search-result-list

View File

@ -5,7 +5,7 @@
// //
.widget-wrapper.toc.multi .doc-tree .widget-wrapper.toc.multi .doc-tree
border-radius: $border-block border-radius: $border-button
background: var(--block) background: var(--block)
overflow: hidden overflow: hidden
border: 1px solid var(--block-border) border: 1px solid var(--block-border)

View File

@ -35,15 +35,22 @@ div.swiper-slide
max-width: 75% max-width: 75%
.swiper-button-prev,.swiper-button-next .swiper-button-prev,.swiper-button-next
padding: 1rem 0.5rem padding: 1rem 0.25rem
margin-top: -2rem !important margin-top: -2rem !important
border-radius: 4px border-radius: 40px
background: alpha(white, 0.25) background: alpha(white, 0.25)
trans1 background trans1 background
--swiper-theme-color: black !important --swiper-theme-color: var(--text-p0) !important
&:after &:after
font-size: 1.2rem !important font-size: 1.2rem !important
font-weight: 700 !important font-weight: 700 !important
color: var(--swiper-theme-color)
&:hover &:hover
background: white !important background: white !important
--swiper-theme-color: $color-hover !important --swiper-theme-color: $color-hover !important
.swiper-button-prev:after
transform: translateX(-1px)
.swiper-button-next:after
transform: translateX(1px)

View File

@ -144,7 +144,7 @@ const init = {
*/ */
registerTabsTag: function () { registerTabsTag: function () {
// Binding `nav-tabs` & `tab-content` by real time permalink changing. // Binding `nav-tabs` & `tab-content` by real time permalink changing.
document.querySelectorAll('.tabs ul.nav-tabs .tab').forEach(element => { document.querySelectorAll('.tabs .nav-tabs .tab').forEach(element => {
element.addEventListener('click', event => { element.addEventListener('click', event => {
event.preventDefault(); event.preventDefault();
// Prevent selected tab to select again. // Prevent selected tab to select again.