diff options
22 files changed, 566 insertions, 103 deletions
diff --git a/assets/js/header.js b/assets/js/header.js new file mode 100644 index 0000000..1e9a8e6 --- /dev/null +++ b/assets/js/header.js @@ -0,0 +1,20 @@ +// Header Inner Width + +const headerInner = document.querySelector('.header-inner'); +const mainInner = document.querySelector('.main-inner'); + +function setHeaderInnerWidth() { + const mainInnerWidth = window.getComputedStyle(mainInner, null).getPropertyValue('width'); + + headerInner.style.setProperty('--main-inner', mainInnerWidth); +} + +if (mainInner !== null) { + setHeaderInnerWidth(); + + window.addEventListener('resize', setHeaderInnerWidth); +} else { + {{ with .Site.Params.headerFallbackWidth | default "32em" }} + headerInner.style.setProperty('--main-inner', '{{ . }}'); + {{ end }} +} diff --git a/assets/js/nav-toggle.js b/assets/js/nav-toggle.js new file mode 100644 index 0000000..c933855 --- /dev/null +++ b/assets/js/nav-toggle.js @@ -0,0 +1,68 @@ +// Create nav toggle icon + +const navToggleLabel = document.querySelector('.nav-toggle'); +const navToggleLabelInner = document.createElement('div'); + +navToggleLabelInner.className = 'nav-toggle-inner'; +navToggleLabel.appendChild(navToggleLabelInner); + +for (let i = 0; i < 3; i++) { + const span = document.createElement('span'); + + navToggleLabelInner.appendChild(span); +} + + +// Main function + +const navToggle = document.getElementById('nav-toggle'); +const header = document.querySelector('.header'); +const navCurtain = document.querySelector('.nav-curtain'); + +navToggle.addEventListener('change', (e) => { + if (e.target.checked) { + header.classList.add('open'); + navToggleLabel.classList.add('open'); + + header.classList.remove('fade'); + + navCurtain.style = 'display: block'; + } else { + header.classList.remove('open'); + navToggleLabel.classList.remove('open'); + + header.classList.add('fade'); + + // Cannot remove `display: block` immediately, or CSS animation + // will failed. The workaround is down below. + + // navCurtain.removeAttribute('style'); + } +}); + + +// Fix animation failed caused by removing `display: block` + +navCurtain.addEventListener('animationend', (e) => { + if (!navToggle.checked) { + e.target.removeAttribute('style'); + } +}); + + +// Close nav when window is scrolled or resized by user + +window.addEventListener('scroll', closeNav); + +window.addEventListener('resize', closeNav); + +function closeNav() { + if (navToggle.checked) { + navToggle.checked = false; + + header.classList.remove('open'); + navToggleLabel.classList.remove('open'); + + header.classList.add('fade'); + } +} diff --git a/assets/scss/base/_base.scss b/assets/scss/base/_base.scss index 37acd6d..8f2e0e8 100644 --- a/assets/scss/base/_base.scss +++ b/assets/scss/base/_base.scss @@ -25,6 +25,12 @@ body { display: block; } +@if ($headerLayoutFlex) { + .main { + padding-top: 7em; + } +} + .main-inner { margin: 0 auto; display: block; diff --git a/assets/scss/base/_responsive.scss b/assets/scss/base/_responsive.scss index b1dfa67..3e09f86 100644 --- a/assets/scss/base/_responsive.scss +++ b/assets/scss/base/_responsive.scss @@ -7,12 +7,129 @@ transform: none; float: right; } - .menu { - display: flex; - justify-content: space-around; - word-break: break-all; - } - .menu-item { - margin: 0; + @if ($headerLayoutFlex) { + @if ($enableNavToggle) { + .header-inner { + display: block; + margin: 0; + } + .header-inner { + width: 100%; + } + .site-brand { + margin-left: 1em; + } + .nav-toggle { + display: block; + } + .nav { + display: none; + text-align: center; + margin: 2em 0; + } + .menu { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + align-items: center; + } + .menu-item { + margin: 0; + padding: 1em; + .icon { + margin: 0; + } + } + .menu-item-name { + display: block; + margin: 0; + } + .header.open { + .nav { + display: block; + animation: appear $duration; + animation-iteration-count: 1; + animation-fill-mode: forwards; + } + @keyframes appear { + 0% { + opacity: 0; + height: 0; + margin: 0; + transform: scaleY(0); + transform-origin: top; + } + 100% { + opacity: 1; + height: $navHeight; + margin: 2em 0; + transform: scaleY(1); + transform-origin: top; + } + } + .nav-curtain { + animation: appearCurtain $duration; + animation-iteration-count: 1; + animation-fill-mode: forwards; + } + @keyframes appearCurtain { + 0% { + visibility: hidden; + opacity: 0; + } + 100% { + visibility: visible; + opacity: 1; + } + } + } + .header.fade { + .nav { + display: block; + animation: fade $duration; + animation-iteration-count: 1; + animation-fill-mode: forwards; + } + @keyframes fade { + 0% { + opacity: 1; + height: $navHeight; + margin: 2em 0; + transform: scaleY(1); + transform-origin: top; + } + 100% { + opacity: 0; + height: 0; + margin: 0; + transform: scaleY(0); + transform-origin: top; + } + } + .nav-curtain { + animation: fadeCurtain $duration; + animation-iteration-count: 1; + animation-fill-mode: forwards; + } + @keyframes fadeCurtain { + 0% { + visibility: visible; + opacity: 1; + } + 100% { + visibility: hidden; + opacity: 0; + } + } + } + } + } @else { + .menu { + display: flex; + justify-content: space-around; + word-break: break-all; + } + .menu-item { + margin: 0; + } } } diff --git a/assets/scss/components/_dark-mode.scss b/assets/scss/components/_dark-mode.scss index 01e7485..4e3cb53 100644 --- a/assets/scss/components/_dark-mode.scss +++ b/assets/scss/components/_dark-mode.scss @@ -1,11 +1,25 @@ #theme-switcher { - padding: 1em; cursor: pointer; - float: right; position: relative; z-index: 4; } -[data-theme="dark"] img { - filter: brightness(50%); +[data-theme="dark"] { + img { + filter: brightness(50%); + } + #theme-switcher, #lang-switcher { + opacity: 0.5; + } +} + +@if ($headerLayoutFlex) { + #theme-switcher { + padding: 0; + } +} @else { + #theme-switcher { + padding: 1em; + float: right; + } } diff --git a/assets/scss/components/_multilingual.scss b/assets/scss/components/_multilingual.scss index fd9bc80..c6d3ddc 100644 --- a/assets/scss/components/_multilingual.scss +++ b/assets/scss/components/_multilingual.scss @@ -1,13 +1,27 @@ #lang-switcher { - padding: 1em; - float: left; position: relative; z-index: 4; } #langs { + display: none; + position: absolute; margin: 0; padding: 0; list-style: none; - display: none; +} + +@if ($headerLayoutFlex) { + #lang-switcher { + padding: 0; + } + #langs { + left: 0; + right: 0; + } +} @else { + #lang-switcher { + padding: 1em; + float: left; + } } diff --git a/assets/scss/components/_nav-toggle.scss b/assets/scss/components/_nav-toggle.scss new file mode 100644 index 0000000..2abb348 --- /dev/null +++ b/assets/scss/components/_nav-toggle.scss @@ -0,0 +1,63 @@ +#nav-toggle { + display: none; +} + +.nav-toggle { + display: none; + position: absolute; + top: 1em; + right: 1em; + margin-right: 1em; + width: 1em; + height: 1em; + cursor: pointer; +} + +.nav-toggle-inner { + padding: 1em; + display: inline-block; +} + +.nav-toggle { + span { + display: block; + position: absolute; + height: 0.1em; + width: 1em; + background-color: var(--color-contrast-high); + transition: all $duration; + &:nth-child(1) { + top: 0.4em; + } + &:nth-child(2) { + top: 0.7em; + } + &:nth-child(3) { + top: 1em; + } + } + &.open { + span { + &:nth-child(1) { + top: 75%; + transform: rotate(225deg); + } + &:nth-child(2) { + width: 0; + opacity: 0; + transform: rotate(-135deg); + } + &:nth-child(3) { + top: 75%; + transform: rotate(-45deg); + } + } + } +} + +.nav-curtain { + height: 100vh; + width: 100vw; + backdrop-filter: saturate(180%) blur(1em); + background: $headerBackground rgba(0, 0, 0, 0.5); +} diff --git a/assets/scss/layout/_header.scss b/assets/scss/layout/_header.scss index e1e0185..86d7a02 100644 --- a/assets/scss/layout/_header.scss +++ b/assets/scss/layout/_header.scss @@ -1,10 +1,35 @@ .header { z-index: 3; - position: relative; } -.site-brand { - text-align: center; +@if ($headerLayoutFlex) { + .header { + position: fixed; + width: 100%; + } + .header-wrapper { + padding: 1em 0; + backdrop-filter: saturate(180%) blur(1em); + background: $headerBackground; + } + .header-inner { + display: flex; + justify-content: space-between; + align-items: baseline; + width: var(--main-inner); + margin: 0 auto; + } + .site-brand { + margin-right: 1em; + } +} @else { + .header { + position: relative; + background: $headerBackground; + } + .site-brand { + text-align: center; + } } @if ($siteBrandSVG) { @@ -23,14 +48,3 @@ } } } - -@if variable-exists("siteBrandBackgroundColor") { - .site-brand { - background-color: $siteBrandBackgroundColor; - } -} -@if variable-exists("siteBrandBackgroundImage") { - .site-brand { - background-image: $siteBrandBackgroundImage; - } -} diff --git a/assets/scss/layout/_menu.scss b/assets/scss/layout/_menu.scss index 062b542..7256769 100644 --- a/assets/scss/layout/_menu.scss +++ b/assets/scss/layout/_menu.scss @@ -7,15 +7,12 @@ padding: 0; margin: 0; list-style: none; - text-align: center; - background: var(--color-contrast-lower); line-height: 1.5; font-weight: 500; } .menu-item { display: inline-block; - margin: 0 1em; a { color: var(--color-contrast-medium); &:hover { @@ -30,6 +27,29 @@ } } -.menu-item-name { - display: flex; +@if ($headerLayoutFlex) { + .nav { + text-align: right; + font-size: 80%; + } + .menu-item { + margin-left: 0.5em; + .icon { + margin-bottom: 0.2em; + } + } + .menu-item-name { + margin-left: 0.3em; + } +} @else { + .menu { + text-align: center; + background: var(--color-contrast-lower); + } + .menu-item { + margin: 0 1em; + } + .menu-item-name { + display: flex; + } } diff --git a/assets/scss/main.scss b/assets/scss/main.scss index e9c87a1..18dead9 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -19,6 +19,22 @@ $duration: {{ . }}s; {{ end }} +{{ if eq .Site.Params.headerLayout "flex" }} + $headerLayoutFlex: true; +{{ else }} + $headerLayoutFlex: false; +{{ end }} + +{{ if .Site.Params.enableNavToggle }} + $enableNavToggle: true; + + {{ with .Site.Params.navHeight | default "10em" }} + $navHeight: {{ . }}; + {{ end }} +{{ else }} + $enableNavToggle: false; +{{ end }} + // Utilities @@ -151,6 +167,10 @@ // Header {{ if .Site.Params.enableHeader }} + {{ with .Site.Params.headerBackground }} + $headerBackground: {{ . }}; + {{ end }} + {{ if .Site.Params.siteBrandSVG }} $siteBrandSVG: true; $siteBrandSVGWidth: {{ .Site.Params.siteBrandSVGWidth }}px; @@ -163,20 +183,17 @@ $siteBrandFontColor: {{ .Site.Params.siteBrandFontColor }}; {{ end }} - {{ with .Site.Params.siteBrandBackgroundColor }} - $siteBrandBackgroundColor: {{ . }}; - {{ end }} - {{ with .Site.Params.siteBrandBackgroundImage }} - $siteBrandBackgroundImage: {{ . }}; - {{ end }} - @import 'layout/header'; + + {{ if and (eq .Site.Params.headerLayout "flex") .Site.Params.enableNavToggle }} + @import 'components/nav-toggle'; + {{ end }} {{ end }} // Menu Bar -{{ if .Site.Params.enableMenu }} +{{ if or .Site.Params.enableMenu (eq .Site.Params.headerLayout "flex") }} @import 'layout/menu'; {{ end }} diff --git a/config-examples/en-us/config.toml b/config-examples/en-us/config.toml index 34007c0..2d0da0d 100644 --- a/config-examples/en-us/config.toml +++ b/config-examples/en-us/config.toml @@ -158,6 +158,8 @@ uglyURLs = false # MemE supports the following four menus: # 1. main Menu bar below the header +# (center layout) or inside +# the header (flex layout) # 2. home Links at the bottom of the # homepage (valid for the # `poetry` and `footage` @@ -179,17 +181,20 @@ uglyURLs = false # post Icon (won’t display if it # is left empty("") or does # not exist) -# identifier Icon’s class name (invalid -# for the `main` menu) +# identifier Icon’s class name +# (there are two speacial +# values for header layout +# flex: `theme-switcher`, +# `lang-switcher`) [menu] ## Menu bar - [[menu.main]] - url = "/" - name = "Home" - weight = 1 - pre = "internal" - post = "home" + # [[menu.main]] + # url = "/" + # name = "Home" + # weight = 1 + # pre = "internal" + # post = "home" [[menu.main]] url = "/posts/" name = "Posts" @@ -214,6 +219,12 @@ uglyURLs = false weight = 5 pre = "internal" post = "user-circle" + [[menu.main]] + weight = 6 + identifier = "theme-switcher" + [[menu.main]] + weight = 7 + identifier = "lang-switcher" @@ -227,13 +238,37 @@ uglyURLs = false enableHeader = true displayHeaderInHome = true + # Note: invalid for header layout flex + + headerBackground = "linear-gradient(90deg, #f795331a 0, #f370551a 15%, #ef4e7b1a 30%, #a166ab1a 44%, #5073b81a 58%, #1098ad1a 72%, #07b39b1a 86%, #6dba821a 100%)" + # Note: https://developer.mozilla.org/en-US/docs/Web/CSS/background + + headerLayout = "flex" + # Note: center or flex + + headerFallbackWidth = "32em" + # Note: by default, MemE uses main-inner’s + # width for `headerWidth`, but in + # some pages (e.g. homepage layout + # poetry, footage), there is no + # main-inner, so you need to give + # a fallback value for this + # situation. + + # Hide menu bar and display a toggle + # on narrow screen? + enableNavToggle = true + + navHeight = "10em" + # Note: menu bar height when it’s + # toggled ###################################### # Brand Bar (inside header) # Use SVG? - siteBrandSVG = true + siteBrandSVG = false # If true, put your SVG in the `SVG.toml` # file and configure the following options. # Unit: px @@ -247,21 +282,18 @@ uglyURLs = false # family can be configured in typography # section at the bottom of this file. # Unit: em - siteBrandFontSize = 5 - siteBrandFontColor = "#fff" - - # siteBrandBackgroundColor = "hsl(240, 8%, 12%)" - siteBrandBackgroundImage = "linear-gradient(90deg, #f79533 0, #f37055 15%, #ef4e7b 30%, #a166ab 44%, #5073b8 58%, #1098ad 72%, #07b39b 86%, #6dba82 100%)" - # ATTENTION: These two items cannot be - # set together! + siteBrandFontSize = 1 + siteBrandFontColor = "var(--color-contrast-high)" ###################################### # Menu Bar enableMenu = true + # Note: invalid for header layout flex displayMenuInHome = true + # Note: invalid for header layout flex # Highlight current menu item by section? activeInSection = false diff --git a/config-examples/zh-cn/config.toml b/config-examples/zh-cn/config.toml index df67440..e50e4d5 100644 --- a/config-examples/zh-cn/config.toml +++ b/config-examples/zh-cn/config.toml @@ -155,7 +155,8 @@ uglyURLs = false # 菜单配置 # MemE 主题支持以下四种菜单： -# 1. main 顶栏下方的菜单栏 +# 1. main 顶栏下方（居中布局）或里面（弹性 +# 布局）的菜单栏 # 2. home 首页的底部链接（适用于「诗意 # 人生」和「视频片段」布局） # 3. socials 社交栏（关于页面的极简页脚） @@ -167,16 +168,19 @@ uglyURLs = false # weight 位置 # pre 内链（internal）或外链（external） # post 图标（留空（""）则无） -# identifier 图标的 Class 名（菜单栏无效） +# identifier 图标的 Class 名 +# （对于弹性布局的顶栏有两个特殊 +# 的值：`theme-switcher`、 +# `lang-switcher`） [menu] ## 菜单栏 - [[menu.main]] - url = "/" - name = "首页" - weight = 1 - pre = "internal" - post = "home" + # [[menu.main]] + # url = "/" + # name = "首页" + # weight = 1 + # pre = "internal" + # post = "home" [[menu.main]] url = "/posts/" name = "文章" @@ -201,6 +205,12 @@ uglyURLs = false weight = 5 pre = "internal" post = "user-circle" + [[menu.main]] + weight = 6 + identifier = "theme-switcher" + [[menu.main]] + weight = 7 + identifier = "lang-switcher" @@ -216,13 +226,36 @@ uglyURLs = false # 是否在首页显示 displayHeaderInHome = true + # 说明：对弹性布局的顶栏无效 + + # 背景 + headerBackground = "linear-gradient(90deg, #f795331a 0, #f370551a 15%, #ef4e7b1a 30%, #a166ab1a 44%, #5073b81a 58%, #1098ad1a 72%, #07b39b1a 86%, #6dba821a 100%)" + # 说明：https://developer.mozilla.org/zh-CN/docs/Web/CSS/background + + # 顶栏布局 + headerLayout = "flex" + # 说明：居中布局（center）或弹性布局（flex） + + # 顶栏宽度的回退值 + headerFallbackWidth = "36em" + # 说明：默认情况，MemE 使用 main-inner 元素 + # 的宽度作为顶栏宽度，但是在一些页面（比 + # 如「诗意人生」和「视频片段」布局的首页）， + # 不存在 main-inner 元素，所以你需要为 + # 这种情况给一个回退值。 + + # 在窄视图下隐藏菜单栏并显示一个按钮？ + enableNavToggle = true + + navHeight = "10em" + # 说明：菜单栏展开时的高度 ###################################### # 品牌栏（在顶栏内） # 是否使用 SVG 图片 - siteBrandSVG = true + siteBrandSVG = false # 如果是，请将你的 SVG 放到 `SVG.toml` 文 # 件内，并配置以下项。单位：px。 siteBrandSVGWidth = 250 @@ -231,14 +264,8 @@ uglyURLs = false # 如果否，则会使用你的站点标题作为默认值，并 # 以文字的形式显示，下方可配置字号和字色。字 # 体请到底部的字体部分配置。单位：em。 - siteBrandFontSize = 5 - siteBrandFontColor = "#fff" - - # 背景色 - # siteBrandBackgroundColor = "hsl(240, 8%, 12%)" - # 背景图片 - siteBrandBackgroundImage = "linear-gradient(90deg, #f79533 0, #f37055 15%, #ef4e7b 30%, #a166ab 44%, #5073b8 58%, #1098ad 72%, #07b39b 86%, #6dba82 100%)" - # 注意：背景色和背景图片只能二选一 + siteBrandFontSize = 1 + siteBrandFontColor = "var(--color-contrast-high)" ###################################### @@ -246,9 +273,11 @@ uglyURLs = false # 是否开启 enableMenu = true + # 说明：对弹性布局的顶栏无效 # 是否在首页显示 displayMenuInHome = true + # 说明：对弹性布局的顶栏无效 # 是否按文章分区高亮当前菜单项 activeInSection = false diff --git a/exampleSite/resources/_gen/assets/scss/scss/main.scss_b04c21e44835e7dcdc8cb03d103b5ef1.content b/exampleSite/resources/_gen/assets/scss/scss/main.scss_b04c21e44835e7dcdc8cb03d103b5ef1.content index 1751ede..9de1b6d 100644 --- a/exampleSite/resources/_gen/assets/scss/scss/main.scss_b04c21e44835e7dcdc8cb03d103b5ef1.content +++ b/exampleSite/resources/_gen/assets/scss/scss/main.scss_b04c21e44835e7dcdc8cb03d103b5ef1.content @@ -1 +1 @@ -:root{--font-size: 20px;--line-height: 1.618}html,body{margin:0;width:100%;height:100%}body{font-size:var(--font-size);tab-size:4;color:var(--color-contrast-high);background-color:var(--color-bg);overflow-wrap:break-word;word-wrap:break-word;line-height:1.618}.container{min-height:100%;min-width:100%;position:relative}.main{padding:2em 1em 15em;display:block}.main-inner{margin:0 auto;display:block}.icon{width:1em;height:1em;fill:currentColor;display:inline-block}svg{vertical-align:middle}h1,h2,h3,h4,h5,h6{margin:1.618em 0 1em;color:var(--color-contrast-higher)}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{text-decoration:none !important;color:var(--color-contrast-higher)}h1{font-size:2em}h2{font-size:1.8em}h3{font-size:1.6em}h4{font-size:1.4em}h5{font-size:1.2em}h6{font-size:1em}a{color:var(--color-contrast-high);text-decoration:none;transition:all .5s}a:hover{color:var(--color-primary)}::selection{background-color:hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.3)}::-webkit-scrollbar{width:calc(var(--font-size) * 0.4);height:calc(var(--font-size) * 0.2)}::-webkit-scrollbar-track{background-color:var(--color-bg)}::-webkit-scrollbar-thumb{background-color:var(--color-contrast-low)}::-webkit-scrollbar-thumb:hover{background-color:hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.5)}::-webkit-scrollbar-thumb:active{background-color:hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.75)}.list-title,.term-title,.list-year,.list-month,.post-title,.post-subtitle,.related-title,.post-nav,thead,dt{font-family:Comfortaa,sans-serif}.post-body h1,.post-body h2,.post-body h3,.post-body h4,.post-body h5,.post-body h6{font-family:Comfortaa,sans-serif}.contents-title{font-family:Comfortaa,sans-serif}code,pre,sup,.post-meta,.updated-badge,.post-gitinfo,.minimal-footer,.minimal-footer-about,.busuanzi-site-uv-and-pv{font-family:"Source Code Pro",monospace}body{font-family:"IBM Plex Serif",serif}[data-indent="true"] .contents-title{text-align:center}[data-indent="true"] .post-body p{text-indent:2em;margin:0}[data-indent="true"] .post-body .caption{text-indent:0;margin:0 0 1em}[data-indent="true"] .post-body blockquote{margin:1em 0;padding:0;border:none}[data-indent="true"] .post-body img,[data-indent="true"] .post-body video{margin:1em auto}[data-indent="true"] .post-body table{margin:1em 0}[data-indent="true"] .post-body pre,[data-indent="true"] .post-body .highlight{margin:var(--font-size) 0}[data-indent="true"] .post-body h1,[data-indent="true"] .post-body h2,[data-indent="true"] .post-body h3,[data-indent="true"] .post-body h4,[data-indent="true"] .post-body h5,[data-indent="true"] .post-body h6{text-align:center}[data-indent="true"] .post-body .anchor-link{position:relative;transform:none;display:block;float:none}[data-indent="true"] .post-body ol,[data-indent="true"] .post-body ul{margin:0;padding-left:4em}[data-indent="true"] .post-body ol p,[data-indent="true"] .post-body ul p{text-indent:0}[data-indent="true"] .post-body li ol,[data-indent="true"] .post-body li ul{padding-left:2em}[data-indent="true"] .post-body dl{text-indent:2em}[data-indent="true"] .post-body dl dd{text-indent:0;margin-left:4em}[data-indent="true"] .post-body dl p{text-indent:0}:root{--color-primary:hsl(220, 90%, 56%);--color-primary-h:220;--color-primary-s:90%;--color-primary-l:56%;--color-bg:hsl(0, 0%, 100%);--color-bg-h:0;--color-bg-s:0%;--color-bg-l:100%;--color-contrast-lower:hsl(0, 0%, 95%);--color-contrast-lower-h:0;--color-contrast-lower-s:0%;--color-contrast-lower-l:95%;--color-contrast-low:hsl(240, 1%, 83%);--color-contrast-low-h:240;--color-contrast-low-s:1%;--color-contrast-low-l:83%;--color-contrast-medium:hsl(240, 1%, 48%);--color-contrast-medium-h:240;--color-contrast-medium-s:1%;--color-contrast-medium-l:48%;--color-contrast-high:hsl(240, 4%, 20%);--color-contrast-high-h:240;--color-contrast-high-s:4%;--color-contrast-high-l:20%;--color-contrast-higher:hsl(240, 8%, 12%);--color-contrast-higher-h:240;--color-contrast-higher-s:8%;--color-contrast-higher-l:12%}[data-theme="dark"]{--color-primary:hsl(201, 65%, 62%);--color-primary-h:201;--color-primary-s:65%;--color-primary-l:62%;--color-bg:hsl(240, 8%, 12%);--color-bg-h:240;--color-bg-s:8%;--color-bg-l:12%;--color-contrast-lower:hsl(240, 6%, 19%);--color-contrast-lower-h:240;--color-contrast-lower-s:6%;--color-contrast-lower-l:19%;--color-contrast-low:hsl(240, 3%, 27%);--color-contrast-low-h:240;--color-contrast-low-s:3%;--color-contrast-low-l:27%;--color-contrast-medium:hsl(240, 1%, 57%);--color-contrast-medium-h:240;--color-contrast-medium-s:1%;--color-contrast-medium-l:57%;--color-contrast-high:hsl(0, 0%, 75%);--color-contrast-high-h:0;--color-contrast-high-s:0%;--color-contrast-high-l:75%;--color-contrast-higher:hsl(0, 0%, 90%);--color-contrast-higher-h:0;--color-contrast-higher-s:0%;--color-contrast-higher-l:90%}#theme-switcher{padding:1em;cursor:pointer;float:right;position:relative;z-index:4}[data-theme="dark"] img{filter:brightness(50%)}.chroma-dark{color:#f8f8f2;background-color:#272822}.chroma-dark .err{color:#960050;background-color:#1e0010}.chroma-dark .lntd{vertical-align:top;padding:0;margin:0;border:0}.chroma-dark .lntable{border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block}.chroma-dark .hl{display:block;width:100%;background-color:#ffffcc}.chroma-dark .lnt{margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f}.chroma-dark .ln{margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f}.chroma-dark .k{color:#66d9ef}.chroma-dark .kc{color:#66d9ef}.chroma-dark .kd{color:#66d9ef}.chroma-dark .kn{color:#f92672}.chroma-dark .kp{color:#66d9ef}.chroma-dark .kr{color:#66d9ef}.chroma-dark .kt{color:#66d9ef}.chroma-dark .na{color:#a6e22e}.chroma-dark .nc{color:#a6e22e}.chroma-dark .no{color:#66d9ef}.chroma-dark .nd{color:#a6e22e}.chroma-dark .ne{color:#a6e22e}.chroma-dark .nf{color:#a6e22e}.chroma-dark .nx{color:#a6e22e}.chroma-dark .nt{color:#f92672}.chroma-dark .l{color:#ae81ff}.chroma-dark .ld{color:#e6db74}.chroma-dark .s{color:#e6db74}.chroma-dark .sa{color:#e6db74}.chroma-dark .sb{color:#e6db74}.chroma-dark .sc{color:#e6db74}.chroma-dark .dl{color:#e6db74}.chroma-dark .sd{color:#e6db74}.chroma-dark .s2{color:#e6db74}.chroma-dark .se{color:#ae81ff}.chroma-dark .sh{color:#e6db74}.chroma-dark .si{color:#e6db74}.chroma-dark .sx{color:#e6db74}.chroma-dark .sr{color:#e6db74}.chroma-dark .s1{color:#e6db74}.chroma-dark .ss{color:#e6db74}.chroma-dark .m{color:#ae81ff}.chroma-dark .mb{color:#ae81ff}.chroma-dark .mf{color:#ae81ff}.chroma-dark .mh{color:#ae81ff}.chroma-dark .mi{color:#ae81ff}.chroma-dark .il{color:#ae81ff}.chroma-dark .mo{color:#ae81ff}.chroma-dark .o{color:#f92672}.chroma-dark .ow{color:#f92672}.chroma-dark .c{color:#75715e}.chroma-dark .ch{color:#75715e}.chroma-dark .cm{color:#75715e}.chroma-dark .c1{color:#75715e}.chroma-dark .cs{color:#75715e}.chroma-dark .cp{color:#75715e}.chroma-dark .cpf{color:#75715e}.chroma-dark .gd{color:#f92672}.chroma-dark .gi{color:#a6e22e}.chroma-dark .gu{color:#75715e}.header{z-index:3;position:relative}.site-brand{text-align:center}.brand{width:250px;height:100px;fill:#fff}.site-brand{background-image:linear-gradient(90deg, #f79533 0, #f37055 15%, #ef4e7b 30%, #a166ab 44%, #5073b8 58%, #1098ad 72%, #07b39b 86%, #6dba82 100%)}.nav{z-index:3;position:relative}.menu{padding:0;margin:0;list-style:none;text-align:center;background:var(--color-contrast-lower);line-height:1.5;font-weight:500}.menu-item{display:inline-block;margin:0 1em}.menu-item a{color:var(--color-contrast-medium)}.menu-item a:hover{color:var(--color-primary)}.active a{color:var(--color-primary)}.menu-item-name{display:flex}.list .main-inner{width:30em}.list-title{text-align:center}.list ul{list-style:none;padding:0}.list-item-title{flex:1}.list-item-time{text-align:right;margin-left:1em}.list-item{line-height:2;position:relative;transition:border .5s;border-bottom:1px dashed var(--color-contrast-low);margin-top:1em;padding-bottom:0.5em;display:flex;align-items:baseline}.list-item:hover{border-bottom-color:var(--color-primary)}.list-item:hover ::before{background:var(--color-primary)}.list-item ::before{content:" ";position:absolute;left:0.618em;top:0.618em;width:calc(var(--font-size) / 3);height:calc(var(--font-size) / 3);background:var(--color-contrast-low);border-radius:50%;border:1px solid var(--color-bg);transition:background .5s;font-size:var(--font-size)}.list-item-title{margin:0 0.618em 0 2em;font-size:1.2em;line-height:1.5}.list-item-time{margin:0 0.618em 0 2em;color:var(--color-contrast-medium);line-height:1.5}.list-year{display:flex;justify-content:space-between;align-items:baseline}.term-count{color:var(--color-contrast-medium);font-size:0.7em}.single .main-inner{width:32em}.post-title{text-align:center}.post-subtitle{font-size:1.8em;text-align:center;font-weight:700;margin-top:-0.618em}.post-description{text-align:center;margin:var(--font-size) 0;font-size:90%}.post-body{margin-top:5em !important}.post-body a{text-decoration:underline;text-decoration-color:var(--color-contrast-low)}.post-body a:hover{text-decoration-color:hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.5)}.post p{margin:0 0 1em;line-height:var(--line-height)}.post img{display:block;margin:2em auto;max-width:100%;border:1px solid var(--color-contrast-lower);clear:both}.post video{display:block;max-width:100%;margin:2em auto;clear:both}.post sup{font-size:70%;vertical-align:super}.post sup a{text-decoration:none}.post ol,.post ul{padding-left:2em;line-height:var(--line-height)}.post hr{border:none;margin:2.427em 0 1.5em;text-align:center}.post hr::after{content:"···";letter-spacing:2em;padding-left:2em}blockquote{margin:2em 0;padding-left:1em;color:var(--color-contrast-medium);border-left:3px solid var(--color-contrast-low)}blockquote a{color:var(--color-contrast-medium)}blockquote a:hover{color:var(--color-primary)}.drop-cap{float:left;font-size:calc(var(--font-size) * 3);margin-right:calc(calc(var(--line-height) * var(--font-size)) - var(--font-size));margin-top:calc(var(--font-size) / var(--line-height));line-height:calc(var(--line-height) * var(--font-size))}.caption{display:block;text-align:center;margin:-1em 0 0;font-size:90%;color:var(--color-contrast-medium)}.contents{margin-top:5em}.contents ol,.contents ul{list-style:none}ol.toc,ul.toc{padding:0;overflow:auto hidden;white-space:nowrap}.footnotes{font-size:90%;margin-top:calc(var(--font-size) * 5)}.footnotes hr{margin:0;height:1px;border:none;background-color:var(--color-contrast-medium)}.footnotes hr::after{content:none}.footnotes ol{margin:calc(var(--font-size) * 1.618) 0 0 !important;padding:0 var(--font-size) 0 calc(var(--font-size) * 2) !important}.footnote-icon{fill:hsla(var(--color-contrast-high-h), var(--color-contrast-high-s), var(--color-contrast-high-l), 0.5);transition:fill .5s;margin-bottom:0.3em}.footnote-icon:hover{fill:var(--color-primary)}.anchor-link{position:absolute;transform:translate(-150%)}.anchor-icon{width:0.75em;height:0.75em;vertical-align:baseline}:root{--anchor-opacity: 0}.anchor-link{opacity:var(--anchor-opacity);transition:all .25s}.post h1:hover,.post h2:hover,.post h3:hover,.post h4:hover,.post h5:hover,.post h6:hover,.post .anchor-link:hover{--anchor-opacity: 1}.table-container{margin:2em 0;overflow-x:auto}table{width:100%;border-collapse:collapse;border-spacing:0;border-color:var(--color-contrast-lower)}th{font-weight:700}th,td{font-size:0.9em;padding:0.4em;border:1px solid var(--color-contrast-lower)}table>tbody>tr:nth-of-type(odd){background-color:hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), 0.5)}table>tbody>tr:hover{background-color:var(--color-contrast-lower)}dt{font-weight:700}dd{margin-left:2em}code{padding:calc(var(--font-size) / 8) calc(var(--font-size) / 4);background-color:var(--color-contrast-lower);font-size:80%}pre{overflow:auto hidden;font-size:calc(var(--font-size) * 0.8);margin:calc(var(--font-size) * 2) 0;padding:1em;line-height:1.618;background-color:hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), 0.75)}pre code{background-color:unset;font-size:inherit;padding:0}.katex-display,mjx-container[jax="CHTML"][display="true"]{overflow:auto hidden;text-indent:0}.footer{position:absolute;bottom:0;width:100%;font-size:90%;color:var(--color-contrast-medium)}.footer a{color:var(--color-contrast-medium)}.footer a:hover{color:var(--color-primary)}.footer-inner{padding:1em;text-align:center}.footer-icon{margin:0 0.25em 0.3em}.footer-icon{fill:#f06292}@keyframes heartbeat{0%,100%{transform:scale(1)}10%,30%{transform:scale(0.9)}20%,40%,50%,60%,70%,80%{transform:scale(1.1)}}.footer-icon{animation:heartbeat 1.33s ease-in-out infinite}.post-meta{color:var(--color-contrast-medium);font-size:80%;text-align:center;margin:var(--font-size) 0}.post-meta a{color:var(--color-contrast-medium)}.post-meta a:hover{color:var(--color-primary)}.home .post-meta{margin:var(--font-size) 0}.post-meta-item{margin:0.5em;display:inline-block}.post-meta-icon{fill:hsla(var(--color-contrast-medium-h), var(--color-contrast-medium-s), var(--color-contrast-medium-l), 0.5);margin-bottom:0.3em}.post-copyright{margin:0;list-style:none;margin-top:5em;padding:0.5em 1em;background-color:hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), 0.5);border-left:3px solid hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.5);line-height:2}.copyright-item{line-height:1.5;margin:0.5em 0}.copyright-item-text{font-weight:500}.updated-badge-container{margin-top:5em;text-align:center}.updated-badge-left{fill:var(--color-contrast-low)}.updated-badge-right{fill:hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.5)}.post-share{margin-top:calc(var(--font-size) * 5);color:hsla(var(--color-contrast-medium-h), var(--color-contrast-medium-s), var(--color-contrast-medium-l), 0.8)}.post-share a{color:hsla(var(--color-contrast-medium-h), var(--color-contrast-medium-s), var(--color-contrast-medium-l), 0.8)}.post-share a:hover{color:inherit}.share-items{text-align:center}.share-item{margin:0 0.5em}.share-item{display:inline-block}.share-item .icon{transition:fill .5s}.twitter-icon:hover{fill:#1DA1F2}.facebook-icon:hover{fill:#1877F2}.linkedin-icon:hover{fill:#0077B5}.telegram-icon:hover{fill:#2CA5E0}.weibo-icon:hover{fill:#E6162D}.douban-icon:hover{fill:#007722}.qq-icon:hover{fill:#12B7F5}.qzone-icon:hover{fill:#FECE00}.qrcode-icon:hover{fill:var(--color-primary)}#qrcode-img{position:absolute;transform:translate(calc(-100% + 1em), calc(-100% - 1em));opacity:0;transition:opacity .5s}#qrcode-img img{display:none}.qrcode-container:hover #qrcode-img{opacity:1}.qrcode-container:hover #qrcode-img img{display:inline-block;border:1px solid var(--color-contrast-lower)}.related-posts{border:1px solid var(--color-contrast-lower);padding:0.6em 1em;line-height:2em;margin-top:5em}.related-title{font-size:1em;margin:0}.related-icon{float:right;margin-top:0.4em}.related-list{margin:0;padding:0;list-style:none}.related-link{line-height:1.5;display:inline-block}.post-tags{margin-top:calc(var(--font-size) * 5);text-align:center;font-size:90%}.post-tags-link{color:hsla(var(--color-contrast-medium-h), var(--color-contrast-medium-s), var(--color-contrast-medium-l), 0.9);margin:0 0.5em;line-height:2;display:inline-block}.tag-icon{margin-right:0.3em;font-size:80%}.post-nav{list-style:none;padding:0;display:flex;justify-content:space-between;border-top:1px solid var(--color-contrast-lower);font-weight:700;margin-top:5em;padding-top:0.618em}.post-nav-prev{margin-right:auto;max-width:42%}.post-nav-next{margin-left:auto;text-align:right;max-width:42%}.back-to-top{position:fixed;right:0;z-index:1}.back-to-top a{display:block;padding:1em;color:var(--color-contrast-medium)}.back-to-top a:hover{color:var(--color-primary)}.back-to-top{bottom:-5em;transition:bottom 0.3s ease-in-out}.back-to-top.show{bottom:0}.chroma{background-color:#ffffff}.chroma .err{color:#ff0000;background-color:#ffaaaa}.chroma .lntd{vertical-align:top;padding:0;margin:0;border:0}.chroma .lntable{border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block}.chroma .hl{display:block;width:100%;background-color:#ffffcc}.chroma .lnt{margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f}.chroma .ln{margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f}.chroma .k{color:#0000aa}.chroma .kc{color:#0000aa}.chroma .kd{color:#0000aa}.chroma .kn{color:#0000aa}.chroma .kp{color:#0000aa}.chroma .kr{color:#0000aa}.chroma .kt{color:#00aaaa}.chroma .na{color:#1e90ff}.chroma .nb{color:#00aaaa}.chroma .nc{color:#00aa00}.chroma .no{color:#aa0000}.chroma .nd{color:#888888}.chroma .ni{color:#880000}.chroma .nf{color:#00aa00}.chroma .nn{color:#00aaaa}.chroma .nt{color:#1e90ff}.chroma .nv{color:#aa0000}.chroma .s{color:#aa5500}.chroma .sa{color:#aa5500}.chroma .sb{color:#aa5500}.chroma .sc{color:#aa5500}.chroma .dl{color:#aa5500}.chroma .sd{color:#aa5500}.chroma .s2{color:#aa5500}.chroma .se{color:#aa5500}.chroma .sh{color:#aa5500}.chroma .si{color:#aa5500}.chroma .sx{color:#aa5500}.chroma .sr{color:#009999}.chroma .s1{color:#aa5500}.chroma .ss{color:#0000aa}.chroma .m{color:#009999}.chroma .mb{color:#009999}.chroma .mf{color:#009999}.chroma .mh{color:#009999}.chroma .mi{color:#009999}.chroma .il{color:#009999}.chroma .mo{color:#009999}.chroma .ow{color:#0000aa}.chroma .c{color:#888888}.chroma .ch{color:#888888}.chroma .cm{color:#888888}.chroma .c1{color:#888888}.chroma .cs{color:#0000aa}.chroma .cp{color:#4c8317}.chroma .cpf{color:#4c8317}.chroma .gd{color:#aa0000}.chroma .gr{color:#aa0000}.chroma .gh{color:#000080}.chroma .gi{color:#00aa00}.chroma .go{color:#666666}.chroma .gp{color:#454545}.chroma .gu{color:#800080}.chroma .gt{color:#aa0000}.chroma .w{color:#999999}.highlight{font-size:0.8em;margin:calc(var(--font-size) * 2) 0}.highlight pre{margin:0 !important;overflow:auto hidden;background-color:unset}.highlight th,.highlight td{font-size:inherit}.highlight table>tbody>tr:nth-of-type(odd){background-color:inherit}.highlight table>tbody>tr:hover{background-color:inherit}span.lnt{user-select:none;display:block;margin-right:-1em !important;padding:0 !important;text-align:right}.chroma,.chroma-dark{color:var(--color-contrast-high);background-color:hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), 0.5)}.summary-title-link{color:var(--color-contrast-higher)}.summary{line-height:var(--line-height);display:block}.read-more-container{text-align:center;margin-top:1.618em}.read-more-link{display:inline-block}.pagination{list-style:none;margin:5em 0 0;padding:0;display:flex;justify-content:space-between}.pagination-prev{margin-right:auto}.pagination-next{margin-left:auto;text-align:right}.tree{margin-left:-2.4em;overflow:auto hidden;white-space:nowrap}.category-item{color:var(--color-primary);font-size:1.2em}.category-item:hover{color:hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.75)}.category-count{color:var(--color-contrast-medium)}.category-post:hover{color:var(--color-contrast-medium)}.tag-cloud{text-align:center}.tag-cloud-item{margin:calc(var(--font-size) * 0.5);display:inline-block}.fof::before{background-image:url();background-repeat:no-repeat;background-size:cover;background-position:50% 50%;content:" ";position:fixed;width:100%;height:100%;top:0;left:0;z-index:1}.fof .main-inner{background:rgba(0,0,0,0.25);min-height:100%;min-width:100%;position:absolute;z-index:3}.fof video{position:fixed;top:50%;left:50%;min-width:100%;min-height:100%;width:auto;height:auto;z-index:2;transform:translateX(-50%) translateY(-50%)}.fof h1{font-size:3rem;text-transform:uppercase;letter-spacing:0.3rem;text-align:center;top:15%;left:5%;right:5%;position:absolute;color:#fff;margin:0.67em 0}.fof .fof-footer{font-size:2rem;position:absolute;bottom:15%;left:10%;right:10%;text-align:center}.fof a{color:#eee}.fof a:hover{color:#fff}@media only screen and (max-device-width: 1024px){.fof #bgvid{display:none}}.medium-zoom-overlay,.medium-zoom-image{z-index:5}@media (max-width: 740px){.main-inner{width:auto !important}.anchor-link{position:relative;transform:none;float:right}.menu{display:flex;justify-content:space-around;word-break:break-all}.menu-item{margin:0}}[data-hide="true"]{display:none}[data-small-caps="true"] .post-body h1,[data-small-caps="true"] .post-body h2,[data-small-caps="true"] .post-body h3,[data-small-caps="true"] .post-body h4,[data-small-caps="true"] .post-body h5,[data-small-caps="true"] .post-body h6{font-variant:small-caps}[data-small-caps="true"] .contents-title{font-variant:small-caps}[data-align="justify"] .post-body p,[data-align="justify"] .post-body li,[data-align="justify"] .post-body dd{text-align:justify;text-justify:distribute}[data-align="center"] .post-body p{text-align:center}[data-type="poetry"] .post-body{display:table;margin:0 auto}[data-toc-num="true"] .contents ol{counter-reset:item}[data-toc-num="true"] .contents ol li::before{counter-increment:item;margin-right:0.5em}[data-toc-num="true"] .contents>ol>li::before{content:counters(item, ".") "."}[data-toc-num="true"] .contents li>ol>li::before{content:counters(item, ".")} +:root{--font-size: 20px;--line-height: 1.618}html,body{margin:0;width:100%;height:100%}body{font-size:var(--font-size);tab-size:4;color:var(--color-contrast-high);background-color:var(--color-bg);overflow-wrap:break-word;word-wrap:break-word;line-height:1.618}.container{min-height:100%;min-width:100%;position:relative}.main{padding:2em 1em 15em;display:block}.main{padding-top:7em}.main-inner{margin:0 auto;display:block}.icon{width:1em;height:1em;fill:currentColor;display:inline-block}svg{vertical-align:middle}h1,h2,h3,h4,h5,h6{margin:1.618em 0 1em;color:var(--color-contrast-higher)}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{text-decoration:none !important;color:var(--color-contrast-higher)}h1{font-size:2em}h2{font-size:1.8em}h3{font-size:1.6em}h4{font-size:1.4em}h5{font-size:1.2em}h6{font-size:1em}a{color:var(--color-contrast-high);text-decoration:none;transition:all .5s}a:hover{color:var(--color-primary)}::selection{background-color:hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.3)}::-webkit-scrollbar{width:calc(var(--font-size) * 0.4);height:calc(var(--font-size) * 0.2)}::-webkit-scrollbar-track{background-color:var(--color-bg)}::-webkit-scrollbar-thumb{background-color:var(--color-contrast-low)}::-webkit-scrollbar-thumb:hover{background-color:hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.5)}::-webkit-scrollbar-thumb:active{background-color:hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.75)}.list-title,.term-title,.list-year,.list-month,.post-title,.post-subtitle,.related-title,.post-nav,thead,dt{font-family:Comfortaa,sans-serif}.post-body h1,.post-body h2,.post-body h3,.post-body h4,.post-body h5,.post-body h6{font-family:Comfortaa,sans-serif}.contents-title{font-family:Comfortaa,sans-serif}code,pre,sup,.post-meta,.updated-badge,.post-gitinfo,.minimal-footer,.minimal-footer-about,.busuanzi-site-uv-and-pv{font-family:"Source Code Pro",monospace}body{font-family:"IBM Plex Serif",serif}[data-indent="true"] .contents-title{text-align:center}[data-indent="true"] .post-body p{text-indent:2em;margin:0}[data-indent="true"] .post-body .caption{text-indent:0;margin:0 0 1em}[data-indent="true"] .post-body blockquote{margin:1em 0;padding:0;border:none}[data-indent="true"] .post-body img,[data-indent="true"] .post-body video{margin:1em auto}[data-indent="true"] .post-body table{margin:1em 0}[data-indent="true"] .post-body pre,[data-indent="true"] .post-body .highlight{margin:var(--font-size) 0}[data-indent="true"] .post-body h1,[data-indent="true"] .post-body h2,[data-indent="true"] .post-body h3,[data-indent="true"] .post-body h4,[data-indent="true"] .post-body h5,[data-indent="true"] .post-body h6{text-align:center}[data-indent="true"] .post-body .anchor-link{position:relative;transform:none;display:block;float:none}[data-indent="true"] .post-body ol,[data-indent="true"] .post-body ul{margin:0;padding-left:4em}[data-indent="true"] .post-body ol p,[data-indent="true"] .post-body ul p{text-indent:0}[data-indent="true"] .post-body li ol,[data-indent="true"] .post-body li ul{padding-left:2em}[data-indent="true"] .post-body dl{text-indent:2em}[data-indent="true"] .post-body dl dd{text-indent:0;margin-left:4em}[data-indent="true"] .post-body dl p{text-indent:0}:root{--color-primary:hsl(220, 90%, 56%);--color-primary-h:220;--color-primary-s:90%;--color-primary-l:56%;--color-bg:hsl(0, 0%, 100%);--color-bg-h:0;--color-bg-s:0%;--color-bg-l:100%;--color-contrast-lower:hsl(0, 0%, 95%);--color-contrast-lower-h:0;--color-contrast-lower-s:0%;--color-contrast-lower-l:95%;--color-contrast-low:hsl(240, 1%, 83%);--color-contrast-low-h:240;--color-contrast-low-s:1%;--color-contrast-low-l:83%;--color-contrast-medium:hsl(240, 1%, 48%);--color-contrast-medium-h:240;--color-contrast-medium-s:1%;--color-contrast-medium-l:48%;--color-contrast-high:hsl(240, 4%, 20%);--color-contrast-high-h:240;--color-contrast-high-s:4%;--color-contrast-high-l:20%;--color-contrast-higher:hsl(240, 8%, 12%);--color-contrast-higher-h:240;--color-contrast-higher-s:8%;--color-contrast-higher-l:12%}[data-theme="dark"]{--color-primary:hsl(201, 65%, 62%);--color-primary-h:201;--color-primary-s:65%;--color-primary-l:62%;--color-bg:hsl(240, 8%, 12%);--color-bg-h:240;--color-bg-s:8%;--color-bg-l:12%;--color-contrast-lower:hsl(240, 6%, 19%);--color-contrast-lower-h:240;--color-contrast-lower-s:6%;--color-contrast-lower-l:19%;--color-contrast-low:hsl(240, 3%, 27%);--color-contrast-low-h:240;--color-contrast-low-s:3%;--color-contrast-low-l:27%;--color-contrast-medium:hsl(240, 1%, 57%);--color-contrast-medium-h:240;--color-contrast-medium-s:1%;--color-contrast-medium-l:57%;--color-contrast-high:hsl(0, 0%, 75%);--color-contrast-high-h:0;--color-contrast-high-s:0%;--color-contrast-high-l:75%;--color-contrast-higher:hsl(0, 0%, 90%);--color-contrast-higher-h:0;--color-contrast-higher-s:0%;--color-contrast-higher-l:90%}#theme-switcher{cursor:pointer;position:relative;z-index:4}[data-theme="dark"] img{filter:brightness(50%)}[data-theme="dark"] #theme-switcher,[data-theme="dark"] #lang-switcher{opacity:0.5}#theme-switcher{padding:0}.chroma-dark{color:#f8f8f2;background-color:#272822}.chroma-dark .err{color:#960050;background-color:#1e0010}.chroma-dark .lntd{vertical-align:top;padding:0;margin:0;border:0}.chroma-dark .lntable{border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block}.chroma-dark .hl{display:block;width:100%;background-color:#ffffcc}.chroma-dark .lnt{margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f}.chroma-dark .ln{margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f}.chroma-dark .k{color:#66d9ef}.chroma-dark .kc{color:#66d9ef}.chroma-dark .kd{color:#66d9ef}.chroma-dark .kn{color:#f92672}.chroma-dark .kp{color:#66d9ef}.chroma-dark .kr{color:#66d9ef}.chroma-dark .kt{color:#66d9ef}.chroma-dark .na{color:#a6e22e}.chroma-dark .nc{color:#a6e22e}.chroma-dark .no{color:#66d9ef}.chroma-dark .nd{color:#a6e22e}.chroma-dark .ne{color:#a6e22e}.chroma-dark .nf{color:#a6e22e}.chroma-dark .nx{color:#a6e22e}.chroma-dark .nt{color:#f92672}.chroma-dark .l{color:#ae81ff}.chroma-dark .ld{color:#e6db74}.chroma-dark .s{color:#e6db74}.chroma-dark .sa{color:#e6db74}.chroma-dark .sb{color:#e6db74}.chroma-dark .sc{color:#e6db74}.chroma-dark .dl{color:#e6db74}.chroma-dark .sd{color:#e6db74}.chroma-dark .s2{color:#e6db74}.chroma-dark .se{color:#ae81ff}.chroma-dark .sh{color:#e6db74}.chroma-dark .si{color:#e6db74}.chroma-dark .sx{color:#e6db74}.chroma-dark .sr{color:#e6db74}.chroma-dark .s1{color:#e6db74}.chroma-dark .ss{color:#e6db74}.chroma-dark .m{color:#ae81ff}.chroma-dark .mb{color:#ae81ff}.chroma-dark .mf{color:#ae81ff}.chroma-dark .mh{color:#ae81ff}.chroma-dark .mi{color:#ae81ff}.chroma-dark .il{color:#ae81ff}.chroma-dark .mo{color:#ae81ff}.chroma-dark .o{color:#f92672}.chroma-dark .ow{color:#f92672}.chroma-dark .c{color:#75715e}.chroma-dark .ch{color:#75715e}.chroma-dark .cm{color:#75715e}.chroma-dark .c1{color:#75715e}.chroma-dark .cs{color:#75715e}.chroma-dark .cp{color:#75715e}.chroma-dark .cpf{color:#75715e}.chroma-dark .gd{color:#f92672}.chroma-dark .gi{color:#a6e22e}.chroma-dark .gu{color:#75715e}.header{z-index:3}.header{position:fixed;width:100%}.header-wrapper{padding:1em 0;backdrop-filter:saturate(180%) blur(1em);background:linear-gradient(90deg, rgba(247,149,51,0.101961) 0, rgba(243,112,85,0.101961) 15%, rgba(239,78,123,0.101961) 30%, rgba(161,102,171,0.101961) 44%, rgba(80,115,184,0.101961) 58%, rgba(16,152,173,0.101961) 72%, rgba(7,179,155,0.101961) 86%, rgba(109,186,130,0.101961) 100%)}.header-inner{display:flex;justify-content:space-between;align-items:baseline;width:var(--main-inner);margin:0 auto}.site-brand{margin-right:1em}.brand{font-size:1em;color:var(--color-contrast-high);text-decoration:none}.brand:hover{color:var(--color-contrast-high)}#nav-toggle{display:none}.nav-toggle{display:none;position:absolute;top:1em;right:1em;margin-right:1em;width:1em;height:1em;cursor:pointer}.nav-toggle-inner{padding:1em;display:inline-block}.nav-toggle span{display:block;position:absolute;height:0.1em;width:1em;background-color:var(--color-contrast-high);transition:all .5s}.nav-toggle span:nth-child(1){top:0.4em}.nav-toggle span:nth-child(2){top:0.7em}.nav-toggle span:nth-child(3){top:1em}.nav-toggle.open span:nth-child(1){top:75%;transform:rotate(225deg)}.nav-toggle.open span:nth-child(2){width:0;opacity:0;transform:rotate(-135deg)}.nav-toggle.open span:nth-child(3){top:75%;transform:rotate(-45deg)}.nav-curtain{height:100vh;width:100vw;backdrop-filter:saturate(180%) blur(1em);background:linear-gradient(90deg, rgba(247,149,51,0.101961) 0, rgba(243,112,85,0.101961) 15%, rgba(239,78,123,0.101961) 30%, rgba(161,102,171,0.101961) 44%, rgba(80,115,184,0.101961) 58%, rgba(16,152,173,0.101961) 72%, rgba(7,179,155,0.101961) 86%, rgba(109,186,130,0.101961) 100%) rgba(0,0,0,0.5)}.nav{z-index:3;position:relative}.menu{padding:0;margin:0;list-style:none;line-height:1.5;font-weight:500}.menu-item{display:inline-block}.menu-item a{color:var(--color-contrast-medium)}.menu-item a:hover{color:var(--color-primary)}.active a{color:var(--color-primary)}.nav{text-align:right;font-size:80%}.menu-item{margin-left:0.5em}.menu-item .icon{margin-bottom:0.2em}.menu-item-name{margin-left:0.3em}.list .main-inner{width:30em}.list-title{text-align:center}.list ul{list-style:none;padding:0}.list-item-title{flex:1}.list-item-time{text-align:right;margin-left:1em}.list-item{line-height:2;position:relative;transition:border .5s;border-bottom:1px dashed var(--color-contrast-low);margin-top:1em;padding-bottom:0.5em;display:flex;align-items:baseline}.list-item:hover{border-bottom-color:var(--color-primary)}.list-item:hover ::before{background:var(--color-primary)}.list-item ::before{content:" ";position:absolute;left:0.618em;top:0.618em;width:calc(var(--font-size) / 3);height:calc(var(--font-size) / 3);background:var(--color-contrast-low);border-radius:50%;border:1px solid var(--color-bg);transition:background .5s;font-size:var(--font-size)}.list-item-title{margin:0 0.618em 0 2em;font-size:1.2em;line-height:1.5}.list-item-time{margin:0 0.618em 0 2em;color:var(--color-contrast-medium);line-height:1.5}.list-year{display:flex;justify-content:space-between;align-items:baseline}.term-count{color:var(--color-contrast-medium);font-size:0.7em}.single .main-inner{width:32em}.post-title{text-align:center}.post-subtitle{font-size:1.8em;text-align:center;font-weight:700;margin-top:-0.618em}.post-description{text-align:center;margin:var(--font-size) 0;font-size:90%}.post-body{margin-top:5em !important}.post-body a{text-decoration:underline;text-decoration-color:var(--color-contrast-low)}.post-body a:hover{text-decoration-color:hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.5)}.post p{margin:0 0 1em;line-height:var(--line-height)}.post img{display:block;margin:2em auto;max-width:100%;border:1px solid var(--color-contrast-lower);clear:both}.post video{display:block;max-width:100%;margin:2em auto;clear:both}.post sup{font-size:70%;vertical-align:super}.post sup a{text-decoration:none}.post ol,.post ul{padding-left:2em;line-height:var(--line-height)}.post hr{border:none;margin:2.427em 0 1.5em;text-align:center}.post hr::after{content:"···";letter-spacing:2em;padding-left:2em}blockquote{margin:2em 0;padding-left:1em;color:var(--color-contrast-medium);border-left:3px solid var(--color-contrast-low)}blockquote a{color:var(--color-contrast-medium)}blockquote a:hover{color:var(--color-primary)}.drop-cap{float:left;font-size:calc(var(--font-size) * 3);margin-right:calc(calc(var(--line-height) * var(--font-size)) - var(--font-size));margin-top:calc(var(--font-size) / var(--line-height));line-height:calc(var(--line-height) * var(--font-size))}.caption{display:block;text-align:center;margin:-1em 0 0;font-size:90%;color:var(--color-contrast-medium)}.contents{margin-top:5em}.contents ol,.contents ul{list-style:none}ol.toc,ul.toc{padding:0;overflow:auto hidden;white-space:nowrap}.footnotes{font-size:90%;margin-top:calc(var(--font-size) * 5)}.footnotes hr{margin:0;height:1px;border:none;background-color:var(--color-contrast-medium)}.footnotes hr::after{content:none}.footnotes ol{margin:calc(var(--font-size) * 1.618) 0 0 !important;padding:0 var(--font-size) 0 calc(var(--font-size) * 2) !important}.footnote-icon{fill:hsla(var(--color-contrast-high-h), var(--color-contrast-high-s), var(--color-contrast-high-l), 0.5);transition:fill .5s;margin-bottom:0.3em}.footnote-icon:hover{fill:var(--color-primary)}.anchor-link{position:absolute;transform:translate(-150%)}.anchor-icon{width:0.75em;height:0.75em;vertical-align:baseline}:root{--anchor-opacity: 0}.anchor-link{opacity:var(--anchor-opacity);transition:all .25s}.post h1:hover,.post h2:hover,.post h3:hover,.post h4:hover,.post h5:hover,.post h6:hover,.post .anchor-link:hover{--anchor-opacity: 1}.table-container{margin:2em 0;overflow-x:auto}table{width:100%;border-collapse:collapse;border-spacing:0;border-color:var(--color-contrast-lower)}th{font-weight:700}th,td{font-size:0.9em;padding:0.4em;border:1px solid var(--color-contrast-lower)}table>tbody>tr:nth-of-type(odd){background-color:hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), 0.5)}table>tbody>tr:hover{background-color:var(--color-contrast-lower)}dt{font-weight:700}dd{margin-left:2em}code{padding:calc(var(--font-size) / 8) calc(var(--font-size) / 4);background-color:var(--color-contrast-lower);font-size:80%}pre{overflow:auto hidden;font-size:calc(var(--font-size) * 0.8);margin:calc(var(--font-size) * 2) 0;padding:1em;line-height:1.618;background-color:hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), 0.75)}pre code{background-color:unset;font-size:inherit;padding:0}.katex-display,mjx-container[jax="CHTML"][display="true"]{overflow:auto hidden;text-indent:0}.footer{position:absolute;bottom:0;width:100%;font-size:90%;color:var(--color-contrast-medium)}.footer a{color:var(--color-contrast-medium)}.footer a:hover{color:var(--color-primary)}.footer-inner{padding:1em;text-align:center}.footer-icon{margin:0 0.25em 0.3em}.footer-icon{fill:#f06292}@keyframes heartbeat{0%,100%{transform:scale(1)}10%,30%{transform:scale(0.9)}20%,40%,50%,60%,70%,80%{transform:scale(1.1)}}.footer-icon{animation:heartbeat 1.33s ease-in-out infinite}.post-meta{color:var(--color-contrast-medium);font-size:80%;text-align:center;margin:var(--font-size) 0}.post-meta a{color:var(--color-contrast-medium)}.post-meta a:hover{color:var(--color-primary)}.home .post-meta{margin:var(--font-size) 0}.post-meta-item{margin:0.5em;display:inline-block}.post-meta-icon{fill:hsla(var(--color-contrast-medium-h), var(--color-contrast-medium-s), var(--color-contrast-medium-l), 0.5);margin-bottom:0.3em}.post-copyright{margin:0;list-style:none;margin-top:5em;padding:0.5em 1em;background-color:hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), 0.5);border-left:3px solid hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.5);line-height:2}.copyright-item{line-height:1.5;margin:0.5em 0}.copyright-item-text{font-weight:500}.updated-badge-container{margin-top:5em;text-align:center}.updated-badge-left{fill:var(--color-contrast-low)}.updated-badge-right{fill:hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.5)}.post-share{margin-top:calc(var(--font-size) * 5);color:hsla(var(--color-contrast-medium-h), var(--color-contrast-medium-s), var(--color-contrast-medium-l), 0.8)}.post-share a{color:hsla(var(--color-contrast-medium-h), var(--color-contrast-medium-s), var(--color-contrast-medium-l), 0.8)}.post-share a:hover{color:inherit}.share-items{text-align:center}.share-item{margin:0 0.5em}.share-item{display:inline-block}.share-item .icon{transition:fill .5s}.twitter-icon:hover{fill:#1DA1F2}.facebook-icon:hover{fill:#1877F2}.linkedin-icon:hover{fill:#0077B5}.telegram-icon:hover{fill:#2CA5E0}.weibo-icon:hover{fill:#E6162D}.douban-icon:hover{fill:#007722}.qq-icon:hover{fill:#12B7F5}.qzone-icon:hover{fill:#FECE00}.qrcode-icon:hover{fill:var(--color-primary)}#qrcode-img{position:absolute;transform:translate(calc(-100% + 1em), calc(-100% - 1em));opacity:0;transition:opacity .5s}#qrcode-img img{display:none}.qrcode-container:hover #qrcode-img{opacity:1}.qrcode-container:hover #qrcode-img img{display:inline-block;border:1px solid var(--color-contrast-lower)}.related-posts{border:1px solid var(--color-contrast-lower);padding:0.6em 1em;line-height:2em;margin-top:5em}.related-title{font-size:1em;margin:0}.related-icon{float:right;margin-top:0.4em}.related-list{margin:0;padding:0;list-style:none}.related-link{line-height:1.5;display:inline-block}.post-tags{margin-top:calc(var(--font-size) * 5);text-align:center;font-size:90%}.post-tags-link{color:hsla(var(--color-contrast-medium-h), var(--color-contrast-medium-s), var(--color-contrast-medium-l), 0.9);margin:0 0.5em;line-height:2;display:inline-block}.tag-icon{margin-right:0.3em;font-size:80%}.post-nav{list-style:none;padding:0;display:flex;justify-content:space-between;border-top:1px solid var(--color-contrast-lower);font-weight:700;margin-top:5em;padding-top:0.618em}.post-nav-prev{margin-right:auto;max-width:42%}.post-nav-next{margin-left:auto;text-align:right;max-width:42%}.back-to-top{position:fixed;right:0;z-index:1}.back-to-top a{display:block;padding:1em;color:var(--color-contrast-medium)}.back-to-top a:hover{color:var(--color-primary)}.back-to-top{bottom:-5em;transition:bottom 0.3s ease-in-out}.back-to-top.show{bottom:0}.chroma{background-color:#ffffff}.chroma .err{color:#ff0000;background-color:#ffaaaa}.chroma .lntd{vertical-align:top;padding:0;margin:0;border:0}.chroma .lntable{border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block}.chroma .hl{display:block;width:100%;background-color:#ffffcc}.chroma .lnt{margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f}.chroma .ln{margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f}.chroma .k{color:#0000aa}.chroma .kc{color:#0000aa}.chroma .kd{color:#0000aa}.chroma .kn{color:#0000aa}.chroma .kp{color:#0000aa}.chroma .kr{color:#0000aa}.chroma .kt{color:#00aaaa}.chroma .na{color:#1e90ff}.chroma .nb{color:#00aaaa}.chroma .nc{color:#00aa00}.chroma .no{color:#aa0000}.chroma .nd{color:#888888}.chroma .ni{color:#880000}.chroma .nf{color:#00aa00}.chroma .nn{color:#00aaaa}.chroma .nt{color:#1e90ff}.chroma .nv{color:#aa0000}.chroma .s{color:#aa5500}.chroma .sa{color:#aa5500}.chroma .sb{color:#aa5500}.chroma .sc{color:#aa5500}.chroma .dl{color:#aa5500}.chroma .sd{color:#aa5500}.chroma .s2{color:#aa5500}.chroma .se{color:#aa5500}.chroma .sh{color:#aa5500}.chroma .si{color:#aa5500}.chroma .sx{color:#aa5500}.chroma .sr{color:#009999}.chroma .s1{color:#aa5500}.chroma .ss{color:#0000aa}.chroma .m{color:#009999}.chroma .mb{color:#009999}.chroma .mf{color:#009999}.chroma .mh{color:#009999}.chroma .mi{color:#009999}.chroma .il{color:#009999}.chroma .mo{color:#009999}.chroma .ow{color:#0000aa}.chroma .c{color:#888888}.chroma .ch{color:#888888}.chroma .cm{color:#888888}.chroma .c1{color:#888888}.chroma .cs{color:#0000aa}.chroma .cp{color:#4c8317}.chroma .cpf{color:#4c8317}.chroma .gd{color:#aa0000}.chroma .gr{color:#aa0000}.chroma .gh{color:#000080}.chroma .gi{color:#00aa00}.chroma .go{color:#666666}.chroma .gp{color:#454545}.chroma .gu{color:#800080}.chroma .gt{color:#aa0000}.chroma .w{color:#999999}.highlight{font-size:0.8em;margin:calc(var(--font-size) * 2) 0}.highlight pre{margin:0 !important;overflow:auto hidden;background-color:unset}.highlight th,.highlight td{font-size:inherit}.highlight table>tbody>tr:nth-of-type(odd){background-color:inherit}.highlight table>tbody>tr:hover{background-color:inherit}span.lnt{user-select:none;display:block;margin-right:-1em !important;padding:0 !important;text-align:right}.chroma,.chroma-dark{color:var(--color-contrast-high);background-color:hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), 0.5)}.summary-title-link{color:var(--color-contrast-higher)}.summary{line-height:var(--line-height);display:block}.read-more-container{text-align:center;margin-top:1.618em}.read-more-link{display:inline-block}.pagination{list-style:none;margin:5em 0 0;padding:0;display:flex;justify-content:space-between}.pagination-prev{margin-right:auto}.pagination-next{margin-left:auto;text-align:right}.tree{margin-left:-2.4em;overflow:auto hidden;white-space:nowrap}.category-item{color:var(--color-primary);font-size:1.2em}.category-item:hover{color:hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.75)}.category-count{color:var(--color-contrast-medium)}.category-post:hover{color:var(--color-contrast-medium)}.tag-cloud{text-align:center}.tag-cloud-item{margin:calc(var(--font-size) * 0.5);display:inline-block}.fof::before{background-image:url();background-repeat:no-repeat;background-size:cover;background-position:50% 50%;content:" ";position:fixed;width:100%;height:100%;top:0;left:0;z-index:1}.fof .main-inner{background:rgba(0,0,0,0.25);min-height:100%;min-width:100%;position:absolute;z-index:3}.fof video{position:fixed;top:50%;left:50%;min-width:100%;min-height:100%;width:auto;height:auto;z-index:2;transform:translateX(-50%) translateY(-50%)}.fof h1{font-size:3rem;text-transform:uppercase;letter-spacing:0.3rem;text-align:center;top:15%;left:5%;right:5%;position:absolute;color:#fff;margin:0.67em 0}.fof .fof-footer{font-size:2rem;position:absolute;bottom:15%;left:10%;right:10%;text-align:center}.fof a{color:#eee}.fof a:hover{color:#fff}@media only screen and (max-device-width: 1024px){.fof #bgvid{display:none}}.medium-zoom-overlay,.medium-zoom-image{z-index:5}@media (max-width: 740px){.main-inner{width:auto !important}.anchor-link{position:relative;transform:none;float:right}.header-inner{display:block;margin:0}.header-inner{width:100%}.site-brand{margin-left:1em}.nav-toggle{display:block}.nav{display:none;text-align:center;margin:2em 0}.menu{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center}.menu-item{margin:0;padding:1em}.menu-item .icon{margin:0}.menu-item-name{display:block;margin:0}.header.open .nav{display:block;animation:appear .5s;animation-iteration-count:1;animation-fill-mode:forwards}@keyframes appear{0%{opacity:0;height:0;margin:0;transform:scaleY(0);transform-origin:top}100%{opacity:1;height:10em;margin:2em 0;transform:scaleY(1);transform-origin:top}}.header.open .nav-curtain{animation:appearCurtain .5s;animation-iteration-count:1;animation-fill-mode:forwards}@keyframes appearCurtain{0%{visibility:hidden;opacity:0}100%{visibility:visible;opacity:1}}.header.fade .nav{display:block;animation:fade .5s;animation-iteration-count:1;animation-fill-mode:forwards}@keyframes fade{0%{opacity:1;height:10em;margin:2em 0;transform:scaleY(1);transform-origin:top}100%{opacity:0;height:0;margin:0;transform:scaleY(0);transform-origin:top}}.header.fade .nav-curtain{animation:fadeCurtain .5s;animation-iteration-count:1;animation-fill-mode:forwards}@keyframes fadeCurtain{0%{visibility:visible;opacity:1}100%{visibility:hidden;opacity:0}}}[data-hide="true"]{display:none}[data-small-caps="true"] .post-body h1,[data-small-caps="true"] .post-body h2,[data-small-caps="true"] .post-body h3,[data-small-caps="true"] .post-body h4,[data-small-caps="true"] .post-body h5,[data-small-caps="true"] .post-body h6{font-variant:small-caps}[data-small-caps="true"] .contents-title{font-variant:small-caps}[data-align="justify"] .post-body p,[data-align="justify"] .post-body li,[data-align="justify"] .post-body dd{text-align:justify;text-justify:distribute}[data-align="center"] .post-body p{text-align:center}[data-type="poetry"] .post-body{display:table;margin:0 auto}[data-toc-num="true"] .contents ol{counter-reset:item}[data-toc-num="true"] .contents ol li::before{counter-increment:item;margin-right:0.5em}[data-toc-num="true"] .contents>ol>li::before{content:counters(item, ".") "."}[data-toc-num="true"] .contents li>ol>li::before{content:counters(item, ".")} diff --git a/exampleSite/resources/_gen/assets/scss/scss/main.scss_b04c21e44835e7dcdc8cb03d103b5ef1.json b/exampleSite/resources/_gen/assets/scss/scss/main.scss_b04c21e44835e7dcdc8cb03d103b5ef1.json index 000d182..d5ad330 100644 --- a/exampleSite/resources/_gen/assets/scss/scss/main.scss_b04c21e44835e7dcdc8cb03d103b5ef1.json +++ b/exampleSite/resources/_gen/assets/scss/scss/main.scss_b04c21e44835e7dcdc8cb03d103b5ef1.json @@ -1 +1 @@ -{"Target":"css/meme.min.bbe70d6a7552c004d6fe9546e355a438568560ef9cd6cd7d194776c23c939e98.css","MediaType":"text/css","Data":{"Integrity":"sha256-u+cNanVSwATW/pVG41WkOFaFYO+c1s19GUd2wjyTnpg="}}
\ No newline at end of file +{"Target":"css/meme.min.8dfce8cbf679fce397ddb20669be273d4e52799a2d1618c2130ffee21a34269f.css","MediaType":"text/css","Data":{"Integrity":"sha256-jfzoy/Z5/OOX3bIGab4nPU5SeZotFhjCEw/+4ho0Jp8="}}
\ No newline at end of file diff --git a/images/screenshot.png b/images/screenshot.png Binary files differindex e2b1907..0e0fc19 100644 --- a/images/screenshot.png +++ b/images/screenshot.png diff --git a/images/tn.png b/images/tn.png Binary files differindex fcaec12..d85ecce 100644 --- a/images/tn.png +++ b/images/tn.png diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index c117bc0..e89f9c9 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -4,9 +4,13 @@ <body> <div class="container"> {{ partial "header.html" . }} - {{ partial "menu.html" . }} - {{ partial "components/multilingual.html" . }} - {{ partial "components/dark-mode.html" . }} + {{ if ne .Site.Params.headerLayout "flex" }} + {{ if or (and .IsHome .Site.Params.displayMenuInHome) (and (not .IsHome) .Site.Params.enableMenu) }} + {{ partial "menu.html" . }} + {{ end }} + {{ partial "components/multilingual.html" . }} + {{ partial "components/dark-mode.html" . }} + {{ end }} {{ block "main" . }}{{ end }} {{ partial "components/back-to-top.html" . }} {{ partial "footer.html" . }} diff --git a/layouts/partials/components/nav-toggle.html b/layouts/partials/components/nav-toggle.html new file mode 100644 index 0000000..2a59809 --- /dev/null +++ b/layouts/partials/components/nav-toggle.html @@ -0,0 +1,5 @@ +{{ if .Site.Params.enableNavToggle }} + <input type="checkbox" id="nav-toggle" aria-hidden="true" /> + <label for="nav-toggle" class="nav-toggle"></label> + <label for="nav-toggle" class="nav-curtain"></label> +{{ end }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index d7bd580..a2360c9 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,11 +1,25 @@ -{{ if or (and .IsHome .Site.Params.displayHeaderInHome) (and (not .IsHome) .Site.Params.enableHeader) }} - <header class="header"> - <div class="site-brand"> - {{ if .Site.Params.siteBrandSVG }} +{{ if or (or (and .IsHome .Site.Params.displayHeaderInHome) (eq .Site.Params.headerLayout "flex")) (and (not .IsHome) .Site.Params.enableHeader) }} + <header class="header"{{ if and (eq .Site.Params.headerLayout "flex") .Site.Params.enableSmoothScroll }} data-scroll-header{{ end }}> + {{ if eq .Site.Params.headerLayout "flex" }} + <div class="header-wrapper"> + <div class="header-inner"> + {{ template "site-brand" . }} + {{ partial "menu.html" . }} + </div> + </div> + {{ partial "components/nav-toggle.html" . }} + {{ else }} + {{ template "site-brand" . }} + {{ end }} + </header> +{{ end }} + +{{ define "site-brand" }} + <div class="site-brand"> + {{ if .Site.Params.siteBrandSVG }} <a href="{{ print `/` | relLangURL }}">{{ .Site.Data.SVG.brand | safeHTML }}</a> - {{ else }} + {{ else }} <a href="{{ print `/` | relLangURL }}" class="brand">{{ .Site.Title }}</a> - {{ end }} - </div> - </header> -{{ end }}
\ No newline at end of file + {{ end }} + </div> +{{ end }} diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html index e233001..521cd94 100644 --- a/layouts/partials/menu.html +++ b/layouts/partials/menu.html @@ -1,25 +1,40 @@ -{{ if or (and .IsHome .Site.Params.displayMenuInHome) (and (not .IsHome) .Site.Params.enableMenu) }} - <nav class="nav"> - <ul class="menu" id="menu"> - {{ if .Site.Params.activeInSection }} - {{ .Scratch.Set "currentPage" (.Site.GetPage (printf `/%s` .Section)) }} +<nav class="nav"> + <ul class="menu" id="menu"> + {{ if .Site.Params.activeInSection }} + {{ .Scratch.Set "currentPage" (.Site.GetPage (printf `/%s` .Section)) }} + {{ else }} + {{ .Scratch.Set "currentPage" . }} + {{ end }} + {{ $currentPage := .Scratch.Get "currentPage" }} + {{ $ctx := . }} + {{ range .Site.Menus.main }} + {{ if and (eq .Identifier "theme-switcher") $.Site.Params.enableDarkMode }} + {{ if eq $.Site.Params.headerLayout "flex" }} + <li class="menu-item"> + {{ partial "components/dark-mode.html" $ctx }} + </li> + {{ end }} + {{ else if eq .Identifier "lang-switcher" }} + {{ if and $.Site.IsMultiLingual $.Site.Params.enableLangToggle }} + {{ if eq $.Site.Params.headerLayout "flex" }} + <li class="menu-item"> + {{ partial "components/multilingual.html" $ctx }} + </li> + {{ end }} + {{ end }} {{ else }} - {{ .Scratch.Set "currentPage" . }} - {{ end }} - {{ $currentPage := .Scratch.Get "currentPage" }} - {{ range .Site.Menus.main }} <li class="menu-item{{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} active{{ end }}"> {{- $linkType := (string .Pre) -}} <a href="{{ .URL }}"{{ if eq $linkType "external" }} target="_blank" rel="external noopener"{{ end }}> {{- $iconName := (string .Post) -}} {{- $icon := (index $.Site.Data.SVG $iconName) -}} - {{- printf `%s` (replace $icon "icon" "icon menu-item-icon") | safeHTML -}} + {{- printf `%s` (replace $icon "icon" (printf `icon %s` .Identifier)) | safeHTML -}} {{- with .Name -}} {{- printf `<span class="menu-item-name">%s</span>` . | safeHTML -}} {{- end -}} </a> </li> {{ end }} - </ul> - </nav> -{{ end }}
\ No newline at end of file + {{ end }} + </ul> +</nav> diff --git a/layouts/partials/script.html b/layouts/partials/script.html index 6d50b60..5e103b0 100644 --- a/layouts/partials/script.html +++ b/layouts/partials/script.html @@ -1,4 +1,6 @@ {{- $main := resources.Get "js/main.js" | resources.ExecuteAsTemplate "js/main-rendered.js" . -}} +{{- $header := resources.Get "js/header.js" | resources.ExecuteAsTemplate "js/header-rendered.js" . -}} +{{- $navToggle := resources.Get "js/nav-toggle.js" | resources.ExecuteAsTemplate "js/nav-toggle-rendered.js" . -}} {{- $backToTop := resources.Get "js/back-to-top.js" | resources.ExecuteAsTemplate "js/back-to-top-rendered.js" . -}} {{- $darkMode := resources.Get "js/dark-mode.js" | resources.ExecuteAsTemplate "js/dark-mode-rendered.js" . -}} {{- $lang := resources.Get "js/multilingual.js" | resources.ExecuteAsTemplate "js/multilingual-rendered.js" . -}} @@ -7,6 +9,14 @@ {{- .Scratch.Set "script" (slice $main) -}} +{{- if and .Site.Params.enableHeader (eq .Site.Params.headerLayout "flex") -}} + {{- .Scratch.Add "script" (slice $header) -}} + + {{- if .Site.Params.enableNavToggle -}} + {{- .Scratch.Add "script" (slice $navToggle) -}} + {{- end -}} +{{- end -}} + {{- if .Site.Params.enableBackToTopAutoHide -}} {{- .Scratch.Add "script" (slice $backToTop) -}} {{- end -}} diff --git a/layouts/partials/third-party/smooth-scroll.html b/layouts/partials/third-party/smooth-scroll.html index 6a8726b..f071679 100644 --- a/layouts/partials/third-party/smooth-scroll.html +++ b/layouts/partials/third-party/smooth-scroll.html @@ -2,6 +2,7 @@ <script> var scroll = new SmoothScroll('a[href*="#"]', { - speedAsDuration: true + speedAsDuration: true, + header: '[data-scroll-header]' }); -</script>
\ No newline at end of file +</script> |
