lianglianglee
/
hexo-theme-keep
mirror of https://github.com/liangliangle/hexo-theme-keep.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #175 from XPoet/dev 

release v3.4.8
This commit is contained in:
指间的诗意 2022-09-30 12:18:14 +08:00 committed by GitHub
parent f613edc816 4f09b39664
commit db0694bb73
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
59 changed files with 2489 additions and 2365 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -7,6 +7,7 @@
# dependencies
/node_modules
package-lock.json
yarn.lock
# IDEs and editors

3
.npmignore
View File

@ -1 +1,4 @@
node_modules
/.github/FUNDING.yml
package-lock.json
yarn.lock

10
.prettierrc Normal file
View File

@ -0,0 +1,10 @@
{
"useTabs": false,
"endOfLine": "auto",
"tabWidth": 2,
"printWidth": 100,
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": true,
"semi": false
}

9
.stylelintrc.js Normal file
View File

@ -0,0 +1,9 @@
module.exports = {
extends: [
'stylelint-config-rational-order',
'stylelint-stylus/standard'
],
rules: {
'stylus/pythonic': 'never'
}
}

12
_config.yml
View File

@ -1,3 +1,9 @@
## ======================================================================================
## Keep v3.4.8
## 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

2
layout/_partial/article-copyright-info.ejs
View File

@ -1,5 +1,5 @@
<div class="article-copyright-info-container">
<ul>
<ul class="copyright-info-content">
<li><%- __('copyright.title') %>：<%= page.title %></li>
<li><%- __('copyright.author') %>：<%= theme.base_info.author || config.author %></li>
<li><%- __('copyright.create_time') %>：<%= date(page.date, 'YYYY-MM-DD HH:mm:ss') %></li>

6
layout/_partial/footer.ejs
View File

@ -22,21 +22,17 @@ const { site_uv: bsz_site_uv, site_pv: bsz_site_pv, enable: bsz_enable } = theme
src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div class="website-count info-item">
<% if (bsz_site_uv) { %>
<span id="busuanzi_container_site_uv">
<%- __('site_uv') %>&nbsp;<span id="busuanzi_value_site_uv"></span>&ensp;
</span>
<% } %>
<% if (bsz_site_pv) { %>
<span id="busuanzi_container_site_pv">
<%- __('site_pv') %>&nbsp;<span id="busuanzi_value_site_pv"></span>
</span>
<% } %>
</div>
<% } %>
<div class="theme-info info-item">
<%- __('powered_by', '<a target="_blank" href="https://hexo.io">Hexo</a>') %>&nbsp;|&nbsp;<%- __('theme') %>
&nbsp;
<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.4.7</a>
<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.4.8</a>
</div>
<% if (f_icp) { %>
<div class="icp-info info-item">

4
layout/_partial/progress-bar.ejs
View File

@ -5,9 +5,7 @@
<% if (theme.pjax.enable === true) { %>
<span class="pjax-progress-bar"></span>
<span class="pjax-progress-icon">
<i class="fas fa-circle-notch fa-spin"></i>
</span>
<i class="pjax-progress-icon fas fa-circle-notch fa-spin"></i>
<% } %>
</div>

2
layout/_partial/scripts.ejs
View File

@ -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') %>
<% } %>

17
package.json
View File

@ -1,11 +1,14 @@
{
"name": "hexo-theme-keep",
"version": "3.4.7",
"version": "3.4.8",
"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",
"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 ."
},
"repository": {
"type": "git",
@ -25,5 +28,11 @@
"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": {
"prettier": "^2.7.1",
"stylelint": "^14.13.0",
"stylelint-config-rational-order": "^0.1.2",
"stylelint-stylus": "^0.17.0"
}
}

8
scripts/filters/lazyload-handle.js
View File

