指间的诗意
GitHub
commit
db0694bb73
|
|
@ -7,6 +7,7 @@
|
|||
|
||||
# dependencies
|
||||
/node_modules
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
|
||||
# IDEs and editors
|
||||
|
|
@ -41,4 +42,4 @@ testem.log
|
|||
|
||||
# System Files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
Thumbs.db
|
||||
|
|
|
|||
|
|
@ -1 +1,4 @@
|
|||
node_modules
|
||||
/.github/FUNDING.yml
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"useTabs": false,
|
||||
"endOfLine": "auto",
|
||||
"tabWidth": 2,
|
||||
"printWidth": 100,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none",
|
||||
"bracketSpacing": true,
|
||||
"semi": false
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
module.exports = {
|
||||
extends: [
|
||||
'stylelint-config-rational-order',
|
||||
'stylelint-stylus/standard'
|
||||
],
|
||||
rules: {
|
||||
'stylus/pythonic': 'never'
|
||||
}
|
||||
}
|
||||
12
_config.yml
12
_config.yml
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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') %> <span id="busuanzi_value_site_uv"></span> 
|
||||
</span>
|
||||
<%- __('site_uv') %> <span id="busuanzi_value_site_uv"></span> 
|
||||
<% } %>
|
||||
<% if (bsz_site_pv) { %>
|
||||
<span id="busuanzi_container_site_pv">
|
||||
<%- __('site_pv') %> <span id="busuanzi_value_site_pv"></span>
|
||||
</span>
|
||||
<%- __('site_pv') %> <span id="busuanzi_value_site_pv"></span>
|
||||
<% } %>
|
||||
</div>
|
||||
<% } %>
|
||||
<div class="theme-info info-item">
|
||||
<%- __('powered_by', '<a target="_blank" href="https://hexo.io">Hexo</a>') %> | <%- __('theme') %>
|
||||
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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
17
package.json
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
);
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
) {
|
||||
// Exit if the href attribute doesn't exists.
|
||||
if (!href) return match;
|
||||
data.content = data.content.replace(
|
||||
regPureATag,
|
||||
function (match, attrBegin, href, attrEnd, html) {
|
||||
// Exit if the href attribute doesn't exists.
|
||||
if (!href) return match
|
||||
|
||||
let link = '';
|
||||
try {
|
||||
link = new URL(href);
|
||||
} catch (e) {
|
||||
// Invalid url, e.g. Anchor link.
|
||||
return match;
|
||||
let link = ''
|
||||
try {
|
||||
link = new URL(href)
|
||||
} catch (e) {
|
||||
// Invalid url, e.g. Anchor link.
|
||||
return match
|
||||
}
|
||||
|
||||
// Exit if the url has same host with `config.url`, which means isn't an external link.
|
||||
if (!link.protocol || link.hostname === siteHost) return match
|
||||
|
||||
return `<a class="link" ${attrBegin} href="${href}" ${attrEnd}>${html}<i class="fas fa-external-link-alt"></i></a>`
|
||||
}
|
||||
|
||||
// Exit if the url has same host with `config.url`, which means isn't an external link.
|
||||
if (!link.protocol || link.hostname === siteHost) return match;
|
||||
|
||||
return (
|
||||
`<a class="link" ${attrBegin} href="${href}" ${attrEnd}>${html}<i class="fas fa-external-link-alt"></i></a>`
|
||||
)
|
||||
})
|
||||
)
|
||||
},
|
||||
0
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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>`
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@require 'variables.styl'
|
||||
@require 'animated.styl'
|
||||
@require 'keep-theme.styl'
|
||||
@import 'variables.styl'
|
||||
@import 'animated.styl'
|
||||
@import 'keep-theme.styl'
|
||||
|
||||
// ======================================================================
|
||||
// all
|
||||
|
|
@ -17,14 +17,14 @@
|
|||
// ====================================
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width 6px
|
||||
height 6px
|
||||
width 0.4rem
|
||||
height 0.4rem
|
||||
transition all 0.2s ease
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background var(--scrollbar-color)
|
||||
border-radius 1px
|
||||
border-radius 0.1rem
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
|
|
@ -36,22 +36,23 @@
|
|||
// ======================================================================
|
||||
// html, body
|
||||
// ======================================================================
|
||||
html, body {
|
||||
html
|
||||
body {
|
||||
position relative
|
||||
width 100%
|
||||
height 100%
|
||||
margin 0
|
||||
padding 0
|
||||
color var(--default-text-color)
|
||||
background var(--background-color)
|
||||
font-family $default-font-family
|
||||
font-weight $default-font-weight
|
||||
font-size $default-font-size
|
||||
font-family $default-font-family
|
||||
line-height $default-font-line-height
|
||||
background var(--background-color)
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width 8px
|
||||
height 8px
|
||||
width 0.4rem
|
||||
height 0.4rem
|
||||
}
|
||||
|
||||
+keep-tablet() {
|
||||
|
|
@ -64,7 +65,6 @@ html, body {
|
|||
font-size $default-font-size * 0.9
|
||||
line-height $default-font-line-height * 0.9
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -72,17 +72,19 @@ html, body {
|
|||
// selection
|
||||
// ======================================================================
|
||||
::selection {
|
||||
background var(--selection-color)
|
||||
color #fff
|
||||
background var(--selection-color)
|
||||
}
|
||||
|
||||
|
||||
// ======================================================================
|
||||
// ul, ol, li
|
||||
// ======================================================================
|
||||
ul, ol, li {
|
||||
padding 0
|
||||
ul
|
||||
ol
|
||||
li {
|
||||
margin 0
|
||||
padding 0
|
||||
list-style none
|
||||
}
|
||||
|
||||
|
|
@ -91,22 +93,24 @@ ul, ol, li {
|
|||
// a
|
||||
// ======================================================================
|
||||
a {
|
||||
text-decoration none
|
||||
color var(--default-text-color)
|
||||
text-decoration none
|
||||
|
||||
i, span {
|
||||
i
|
||||
span {
|
||||
color var(--default-text-color)
|
||||
}
|
||||
|
||||
&:hover, &:active {
|
||||
text-decoration none !important
|
||||
&:hover
|
||||
&:active {
|
||||
color var(--primary-color)
|
||||
text-decoration none !important
|
||||
|
||||
i, span {
|
||||
i
|
||||
span {
|
||||
color var(--primary-color)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -115,8 +119,8 @@ a {
|
|||
// ======================================================================
|
||||
img {
|
||||
&[lazyload] {
|
||||
padding 10px
|
||||
margin 20px auto !important
|
||||
margin 1.4rem auto !important
|
||||
padding 0.8rem
|
||||
cursor not-allowed
|
||||
pointer-events none
|
||||
}
|
||||
|
|
@ -127,23 +131,23 @@ img {
|
|||
// button
|
||||
// ======================================================================
|
||||
button {
|
||||
padding 0
|
||||
margin 0
|
||||
padding 0
|
||||
background transparent
|
||||
border 0
|
||||
outline none
|
||||
cursor pointer
|
||||
background transparent
|
||||
}
|
||||
|
||||
.btn {
|
||||
display inline-block
|
||||
position relative
|
||||
text-align center
|
||||
cursor pointer
|
||||
display inline-block
|
||||
padding 0.4rem 1rem
|
||||
white-space nowrap
|
||||
border-radius 5px
|
||||
padding 8px 16px
|
||||
text-align center
|
||||
background var(--background-color)
|
||||
border-radius 5px
|
||||
cursor pointer
|
||||
|
||||
hover-style(true, 1.06, 1.06)
|
||||
|
||||
|
|
@ -159,8 +163,8 @@ button {
|
|||
// ======================================================================
|
||||
.flex-center {
|
||||
display flex
|
||||
justify-content center
|
||||
align-items center
|
||||
justify-content center
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -169,12 +173,12 @@ button {
|
|||
// ======================================================================
|
||||
.clear {
|
||||
&::after {
|
||||
content ''
|
||||
display block
|
||||
clear both
|
||||
visibility hidden
|
||||
overflow hidden
|
||||
height 0
|
||||
overflow hidden
|
||||
visibility hidden
|
||||
content ''
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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")
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.archive-container {
|
||||
keep-container(false, 0, 0, 30px, 30px);
|
||||
keep-container(false, 0, 0, 2rem, 2rem)
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
});
|
||||
});
|
||||
})
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 => {
|
||||
return {
|
||||
title: element.querySelector('title').textContent,
|
||||
content: element.querySelector('content').textContent,
|
||||
url: element.querySelector('url').textContent
|
||||
};
|
||||
}) : JSON.parse(res);
|
||||
isfetched = true
|
||||
datas = isXml
|
||||
? [...new DOMParser().parseFromString(res, 'text/xml').querySelectorAll('entry')].map(
|
||||
(element) => {
|
||||
return {
|
||||
title: element.querySelector('title').textContent,
|
||||
content: element.querySelector('content').textContent,
|
||||
url: element.querySelector('url').textContent
|
||||
}
|
||||
}
|
||||
)
|
||||
: JSON.parse(res)
|
||||
// Only match articles with not empty titles
|
||||
datas = datas.filter(data => data.title).map(data => {
|
||||
data.title = data.title.trim();
|
||||
data.content = data.content ? data.content.trim().replace(/<[^>]+>/g, '') : '';
|
||||
data.url = decodeURIComponent(data.url).replace(/\/{2,}/g, '/');
|
||||
return data;
|
||||
});
|
||||
datas = datas
|
||||
.filter((data) => data.title)
|
||||
.map((data) => {
|
||||
data.title = data.title.trim()
|
||||
data.content = data.content ? data.content.trim().replace(/<[^>]+>/g, '') : ''
|
||||
data.url = decodeURIComponent(data.url).replace(/\/{2,}/g, '/')
|
||||
return data
|
||||
})
|
||||
// Remove loading animation
|
||||
const noResultDom = document.querySelector('#no-result');
|
||||
noResultDom && (noResultDom.innerHTML = '<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()
|
||||
}
|
||||
});
|
||||
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
})
|
||||
|
|
|
|||
121
source/js/toc.js
121
source/js/toc.js
|
|
@ -1,106 +1,111 @@
|
|||
/* global KEEP */
|
||||
|
||||
function initTOC() {
|
||||
KEEP.utils.navItems = document.querySelectorAll('.post-toc-wrap .post-toc li');
|
||||
KEEP.utils.navItems = document.querySelectorAll('.post-toc-wrap .post-toc li')
|
||||
|
||||
if (KEEP.utils.navItems.length > 0) {
|
||||
|
||||
KEEP.utils = {
|
||||
|
||||
...KEEP.utils,
|
||||
|
||||
findActiveIndexByTOC() {
|
||||
if (!Array.isArray(KEEP.utils.sections)) return;
|
||||
let index = KEEP.utils.sections.findIndex(element => {
|
||||
return element && element.getBoundingClientRect().top - 20 > 0;
|
||||
});
|
||||
if (!Array.isArray(KEEP.utils.sections)) return
|
||||
let index = KEEP.utils.sections.findIndex((element) => {
|
||||
return element && element.getBoundingClientRect().top - 20 > 0
|
||||
})
|
||||
if (index === -1) {
|
||||
index = KEEP.utils.sections.length - 1;
|
||||
index = KEEP.utils.sections.length - 1
|
||||
} else if (index > 0) {
|
||||
index--;
|
||||
index--
|
||||
}
|
||||
this.activateNavByIndex(index);
|
||||
this.activateNavByIndex(index)
|
||||
},
|
||||
|
||||
registerSidebarTOC() {
|
||||
KEEP.utils.sections = [...document.querySelectorAll('.post-toc li a.nav-link')].map(element => {
|
||||
const target = document.getElementById(decodeURI(element.getAttribute('href')).replace('#', ''));
|
||||
element.addEventListener('click', event => {
|
||||
event.preventDefault();
|
||||
const offset = target.getBoundingClientRect().top + window.scrollY;
|
||||
window.anime({
|
||||
targets: document.scrollingElement,
|
||||
duration: 500,
|
||||
easing: 'linear',
|
||||
scrollTop: offset - 10,
|
||||
complete: function () {
|
||||
setTimeout(() => {
|
||||
KEEP.utils.pageTop_dom.classList.add('hide');
|
||||
}, 100)
|
||||
}
|
||||
});
|
||||
});
|
||||
return target;
|
||||
});
|
||||
KEEP.utils.sections = [...document.querySelectorAll('.post-toc li a.nav-link')].map(
|
||||
(element) => {
|
||||
const target = document.getElementById(
|
||||
decodeURI(element.getAttribute('href')).replace('#', '')
|
||||
)
|
||||
element.addEventListener('click', (event) => {
|
||||
event.preventDefault()
|
||||
const offset = target.getBoundingClientRect().top + window.scrollY
|
||||
window.anime({
|
||||
targets: document.scrollingElement,
|
||||
duration: 500,
|
||||
easing: 'linear',
|
||||
scrollTop: offset - 10,
|
||||
complete: function () {
|
||||
setTimeout(() => {
|
||||
KEEP.utils.pageTop_dom.classList.add('hide')
|
||||
}, 100)
|
||||
}
|
||||
})
|
||||
})
|
||||
return target
|
||||
}
|
||||
)
|
||||
},
|
||||
|
||||
activateNavByIndex(index) {
|
||||
const target = document.querySelectorAll('.post-toc li a.nav-link')[index];
|
||||
if (!target || target.classList.contains('active-current')) return;
|
||||
const target = document.querySelectorAll('.post-toc li a.nav-link')[index]
|
||||
if (!target || target.classList.contains('active-current')) return
|
||||
|
||||
document.querySelectorAll('.post-toc .active').forEach(element => {
|
||||
element.classList.remove('active', 'active-current');
|
||||
});
|
||||
target.classList.add('active', 'active-current');
|
||||
let parent = target.parentNode;
|
||||
document.querySelectorAll('.post-toc .active').forEach((element) => {
|
||||
element.classList.remove('active', 'active-current')
|
||||
})
|
||||
target.classList.add('active', 'active-current')
|
||||
let parent = target.parentNode
|
||||
while (!parent.matches('.post-toc')) {
|
||||
if (parent.matches('li')) parent.classList.add('active');
|
||||
parent = parent.parentNode;
|
||||
if (parent.matches('li')) parent.classList.add('active')
|
||||
parent = parent.parentNode
|
||||
}
|
||||
// Scrolling to center active TOC element if TOC content is taller then viewport.
|
||||
const tocElement = document.querySelector('.post-toc-wrap');
|
||||
const tocElement = document.querySelector('.post-toc-wrap')
|
||||
window.anime({
|
||||
targets: tocElement,
|
||||
duration: 200,
|
||||
easing: 'linear',
|
||||
scrollTop: tocElement.scrollTop - (tocElement.offsetHeight / 2) + target.getBoundingClientRect().top - tocElement.getBoundingClientRect().top
|
||||
});
|
||||
scrollTop:
|
||||
tocElement.scrollTop -
|
||||
tocElement.offsetHeight / 2 +
|
||||
target.getBoundingClientRect().top -
|
||||
tocElement.getBoundingClientRect().top
|
||||
})
|
||||
},
|
||||
|
||||
showPageAsideWhenHasTOC() {
|
||||
|
||||
const openHandle = () => {
|
||||
const styleStatus = KEEP.getStyleStatus();
|
||||
const key = 'isOpenPageAside';
|
||||
const styleStatus = KEEP.getStyleStatus()
|
||||
const key = 'isOpenPageAside'
|
||||
if (styleStatus && styleStatus.hasOwnProperty(key)) {
|
||||
KEEP.utils.leftSideToggle.pageAsideHandleOfTOC(styleStatus[key]);
|
||||
KEEP.utils.leftSideToggle.pageAsideHandleOfTOC(styleStatus[key])
|
||||
} else {
|
||||
KEEP.utils.leftSideToggle.pageAsideHandleOfTOC(true);
|
||||
KEEP.utils.leftSideToggle.pageAsideHandleOfTOC(true)
|
||||
}
|
||||
}
|
||||
|
||||
const initOpenKey = 'init_open';
|
||||
const initOpenKey = 'init_open'
|
||||
|
||||
if (KEEP.theme_config.toc.hasOwnProperty(initOpenKey)) {
|
||||
KEEP.theme_config.toc[initOpenKey] ? openHandle() : KEEP.utils.leftSideToggle.pageAsideHandleOfTOC(false);
|
||||
|
||||
KEEP.theme_config.toc[initOpenKey]
|
||||
? openHandle()
|
||||
: KEEP.utils.leftSideToggle.pageAsideHandleOfTOC(false)
|
||||
} else {
|
||||
openHandle();
|
||||
openHandle()
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
KEEP.utils.showPageAsideWhenHasTOC();
|
||||
KEEP.utils.registerSidebarTOC();
|
||||
|
||||
KEEP.utils.showPageAsideWhenHasTOC()
|
||||
KEEP.utils.registerSidebarTOC()
|
||||
} else {
|
||||
const pageAsideDom = document.querySelector('.page-aside');
|
||||
pageAsideDom && KEEP.utils.pageContainer_dom.removeChild(pageAsideDom);
|
||||
const pageAsideDom = document.querySelector('.page-aside')
|
||||
pageAsideDom && KEEP.utils.pageContainer_dom.removeChild(pageAsideDom)
|
||||
}
|
||||
}
|
||||
|
||||
if (KEEP.theme_config.pjax.enable === true && KEEP.utils) {
|
||||
initTOC();
|
||||
initTOC()
|
||||
} else {
|
||||
window.addEventListener('DOMContentLoaded', initTOC);
|
||||
window.addEventListener('DOMContentLoaded', initTOC)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue