From 0e2ead9c9032cd695b6eb75eba314ba365550dea Mon Sep 17 00:00:00 2001 From: XPoet Date: Thu, 29 Sep 2022 21:02:22 +0800 Subject: [PATCH 01/10] perf(script): enhance fault tolerance for js import --- layout/_partial/scripts.ejs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs index c07da5e..b59824a 100644 --- a/layout/_partial/scripts.ejs +++ b/layout/_partial/scripts.ejs @@ -21,7 +21,7 @@ const { <%- __js('js/local-search.js') %> <% } %> -<% if (t_code_block_tools.enable === true || t_code_copy.enable === true) { %> +<% if (t_code_block_tools?.enable === true || t_code_copy?.enable === true) { %> <%- __js('js/code-block-tools.js') %> <% } %> From cd18d9e6c59f319b5e2a1aed474e5b912397a3a2 Mon Sep 17 00:00:00 2001 From: XPoet Date: Thu, 29 Sep 2022 21:59:40 +0800 Subject: [PATCH 02/10] perf(version): optimize version setting in the theme --- _config.yml | 12 ++++++------ layout/_partial/footer.ejs | 2 +- scripts/helpers/export-config.js | 7 ++++--- scripts/helpers/helper.js | 6 +++--- source/js/main.js | 14 +++++++------- 5 files changed, 21 insertions(+), 20 deletions(-) diff --git a/_config.yml b/_config.yml index 03824a5..ccb4162 100644 --- a/_config.yml +++ b/_config.yml @@ -1,3 +1,9 @@ +## ====================================================================================== +## Keep v3.4.7 +## Repository: https://github.com/XPoet/hexo-theme-keep +## Document: https://keep-docs.xpoet.cn +## ====================================================================================== + # --------------------------------------------------------------------------------------- # Your basic info # --------------------------------------------------------------------------------------- @@ -254,9 +260,3 @@ footer: since: 2020 # the starting year of your website. Can be null icp: # ICP record number of your website. Can be null upyun: # If your site is deployed on upyun, your can fill the upyun url. Can be null - -# --------------------------------------------------------------------------------------- -# Keep version -# Please don't modify -# --------------------------------------------------------------------------------------- -version: 3.4.7 diff --git a/layout/_partial/footer.ejs b/layout/_partial/footer.ejs index 5fe912a..49ee7f9 100644 --- a/layout/_partial/footer.ejs +++ b/layout/_partial/footer.ejs @@ -36,7 +36,7 @@ const { site_uv: bsz_site_uv, site_pv: bsz_site_pv, enable: bsz_enable } = theme
<%- __('powered_by', 'Hexo') %> | <%- __('theme') %>   - Keep v3.4.7 + Keep
<% if (f_icp) { %>
diff --git a/scripts/helpers/export-config.js b/scripts/helpers/export-config.js index c911a43..7ad4aad 100644 --- a/scripts/helpers/export-config.js +++ b/scripts/helpers/export-config.js @@ -1,4 +1,5 @@ /* global hexo */ + 'use strict'; const url = require('url'); @@ -20,8 +21,8 @@ hexo.extend.helper.register('export_config', function () { let languageContent = fs.readFileSync(file, 'utf8'); try { languageContent = yaml.load(languageContent); - } catch (e) { - console.log(e); + } catch (err) { + console.log(err); } // ----------------------------------------------------------------------- @@ -45,7 +46,7 @@ hexo.extend.helper.register('export_config', function () { side_tools: theme.side_tools || {}, pjax: theme.pjax || {}, lazyload: theme.lazyload || {}, - version: theme.version + version: require('../../package.json').version } return `
<% if (bsz_site_uv) { %> - - <%- __('site_uv') %>   - + <%- __('site_uv') %>   <% } %> <% if (bsz_site_pv) { %> - - <%- __('site_pv') %>  - + <%- __('site_pv') %>  <% } %>
<% } %> diff --git a/layout/_partial/progress-bar.ejs b/layout/_partial/progress-bar.ejs index cf191f9..7e09698 100644 --- a/layout/_partial/progress-bar.ejs +++ b/layout/_partial/progress-bar.ejs @@ -5,9 +5,7 @@ <% if (theme.pjax.enable === true) { %> - - - + <% } %>
diff --git a/package.json b/package.json index 93868e9..a16d060 100644 --- a/package.json +++ b/package.json @@ -4,8 +4,10 @@ "private": false, "description": "A simple and elegant theme for Hexo.", "scripts": { - "release": "git push --tag && git push -u origin dev", - "publish": "npm publish" + "npm:publish": "npm publish", + "lint:style": "stylelint --fix source/css/**/**/**/*.styl", + "git:push": "git push --tag && git push -u origin dev", + "git:add": "npm run lint:style && git add ." }, "repository": { "type": "git", @@ -25,5 +27,10 @@ "bugs": { "url": "https://github.com/XPoet/hexo-theme-keep/issues" }, - "homepage": "https://github.com/XPoet/hexo-theme-keep#readme" + "homepage": "https://github.com/XPoet/hexo-theme-keep#readme", + "devDependencies": { + "stylelint": "^14.13.0", + "stylelint-config-rational-order": "^0.1.2", + "stylelint-stylus": "^0.17.0" + } } diff --git a/source/css/common/animated.styl b/source/css/common/animated.styl index 1c8b318..12ab458 100644 --- a/source/css/common/animated.styl +++ b/source/css/common/animated.styl @@ -1,102 +1,107 @@ transition-g() { - transition-property: color, background, box-shadow, border-color; - transition-delay: 0s, 0s, 0s, 0s; - transition-duration: 0.2s, 0.2s, 0.2s, 0.2s; - transition-timing-function: ease, ease, ease, ease; + transition-delay 0s, 0s, 0s, 0s + transition-timing-function ease, ease, ease, ease + transition-duration 0.2s, 0.2s, 0.2s, 0.2s + transition-property color, background, box-shadow, border-color } transition-t(property, delay, duration, function) { - $temp-property = "color, background, box-shadow, border-color"; - $temp-delay = "0s, 0s, 0s, 0s"; - $temp-duration = "0.2s, 0.2s, 0.2s, 0.2s"; - $temp-function = "ease, ease, ease, ease"; + $temp-property = "color, background, box-shadow, border-color" + $temp-delay = "0s, 0s, 0s, 0s" + $temp-duration = "0.2s, 0.2s, 0.2s, 0.2s" + $temp-function = "ease, ease, ease, ease" for p in convert(property) { - $temp-property += ("," + p); + $temp-property += ("," + p) } for d in convert(delay) { - $temp-delay += ("," + d + "s"); + $temp-delay += ("," + d + "s") } for d in convert(duration) { - $temp-duration += ("," + d + "s"); + $temp-duration += ("," + d + "s") } for f in convert(function) { - $temp-function += ("," + f); + $temp-function += ("," + f) } + transition-delay convert($temp-delay) + transition-timing-function convert($temp-function) + transition-duration convert($temp-duration) - transition-property: convert($temp-property); - transition-delay: convert($temp-delay); - transition-duration: convert($temp-duration); - transition-timing-function: convert($temp-function); + transition-property convert($temp-property) } .fade-in-down-animation { - animation-fill-mode: both; - animation-duration: 1s; - animation-name: fade-in-down; + animation-name fade-in-down + animation-duration 1s + animation-fill-mode both } @keyframes fade-in-down { 0% { - opacity: 0; - transform: translateY(-50px); + transform translateY(-50px) + opacity 0 } 100% { - opacity: 1; - transform: translateY(0); + transform translateY(0) + opacity 1 } } @keyframes icon-animate { - 0%, 100% { - transform: scale(1); + 0% + 100% { + transform scale(1) } - 10%, 30% { - transform: scale(.88); + 10% + 30% { + transform scale(0.88) } - 20%, 40%, 60%, 80% { - transform: scale(1.08); + 20% + 40% + 60% + 80% { + transform scale(1.08) } - 50%, 70% { - transform: scale(1.08); + 50% + 70% { + transform scale(1.08) } } .title-hover-animation { - display: inline-block; - position: relative; - border-bottom: none; - line-height: 1.3; - vertical-align: top; - color: var(--second-text-color); + position relative + display inline-block + color var(--second-text-color) + line-height 1.3 + vertical-align top + border-bottom none &::before { - content: ""; - position: absolute; - width: 100%; - height: 2px; - bottom: -4px; - left: 0; - background-color: var(--second-text-color); - visibility: hidden; - transform: scaleX(0); - transition-t("visibility transform", "0, 0", "0.2, 0.2", "ease-in-out, ease-in-out"); + position absolute + bottom -4px + left 0 + width 100% + height 2px + background-color var(--second-text-color) + transform scaleX(0) + visibility hidden + content "" + transition-t("visibility transform", "0, 0", "0.2, 0.2", "ease-in-out, ease-in-out") } &:hover::before { - visibility: visible; - transform: scaleX(1); + transform scaleX(1) + visibility visible } - } diff --git a/source/css/common/basic.styl b/source/css/common/basic.styl index 53f3103..2003bd8 100644 --- a/source/css/common/basic.styl +++ b/source/css/common/basic.styl @@ -1,6 +1,6 @@ -@require 'variables.styl' -@require 'animated.styl' -@require 'keep-theme.styl' +@import 'variables.styl' +@import 'animated.styl' +@import 'keep-theme.styl' // ====================================================================== // all @@ -17,14 +17,14 @@ // ==================================== &::-webkit-scrollbar { - width 6px - height 6px + width 0.4rem + height 0.4rem transition all 0.2s ease } &::-webkit-scrollbar-thumb { background var(--scrollbar-color) - border-radius 1px + border-radius 0.1rem } &::-webkit-scrollbar-track { @@ -36,22 +36,23 @@ // ====================================================================== // html, body // ====================================================================== -html, body { +html +body { position relative width 100% height 100% margin 0 padding 0 color var(--default-text-color) - background var(--background-color) - font-family $default-font-family font-weight $default-font-weight font-size $default-font-size + font-family $default-font-family line-height $default-font-line-height + background var(--background-color) &::-webkit-scrollbar { - width 8px - height 8px + width 0.4rem + height 0.4rem } +keep-tablet() { @@ -64,7 +65,6 @@ html, body { font-size $default-font-size * 0.9 line-height $default-font-line-height * 0.9 } - } @@ -72,17 +72,19 @@ html, body { // selection // ====================================================================== ::selection { - background var(--selection-color) color #fff + background var(--selection-color) } // ====================================================================== // ul, ol, li // ====================================================================== -ul, ol, li { - padding 0 +ul +ol +li { margin 0 + padding 0 list-style none } @@ -91,22 +93,24 @@ ul, ol, li { // a // ====================================================================== a { - text-decoration none color var(--default-text-color) + text-decoration none - i, span { + i + span { color var(--default-text-color) } - &:hover, &:active { - text-decoration none !important + &:hover + &:active { color var(--primary-color) + text-decoration none !important - i, span { + i + span { color var(--primary-color) } } - } @@ -115,8 +119,8 @@ a { // ====================================================================== img { &[lazyload] { - padding 10px - margin 20px auto !important + margin 1.4rem auto !important + padding 0.8rem cursor not-allowed pointer-events none } @@ -127,23 +131,23 @@ img { // button // ====================================================================== button { - padding 0 margin 0 + padding 0 + background transparent border 0 outline none cursor pointer - background transparent } .btn { - display inline-block position relative - text-align center - cursor pointer + display inline-block + padding 0.4rem 1rem white-space nowrap - border-radius 5px - padding 8px 16px + text-align center background var(--background-color) + border-radius 5px + cursor pointer hover-style(true, 1.06, 1.06) @@ -159,8 +163,8 @@ button { // ====================================================================== .flex-center { display flex - justify-content center align-items center + justify-content center } @@ -169,12 +173,12 @@ button { // ====================================================================== .clear { &::after { - content '' display block clear both - visibility hidden - overflow hidden height 0 + overflow hidden + visibility hidden + content '' } } @@ -196,15 +200,15 @@ button { position absolute top 0 left 50% - transform translateX(-50%) translateY(-108%) - font-size 0.8rem - padding 0.2rem 0.6rem - background var(--first-text-color) - color var(--fourth-text-color) - border-radius 0.3rem - display none z-index $z-index-9 + display none + padding 0.2rem 0.6rem + color var(--fourth-text-color) + font-size 0.8rem white-space nowrap + background var(--first-text-color) + border-radius 0.3rem + transform translateX(-50%) translateY(-108%) transition-t("display", "0", "0.2", "ease") } } diff --git a/source/css/common/code-block/code-block-tools.styl b/source/css/common/code-block/code-block-tools.styl index 196c708..4285369 100644 --- a/source/css/common/code-block/code-block-tools.styl +++ b/source/css/common/code-block/code-block-tools.styl @@ -11,28 +11,28 @@ disable-user-select() { margin 1.4rem 0 .code-tools-box { + display flex + align-items center + justify-content space-between box-sizing border-box width 100% + padding 0.3rem 0.4rem background var(--fourth-text-color) border-top-left-radius 0.3rem border-top-right-radius 0.3rem - display flex - justify-content space-between - align-items center - padding 0.3rem 0.4rem &.folded { - border-bottom-left-radius 0.3rem border-bottom-right-radius 0.3rem + border-bottom-left-radius 0.3rem } .code-lang { - margin-left 0.2rem - font-size 0.9rem - font-weight 600 - font-family "Source Code Pro", consolas, Menlo - color var(--default-text-color) justify-content flex-start + margin-left 0.2rem + color var(--default-text-color) + font-weight 600 + font-size 0.9rem + font-family "Source Code Pro", consolas, Menlo } .tool { @@ -49,7 +49,6 @@ disable-user-select() { .fold { padding 0 0.4rem 0 0.2rem } - } @@ -64,7 +63,7 @@ disable-user-select() { if (hexo-config('code_block_tools.style') == 'mac' || hexo-config('code_copy.style') == 'mac') { margin 1.4rem 0 1.8rem 0 - box-shadow 0 0.8rem 2rem 0 rgba(0, 0, 0, .4) + box-shadow 0 0.8rem 2rem 0 rgba(0, 0, 0, 0.4) &:hover { .code-tools-box .copy { @@ -74,23 +73,23 @@ disable-user-select() { .code-tools-box { justify-content flex-end - background #21252b padding 0.4rem 0.6rem 0.7rem 0.4rem + background #21252b &::before { position absolute - content '' - width 0.8rem - height 0.8rem left 0.8rem + width 0.76rem + height 0.76rem background #fc625d border-radius 50% - box-shadow 1.4rem 0 #fdbc40, 2.8rem 0 #35cd4b + box-shadow 1.3rem 0 #fdbc40, 2.6rem 0 #35cd4b + content '' } &.folded { - border-bottom-left-radius 0 border-bottom-right-radius 0 + border-bottom-left-radius 0 .copy { display none @@ -113,8 +112,8 @@ disable-user-select() { .copy { position absolute - bottom 0.3rem right 0.5rem + bottom 0.3rem padding 0 0.1rem font-weight bold opacity 0 @@ -123,11 +122,7 @@ disable-user-select() { i { font-size 1rem } - } - } - } - } diff --git a/source/css/common/code-block/code-theme.styl b/source/css/common/code-block/code-theme.styl index 20c3715..5e47540 100644 --- a/source/css/common/code-block/code-theme.styl +++ b/source/css/common/code-block/code-theme.styl @@ -35,20 +35,20 @@ $night-highlight-deletion = #008000 $night-highlight-addition = #800000 code-theme(mode) { - --code-foreground: mode == 'light' ? $code-foreground : $night-code-foreground - --code-background: mode == 'light' ? $code-background : $night-code-background - --highlight-background: mode == 'light' ? $highlight-background : $night-highlight-background - --highlight-foreground: mode == 'light' ? $highlight-foreground : $night-highlight-foreground - --highlight-comment: mode == 'light' ? $highlight-comment : $night-highlight-comment - --highlight-red: mode == 'light' ? $highlight-red : $night-highlight-red - --highlight-orange: mode == 'light' ? $highlight-orange : $night-highlight-orange - --highlight-yellow: mode == 'light' ? $highlight-yellow : $night-highlight-yellow - --highlight-green: mode == 'light' ? $highlight-green : $night-highlight-green - --highlight-aqua: mode == 'light' ? $highlight-aqua : $night-highlight-aqua - --highlight-blue: mode == 'light' ? $highlight-blue : $night-highlight-blue - --highlight-purple: mode == 'light' ? $highlight-purple : $night-highlight-purple - --highlight-gutter-color: mode == 'light' ? $highlight-gutter-color : $night-highlight-gutter-color - --highlight-gutter-bg-color: mode == 'light' ? $highlight-gutter-bg-color : $night-highlight-gutter-bg-color + --code-foreground mode == 'light' ? $code-foreground : $night-code-foreground + --code-background mode == 'light' ? $code-background : $night-code-background + --highlight-background mode == 'light' ? $highlight-background : $night-highlight-background + --highlight-foreground mode == 'light' ? $highlight-foreground : $night-highlight-foreground + --highlight-comment mode == 'light' ? $highlight-comment : $night-highlight-comment + --highlight-red mode == 'light' ? $highlight-red : $night-highlight-red + --highlight-orange mode == 'light' ? $highlight-orange : $night-highlight-orange + --highlight-yellow mode == 'light' ? $highlight-yellow : $night-highlight-yellow + --highlight-green mode == 'light' ? $highlight-green : $night-highlight-green + --highlight-aqua mode == 'light' ? $highlight-aqua : $night-highlight-aqua + --highlight-blue mode == 'light' ? $highlight-blue : $night-highlight-blue + --highlight-purple mode == 'light' ? $highlight-purple : $night-highlight-purple + --highlight-gutter-color mode == 'light' ? $highlight-gutter-color : $night-highlight-gutter-color + --highlight-gutter-bg-color mode == 'light' ? $highlight-gutter-bg-color : $night-highlight-gutter-bg-color } @@ -56,13 +56,13 @@ code-theme(mode) { code-theme('light') } -@media (prefers-color-scheme: light) { +@media (prefers-color-scheme light) { :root { code-theme('light') } } -@media (prefers-color-scheme: dark) { +@media (prefers-color-scheme dark) { :root { code-theme('dark') } diff --git a/source/css/common/code-block/highlight.styl b/source/css/common/code-block/highlight.styl index 19c09e3..17f4fbe 100644 --- a/source/css/common/code-block/highlight.styl +++ b/source/css/common/code-block/highlight.styl @@ -1,27 +1,28 @@ -@require "code-theme.styl" +@import "code-theme.styl" $code-block { - overflow auto margin 20px 0 padding 0 + overflow auto + color var(--highlight-foreground) font-size 0.96rem line-height 1.5rem - color var(--highlight-foreground) background var(--highlight-background) } -pre, code { +pre +code { font-family "Source Code Pro", consolas, Menlo } code { padding 5px - word-wrap break-word - border-radius 2px - font-size 0.96rem color var(--code-foreground) + font-size 0.96rem + word-wrap break-word background var(--code-background) + border-radius 2px } pre { @@ -31,8 +32,8 @@ pre { code { padding 0 color var(--highlight-foreground) - background none text-shadow none + background none } } @@ -41,30 +42,30 @@ pre { border-radius 1px pre { - border none margin 0 padding 10px 0 + border none } table { - margin 0 width auto + margin 0 border none border-spacing unset } td { - border none padding 0 + border none } figcaption { - font-size 1rem - color var(--highlight-foreground) - line-height 1rem margin-bottom 1rem + color var(--highlight-foreground) + font-size 1rem + line-height 1rem a { float right @@ -77,8 +78,8 @@ pre { } .gutter pre { - padding-left 10px padding-right 10px + padding-left 10px color var(--highlight-gutter-color) text-align center background-color var(--highlight-gutter-bg-color) @@ -86,8 +87,8 @@ pre { .code pre { width 100% - padding-left 10px padding-right 10px + padding-left 10px background-color var(--highlight-background) } @@ -102,7 +103,6 @@ pre { .string { color var(--default-text-color) } - } } @@ -200,5 +200,4 @@ pre { .javascript .function { color var(--highlight-purple) } - } diff --git a/source/css/common/keep-theme.styl b/source/css/common/keep-theme.styl index f99a546..f2ade80 100644 --- a/source/css/common/keep-theme.styl +++ b/source/css/common/keep-theme.styl @@ -1,53 +1,53 @@ -$keep-container-border-radius = 5px; +$keep-container-border-radius = 5px hover-style(isTransform, scaleX, scaleY) { - box-shadow: 2px 2px 5px var(--shadow-color); + box-shadow 2px 2px 5px var(--shadow-color) if (isTransform) { - transition-t("transform", "0", "0.2", "linear"); + transition-t("transform", "0", "0.2", "linear") } &:hover { if (hexo-config('style.hover.scale') && isTransform) { - transform: scaleX(scaleX) scaleY(scaleX); + transform scaleX(scaleX) scaleY(scaleX) } if (hexo-config('style.hover.shadow')) { - box-shadow: 2px 2px 8px var(--shadow-hover-color); + box-shadow 2px 2px 8px var(--shadow-hover-color) } } } keep-container(isTransform, scaleX, scaleY, padding, marginBottomValue) { - padding: padding; - border-radius: $keep-container-border-radius; - box-sizing: border-box; - background: var(--background-color); + box-sizing border-box + padding padding + background var(--background-color) + border-radius $keep-container-border-radius if (marginBottomValue != 0) { - margin-bottom: marginBottomValue; + margin-bottom marginBottomValue +keep-tablet() { - margin-bottom: marginBottomValue * 0.8; + margin-bottom marginBottomValue * 0.8 } +keep-mobile() { - margin-bottom: marginBottomValue * 0.6; + margin-bottom marginBottomValue * 0.6 } } - hover-style(isTransform, scaleX, scaleY); + hover-style(isTransform, scaleX, scaleY) +keep-tablet() { - padding: padding * 0.8; - border-radius: $keep-container-border-radius * 0.8; + padding padding * 0.8 + border-radius $keep-container-border-radius * 0.8 } +keep-mobile() { - padding: padding * 0.6; - border-radius: $keep-container-border-radius * 0.6; + padding padding * 0.6 + border-radius $keep-container-border-radius * 0.6 } } diff --git a/source/css/common/markdown.styl b/source/css/common/markdown.styl index 7290e22..6ffa6bf 100644 --- a/source/css/common/markdown.styl +++ b/source/css/common/markdown.styl @@ -1,86 +1,90 @@ .markdown-body { - font-size: 1rem; + font-size 1rem blockquote { - p, - ul, + p + ul ol { - padding: 5px 5px 5px 10px; + padding 0.4rem 0.4rem 0.4rem 0.8rem } - box-sizing: border-box; - border-left: 5px solid var(--default-text-color); - margin: 20px 0; - color: var(--default-text-color); - background: var(--second-background-color); + box-sizing border-box + margin 1.4rem 0 + color var(--default-text-color) + background var(--second-background-color) + border-left 0.4rem solid var(--default-text-color) } p { - line-height: 2; - color: var(--default-text-color); + color var(--default-text-color) + line-height 2 } a { - position: relative; - outline: 0; - text-decoration: none; - overflow-wrap: break-word; - cursor: pointer; - border-bottom: 1px solid var(--third-text-color); - box-sizing: border-box; - padding-bottom: 2px; + position relative + box-sizing border-box + padding-bottom 0.2rem + text-decoration none + overflow-wrap break-word + border-bottom 0.1rem solid var(--third-text-color) + outline 0 + cursor pointer - .fas, .far, fab { - margin: 0 2px 0 6px; - position: relative; - color: var(--third-text-color); - font-size: 0.88rem; + .fas + .far + .fab { + position relative + margin 0 0.2rem 0 0.4rem + color var(--third-text-color) + font-size 0.88rem } &:hover { - text-decoration: underline; + text-decoration underline &::after { - background: var(--primary-color); + background var(--primary-color) } } } strong { - color: var(--default-text-color); + color var(--default-text-color) } em { - color: var(--default-text-color); + color var(--default-text-color) } - ul > li, - ol > li { - margin-left: 16px; - line-height: 2rem; + ul + ol { + li { + margin-left 1rem + line-height 2rem + } } ul { li { - list-style: disc; + list-style disc ul { li { - list-style: circle; + list-style circle ul { li { - list-style: square; + list-style square } } } @@ -92,16 +96,16 @@ ol { li { - list-style: decimal; + list-style decimal ol { li { - list-style: upper-alpha; + list-style upper-alpha ol { li { - list-style: upper-roman; + list-style upper-roman } } } @@ -111,133 +115,138 @@ li { - color: var(--default-text-color); + color var(--default-text-color) } - h1, h2, h3, h4, h5, h6 { - color: var(--second-text-color); - line-height: 1.5; + h1 + h2 + h3 + h4 + h5 + h6 { + color var(--second-text-color) + line-height 1.5 +keep-tablet() { - line-height: 1.25; + line-height 1.25 } } h1 { - font-size: 1.8rem; - font-weight: 600; + font-weight 600 + font-size 1.8rem +keep-tablet() { - font-size: 1.7rem; + font-size 1.7rem } } h2 { - font-size: 1.7rem; - font-weight: 600; + font-weight 600 + font-size 1.7rem +keep-tablet() { - font-size: 1.6rem; + font-size 1.6rem } } h3 { - font-size: 1.6rem; - font-weight: 550; + font-weight 550 + font-size 1.6rem +keep-tablet() { - font-size: 1.5rem; + font-size 1.5rem } } h4 { - font-size: 1.5rem; - font-weight: 550; + font-weight 550 + font-size 1.5rem +keep-tablet() { - font-size: 1.4rem; + font-size 1.4rem } } h5 { - font-size: 1.28rem; - font-weight: 500; + font-weight 500 + font-size 1.28rem +keep-tablet() { - font-size: 1.18rem; + font-size 1.18rem } } h6 { - font-size: 1.2rem; - font-weight: 500; - line-height: 1.2; + font-weight 500 + font-size 1.2rem + line-height 1.2 +keep-tablet() { - font-size: 1.1rem; - line-height: 1.1; + font-size 1.1rem + line-height 1.1 } } img { - box-sizing: border-box; - max-width: 100%; - cursor: zoom-in; - display: block; - box-shadow: 0 0 2px var(--shadow-color); - transition-t("padding, margin", "0, 0", "0.2, 0.2", "linear, linear"); + display block + box-sizing border-box + max-width 100% + box-shadow 0 0 0.2rem var(--shadow-color) + cursor zoom-in + transition-t("padding, margin", "0, 0", "0.2, 0.2", "linear, linear") if (hexo-config('post.img_align') == 'center' || hexo-config('style.article_img_align') == 'center') { - margin: 10px auto 2px; - } else { - margin: 10px 0 2px; + margin 0.8rem auto 0.2rem + } + else { + margin 0.8rem 0 0.2rem } - } & > table { - border-spacing: 0; - border-collapse: collapse; - width: 100%; - overflow: auto; + width 100% + overflow auto + border-collapse collapse + border-spacing 0 +keep-mobile() { & { - table-layout: fixed; + table-layout fixed } } - td, + td th { - padding: 0; + padding 0 } th { - font-weight: 600; + font-weight 600 } - td, + td th { - padding: 6px 13px; - border: 1px solid var(--border-color); + padding 0.4rem 1rem + border 0.1rem solid var(--border-color) } tr { - background-color: var(--background-color); - border: 1px solid var(--fourth-text-color); + background-color var(--background-color) + border 0.1rem solid var(--fourth-text-color) } tr:nth-child(2n) { - background-color: var(--second-background-color); + background-color var(--second-background-color) } } } diff --git a/source/css/common/variables.styl b/source/css/common/variables.styl index d78dee1..191c230 100644 --- a/source/css/common/variables.styl +++ b/source/css/common/variables.styl @@ -6,163 +6,167 @@ // ============================================================================================== // layout // ============================================================================================== -$header-height = 70px; // header height -$header-shrink-height = $header-height * 0.72; // header shrink height -$scroll-progress-bar-height = 2px; // scroll progress bar height -$main-content-width = 80%; // main content width (PC) -$main-content-width-tablet = 86%; // main content width (tablet) -$main-content-width-mobile = 90%; // main content width (mobile) -$post-tool-button-width = 38px; // post tool button width -$component-spacing-value = 38px; // component-spacing-value (PC) +$header-height = 70px // header height +$header-shrink-height = $header-height * 0.72 // header shrink height +$scroll-progress-bar-height = 2px // scroll progress bar height +$main-content-width = 80% // main content width (PC) +$main-content-width-tablet = 86% // main content width (tablet) +$main-content-width-mobile = 90% // main content width (mobile) +$post-tool-button-width = 38px // post tool button width +$component-spacing-value = 38px // component-spacing-value (PC) // main content max width -$temp-content-max-width = hexo-config('style.content_max_width'); -$content-max-width = $temp-content-max-width ? convert($temp-content-max-width) : 1000px; +$temp-content-max-width = hexo-config('style.content_max_width') +$content-max-width = $temp-content-max-width ? convert($temp-content-max-width) : 1000px // ============================================================================================== // media query // ============================================================================================== -$media-max-width = 780px; // media query max width (tablet) -$media-max-width-mobile = 500px; // media query max width (mobile) +$media-max-width = 780px // media query max width (tablet) +$media-max-width-mobile = 500px // media query max width (mobile) -keep-tablet() - @media (max-width: $media-max-width) +keep-tablet() { + @media (max-width $media-max-width) { { block } + } +} -keep-mobile() - @media (max-width: $media-max-width-mobile) +keep-mobile() { + @media (max-width $media-max-width-mobile) { { block } + } +} // ============================================================================================== // z-index // ============================================================================================== -$z-index-1 = 1001; -$z-index-2 = 1002; -$z-index-3 = 1003; -$z-index-4 = 1004; -$z-index-5 = 1005; -$z-index-6 = 1006; -$z-index-7 = 1007; -$z-index-8 = 1008; -$z-index-9 = 1009; +$z-index-1 = 1001 +$z-index-2 = 1002 +$z-index-3 = 1003 +$z-index-4 = 1004 +$z-index-5 = 1005 +$z-index-6 = 1006 +$z-index-7 = 1007 +$z-index-8 = 1008 +$z-index-9 = 1009 // ============================================================================================== // theme primary color // ============================================================================================== -$temp-color = hexo-config('style.primary_color'); -$primary-color = $temp-color ? convert($temp-color) : #0066CC; +$temp-color = hexo-config('style.primary_color') +$primary-color = $temp-color ? convert($temp-color) : #0066cc // ============================================================================================== // theme light mode color set // ============================================================================================== -$background-color = #fff; -$second-background-color = darken($background-color, 3%); -$default-text-color = #50505c; -$first-text-color = darken($default-text-color, 10%); -$second-text-color = darken($default-text-color, 5%); -$third-text-color = lighten($default-text-color, 30%); -$fourth-text-color = lighten($default-text-color, 90%); -$border-color = darken($background-color, 30%); -$selection-color = lighten($primary-color, 10%); -$shadow-color = rgba(0, 0, 0, 0.2); -$shadow-hover-color = rgba(0, 0, 0, 0.28); -$scrollbar-color = lighten($default-text-color, 6%); -$scroll-bar-bg-color = darken($background-color, 10%); -$link-color = darken($default-text-color, 10%); -$copyright-info-color = #CC0033; -$avatar-background-color = #0066CC; -$header-transparent-background-1 = alpha($background-color, 0.28); -$header-transparent-background-2 = alpha($background-color, 0.58); -$pjax-progress-bar-color = linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3); +$background-color = #fff +$second-background-color = darken($background-color, 3%) +$default-text-color = #50505c +$first-text-color = darken($default-text-color, 10%) +$second-text-color = darken($default-text-color, 5%) +$third-text-color = lighten($default-text-color, 30%) +$fourth-text-color = lighten($default-text-color, 90%) +$border-color = darken($background-color, 30%) +$selection-color = lighten($primary-color, 10%) +$shadow-color = rgba(0, 0, 0, 0.2) +$shadow-hover-color = rgba(0, 0, 0, 0.28) +$scrollbar-color = lighten($default-text-color, 6%) +$scroll-bar-bg-color = darken($background-color, 10%) +$link-color = darken($default-text-color, 10%) +$copyright-info-color = #cc0033 +$avatar-background-color = #0066cc +$header-transparent-background-1 = alpha($background-color, 0.28) +$header-transparent-background-2 = alpha($background-color, 0.58) +$pjax-progress-bar-color = linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3) // ============================================================================================== // theme dark mode color set // ============================================================================================== -$dark-primary-color = $primary-color; -$dark-background-color = #383940; -$dark-second-background-color = darken($dark-background-color, 10%); -$dark-default-text-color = #bebec6; -$dark-first-text-color = lighten($dark-default-text-color, 30%); -$dark-second-text-color = lighten($dark-default-text-color, 20%); -$dark-third-text-color = darken($dark-default-text-color, 20%); -$dark-fourth-text-color = darken($dark-default-text-color, 75%); -$dark-border-color = lighten($dark-background-color, 20%); -$dark-selection-color = $selection-color; -$dark-shadow-color = rgba(128, 128, 128, 0.2); -$dark-shadow-hover-color = rgba(128, 128, 128, 0.28); -$dark-scrollbar-color = darken($dark-background-color, 10%); -$dark-scroll-bar-bg-color = lighten($dark-background-color, 20%); -$dark-link-color = lighten($dark-default-text-color, 10%); -$dark-copyright-info-color = darken($copyright-info-color, 20%); -$dark-avatar-background-color = darken($avatar-background-color, 10%); -$dark-header-transparent-background-1 = alpha($dark-background-color, 0.28); -$dark-header-transparent-background-2 = alpha($dark-background-color, 0.58); -$dark-pjax-progress-bar-color = linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee); +$dark-primary-color = $primary-color +$dark-background-color = #383940 +$dark-second-background-color = darken($dark-background-color, 10%) +$dark-default-text-color = #bebec6 +$dark-first-text-color = lighten($dark-default-text-color, 30%) +$dark-second-text-color = lighten($dark-default-text-color, 20%) +$dark-third-text-color = darken($dark-default-text-color, 20%) +$dark-fourth-text-color = darken($dark-default-text-color, 75%) +$dark-border-color = lighten($dark-background-color, 20%) +$dark-selection-color = $selection-color +$dark-shadow-color = rgba(128, 128, 128, 0.2) +$dark-shadow-hover-color = rgba(128, 128, 128, 0.28) +$dark-scrollbar-color = darken($dark-background-color, 10%) +$dark-scroll-bar-bg-color = lighten($dark-background-color, 20%) +$dark-link-color = lighten($dark-default-text-color, 10%) +$dark-copyright-info-color = darken($copyright-info-color, 20%) +$dark-avatar-background-color = darken($avatar-background-color, 10%) +$dark-header-transparent-background-1 = alpha($dark-background-color, 0.28) +$dark-header-transparent-background-2 = alpha($dark-background-color, 0.58) +$dark-pjax-progress-bar-color = linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee) // ============================================================================================== // font // ============================================================================================== -$default-font-family = Optima-Regular, Optima, -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial; -$default-font-size = 15.2px; -$default-font-line-height = 22px; -$default-font-weight = 400; +$default-font-family = Optima-Regular, Optima, -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial +$default-font-size = 15.2px +$default-font-line-height = 22px +$default-font-weight = 400 // ============================================================================================== // light/dark mode color // ============================================================================================== root-color(mode) { - --background-color: mode == 'light' ? $background-color : $dark-background-color; - --second-background-color: mode == 'light' ? $second-background-color : $dark-second-background-color; - --primary-color: mode == 'light' ? $primary-color : $dark-primary-color; - --first-text-color: mode == 'light' ? $first-text-color : $dark-first-text-color; - --second-text-color: mode == 'light' ? $second-text-color : $dark-second-text-color; - --third-text-color: mode == 'light' ? $third-text-color : $dark-third-text-color; - --fourth-text-color: mode == 'light' ? $fourth-text-color : $dark-fourth-text-color; - --default-text-color: mode == 'light' ? $default-text-color : $dark-default-text-color; - --border-color: mode == 'light' ? $border-color : $dark-border-color; - --selection-color: mode == 'light' ? $selection-color : $dark-selection-color; - --shadow-color: mode == 'light' ? $shadow-color : $dark-shadow-color; - --shadow-hover-color: mode == 'light' ? $shadow-hover-color : $dark-shadow-hover-color; - --scrollbar-color: mode == 'light' ? $scrollbar-color : $dark-scrollbar-color; - --scroll-bar-bg-color: mode == 'light' ? $scroll-bar-bg-color : $dark-scroll-bar-bg-color; - --link-color: mode == 'light' ? $link-color : $dark-link-color; - --copyright-info-color: mode == 'light' ? $copyright-info-color : $dark-copyright-info-color; - --avatar-background-color: mode == 'light' ? $avatar-background-color : $dark-avatar-background-color; - --header-transparent-background-1: mode == 'light' ? $header-transparent-background-1 : $dark-header-transparent-background-1; - --header-transparent-background-2: mode == 'light' ? $header-transparent-background-2 : $dark-header-transparent-background-2; - --pjax-progress-bar-color : mode == 'light' ? $pjax-progress-bar-color : $dark-pjax-progress-bar-color; + --background-color mode == 'light' ? $background-color : $dark-background-color + --second-background-color mode == 'light' ? $second-background-color : $dark-second-background-color + --primary-color mode == 'light' ? $primary-color : $dark-primary-color + --first-text-color mode == 'light' ? $first-text-color : $dark-first-text-color + --second-text-color mode == 'light' ? $second-text-color : $dark-second-text-color + --third-text-color mode == 'light' ? $third-text-color : $dark-third-text-color + --fourth-text-color mode == 'light' ? $fourth-text-color : $dark-fourth-text-color + --default-text-color mode == 'light' ? $default-text-color : $dark-default-text-color + --border-color mode == 'light' ? $border-color : $dark-border-color + --selection-color mode == 'light' ? $selection-color : $dark-selection-color + --shadow-color mode == 'light' ? $shadow-color : $dark-shadow-color + --shadow-hover-color mode == 'light' ? $shadow-hover-color : $dark-shadow-hover-color + --scrollbar-color mode == 'light' ? $scrollbar-color : $dark-scrollbar-color + --scroll-bar-bg-color mode == 'light' ? $scroll-bar-bg-color : $dark-scroll-bar-bg-color + --link-color mode == 'light' ? $link-color : $dark-link-color + --copyright-info-color mode == 'light' ? $copyright-info-color : $dark-copyright-info-color + --avatar-background-color mode == 'light' ? $avatar-background-color : $dark-avatar-background-color + --header-transparent-background-1 mode == 'light' ? $header-transparent-background-1 : $dark-header-transparent-background-1 + --header-transparent-background-2 mode == 'light' ? $header-transparent-background-2 : $dark-header-transparent-background-2 + --pjax-progress-bar-color mode == 'light' ? $pjax-progress-bar-color : $dark-pjax-progress-bar-color } :root { - root-color('light'); + root-color('light') } -@media (prefers-color-scheme: light) { +@media (prefers-color-scheme light) { :root { - root-color('light'); + root-color('light') } } -@media (prefers-color-scheme: dark) { +@media (prefers-color-scheme dark) { :root { - root-color('dark'); + root-color('dark') } } .light-mode { - root-color('light'); + root-color('light') } .dark-mode { - root-color('dark'); + root-color('dark') } diff --git a/source/css/layout/_partial/archive-list.styl b/source/css/layout/_partial/archive-list.styl index 1afe04e..15e7b1b 100644 --- a/source/css/layout/_partial/archive-list.styl +++ b/source/css/layout/_partial/archive-list.styl @@ -1,80 +1,80 @@ -$archive-year-font-size = 1.8rem; -$archive-year-count-font-size = 1.2rem; -$article-title-font-size = 1.2rem; -$article-date-font-size = 1rem; +$archive-year-font-size = 1.8rem +$archive-year-count-font-size = 1.2rem +$article-title-font-size = 1.2rem +$article-date-font-size = 1rem .archive-list-container { .archive-item { - margin-bottom: $component-spacing-value; + margin-bottom $component-spacing-value &:last-child { - margin-bottom: 0; + margin-bottom 0 } .archive-item-header { - margin-bottom: 10px; + margin-bottom 0.8rem .archive-year { - font-size: $archive-year-font-size; + margin-right 6px + color var(--second-text-color) + font-weight 600 + font-size $archive-year-font-size +keep-tablet() { - font-size: $archive-year-font-size - 0.2rem; + font-size $archive-year-font-size - 0.2rem } - - color: var(--second-text-color); - font-weight: 600; - margin-right: 6px; } .archive-year-post-count { - font-size: $archive-year-count-font-size; - font-weight: 500; - color: var(--second-text-color); + color var(--second-text-color) + font-weight 500 + font-size $archive-year-count-font-size +keep-tablet() { - font-size: $archive-year-count-font-size * 0.9; + font-size $archive-year-count-font-size * 0.9 } } - } .article-list { - padding-left: 10px; + padding-left 0.8rem +keep-tablet() { - padding-left: 0; + padding-left 0 } .article-item { - font-size: 1rem; - margin-top: 18px; + margin-top 1.2rem + font-size 1rem +keep-tablet() { - margin-top: 16px; + margin-top 1.1rem } +keep-mobile() { - margin-top: 14px; + margin-top 1rem } &:hover { - a.article-title, .article-date { - color: var(--primary-color); + a.article-title + .article-date { + color var(--primary-color) } } a.article-title { - color: var(--default-text-color); + color var(--default-text-color) } .article-date { - font-size: $article-date-font-size; - float: right; + float right + font-size $article-date-font-size + color var(--default-text-color) } } } diff --git a/source/css/layout/_partial/article-copyright-info.styl b/source/css/layout/_partial/article-copyright-info.styl index 5fc6e99..e8aeca3 100644 --- a/source/css/layout/_partial/article-copyright-info.styl +++ b/source/css/layout/_partial/article-copyright-info.styl @@ -1,39 +1,53 @@ .article-copyright-info-container { - position: relative; - width: 100%; - box-sizing: border-box; - padding: 10px 6px; - font-size: 1rem; - background: var(--second-background-color); + position relative + box-sizing border-box + width 100% + font-size 1rem + background var(--second-background-color) + overflow hidden &::after { - position: absolute; - top: 0; - left: 0; - content: ''; - width: 6px; - height: 100%; - background: var(--copyright-info-color); + position absolute + top 0 + left 0 + width 0.5rem + height 100% + background var(--copyright-info-color) + content '' } - ul { + .copyright-info-content { + position relative + box-sizing border-box + padding 0.8rem 0.8rem 0.8rem 1.3rem + overflow-x auto - margin-left: 10px; + &::-webkit-scrollbar { + width 0.4rem + height 0.4rem + transition all 0.2s ease + } + + &::-webkit-scrollbar-thumb { + background var(--third-text-color) + } + + &::-webkit-scrollbar-track { + background transparent + } li { - margin-bottom: 5px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - color: var(--default-text-color); + margin-bottom 0.4rem + color var(--default-text-color) + white-space nowrap .license { - font-weight: bold; + font-weight bold } &:last-child { - margin-bottom: 0; + margin-bottom 0 } } } diff --git a/source/css/layout/_partial/article-meta-info.styl b/source/css/layout/_partial/article-meta-info.styl index dabd49d..e3f37c5 100644 --- a/source/css/layout/_partial/article-meta-info.styl +++ b/source/css/layout/_partial/article-meta-info.styl @@ -1,59 +1,61 @@ .article-meta-info { - font-size: 0.8rem; + font-size 0.8rem .article-meta-item { - margin-right: 10px; - color: var(--third-text-color); + margin-right 10px + color var(--third-text-color) &:last-child { - margin-right: 0; + margin-right 0 } } .article-date { .mobile { - display: none; + display none } +keep-tablet() { .pc { - display: none; + display none } .mobile { - display: inline; + display inline } } - } - .article-tags, .article-categories { - display: inline; + .article-tags + .article-categories { + display inline - ul, li { - display: inline; + ul + li { + display inline } a { - color: var(--third-text-color); + color var(--third-text-color) &:hover { - color: var(--primary-color); + color var(--primary-color) } } } .article-tags { +keep-tablet() { - display: none; + display none } } - .article-min2read, .article-wordcount { + .article-min2read + .article-wordcount { +keep-mobile() { - display: none; + display none } } } diff --git a/source/css/layout/_partial/comment/comment.styl b/source/css/layout/_partial/comment/comment.styl index 982fb73..1aabcdc 100644 --- a/source/css/layout/_partial/comment/comment.styl +++ b/source/css/layout/_partial/comment/comment.styl @@ -1,39 +1,38 @@ if (hexo-config('comment.enable') == true && hexo-config('comment.use') != "") { if (hexo-config('comment.use') == "valine") { - @require "./valine.styl"; - - } else if (hexo-config('comment.use') == "gitalk") { - @require "./gitalk.styl"; - - } else if (hexo-config('comment.use') == "twikoo") { - @require "./twikoo.styl"; + @import "./valine.styl" + } + else if (hexo-config('comment.use') == "gitalk") { + @import "./gitalk.styl" + } + else if (hexo-config('comment.use') == "twikoo") { + @import "./twikoo.styl" } } .comments-container { - display: inline-block; - margin-top: $component-spacing-value; - width: 100%; + display inline-block + width 100% + margin-top $component-spacing-value #comment-anchor { - width: 100%; - height: 10px; + width 100% + height 0.8rem } .comment-area-title { - width: 100%; - margin: 10px 0; - font-size: 1.38rem; - color: var(--default-text-color); + width 100% + margin 0.8rem 0 + color var(--default-text-color) + font-size 1.38rem i { - color: var(--default-text-color); + color var(--default-text-color) } +keep-tablet() { - margin: 5px 0; - font-size: 1.2rem; + margin 0.4rem 0 + font-size 1.2rem } } - } diff --git a/source/css/layout/_partial/comment/gitalk.styl b/source/css/layout/_partial/comment/gitalk.styl index 48f0a12..63b91da 100644 --- a/source/css/layout/_partial/comment/gitalk.styl +++ b/source/css/layout/_partial/comment/gitalk.styl @@ -1,9 +1,9 @@ -/* variables */ +// variables $gt-color-main := #6190e8 $gt-color-sub := #a1a1a1 $gt-color-loader := #999999 $gt-color-error := #ff3860 -$gt-color-hr := #E9E9E9 +$gt-color-hr := #e9e9e9 $gt-color-comment-txt := #333333 $gt-color-link-active := #333333 $gt-color-btn := #ffffff @@ -12,442 +12,551 @@ $gt-size-border-radius := 5px $gt-breakpoint-mobile := 479px $gt-mask-z-index := 9999 -/* functions & mixins */ +// functions & mixins clearfix() { - &:before, + &:before &:after { - content: " "; - display: table; + display table + clear both + content "" } - &:after { clear: both; } } -em($px, $base-size = $gt-size-base) +em($px, $base-size = $gt-size-base) { u = unit($px) - if (u is 'px') + if (u is 'px') { unit($px / $base-size, 'em') - else + } + else { unit($px, u) + } +} -mobile() - @media (max-width: $gt-breakpoint-mobile) +mobile() { + @media (max-width $gt-breakpoint-mobile) { {block} + } +} -/* variables - calculated */ +// variables - calculated $gt-size-loader-dot := em(6px) $gt-size-loader := em(28px) $gt-size-avatar := em(50px) $gt-size-avatar-mobi := em(32px) -/* styles */ +// styles // Put everything under container to avoid style conflicts -.comments-container - .gt-container - box-sizing: border-box - * - box-sizing: border-box - font-size: $gt-size-base +.comments-container { + .gt-container { + box-sizing border-box + * { + box-sizing border-box + } + font-size $gt-size-base // common - a - color: $gt-color-main - &:hover - color: lighten($gt-color-main, 20%) - border-color: lighten($gt-color-main, 20%) - &.is--active - color: $gt-color-link-active - cursor: default !important - &:hover - color: $gt-color-link-active - .hide - display: none !important + a { + color $gt-color-main + &:hover { + color lighten($gt-color-main, 20%) + border-color lighten($gt-color-main, 20%) + } + &.is--active { + color $gt-color-link-active + cursor default !important + &:hover { + color $gt-color-link-active + } + } + } + .hide { + display none !important + } // icons - .gt-svg - display: inline-block - width: em(16px) - height: em(16px) - vertical-align: sub - svg - width: 100% - height: 100% - fill: $gt-color-main - .gt-ico - display: inline-block - &-text - margin-left: em(5px) - &-github - width: 100% - height: 100% - .gt-svg - width: 100% - height: 100% - svg - fill: inherit - /* loader */ - .gt-spinner - position: relative - &::before - content: '' - box-sizing: border-box - position: absolute - top: 3px - width: em(12px) - height: em(12px) - margin-top: em(-3px) - margin-left: em(-6px) - border-radius: 50% - border: 1px solid $gt-color-btn - border-top-color: $gt-color-main - animation: gt-kf-rotate .6s linear infinite + .gt-svg { + display inline-block + width em(16px) + height em(16px) + vertical-align sub + svg { + width 100% + height 100% + fill $gt-color-main + } + } + .gt-ico { + display inline-block + &-text { + margin-left em(5px) + } + &-github { + width 100% + height 100% + .gt-svg { + width 100% + height 100% + } + svg { + fill inherit + } + } + } + // loader + .gt-spinner { + position relative + &::before { + position absolute + top 3px + box-sizing border-box + width em(12px) + height em(12px) + margin-top em(-3px) + margin-left em(-6px) + border 1px solid $gt-color-btn + border-top-color $gt-color-main + border-radius 50% + animation gt-kf-rotate 0.6s linear infinite + content '' + } + } - .gt-loader - position: relative - border: 1px solid $gt-color-loader - animation: ease gt-kf-rotate 1.5s infinite - display: inline-block - font-style: normal - width: $gt-size-loader - height: $gt-size-loader - //font-size: $gt-size-loader - line-height: $gt-size-loader - border-radius: 50% - &:before - content: '' - position: absolute - display: block - top: 0 - left: 50% - margin-top: -($gt-size-loader-dot / 2) - margin-left: -($gt-size-loader-dot / 2) - width: $gt-size-loader-dot - height: $gt-size-loader-dot - background-color: $gt-color-loader - border-radius: 50% + .gt-loader { + position relative + display inline-block + width $gt-size-loader + height $gt-size-loader + font-style normal + // font-size: $gt-size-loader + line-height $gt-size-loader + border 1px solid $gt-color-loader + border-radius 50% + animation ease gt-kf-rotate 1.5s infinite + &:before { + position absolute + top 0 + left 50% + display block + width $gt-size-loader-dot + height $gt-size-loader-dot + margin-top -($gt-size-loader-dot / 2) + margin-left -($gt-size-loader-dot / 2) + background-color $gt-color-loader + border-radius 50% + content '' + } + } // avatar - .gt-avatar - display: inline-block - width: $gt-size-avatar - height: $gt-size-avatar - +mobile() - width: $gt-size-avatar-mobi - height: $gt-size-avatar-mobi - img - width: 100% - height: auto - border-radius: 3px - &-github - width: $gt-size-avatar - em(2px) - height: $gt-size-avatar - em(2px) - cursor: pointer - +mobile() - width: $gt-size-avatar-mobi - em(2px) - height: $gt-size-avatar-mobi - em(2px) + .gt-avatar { + display inline-block + width $gt-size-avatar + height $gt-size-avatar + +mobile() { + width $gt-size-avatar-mobi + height $gt-size-avatar-mobi + } + img { + width 100% + height auto + border-radius 3px + } + &-github { + width $gt-size-avatar - em(2px) + height $gt-size-avatar - em(2px) + cursor pointer + +mobile() { + width $gt-size-avatar-mobi - em(2px) + height $gt-size-avatar-mobi - em(2px) + } + } + } // button - .gt-btn - padding: em(12px) em(20px) - display: inline-block - line-height: 1 - text-decoration: none - white-space: nowrap - cursor: pointer - border: 1px solid $gt-color-main - border-radius: $gt-size-border-radius - background-color: $gt-color-main - color: $gt-color-btn - outline: none - font-size: em(12px) - &-text - font-weight: 400 - &-loading - position: relative - margin-left: em(8px) - display: inline-block - width: em(12px) - height: em(16px) - vertical-align: top - &.is--disable - cursor: not-allowed - opacity: 0.5 - &-login - margin-right: 0 - &-preview - background-color: var(--background-color) - color: $gt-color-main - &:hover - background-color: var(--second-background-color) - &-public - &:hover - background-color: lighten($gt-color-main, 20%) - border-color: lighten($gt-color-main, 20%) + .gt-btn { + display inline-block + padding em(12px) em(20px) + color $gt-color-btn + font-size em(12px) + line-height 1 + white-space nowrap + text-decoration none + background-color $gt-color-main + border 1px solid $gt-color-main + border-radius $gt-size-border-radius + outline none + cursor pointer + &-text { + font-weight 400 + } + &-loading { + position relative + display inline-block + width em(12px) + height em(16px) + margin-left em(8px) + vertical-align top + } + &.is--disable { + cursor not-allowed + opacity 0.5 + } + &-login { + margin-right 0 + } + &-preview { + color $gt-color-main + background-color var(--background-color) + &:hover { + background-color var(--second-background-color) + } + } + &-public { + &:hover { + background-color lighten($gt-color-main, 20%) + border-color lighten($gt-color-main, 20%) + } + } + } + } &-loadmore // loadmore /* error */ - .gt-error - text-align: center - margin: em(10px) - color: $gt-color-error + .gt-error { + margin em(10px) + color $gt-color-error + text-align center + } - /* initing */ - .gt-initing - padding: em(20px) 0 - text-align: center - &-text - margin: em(10px) auto - font-size: 92% + // initing + .gt-initing { + padding em(20px) 0 + text-align center + &-text { + margin em(10px) auto + font-size 92% + } + } - /* no int */ - .gt-no-init - padding: em(20px) 0 - text-align: center + // no int + .gt-no-init { + padding em(20px) 0 + text-align center + } - /* link */ - .gt-link - border-bottom: 1px dotted $gt-color-main - &-counts, &-project - text-decoration: none + // link + .gt-link { + border-bottom 1px dotted $gt-color-main + &-counts + &-project { + text-decoration none + } + } - /* meta */ - .gt-meta - margin: em(20px) 0 - padding: em(16px) 0 - position: relative - border-bottom: 1px solid $gt-color-hr - font-size: em(16px) - z-index: 10 + // meta + .gt-meta { + position relative + z-index 10 + margin em(20px) 0 + padding em(16px) 0 + font-size em(16px) + border-bottom 1px solid $gt-color-hr clearfix() + } - .gt-counts - margin: 0 em(10px) 0 0 - color: var(--default-text-color) + .gt-counts { + margin 0 em(10px) 0 0 + color var(--default-text-color) + } - .gt-user - float: right - margin: 0 - font-size: 92% - &-pic - width: 16px - height: 16px - vertical-align: top - margin-right: em(8px) - &-inner - display: inline-block - cursor: pointer - .gt-user-name - color: var(--default-text-color) + .gt-user { + float right + margin 0 + font-size 92% + &-pic { + width 16px + height 16px + margin-right em(8px) + vertical-align top + } + &-inner { + display inline-block + cursor pointer + .gt-user-name { + color var(--default-text-color) + } + } - .gt-ico - margin: 0 0 0 em(5px) - svg - fill: var(--default-text-color) - .is--poping - .gt-ico - svg - fill: $gt-color-main + .gt-ico { + margin 0 0 0 em(5px) + svg { + fill var(--default-text-color) + } + } + .is--poping { + .gt-ico { + svg { + fill $gt-color-main + } + } + } + } - .gt-version - color: $gt-color-sub - margin-left: em(6px) + .gt-version { + margin-left em(6px) + color $gt-color-sub + } - .gt-copyright - margin: 0 em(15px) em(8px) - border-top: 1px solid var(--border-color) - padding-top: em(8px) + .gt-copyright { + margin 0 em(15px) em(8px) + padding-top em(8px) + border-top 1px solid var(--border-color) + } - /* popup */ - .gt-popup - position: absolute - right: 0 - top: em(38px) - background: var(--background-color) - display: inline-block - border: 1px solid var(--border-color) - padding: em(10px) 0 - font-size: em(14px) - letter-spacing: .5px - .gt-action - cursor: pointer - display: block - margin: em(8px) 0 - padding: 0 em(18px) - position: relative - text-decoration: none - &.is--active - &:before - content: '' - width: em(4px) - height: em(4px) - background: $gt-color-main - position: absolute - left: em(8px) - top: em(7px) - /* header */ - .gt-header - position: relative - display: flex - &-comment - flex: 1 - margin-left: em(20px) - +mobile() - margin-left: em(14px) - &-textarea - padding: em(12px) - display: block - box-sizing: border-box - width: 100% - min-height: em(82px) - max-height: em(240px) - border-radius: $gt-size-border-radius - border: 1px solid var(--border-color) - font-size: em(14px) - word-wrap: break-word - resize: vertical - color: var(--default-text-color) - background-color: var(--fourth-text-color) - outline: none - transition: all 0.25s ease - &:hover - background-color: var(--background-color) - &-preview - padding: em(12px) - border-radius: $gt-size-border-radius - border: 1px solid var(--border-color) - background-color: var(--background-color) - &-controls - position: relative - margin: em(12px) 0 0 + // popup + .gt-popup { + position absolute + top em(38px) + right 0 + display inline-block + padding em(10px) 0 + font-size em(14px) + letter-spacing 0.5px + background var(--background-color) + border 1px solid var(--border-color) + .gt-action { + position relative + display block + margin em(8px) 0 + padding 0 em(18px) + text-decoration none + cursor pointer + &.is--active { + &:before { + position absolute + top em(7px) + left em(8px) + width em(4px) + height em(4px) + background $gt-color-main + content '' + } + } + } + } + // header + .gt-header { + position relative + display flex + &-comment { + flex 1 + margin-left em(20px) + +mobile() { + margin-left em(14px) + } + } + &-textarea { + display block + box-sizing border-box + width 100% + min-height em(82px) + max-height em(240px) + padding em(12px) + color var(--default-text-color) + font-size em(14px) + word-wrap break-word + background-color var(--fourth-text-color) + border 1px solid var(--border-color) + border-radius $gt-size-border-radius + outline none + transition all 0.25s ease + resize vertical + &:hover { + background-color var(--background-color) + } + } + &-preview { + padding em(12px) + background-color var(--background-color) + border 1px solid var(--border-color) + border-radius $gt-size-border-radius + } + &-controls { + position relative + margin em(12px) 0 0 clearfix() - +mobile() - margin: 0 - &-tip - font-size: em(14px) - color: $gt-color-main - text-decoration: none - vertical-align: sub - +mobile() - display: none - .gt-btn - float: right - margin-left: em(20px) - +mobile() - float: none - width: 100% - margin: em(12px) 0 0 + +mobile() { + margin 0 + } + &-tip { + color $gt-color-main + font-size em(14px) + text-decoration none + vertical-align sub + +mobile() { + display none + } + } + .gt-btn { + float right + margin-left em(20px) + +mobile() { + float none + width 100% + margin em(12px) 0 0 + } + } + } + } - &:after - content: '' - position: fixed - bottom: 100% - left: 0 - right: 0 - top: 0 - opacity: 0 - &.gt-input-focused - position: relative - &:after - content: '' - position: fixed - bottom: 0 - left: 0 - right: 0 - top: 0 - background: #000 - opacity: 0.6 - transition: opacity .3s, bottom 0s - z-index: $gt-mask-z-index - .gt-header-comment - z-index: $gt-mask-z-index + 1 + &:after { + position fixed + top 0 + right 0 + bottom 100% + left 0 + opacity 0 + content '' + } + &.gt-input-focused { + position relative + &:after { + position fixed + top 0 + right 0 + bottom 0 + left 0 + z-index $gt-mask-z-index + background #000 + opacity 0.6 + transition opacity 0.3s, bottom 0s + content '' + } + .gt-header-comment { + z-index $gt-mask-z-index + 1 + } + } - /* comments */ - .gt-comments - padding-top: em(20px) - &-null - text-align: center - &-controls - margin: em(20px) 0 - text-align: center + // comments + .gt-comments { + padding-top em(20px) + &-null { + text-align center + } + &-controls { + margin em(20px) 0 + text-align center + } + } - /* comment */ - .gt-comment - position: relative - padding: em(10px) 0 - display: flex - &-content - flex: 1 - margin-left: em(20px) - padding: em(12px) em(16px) - background-color: var(--second-background-color) - overflow: auto - transition: all ease 0.25s - +mobile() - margin-left: em(14px) - padding: em(10px) em(12px) - &-header - margin-bottom: em(8px) - font-size: em(14px) - position: relative - &-block-1 - float: right - height: em(22px) - width: em(32px) - &-block-2 - float: right - height: em(22px) - width: em(64px) - &-username - font-weight: 500 - color: $gt-color-main - text-decoration: none - &:hover - text-decoration: underline - &-text - margin-left: em(8px) - color: $gt-color-sub - &-date - margin-left: em(8px) - color: $gt-color-sub - &-like, &-edit, &-reply - position: absolute - height: em(22px) - &:hover - cursor: pointer + // comment + .gt-comment { + position relative + display flex + padding em(10px) 0 + &-content { + flex 1 + margin-left em(20px) + padding em(12px) em(16px) + overflow auto + background-color var(--second-background-color) + transition all ease 0.25s + +mobile() { + margin-left em(14px) + padding em(10px) em(12px) + } + } + &-header { + position relative + margin-bottom em(8px) + font-size em(14px) + } + &-block-1 { + float right + width em(32px) + height em(22px) + } + &-block-2 { + float right + width em(64px) + height em(22px) + } + &-username { + color $gt-color-main + font-weight 500 + text-decoration none + &:hover { + text-decoration underline + } + } + &-text { + margin-left em(8px) + color $gt-color-sub + } + &-date { + margin-left em(8px) + color $gt-color-sub + } &-like - top: 0 - right: em(32px) - &-edit, &-reply - top: 0 - right: 0 - &-body - //color: $gt-color-comment-txt !important - color: var(--second-text-color) !important - .email-hidden-toggle a - display: inline-block; - height: 12px; - padding: 0 9px; - font-size: 12px; - font-weight: 600; - line-height: 6px; - color: #444d56; - text-decoration: none; - vertical-align: middle; - background: #dfe2e5; - border-radius: 1px; - &:hover - background-color: #c6cbd1; - .email-hidden-reply - display: none; - white-space: pre-wrap - .email-signature-reply - padding: 0 15px; - margin: 15px 0; - color: #586069; - border-left: 4px solid #dfe2e5; - .email-hidden-reply.expanded - display: block - &-admin - .gt-comment-content - background-color: var(--fourth-text-color) + &-edit + &-reply { + position absolute + height em(22px) + &:hover { + cursor pointer + } + } + &-like { + top 0 + right em(32px) + } + &-edit + &-reply { + top 0 + right 0 + } + &-body { + // color: $gt-color-comment-txt !important + color var(--second-text-color) !important + .email-hidden-toggle a { + display inline-block + height 12px + padding 0 9px + color #444d56 + font-weight 600 + font-size 12px + line-height 6px + text-decoration none + vertical-align middle + background #dfe2e5 + border-radius 1px + &:hover { + background-color #c6cbd1 + } + } + .email-hidden-reply { + display none + white-space pre-wrap + .email-signature-reply { + margin 15px 0 + padding 0 15px + color #586069 + border-left 4px solid #dfe2e5 + } + } + .email-hidden-reply.expanded { + display block + } + } + &-admin { + .gt-comment-content { + background-color var(--fourth-text-color) + } + } + } - @keyframes gt-kf-rotate - 0% - transform: rotate(0) - 100% - transform: rotate(360deg) + @keyframes gt-kf-rotate { + 0% { + transform rotate(0) + } + 100% { + transform rotate(360deg) + } + } +} diff --git a/source/css/layout/_partial/comment/twikoo.styl b/source/css/layout/_partial/comment/twikoo.styl index 96e7906..5e50b71 100644 --- a/source/css/layout/_partial/comment/twikoo.styl +++ b/source/css/layout/_partial/comment/twikoo.styl @@ -5,11 +5,11 @@ .tk-meta-input { .el-input { .el-input-group__prepend { - color: var(--default-text-color); + color var(--default-text-color) } input { - color: var(--default-text-color); + color var(--default-text-color) } } } @@ -17,7 +17,7 @@ .tk-input { textarea { - color: var(--default-text-color); + color var(--default-text-color) } } @@ -28,83 +28,76 @@ .tk-action-icon { svg { - fill: var(--default-text-color); + fill var(--default-text-color) } &.OwO { .OwO-body { - color: var(--default-text-color); - background-color: var(--background-color); + color var(--default-text-color) + background-color var(--background-color) } } - } } .tk-preview { span { - background: var(--second-background-color); - color: var(--default-text-color); + color var(--default-text-color) + background var(--second-background-color) } } - } .tk-preview-container { - color: var(--default-text-color); + color var(--default-text-color) } .tk-comments-container { .tk-comments-count { span { - color: var(--default-text-color); + color var(--default-text-color) } } } .tk-main { - margin-bottom: 20px; + margin-bottom 1.4rem .tk-meta { .tk-nick { - color: var(--default-text-color); + color var(--default-text-color) } .tk-tag { &.tk-tag-green { - background: -webkit-linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5); - background: linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5); - color: #fff; - border none; - border-radius: 5px; + color #fff + background -webkit-linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5) + background linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5) + border none + border-radius 0.4rem } - } .tk-time { time { - color: var(--default-text-color); + color var(--default-text-color) } } - - } .tk-content { - color: var(--default-text-color); + color var(--default-text-color) } .tk-expand { - color: var(--third-text-color); + color var(--third-text-color) } } } - - } diff --git a/source/css/layout/_partial/comment/valine.styl b/source/css/layout/_partial/comment/valine.styl index 6315a82..2ba18ea 100644 --- a/source/css/layout/_partial/comment/valine.styl +++ b/source/css/layout/_partial/comment/valine.styl @@ -4,17 +4,17 @@ .vwrap { - border: 1px solid var(--third-text-color); + border 0.1rem solid var(--third-text-color) .vheader { .vinput { - color: var(--default-text-color); - border-color: var(--third-text-color); + color var(--default-text-color) + border-color var(--third-text-color) &:focus { - border-bottom: 1px dashed var(--primary-color) !important; + border-bottom 0.1rem dashed var(--primary-color) !important } } } @@ -23,45 +23,41 @@ .vedit { .veditor { - color: var(--default-text-color); + color var(--default-text-color) } .vctrl { .vicon { - fill: var(--default-text-color); + fill var(--default-text-color) &.actived { - fill: var(--primary-color); + fill var(--primary-color) } } } - } button.vsubmit { - - background: transparent !important; - color: var(--default-text-color) !important; - border: 1px solid var(--default-text-color) !important; + color var(--default-text-color) !important + background transparent !important + border 0.1rem solid var(--default-text-color) !important &:hover { - color: var(--primary-color) !important; - border: 1px solid var(--primary-color) !important; + color var(--primary-color) !important + border 0.1rem solid var(--primary-color) !important } } - - } .vcount { - color: var(--default-text-color); + color var(--default-text-color) .vnum { - color: var(--second-text-color); + color var(--second-text-color) } } @@ -70,14 +66,14 @@ .vnick { .author { - font-weight: 450; - font-size: 12px; - padding: 2px; - background: -webkit-linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5); - background: linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5); - color: #fff; - margin-left: 2px; - border-radius: 2px; + margin-left 0.15rem + padding 0.15rem + color #fff + font-weight 450 + font-size 0.9rem + background -webkit-linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5) + background linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5) + border-radius 0.15rem } } @@ -85,53 +81,49 @@ .vhead { .vnick { - color: var(--primary-color); + color var(--primary-color) } .vsys { - color: var(--default-text-color); - background: var(--fourth-text-color) !important; + color var(--default-text-color) + background var(--fourth-text-color) !important } } .vcontent { P { - color: var(--default-text-color); + color var(--default-text-color) code { - color: var(--code-foreground); - background: var(--code-background); + color var(--code-foreground) + background var(--code-background) } } } .vh { - border-bottom-color: var(--border-color); + border-bottom-color var(--border-color) } .vquote { - border-left-color: var(--border-color); + border-left-color var(--border-color) } } .vcopy { - color: var(--third-text-color); + color var(--third-text-color) } .vpage { .vmore { - border: 1px solid var(--border-color); - color: var(--second-text-color); + color var(--second-text-color) + border 0.1rem solid var(--border-color) } } - - } - - } diff --git a/source/css/layout/_partial/first-screen.styl b/source/css/layout/_partial/first-screen.styl index dc4a2fb..d3ff565 100644 --- a/source/css/layout/_partial/first-screen.styl +++ b/source/css/layout/_partial/first-screen.styl @@ -34,11 +34,11 @@ $first-screen-font-color = $temp-font-color ? convert($temp-font-color) : var(-- padding-top 2rem .description { + color $first-screen-font-color font-weight bold font-size $first-screen-font-size line-height 1.8 text-align center - color $first-screen-font-color +keep-tablet() { font-size $first-screen-font-size * 0.9 @@ -48,10 +48,10 @@ $first-screen-font-color = $temp-font-color ? convert($temp-font-color) : var(-- .s-icon-list { position absolute - box-sizing border-box bottom 0 - font-size $first-screen-icon-size display flex + box-sizing border-box + font-size $first-screen-icon-size +keep-tablet() { font-size $first-screen-icon-size * 0.9 diff --git a/source/css/layout/_partial/footer.styl b/source/css/layout/_partial/footer.styl index e56559c..d618aee 100644 --- a/source/css/layout/_partial/footer.styl +++ b/source/css/layout/_partial/footer.styl @@ -1,39 +1,37 @@ .footer { - font-size: 1rem; - color: var(--third-text-color); + color var(--third-text-color) + font-size 1rem a { - color: var(--third-text-color); - + color var(--third-text-color) &:hover { - color: var(--primary-color); - + color var(--primary-color) } } .info-container { - padding-bottom: 1rem; - text-align: center; + padding-bottom 1rem + text-align center } .info-item { - margin: 0.3rem 0; + margin 0.3rem 0 + color var(--third-text-color) &.ypyun-info a { - display: flex; - align-items: center; - justify-content: center; + display flex + align-items center + justify-content center img { - margin: 0 0.3rem; + margin 0 0.3rem } } } .icon-animate { - animation: icon-animate 1.2s ease-in-out infinite; + animation icon-animate 1.2s ease-in-out infinite } - } diff --git a/source/css/layout/_partial/header.styl b/source/css/layout/_partial/header.styl index bb053a4..8a62843 100644 --- a/source/css/layout/_partial/header.styl +++ b/source/css/layout/_partial/header.styl @@ -1,96 +1,94 @@ -$logo-title-font-size = 2rem; -$pc-search-icon-font-size = 1.5rem; -$menu-bar-line-height = 2.5px; -$logo-image-box-width = 46px; +$logo-title-font-size = 2rem +$pc-search-icon-font-size = 1.5rem +$menu-bar-line-height = 2.5px +$logo-image-box-width = 46px .header-wrapper { - width: 100%; - height: 100%; - box-sizing: border-box; - display: flex; - align-items: center; - justify-content: center; - padding-top: $scroll-progress-bar-height; - background: var(--background-color); + display flex + align-items center + justify-content center + box-sizing border-box + width 100% + height 100% + padding-top $scroll-progress-bar-height + background var(--background-color) - hover-style(false, 0, 0); + hover-style(false, 0, 0) .header-content { - position: relative; - height: 100%; - width: $main-content-width; - max-width: $content-max-width; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - z-index: $z-index-5; + position relative + z-index $z-index-5 + display flex + flex-direction row + align-items center + justify-content space-between + width $main-content-width + max-width $content-max-width + height 100% &.has-first-screen { - max-width: $content-max-width * 1.2; + max-width $content-max-width * 1.2 } +keep-tablet() { - width: $main-content-width-tablet; + width $main-content-width-tablet } +keep-mobile() { - width: $main-content-width-mobile; + width $main-content-width-mobile } .left { - display: flex; - align-items: center; - transition-t("transform", "0", "0.2", "linear"); + display flex + align-items center + transition-t("transform", "0", "0.2", "linear") .header-shrink & { - transform: scale(0.72); - transform-origin: left; + transform scale(0.72) + transform-origin left } if (hexo-config('base_info.logo_img') || hexo-config('style.logo')) { .logo-image { - width: $logo-image-box-width; - height: $logo-image-box-width; - margin-right: 8px; + width $logo-image-box-width + height $logo-image-box-width + margin-right 8px +keep-tablet() { - width: $logo-image-box-width * 0.9; - height: $logo-image-box-width * 0.9; + width $logo-image-box-width * 0.9 + height $logo-image-box-width * 0.9 } +keep-mobile() { - width: $logo-image-box-width * 0.8; - height: $logo-image-box-width * 0.8; + width $logo-image-box-width * 0.8 + height $logo-image-box-width * 0.8 } img { - border-radius: 6px; - width: 100%; + width 100% + border-radius 6px } } - } .logo-title { - font-size: $logo-title-font-size; - font-weight: bold; - letter-spacing: 1px; - line-height: 1; - color: var(--first-text-color); + color var(--first-text-color) + font-weight bold + font-size $logo-title-font-size + line-height 1 + letter-spacing 1px +keep-tablet() { - font-size: $logo-title-font-size * 0.9; + font-size $logo-title-font-size * 0.9 } +keep-mobile() { - font-size: $logo-title-font-size * 0.8; + font-size $logo-title-font-size * 0.8 } } - } @@ -99,131 +97,129 @@ $logo-image-box-width = 46px; .pc { .menu-list { - display: flex; - align-items: center; + display flex + align-items center +keep-tablet() { - display: none; + display none } .menu-item { - float: left; - position: relative; - margin-left: 30px; - font-size: 1rem; - cursor: pointer; - color: var(--default-text-color); + position relative + float left + margin-left 30px + color var(--default-text-color) + font-size 1rem + cursor pointer &:first-child { - margin-left: 0; + margin-left 0 } - a:hover, .active { + a:hover + .active { &::after { - content: ''; - position: absolute; - bottom: -10px; - left: 50%; - width: 100%; - height: 2px; - transform: translateX(-50%); - background: var(--primary-color); - transition-t("transform, bottom", "0, 0", "0.2, 0.2", "linear, linear"); + position absolute + bottom -10px + left 50% + width 100% + height 2px + background var(--primary-color) + transform translateX(-50%) + content '' + transition-t("transform, bottom", "0, 0", "0.2, 0.2", "linear, linear") .header-shrink & { - bottom: -($header-shrink-height / 2 - 12); + bottom -($header-shrink-height / 2 - 12) } } } &.search { - font-size: $pc-search-icon-font-size; - margin-left: 26px; + margin-left 26px + font-size $pc-search-icon-font-size i { - color: var(--default-text-color); + color var(--default-text-color) } - } } - - } - } .mobile { - display: flex; - justify-content: space-between; - align-items: center; + display flex + align-items center + justify-content space-between .icon-item { - display: none; - position: relative; - cursor: pointer; - font-size: 18px; - margin-left: 12px; - width: 20px; - height: 20px; - color: var(--default-text-color); + position relative + display none + width 20px + height 20px + margin-left 12px + color var(--default-text-color) + font-size 18px + cursor pointer i { - color: var(--default-text-color); + color var(--default-text-color) } &:first-child { - margin-left: 0; + margin-left 0 } +keep-tablet() { - display: flex; - justify-content: center; - align-items: center; + display flex + align-items center + justify-content center } } .menu-bar { .menu-bar-middle { - width: 18px; - height: $menu-bar-line-height; - position: relative; - background: var(--default-text-color); + position relative + width 18px + height $menu-bar-line-height + background var(--default-text-color) .header-drawer-show & { - background: transparent; + background transparent } - &::before, &::after { - content: ''; - position: absolute; - left: 0; - width: 100%; - height: $menu-bar-line-height; - background: var(--default-text-color); - transition-t("transform", "0", "0.38", "ease"); + &::before + &::after { + position absolute + left 0 + width 100% + height $menu-bar-line-height + background var(--default-text-color) + content '' + transition-t("transform", "0", "0.38", "ease") } &::before { - top: -6px; + top -6px .header-drawer-show & { - transform: translateY(6px) rotate(45deg); + transform translateY(6px) rotate(45deg) } } &::after { - bottom: -6px; + bottom -6px .header-drawer-show & { - transform: translateY(-6px) rotate(-45deg); + transform translateY(-6px) rotate(-45deg) } } } @@ -234,74 +230,71 @@ $logo-image-box-width = 46px; .header-drawer { - width: 100%; - padding: $header-height 0 20px 0; - position: absolute; - top: 0; - left: 0; - transform: scaleY(0); - transform-origin: top; - z-index: $z-index-2; - background: var(--background-color); - transition-t("transform", "0", "0.38", "ease"); + position absolute + top 0 + left 0 + z-index $z-index-2 + width 100% + padding $header-height 0 20px 0 + background var(--background-color) + transform scaleY(0) + transform-origin top + transition-t("transform", "0", "0.38", "ease") .header-drawer-show & { - transform: scaleY(1); + transform scaleY(1) } .drawer-menu-list { - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: center; + display flex + flex-direction column + align-items center + justify-content flex-start .drawer-menu-item { - font-size: 1rem; - margin: 6px 0; - height: 38px; + height 38px + margin 6px 0 + font-size 1rem a { - padding: 6px 20px; - border-radius: 20px; - color: var(--default-text-color); + padding 6px 20px + color var(--default-text-color) + border-radius 20px &:hover { - color: var(--second-text-color); - border: 1px solid var(--default-text-color); + color var(--second-text-color) + border 1px solid var(--default-text-color) } &.active { - border: 1px solid var(--default-text-color); - color: var(--second-text-color); + color var(--second-text-color) + border 1px solid var(--default-text-color) } } - - } } } .window-mask { - position: absolute; - top: 0; - width: 100%; - height: 100vh; - background: rgba(0, 0, 0, 0.4); - z-index: $z-index-1; - visibility: hidden; - opacity: 0; - transition-t("transform, opacity", "0, 0", "0.38, 0.38", "ease, ease"); + position absolute + top 0 + z-index $z-index-1 + width 100% + height 100vh + background rgba(0, 0, 0, 0.4) + visibility hidden + opacity 0 + transition-t("transform, opacity", "0, 0", "0.38, 0.38", "ease, ease") .header-drawer-show & { - visibility: visible; - opacity: 1; + visibility visible + opacity 1 } } - } .header-drawer-show { - overflow: hidden; + overflow hidden } diff --git a/source/css/layout/_partial/image-viewer.styl b/source/css/layout/_partial/image-viewer.styl index 9dcfb5f..af70f3c 100644 --- a/source/css/layout/_partial/image-viewer.styl +++ b/source/css/layout/_partial/image-viewer.styl @@ -1,36 +1,36 @@ .image-viewer-container { - position: fixed; - left: 0; - top: 0; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - background: rgba(0, 0, 0, 0); - visibility: hidden; - z-index: $z-index-8; - padding: 6%; - box-sizing: border-box; - transition-t("visibility, background", "0, 0", "0.3, 0.3", "ease, ease"); + position fixed + top 0 + left 0 + z-index $z-index-8 + display flex + align-items center + justify-content center + box-sizing border-box + width 100% + height 100% + padding 6% + background rgba(0, 0, 0, 0) + visibility hidden + transition-t("visibility, background", "0, 0", "0.3, 0.3", "ease, ease") &.active { - background: rgba(0, 0, 0, 0.5); - visibility: visible; + background rgba(0, 0, 0, 0.5) + visibility visible img { - cursor: zoom-out; - transform: scale(1); - padding: 2px; - background: var(--background-color); + padding 2px + background var(--background-color) + transform scale(1) + cursor zoom-out } } img { - max-width: 100%; - max-height: 100%; - transform: scale(0); - transition-t("transform", "0", "0.3", "ease"); + max-width 100% + max-height 100% + transform scale(0) + transition-t("transform", "0", "0.3", "ease") } } diff --git a/source/css/layout/_partial/local-search.styl b/source/css/layout/_partial/local-search.styl index fc5871c..ab90fa0 100644 --- a/source/css/layout/_partial/local-search.styl +++ b/source/css/layout/_partial/local-search.styl @@ -3,35 +3,34 @@ $search-header-height = 3rem .search-pop-overlay { position fixed - display flex - height 100% - width 100% - left 0 top 0 + left 0 + z-index $z-index-8 + display flex + width 100% + height 100% background rgba(0, 0, 0, 0) visibility hidden - z-index $z-index-8 transition-t("visibility, background", "0, 0", "0.3, 0.3", "ease, ease") &.active { - visibility visible background rgba(0, 0, 0, 0.35) + visibility visible .search-popup { transform scale(1) } - } .search-popup { + z-index $z-index-6 + width 70% + height 80% + margin auto background var(--background-color) border-radius 0.4rem - height 80% - width 70% - margin auto transform scale(0) - z-index $z-index-6 transition-t("transform", "0", "0.3", "ease") +keep-tablet() { @@ -43,18 +42,18 @@ $search-header-height = 3rem } .search-header { + display flex + align-items center + height $search-header-height + padding 0 1rem background var(--fourth-text-color) border-top-left-radius 0.2rem border-top-right-radius 0.2rem - display flex - height $search-header-height - align-items center - padding 0 1rem .search-input-field-pre { - cursor pointer - color var(--default-text-color) margin-right 0.2rem + color var(--default-text-color) + cursor pointer } .search-input-container { @@ -62,12 +61,12 @@ $search-header-height = 3rem padding 0.2rem .search-input { + width 100% + color var(--default-text-color) + font-size 1.2rem background transparent border 0 outline 0 - width 100% - font-size 1.2rem - color var(--default-text-color) &::-webkit-search-cancel-button { display none @@ -86,21 +85,22 @@ $search-header-height = 3rem font-size $icon-size cursor pointer - &:hover .fas, far, fab { + &:hover .fas + far + fab { color var(--first-text-color) } } - } #search-result { position relative - box-sizing border-box display flex + box-sizing border-box height 'calc(100% - %s)' % $search-header-height - overflow auto padding 0.3rem 1.5rem + overflow auto .search-result-list { width 100% @@ -109,9 +109,9 @@ $search-header-height = 3rem li { box-sizing border-box - border-bottom 0.1rem dashed var(--border-color) - padding 0.8rem 0 margin 0.8rem 0 + padding 0.8rem 0 + border-bottom 0.1rem dashed var(--border-color) &:last-child { border-bottom none @@ -120,30 +120,30 @@ $search-header-height = 3rem .search-result-title { position relative - font-weight bold - margin-bottom 0.8rem - padding-left 1rem display flex align-items center + margin-bottom 0.8rem + padding-left 1rem + font-weight bold &::after { - content '' position absolute + top 50% + left 0 width 0.4rem height 0.4rem - border-radius 50% - top 50% - transform translateY(-50%) - left 0 background var(--default-text-color) + border-radius 50% + transform translateY(-50%) + content '' } } .search-result { - line-height 2rem margin 0 padding-left 1rem + line-height 2rem word-wrap break-word } @@ -154,20 +154,18 @@ $search-header-height = 3rem } .search-keyword { - border-bottom 0.1rem dashed var(--primary-color) color var(--primary-color) font-weight bold + border-bottom 0.1rem dashed var(--primary-color) } - } } #no-result { - color var(--third-text-color) margin auto + color var(--third-text-color) } - } } } diff --git a/source/css/layout/_partial/page-template.styl b/source/css/layout/_partial/page-template.styl index 46f0458..9274179 100644 --- a/source/css/layout/_partial/page-template.styl +++ b/source/css/layout/_partial/page-template.styl @@ -1,21 +1,25 @@ -$friend-link-item-height = 82px; -$friend-link-item-height-tablet = 68px; -$friend-link-item-interval = 16px; -$friend-link-item-border-radius = 6px; +$friend-link-item-height = 82px +$friend-link-item-height-tablet = 68px +$friend-link-item-interval = 16px +$friend-link-item-border-radius = 6px .page-template-container { - keep-container(false, 0, 0, 30px, 30px); + keep-container(false, 0, 0, 30px, 30px) .page-template-content { - color: var(--default-text-color); + color var(--default-text-color) - h1, h2, h3, h4, h5, h6 { + h1 + h2 + h3 + h4 + h5 + h6 { &:first-child { - margin-top: 0; + margin-top 0 } - } } @@ -24,136 +28,130 @@ $friend-link-item-border-radius = 6px; .friends-link-container { .friends-link-list { - position: relative; + position relative .friends-link-item { - box-sizing: border-box; - position: relative; - float: left; - width: 50%; - cursor: pointer; - height: $friend-link-item-height; - padding-bottom: $friend-link-item-interval; + position relative + float left + box-sizing border-box + width 50% + height $friend-link-item-height + padding-bottom $friend-link-item-interval + cursor pointer +keep-tablet() { - height: $friend-link-item-height-tablet; + height $friend-link-item-height-tablet } &:nth-child(odd) { - padding-right: $friend-link-item-interval * 0.5; + padding-right $friend-link-item-interval * 0.5 } &:nth-child(even) { - padding-left: $friend-link-item-interval * 0.5; + padding-left $friend-link-item-interval * 0.5 } .content { - position: relative; - width: 100%; - height: 100%; - box-shadow: 1px 1px 2px var(--shadow-color); - border-radius: $friend-link-item-border-radius; - padding-left: $friend-link-item-height - $friend-link-item-interval; - box-sizing: border-box; + position relative + box-sizing border-box + width 100% + height 100% + padding-left $friend-link-item-height - $friend-link-item-interval + border-radius $friend-link-item-border-radius + box-shadow 1px 1px 2px var(--shadow-color) +keep-tablet() { - padding-left: $friend-link-item-height-tablet - $friend-link-item-interval; + padding-left $friend-link-item-height-tablet - $friend-link-item-interval } &:hover { - box-shadow: 1px 1px 6px var(--shadow-color); + box-shadow 1px 1px 6px var(--shadow-color) .info .name { - color: var(--primary-color); + color var(--primary-color) } } .radius { - border-top-left-radius: $friend-link-item-border-radius; - border-bottom-left-radius: $friend-link-item-border-radius; + border-top-left-radius $friend-link-item-border-radius + border-bottom-left-radius $friend-link-item-border-radius } .avatar { - position: absolute; - top: 0; - left: 0; - width: $friend-link-item-height - $friend-link-item-interval; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - font-size: 2rem; - background: var(--second-background-color); - color: var(--second-text-color); + position absolute + top 0 + left 0 + display flex + align-items center + justify-content center + width $friend-link-item-height - $friend-link-item-interval + height 100% + color var(--second-text-color) + font-size 2rem + background var(--second-background-color) +keep-tablet() { - width: $friend-link-item-height-tablet - $friend-link-item-interval; + width $friend-link-item-height-tablet - $friend-link-item-interval } img { - box-sizing: border-box; - position: relative; - width: 100%; - height: 100%; + position relative + box-sizing border-box + width 100% + height 100% } } .info { - position: relative; - width: 100%; - height: 100%; - box-sizing: border-box; - padding: 10px; - display: flex; - flex-direction: column; - align-items: center; - justify-items: flex-start; + position relative + display flex + flex-direction column + align-items center + justify-items flex-start + box-sizing border-box + width 100% + height 100% + padding 10px +keep-tablet() { - padding: 6px; + padding 6px } .name { - width: 100%; - height: 60%; - font-size: 1.28rem; - color: var(--second-text-color); + width 100% + height 60% + color var(--second-text-color) + font-size 1.28rem +keep-tablet() { - font-size: 1.08rem; + font-size 1.08rem } } .description { - width: 100%; - height: 40%; - font-size: 1rem; - color: var(--third-text-color); + width 100% + height 40% + color var(--third-text-color) + font-size 1rem +keep-tablet() { - font-size: 0.98rem; + font-size 0.98rem } } .ellipsis { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + overflow hidden + white-space nowrap + text-overflow ellipsis } - } } - } - } - } - } - } diff --git a/source/css/layout/_partial/paginator.styl b/source/css/layout/_partial/paginator.styl index 3b5ae7d..ea8a6f1 100644 --- a/source/css/layout/_partial/paginator.styl +++ b/source/css/layout/_partial/paginator.styl @@ -1,13 +1,12 @@ .paginator { - font-size: 1rem; - margin-top: 30px; + margin-top 30px + font-size 1rem a.prev { - float: left; + float left } a.next { - float: right; + float right } - } diff --git a/source/css/layout/_partial/post-tools.styl b/source/css/layout/_partial/post-tools.styl index 45bccd4..bac6dae 100644 --- a/source/css/layout/_partial/post-tools.styl +++ b/source/css/layout/_partial/post-tools.styl @@ -1,52 +1,51 @@ -$li-border-radius = 5px; -$li-margin-bottom = 12px; +$li-border-radius = 5px +$li-margin-bottom = 12px .post-tools-container { .tools-list { li { - cursor: pointer; - width: $post-tool-button-width; - height: $post-tool-button-width; - border-radius: 50%; - font-size: 1.2rem; - display: flex; - align-items: center; - justify-content: center; - margin-bottom: $li-margin-bottom; - background: var(--background-color); - color: var(--default-text-color); + display flex + align-items center + justify-content center + width $post-tool-button-width + height $post-tool-button-width + margin-bottom $li-margin-bottom + color var(--default-text-color) + font-size 1.2rem + background var(--background-color) + border-radius 50% + cursor pointer i { - color: var(--default-text-color); + color var(--default-text-color) } &:hover { - background: var(--primary-color); - color: var(--background-color); + color var(--background-color) + background var(--primary-color) i { - color: var(--background-color); + color var(--background-color) } } &:last-child { - margin-bottom: 0; + margin-bottom 0 } - hover-style(true, 1.06, 1.06); + hover-style(true, 1.06, 1.06) &.page-aside-toggle { - display: none; + display none +keep-tablet() { - display: none !important; + display none !important } } } } - } diff --git a/source/css/layout/_partial/progress-bar.styl b/source/css/layout/_partial/progress-bar.styl index 1519d72..85a2c49 100644 --- a/source/css/layout/_partial/progress-bar.styl +++ b/source/css/layout/_partial/progress-bar.styl @@ -1,74 +1,69 @@ .progress-bar-container { - position: fixed; - top: 0; - left: 0; - width: 100%; - z-index: $z-index-9; + position fixed + top 0 + left 0 + z-index $z-index-9 + width 100% if (hexo-config('pjax.enable') == true) { .pjax-progress-bar { - position: absolute; - top: 0; - left: 0; - height: 2px; - width: 0; - background: var(--pjax-progress-bar-color); - visibility: hidden; - opacity: 0; - z-index: $z-index-8; - transition-t("width", "0", "0.1", "linear"); + position absolute + top 0 + left 0 + z-index $z-index-8 + width 0 + height 2px + background var(--pjax-progress-bar-color) + visibility hidden + opacity 0 + transition-t("width, opacity", "0, 0", "0.1, 0.1", "linear") &.show { - opacity: 1; - visibility: visible; + visibility visible + opacity 1 } } .pjax-progress-icon { - position: absolute; - top: 0; - right: 0; - z-index: $z-index-8; - display: flex; - align-items: center; - justify-content: center; - padding: 7px 6px 0 0; - visibility: hidden; - font-size: 1.1rem; - color: var(--default-text-color); + position absolute + top 0.4rem + right 0.3rem + z-index $z-index-8 + color var(--default-text-color) + font-size 1.1rem + visibility hidden +keep-tablet() { - padding: 6px 5px 0 0; - font-size: 1rem; + top 0.3rem + right 0.2rem + font-size 1rem } &.show { - visibility: visible; + visibility visible } } - } if (hexo-config('style.scroll.progress_bar.enable') == true) { .scroll-progress-bar { - position: absolute; - top: 0; - left: 0; - width: 0; - height: $scroll-progress-bar-height; - visibility: hidden; - z-index: $z-index-7; - background: var(--primary-color); - transition-t("width", "0", "0.1", "linear"); + position absolute + top 0 + left 0 + z-index $z-index-7 + width 0 + height $scroll-progress-bar-height + background var(--primary-color) + visibility hidden + transition-t("width", "0", "0.1", "linear") &.hide { - display: none !important; + display none !important } } - } } diff --git a/source/css/layout/_partial/side-tools.styl b/source/css/layout/_partial/side-tools.styl index 1d298be..29cadce 100644 --- a/source/css/layout/_partial/side-tools.styl +++ b/source/css/layout/_partial/side-tools.styl @@ -1,55 +1,55 @@ -$tools-item-width = 32px; -$tools-item-font-size = 1.1rem; -$tools-item-border-radius = 1px; +$tools-item-width = 32px +$tools-item-font-size = 1.1rem +$tools-item-border-radius = 1px .side-tools-container { - position: relative; + position relative .tools-item { - width: $tools-item-width; - height: $tools-item-width; - font-size: $tools-item-font-size; - margin-bottom: 3px; - cursor: pointer; - border-right: none; - border-radius: $tools-item-border-radius; - box-shadow: 1px 1px 3px var(--shadow-color); - color: var(--default-text-color); - background: var(--background-color); + width $tools-item-width + height $tools-item-width + margin-bottom 3px + color var(--default-text-color) + font-size $tools-item-font-size + background var(--background-color) + border-right none + border-radius $tools-item-border-radius + box-shadow 1px 1px 3px var(--shadow-color) + cursor pointer i { - color: var(--default-text-color); + color var(--default-text-color) } &:hover { - color: var(--background-color); - background: var(--primary-color); - box-shadow: 2px 2px 6px var(--shadow-color); + color var(--background-color) + background var(--primary-color) + box-shadow 2px 2px 6px var(--shadow-color) i { - color: var(--background-color); + color var(--background-color) } } +keep-tablet() { - width: $tools-item-width * 0.9; - height: $tools-item-width * 0.9; - font-size: $tools-item-font-size * 0.9; - margin-bottom: 2px; + width $tools-item-width * 0.9 + height $tools-item-width * 0.9 + margin-bottom 2px + font-size $tools-item-font-size * 0.9 } &.rss { a { - border-radius: $tools-item-border-radius; - width: 100%; - height: 100%; + width 100% + height 100% + border-radius $tools-item-border-radius &:hover { - color: var(--background-color); - background: var(--primary-color); - box-shadow: 2px 2px 6px var(--shadow-color); + color var(--background-color) + background var(--primary-color) + box-shadow 2px 2px 6px var(--shadow-color) } } } @@ -57,20 +57,20 @@ $tools-item-border-radius = 1px; .side-tools-list { - opacity: 0; - transform: translateX(100%); - transition-t("transform, opacity", "0, 0", "0.2, 0.2", "linear, linear"); + transform translateX(100%) + opacity 0 + transition-t("transform, opacity", "0, 0", "0.2, 0.2", "linear, linear") .tool-expand-width { +keep-tablet() { - display: none; + display none } } &.show { - opacity: 1; - transform: translateX(0); + transform translateX(0) + opacity 1 } } @@ -79,35 +79,32 @@ $tools-item-border-radius = 1px; if (hexo-config('style.scroll.percent.enable') == true) { .tool-scroll-to-top { - display: none; + display none &.show { - display: flex; + display flex } &:hover { .percent { - display: none; + display none } .arrow-up { - display: flex; + display flex } - } .arrow-up { - display: none; + display none } .percent { - display: flex; - font-size: 1rem; + display flex + font-size 1rem } - } - } } } diff --git a/source/css/layout/_partial/tagcloud.styl b/source/css/layout/_partial/tagcloud.styl index f2109c9..c2a88ea 100644 --- a/source/css/layout/_partial/tagcloud.styl +++ b/source/css/layout/_partial/tagcloud.styl @@ -1,15 +1,15 @@ .tagcloud-container { - keep-container(false, 0, 0, 20px, 0); + keep-container(false, 0, 0, 20px, 0) .tagcloud-content { - text-align: justify; + text-align justify a { - padding: 10px 8px; - display: inline-block; - box-sizing: border-box; + display inline-block + box-sizing border-box + padding 10px 8px } } } diff --git a/source/css/layout/_partial/toc.styl b/source/css/layout/_partial/toc.styl index ec48c65..ac1ca1a 100644 --- a/source/css/layout/_partial/toc.styl +++ b/source/css/layout/_partial/toc.styl @@ -1,70 +1,73 @@ .post-toc-wrap { - width: 100%; - font-size: 0.92rem; - box-sizing: border-box; + box-sizing border-box + width 100% + font-size 0.92rem .post-toc { ol { - list-style: none; - margin: 0; - padding: 0 2px 12px 10px; - text-align: left; + margin 0 + padding 0 2px 12px 10px + text-align left + list-style none &:last-child { - padding-bottom: 0; + padding-bottom 0 } > ol { - padding-left: 0; + padding-left 0 } a { - transition-property: all; - transition(); + transition-property all + transition() } } .nav-item { - line-height: 1.8; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + overflow hidden + line-height 1.8 + white-space nowrap + text-overflow ellipsis } .nav { .nav-child { - display: hexo-config('toc.expand_all') ? block : none; + display hexo-config('toc.expand_all') ? block : none } .active > .nav-child { - display: block; + display block } .active-current > .nav-child { - display: block; + display block > .nav-item { - display: block; + display block } } - .nav-number, .nav-text { - color: var(--default-text-color); + .nav-number + .nav-text { + color var(--default-text-color) } .active > a { - .nav-number, .nav-text { - color: var(--primary-color); + .nav-number + .nav-text { + color var(--primary-color) } } .active-current > a { - .nav-number, .nav-text { - color: var(--primary-color); + .nav-number + .nav-text { + color var(--primary-color) } } } diff --git a/source/css/layout/archive-content.styl b/source/css/layout/archive-content.styl index ecdde4e..9d8e4fa 100644 --- a/source/css/layout/archive-content.styl +++ b/source/css/layout/archive-content.styl @@ -1,5 +1,5 @@ .archive-container { - keep-container(false, 0, 0, 30px, 30px); + keep-container(false, 0, 0, 30px, 30px) } diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl index c9c1608..abbb8ff 100644 --- a/source/css/layout/article-content.styl +++ b/source/css/layout/article-content.styl @@ -1,224 +1,218 @@ -$avatarWidth = 46px; -$arrow-icon-width = 16px; -$post-nav-max-width = 220px; -$article-title-font-size = 1.6rem; +$avatarWidth = 46px +$arrow-icon-width = 16px +$post-nav-max-width = 220px +$article-title-font-size = 1.6rem .article-content-container { - keep-container(false, 0, 0, 30px, 30px); + keep-container(false, 0, 0, 30px, 30px) +keep-mobile() { - padding: 1.2rem 0.2rem; - box-shadow: none; + padding 1.2rem 0.2rem + box-shadow none } .article-title { - color: var(--second-text-color); - font-weight: 600; - font-size: $article-title-font-size; + color var(--second-text-color) + font-weight 600 + font-size $article-title-font-size +keep-tablet() { - font-size: $article-title-font-size * 0.9; + font-size $article-title-font-size * 0.9 } +keep-mobile() { - font-size: $article-title-font-size * 0.8; + font-size $article-title-font-size * 0.8 } } .article-header { - position: relative; - padding-left: $avatarWidth; - width: 100%; - height: $avatarWidth; - box-sizing: border-box; + position relative + box-sizing border-box + width 100% + height $avatarWidth + padding-left $avatarWidth .avatar { - position: absolute; - top: 0 - left: 0; - width: $avatarWidth; - height: $avatarWidth; - padding: 1px; - box-sizing: border-box; - border: 1px solid var(--border-color); - border-radius: 50%; + position absolute + top 0 + left 0 + box-sizing border-box + width $avatarWidth + height $avatarWidth + padding 1px + border 1px solid var(--border-color) + border-radius 50% img { - border-radius: 50%; - width: 100%; - height: 100%; - background: var(--avatar-background-color); + width 100% + height 100% + background var(--avatar-background-color) + border-radius 50% } - } .info { - padding: 2px 0; - margin-left: 10px; - box-sizing: border-box; - display: flex; - flex-direction: column; - justify-content: space-between; - width: 100%; - height: 100%; + display flex + flex-direction column + justify-content space-between + box-sizing border-box + width 100% + height 100% + margin-left 10px + padding 2px 0 .author { - font-weight: 600; - font-size: 1.18rem; - display: flex; - align-items: center; + display flex + align-items center + font-weight 600 + font-size 1.18rem .name { - color: var(--default-text-color); + color var(--default-text-color) } .author-label { - margin-left: 10px; - font-size: 0.8rem; - font-weight: 500; - padding: 0 5px; - border-radius: 5px; - color: #fff; - background: var(--selection-color); + margin-left 10px + padding 0 5px + color #fff + font-weight 500 + font-size 0.8rem + background var(--selection-color) + border-radius 5px } - } } - } - .article-header, .article-header-meta-info { - margin-top: 16px; + .article-header + .article-header-meta-info { + margin-top 16px +keep-tablet() { - transform: scale(0.9); - transform-origin: left top; + transform scale(0.9) + transform-origin left top } } .article-content { - margin-top: $component-spacing-value; - padding-bottom: 10px; - word-wrap: break-word; - border-bottom: 1px solid var(--border-color); - color: var(--default-text-color); + margin-top $component-spacing-value + padding-bottom 10px + color var(--default-text-color) + word-wrap break-word + border-bottom 1px solid var(--border-color) } .post-tags-box { - display: none; - margin-top: 1.6rem; - justify-content: center; - font-size: 1.1rem; + display none + justify-content center + margin-top 1.6rem + font-size 1.1rem +keep-tablet() { - display: flex; + display flex } +keep-mobile() { - margin-top: 1.2rem; - font-size: 1rem; + margin-top 1.2rem + font-size 1rem } .tag-item { - margin: 0 0.25rem; + margin 0 0.25rem } } .post-copyright-info { - margin-top: $component-spacing-value; - width: 100%; + width 100% + margin-top $component-spacing-value +keep-tablet() { - margin-top: $component-spacing-value * 0.8; + margin-top $component-spacing-value * 0.8 } } .article-nav { - height: 40px; - margin-top: $component-spacing-value; + height 40px + margin-top $component-spacing-value - .article-prev, .article-next { - max-width: $post-nav-max-width; - height: 100%; - box-sizing: border-box; + .article-prev + .article-next { + box-sizing border-box + max-width $post-nav-max-width + height 100% - keep-container(true, 1.03, 1.03, 10px, 0); + keep-container(true, 1.03, 1.03, 10px, 0) a { - position: relative; - display: block; - width: 100%; - height: 100%; - box-sizing: border-box; + position relative + display block + box-sizing border-box + width 100% + height 100% &.prev { - padding-left: $arrow-icon-width; + padding-left $arrow-icon-width } &.next { - padding-right: $arrow-icon-width; + padding-right $arrow-icon-width } .arrow-icon { - position: absolute; - top: 0; - height: 100%; - width: $arrow-icon-width; + position absolute + top 0 + width $arrow-icon-width + height 100% &.left { - left: 0; + left 0 } &.right { - right: 0; + right 0 } } .title { - width: 100%; - height: 100%; + width 100% + height 100% } } - } .article-prev { - float: left; + float left } .article-next { - float: right; + float right } .post-nav-item { - display: none; + display none +keep-tablet() { - display: inline-block; + display inline-block } - } .post-nav-title-item { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + overflow hidden + white-space nowrap + text-overflow ellipsis +keep-tablet() { - display: none; + display none } } - } - - } diff --git a/source/css/layout/category-content.styl b/source/css/layout/category-content.styl index 6f3ecd3..6906afe 100644 --- a/source/css/layout/category-content.styl +++ b/source/css/layout/category-content.styl @@ -1,28 +1,28 @@ -$category-name-font-size = 1.6rem; +$category-name-font-size = 1.6rem .category-container { - keep-container(false, 0, 0, 30px, 30px); + keep-container(false, 0, 0, 30px, 30px) .category-name { - color: var(--second-text-color); - font-size: $category-name-font-size; + margin-bottom $component-spacing-value + padding-bottom 20px + color var(--second-text-color) + + font-weight 600 + font-size $category-name-font-size + border-bottom 1px solid var(--border-color) i { - color: var(--second-text-color); + color var(--second-text-color) } +keep-tablet() { - font-size: $category-name-font-size * 0.9; + font-size $category-name-font-size * 0.9 } +keep-mobile() { - font-size: $category-name-font-size * 0.8; + font-size $category-name-font-size * 0.8 } - - font-weight: 600; - padding-bottom: 20px; - margin-bottom: $component-spacing-value; - border-bottom: 1px solid var(--border-color); } } diff --git a/source/css/layout/category-list.styl b/source/css/layout/category-list.styl index 1b48d9e..5c5b2e1 100644 --- a/source/css/layout/category-list.styl +++ b/source/css/layout/category-list.styl @@ -1,58 +1,53 @@ .category-list-container { - keep-container(false, 0, 0, 30px, 0); + keep-container(false, 0, 0, 30px, 0) .category-list-content { .all-category-list { li.all-category-list-item { - font-size: 1rem; - margin-bottom: 15px; + margin-bottom 15px + font-size 1rem &:last-child { - margin-bottom: 0; + margin-bottom 0 } span.all-category-list-count { - float: right; - color: var(--default-text-color); + float right + color var(--default-text-color) &::before { - content: '['; + content '[' } &::after { - content: ']'; + content ']' } - } ul.all-category-list-child { + margin-top 15px - margin-left: 10px; - margin-top: 15px; + margin-left 10px li { &::before { - content: '- '; + content '- ' } - margin-bottom: 10px; + margin-bottom 10px &:last-child { - margin-bottom: 0; + margin-bottom 0 } - } } } - - } - } } diff --git a/source/css/layout/home-content.styl b/source/css/layout/home-content.styl index 91e9b37..46a15f2 100644 --- a/source/css/layout/home-content.styl +++ b/source/css/layout/home-content.styl @@ -1,114 +1,111 @@ .home-content-container { - background: var(--background-color); + background var(--background-color) .home-article-list { .home-article-item { - position: relative; + position relative - keep-container(true, 1.015, 1.015, 28px, 38px); + keep-container(true, 1.015, 1.015, 28px, 38px) .top-icon { - position: absolute; - top: 10px; - right: 12px; - font-size: 1.2rem; - transform: rotate(45deg); - color: var(--third-text-color); + position absolute + top 10px + right 12px + color var(--third-text-color) + font-size 1.2rem + transform rotate(45deg) +keep-tablet() { - font-size: 1.16rem; + font-size 1.16rem } } .home-article-title { - position: relative; - font-weight: 600; - font-size: 1.4rem; - line-height: 1.5; - color: var(--second-text-color); + position relative + margin 0 + color var(--second-text-color) + font-weight 600 + font-size 1.4rem + line-height 1.5 +keep-tablet() { - font-size: 1.3rem; + font-size 1.3rem } +keep-mobile() { - font-size: 1.2rem; + font-size 1.2rem } - - margin: 0; - } .home-article-content { - word-wrap: break-word; - text-align: justify; - margin: 20px 0; - color: var(--default-text-color); + margin 20px 0 + color var(--default-text-color) + text-align justify + word-wrap break-word } .home-article-meta-info-container { - display: flex; - justify-content: space-between; - align-items: center; - font-size: 0.92rem; - color: var(--third-text-color); + display flex + align-items center + justify-content space-between + color var(--third-text-color) + font-size 0.92rem .home-article-meta-info { - letter-spacing: 0.5px; + letter-spacing 0.5px span { - margin-right: 10px; + margin-right 10px &:last-child { - margin-right: 0; + margin-right 0 } - ul, li { - display: inline; + ul + li { + display inline } } .home-article-category { +keep-mobile() { - display: none; + display none } } .home-article-tag { +keep-tablet() { - display: none; + display none } } } hr { - border: none; - flex: 1; - height: 1px; - background: var(--border-color); - margin: 0 10px; + flex 1 + height 1px + margin 0 10px + background var(--border-color) + border none } a { - color: var(--third-text-color); + color var(--third-text-color) &:hover { - color: var(--primary-color) + color var(--primary-color) } } } - - } } } diff --git a/source/css/layout/page.styl b/source/css/layout/page.styl index 58a7047..0ce91b7 100644 --- a/source/css/layout/page.styl +++ b/source/css/layout/page.styl @@ -1,200 +1,198 @@ -$temp-width = hexo-config('style.left_side_width'); -$page-aside-width = $temp-width ? convert($temp-width) : 260px; +$temp-width = hexo-config('style.left_side_width') +$page-aside-width = $temp-width ? convert($temp-width) : 260px .page-container { - position: relative; - box-sizing: border-box; - width: 100%; - height: auto; - background: var(--background-color); - transition-t("padding-left", "0", "0.3", "ease-out"); + position relative + box-sizing border-box + width 100% + height auto + background var(--background-color) + transition-t("padding-left", "0", "0.3", "ease-out") +keep-tablet() { - padding-left: 0 !important; + padding-left 0 !important } .page-main-content { - padding-top: $header-height; - position: relative; + position relative + padding-top $header-height &.home { .transparent-1 { - background: var(--header-transparent-background-1); + background var(--header-transparent-background-1) } .transparent-2 { - background: var(--header-transparent-background-2); + background var(--header-transparent-background-2) } } .header-shrink & { - padding-top: $header-shrink-height; + padding-top $header-shrink-height +keep-tablet() { - padding-top: $header-shrink-height * 0.9; + padding-top $header-shrink-height * 0.9 } +keep-mobile() { - padding-top: $header-shrink-height * 0.8; + padding-top $header-shrink-height * 0.8 } } +keep-tablet() { - padding-top: $header-height * 0.9; + padding-top $header-height * 0.9 } +keep-mobile() { - padding-top: $header-height * 0.8; + padding-top $header-height * 0.8 } .page-main-content-top { - position: fixed; - top: 0; - right: 0; - width: 100%; - height: $header-height; - z-index: $z-index-5; - box-sizing: border-box; - transition-t("transform, padding-left, height", "0, 0, 0", "0.3, 0.2, 0.2", "ease-out, linear, ease"); + position fixed + top 0 + right 0 + z-index $z-index-5 + box-sizing border-box + width 100% + height $header-height + transition-t("transform, padding-left, height", "0, 0, 0", "0.3, 0.2, 0.2", "ease-out, linear, ease") &.hide { - transform: translateY(-105%); + transform translateY(-105%) } .header-shrink & { - height: $header-shrink-height; + height $header-shrink-height +keep-tablet() { - height: $header-shrink-height * 0.9; + height $header-shrink-height * 0.9 } +keep-mobile() { - height: $header-shrink-height * 0.8; + height $header-shrink-height * 0.8 } } +keep-tablet() { - height: $header-height * 0.9; - padding-left: 0 !important; + height $header-height * 0.9 + padding-left 0 !important } +keep-mobile() { - height: $header-height * 0.8; + height $header-height * 0.8 } - } .page-main-content-middle { - box-sizing: border-box; - width: 100%; - display: flex; - justify-content: center; - padding: $component-spacing-value 0; + display flex + justify-content center + box-sizing border-box + width 100% + padding $component-spacing-value 0 +keep-tablet() { - padding: $component-spacing-value * 0.8 0; + padding $component-spacing-value * 0.8 0 } +keep-mobile() { - padding: $component-spacing-value * 0.6 0; + padding $component-spacing-value * 0.6 0 } .main-content { - position: relative; - box-sizing: border-box; - width: $main-content-width; - max-width: $content-max-width; - height: 100%; + position relative + box-sizing border-box + width $main-content-width + max-width $content-max-width + height 100% +keep-tablet() { - width: $main-content-width-tablet; + width $main-content-width-tablet } +keep-mobile() { - width: $main-content-width-mobile; + width $main-content-width-mobile } } } .page-main-content-bottom { - width: 100%; + width 100% } } .page-aside { - position: fixed; - top: 0; - bottom: 0; - left: - $page-aside-width; - width: $page-aside-width; - height: 100%; - z-index: $z-index-6; - overflow-y: auto; - padding: 20px; - box-sizing: border-box; - background: var(--background-color); + position fixed + top 0 + bottom 0 + left - $page-aside-width + z-index $z-index-6 + box-sizing border-box + width $page-aside-width + height 100% + padding 20px + overflow-y auto + background var(--background-color) - hover-style(false, 0, 0); + hover-style(false, 0, 0) - transition-t("left, transform", "0, 0", "0.3, 0.2", "ease-out, linear"); + transition-t("left, transform", "0, 0", "0.3, 0.2", "ease-out, linear") +keep-tablet() { - left: 0 !important; - display: none !important; + left 0 !important + display none !important } - } .post-tools { - position: fixed; - top: $header-height + $component-spacing-value; - right: $component-spacing-value; - transition-t("top", "0", "0.2", "ease"); + position fixed + top $header-height + $component-spacing-value + right $component-spacing-value + transition-t("top", "0", "0.2", "ease") .header-shrink & { - top: $header-shrink-height + $component-spacing-value; + top $header-shrink-height + $component-spacing-value +keep-tablet() { - top: $header-shrink-height * 0.9 + $component-spacing-value; + top $header-shrink-height * 0.9 + $component-spacing-value } +keep-mobile() { - top: $header-shrink-height * 0.8 + $component-spacing-value; + top $header-shrink-height * 0.8 + $component-spacing-value } } +keep-tablet() { - top: $header-height * 0.9 + $component-spacing-value; - right: 10px; - transform: scale(0.82); - transform-origin: right top; + top $header-height * 0.9 + $component-spacing-value + right 10px + transform scale(0.82) + transform-origin right top } +keep-mobile() { - top: $header-height * 0.8 + $component-spacing-value; - right: 5px; - transform: scale(0.72); + top $header-height * 0.8 + $component-spacing-value + right 5px + transform scale(0.72) } } .right-bottom-side-tools { - position: fixed; - bottom: 5%; - right: 0; + position fixed + right 0 + bottom 5% } } diff --git a/source/css/layout/tag-content.styl b/source/css/layout/tag-content.styl index 2dc15db..f4513c8 100644 --- a/source/css/layout/tag-content.styl +++ b/source/css/layout/tag-content.styl @@ -1,28 +1,28 @@ -$tag-name-font-size = 1.6rem; +$tag-name-font-size = 1.6rem .tag-container { - keep-container(false, 0, 0, 30px, 30px); + keep-container(false, 0, 0, 30px, 30px) .tag-name { - color: var(--second-text-color); - font-size: $tag-name-font-size; + margin-bottom $component-spacing-value + padding-bottom 20px + color var(--second-text-color) + + font-weight 600 + font-size $tag-name-font-size + border-bottom 1px solid var(--border-color) i { - color: var(--second-text-color); + color var(--second-text-color) } +keep-tablet() { - font-size: $tag-name-font-size * 0.9; + font-size $tag-name-font-size * 0.9 } +keep-mobile() { - font-size: $tag-name-font-size * 0.8; + font-size $tag-name-font-size * 0.8 } - - font-weight: 600; - padding-bottom: 20px; - margin-bottom: $component-spacing-value; - border-bottom: 1px solid var(--border-color); } } From 622f5d1b2b2e5b32b50ed3401969ffee106b23d1 Mon Sep 17 00:00:00 2001 From: XPoet Date: Fri, 30 Sep 2022 11:36:38 +0800 Subject: [PATCH 08/10] style: format stylus file code --- source/css/common/code-block/highlight.styl | 22 +++++++++---------- source/css/layout/_partial/archive-list.styl | 2 +- .../_partial/article-copyright-info.styl | 2 +- .../layout/_partial/article-meta-info.styl | 2 +- source/css/layout/_partial/header.styl | 2 +- source/css/layout/_partial/image-viewer.styl | 2 +- source/css/layout/_partial/local-search.styl | 4 +--- source/css/layout/_partial/page-template.styl | 2 +- source/css/layout/_partial/paginator.styl | 2 +- source/css/layout/_partial/post-tools.styl | 4 ++-- source/css/layout/_partial/side-tools.styl | 14 ++++++------ source/css/layout/_partial/tagcloud.styl | 4 ++-- source/css/layout/archive-content.styl | 2 +- source/css/layout/article-content.styl | 2 +- source/css/layout/category-content.styl | 2 +- source/css/layout/category-list.styl | 14 +++++++----- source/css/layout/tag-content.styl | 2 +- 17 files changed, 43 insertions(+), 41 deletions(-) diff --git a/source/css/common/code-block/highlight.styl b/source/css/common/code-block/highlight.styl index 17f4fbe..e3f5b2e 100644 --- a/source/css/common/code-block/highlight.styl +++ b/source/css/common/code-block/highlight.styl @@ -1,7 +1,7 @@ @import "code-theme.styl" $code-block { - margin 20px 0 + margin 1.5rem 0 padding 0 overflow auto color var(--highlight-foreground) @@ -17,17 +17,17 @@ code { } code { - padding 5px + padding 0.4rem color var(--code-foreground) font-size 0.96rem word-wrap break-word background var(--code-background) - border-radius 2px + border-radius 0.2rem } pre { @extend $code-block - padding 10px + padding 0.6rem code { padding 0 @@ -39,11 +39,11 @@ pre { .highlight { @extend $code-block - border-radius 1px + border-radius 0.1rem pre { margin 0 - padding 10px 0 + padding 0.6rem 0 border none } @@ -78,8 +78,8 @@ pre { } .gutter pre { - padding-right 10px - padding-left 10px + padding-right 0.6rem + padding-left 0.6rem color var(--highlight-gutter-color) text-align center background-color var(--highlight-gutter-bg-color) @@ -87,13 +87,13 @@ pre { .code pre { width 100% - padding-right 10px - padding-left 10px + padding-right 0.6rem + padding-left 0.6rem background-color var(--highlight-background) } .line { - height 20px + height 1.5rem color var(--default-text-color) .attr { diff --git a/source/css/layout/_partial/archive-list.styl b/source/css/layout/_partial/archive-list.styl index 15e7b1b..aef5654 100644 --- a/source/css/layout/_partial/archive-list.styl +++ b/source/css/layout/_partial/archive-list.styl @@ -73,8 +73,8 @@ $article-date-font-size = 1rem .article-date { float right - font-size $article-date-font-size color var(--default-text-color) + font-size $article-date-font-size } } } diff --git a/source/css/layout/_partial/article-copyright-info.styl b/source/css/layout/_partial/article-copyright-info.styl index e8aeca3..8211516 100644 --- a/source/css/layout/_partial/article-copyright-info.styl +++ b/source/css/layout/_partial/article-copyright-info.styl @@ -2,9 +2,9 @@ position relative box-sizing border-box width 100% + overflow hidden font-size 1rem background var(--second-background-color) - overflow hidden &::after { position absolute diff --git a/source/css/layout/_partial/article-meta-info.styl b/source/css/layout/_partial/article-meta-info.styl index e3f37c5..617fa8f 100644 --- a/source/css/layout/_partial/article-meta-info.styl +++ b/source/css/layout/_partial/article-meta-info.styl @@ -2,7 +2,7 @@ font-size 0.8rem .article-meta-item { - margin-right 10px + margin-right 0.6rem color var(--third-text-color) &:last-child { diff --git a/source/css/layout/_partial/header.styl b/source/css/layout/_partial/header.styl index 8a62843..921d015 100644 --- a/source/css/layout/_partial/header.styl +++ b/source/css/layout/_partial/header.styl @@ -108,7 +108,7 @@ $logo-image-box-width = 46px .menu-item { position relative float left - margin-left 30px + margin-left 2rem color var(--default-text-color) font-size 1rem cursor pointer diff --git a/source/css/layout/_partial/image-viewer.styl b/source/css/layout/_partial/image-viewer.styl index af70f3c..78294c5 100644 --- a/source/css/layout/_partial/image-viewer.styl +++ b/source/css/layout/_partial/image-viewer.styl @@ -19,7 +19,7 @@ visibility visible img { - padding 2px + padding 0.2rem background var(--background-color) transform scale(1) cursor zoom-out diff --git a/source/css/layout/_partial/local-search.styl b/source/css/layout/_partial/local-search.styl index ab90fa0..c0fc31b 100644 --- a/source/css/layout/_partial/local-search.styl +++ b/source/css/layout/_partial/local-search.styl @@ -85,9 +85,7 @@ $search-header-height = 3rem font-size $icon-size cursor pointer - &:hover .fas - far - fab { + &:hover { color var(--first-text-color) } } diff --git a/source/css/layout/_partial/page-template.styl b/source/css/layout/_partial/page-template.styl index 9274179..05de19d 100644 --- a/source/css/layout/_partial/page-template.styl +++ b/source/css/layout/_partial/page-template.styl @@ -5,7 +5,7 @@ $friend-link-item-border-radius = 6px .page-template-container { - keep-container(false, 0, 0, 30px, 30px) + keep-container(false, 0, 0, 2rem, 2rem) .page-template-content { color var(--default-text-color) diff --git a/source/css/layout/_partial/paginator.styl b/source/css/layout/_partial/paginator.styl index ea8a6f1..1b53825 100644 --- a/source/css/layout/_partial/paginator.styl +++ b/source/css/layout/_partial/paginator.styl @@ -1,5 +1,5 @@ .paginator { - margin-top 30px + margin-top 2rem font-size 1rem a.prev { diff --git a/source/css/layout/_partial/post-tools.styl b/source/css/layout/_partial/post-tools.styl index bac6dae..a89ef97 100644 --- a/source/css/layout/_partial/post-tools.styl +++ b/source/css/layout/_partial/post-tools.styl @@ -1,5 +1,5 @@ -$li-border-radius = 5px -$li-margin-bottom = 12px +$li-border-radius = 0.4rem +$li-margin-bottom = 0.8rem .post-tools-container { diff --git a/source/css/layout/_partial/side-tools.styl b/source/css/layout/_partial/side-tools.styl index 29cadce..cc867c2 100644 --- a/source/css/layout/_partial/side-tools.styl +++ b/source/css/layout/_partial/side-tools.styl @@ -1,6 +1,6 @@ -$tools-item-width = 32px +$tools-item-width = 2.2rem $tools-item-font-size = 1.1rem -$tools-item-border-radius = 1px +$tools-item-border-radius = 0.1rem .side-tools-container { @@ -9,13 +9,13 @@ $tools-item-border-radius = 1px .tools-item { width $tools-item-width height $tools-item-width - margin-bottom 3px + margin-bottom 0.2rem color var(--default-text-color) font-size $tools-item-font-size background var(--background-color) border-right none border-radius $tools-item-border-radius - box-shadow 1px 1px 3px var(--shadow-color) + box-shadow 0.1rem 0.1rem 0.2rem var(--shadow-color) cursor pointer i { @@ -25,7 +25,7 @@ $tools-item-border-radius = 1px &:hover { color var(--background-color) background var(--primary-color) - box-shadow 2px 2px 6px var(--shadow-color) + box-shadow 0.2rem 0.2rem 0.4rem var(--shadow-color) i { color var(--background-color) @@ -35,7 +35,7 @@ $tools-item-border-radius = 1px +keep-tablet() { width $tools-item-width * 0.9 height $tools-item-width * 0.9 - margin-bottom 2px + margin-bottom 0.2rem font-size $tools-item-font-size * 0.9 } @@ -49,7 +49,7 @@ $tools-item-border-radius = 1px &:hover { color var(--background-color) background var(--primary-color) - box-shadow 2px 2px 6px var(--shadow-color) + box-shadow 0.2rem 0.2rem 0.4rem var(--shadow-color) } } } diff --git a/source/css/layout/_partial/tagcloud.styl b/source/css/layout/_partial/tagcloud.styl index c2a88ea..7bb8db1 100644 --- a/source/css/layout/_partial/tagcloud.styl +++ b/source/css/layout/_partial/tagcloud.styl @@ -1,6 +1,6 @@ .tagcloud-container { - keep-container(false, 0, 0, 20px, 0) + keep-container(false, 0, 0, 1.5rem, 0) .tagcloud-content { @@ -9,7 +9,7 @@ a { display inline-block box-sizing border-box - padding 10px 8px + padding 0.7rem 0.5rem } } } diff --git a/source/css/layout/archive-content.styl b/source/css/layout/archive-content.styl index 9d8e4fa..ba60b26 100644 --- a/source/css/layout/archive-content.styl +++ b/source/css/layout/archive-content.styl @@ -1,5 +1,5 @@ .archive-container { - keep-container(false, 0, 0, 30px, 30px) + keep-container(false, 0, 0, 2rem, 2rem) } diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl index abbb8ff..b968620 100644 --- a/source/css/layout/article-content.styl +++ b/source/css/layout/article-content.styl @@ -5,7 +5,7 @@ $article-title-font-size = 1.6rem .article-content-container { - keep-container(false, 0, 0, 30px, 30px) + keep-container(false, 0, 0, 2rem, 2rem) +keep-mobile() { padding 1.2rem 0.2rem diff --git a/source/css/layout/category-content.styl b/source/css/layout/category-content.styl index 6906afe..d443496 100644 --- a/source/css/layout/category-content.styl +++ b/source/css/layout/category-content.styl @@ -2,7 +2,7 @@ $category-name-font-size = 1.6rem .category-container { - keep-container(false, 0, 0, 30px, 30px) + keep-container(false, 0, 0, 2rem, 2rem) .category-name { margin-bottom $component-spacing-value diff --git a/source/css/layout/category-list.styl b/source/css/layout/category-list.styl index 5c5b2e1..cfd6f89 100644 --- a/source/css/layout/category-list.styl +++ b/source/css/layout/category-list.styl @@ -1,13 +1,17 @@ .category-list-container { - keep-container(false, 0, 0, 30px, 0) + keep-container(false, 0, 0, 2rem, 0) .category-list-content { .all-category-list { + & > .all-category-list-item > .all-category-list-link { + font-size 1.1rem + } + li.all-category-list-item { - margin-bottom 15px + margin-bottom 1rem font-size 1rem &:last-child { @@ -30,9 +34,9 @@ ul.all-category-list-child { - margin-top 15px + margin-top 1rem - margin-left 10px + margin-left 0.9rem li { @@ -40,7 +44,7 @@ content '- ' } - margin-bottom 10px + margin-bottom 0.9rem &:last-child { margin-bottom 0 diff --git a/source/css/layout/tag-content.styl b/source/css/layout/tag-content.styl index f4513c8..3e793d8 100644 --- a/source/css/layout/tag-content.styl +++ b/source/css/layout/tag-content.styl @@ -2,7 +2,7 @@ $tag-name-font-size = 1.6rem .tag-container { - keep-container(false, 0, 0, 30px, 30px) + keep-container(false, 0, 0, 2rem, 2rem) .tag-name { margin-bottom $component-spacing-value From 300b709c529ef250685047598646fe0122adb074 Mon Sep 17 00:00:00 2001 From: XPoet Date: Fri, 30 Sep 2022 11:40:30 +0800 Subject: [PATCH 09/10] build(deps): use prettier to format js code --- .prettierrc | 10 + package.json | 4 +- scripts/filters/lazyload-handle.js | 8 +- scripts/filters/link-handle.js | 52 ++--- scripts/helpers/export-config.js | 34 ++- scripts/helpers/helper.js | 85 ++++--- scripts/use-source-data.js | 17 +- source/js/back2top.js | 43 ++-- source/js/code-block-tools.js | 140 ++++++------ source/js/dark-light-toggle.js | 52 +++-- source/js/header-shrink.js | 40 ++-- source/js/lazyload.js | 43 ++-- source/js/left-side-toggle.js | 37 ++-- source/js/local-search.js | 333 +++++++++++++++------------- source/js/main.js | 39 ++-- source/js/toc.js | 121 +++++----- source/js/utils.js | 345 ++++++++++++++--------------- 17 files changed, 712 insertions(+), 691 deletions(-) create mode 100644 .prettierrc diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..81467c5 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,10 @@ +{ + "useTabs": false, + "endOfLine": "auto", + "tabWidth": 2, + "printWidth": 100, + "singleQuote": true, + "trailingComma": "none", + "bracketSpacing": true, + "semi": false +} diff --git a/package.json b/package.json index a16d060..6fe16ad 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,8 @@ "description": "A simple and elegant theme for Hexo.", "scripts": { "npm:publish": "npm publish", - "lint:style": "stylelint --fix source/css/**/**/**/*.styl", + "format": "prettier --write ./source/js/*.js ./scripts", + "lint:style": "stylelint --fix ./source/css", "git:push": "git push --tag && git push -u origin dev", "git:add": "npm run lint:style && git add ." }, @@ -29,6 +30,7 @@ }, "homepage": "https://github.com/XPoet/hexo-theme-keep#readme", "devDependencies": { + "prettier": "^2.7.1", "stylelint": "^14.13.0", "stylelint-config-rational-order": "^0.1.2", "stylelint-stylus": "^0.17.0" diff --git a/scripts/filters/lazyload-handle.js b/scripts/filters/lazyload-handle.js index 2e6c9c1..2dd4af2 100644 --- a/scripts/filters/lazyload-handle.js +++ b/scripts/filters/lazyload-handle.js @@ -2,14 +2,14 @@ hexo.extend.filter.register( 'after_post_render', function (data) { - const theme = hexo.theme.config; - if (!theme.lazyload || !theme.lazyload.enable) return; + const theme = hexo.theme.config + if (!theme.lazyload || !theme.lazyload.enable) return data.content = data.content.replace( // Match 'img' tags width the src attribute. /]*)src="([^"]*)"([^>\/]*)\/?\s*>/gim, function (match, attrBegin, src, attrEnd) { // Exit if the src doesn't exists. - if (!src) return match; + if (!src) return match return `]*)href="([^"]*)"([^>]*)>([^<]*)<\/a>/gim - data.content = data.content.replace(regPureATag, function ( - match, - attrBegin, - href, - attrEnd, - html - ) { - // Exit if the href attribute doesn't exists. - if (!href) return match; + data.content = data.content.replace( + regPureATag, + function (match, attrBegin, href, attrEnd, html) { + // Exit if the href attribute doesn't exists. + if (!href) return match - let link = ''; - try { - link = new URL(href); - } catch (e) { - // Invalid url, e.g. Anchor link. - return match; + let link = '' + try { + link = new URL(href) + } catch (e) { + // Invalid url, e.g. Anchor link. + return match + } + + // Exit if the url has same host with `config.url`, which means isn't an external link. + if (!link.protocol || link.hostname === siteHost) return match + + return `${html}` } - - // Exit if the url has same host with `config.url`, which means isn't an external link. - if (!link.protocol || link.hostname === siteHost) return match; - - return ( - `${html}` - ) - }) + ) }, 0 ) diff --git a/scripts/helpers/export-config.js b/scripts/helpers/export-config.js index 7ad4aad..eb1e47b 100644 --- a/scripts/helpers/export-config.js +++ b/scripts/helpers/export-config.js @@ -1,40 +1,38 @@ /* global hexo */ -'use strict'; +'use strict' -const url = require('url'); -const fs = require('fs'); -const path = require('path'); -const yaml = require('js-yaml'); +const url = require('url') +const fs = require('fs') +const path = require('path') +const yaml = require('js-yaml') /** * Export theme config to js */ hexo.extend.helper.register('export_config', function () { - - const { config, theme } = this; + const { config, theme } = this // ------------------------ export language to js ------------------------ - const languageDir = path.join(__dirname, '../../languages'); - let file = fs.readdirSync(languageDir).find(v => v === `${config.language}.yml`); - file = languageDir + '/' + (file ? file : 'en.yml'); - let languageContent = fs.readFileSync(file, 'utf8'); + const languageDir = path.join(__dirname, '../../languages') + let file = fs.readdirSync(languageDir).find((v) => v === `${config.language}.yml`) + file = languageDir + '/' + (file ? file : 'en.yml') + let languageContent = fs.readFileSync(file, 'utf8') try { - languageContent = yaml.load(languageContent); + languageContent = yaml.load(languageContent) } catch (err) { - console.log(err); + console.log(err) } // ----------------------------------------------------------------------- - let hexo_config = { hostname: url.parse(config.url).hostname || config.url, root: config.root, language: config.language - }; + } if (config.search) { - hexo_config.path = config.search.path; + hexo_config.path = config.search.path } let theme_config = { @@ -55,5 +53,5 @@ hexo.extend.helper.register('export_config', function () { KEEP.theme_config = ${JSON.stringify(theme_config)}; KEEP.language_ago = ${JSON.stringify(languageContent['ago'])}; KEEP.language_code_block = ${JSON.stringify(languageContent['code_block'])}; - `; -}); + ` +}) diff --git a/scripts/helpers/helper.js b/scripts/helpers/helper.js index 3f91650..8c26c39 100644 --- a/scripts/helpers/helper.js +++ b/scripts/helpers/helper.js @@ -2,103 +2,102 @@ 'use strict' -const url = require('url'); +const url = require('url') hexo.extend.helper.register('isInHomePaging', function (pagePath, route) { if (pagePath.length > 5 && route === '/') { - return pagePath.slice(0, 5) === 'page/'; + return pagePath.slice(0, 5) === 'page/' } else { - return false; + return false } -}); +}) hexo.extend.helper.register('createNewArchivePosts', function (posts) { - const postList = [], postYearList = []; - posts.forEach(post => postYearList.push(post.date.year())); - Array.from(new Set(postYearList)).forEach(year => { + const postList = [], + postYearList = [] + posts.forEach((post) => postYearList.push(post.date.year())) + Array.from(new Set(postYearList)).forEach((year) => { postList.push({ year: year, postList: [] }) - }); + }) postList.sort((a, b) => b.year - a.year) - postList.forEach(item => { - posts.forEach(post => item.year === post.date.year() && item.postList.push(post)) - }); - postList.forEach(item => item.postList.sort((a, b) => b.date.unix() - a.date.unix())); - return postList; -}); + postList.forEach((item) => { + posts.forEach((post) => item.year === post.date.year() && item.postList.push(post)) + }) + postList.forEach((item) => item.postList.sort((a, b) => b.date.unix() - a.date.unix())) + return postList +}) hexo.extend.helper.register('getAuthorLabel', function (postCount, isAuto, labelList) { - - let level = Math.floor(Math.log2(postCount)); - level = level < 2 ? 1 : level - 1; + let level = Math.floor(Math.log2(postCount)) + level = level < 2 ? 1 : level - 1 if (isAuto === false && Array.isArray(labelList) && labelList.length > 0) { - return level > labelList.length ? labelList[labelList.length - 1] : labelList[level - 1]; + return level > labelList.length ? labelList[labelList.length - 1] : labelList[level - 1] } else { - return `Lv${level}`; + return `Lv${level}` } - -}); +}) hexo.extend.helper.register('getPostUrl', function (rootUrl, path) { if (rootUrl) { - let { href } = url.parse(rootUrl); + let { href } = url.parse(rootUrl) if (href.substr(href.length - 1, 1) !== '/') { - href = href + '/'; + href = href + '/' } - return href + path; + return href + path } else { - return path; + return path } -}); +}) const getSourceCdnUrl = (tyle, themeConfig, path) => { - const version = require('../../package.json').version; - const { provider = 'jsdelivr' } = themeConfig?.cdn; + const version = require('../../package.json').version + const { provider = 'jsdelivr' } = themeConfig?.cdn - let urlPrefix = ''; + let urlPrefix = '' switch (provider.toLocaleLowerCase()) { case 'jsdelivr': urlPrefix = '//cdn.jsdelivr.net/npm/hexo-theme-keep' if (tyle === 'js') { - return ``; + return `` } else { - return ``; + return `` } case 'unpkg': urlPrefix = '//unpkg.com/hexo-theme-keep' if (tyle === 'js') { - return ``; + return `` } else { - return ``; + return `` } } } hexo.extend.helper.register('__js', function (path) { const { enable } = this.theme.cdn - const _js = hexo.extend.helper.get('js').bind(hexo); + const _js = hexo.extend.helper.get('js').bind(hexo) const cdnPathHandle = (pa) => { - return enable ? getSourceCdnUrl('js', this.theme, pa) : _js(pa); + return enable ? getSourceCdnUrl('js', this.theme, pa) : _js(pa) } - let t = ``; + let t = `` if (Array.isArray(path)) { for (const p of path) { - t += cdnPathHandle(p); + t += cdnPathHandle(p) } } else { - t = cdnPathHandle(path); + t = cdnPathHandle(path) } - return t; -}); + return t +}) hexo.extend.helper.register('__css', function (path) { const { enable } = this.theme.cdn - const _css = hexo.extend.helper.get('css').bind(hexo); - return enable ? getSourceCdnUrl('css', this.theme, path) : _css(path); -}); + const _css = hexo.extend.helper.get('css').bind(hexo) + return enable ? getSourceCdnUrl('css', this.theme, path) : _css(path) +}) diff --git a/scripts/use-source-data.js b/scripts/use-source-data.js index d617596..9e95b58 100644 --- a/scripts/use-source-data.js +++ b/scripts/use-source-data.js @@ -1,26 +1,21 @@ hexo.on('generateBefore', function () { - if (hexo.locals.get) { - const data = hexo.locals.get('data'); + const data = hexo.locals.get('data') if (data) { - // theme config file handle if (data._config) { - hexo.theme.config = data._config; - + hexo.theme.config = data._config } else if (data.keep) { - hexo.theme.config = data.keep; - + hexo.theme.config = data.keep } else if (data._keep) { - hexo.theme.config = data._keep; + hexo.theme.config = data._keep } // friends link file handle if (data.links || data.link) { - hexo.theme.config.links = (data.links || data.link); + hexo.theme.config.links = data.links || data.link } - } } -}); +}) diff --git a/source/js/back2top.js b/source/js/back2top.js index 0a71a6f..0a55150 100644 --- a/source/js/back2top.js +++ b/source/js/back2top.js @@ -1,55 +1,52 @@ /* global KEEP */ KEEP.initBack2Top = () => { - KEEP.utils = { - ...KEEP.utils, back2BottomButton_dom: document.querySelector('.tool-scroll-to-bottom'), back2top() { const scrollTopTimer = setInterval(function () { - let top = document.body.scrollTop || document.documentElement.scrollTop; - let speed = top / 2; + let top = document.body.scrollTop || document.documentElement.scrollTop + let speed = top / 2 if (document.body.scrollTop !== 0) { - document.body.scrollTop -= speed; + document.body.scrollTop -= speed } else { - document.documentElement.scrollTop -= speed; + document.documentElement.scrollTop -= speed } if (top === 0) { - clearInterval(scrollTopTimer); + clearInterval(scrollTopTimer) } - }, 50); + }, 50) }, back2Bottom() { - let scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight; - let scrollTop = document.body.scrollTop || document.documentElement.scrollTop; + let scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight + let scrollTop = document.body.scrollTop || document.documentElement.scrollTop const scrollBottomTimer = setInterval(function () { - if (!scrollTop) scrollTop = 10; - scrollTop = Math.floor(scrollTop + scrollTop / 2); - window.scrollTo(0, scrollTop); + if (!scrollTop) scrollTop = 10 + scrollTop = Math.floor(scrollTop + scrollTop / 2) + window.scrollTo(0, scrollTop) if (scrollTop >= scrollHeight) { - clearInterval(scrollBottomTimer); + clearInterval(scrollBottomTimer) } - }, 50); + }, 50) }, initBack2Top() { this.back2TopButton_dom.addEventListener('click', () => { - this.back2top(); - }); + this.back2top() + }) }, initBack2Bottom() { this.back2BottomButton_dom.addEventListener('click', () => { - this.back2Bottom(); - }); - }, + this.back2Bottom() + }) + } } - KEEP.utils.initBack2Top(); - KEEP.utils.initBack2Bottom(); - + KEEP.utils.initBack2Top() + KEEP.utils.initBack2Bottom() } diff --git a/source/js/code-block-tools.js b/source/js/code-block-tools.js index e397066..6199979 100644 --- a/source/js/code-block-tools.js +++ b/source/js/code-block-tools.js @@ -2,25 +2,31 @@ KEEP.initCodeBlockTools = () => { HTMLElement.prototype.wrap = function (wrapper) { - this.parentNode.insertBefore(wrapper, this); - this.parentNode.removeChild(this); - wrapper.appendChild(this); - }; + this.parentNode.insertBefore(wrapper, this) + this.parentNode.removeChild(this) + wrapper.appendChild(this) + } - const { style: codeCopyStyle } = KEEP.theme_config?.code_copy; - const { style: codeBlockStyle } = KEEP.theme_config?.code_block_tools; - const isMac = (codeBlockStyle || codeCopyStyle || 'default') === 'mac'; - const foldedIconClassName = isMac ? 'fas fa-chevron-left' : 'fas fa-chevron-right'; - const { copy: copyLang, copied: copiedLang, fold: foldLang, folded: foldedLang } = KEEP.language_code_block; + const { style: codeCopyStyle } = KEEP.theme_config?.code_copy + const { style: codeBlockStyle } = KEEP.theme_config?.code_block_tools + const isMac = (codeBlockStyle || codeCopyStyle || 'default') === 'mac' + const foldedIconClassName = isMac ? 'fas fa-chevron-left' : 'fas fa-chevron-right' + const { + copy: copyLang, + copied: copiedLang, + fold: foldLang, + folded: foldedLang + } = KEEP.language_code_block const foldDom = `` - document.querySelectorAll('figure.highlight').forEach(element => { - let codeLang = element.classList.length ? element.classList[1].toUpperCase() : ''; - if (codeLang === 'PLAINTEXT') { codeLang = '' } - const highlightContainer = document.createElement('div'); - highlightContainer.classList.add('highlight-container'); - element.wrap(highlightContainer); - + document.querySelectorAll('figure.highlight').forEach((element) => { + let codeLang = element.classList.length ? element.classList[1].toUpperCase() : '' + if (codeLang === 'PLAINTEXT') { + codeLang = '' + } + const highlightContainer = document.createElement('div') + highlightContainer.classList.add('highlight-container') + element.wrap(highlightContainer) const codeLangDom = `${codeLang ? '' + codeLang + '' : ''}` @@ -30,72 +36,74 @@ KEEP.initCodeBlockTools = () => { ${isMac ? foldDom + codeLangDom : '' + foldDom + codeLangDom + ''} ` - ); - const codeToolsBox = element.parentNode.querySelector('.code-tools-box'); - const copyDom = codeToolsBox.querySelector('.copy'); - const targetFoldDom = codeToolsBox.querySelector('.fold'); + ) + const codeToolsBox = element.parentNode.querySelector('.code-tools-box') + const copyDom = codeToolsBox.querySelector('.copy') + const targetFoldDom = codeToolsBox.querySelector('.fold') - copyDom.addEventListener('click', event => { - const target = event.currentTarget; - const code = [...element.querySelectorAll('.code .line')].map(line => line.innerText).join('\n'); - const tta = document.createElement('textarea'); - tta.style.top = window.scrollY + 'px'; - tta.style.position = 'absolute'; - tta.style.opacity = '0'; - tta.readOnly = true; - tta.value = code; - document.body.append(tta); - const selection = document.getSelection(); - const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false; - tta.select(); - tta.setSelectionRange(0, code.length); - tta.readOnly = false; - const result = document.execCommand('copy'); + copyDom.addEventListener('click', (event) => { + const target = event.currentTarget + const code = [...element.querySelectorAll('.code .line')] + .map((line) => line.innerText) + .join('\n') + const tta = document.createElement('textarea') + tta.style.top = window.scrollY + 'px' + tta.style.position = 'absolute' + tta.style.opacity = '0' + tta.readOnly = true + tta.value = code + document.body.append(tta) + const selection = document.getSelection() + const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false + tta.select() + tta.setSelectionRange(0, code.length) + tta.readOnly = false + const result = document.execCommand('copy') - const copyIconDom = target.querySelector('i'); - const copyTooltipDom = codeToolsBox.querySelector('.copy .tooltip-content'); + const copyIconDom = target.querySelector('i') + const copyTooltipDom = codeToolsBox.querySelector('.copy .tooltip-content') if (result) { - copyIconDom.className = 'fas fa-check'; - copyTooltipDom && (copyTooltipDom.innerHTML = copiedLang); + copyIconDom.className = 'fas fa-check' + copyTooltipDom && (copyTooltipDom.innerHTML = copiedLang) } else { - copyIconDom.className = 'fas fa-times'; + copyIconDom.className = 'fas fa-times' } - tta.blur(); - target.blur(); + tta.blur() + target.blur() if (selected) { - selection.removeAllRanges(); - selection.addRange(selected); + selection.removeAllRanges() + selection.addRange(selected) } - document.body.removeChild(tta); - }); + document.body.removeChild(tta) + }) - copyDom.addEventListener('mouseleave', event => { + copyDom.addEventListener('mouseleave', (event) => { setTimeout(() => { - event.target.querySelector('i').className = 'fas fa-copy'; - const copyTooltipDom = codeToolsBox.querySelector('.copy .tooltip-content'); - copyTooltipDom && (copyTooltipDom.innerHTML = copyLang); - }, 500); - }); + event.target.querySelector('i').className = 'fas fa-copy' + const copyTooltipDom = codeToolsBox.querySelector('.copy .tooltip-content') + copyTooltipDom && (copyTooltipDom.innerHTML = copyLang) + }, 500) + }) let isFold = false - targetFoldDom.addEventListener('click', event => { - const target = event.currentTarget; - const icon = target.querySelector('i'); - const foldTooltipDom = codeToolsBox.querySelector('.fold .tooltip-content'); - isFold = !isFold; + targetFoldDom.addEventListener('click', (event) => { + const target = event.currentTarget + const icon = target.querySelector('i') + const foldTooltipDom = codeToolsBox.querySelector('.fold .tooltip-content') + isFold = !isFold if (isFold) { - icon.className = foldedIconClassName; - element.classList.add('folded'); - codeToolsBox.classList.add('folded'); + icon.className = foldedIconClassName + element.classList.add('folded') + codeToolsBox.classList.add('folded') foldTooltipDom && (foldTooltipDom.innerHTML = foldedLang) } else { - icon.className = 'fas fa-chevron-down'; - element.classList.remove('folded'); - codeToolsBox.classList.remove('folded'); + icon.className = 'fas fa-chevron-down' + element.classList.remove('folded') + codeToolsBox.classList.remove('folded') foldTooltipDom && (foldTooltipDom.innerHTML = foldLang) } - }); - }); + }) + }) } diff --git a/source/js/dark-light-toggle.js b/source/js/dark-light-toggle.js index 0cb5f5b..694113d 100644 --- a/source/js/dark-light-toggle.js +++ b/source/js/dark-light-toggle.js @@ -1,58 +1,56 @@ /* global KEEP */ KEEP.initModeToggle = () => { - KEEP.utils.modeToggle = { - modeToggleButton_dom: document.querySelector('.tool-dark-light-toggle'), iconDom: document.querySelector('.tool-dark-light-toggle i'), enableLightMode() { - document.body.classList.remove('dark-mode'); - document.body.classList.add('light-mode'); - this.iconDom.className = 'fas fa-moon'; - KEEP.styleStatus.isDark = false; - KEEP.setStyleStatus(); + document.body.classList.remove('dark-mode') + document.body.classList.add('light-mode') + this.iconDom.className = 'fas fa-moon' + KEEP.styleStatus.isDark = false + KEEP.setStyleStatus() }, enableDarkMode() { - document.body.classList.add('dark-mode'); - document.body.classList.remove('light-mode'); - this.iconDom.className = 'fas fa-sun'; - KEEP.styleStatus.isDark = true; - KEEP.setStyleStatus(); + document.body.classList.add('dark-mode') + document.body.classList.remove('light-mode') + this.iconDom.className = 'fas fa-sun' + KEEP.styleStatus.isDark = true + KEEP.setStyleStatus() }, isDarkPrefersColorScheme() { - return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)'); + return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)') }, initModeStatus() { - const styleStatus = KEEP.getStyleStatus(); + const styleStatus = KEEP.getStyleStatus() if (styleStatus) { - styleStatus.isDark ? this.enableDarkMode() : this.enableLightMode(); + styleStatus.isDark ? this.enableDarkMode() : this.enableLightMode() } else { - this.isDarkPrefersColorScheme().matches ? this.enableDarkMode() : this.enableLightMode(); + this.isDarkPrefersColorScheme().matches ? this.enableDarkMode() : this.enableLightMode() } }, initModeToggleButton() { this.modeToggleButton_dom.addEventListener('click', () => { - const isDark = document.body.classList.contains('dark-mode'); - isDark ? this.enableLightMode() : this.enableDarkMode(); - }); + const isDark = document.body.classList.contains('dark-mode') + isDark ? this.enableLightMode() : this.enableDarkMode() + }) }, initModeAutoTrigger() { - const isDarkMode = this.isDarkPrefersColorScheme(); - isDarkMode.addEventListener('change', e => { - e.matches ? this.enableDarkMode() : this.enableLightMode(); - }); + const isDarkMode = this.isDarkPrefersColorScheme() + isDarkMode.addEventListener('change', (e) => { + e.matches ? this.enableDarkMode() : this.enableLightMode() + }) } } - KEEP.utils.modeToggle.initModeStatus(); - KEEP.utils.modeToggle.initModeToggleButton(); - KEEP.utils.modeToggle.initModeAutoTrigger(); -}; + KEEP.utils.modeToggle.initModeStatus() + KEEP.utils.modeToggle.initModeToggleButton() + KEEP.utils.modeToggle.initModeAutoTrigger() +} diff --git a/source/js/header-shrink.js b/source/js/header-shrink.js index a4c9c45..ae2938d 100644 --- a/source/js/header-shrink.js +++ b/source/js/header-shrink.js @@ -6,43 +6,45 @@ KEEP.initHeaderShrink = () => { isHeaderShrink: false, init() { - this.headerHeight = this.headerDom.getBoundingClientRect().height; + this.headerHeight = this.headerDom.getBoundingClientRect().height }, headerShrink() { - const scrollTop = document.body.scrollTop || document.documentElement.scrollTop; - const headerWrapperDom = document.querySelector('.header-wrapper'); - const { enable, header_transparent } = KEEP.theme_config.style.first_screen; + const scrollTop = document.body.scrollTop || document.documentElement.scrollTop + const headerWrapperDom = document.querySelector('.header-wrapper') + const { enable, header_transparent } = KEEP.theme_config.style.first_screen if (!this.isHeaderShrink && scrollTop > this.headerHeight) { - this.isHeaderShrink = true; - document.body.classList.add('header-shrink'); + this.isHeaderShrink = true + document.body.classList.add('header-shrink') if (enable === true && header_transparent === true) { - headerWrapperDom.classList.add('transparent-2'); + headerWrapperDom.classList.add('transparent-2') } } else if (this.isHeaderShrink && scrollTop <= this.headerHeight) { - this.isHeaderShrink = false; - document.body.classList.remove('header-shrink'); + this.isHeaderShrink = false + document.body.classList.remove('header-shrink') if (enable === true && header_transparent === true) { - headerWrapperDom.classList.remove('transparent-2'); + headerWrapperDom.classList.remove('transparent-2') } } }, toggleHeaderDrawerShow() { - const domList = [document.querySelector('.window-mask'), document.querySelector('.menu-bar')]; + const domList = [document.querySelector('.window-mask'), document.querySelector('.menu-bar')] if (KEEP.theme_config.pjax.enable === true) { - domList.push(...document.querySelectorAll('.header-drawer .drawer-menu-list .drawer-menu-item')); + domList.push( + ...document.querySelectorAll('.header-drawer .drawer-menu-list .drawer-menu-item') + ) } - domList.forEach(v => { + domList.forEach((v) => { v.addEventListener('click', () => { - document.body.classList.toggle('header-drawer-show'); - }); - }); + document.body.classList.toggle('header-drawer-show') + }) + }) } } - KEEP.utils.headerShrink.init(); - KEEP.utils.headerShrink.headerShrink(); - KEEP.utils.headerShrink.toggleHeaderDrawerShow(); + KEEP.utils.headerShrink.init() + KEEP.utils.headerShrink.headerShrink() + KEEP.utils.headerShrink.toggleHeaderDrawerShow() } diff --git a/source/js/lazyload.js b/source/js/lazyload.js index e75b95b..8b7cddf 100644 --- a/source/js/lazyload.js +++ b/source/js/lazyload.js @@ -1,43 +1,42 @@ /* global KEEP */ KEEP.initLazyLoad = () => { - const imgs = document.querySelectorAll('img'); - let now = Date.now(); - let needLoad = true; + const imgs = document.querySelectorAll('img') + let now = Date.now() + let needLoad = true function lazyload(imgs) { - now = Date.now(); - needLoad = Array.from(imgs).some(i => i.hasAttribute('lazyload')); + now = Date.now() + needLoad = Array.from(imgs).some((i) => i.hasAttribute('lazyload')) - const h = window.innerHeight; - const s = document.documentElement.scrollTop || document.body.scrollTop; + const h = window.innerHeight + const s = document.documentElement.scrollTop || document.body.scrollTop - imgs.forEach(img => { + imgs.forEach((img) => { if (img.hasAttribute('lazyload') && !img.hasAttribute('loading')) { - - if ((h + s) > img.offsetTop) { - img.setAttribute('loading', true); + if (h + s > img.offsetTop) { + img.setAttribute('loading', true) const loadImageTimeout = setTimeout(() => { - const temp = new Image(); - const src = img.getAttribute('data-src'); - temp.src = src; + const temp = new Image() + const src = img.getAttribute('data-src') + temp.src = src temp.onload = () => { - img.src = src; - img.removeAttribute('lazyload'); - img.removeAttribute('loading'); - clearTimeout(loadImageTimeout); + img.src = src + img.removeAttribute('lazyload') + img.removeAttribute('loading') + clearTimeout(loadImageTimeout) } - }, 500); + }, 500) } } - }); + }) } - lazyload(imgs); + lazyload(imgs) window.onscroll = () => { if (Date.now() - now > 50 && needLoad) { - lazyload(imgs); + lazyload(imgs) } } } diff --git a/source/js/left-side-toggle.js b/source/js/left-side-toggle.js index e6c34e5..d83e217 100644 --- a/source/js/left-side-toggle.js +++ b/source/js/left-side-toggle.js @@ -2,7 +2,6 @@ function initLeftSideToggle() { KEEP.utils.leftSideToggle = { - toggleBar: document.querySelector('.page-aside-toggle'), pageTopDom: document.querySelector('.page-main-content-top'), containerDom: document.querySelector('.page-container'), @@ -12,33 +11,35 @@ function initLeftSideToggle() { isOpenPageAside: false, initToggleBarButton() { - this.toggleBar && this.toggleBar.addEventListener('click', () => { - this.isOpenPageAside = !this.isOpenPageAside; - KEEP.styleStatus.isOpenPageAside = this.isOpenPageAside; - KEEP.setStyleStatus(); - this.changePageLayoutWhenOpenToggle(this.isOpenPageAside); - }); + this.toggleBar && + this.toggleBar.addEventListener('click', () => { + this.isOpenPageAside = !this.isOpenPageAside + KEEP.styleStatus.isOpenPageAside = this.isOpenPageAside + KEEP.setStyleStatus() + this.changePageLayoutWhenOpenToggle(this.isOpenPageAside) + }) }, changePageLayoutWhenOpenToggle(isOpen) { - this.toggleBarIcon && (this.toggleBarIcon.className = isOpen ? 'fas fa-outdent' : 'fas fa-indent'); - const pageAsideWidth = KEEP.theme_config.style.left_side_width || '260px'; - this.containerDom.style.paddingLeft = isOpen ? pageAsideWidth : '0'; - this.pageTopDom.style.paddingLeft = isOpen ? pageAsideWidth : '0'; - this.leftAsideDom.style.left = isOpen ? '0' : `-${pageAsideWidth}`; + this.toggleBarIcon && + (this.toggleBarIcon.className = isOpen ? 'fas fa-outdent' : 'fas fa-indent') + const pageAsideWidth = KEEP.theme_config.style.left_side_width || '260px' + this.containerDom.style.paddingLeft = isOpen ? pageAsideWidth : '0' + this.pageTopDom.style.paddingLeft = isOpen ? pageAsideWidth : '0' + this.leftAsideDom.style.left = isOpen ? '0' : `-${pageAsideWidth}` }, pageAsideHandleOfTOC(isOpen) { - this.toggleBar.style.display = 'flex'; - this.isOpenPageAside = isOpen; - this.changePageLayoutWhenOpenToggle(isOpen); + this.toggleBar.style.display = 'flex' + this.isOpenPageAside = isOpen + this.changePageLayoutWhenOpenToggle(isOpen) } } - KEEP.utils.leftSideToggle.initToggleBarButton(); + KEEP.utils.leftSideToggle.initToggleBarButton() } if (KEEP.theme_config.pjax.enable === true && KEEP.utils) { - initLeftSideToggle(); + initLeftSideToggle() } else { - window.addEventListener('DOMContentLoaded', initLeftSideToggle); + window.addEventListener('DOMContentLoaded', initLeftSideToggle) } diff --git a/source/js/local-search.js b/source/js/local-search.js index 620174e..f7e43e5 100644 --- a/source/js/local-search.js +++ b/source/js/local-search.js @@ -1,68 +1,69 @@ -KEEP.initLocalSearch = () => { +/* global KEEP */ +KEEP.initLocalSearch = () => { // Search DB path - let searchPath = KEEP.hexo_config.path; + let searchPath = KEEP.hexo_config.path if (!searchPath) { // Search DB path - console.warn('`hexo-generator-searchdb` plugin is not installed!'); - return; + console.warn('`hexo-generator-searchdb` plugin is not installed!') + return } // Popup Window - let isfetched = false; - let datas; - let isXml = true; + let isfetched = false + let datas + let isXml = true if (searchPath.length === 0) { - searchPath = 'search.xml'; + searchPath = 'search.xml' } else if (searchPath.endsWith('json')) { - isXml = false; + isXml = false } - const searchInputDom = document.querySelector('.search-input'); - const resultContent = document.getElementById('search-result'); + const searchInputDom = document.querySelector('.search-input') + const resultContent = document.getElementById('search-result') const getIndexByWord = (word, text, caseSensitive) => { - let wordLen = word.length; - if (wordLen === 0) return []; - let startPosition = 0; - let position = []; - let index = []; + let wordLen = word.length + if (wordLen === 0) return [] + let startPosition = 0 + let position = [] + let index = [] if (!caseSensitive) { - text = text.toLowerCase(); - word = word.toLowerCase(); + text = text.toLowerCase() + word = word.toLowerCase() } while ((position = text.indexOf(word, startPosition)) > -1) { - index.push({position, word}); - startPosition = position + wordLen; + index.push({ position, word }) + startPosition = position + wordLen } - return index; - }; + return index + } // Merge hits into slices const mergeIntoSlice = (start, end, index, searchText) => { - let item = index[index.length - 1]; - let {position, word} = item; - let hits = []; - let searchTextCountInSlice = 0; + let item = index[index.length - 1] + let { position, word } = item + let hits = [] + let searchTextCountInSlice = 0 while (position + word.length <= end && index.length !== 0) { if (word === searchText) { - searchTextCountInSlice++; + searchTextCountInSlice++ } hits.push({ position, length: word.length - }); - let wordEnd = position + word.length; + }) + let wordEnd = position + word.length // Move to next position of hit - index.pop(); + index.pop() while (index.length !== 0) { - item = index[index.length - 1]; - position = item.position; - word = item.word; + item = index[index.length - 1] + position = item.position + word = item.word if (wordEnd > position) { - index.pop(); + index.pop() } else { - break; + break } } } @@ -71,212 +72,228 @@ KEEP.initLocalSearch = () => { start, end, searchTextCount: searchTextCountInSlice - }; - }; + } + } // Highlight title and content const highlightKeyword = (text, slice) => { - let result = ''; - let prevEnd = slice.start; - slice.hits.forEach(hit => { - result += text.substring(prevEnd, hit.position); - let end = hit.position + hit.length; - result += `${text.substring(hit.position, end)}`; - prevEnd = end; - }); - result += text.substring(prevEnd, slice.end); - return result; - }; + let result = '' + let prevEnd = slice.start + slice.hits.forEach((hit) => { + result += text.substring(prevEnd, hit.position) + let end = hit.position + hit.length + result += `${text.substring(hit.position, end)}` + prevEnd = end + }) + result += text.substring(prevEnd, slice.end) + return result + } const inputEventFunction = () => { - if (!isfetched) return; - let searchText = searchInputDom.value.trim().toLowerCase(); - let keywords = searchText.split(/[-\s]+/); + if (!isfetched) return + let searchText = searchInputDom.value.trim().toLowerCase() + let keywords = searchText.split(/[-\s]+/) if (keywords.length > 1) { - keywords.push(searchText); + keywords.push(searchText) } - let resultItems = []; + let resultItems = [] if (searchText.length > 0) { // Perform local searching - datas.forEach(({title, content, url}) => { - let titleInLowerCase = title.toLowerCase(); - let contentInLowerCase = content.toLowerCase(); - let indexOfTitle = []; - let indexOfContent = []; - let searchTextCount = 0; - keywords.forEach(keyword => { - indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false)); - indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false)); - }); + datas.forEach(({ title, content, url }) => { + let titleInLowerCase = title.toLowerCase() + let contentInLowerCase = content.toLowerCase() + let indexOfTitle = [] + let indexOfContent = [] + let searchTextCount = 0 + keywords.forEach((keyword) => { + indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false)) + indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false)) + }) // Show search results if (indexOfTitle.length > 0 || indexOfContent.length > 0) { - let hitCount = indexOfTitle.length + indexOfContent.length; + let hitCount = indexOfTitle.length + indexOfContent.length // Sort index by position of keyword - [indexOfTitle, indexOfContent].forEach(index => { + ;[indexOfTitle, indexOfContent].forEach((index) => { index.sort((itemLeft, itemRight) => { if (itemRight.position !== itemLeft.position) { - return itemRight.position - itemLeft.position; + return itemRight.position - itemLeft.position } - return itemLeft.word.length - itemRight.word.length; - }); - }); + return itemLeft.word.length - itemRight.word.length + }) + }) - let slicesOfTitle = []; + let slicesOfTitle = [] if (indexOfTitle.length !== 0) { - let tmp = mergeIntoSlice(0, title.length, indexOfTitle, searchText); - searchTextCount += tmp.searchTextCountInSlice; - slicesOfTitle.push(tmp); + let tmp = mergeIntoSlice(0, title.length, indexOfTitle, searchText) + searchTextCount += tmp.searchTextCountInSlice + slicesOfTitle.push(tmp) } - let slicesOfContent = []; + let slicesOfContent = [] while (indexOfContent.length !== 0) { - let item = indexOfContent[indexOfContent.length - 1]; - let {position, word} = item; + let item = indexOfContent[indexOfContent.length - 1] + let { position, word } = item // Cut out 100 characters - let start = position - 20; - let end = position + 80; + let start = position - 20 + let end = position + 80 if (start < 0) { - start = 0; + start = 0 } if (end < position + word.length) { - end = position + word.length; + end = position + word.length } if (end > content.length) { - end = content.length; + end = content.length } - let tmp = mergeIntoSlice(start, end, indexOfContent, searchText); - searchTextCount += tmp.searchTextCountInSlice; - slicesOfContent.push(tmp); + let tmp = mergeIntoSlice(start, end, indexOfContent, searchText) + searchTextCount += tmp.searchTextCountInSlice + slicesOfContent.push(tmp) } // Sort slices in content by search text's count and hits' count slicesOfContent.sort((sliceLeft, sliceRight) => { if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) { - return sliceRight.searchTextCount - sliceLeft.searchTextCount; + return sliceRight.searchTextCount - sliceLeft.searchTextCount } else if (sliceLeft.hits.length !== sliceRight.hits.length) { - return sliceRight.hits.length - sliceLeft.hits.length; + return sliceRight.hits.length - sliceLeft.hits.length } - return sliceLeft.start - sliceRight.start; - }); + return sliceLeft.start - sliceRight.start + }) // Select top N slices in content - let upperBound = parseInt(KEEP.theme_config.local_search.top_n_per_article ? KEEP.theme_config.local_search.top_n_per_article : 1, 10); + let upperBound = parseInt( + KEEP.theme_config.local_search.top_n_per_article + ? KEEP.theme_config.local_search.top_n_per_article + : 1, + 10 + ) if (upperBound >= 0) { - slicesOfContent = slicesOfContent.slice(0, upperBound); + slicesOfContent = slicesOfContent.slice(0, upperBound) } - let resultItem = ''; + let resultItem = '' if (slicesOfTitle.length !== 0) { - resultItem += `
  • ${highlightKeyword(title, slicesOfTitle[0])}`; + resultItem += `
  • ${highlightKeyword( + title, + slicesOfTitle[0] + )}` } else { - resultItem += `
  • ${title}`; + resultItem += `
  • ${title}` } - slicesOfContent.forEach(slice => { - resultItem += `

    ${highlightKeyword(content, slice)}...

    `; - }); + slicesOfContent.forEach((slice) => { + resultItem += `

    ${highlightKeyword( + content, + slice + )}...

    ` + }) - resultItem += '
    • '; + resultItem += '' resultItems.push({ item: resultItem, id: resultItems.length, hitCount, searchTextCount - }); + }) } - }); + }) } if (keywords.length === 1 && keywords[0] === '') { - resultContent.innerHTML = '
    '; + resultContent.innerHTML = '
    ' } else if (resultItems.length === 0) { - resultContent.innerHTML = '
    '; + resultContent.innerHTML = '
    ' } else { resultItems.sort((resultLeft, resultRight) => { if (resultLeft.searchTextCount !== resultRight.searchTextCount) { - return resultRight.searchTextCount - resultLeft.searchTextCount; + return resultRight.searchTextCount - resultLeft.searchTextCount } else if (resultLeft.hitCount !== resultRight.hitCount) { - return resultRight.hitCount - resultLeft.hitCount; + return resultRight.hitCount - resultLeft.hitCount } - return resultRight.id - resultLeft.id; - }); - let searchResultList = '
      '; - resultItems.forEach(result => { - searchResultList += result.item; - }); - searchResultList += '
    '; - resultContent.innerHTML = searchResultList; - window.pjax && window.pjax.refresh(resultContent); + return resultRight.id - resultLeft.id + }) + let searchResultList = '
      ' + resultItems.forEach((result) => { + searchResultList += result.item + }) + searchResultList += '
    ' + resultContent.innerHTML = searchResultList + window.pjax && window.pjax.refresh(resultContent) } - }; + } const fetchData = () => { fetch(KEEP.hexo_config.root + searchPath) - .then(response => response.text()) - .then(res => { + .then((response) => response.text()) + .then((res) => { // Get the contents from search data - isfetched = true; - datas = isXml ? [...new DOMParser().parseFromString(res, 'text/xml').querySelectorAll('entry')].map(element => { - return { - title: element.querySelector('title').textContent, - content: element.querySelector('content').textContent, - url: element.querySelector('url').textContent - }; - }) : JSON.parse(res); + isfetched = true + datas = isXml + ? [...new DOMParser().parseFromString(res, 'text/xml').querySelectorAll('entry')].map( + (element) => { + return { + title: element.querySelector('title').textContent, + content: element.querySelector('content').textContent, + url: element.querySelector('url').textContent + } + } + ) + : JSON.parse(res) // Only match articles with not empty titles - datas = datas.filter(data => data.title).map(data => { - data.title = data.title.trim(); - data.content = data.content ? data.content.trim().replace(/<[^>]+>/g, '') : ''; - data.url = decodeURIComponent(data.url).replace(/\/{2,}/g, '/'); - return data; - }); + datas = datas + .filter((data) => data.title) + .map((data) => { + data.title = data.title.trim() + data.content = data.content ? data.content.trim().replace(/<[^>]+>/g, '') : '' + data.url = decodeURIComponent(data.url).replace(/\/{2,}/g, '/') + return data + }) // Remove loading animation - const noResultDom = document.querySelector('#no-result'); - noResultDom && (noResultDom.innerHTML = ''); - }); - }; + const noResultDom = document.querySelector('#no-result') + noResultDom && (noResultDom.innerHTML = '') + }) + } if (KEEP.theme_config.local_search.preload) { - fetchData(); + fetchData() } if (searchInputDom) { - searchInputDom.addEventListener('input', inputEventFunction); + searchInputDom.addEventListener('input', inputEventFunction) } // Handle and trigger popup window - document.querySelectorAll('.search-popup-trigger').forEach(element => { + document.querySelectorAll('.search-popup-trigger').forEach((element) => { element.addEventListener('click', () => { - document.body.style.overflow = 'hidden'; - document.querySelector('.search-pop-overlay').classList.add('active'); - setTimeout(() => searchInputDom.focus(), 500); - if (!isfetched) fetchData(); - }); - }); + document.body.style.overflow = 'hidden' + document.querySelector('.search-pop-overlay').classList.add('active') + setTimeout(() => searchInputDom.focus(), 500) + if (!isfetched) fetchData() + }) + }) // Monitor main search box const onPopupClose = () => { - document.body.style.overflow = ''; - document.querySelector('.search-pop-overlay').classList.remove('active'); - }; + document.body.style.overflow = '' + document.querySelector('.search-pop-overlay').classList.remove('active') + } - document.querySelector('.search-pop-overlay').addEventListener('click', event => { + document.querySelector('.search-pop-overlay').addEventListener('click', (event) => { if (event.target === document.querySelector('.search-pop-overlay')) { - onPopupClose(); + onPopupClose() } - }); + }) document.querySelector('.search-input-field-pre').addEventListener('click', () => { - searchInputDom.value = ''; - searchInputDom.focus(); - inputEventFunction(); - }); - document.querySelector('.close-popup-btn').addEventListener('click', onPopupClose); - window.addEventListener('pjax:success', onPopupClose); - window.addEventListener('keyup', event => { + searchInputDom.value = '' + searchInputDom.focus() + inputEventFunction() + }) + document.querySelector('.close-popup-btn').addEventListener('click', onPopupClose) + window.addEventListener('pjax:success', onPopupClose) + window.addEventListener('keyup', (event) => { if (event.key === 'Escape') { - onPopupClose(); + onPopupClose() } - }); - + }) } diff --git a/source/js/main.js b/source/js/main.js index 0eb149a..3a07398 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -9,7 +9,7 @@ window.addEventListener('DOMContentLoaded', () => { repository: 'https://github.com/XPoet/hexo-theme-keep' } - KEEP.localStorageKey = 'KEEP-THEME-STATUS'; + KEEP.localStorageKey = 'KEEP-THEME-STATUS' KEEP.styleStatus = { isExpandPageWidth: false, @@ -22,48 +22,49 @@ window.addEventListener('DOMContentLoaded', () => { KEEP.printThemeInfo = () => { console.log( `\n %c ${KEEP.themeInfo.theme} %c ${KEEP.themeInfo.repository} \n`, - `color: #fadfa3; background: #333; padding: 6px 0;`, `padding: 6px 0;` - ); + `color: #fadfa3; background: #333; padding: 6px 0;`, + `padding: 6px 0;` + ) } // set styleStatus to localStorage KEEP.setStyleStatus = () => { - localStorage.setItem(KEEP.localStorageKey, JSON.stringify(KEEP.styleStatus)); + localStorage.setItem(KEEP.localStorageKey, JSON.stringify(KEEP.styleStatus)) } // get styleStatus from localStorage KEEP.getStyleStatus = () => { - let temp = localStorage.getItem(KEEP.localStorageKey); + let temp = localStorage.getItem(KEEP.localStorageKey) if (temp) { - temp = JSON.parse(temp); + temp = JSON.parse(temp) for (let key in KEEP.styleStatus) { - KEEP.styleStatus[key] = temp[key]; + KEEP.styleStatus[key] = temp[key] } - return temp; + return temp } else { - return null; + return null } } KEEP.refresh = () => { - KEEP.initUtils(); - KEEP.initHeaderShrink(); - KEEP.initModeToggle(); - KEEP.initBack2Top(); + KEEP.initUtils() + KEEP.initHeaderShrink() + KEEP.initModeToggle() + KEEP.initBack2Top() if (local_search?.enable === true) { - KEEP.initLocalSearch(); + KEEP.initLocalSearch() } if (code_block_tools?.enable === true || code_copy?.enable === true) { - KEEP.initCodeBlockTools(); + KEEP.initCodeBlockTools() } if (lazyload?.enable === true) { - KEEP.initLazyLoad(); + KEEP.initLazyLoad() } } - KEEP.printThemeInfo(); - KEEP.refresh(); -}); + KEEP.printThemeInfo() + KEEP.refresh() +}) diff --git a/source/js/toc.js b/source/js/toc.js index b2190bc..f895742 100644 --- a/source/js/toc.js +++ b/source/js/toc.js @@ -1,106 +1,111 @@ /* global KEEP */ + function initTOC() { - KEEP.utils.navItems = document.querySelectorAll('.post-toc-wrap .post-toc li'); + KEEP.utils.navItems = document.querySelectorAll('.post-toc-wrap .post-toc li') if (KEEP.utils.navItems.length > 0) { - KEEP.utils = { - ...KEEP.utils, findActiveIndexByTOC() { - if (!Array.isArray(KEEP.utils.sections)) return; - let index = KEEP.utils.sections.findIndex(element => { - return element && element.getBoundingClientRect().top - 20 > 0; - }); + if (!Array.isArray(KEEP.utils.sections)) return + let index = KEEP.utils.sections.findIndex((element) => { + return element && element.getBoundingClientRect().top - 20 > 0 + }) if (index === -1) { - index = KEEP.utils.sections.length - 1; + index = KEEP.utils.sections.length - 1 } else if (index > 0) { - index--; + index-- } - this.activateNavByIndex(index); + this.activateNavByIndex(index) }, registerSidebarTOC() { - KEEP.utils.sections = [...document.querySelectorAll('.post-toc li a.nav-link')].map(element => { - const target = document.getElementById(decodeURI(element.getAttribute('href')).replace('#', '')); - element.addEventListener('click', event => { - event.preventDefault(); - const offset = target.getBoundingClientRect().top + window.scrollY; - window.anime({ - targets: document.scrollingElement, - duration: 500, - easing: 'linear', - scrollTop: offset - 10, - complete: function () { - setTimeout(() => { - KEEP.utils.pageTop_dom.classList.add('hide'); - }, 100) - } - }); - }); - return target; - }); + KEEP.utils.sections = [...document.querySelectorAll('.post-toc li a.nav-link')].map( + (element) => { + const target = document.getElementById( + decodeURI(element.getAttribute('href')).replace('#', '') + ) + element.addEventListener('click', (event) => { + event.preventDefault() + const offset = target.getBoundingClientRect().top + window.scrollY + window.anime({ + targets: document.scrollingElement, + duration: 500, + easing: 'linear', + scrollTop: offset - 10, + complete: function () { + setTimeout(() => { + KEEP.utils.pageTop_dom.classList.add('hide') + }, 100) + } + }) + }) + return target + } + ) }, activateNavByIndex(index) { - const target = document.querySelectorAll('.post-toc li a.nav-link')[index]; - if (!target || target.classList.contains('active-current')) return; + const target = document.querySelectorAll('.post-toc li a.nav-link')[index] + if (!target || target.classList.contains('active-current')) return - document.querySelectorAll('.post-toc .active').forEach(element => { - element.classList.remove('active', 'active-current'); - }); - target.classList.add('active', 'active-current'); - let parent = target.parentNode; + document.querySelectorAll('.post-toc .active').forEach((element) => { + element.classList.remove('active', 'active-current') + }) + target.classList.add('active', 'active-current') + let parent = target.parentNode while (!parent.matches('.post-toc')) { - if (parent.matches('li')) parent.classList.add('active'); - parent = parent.parentNode; + if (parent.matches('li')) parent.classList.add('active') + parent = parent.parentNode } // Scrolling to center active TOC element if TOC content is taller then viewport. - const tocElement = document.querySelector('.post-toc-wrap'); + const tocElement = document.querySelector('.post-toc-wrap') window.anime({ targets: tocElement, duration: 200, easing: 'linear', - scrollTop: tocElement.scrollTop - (tocElement.offsetHeight / 2) + target.getBoundingClientRect().top - tocElement.getBoundingClientRect().top - }); + scrollTop: + tocElement.scrollTop - + tocElement.offsetHeight / 2 + + target.getBoundingClientRect().top - + tocElement.getBoundingClientRect().top + }) }, showPageAsideWhenHasTOC() { - const openHandle = () => { - const styleStatus = KEEP.getStyleStatus(); - const key = 'isOpenPageAside'; + const styleStatus = KEEP.getStyleStatus() + const key = 'isOpenPageAside' if (styleStatus && styleStatus.hasOwnProperty(key)) { - KEEP.utils.leftSideToggle.pageAsideHandleOfTOC(styleStatus[key]); + KEEP.utils.leftSideToggle.pageAsideHandleOfTOC(styleStatus[key]) } else { - KEEP.utils.leftSideToggle.pageAsideHandleOfTOC(true); + KEEP.utils.leftSideToggle.pageAsideHandleOfTOC(true) } } - const initOpenKey = 'init_open'; + const initOpenKey = 'init_open' if (KEEP.theme_config.toc.hasOwnProperty(initOpenKey)) { - KEEP.theme_config.toc[initOpenKey] ? openHandle() : KEEP.utils.leftSideToggle.pageAsideHandleOfTOC(false); - + KEEP.theme_config.toc[initOpenKey] + ? openHandle() + : KEEP.utils.leftSideToggle.pageAsideHandleOfTOC(false) } else { - openHandle(); + openHandle() } - } } - KEEP.utils.showPageAsideWhenHasTOC(); - KEEP.utils.registerSidebarTOC(); - + KEEP.utils.showPageAsideWhenHasTOC() + KEEP.utils.registerSidebarTOC() } else { - const pageAsideDom = document.querySelector('.page-aside'); - pageAsideDom && KEEP.utils.pageContainer_dom.removeChild(pageAsideDom); + const pageAsideDom = document.querySelector('.page-aside') + pageAsideDom && KEEP.utils.pageContainer_dom.removeChild(pageAsideDom) } } if (KEEP.theme_config.pjax.enable === true && KEEP.utils) { - initTOC(); + initTOC() } else { - window.addEventListener('DOMContentLoaded', initTOC); + window.addEventListener('DOMContentLoaded', initTOC) } diff --git a/source/js/utils.js b/source/js/utils.js index 3aec326..21a9d8d 100644 --- a/source/js/utils.js +++ b/source/js/utils.js @@ -1,7 +1,6 @@ /* global KEEP */ KEEP.initUtils = () => { - KEEP.utils = { html_root_dom: document.querySelector('html'), pageContainer_dom: document.querySelector('.page-container'), @@ -22,56 +21,55 @@ KEEP.initUtils = () => { isHeaderTransparent: false, initData() { - const { scroll, first_screen } = KEEP.theme_config.style; - this.isHasScrollProgressBar = scroll.progress_bar.enable === true; - this.isHasScrollPercent = scroll.percent.enable === true; - const { enable, header_transparent } = first_screen; - this.isHeaderTransparent = enable === true && header_transparent === true; + const { scroll, first_screen } = KEEP.theme_config.style + this.isHasScrollProgressBar = scroll.progress_bar.enable === true + this.isHasScrollPercent = scroll.percent.enable === true + const { enable, header_transparent } = first_screen + this.isHeaderTransparent = enable === true && header_transparent === true }, // Scroll Style Handle styleHandleWhenScroll() { - const scrollTop = document.body.scrollTop || document.documentElement.scrollTop; - const scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight; - const clientHeight = window.innerHeight || document.documentElement.clientHeight; + const scrollTop = document.body.scrollTop || document.documentElement.scrollTop + const scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight + const clientHeight = window.innerHeight || document.documentElement.clientHeight - const percent = Math.round(scrollTop / (scrollHeight - clientHeight) * 100); + const percent = Math.round((scrollTop / (scrollHeight - clientHeight)) * 100) if (this.isHasScrollProgressBar) { - const ProgressPercent = (scrollTop / (scrollHeight - clientHeight) * 100).toFixed(3); - this.scrollProgressBar_dom.style.visibility = percent === 0 ? 'hidden' : 'visible'; - this.scrollProgressBar_dom.style.width = `${ProgressPercent}%`; + const ProgressPercent = ((scrollTop / (scrollHeight - clientHeight)) * 100).toFixed(3) + this.scrollProgressBar_dom.style.visibility = percent === 0 ? 'hidden' : 'visible' + this.scrollProgressBar_dom.style.width = `${ProgressPercent}%` } if (this.isHasScrollPercent) { - const percent_dom = this.back2TopButton_dom.querySelector('.percent'); + const percent_dom = this.back2TopButton_dom.querySelector('.percent') if (percent === 0 || percent === undefined) { - this.back2TopButton_dom.classList.remove('show'); - + this.back2TopButton_dom.classList.remove('show') } else { - this.back2TopButton_dom.classList.add('show'); - percent_dom.innerHTML = percent.toFixed(0); + this.back2TopButton_dom.classList.add('show') + percent_dom.innerHTML = percent.toFixed(0) } } // hide header handle if (scrollTop > this.prevScrollValue && scrollTop > this.innerHeight) { - this.pageTop_dom.classList.add('hide'); + this.pageTop_dom.classList.add('hide') if (this.isHeaderTransparent) { - this.headerWrapper_dom.classList.remove('transparent-1', 'transparent-2'); + this.headerWrapper_dom.classList.remove('transparent-1', 'transparent-2') } } else { - this.pageTop_dom.classList.remove('hide'); + this.pageTop_dom.classList.remove('hide') if (this.isHeaderTransparent) { if (scrollTop <= this.headerWrapper_dom.getBoundingClientRect().height) { - this.headerWrapper_dom.classList.remove('transparent-2'); - this.headerWrapper_dom.classList.add('transparent-1'); + this.headerWrapper_dom.classList.remove('transparent-2') + this.headerWrapper_dom.classList.add('transparent-1') } else if (scrollTop < this.innerHeight) { - this.headerWrapper_dom.classList.add('transparent-2'); + this.headerWrapper_dom.classList.add('transparent-2') } } } - this.prevScrollValue = scrollTop; + this.prevScrollValue = scrollTop }, // register window scroll event @@ -79,182 +77,183 @@ KEEP.initUtils = () => { window.addEventListener('scroll', () => { // style handle when scroll if (this.isHasScrollPercent || this.isHasScrollProgressBar) { - this.styleHandleWhenScroll(); + this.styleHandleWhenScroll() } // TOC scroll handle if (KEEP.theme_config.toc.enable && KEEP.utils.hasOwnProperty('findActiveIndexByTOC')) { - KEEP.utils.findActiveIndexByTOC(); + KEEP.utils.findActiveIndexByTOC() } // header shrink - KEEP.utils.headerShrink.headerShrink(); - }); + KEEP.utils.headerShrink.headerShrink() + }) }, // toggle show tools list toggleShowToolsList() { document.querySelector('.tool-toggle-show').addEventListener('click', () => { - document.querySelector('.side-tools-list').classList.toggle('show'); - }); + document.querySelector('.side-tools-list').classList.toggle('show') + }) }, // global font adjust globalFontAdjust() { - const fontSize = document.defaultView.getComputedStyle(document.body).fontSize; - const fs = parseFloat(fontSize); + const fontSize = document.defaultView.getComputedStyle(document.body).fontSize + const fs = parseFloat(fontSize) const initFontSize = () => { - const styleStatus = KEEP.getStyleStatus(); + const styleStatus = KEEP.getStyleStatus() if (styleStatus) { - this.fontSizeLevel = styleStatus.fontSizeLevel; - setFontSize(this.fontSizeLevel); + this.fontSizeLevel = styleStatus.fontSizeLevel + setFontSize(this.fontSizeLevel) } } const setFontSize = (fontSizeLevel) => { - this.html_root_dom.style.fontSize = `${fs * (1 + fontSizeLevel * 0.05)}px`; - KEEP.styleStatus.fontSizeLevel = fontSizeLevel; - KEEP.setStyleStatus(); + this.html_root_dom.style.fontSize = `${fs * (1 + fontSizeLevel * 0.05)}px` + KEEP.styleStatus.fontSizeLevel = fontSizeLevel + KEEP.setStyleStatus() } - initFontSize(); + initFontSize() document.querySelector('.tool-font-adjust-plus').addEventListener('click', () => { - if (this.fontSizeLevel === 5) return; - this.fontSizeLevel++; - setFontSize(this.fontSizeLevel); - }); + if (this.fontSizeLevel === 5) return + this.fontSizeLevel++ + setFontSize(this.fontSizeLevel) + }) document.querySelector('.tool-font-adjust-minus').addEventListener('click', () => { - if (this.fontSizeLevel <= 0) return; - this.fontSizeLevel--; - setFontSize(this.fontSizeLevel); - }); + if (this.fontSizeLevel <= 0) return + this.fontSizeLevel-- + setFontSize(this.fontSizeLevel) + }) }, // toggle content area width contentAreaWidthAdjust() { - const toolExpandDom = document.querySelector('.tool-expand-width'); - const headerContentDom = document.querySelector('.header-content'); - const mainContentDom = document.querySelector('.main-content'); - const iconDom = toolExpandDom.querySelector('i'); + const toolExpandDom = document.querySelector('.tool-expand-width') + const headerContentDom = document.querySelector('.header-content') + const mainContentDom = document.querySelector('.main-content') + const iconDom = toolExpandDom.querySelector('i') - const defaultMaxWidth = KEEP.theme_config.style.content_max_width || '1000px'; - const expandMaxWidth = '90%'; - let headerMaxWidth = defaultMaxWidth; + const defaultMaxWidth = KEEP.theme_config.style.content_max_width || '1000px' + const expandMaxWidth = '90%' + let headerMaxWidth = defaultMaxWidth - let isExpand = false; + let isExpand = false - if (KEEP.theme_config.style.first_screen.enable === true && window.location.pathname === '/') { - headerMaxWidth = parseInt(defaultMaxWidth) * 1.2 + 'px'; + if ( + KEEP.theme_config.style.first_screen.enable === true && + window.location.pathname === '/' + ) { + headerMaxWidth = parseInt(defaultMaxWidth) * 1.2 + 'px' } const setPageWidth = (isExpand) => { - KEEP.styleStatus.isExpandPageWidth = isExpand; - KEEP.setStyleStatus(); + KEEP.styleStatus.isExpandPageWidth = isExpand + KEEP.setStyleStatus() if (isExpand) { - iconDom.classList.remove('fa-up-right-and-down-left-from-center'); - iconDom.classList.add('fa-down-left-and-up-right-to-center'); - headerContentDom.style.maxWidth = expandMaxWidth; - mainContentDom.style.maxWidth = expandMaxWidth; + iconDom.classList.remove('fa-up-right-and-down-left-from-center') + iconDom.classList.add('fa-down-left-and-up-right-to-center') + headerContentDom.style.maxWidth = expandMaxWidth + mainContentDom.style.maxWidth = expandMaxWidth } else { - iconDom.classList.remove('fa-down-left-and-up-right-to-center'); - iconDom.classList.add('fa-up-right-and-down-left-from-center'); - headerContentDom.style.maxWidth = headerMaxWidth; - mainContentDom.style.maxWidth = defaultMaxWidth; + iconDom.classList.remove('fa-down-left-and-up-right-to-center') + iconDom.classList.add('fa-up-right-and-down-left-from-center') + headerContentDom.style.maxWidth = headerMaxWidth + mainContentDom.style.maxWidth = defaultMaxWidth } } const initPageWidth = () => { - const styleStatus = KEEP.getStyleStatus(); + const styleStatus = KEEP.getStyleStatus() if (styleStatus) { - isExpand = styleStatus.isExpandPageWidth; - setPageWidth(isExpand); + isExpand = styleStatus.isExpandPageWidth + setPageWidth(isExpand) } } - initPageWidth(); + initPageWidth() toolExpandDom.addEventListener('click', () => { - isExpand = !isExpand; + isExpand = !isExpand setPageWidth(isExpand) - }); - - + }) }, // go comment anchor goComment() { - this.goComment_dom = document.querySelector('.go-comment'); + this.goComment_dom = document.querySelector('.go-comment') if (this.goComment_dom) { this.goComment_dom.addEventListener('click', () => { - document.querySelector('#comment-anchor').scrollIntoView(); - }); + document.querySelector('#comment-anchor').scrollIntoView() + }) } - }, // get dom element height getElementHeight(selectors) { - const dom = document.querySelector(selectors); - return dom ? dom.getBoundingClientRect().height : 0; + const dom = document.querySelector(selectors) + return dom ? dom.getBoundingClientRect().height : 0 }, // init first screen height initFirstScreenHeight() { - this.firstScreen_dom && (this.firstScreen_dom.style.height = this.innerHeight + 'px'); + this.firstScreen_dom && (this.firstScreen_dom.style.height = this.innerHeight + 'px') }, // init page height handle initPageHeightHandle() { - if (this.firstScreen_dom) return; - const temp_h1 = this.getElementHeight('.page-main-content-top'); - const temp_h2 = this.getElementHeight('.page-main-content-middle'); - const temp_h3 = this.getElementHeight('.page-main-content-bottom'); - const allDomHeight = temp_h1 + temp_h2 + temp_h3; - const innerHeight = window.innerHeight; - const pb_dom = document.querySelector('.page-main-content-bottom'); + if (this.firstScreen_dom) return + const temp_h1 = this.getElementHeight('.page-main-content-top') + const temp_h2 = this.getElementHeight('.page-main-content-middle') + const temp_h3 = this.getElementHeight('.page-main-content-bottom') + const allDomHeight = temp_h1 + temp_h2 + temp_h3 + const innerHeight = window.innerHeight + const pb_dom = document.querySelector('.page-main-content-bottom') if (allDomHeight < innerHeight) { - const marginTopValue = Math.floor(innerHeight - allDomHeight); + const marginTopValue = Math.floor(innerHeight - allDomHeight) if (marginTopValue > 0) { - pb_dom.style.marginTop = `${marginTopValue - 2}px`; + pb_dom.style.marginTop = `${marginTopValue - 2}px` } } }, // big image viewer imageViewer() { - let isBigImage = false; + let isBigImage = false const showHandle = (maskDom, isShow) => { - document.body.style.overflow = isShow ? 'hidden' : 'auto'; + document.body.style.overflow = isShow ? 'hidden' : 'auto' if (isShow) { - maskDom.classList.add('active'); + maskDom.classList.add('active') } else { - maskDom.classList.remove('active'); + maskDom.classList.remove('active') } } - const imageViewerDom = document.querySelector('.image-viewer-container'); - const targetImg = document.querySelector('.image-viewer-container img'); - imageViewerDom && imageViewerDom.addEventListener('click', () => { - isBigImage = false; - showHandle(imageViewerDom, isBigImage); - }); + const imageViewerDom = document.querySelector('.image-viewer-container') + const targetImg = document.querySelector('.image-viewer-container img') + imageViewerDom && + imageViewerDom.addEventListener('click', () => { + isBigImage = false + showHandle(imageViewerDom, isBigImage) + }) - const imgDoms = document.querySelectorAll('.markdown-body img'); + const imgDoms = document.querySelectorAll('.markdown-body img') if (imgDoms.length) { - imgDoms.forEach(img => { + imgDoms.forEach((img) => { img.addEventListener('click', () => { - isBigImage = true; - showHandle(imageViewerDom, isBigImage); - targetImg.setAttribute('src', img.getAttribute('src')); - }); - }); + isBigImage = true + showHandle(imageViewerDom, isBigImage) + targetImg.setAttribute('src', img.getAttribute('src')) + }) + }) } else { - this.pageContainer_dom.removeChild(imageViewerDom); + this.pageContainer_dom.removeChild(imageViewerDom) } }, @@ -264,140 +263,134 @@ KEEP.initUtils = () => { }, getHowLongAgo(timestamp) { - const lang = KEEP.language_ago; - const __Y = Math.floor(timestamp / (60 * 60 * 24 * 30) / 12); - const __M = Math.floor(timestamp / (60 * 60 * 24 * 30)); - const __W = Math.floor(timestamp / (60 * 60 * 24) / 7); - const __d = Math.floor(timestamp / (60 * 60 * 24)); - const __h = Math.floor(timestamp / (60 * 60) % 24); - const __m = Math.floor(timestamp / 60 % 60); - const __s = Math.floor(timestamp % 60); + const lang = KEEP.language_ago + const __Y = Math.floor(timestamp / (60 * 60 * 24 * 30) / 12) + const __M = Math.floor(timestamp / (60 * 60 * 24 * 30)) + const __W = Math.floor(timestamp / (60 * 60 * 24) / 7) + const __d = Math.floor(timestamp / (60 * 60 * 24)) + const __h = Math.floor((timestamp / (60 * 60)) % 24) + const __m = Math.floor((timestamp / 60) % 60) + const __s = Math.floor(timestamp % 60) if (__Y > 0) { - return this.setHowLongAgoLanguage(__Y, lang.year); - + return this.setHowLongAgoLanguage(__Y, lang.year) } else if (__M > 0) { - return this.setHowLongAgoLanguage(__M, lang.month); - + return this.setHowLongAgoLanguage(__M, lang.month) } else if (__W > 0) { - return this.setHowLongAgoLanguage(__W, lang.week); - + return this.setHowLongAgoLanguage(__W, lang.week) } else if (__d > 0) { - return this.setHowLongAgoLanguage(__d, lang.day); - + return this.setHowLongAgoLanguage(__d, lang.day) } else if (__h > 0) { - return this.setHowLongAgoLanguage(__h, lang.hour); - + return this.setHowLongAgoLanguage(__h, lang.hour) } else if (__m > 0) { - return this.setHowLongAgoLanguage(__m, lang.minute); - + return this.setHowLongAgoLanguage(__m, lang.minute) } else if (__s > 0) { - return this.setHowLongAgoLanguage(__s, lang.second); + return this.setHowLongAgoLanguage(__s, lang.second) } }, setHowLongAgoInHome() { - const post = document.querySelectorAll('.home-article-meta-info .home-article-date'); - post && post.forEach(v => { - const nowDate = Date.now(); - const postDate = new Date(v.dataset.date.split(' GMT')[0]).getTime(); - v.innerHTML = this.getHowLongAgo(Math.floor((nowDate - postDate) / 1000)); - }); + const post = document.querySelectorAll('.home-article-meta-info .home-article-date') + post && + post.forEach((v) => { + const nowDate = Date.now() + const postDate = new Date(v.dataset.date.split(' GMT')[0]).getTime() + v.innerHTML = this.getHowLongAgo(Math.floor((nowDate - postDate) / 1000)) + }) }, // loading progress bar start pjaxProgressBarStart() { - this.pjaxProgressBarTimer && clearInterval(this.pjaxProgressBarTimer); + this.pjaxProgressBarTimer && clearInterval(this.pjaxProgressBarTimer) if (this.isHasScrollProgressBar) { - this.scrollProgressBar_dom.classList.add('hide'); + this.scrollProgressBar_dom.classList.add('hide') } - this.pjaxProgressBar_dom.style.width = '0'; - this.pjaxProgressIcon_dom.classList.add('show'); + this.pjaxProgressBar_dom.style.width = '0' + this.pjaxProgressIcon_dom.classList.add('show') - let width = 1; - const maxWidth = 99; + let width = 1 + const maxWidth = 99 - this.pjaxProgressBar_dom.classList.add('show'); - this.pjaxProgressBar_dom.style.width = width + '%'; + this.pjaxProgressBar_dom.classList.add('show') + this.pjaxProgressBar_dom.style.width = width + '%' this.pjaxProgressBarTimer = setInterval(() => { - width += 5; - if (width > maxWidth) width = maxWidth; - this.pjaxProgressBar_dom.style.width = width + '%'; - }, 100); + width += 5 + if (width > maxWidth) width = maxWidth + this.pjaxProgressBar_dom.style.width = width + '%' + }, 100) }, // loading progress bar end pjaxProgressBarEnd() { - this.pjaxProgressBarTimer && clearInterval(this.pjaxProgressBarTimer); - this.pjaxProgressBar_dom.style.width = '100%'; + this.pjaxProgressBarTimer && clearInterval(this.pjaxProgressBarTimer) + this.pjaxProgressBar_dom.style.width = '100%' const temp_1 = setTimeout(() => { - this.pjaxProgressBar_dom.classList.remove('show'); - this.pjaxProgressIcon_dom.classList.remove('show'); + this.pjaxProgressBar_dom.classList.remove('show') + this.pjaxProgressIcon_dom.classList.remove('show') if (this.isHasScrollProgressBar) { - this.scrollProgressBar_dom.classList.remove('hide'); + this.scrollProgressBar_dom.classList.remove('hide') } const temp_2 = setTimeout(() => { - this.pjaxProgressBar_dom.style.width = '0'; - clearTimeout(temp_1), clearTimeout(temp_2); - }, 200); - - }, 200); + this.pjaxProgressBar_dom.style.width = '0' + clearTimeout(temp_1), clearTimeout(temp_2) + }, 200) + }, 200) }, // insert tooltip content dom insertTooltipContent() { const init = () => { - document.querySelectorAll('.tooltip').forEach(element => { - const { content } = element.dataset; + document.querySelectorAll('.tooltip').forEach((element) => { + const { content } = element.dataset if (content) { element.insertAdjacentHTML( 'afterbegin', `${content}` - ); + ) } - }); + }) } setTimeout(() => { - init(); - }, 1000); + init() + }, 1000) } } // init data - KEEP.utils.initData(); + KEEP.utils.initData() // init scroll - KEEP.utils.registerWindowScroll(); + KEEP.utils.registerWindowScroll() // toggle show tools list - KEEP.utils.toggleShowToolsList(); + KEEP.utils.toggleShowToolsList() // global font adjust - KEEP.utils.globalFontAdjust(); + KEEP.utils.globalFontAdjust() // adjust content area width - KEEP.utils.contentAreaWidthAdjust(); + KEEP.utils.contentAreaWidthAdjust() // go comment - KEEP.utils.goComment(); + KEEP.utils.goComment() // init page height handle - KEEP.utils.initPageHeightHandle(); + KEEP.utils.initPageHeightHandle() // init first screen height - KEEP.utils.initFirstScreenHeight(); + KEEP.utils.initFirstScreenHeight() // big image viewer handle - KEEP.utils.imageViewer(); + KEEP.utils.imageViewer() // set how long age in home article block - KEEP.utils.setHowLongAgoInHome(); + KEEP.utils.setHowLongAgoInHome() // insert tooltip content dom - KEEP.utils.insertTooltipContent(); + KEEP.utils.insertTooltipContent() } From 4f09b39664488784f1b86faea39d800aaf1d4f7f Mon Sep 17 00:00:00 2001 From: XPoet Date: Fri, 30 Sep 2022 11:55:36 +0800 Subject: [PATCH 10/10] chore(release): v3.4.8 --- _config.yml | 2 +- layout/_partial/footer.ejs | 2 +- package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/_config.yml b/_config.yml index ccb4162..f3533b6 100644 --- a/_config.yml +++ b/_config.yml @@ -1,5 +1,5 @@ ## ====================================================================================== -## Keep v3.4.7 +## Keep v3.4.8 ## Repository: https://github.com/XPoet/hexo-theme-keep ## Document: https://keep-docs.xpoet.cn ## ====================================================================================== diff --git a/layout/_partial/footer.ejs b/layout/_partial/footer.ejs index c141c0b..8016b7b 100644 --- a/layout/_partial/footer.ejs +++ b/layout/_partial/footer.ejs @@ -32,7 +32,7 @@ const { site_uv: bsz_site_uv, site_pv: bsz_site_pv, enable: bsz_enable } = theme
    <%- __('powered_by', 'Hexo') %> | <%- __('theme') %>   - Keep v3.4.7 + Keep v3.4.8
    <% if (f_icp) { %>
    diff --git a/package.json b/package.json index 6fe16ad..27bbd3c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-keep", - "version": "3.4.7", + "version": "3.4.8", "private": false, "description": "A simple and elegant theme for Hexo.", "scripts": {