@ -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.
/<img([^>]*)src="([^"]*)"([^>\/]*)\/?\s*>/gim,
function (match, attrBegin, src, attrEnd) {
// Exit if the src doesn't exists.
if (!src) return match;
if (!src) return match
return `<img ${attrBegin}
lazyload
@ -21,4 +21,4 @@ hexo.extend.filter.register(
)
},
1
);
)

36
scripts/filters/link-handle.js
View File

@ -2,40 +2,36 @@
'use strict'
hexo.extend.filter.register('after_post_render', function (data) {
const config = this.config;
const url = new URL(config.url);
const siteHost = url.hostname || config.url;
hexo.extend.filter.register(
'after_post_render',
function (data) {
const config = this.config
const url = new URL(config.url)
const siteHost = url.hostname || config.url
// Match 'a' tags that don't contain html children.
const regPureATag = /<a([^>]*)href="([^"]*)"([^>]*)>([^<]*)<\/a>/gim
data.content = data.content.replace(regPureATag, function (
match,
attrBegin,
href,
attrEnd,
html
) {
data.content = data.content.replace(
regPureATag,
function (match, attrBegin, href, attrEnd, html) {
// Exit if the href attribute doesn't exists.
if (!href) return match;
if (!href) return match
let link = '';
let link = ''
try {
link = new URL(href);
link = new URL(href)
} catch (e) {
// Invalid url, e.g. Anchor link.
return match;
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;
if (!link.protocol || link.hostname === siteHost) return match
return (
`<a class="link" ${attrBegin} href="${href}" ${attrEnd}>${html}<i class="fas fa-external-link-alt"></i></a>`
return `<a class="link" ${attrBegin} href="${href}" ${attrEnd}>${html}<i class="fas fa-external-link-alt"></i></a>`
}
)
})
},
0
)

39
scripts/helpers/export-config.js
View File

@ -1,39 +1,38 @@
/* global hexo */
'use strict';
const url = require('url');
const fs = require('fs');
const path = require('path');
const yaml = require('js-yaml');
'use strict'
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);
} catch (e) {
console.log(e);
languageContent = yaml.load(languageContent)
} catch (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 = {
@ -45,7 +44,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 `<script id="hexo-configurations">
@ -54,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'])};
</script>`;
});
</script>`
})

83
scripts/helpers/helper.js
View File

@ -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 = '3.4.7', cdn = {} } = themeConfig
const { provider = 'jsdelivr' } = cdn
const version = require('../../package.json').version
const { provider = 'jsdelivr' } = themeConfig?.cdn
let urlPrefix = ''
switch (provider.toLocaleLowerCase()) {
case 'jsdelivr':
urlPrefix = '//cdn.jsdelivr.net/npm/hexo-theme-keep'
if (tyle === 'js') {
return `<script src="${urlPrefix}@${version}/source/${path}"></script>`;
return `<script src="${urlPrefix}@${version}/source/${path}"></script>`
} else {
return `<link rel="stylesheet" href="${urlPrefix}@${version}/source/${path}">`;
return `<link rel="stylesheet" href="${urlPrefix}@${version}/source/${path}">`
}
case 'unpkg':
urlPrefix = '//unpkg.com/hexo-theme-keep'
if (tyle === 'js') {
return `<script src="${urlPrefix}@${version}/source/${path}"></script>`;
return `<script src="${urlPrefix}@${version}/source/${path}"></script>`
} else {
return `<link rel="stylesheet" href="${urlPrefix}@${version}/source/${path}">`;
return `<link rel="stylesheet" href="${urlPrefix}@${version}/source/${path}">`
}
}
}
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)
})

19
scripts/use-source-data.js
View File

@ -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
}
}
});
}
})

105
source/css/common/animated.styl
View File

@ -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
}
}

88
source/css/common/basic.styl
View File

@ -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 {
color var(--default-text-color)
text-decoration none
color var(--default-text-color)
i, span {
i
span {
color var(--default-text-color)
}
&:hover, &:active {
&:hover
&:active {
color var(--primary-color)
text-decoration none !important
color var(--primary-color)
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 ''
}
}
@ -194,17 +198,17 @@ button {
.tooltip-content {
position absolute
top -140%
top 0
left 50%
transform translateX(-50%)
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")
}
}

42
source/css/common/code-block/code-block-tools.styl
View File

@ -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.6rem 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 {
@ -47,10 +47,8 @@ disable-user-select() {
.fold {
font-weight bold
padding 0 0.4rem 0 0.2rem
}
}
@ -65,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 {
@ -75,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
@ -114,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
@ -124,11 +122,7 @@ disable-user-select() {
i {
font-size 1rem
}
}
}
}
}

32
source/css/common/code-block/code-theme.styl
View File

@ -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')
}

51
source/css/common/code-block/highlight.styl
View File

@ -1,70 +1,71 @@
@require "code-theme.styl"
@import "code-theme.styl"
$code-block {
overflow auto
margin 20px 0
margin 1.5rem 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
padding 0.4rem
color var(--code-foreground)
font-size 0.96rem
word-wrap break-word
background var(--code-background)
border-radius 0.2rem
}
pre {
@extend $code-block
padding 10px
padding 0.6rem
code {
padding 0
color var(--highlight-foreground)
background none
text-shadow none
background none
}
}
.highlight {
@extend $code-block
border-radius 1px
border-radius 0.1rem
pre {
border none
margin 0
padding 10px 0
padding 0.6rem 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-right 0.6rem
padding-left 0.6rem
color var(--highlight-gutter-color)
text-align center
background-color var(--highlight-gutter-bg-color)
@ -86,13 +87,13 @@ pre {
.code pre {
width 100%
padding-left 10px
padding-right 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 {
@ -102,7 +103,6 @@ pre {
.string {
color var(--default-text-color)
}
}
}
@ -200,5 +200,4 @@ pre {
.javascript .function {
color var(--highlight-purple)
}
}

34
source/css/common/keep-theme.styl
View File

@ -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
}
}

183
source/css/common/markdown.styl
View File

@ -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)
}
}
}

198
source/css/common/variables.styl
View File

@ -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')
}

58
source/css/layout/_partial/archive-list.styl
View File

@ -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
color var(--default-text-color)
font-size $article-date-font-size
}
}
}

58
source/css/layout/_partial/article-copyright-info.styl
View File

@ -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%
overflow hidden
font-size 1rem
background var(--second-background-color)
&::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
}
}
}

38
source/css/layout/_partial/article-meta-info.styl
View File

@ -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 0.6rem
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
}
}
}

39
source/css/layout/_partial/comment/comment.styl
View File

@ -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
}
}
}

907
source/css/layout/_partial/comment/gitalk.styl
View File

@ -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)
}
}
}

47
source/css/layout/_partial/comment/twikoo.styl
View File

@ -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)
}
}
}
}

74
source/css/layout/_partial/comment/valine.styl
View File

@ -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)
}
}
}
}

6
source/css/layout/_partial/first-screen.styl
View File

@ -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

28
source/css/layout/_partial/footer.styl
View File

@ -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
}
}

293
source/css/layout/_partial/header.styl
View File

@ -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 2rem
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
}

48
source/css/layout/_partial/image-viewer.styl
View File

@ -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 0.2rem
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")
}
}

74
source/css/layout/_partial/local-search.styl
View File

@ -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,20 @@ $search-header-height = 3rem
font-size $icon-size
cursor pointer
&:hover .fas, far, fab {
&:hover {
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 +107,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 +118,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 +152,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)
}
}
}
}

154
source/css/layout/_partial/page-template.styl
View File

@ -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, 2rem, 2rem)
.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
}
}
}
}
}
}
}
}

9
source/css/layout/_partial/paginator.styl
View File

@ -1,13 +1,12 @@
.paginator {
font-size: 1rem;
margin-top: 30px;
margin-top 2rem
font-size 1rem
a.prev {
float: left;
float left
}
a.next {
float: right;
float right
}
}

43
source/css/layout/_partial/post-tools.styl
View File

@ -1,52 +1,51 @@
$li-border-radius = 5px;
$li-margin-bottom = 12px;
$li-border-radius = 0.4rem
$li-margin-bottom = 0.8rem
.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
}
}
}
}
}

81
source/css/layout/_partial/progress-bar.styl
View File

@ -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
}
}
}
}

87
source/css/layout/_partial/side-tools.styl
View File

@ -1,55 +1,55 @@
$tools-item-width = 32px;
$tools-item-font-size = 1.1rem;
$tools-item-border-radius = 1px;
$tools-item-width = 2.2rem
$tools-item-font-size = 1.1rem
$tools-item-border-radius = 0.1rem
.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 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 0.1rem 0.1rem 0.2rem 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 0.2rem 0.2rem 0.4rem 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 0.2rem
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 0.2rem 0.2rem 0.4rem 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
}
}
}
}
}

10
source/css/layout/_partial/tagcloud.styl
View File

@ -1,15 +1,15 @@
.tagcloud-container {
keep-container(false, 0, 0, 20px, 0);
keep-container(false, 0, 0, 1.5rem, 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 0.7rem 0.5rem
}
}
}

53
source/css/layout/_partial/toc.styl
View File

@ -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)
}
}
}

2
source/css/layout/archive-content.styl
View File

@ -1,5 +1,5 @@
.archive-container {
keep-container(false, 0, 0, 30px, 30px);
keep-container(false, 0, 0, 2rem, 2rem)
}

212
source/css/layout/article-content.styl
View File

@ -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, 2rem, 2rem)
+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
}
}
}
}

24
source/css/layout/category-content.styl
View File

@ -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, 2rem, 2rem)
.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);
}
}

37
source/css/layout/category-list.styl
View File

@ -1,58 +1,57 @@
.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 {
font-size: 1rem;
margin-bottom: 15px;
margin-bottom 1rem
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 1rem
margin-left: 10px;
margin-top: 15px;
margin-left 0.9rem
li {
&::before {
content: '- ';
content '- '
}
margin-bottom: 10px;
margin-bottom 0.9rem
&:last-child {
margin-bottom: 0;
}
margin-bottom 0
}
}
}
}
}
}
}

87
source/css/layout/home-content.styl
View File

@ -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)
}
}
}
}
}
}

162
source/css/layout/page.styl
View File

@ -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%
}
}

24
source/css/layout/tag-content.styl
View File

@ -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, 2rem, 2rem)
.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);
}
}

43
source/js/back2top.js
View File

@ -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()
}

140
source/js/code-block-tools.js
View File

@ -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 = `<span class="tool fold tooltip" data-content="${foldLang}"><i class="fas fa-chevron-down"></i></span>`
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 ? '<span class="code-lang">' + codeLang + '</span>' : ''}`
@ -30,72 +36,74 @@ KEEP.initCodeBlockTools = () => {
${isMac ? foldDom + codeLangDom : '<span>' + foldDom + codeLangDom + '</span>'}
<span class="tool copy tooltip" data-content="${copyLang}"><i class="fas fa-copy"></i></span>
</div>`
);
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)
}
});
});
})
})
}

52
source/js/dark-light-toggle.js
View File

@ -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()
}

40
source/js/header-shrink.js
View File

@ -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()
}

43
source/js/lazyload.js
View File

@ -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)
}
}
}

37
source/js/left-side-toggle.js
View File

@ -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)
}

325
source/js/local-search.js
View File

@ -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 += `<b class="search-keyword">${text.substring(hit.position, end)}</b>`;
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 += `<b class="search-keyword">${text.substring(hit.position, end)}</b>`
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 += `<li><a href="${url}" class="search-result-title">${highlightKeyword(title, slicesOfTitle[0])}</a>`;
resultItem += `<li><a href="${url}" class="search-result-title">${highlightKeyword(
title,
slicesOfTitle[0]
)}</a>`
} else {
resultItem += `<li><a href="${url}" class="search-result-title">${title}</a>`;
resultItem += `<li><a href="${url}" class="search-result-title">${title}</a>`
}
slicesOfContent.forEach(slice => {
resultItem += `<a href="${url}"><p class="search-result">${highlightKeyword(content, slice)}...</p></a>`;
});
slicesOfContent.forEach((slice) => {
resultItem += `<a href="${url}"><p class="search-result">${highlightKeyword(
content,
slice
)}...</p></a>`
})
resultItem += '</li>';
resultItem += '</li>'
resultItems.push({
item: resultItem,
id: resultItems.length,
hitCount,
searchTextCount
});
})
}
});
})
}
if (keywords.length === 1 && keywords[0] === '') {
resultContent.innerHTML = '<div id="no-result"><i class="fas fa-search fa-5x"></i></div>';
resultContent.innerHTML = '<div id="no-result"><i class="fas fa-search fa-5x"></i></div>'
} else if (resultItems.length === 0) {
resultContent.innerHTML = '<div id="no-result"><i class="fas fa-box-open fa-5x"></i></div>';
resultContent.innerHTML = '<div id="no-result"><i class="fas fa-box-open fa-5x"></i></div>'
} 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 = '<ul class="search-result-list">'
resultItems.forEach((result) => {
searchResultList += result.item
})
searchResultList += '</ul>'
resultContent.innerHTML = searchResultList
window.pjax && window.pjax.refresh(resultContent)
}
return resultRight.id - resultLeft.id;
});
let searchResultList = '<ul class="search-result-list">';
resultItems.forEach(result => {
searchResultList += result.item;
});
searchResultList += '</ul>';
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 => {
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);
}
}
)
: 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 = '<i class="fas fa-search fa-5x"></i>');
});
};
const noResultDom = document.querySelector('#no-result')
noResultDom && (noResultDom.innerHTML = '<i class="fas fa-search fa-5x"></i>')
})
}
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()
}
});
})
}

51
source/js/main.js
View File

@ -1,14 +1,15 @@
/* global KEEP */
window.addEventListener('DOMContentLoaded', () => {
const { version, local_search, code_block_tools, code_copy, lazyload } = KEEP.theme_config
KEEP.themeInfo = {
theme: `Keep v3.4.7`,
theme: `Keep v${version}`,
author: 'XPoet',
repository: 'https://github.com/XPoet/hexo-theme-keep'
}
KEEP.localStorageKey = 'KEEP-THEME-STATUS';
KEEP.localStorageKey = 'KEEP-THEME-STATUS'
KEEP.styleStatus = {
isExpandPageWidth: false,
@ -21,51 +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 (KEEP.theme_config.local_search?.enable === true) {
KEEP.initLocalSearch();
if (local_search?.enable === true) {
KEEP.initLocalSearch()
}
if (
KEEP.theme_config.code_block_tools?.enable === true
|| KEEP.theme_config.code_copy?.enable === true
) {
KEEP.initCodeBlockTools();
if (code_block_tools?.enable === true || code_copy?.enable === true) {
KEEP.initCodeBlockTools()
}
if (KEEP.theme_config.lazyload?.enable === true) {
KEEP.initLazyLoad();
if (lazyload?.enable === true) {
KEEP.initLazyLoad()
}
}
KEEP.printThemeInfo();
KEEP.refresh();
});
KEEP.printThemeInfo()
KEEP.refresh()
})

103
source/js/toc.js
View File

@ -1,32 +1,34 @@
/* 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;
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,
@ -34,73 +36,76 @@ function initTOC() {
scrollTop: offset - 10,
complete: function () {
setTimeout(() => {
KEEP.utils.pageTop_dom.classList.add('hide');
KEEP.utils.pageTop_dom.classList.add('hide')
}, 100)
}
});
});
return target;
});
})
})
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)
}

345
source/js/utils.js
View File

@ -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',
`<span class="tooltip-content">${content}</span>`
);
)
}
});
})
}
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()
}