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

Merge pull request #175 from XPoet/dev 

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

1
.gitignore vendored
View File

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

3
.npmignore
View File

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

10
.prettierrc Normal file
View File

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

9
.stylelintrc.js Normal file
View File

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

12
_config.yml
View File

@ -1,3 +1,9 @@
## ======================================================================================
## Keep v3.4.8
## Repository: https://github.com/XPoet/hexo-theme-keep
## Document: https://keep-docs.xpoet.cn
## ======================================================================================
# --------------------------------------------------------------------------------------- # ---------------------------------------------------------------------------------------
# Your basic info # Your basic info
# --------------------------------------------------------------------------------------- # ---------------------------------------------------------------------------------------
@ -254,9 +260,3 @@ footer:
since: 2020 # the starting year of your website. Can be null since: 2020 # the starting year of your website. Can be null
icp: # ICP record number 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 upyun: # If your site is deployed on upyun, your can fill the upyun url. Can be null
# ---------------------------------------------------------------------------------------
# Keep version
# Please don't modify
# ---------------------------------------------------------------------------------------
version: 3.4.7

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

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

10
layout/_partial/footer.ejs
View File

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

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

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

2
layout/_partial/scripts.ejs
View File

@ -21,7 +21,7 @@ const {
<%- __js('js/local-search.js') %> <%- __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') %> <%- __js('js/code-block-tools.js') %>
<% } %> <% } %>

17
package.json
View File

@ -1,11 +1,14 @@
{ {
"name": "hexo-theme-keep", "name": "hexo-theme-keep",
"version": "3.4.7", "version": "3.4.8",
"private": false, "private": false,
"description": "A simple and elegant theme for Hexo.", "description": "A simple and elegant theme for Hexo.",
"scripts": { "scripts": {
"release": "git push --tag && git push -u origin dev", "npm:publish": "npm publish",
"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": { "repository": {
"type": "git", "type": "git",
@ -25,5 +28,11 @@
"bugs": { "bugs": {
"url": "https://github.com/XPoet/hexo-theme-keep/issues" "url": "https://github.com/XPoet/hexo-theme-keep/issues"
}, },
"homepage": "https://github.com/XPoet/hexo-theme-keep#readme" "homepage": "https://github.com/XPoet/hexo-theme-keep#readme",
"devDependencies": {
"prettier": "^2.7.1",
"stylelint": "^14.13.0",
"stylelint-config-rational-order": "^0.1.2",
"stylelint-stylus": "^0.17.0"
}
} }

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

@ -2,14 +2,14 @@
hexo.extend.filter.register( hexo.extend.filter.register(
'after_post_render', 'after_post_render',
function (data) { function (data) {
const theme = hexo.theme.config; const theme = hexo.theme.config
if (!theme.lazyload || !theme.lazyload.enable) return; if (!theme.lazyload || !theme.lazyload.enable) return
data.content = data.content.replace( data.content = data.content.replace(
// Match 'img' tags width the src attribute. // Match 'img' tags width the src attribute.
/<img([^>]*)src="([^"]*)"([^>\/]*)\/?\s*>/gim, /<img([^>]*)src="([^"]*)"([^>\/]*)\/?\s*>/gim,
function (match, attrBegin, src, attrEnd) { function (match, attrBegin, src, attrEnd) {
// Exit if the src doesn't exists. // Exit if the src doesn't exists.
if (!src) return match; if (!src) return match
return `<img ${attrBegin} return `<img ${attrBegin}
lazyload lazyload
@ -21,4 +21,4 @@ hexo.extend.filter.register(
) )
}, },
1 1
); )

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

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

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

@ -1,39 +1,38 @@
/* global hexo */ /* global hexo */
'use strict';
const url = require('url'); 'use strict'
const fs = require('fs');
const path = require('path'); const url = require('url')
const yaml = require('js-yaml'); const fs = require('fs')
const path = require('path')
const yaml = require('js-yaml')
/** /**
* Export theme config to js * Export theme config to js
*/ */
hexo.extend.helper.register('export_config', function () { hexo.extend.helper.register('export_config', function () {
const { config, theme } = this
const { config, theme } = this;
// ------------------------ export language to js ------------------------ // ------------------------ export language to js ------------------------
const languageDir = path.join(__dirname, '../../languages'); const languageDir = path.join(__dirname, '../../languages')
let file = fs.readdirSync(languageDir).find(v => v === `${config.language}.yml`); let file = fs.readdirSync(languageDir).find((v) => v === `${config.language}.yml`)
file = languageDir + '/' + (file ? file : 'en.yml'); file = languageDir + '/' + (file ? file : 'en.yml')
let languageContent = fs.readFileSync(file, 'utf8'); let languageContent = fs.readFileSync(file, 'utf8')
try { try {
languageContent = yaml.load(languageContent); languageContent = yaml.load(languageContent)
} catch (e) { } catch (err) {
console.log(e); console.log(err)
} }
// ----------------------------------------------------------------------- // -----------------------------------------------------------------------
let hexo_config = { let hexo_config = {
hostname: url.parse(config.url).hostname || config.url, hostname: url.parse(config.url).hostname || config.url,
root: config.root, root: config.root,
language: config.language language: config.language
}; }
if (config.search) { if (config.search) {
hexo_config.path = config.search.path; hexo_config.path = config.search.path
} }
let theme_config = { let theme_config = {
@ -45,7 +44,7 @@ hexo.extend.helper.register('export_config', function () {
side_tools: theme.side_tools || {}, side_tools: theme.side_tools || {},
pjax: theme.pjax || {}, pjax: theme.pjax || {},
lazyload: theme.lazyload || {}, lazyload: theme.lazyload || {},
version: theme.version version: require('../../package.json').version
} }
return `<script id="hexo-configurations"> return `<script id="hexo-configurations">
@ -54,5 +53,5 @@ hexo.extend.helper.register('export_config', function () {
KEEP.theme_config = ${JSON.stringify(theme_config)}; KEEP.theme_config = ${JSON.stringify(theme_config)};
KEEP.language_ago = ${JSON.stringify(languageContent['ago'])}; KEEP.language_ago = ${JSON.stringify(languageContent['ago'])};
KEEP.language_code_block = ${JSON.stringify(languageContent['code_block'])}; KEEP.language_code_block = ${JSON.stringify(languageContent['code_block'])};
</script>`; </script>`
}); })

83
scripts/helpers/helper.js
View File

@ -2,103 +2,102 @@
'use strict' 'use strict'
const url = require('url'); const url = require('url')
hexo.extend.helper.register('isInHomePaging', function (pagePath, route) { hexo.extend.helper.register('isInHomePaging', function (pagePath, route) {
if (pagePath.length > 5 && route === '/') { if (pagePath.length > 5 && route === '/') {
return pagePath.slice(0, 5) === 'page/'; return pagePath.slice(0, 5) === 'page/'
} else { } else {
return false; return false
} }
}); })
hexo.extend.helper.register('createNewArchivePosts', function (posts) { hexo.extend.helper.register('createNewArchivePosts', function (posts) {
const postList = [], postYearList = []; const postList = [],
posts.forEach(post => postYearList.push(post.date.year())); postYearList = []
Array.from(new Set(postYearList)).forEach(year => { posts.forEach((post) => postYearList.push(post.date.year()))
Array.from(new Set(postYearList)).forEach((year) => {
postList.push({ postList.push({
year: year, year: year,
postList: [] postList: []
}) })
}); })
postList.sort((a, b) => b.year - a.year) postList.sort((a, b) => b.year - a.year)
postList.forEach(item => { postList.forEach((item) => {
posts.forEach(post => item.year === post.date.year() && item.postList.push(post)) 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())); postList.forEach((item) => item.postList.sort((a, b) => b.date.unix() - a.date.unix()))
return postList; return postList
}); })
hexo.extend.helper.register('getAuthorLabel', function (postCount, isAuto, labelList) { hexo.extend.helper.register('getAuthorLabel', function (postCount, isAuto, labelList) {
let level = Math.floor(Math.log2(postCount))
let level = Math.floor(Math.log2(postCount)); level = level < 2 ? 1 : level - 1
level = level < 2 ? 1 : level - 1;
if (isAuto === false && Array.isArray(labelList) && labelList.length > 0) { 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 { } else {
return `Lv${level}`; return `Lv${level}`
} }
})
});
hexo.extend.helper.register('getPostUrl', function (rootUrl, path) { hexo.extend.helper.register('getPostUrl', function (rootUrl, path) {
if (rootUrl) { if (rootUrl) {
let { href } = url.parse(rootUrl); let { href } = url.parse(rootUrl)
if (href.substr(href.length - 1, 1) !== '/') { if (href.substr(href.length - 1, 1) !== '/') {
href = href + '/'; href = href + '/'
} }
return href + path; return href + path
} else { } else {
return path; return path
} }
}); })
const getSourceCdnUrl = (tyle, themeConfig, path) => { const getSourceCdnUrl = (tyle, themeConfig, path) => {
const { version = '3.4.7', cdn = {} } = themeConfig const version = require('../../package.json').version
const { provider = 'jsdelivr' } = cdn const { provider = 'jsdelivr' } = themeConfig?.cdn
let urlPrefix = '' let urlPrefix = ''
switch (provider.toLocaleLowerCase()) { switch (provider.toLocaleLowerCase()) {
case 'jsdelivr': case 'jsdelivr':
urlPrefix = '//cdn.jsdelivr.net/npm/hexo-theme-keep' urlPrefix = '//cdn.jsdelivr.net/npm/hexo-theme-keep'
if (tyle === 'js') { if (tyle === 'js') {
return `<script src="${urlPrefix}@${version}/source/${path}"></script>`; return `<script src="${urlPrefix}@${version}/source/${path}"></script>`
} else { } else {
return `<link rel="stylesheet" href="${urlPrefix}@${version}/source/${path}">`; return `<link rel="stylesheet" href="${urlPrefix}@${version}/source/${path}">`
} }
case 'unpkg': case 'unpkg':
urlPrefix = '//unpkg.com/hexo-theme-keep' urlPrefix = '//unpkg.com/hexo-theme-keep'
if (tyle === 'js') { if (tyle === 'js') {
return `<script src="${urlPrefix}@${version}/source/${path}"></script>`; return `<script src="${urlPrefix}@${version}/source/${path}"></script>`
} else { } 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) { hexo.extend.helper.register('__js', function (path) {
const { enable } = this.theme.cdn 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) => { 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)) { if (Array.isArray(path)) {
for (const p of path) { for (const p of path) {
t += cdnPathHandle(p); t += cdnPathHandle(p)
} }
} else { } else {
t = cdnPathHandle(path); t = cdnPathHandle(path)
} }
return t; return t
}); })
hexo.extend.helper.register('__css', function (path) { hexo.extend.helper.register('__css', function (path) {
const { enable } = this.theme.cdn const { enable } = this.theme.cdn
const _css = hexo.extend.helper.get('css').bind(hexo); const _css = hexo.extend.helper.get('css').bind(hexo)
return enable ? getSourceCdnUrl('css', this.theme, path) : _css(path); return enable ? getSourceCdnUrl('css', this.theme, path) : _css(path)
}); })

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

@ -1,26 +1,21 @@
hexo.on('generateBefore', function () { hexo.on('generateBefore', function () {
if (hexo.locals.get) { if (hexo.locals.get) {
const data = hexo.locals.get('data'); const data = hexo.locals.get('data')
if (data) { if (data) {
// theme config file handle // theme config file handle
if (data._config) { if (data._config) {
hexo.theme.config = data._config; hexo.theme.config = data._config
} else if (data.keep) { } else if (data.keep) {
hexo.theme.config = data.keep; hexo.theme.config = data.keep
} else if (data._keep) { } else if (data._keep) {
hexo.theme.config = data._keep; hexo.theme.config = data._keep
} }
// friends link file handle // friends link file handle
if (data.links || data.link) { if (data.links || data.link) {
hexo.theme.config.links = (data.links || data.link); hexo.theme.config.links = data.links || data.link
} }
} }
} }
}); })

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

@ -1,102 +1,107 @@
transition-g() { transition-g() {
transition-property: color, background, box-shadow, border-color; transition-delay 0s, 0s, 0s, 0s
transition-delay: 0s, 0s, 0s, 0s; transition-timing-function ease, ease, ease, ease
transition-duration: 0.2s, 0.2s, 0.2s, 0.2s; transition-duration 0.2s, 0.2s, 0.2s, 0.2s
transition-timing-function: ease, ease, ease, ease; transition-property color, background, box-shadow, border-color
} }
transition-t(property, delay, duration, function) { transition-t(property, delay, duration, function) {
$temp-property = "color, background, box-shadow, border-color"; $temp-property = "color, background, box-shadow, border-color"
$temp-delay = "0s, 0s, 0s, 0s"; $temp-delay = "0s, 0s, 0s, 0s"
$temp-duration = "0.2s, 0.2s, 0.2s, 0.2s"; $temp-duration = "0.2s, 0.2s, 0.2s, 0.2s"
$temp-function = "ease, ease, ease, ease"; $temp-function = "ease, ease, ease, ease"
for p in convert(property) { for p in convert(property) {
$temp-property += ("," + p); $temp-property += ("," + p)
} }
for d in convert(delay) { for d in convert(delay) {
$temp-delay += ("," + d + "s"); $temp-delay += ("," + d + "s")
} }
for d in convert(duration) { for d in convert(duration) {
$temp-duration += ("," + d + "s"); $temp-duration += ("," + d + "s")
} }
for f in convert(function) { 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-property convert($temp-property)
transition-delay: convert($temp-delay);
transition-duration: convert($temp-duration);
transition-timing-function: convert($temp-function);
} }
.fade-in-down-animation { .fade-in-down-animation {
animation-fill-mode: both; animation-name fade-in-down
animation-duration: 1s; animation-duration 1s
animation-name: fade-in-down; animation-fill-mode both
} }
@keyframes fade-in-down { @keyframes fade-in-down {
0% { 0% {
opacity: 0; transform translateY(-50px)
transform: translateY(-50px); opacity 0
} }
100% { 100% {
opacity: 1; transform translateY(0)
transform: translateY(0); opacity 1
} }
} }
@keyframes icon-animate { @keyframes icon-animate {
0%, 100% { 0%
transform: scale(1); 100% {
transform scale(1)
} }
10%, 30% { 10%
transform: scale(.88); 30% {
transform scale(0.88)
} }
20%, 40%, 60%, 80% { 20%
transform: scale(1.08); 40%
60%
80% {
transform scale(1.08)
} }
50%, 70% { 50%
transform: scale(1.08); 70% {
transform scale(1.08)
} }
} }
.title-hover-animation { .title-hover-animation {
display: inline-block; position relative
position: relative; display inline-block
border-bottom: none; color var(--second-text-color)
line-height: 1.3; line-height 1.3
vertical-align: top; vertical-align top
color: var(--second-text-color); border-bottom none
&::before { &::before {
content: ""; position absolute
position: absolute; bottom -4px
width: 100%; left 0
height: 2px; width 100%
bottom: -4px; height 2px
left: 0; background-color var(--second-text-color)
background-color: var(--second-text-color); transform scaleX(0)
visibility: hidden; visibility hidden
transform: scaleX(0); content ""
transition-t("visibility transform", "0, 0", "0.2, 0.2", "ease-in-out, ease-in-out"); transition-t("visibility transform", "0, 0", "0.2, 0.2", "ease-in-out, ease-in-out")
} }
&:hover::before { &:hover::before {
visibility: visible; transform scaleX(1)
transform: scaleX(1); visibility visible
} }
} }

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

@ -1,6 +1,6 @@
@require 'variables.styl' @import 'variables.styl'
@require 'animated.styl' @import 'animated.styl'
@require 'keep-theme.styl' @import 'keep-theme.styl'
// ====================================================================== // ======================================================================
// all // all
@ -17,14 +17,14 @@
// ==================================== // ====================================
&::-webkit-scrollbar { &::-webkit-scrollbar {
width 6px width 0.4rem
height 6px height 0.4rem
transition all 0.2s ease transition all 0.2s ease
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background var(--scrollbar-color) background var(--scrollbar-color)
border-radius 1px border-radius 0.1rem
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
@ -36,22 +36,23 @@
// ====================================================================== // ======================================================================
// html, body // html, body
// ====================================================================== // ======================================================================
html, body { html
body {
position relative position relative
width 100% width 100%
height 100% height 100%
margin 0 margin 0
padding 0 padding 0
color var(--default-text-color) color var(--default-text-color)
background var(--background-color)
font-family $default-font-family
font-weight $default-font-weight font-weight $default-font-weight
font-size $default-font-size font-size $default-font-size
font-family $default-font-family
line-height $default-font-line-height line-height $default-font-line-height
background var(--background-color)
&::-webkit-scrollbar { &::-webkit-scrollbar {
width 8px width 0.4rem
height 8px height 0.4rem
} }
+keep-tablet() { +keep-tablet() {
@ -64,7 +65,6 @@ html, body {
font-size $default-font-size * 0.9 font-size $default-font-size * 0.9
line-height $default-font-line-height * 0.9 line-height $default-font-line-height * 0.9
} }
} }
@ -72,17 +72,19 @@ html, body {
// selection // selection
// ====================================================================== // ======================================================================
::selection { ::selection {
background var(--selection-color)
color #fff color #fff
background var(--selection-color)
} }
// ====================================================================== // ======================================================================
// ul, ol, li // ul, ol, li
// ====================================================================== // ======================================================================
ul, ol, li { ul
padding 0 ol
li {
margin 0 margin 0
padding 0
list-style none list-style none
} }
@ -91,22 +93,24 @@ ul, ol, li {
// a // a
// ====================================================================== // ======================================================================
a { a {
text-decoration none
color var(--default-text-color) color var(--default-text-color)
text-decoration none
i, span { i
span {
color var(--default-text-color) color var(--default-text-color)
} }
&:hover, &:active { &:hover
text-decoration none !important &:active {
color var(--primary-color) color var(--primary-color)
text-decoration none !important
i, span { i
span {
color var(--primary-color) color var(--primary-color)
} }
} }
} }
@ -115,8 +119,8 @@ a {
// ====================================================================== // ======================================================================
img { img {
&[lazyload] { &[lazyload] {
padding 10px margin 1.4rem auto !important
margin 20px auto !important padding 0.8rem
cursor not-allowed cursor not-allowed
pointer-events none pointer-events none
} }
@ -127,23 +131,23 @@ img {
// button // button
// ====================================================================== // ======================================================================
button { button {
padding 0
margin 0 margin 0
padding 0
background transparent
border 0 border 0
outline none outline none
cursor pointer cursor pointer
background transparent
} }
.btn { .btn {
display inline-block
position relative position relative
text-align center display inline-block
cursor pointer padding 0.4rem 1rem
white-space nowrap white-space nowrap
border-radius 5px text-align center
padding 8px 16px
background var(--background-color) background var(--background-color)
border-radius 5px
cursor pointer
hover-style(true, 1.06, 1.06) hover-style(true, 1.06, 1.06)
@ -159,8 +163,8 @@ button {
// ====================================================================== // ======================================================================
.flex-center { .flex-center {
display flex display flex
justify-content center
align-items center align-items center
justify-content center
} }
@ -169,12 +173,12 @@ button {
// ====================================================================== // ======================================================================
.clear { .clear {
&::after { &::after {
content ''
display block display block
clear both clear both
visibility hidden
overflow hidden
height 0 height 0
overflow hidden
visibility hidden
content ''
} }
} }
@ -194,17 +198,17 @@ button {
.tooltip-content { .tooltip-content {
position absolute position absolute
top -140% top 0
left 50% 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 z-index $z-index-9
display none
padding 0.2rem 0.6rem
color var(--fourth-text-color)
font-size 0.8rem
white-space nowrap white-space nowrap
background var(--first-text-color)
border-radius 0.3rem
transform translateX(-50%) translateY(-108%)
transition-t("display", "0", "0.2", "ease") transition-t("display", "0", "0.2", "ease")
} }
} }

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

@ -11,28 +11,28 @@ disable-user-select() {
margin 1.4rem 0 margin 1.4rem 0
.code-tools-box { .code-tools-box {
display flex
align-items center
justify-content space-between
box-sizing border-box box-sizing border-box
width 100% width 100%
padding 0.3rem 0.4rem
background var(--fourth-text-color) background var(--fourth-text-color)
border-top-left-radius 0.3rem border-top-left-radius 0.3rem
border-top-right-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 { &.folded {
border-bottom-left-radius 0.3rem
border-bottom-right-radius 0.3rem border-bottom-right-radius 0.3rem
border-bottom-left-radius 0.3rem
} }
.code-lang { .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 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 { .tool {
@ -47,10 +47,8 @@ disable-user-select() {
.fold { .fold {
font-weight bold
padding 0 0.4rem 0 0.2rem 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') { if (hexo-config('code_block_tools.style') == 'mac' || hexo-config('code_copy.style') == 'mac') {
margin 1.4rem 0 1.8rem 0 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 { &:hover {
.code-tools-box .copy { .code-tools-box .copy {
@ -75,23 +73,23 @@ disable-user-select() {
.code-tools-box { .code-tools-box {
justify-content flex-end justify-content flex-end
background #21252b
padding 0.4rem 0.6rem 0.7rem 0.4rem padding 0.4rem 0.6rem 0.7rem 0.4rem
background #21252b
&::before { &::before {
position absolute position absolute
content ''
width 0.8rem
height 0.8rem
left 0.8rem left 0.8rem
width 0.76rem
height 0.76rem
background #fc625d background #fc625d
border-radius 50% 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 { &.folded {
border-bottom-left-radius 0
border-bottom-right-radius 0 border-bottom-right-radius 0
border-bottom-left-radius 0
.copy { .copy {
display none display none
@ -114,8 +112,8 @@ disable-user-select() {
.copy { .copy {
position absolute position absolute
bottom 0.3rem
right 0.5rem right 0.5rem
bottom 0.3rem
padding 0 0.1rem padding 0 0.1rem
font-weight bold font-weight bold
opacity 0 opacity 0
@ -124,11 +122,7 @@ disable-user-select() {
i { i {
font-size 1rem font-size 1rem
} }
} }
} }
} }
} }

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

@ -35,20 +35,20 @@ $night-highlight-deletion = #008000
$night-highlight-addition = #800000 $night-highlight-addition = #800000
code-theme(mode) { code-theme(mode) {
--code-foreground: mode == 'light' ? $code-foreground : $night-code-foreground --code-foreground mode == 'light' ? $code-foreground : $night-code-foreground
--code-background: mode == 'light' ? $code-background : $night-code-background --code-background mode == 'light' ? $code-background : $night-code-background
--highlight-background: mode == 'light' ? $highlight-background : $night-highlight-background --highlight-background mode == 'light' ? $highlight-background : $night-highlight-background
--highlight-foreground: mode == 'light' ? $highlight-foreground : $night-highlight-foreground --highlight-foreground mode == 'light' ? $highlight-foreground : $night-highlight-foreground
--highlight-comment: mode == 'light' ? $highlight-comment : $night-highlight-comment --highlight-comment mode == 'light' ? $highlight-comment : $night-highlight-comment
--highlight-red: mode == 'light' ? $highlight-red : $night-highlight-red --highlight-red mode == 'light' ? $highlight-red : $night-highlight-red
--highlight-orange: mode == 'light' ? $highlight-orange : $night-highlight-orange --highlight-orange mode == 'light' ? $highlight-orange : $night-highlight-orange
--highlight-yellow: mode == 'light' ? $highlight-yellow : $night-highlight-yellow --highlight-yellow mode == 'light' ? $highlight-yellow : $night-highlight-yellow
--highlight-green: mode == 'light' ? $highlight-green : $night-highlight-green --highlight-green mode == 'light' ? $highlight-green : $night-highlight-green
--highlight-aqua: mode == 'light' ? $highlight-aqua : $night-highlight-aqua --highlight-aqua mode == 'light' ? $highlight-aqua : $night-highlight-aqua
--highlight-blue: mode == 'light' ? $highlight-blue : $night-highlight-blue --highlight-blue mode == 'light' ? $highlight-blue : $night-highlight-blue
--highlight-purple: mode == 'light' ? $highlight-purple : $night-highlight-purple --highlight-purple mode == 'light' ? $highlight-purple : $night-highlight-purple
--highlight-gutter-color: mode == 'light' ? $highlight-gutter-color : $night-highlight-gutter-color --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 --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') code-theme('light')
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme light) {
:root { :root {
code-theme('light') code-theme('light')
} }
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme dark) {
:root { :root {
code-theme('dark') code-theme('dark')
} }

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

@ -1,70 +1,71 @@
@require "code-theme.styl" @import "code-theme.styl"
$code-block { $code-block {
overflow auto margin 1.5rem 0
margin 20px 0
padding 0 padding 0
overflow auto
color var(--highlight-foreground)
font-size 0.96rem font-size 0.96rem
line-height 1.5rem line-height 1.5rem
color var(--highlight-foreground)
background var(--highlight-background) background var(--highlight-background)
} }
pre, code { pre
code {
font-family "Source Code Pro", consolas, Menlo font-family "Source Code Pro", consolas, Menlo
} }
code { code {
padding 5px padding 0.4rem
word-wrap break-word
border-radius 2px
font-size 0.96rem
color var(--code-foreground) color var(--code-foreground)
font-size 0.96rem
word-wrap break-word
background var(--code-background) background var(--code-background)
border-radius 0.2rem
} }
pre { pre {
@extend $code-block @extend $code-block
padding 10px padding 0.6rem
code { code {
padding 0 padding 0
color var(--highlight-foreground) color var(--highlight-foreground)
background none
text-shadow none text-shadow none
background none
} }
} }
.highlight { .highlight {
@extend $code-block @extend $code-block
border-radius 1px border-radius 0.1rem
pre { pre {
border none
margin 0 margin 0
padding 10px 0 padding 0.6rem 0
border none
} }
table { table {
margin 0
width auto width auto
margin 0
border none border none
border-spacing unset border-spacing unset
} }
td { td {
border none
padding 0 padding 0
border none
} }
figcaption { figcaption {
font-size 1rem
color var(--highlight-foreground)
line-height 1rem
margin-bottom 1rem margin-bottom 1rem
color var(--highlight-foreground)
font-size 1rem
line-height 1rem
a { a {
float right float right
@ -77,8 +78,8 @@ pre {
} }
.gutter pre { .gutter pre {
padding-left 10px padding-right 0.6rem
padding-right 10px padding-left 0.6rem
color var(--highlight-gutter-color) color var(--highlight-gutter-color)
text-align center text-align center
background-color var(--highlight-gutter-bg-color) background-color var(--highlight-gutter-bg-color)
@ -86,13 +87,13 @@ pre {
.code pre { .code pre {
width 100% width 100%
padding-left 10px padding-right 0.6rem
padding-right 10px padding-left 0.6rem
background-color var(--highlight-background) background-color var(--highlight-background)
} }
.line { .line {
height 20px height 1.5rem
color var(--default-text-color) color var(--default-text-color)
.attr { .attr {
@ -102,7 +103,6 @@ pre {
.string { .string {
color var(--default-text-color) color var(--default-text-color)
} }
} }
} }
@ -200,5 +200,4 @@ pre {
.javascript .function { .javascript .function {
color var(--highlight-purple) color var(--highlight-purple)
} }
} }

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

@ -1,53 +1,53 @@
$keep-container-border-radius = 5px; $keep-container-border-radius = 5px
hover-style(isTransform, scaleX, scaleY) { hover-style(isTransform, scaleX, scaleY) {
box-shadow: 2px 2px 5px var(--shadow-color); box-shadow 2px 2px 5px var(--shadow-color)
if (isTransform) { if (isTransform) {
transition-t("transform", "0", "0.2", "linear"); transition-t("transform", "0", "0.2", "linear")
} }
&:hover { &:hover {
if (hexo-config('style.hover.scale') && isTransform) { if (hexo-config('style.hover.scale') && isTransform) {
transform: scaleX(scaleX) scaleY(scaleX); transform scaleX(scaleX) scaleY(scaleX)
} }
if (hexo-config('style.hover.shadow')) { 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) { keep-container(isTransform, scaleX, scaleY, padding, marginBottomValue) {
padding: padding; box-sizing border-box
border-radius: $keep-container-border-radius; padding padding
box-sizing: border-box; background var(--background-color)
background: var(--background-color); border-radius $keep-container-border-radius
if (marginBottomValue != 0) { if (marginBottomValue != 0) {
margin-bottom: marginBottomValue; margin-bottom marginBottomValue
+keep-tablet() { +keep-tablet() {
margin-bottom: marginBottomValue * 0.8; margin-bottom marginBottomValue * 0.8
} }
+keep-mobile() { +keep-mobile() {
margin-bottom: marginBottomValue * 0.6; margin-bottom marginBottomValue * 0.6
} }
} }
hover-style(isTransform, scaleX, scaleY); hover-style(isTransform, scaleX, scaleY)
+keep-tablet() { +keep-tablet() {
padding: padding * 0.8; padding padding * 0.8
border-radius: $keep-container-border-radius * 0.8; border-radius $keep-container-border-radius * 0.8
} }
+keep-mobile() { +keep-mobile() {
padding: padding * 0.6; padding padding * 0.6
border-radius: $keep-container-border-radius * 0.6; border-radius $keep-container-border-radius * 0.6
} }
} }

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

@ -1,86 +1,90 @@
.markdown-body { .markdown-body {
font-size: 1rem; font-size 1rem
blockquote { blockquote {
p, p
ul, ul
ol { ol {
padding: 5px 5px 5px 10px; padding 0.4rem 0.4rem 0.4rem 0.8rem
} }
box-sizing: border-box; box-sizing border-box
border-left: 5px solid var(--default-text-color); margin 1.4rem 0
margin: 20px 0; color var(--default-text-color)
color: var(--default-text-color); background var(--second-background-color)
background: var(--second-background-color); border-left 0.4rem solid var(--default-text-color)
} }
p { p {
line-height: 2; color var(--default-text-color)
color: var(--default-text-color); line-height 2
} }
a { a {
position: relative; position relative
outline: 0; box-sizing border-box
text-decoration: none; padding-bottom 0.2rem
overflow-wrap: break-word; text-decoration none
cursor: pointer; overflow-wrap break-word
border-bottom: 1px solid var(--third-text-color); border-bottom 0.1rem solid var(--third-text-color)
box-sizing: border-box; outline 0
padding-bottom: 2px; cursor pointer
.fas, .far, fab { .fas
margin: 0 2px 0 6px; .far
position: relative; .fab {
color: var(--third-text-color); position relative
font-size: 0.88rem; margin 0 0.2rem 0 0.4rem
color var(--third-text-color)
font-size 0.88rem
} }
&:hover { &:hover {
text-decoration: underline; text-decoration underline
&::after { &::after {
background: var(--primary-color); background var(--primary-color)
} }
} }
} }
strong { strong {
color: var(--default-text-color); color var(--default-text-color)
} }
em { em {
color: var(--default-text-color); color var(--default-text-color)
} }
ul > li, ul
ol > li { ol {
margin-left: 16px; li {
line-height: 2rem; margin-left 1rem
line-height 2rem
}
} }
ul { ul {
li { li {
list-style: disc; list-style disc
ul { ul {
li { li {
list-style: circle; list-style circle
ul { ul {
li { li {
list-style: square; list-style square
} }
} }
} }
@ -92,16 +96,16 @@
ol { ol {
li { li {
list-style: decimal; list-style decimal
ol { ol {
li { li {
list-style: upper-alpha; list-style upper-alpha
ol { ol {
li { li {
list-style: upper-roman; list-style upper-roman
} }
} }
} }
@ -111,133 +115,138 @@
li { li {
color: var(--default-text-color); color var(--default-text-color)
} }
h1, h2, h3, h4, h5, h6 { h1
color: var(--second-text-color); h2
line-height: 1.5; h3
h4
h5
h6 {
color var(--second-text-color)
line-height 1.5
+keep-tablet() { +keep-tablet() {
line-height: 1.25; line-height 1.25
} }
} }
h1 { h1 {
font-size: 1.8rem; font-weight 600
font-weight: 600; font-size 1.8rem
+keep-tablet() { +keep-tablet() {
font-size: 1.7rem; font-size 1.7rem
} }
} }
h2 { h2 {
font-size: 1.7rem; font-weight 600
font-weight: 600; font-size 1.7rem
+keep-tablet() { +keep-tablet() {
font-size: 1.6rem; font-size 1.6rem
} }
} }
h3 { h3 {
font-size: 1.6rem; font-weight 550
font-weight: 550; font-size 1.6rem
+keep-tablet() { +keep-tablet() {
font-size: 1.5rem; font-size 1.5rem
} }
} }
h4 { h4 {
font-size: 1.5rem; font-weight 550
font-weight: 550; font-size 1.5rem
+keep-tablet() { +keep-tablet() {
font-size: 1.4rem; font-size 1.4rem
} }
} }
h5 { h5 {
font-size: 1.28rem; font-weight 500
font-weight: 500; font-size 1.28rem
+keep-tablet() { +keep-tablet() {
font-size: 1.18rem; font-size 1.18rem
} }
} }
h6 { h6 {
font-size: 1.2rem; font-weight 500
font-weight: 500; font-size 1.2rem
line-height: 1.2; line-height 1.2
+keep-tablet() { +keep-tablet() {
font-size: 1.1rem; font-size 1.1rem
line-height: 1.1; line-height 1.1
} }
} }
img { img {
box-sizing: border-box; display block
max-width: 100%; box-sizing border-box
cursor: zoom-in; max-width 100%
display: block; box-shadow 0 0 0.2rem var(--shadow-color)
box-shadow: 0 0 2px var(--shadow-color); cursor zoom-in
transition-t("padding, margin", "0, 0", "0.2, 0.2", "linear, linear"); 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') { if (hexo-config('post.img_align') == 'center' || hexo-config('style.article_img_align') == 'center') {
margin: 10px auto 2px; margin 0.8rem auto 0.2rem
} else { }
margin: 10px 0 2px; else {
margin 0.8rem 0 0.2rem
} }
} }
& > table { & > table {
border-spacing: 0; width 100%
border-collapse: collapse; overflow auto
width: 100%; border-collapse collapse
overflow: auto; border-spacing 0
+keep-mobile() { +keep-mobile() {
& { & {
table-layout: fixed; table-layout fixed
} }
} }
td, td
th { th {
padding: 0; padding 0
} }
th { th {
font-weight: 600; font-weight 600
} }
td, td
th { th {
padding: 6px 13px; padding 0.4rem 1rem
border: 1px solid var(--border-color); border 0.1rem solid var(--border-color)
} }
tr { tr {
background-color: var(--background-color); background-color var(--background-color)
border: 1px solid var(--fourth-text-color); border 0.1rem solid var(--fourth-text-color)
} }
tr:nth-child(2n) { tr:nth-child(2n) {
background-color: var(--second-background-color); background-color var(--second-background-color)
} }
} }
} }

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

@ -6,163 +6,167 @@
// ============================================================================================== // ==============================================================================================
// layout // layout
// ============================================================================================== // ==============================================================================================
$header-height = 70px; // header height $header-height = 70px // header height
$header-shrink-height = $header-height * 0.72; // header shrink height $header-shrink-height = $header-height * 0.72 // header shrink height
$scroll-progress-bar-height = 2px; // scroll progress bar height $scroll-progress-bar-height = 2px // scroll progress bar height
$main-content-width = 80%; // main content width (PC) $main-content-width = 80% // main content width (PC)
$main-content-width-tablet = 86%; // main content width (tablet) $main-content-width-tablet = 86% // main content width (tablet)
$main-content-width-mobile = 90%; // main content width (mobile) $main-content-width-mobile = 90% // main content width (mobile)
$post-tool-button-width = 38px; // post tool button width $post-tool-button-width = 38px // post tool button width
$component-spacing-value = 38px; // component-spacing-value (PC) $component-spacing-value = 38px // component-spacing-value (PC)
// main content max width // main content max width
$temp-content-max-width = hexo-config('style.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; $content-max-width = $temp-content-max-width ? convert($temp-content-max-width) : 1000px
// ============================================================================================== // ==============================================================================================
// media query // media query
// ============================================================================================== // ==============================================================================================
$media-max-width = 780px; // media query max width (tablet) $media-max-width = 780px // media query max width (tablet)
$media-max-width-mobile = 500px; // media query max width (mobile) $media-max-width-mobile = 500px // media query max width (mobile)
keep-tablet() keep-tablet() {
@media (max-width: $media-max-width) @media (max-width $media-max-width) {
{ block } { block }
}
}
keep-mobile() keep-mobile() {
@media (max-width: $media-max-width-mobile) @media (max-width $media-max-width-mobile) {
{ block } { block }
}
}
// ============================================================================================== // ==============================================================================================
// z-index // z-index
// ============================================================================================== // ==============================================================================================
$z-index-1 = 1001; $z-index-1 = 1001
$z-index-2 = 1002; $z-index-2 = 1002
$z-index-3 = 1003; $z-index-3 = 1003
$z-index-4 = 1004; $z-index-4 = 1004
$z-index-5 = 1005; $z-index-5 = 1005
$z-index-6 = 1006; $z-index-6 = 1006
$z-index-7 = 1007; $z-index-7 = 1007
$z-index-8 = 1008; $z-index-8 = 1008
$z-index-9 = 1009; $z-index-9 = 1009
// ============================================================================================== // ==============================================================================================
// theme primary color // theme primary color
// ============================================================================================== // ==============================================================================================
$temp-color = hexo-config('style.primary_color'); $temp-color = hexo-config('style.primary_color')
$primary-color = $temp-color ? convert($temp-color) : #0066CC; $primary-color = $temp-color ? convert($temp-color) : #0066cc
// ============================================================================================== // ==============================================================================================
// theme light mode color set // theme light mode color set
// ============================================================================================== // ==============================================================================================
$background-color = #fff; $background-color = #fff
$second-background-color = darken($background-color, 3%); $second-background-color = darken($background-color, 3%)
$default-text-color = #50505c; $default-text-color = #50505c
$first-text-color = darken($default-text-color, 10%); $first-text-color = darken($default-text-color, 10%)
$second-text-color = darken($default-text-color, 5%); $second-text-color = darken($default-text-color, 5%)
$third-text-color = lighten($default-text-color, 30%); $third-text-color = lighten($default-text-color, 30%)
$fourth-text-color = lighten($default-text-color, 90%); $fourth-text-color = lighten($default-text-color, 90%)
$border-color = darken($background-color, 30%); $border-color = darken($background-color, 30%)
$selection-color = lighten($primary-color, 10%); $selection-color = lighten($primary-color, 10%)
$shadow-color = rgba(0, 0, 0, 0.2); $shadow-color = rgba(0, 0, 0, 0.2)
$shadow-hover-color = rgba(0, 0, 0, 0.28); $shadow-hover-color = rgba(0, 0, 0, 0.28)
$scrollbar-color = lighten($default-text-color, 6%); $scrollbar-color = lighten($default-text-color, 6%)
$scroll-bar-bg-color = darken($background-color, 10%); $scroll-bar-bg-color = darken($background-color, 10%)
$link-color = darken($default-text-color, 10%); $link-color = darken($default-text-color, 10%)
$copyright-info-color = #CC0033; $copyright-info-color = #cc0033
$avatar-background-color = #0066CC; $avatar-background-color = #0066cc
$header-transparent-background-1 = alpha($background-color, 0.28); $header-transparent-background-1 = alpha($background-color, 0.28)
$header-transparent-background-2 = alpha($background-color, 0.58); $header-transparent-background-2 = alpha($background-color, 0.58)
$pjax-progress-bar-color = linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3); $pjax-progress-bar-color = linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3)
// ============================================================================================== // ==============================================================================================
// theme dark mode color set // theme dark mode color set
// ============================================================================================== // ==============================================================================================
$dark-primary-color = $primary-color; $dark-primary-color = $primary-color
$dark-background-color = #383940; $dark-background-color = #383940
$dark-second-background-color = darken($dark-background-color, 10%); $dark-second-background-color = darken($dark-background-color, 10%)
$dark-default-text-color = #bebec6; $dark-default-text-color = #bebec6
$dark-first-text-color = lighten($dark-default-text-color, 30%); $dark-first-text-color = lighten($dark-default-text-color, 30%)
$dark-second-text-color = lighten($dark-default-text-color, 20%); $dark-second-text-color = lighten($dark-default-text-color, 20%)
$dark-third-text-color = darken($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-fourth-text-color = darken($dark-default-text-color, 75%)
$dark-border-color = lighten($dark-background-color, 20%); $dark-border-color = lighten($dark-background-color, 20%)
$dark-selection-color = $selection-color; $dark-selection-color = $selection-color
$dark-shadow-color = rgba(128, 128, 128, 0.2); $dark-shadow-color = rgba(128, 128, 128, 0.2)
$dark-shadow-hover-color = rgba(128, 128, 128, 0.28); $dark-shadow-hover-color = rgba(128, 128, 128, 0.28)
$dark-scrollbar-color = darken($dark-background-color, 10%); $dark-scrollbar-color = darken($dark-background-color, 10%)
$dark-scroll-bar-bg-color = lighten($dark-background-color, 20%); $dark-scroll-bar-bg-color = lighten($dark-background-color, 20%)
$dark-link-color = lighten($dark-default-text-color, 10%); $dark-link-color = lighten($dark-default-text-color, 10%)
$dark-copyright-info-color = darken($copyright-info-color, 20%); $dark-copyright-info-color = darken($copyright-info-color, 20%)
$dark-avatar-background-color = darken($avatar-background-color, 10%); $dark-avatar-background-color = darken($avatar-background-color, 10%)
$dark-header-transparent-background-1 = alpha($dark-background-color, 0.28); $dark-header-transparent-background-1 = alpha($dark-background-color, 0.28)
$dark-header-transparent-background-2 = alpha($dark-background-color, 0.58); $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-pjax-progress-bar-color = linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee)
// ============================================================================================== // ==============================================================================================
// font // 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-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-size = 15.2px
$default-font-line-height = 22px; $default-font-line-height = 22px
$default-font-weight = 400; $default-font-weight = 400
// ============================================================================================== // ==============================================================================================
// light/dark mode color // light/dark mode color
// ============================================================================================== // ==============================================================================================
root-color(mode) { root-color(mode) {
--background-color: mode == 'light' ? $background-color : $dark-background-color; --background-color mode == 'light' ? $background-color : $dark-background-color
--second-background-color: mode == 'light' ? $second-background-color : $dark-second-background-color; --second-background-color mode == 'light' ? $second-background-color : $dark-second-background-color
--primary-color: mode == 'light' ? $primary-color : $dark-primary-color; --primary-color mode == 'light' ? $primary-color : $dark-primary-color
--first-text-color: mode == 'light' ? $first-text-color : $dark-first-text-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; --second-text-color mode == 'light' ? $second-text-color : $dark-second-text-color
--third-text-color: mode == 'light' ? $third-text-color : $dark-third-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; --fourth-text-color mode == 'light' ? $fourth-text-color : $dark-fourth-text-color
--default-text-color: mode == 'light' ? $default-text-color : $dark-default-text-color; --default-text-color mode == 'light' ? $default-text-color : $dark-default-text-color
--border-color: mode == 'light' ? $border-color : $dark-border-color; --border-color mode == 'light' ? $border-color : $dark-border-color
--selection-color: mode == 'light' ? $selection-color : $dark-selection-color; --selection-color mode == 'light' ? $selection-color : $dark-selection-color
--shadow-color: mode == 'light' ? $shadow-color : $dark-shadow-color; --shadow-color mode == 'light' ? $shadow-color : $dark-shadow-color
--shadow-hover-color: mode == 'light' ? $shadow-hover-color : $dark-shadow-hover-color; --shadow-hover-color mode == 'light' ? $shadow-hover-color : $dark-shadow-hover-color
--scrollbar-color: mode == 'light' ? $scrollbar-color : $dark-scrollbar-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; --scroll-bar-bg-color mode == 'light' ? $scroll-bar-bg-color : $dark-scroll-bar-bg-color
--link-color: mode == 'light' ? $link-color : $dark-link-color; --link-color mode == 'light' ? $link-color : $dark-link-color
--copyright-info-color: mode == 'light' ? $copyright-info-color : $dark-copyright-info-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; --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-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; --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; --pjax-progress-bar-color mode == 'light' ? $pjax-progress-bar-color : $dark-pjax-progress-bar-color
} }
:root { :root {
root-color('light'); root-color('light')
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme light) {
:root { :root {
root-color('light'); root-color('light')
} }
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme dark) {
:root { :root {
root-color('dark'); root-color('dark')
} }
} }
.light-mode { .light-mode {
root-color('light'); root-color('light')
} }
.dark-mode { .dark-mode {
root-color('dark'); root-color('dark')
} }

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

@ -1,80 +1,80 @@
$archive-year-font-size = 1.8rem; $archive-year-font-size = 1.8rem
$archive-year-count-font-size = 1.2rem; $archive-year-count-font-size = 1.2rem
$article-title-font-size = 1.2rem; $article-title-font-size = 1.2rem
$article-date-font-size = 1rem; $article-date-font-size = 1rem
.archive-list-container { .archive-list-container {
.archive-item { .archive-item {
margin-bottom: $component-spacing-value; margin-bottom $component-spacing-value
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom 0
} }
.archive-item-header { .archive-item-header {
margin-bottom: 10px; margin-bottom 0.8rem
.archive-year { .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() { +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 { .archive-year-post-count {
font-size: $archive-year-count-font-size; color var(--second-text-color)
font-weight: 500; font-weight 500
color: var(--second-text-color); font-size $archive-year-count-font-size
+keep-tablet() { +keep-tablet() {
font-size: $archive-year-count-font-size * 0.9; font-size $archive-year-count-font-size * 0.9
} }
} }
} }
.article-list { .article-list {
padding-left: 10px; padding-left 0.8rem
+keep-tablet() { +keep-tablet() {
padding-left: 0; padding-left 0
} }
.article-item { .article-item {
font-size: 1rem; margin-top 1.2rem
margin-top: 18px; font-size 1rem
+keep-tablet() { +keep-tablet() {
margin-top: 16px; margin-top 1.1rem
} }
+keep-mobile() { +keep-mobile() {
margin-top: 14px; margin-top 1rem
} }
&:hover { &:hover {
a.article-title, .article-date { a.article-title
color: var(--primary-color); .article-date {
color var(--primary-color)
} }
} }
a.article-title { a.article-title {
color: var(--default-text-color); color var(--default-text-color)
} }
.article-date { .article-date {
font-size: $article-date-font-size; float right
float: right; color var(--default-text-color)
font-size $article-date-font-size
} }
} }
} }

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

@ -1,39 +1,53 @@
.article-copyright-info-container { .article-copyright-info-container {
position: relative; position relative
width: 100%; box-sizing border-box
box-sizing: border-box; width 100%
padding: 10px 6px; overflow hidden
font-size: 1rem; font-size 1rem
background: var(--second-background-color); background var(--second-background-color)
&::after { &::after {
position: absolute; position absolute
top: 0; top 0
left: 0; left 0
content: ''; width 0.5rem
width: 6px; height 100%
height: 100%; background var(--copyright-info-color)
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 { li {
margin-bottom: 5px; margin-bottom 0.4rem
overflow: hidden; color var(--default-text-color)
text-overflow: ellipsis; white-space nowrap
white-space: nowrap;
color: var(--default-text-color);
.license { .license {
font-weight: bold; font-weight bold
} }
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom 0
} }
} }
} }

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

@ -1,59 +1,61 @@
.article-meta-info { .article-meta-info {
font-size: 0.8rem; font-size 0.8rem
.article-meta-item { .article-meta-item {
margin-right: 10px; margin-right 0.6rem
color: var(--third-text-color); color var(--third-text-color)
&:last-child { &:last-child {
margin-right: 0; margin-right 0
} }
} }
.article-date { .article-date {
.mobile { .mobile {
display: none; display none
} }
+keep-tablet() { +keep-tablet() {
.pc { .pc {
display: none; display none
} }
.mobile { .mobile {
display: inline; display inline
} }
} }
} }
.article-tags, .article-categories { .article-tags
display: inline; .article-categories {
display inline
ul, li { ul
display: inline; li {
display inline
} }
a { a {
color: var(--third-text-color); color var(--third-text-color)
&:hover { &:hover {
color: var(--primary-color); color var(--primary-color)
} }
} }
} }
.article-tags { .article-tags {
+keep-tablet() { +keep-tablet() {
display: none; display none
} }
} }
.article-min2read, .article-wordcount { .article-min2read
.article-wordcount {
+keep-mobile() { +keep-mobile() {
display: none; display none
} }
} }
} }

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

@ -1,39 +1,38 @@
if (hexo-config('comment.enable') == true && hexo-config('comment.use') != "") { if (hexo-config('comment.enable') == true && hexo-config('comment.use') != "") {
if (hexo-config('comment.use') == "valine") { if (hexo-config('comment.use') == "valine") {
@require "./valine.styl"; @import "./valine.styl"
}
} else if (hexo-config('comment.use') == "gitalk") { else if (hexo-config('comment.use') == "gitalk") {
@require "./gitalk.styl"; @import "./gitalk.styl"
}
} else if (hexo-config('comment.use') == "twikoo") { else if (hexo-config('comment.use') == "twikoo") {
@require "./twikoo.styl"; @import "./twikoo.styl"
} }
} }
.comments-container { .comments-container {
display: inline-block; display inline-block
margin-top: $component-spacing-value; width 100%
width: 100%; margin-top $component-spacing-value
#comment-anchor { #comment-anchor {
width: 100%; width 100%
height: 10px; height 0.8rem
} }
.comment-area-title { .comment-area-title {
width: 100%; width 100%
margin: 10px 0; margin 0.8rem 0
font-size: 1.38rem; color var(--default-text-color)
color: var(--default-text-color); font-size 1.38rem
i { i {
color: var(--default-text-color); color var(--default-text-color)
} }
+keep-tablet() { +keep-tablet() {
margin: 5px 0; margin 0.4rem 0
font-size: 1.2rem; font-size 1.2rem
} }
} }
} }

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

@ -1,9 +1,9 @@
/* variables */ // variables
$gt-color-main := #6190e8 $gt-color-main := #6190e8
$gt-color-sub := #a1a1a1 $gt-color-sub := #a1a1a1
$gt-color-loader := #999999 $gt-color-loader := #999999
$gt-color-error := #ff3860 $gt-color-error := #ff3860
$gt-color-hr := #E9E9E9 $gt-color-hr := #e9e9e9
$gt-color-comment-txt := #333333 $gt-color-comment-txt := #333333
$gt-color-link-active := #333333 $gt-color-link-active := #333333
$gt-color-btn := #ffffff $gt-color-btn := #ffffff
@ -12,442 +12,551 @@ $gt-size-border-radius := 5px
$gt-breakpoint-mobile := 479px $gt-breakpoint-mobile := 479px
$gt-mask-z-index := 9999 $gt-mask-z-index := 9999
/* functions & mixins */ // functions & mixins
clearfix() { clearfix() {
&:before, &:before
&:after { &: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) u = unit($px)
if (u is 'px') if (u is 'px') {
unit($px / $base-size, 'em') unit($px / $base-size, 'em')
else }
else {
unit($px, u) unit($px, u)
}
}
mobile() mobile() {
@media (max-width: $gt-breakpoint-mobile) @media (max-width $gt-breakpoint-mobile) {
{block} {block}
}
}
/* variables - calculated */ // variables - calculated
$gt-size-loader-dot := em(6px) $gt-size-loader-dot := em(6px)
$gt-size-loader := em(28px) $gt-size-loader := em(28px)
$gt-size-avatar := em(50px) $gt-size-avatar := em(50px)
$gt-size-avatar-mobi := em(32px) $gt-size-avatar-mobi := em(32px)
/* styles */ // styles
// Put everything under container to avoid style conflicts // Put everything under container to avoid style conflicts
.comments-container .comments-container {
.gt-container .gt-container {
box-sizing: border-box box-sizing border-box
* * {
box-sizing: border-box box-sizing border-box
font-size: $gt-size-base }
font-size $gt-size-base
// common // common
a a {
color: $gt-color-main color $gt-color-main
&:hover &:hover {
color: lighten($gt-color-main, 20%) color lighten($gt-color-main, 20%)
border-color: lighten($gt-color-main, 20%) border-color lighten($gt-color-main, 20%)
&.is--active }
color: $gt-color-link-active &.is--active {
cursor: default !important color $gt-color-link-active
&:hover cursor default !important
color: $gt-color-link-active &:hover {
.hide color $gt-color-link-active
display: none !important }
}
}
.hide {
display none !important
}
// icons // icons
.gt-svg .gt-svg {
display: inline-block display inline-block
width: em(16px) width em(16px)
height: em(16px) height em(16px)
vertical-align: sub vertical-align sub
svg svg {
width: 100% width 100%
height: 100% height 100%
fill: $gt-color-main fill $gt-color-main
.gt-ico }
display: inline-block }
&-text .gt-ico {
margin-left: em(5px) display inline-block
&-github &-text {
width: 100% margin-left em(5px)
height: 100% }
.gt-svg &-github {
width: 100% width 100%
height: 100% height 100%
svg .gt-svg {
fill: inherit width 100%
/* loader */ height 100%
.gt-spinner }
position: relative svg {
&::before fill inherit
content: '' }
box-sizing: border-box }
position: absolute }
top: 3px // loader
width: em(12px) .gt-spinner {
height: em(12px) position relative
margin-top: em(-3px) &::before {
margin-left: em(-6px) position absolute
border-radius: 50% top 3px
border: 1px solid $gt-color-btn box-sizing border-box
border-top-color: $gt-color-main width em(12px)
animation: gt-kf-rotate .6s linear infinite 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 .gt-loader {
position: relative position relative
border: 1px solid $gt-color-loader display inline-block
animation: ease gt-kf-rotate 1.5s infinite width $gt-size-loader
display: inline-block height $gt-size-loader
font-style: normal font-style normal
width: $gt-size-loader // font-size: $gt-size-loader
height: $gt-size-loader line-height $gt-size-loader
//font-size: $gt-size-loader border 1px solid $gt-color-loader
line-height: $gt-size-loader border-radius 50%
border-radius: 50% animation ease gt-kf-rotate 1.5s infinite
&:before &:before {
content: '' position absolute
position: absolute top 0
display: block left 50%
top: 0 display block
left: 50% width $gt-size-loader-dot
margin-top: -($gt-size-loader-dot / 2) height $gt-size-loader-dot
margin-left: -($gt-size-loader-dot / 2) margin-top -($gt-size-loader-dot / 2)
width: $gt-size-loader-dot margin-left -($gt-size-loader-dot / 2)
height: $gt-size-loader-dot background-color $gt-color-loader
background-color: $gt-color-loader border-radius 50%
border-radius: 50% content ''
}
}
// avatar // avatar
.gt-avatar .gt-avatar {
display: inline-block display inline-block
width: $gt-size-avatar width $gt-size-avatar
height: $gt-size-avatar height $gt-size-avatar
+mobile() +mobile() {
width: $gt-size-avatar-mobi width $gt-size-avatar-mobi
height: $gt-size-avatar-mobi height $gt-size-avatar-mobi
img }
width: 100% img {
height: auto width 100%
border-radius: 3px height auto
&-github border-radius 3px
width: $gt-size-avatar - em(2px) }
height: $gt-size-avatar - em(2px) &-github {
cursor: pointer width $gt-size-avatar - em(2px)
+mobile() height $gt-size-avatar - em(2px)
width: $gt-size-avatar-mobi - em(2px) cursor pointer
height: $gt-size-avatar-mobi - em(2px) +mobile() {
width $gt-size-avatar-mobi - em(2px)
height $gt-size-avatar-mobi - em(2px)
}
}
}
// button // button
.gt-btn .gt-btn {
padding: em(12px) em(20px) display inline-block
display: inline-block padding em(12px) em(20px)
line-height: 1 color $gt-color-btn
text-decoration: none font-size em(12px)
white-space: nowrap line-height 1
cursor: pointer white-space nowrap
border: 1px solid $gt-color-main text-decoration none
border-radius: $gt-size-border-radius background-color $gt-color-main
background-color: $gt-color-main border 1px solid $gt-color-main
color: $gt-color-btn border-radius $gt-size-border-radius
outline: none outline none
font-size: em(12px) cursor pointer
&-text &-text {
font-weight: 400 font-weight 400
&-loading }
position: relative &-loading {
margin-left: em(8px) position relative
display: inline-block display inline-block
width: em(12px) width em(12px)
height: em(16px) height em(16px)
vertical-align: top margin-left em(8px)
&.is--disable vertical-align top
cursor: not-allowed }
opacity: 0.5 &.is--disable {
&-login cursor not-allowed
margin-right: 0 opacity 0.5
&-preview }
background-color: var(--background-color) &-login {
color: $gt-color-main margin-right 0
&:hover }
background-color: var(--second-background-color) &-preview {
&-public color $gt-color-main
&:hover background-color var(--background-color)
background-color: lighten($gt-color-main, 20%) &:hover {
border-color: lighten($gt-color-main, 20%) background-color var(--second-background-color)
}
}
&-public {
&:hover {
background-color lighten($gt-color-main, 20%)
border-color lighten($gt-color-main, 20%)
}
}
}
}
&-loadmore &-loadmore
// loadmore // loadmore
/* error */ /* error */
.gt-error .gt-error {
text-align: center margin em(10px)
margin: em(10px) color $gt-color-error
color: $gt-color-error text-align center
}
/* initing */ // initing
.gt-initing .gt-initing {
padding: em(20px) 0 padding em(20px) 0
text-align: center text-align center
&-text &-text {
margin: em(10px) auto margin em(10px) auto
font-size: 92% font-size 92%
}
}
/* no int */ // no int
.gt-no-init .gt-no-init {
padding: em(20px) 0 padding em(20px) 0
text-align: center text-align center
}
/* link */ // link
.gt-link .gt-link {
border-bottom: 1px dotted $gt-color-main border-bottom 1px dotted $gt-color-main
&-counts, &-project &-counts
text-decoration: none &-project {
text-decoration none
}
}
/* meta */ // meta
.gt-meta .gt-meta {
margin: em(20px) 0 position relative
padding: em(16px) 0 z-index 10
position: relative margin em(20px) 0
border-bottom: 1px solid $gt-color-hr padding em(16px) 0
font-size: em(16px) font-size em(16px)
z-index: 10 border-bottom 1px solid $gt-color-hr
clearfix() clearfix()
}
.gt-counts .gt-counts {
margin: 0 em(10px) 0 0 margin 0 em(10px) 0 0
color: var(--default-text-color) color var(--default-text-color)
}
.gt-user .gt-user {
float: right float right
margin: 0 margin 0
font-size: 92% font-size 92%
&-pic &-pic {
width: 16px width 16px
height: 16px height 16px
vertical-align: top margin-right em(8px)
margin-right: em(8px) vertical-align top
&-inner }
display: inline-block &-inner {
cursor: pointer display inline-block
.gt-user-name cursor pointer
color: var(--default-text-color) .gt-user-name {
color var(--default-text-color)
}
}
.gt-ico .gt-ico {
margin: 0 0 0 em(5px) margin 0 0 0 em(5px)
svg svg {
fill: var(--default-text-color) fill var(--default-text-color)
.is--poping }
.gt-ico }
svg .is--poping {
fill: $gt-color-main .gt-ico {
svg {
fill $gt-color-main
}
}
}
}
.gt-version .gt-version {
color: $gt-color-sub margin-left em(6px)
margin-left: em(6px) color $gt-color-sub
}
.gt-copyright .gt-copyright {
margin: 0 em(15px) em(8px) margin 0 em(15px) em(8px)
border-top: 1px solid var(--border-color) padding-top em(8px)
padding-top: em(8px) border-top 1px solid var(--border-color)
}
/* popup */ // popup
.gt-popup .gt-popup {
position: absolute position absolute
right: 0 top em(38px)
top: em(38px) right 0
background: var(--background-color) display inline-block
display: inline-block padding em(10px) 0
border: 1px solid var(--border-color) font-size em(14px)
padding: em(10px) 0 letter-spacing 0.5px
font-size: em(14px) background var(--background-color)
letter-spacing: .5px border 1px solid var(--border-color)
.gt-action .gt-action {
cursor: pointer position relative
display: block display block
margin: em(8px) 0 margin em(8px) 0
padding: 0 em(18px) padding 0 em(18px)
position: relative text-decoration none
text-decoration: none cursor pointer
&.is--active &.is--active {
&:before &:before {
content: '' position absolute
width: em(4px) top em(7px)
height: em(4px) left em(8px)
background: $gt-color-main width em(4px)
position: absolute height em(4px)
left: em(8px) background $gt-color-main
top: em(7px) content ''
/* header */ }
.gt-header }
position: relative }
display: flex }
&-comment // header
flex: 1 .gt-header {
margin-left: em(20px) position relative
+mobile() display flex
margin-left: em(14px) &-comment {
&-textarea flex 1
padding: em(12px) margin-left em(20px)
display: block +mobile() {
box-sizing: border-box margin-left em(14px)
width: 100% }
min-height: em(82px) }
max-height: em(240px) &-textarea {
border-radius: $gt-size-border-radius display block
border: 1px solid var(--border-color) box-sizing border-box
font-size: em(14px) width 100%
word-wrap: break-word min-height em(82px)
resize: vertical max-height em(240px)
color: var(--default-text-color) padding em(12px)
background-color: var(--fourth-text-color) color var(--default-text-color)
outline: none font-size em(14px)
transition: all 0.25s ease word-wrap break-word
&:hover background-color var(--fourth-text-color)
background-color: var(--background-color) border 1px solid var(--border-color)
&-preview border-radius $gt-size-border-radius
padding: em(12px) outline none
border-radius: $gt-size-border-radius transition all 0.25s ease
border: 1px solid var(--border-color) resize vertical
background-color: var(--background-color) &:hover {
&-controls background-color var(--background-color)
position: relative }
margin: em(12px) 0 0 }
&-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() clearfix()
+mobile() +mobile() {
margin: 0 margin 0
&-tip }
font-size: em(14px) &-tip {
color: $gt-color-main color $gt-color-main
text-decoration: none font-size em(14px)
vertical-align: sub text-decoration none
+mobile() vertical-align sub
display: none +mobile() {
.gt-btn display none
float: right }
margin-left: em(20px) }
+mobile() .gt-btn {
float: none float right
width: 100% margin-left em(20px)
margin: em(12px) 0 0 +mobile() {
float none
width 100%
margin em(12px) 0 0
}
}
}
}
&:after &:after {
content: '' position fixed
position: fixed top 0
bottom: 100% right 0
left: 0 bottom 100%
right: 0 left 0
top: 0 opacity 0
opacity: 0 content ''
&.gt-input-focused }
position: relative &.gt-input-focused {
&:after position relative
content: '' &:after {
position: fixed position fixed
bottom: 0 top 0
left: 0 right 0
right: 0 bottom 0
top: 0 left 0
background: #000 z-index $gt-mask-z-index
opacity: 0.6 background #000
transition: opacity .3s, bottom 0s opacity 0.6
z-index: $gt-mask-z-index transition opacity 0.3s, bottom 0s
.gt-header-comment content ''
z-index: $gt-mask-z-index + 1 }
.gt-header-comment {
z-index $gt-mask-z-index + 1
}
}
/* comments */ // comments
.gt-comments .gt-comments {
padding-top: em(20px) padding-top em(20px)
&-null &-null {
text-align: center text-align center
&-controls }
margin: em(20px) 0 &-controls {
text-align: center margin em(20px) 0
text-align center
}
}
/* comment */ // comment
.gt-comment .gt-comment {
position: relative position relative
padding: em(10px) 0 display flex
display: flex padding em(10px) 0
&-content &-content {
flex: 1 flex 1
margin-left: em(20px) margin-left em(20px)
padding: em(12px) em(16px) padding em(12px) em(16px)
background-color: var(--second-background-color) overflow auto
overflow: auto background-color var(--second-background-color)
transition: all ease 0.25s transition all ease 0.25s
+mobile() +mobile() {
margin-left: em(14px) margin-left em(14px)
padding: em(10px) em(12px) padding em(10px) em(12px)
&-header }
margin-bottom: em(8px) }
font-size: em(14px) &-header {
position: relative position relative
&-block-1 margin-bottom em(8px)
float: right font-size em(14px)
height: em(22px) }
width: em(32px) &-block-1 {
&-block-2 float right
float: right width em(32px)
height: em(22px) height em(22px)
width: em(64px) }
&-username &-block-2 {
font-weight: 500 float right
color: $gt-color-main width em(64px)
text-decoration: none height em(22px)
&:hover }
text-decoration: underline &-username {
&-text color $gt-color-main
margin-left: em(8px) font-weight 500
color: $gt-color-sub text-decoration none
&-date &:hover {
margin-left: em(8px) text-decoration underline
color: $gt-color-sub }
&-like, &-edit, &-reply }
position: absolute &-text {
height: em(22px) margin-left em(8px)
&:hover color $gt-color-sub
cursor: pointer }
&-date {
margin-left em(8px)
color $gt-color-sub
}
&-like &-like
top: 0 &-edit
right: em(32px) &-reply {
&-edit, &-reply position absolute
top: 0 height em(22px)
right: 0 &:hover {
&-body cursor pointer
//color: $gt-color-comment-txt !important }
color: var(--second-text-color) !important }
.email-hidden-toggle a &-like {
display: inline-block; top 0
height: 12px; right em(32px)
padding: 0 9px; }
font-size: 12px; &-edit
font-weight: 600; &-reply {
line-height: 6px; top 0
color: #444d56; right 0
text-decoration: none; }
vertical-align: middle; &-body {
background: #dfe2e5; // color: $gt-color-comment-txt !important
border-radius: 1px; color var(--second-text-color) !important
&:hover .email-hidden-toggle a {
background-color: #c6cbd1; display inline-block
.email-hidden-reply height 12px
display: none; padding 0 9px
white-space: pre-wrap color #444d56
.email-signature-reply font-weight 600
padding: 0 15px; font-size 12px
margin: 15px 0; line-height 6px
color: #586069; text-decoration none
border-left: 4px solid #dfe2e5; vertical-align middle
.email-hidden-reply.expanded background #dfe2e5
display: block border-radius 1px
&-admin &:hover {
.gt-comment-content background-color #c6cbd1
background-color: var(--fourth-text-color) }
}
.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 @keyframes gt-kf-rotate {
0% 0% {
transform: rotate(0) transform rotate(0)
100% }
transform: rotate(360deg) 100% {
transform rotate(360deg)
}
}
}

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

@ -5,11 +5,11 @@
.tk-meta-input { .tk-meta-input {
.el-input { .el-input {
.el-input-group__prepend { .el-input-group__prepend {
color: var(--default-text-color); color var(--default-text-color)
} }
input { input {
color: var(--default-text-color); color var(--default-text-color)
} }
} }
} }
@ -17,7 +17,7 @@
.tk-input { .tk-input {
textarea { textarea {
color: var(--default-text-color); color var(--default-text-color)
} }
} }
@ -28,83 +28,76 @@
.tk-action-icon { .tk-action-icon {
svg { svg {
fill: var(--default-text-color); fill var(--default-text-color)
} }
&.OwO { &.OwO {
.OwO-body { .OwO-body {
color: var(--default-text-color); color var(--default-text-color)
background-color: var(--background-color); background-color var(--background-color)
} }
} }
} }
} }
.tk-preview { .tk-preview {
span { span {
background: var(--second-background-color); color var(--default-text-color)
color: var(--default-text-color); background var(--second-background-color)
} }
} }
} }
.tk-preview-container { .tk-preview-container {
color: var(--default-text-color); color var(--default-text-color)
} }
.tk-comments-container { .tk-comments-container {
.tk-comments-count { .tk-comments-count {
span { span {
color: var(--default-text-color); color var(--default-text-color)
} }
} }
} }
.tk-main { .tk-main {
margin-bottom: 20px; margin-bottom 1.4rem
.tk-meta { .tk-meta {
.tk-nick { .tk-nick {
color: var(--default-text-color); color var(--default-text-color)
} }
.tk-tag { .tk-tag {
&.tk-tag-green { &.tk-tag-green {
background: -webkit-linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5); color #fff
background: linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5); background -webkit-linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5)
color: #fff; background linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5)
border none; border none
border-radius: 5px; border-radius 0.4rem
} }
} }
.tk-time { .tk-time {
time { time {
color: var(--default-text-color); color var(--default-text-color)
} }
} }
} }
.tk-content { .tk-content {
color: var(--default-text-color); color var(--default-text-color)
} }
.tk-expand { .tk-expand {
color: var(--third-text-color); color var(--third-text-color)
} }
} }
} }
} }

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

@ -4,17 +4,17 @@
.vwrap { .vwrap {
border: 1px solid var(--third-text-color); border 0.1rem solid var(--third-text-color)
.vheader { .vheader {
.vinput { .vinput {
color: var(--default-text-color); color var(--default-text-color)
border-color: var(--third-text-color); border-color var(--third-text-color)
&:focus { &:focus {
border-bottom: 1px dashed var(--primary-color) !important; border-bottom 0.1rem dashed var(--primary-color) !important
} }
} }
} }
@ -23,45 +23,41 @@
.vedit { .vedit {
.veditor { .veditor {
color: var(--default-text-color); color var(--default-text-color)
} }
.vctrl { .vctrl {
.vicon { .vicon {
fill: var(--default-text-color); fill var(--default-text-color)
&.actived { &.actived {
fill: var(--primary-color); fill var(--primary-color)
} }
} }
} }
} }
button.vsubmit { button.vsubmit {
color var(--default-text-color) !important
background: transparent !important; background transparent !important
color: var(--default-text-color) !important; border 0.1rem solid var(--default-text-color) !important
border: 1px solid var(--default-text-color) !important;
&:hover { &:hover {
color: var(--primary-color) !important; color var(--primary-color) !important
border: 1px solid var(--primary-color) !important; border 0.1rem solid var(--primary-color) !important
} }
} }
} }
.vcount { .vcount {
color: var(--default-text-color); color var(--default-text-color)
.vnum { .vnum {
color: var(--second-text-color); color var(--second-text-color)
} }
} }
@ -70,14 +66,14 @@
.vnick { .vnick {
.author { .author {
font-weight: 450; margin-left 0.15rem
font-size: 12px; padding 0.15rem
padding: 2px; color #fff
background: -webkit-linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5); font-weight 450
background: linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5); font-size 0.9rem
color: #fff; background -webkit-linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5)
margin-left: 2px; background linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5)
border-radius: 2px; border-radius 0.15rem
} }
} }
@ -85,53 +81,49 @@
.vhead { .vhead {
.vnick { .vnick {
color: var(--primary-color); color var(--primary-color)
} }
.vsys { .vsys {
color: var(--default-text-color); color var(--default-text-color)
background: var(--fourth-text-color) !important; background var(--fourth-text-color) !important
} }
} }
.vcontent { .vcontent {
P { P {
color: var(--default-text-color); color var(--default-text-color)
code { code {
color: var(--code-foreground); color var(--code-foreground)
background: var(--code-background); background var(--code-background)
} }
} }
} }
.vh { .vh {
border-bottom-color: var(--border-color); border-bottom-color var(--border-color)
} }
.vquote { .vquote {
border-left-color: var(--border-color); border-left-color var(--border-color)
} }
} }
.vcopy { .vcopy {
color: var(--third-text-color); color var(--third-text-color)
} }
.vpage { .vpage {
.vmore { .vmore {
border: 1px solid var(--border-color); color var(--second-text-color)
color: var(--second-text-color); border 0.1rem solid var(--border-color)
} }
} }
} }
} }

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

@ -34,11 +34,11 @@ $first-screen-font-color = $temp-font-color ? convert($temp-font-color) : var(--
padding-top 2rem padding-top 2rem
.description { .description {
color $first-screen-font-color
font-weight bold font-weight bold
font-size $first-screen-font-size font-size $first-screen-font-size
line-height 1.8 line-height 1.8
text-align center text-align center
color $first-screen-font-color
+keep-tablet() { +keep-tablet() {
font-size $first-screen-font-size * 0.9 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 { .s-icon-list {
position absolute position absolute
box-sizing border-box
bottom 0 bottom 0
font-size $first-screen-icon-size
display flex display flex
box-sizing border-box
font-size $first-screen-icon-size
+keep-tablet() { +keep-tablet() {
font-size $first-screen-icon-size * 0.9 font-size $first-screen-icon-size * 0.9

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

@ -1,39 +1,37 @@
.footer { .footer {
font-size: 1rem; color var(--third-text-color)
color: var(--third-text-color); font-size 1rem
a { a {
color: var(--third-text-color); color var(--third-text-color)
&:hover { &:hover {
color: var(--primary-color); color var(--primary-color)
} }
} }
.info-container { .info-container {
padding-bottom: 1rem; padding-bottom 1rem
text-align: center; text-align center
} }
.info-item { .info-item {
margin: 0.3rem 0; margin 0.3rem 0
color var(--third-text-color)
&.ypyun-info a { &.ypyun-info a {
display: flex; display flex
align-items: center; align-items center
justify-content: center; justify-content center
img { img {
margin: 0 0.3rem; margin 0 0.3rem
} }
} }
} }
.icon-animate { .icon-animate {
animation: icon-animate 1.2s ease-in-out infinite; animation icon-animate 1.2s ease-in-out infinite
} }
} }

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

@ -1,96 +1,94 @@
$logo-title-font-size = 2rem; $logo-title-font-size = 2rem
$pc-search-icon-font-size = 1.5rem; $pc-search-icon-font-size = 1.5rem
$menu-bar-line-height = 2.5px; $menu-bar-line-height = 2.5px
$logo-image-box-width = 46px; $logo-image-box-width = 46px
.header-wrapper { .header-wrapper {
width: 100%; display flex
height: 100%; align-items center
box-sizing: border-box; justify-content center
display: flex; box-sizing border-box
align-items: center; width 100%
justify-content: center; height 100%
padding-top: $scroll-progress-bar-height; padding-top $scroll-progress-bar-height
background: var(--background-color); background var(--background-color)
hover-style(false, 0, 0); hover-style(false, 0, 0)
.header-content { .header-content {
position: relative; position relative
height: 100%; z-index $z-index-5
width: $main-content-width; display flex
max-width: $content-max-width; flex-direction row
display: flex; align-items center
flex-direction: row; justify-content space-between
justify-content: space-between; width $main-content-width
align-items: center; max-width $content-max-width
z-index: $z-index-5; height 100%
&.has-first-screen { &.has-first-screen {
max-width: $content-max-width * 1.2; max-width $content-max-width * 1.2
} }
+keep-tablet() { +keep-tablet() {
width: $main-content-width-tablet; width $main-content-width-tablet
} }
+keep-mobile() { +keep-mobile() {
width: $main-content-width-mobile; width $main-content-width-mobile
} }
.left { .left {
display: flex; display flex
align-items: center; align-items center
transition-t("transform", "0", "0.2", "linear"); transition-t("transform", "0", "0.2", "linear")
.header-shrink & { .header-shrink & {
transform: scale(0.72); transform scale(0.72)
transform-origin: left; transform-origin left
} }
if (hexo-config('base_info.logo_img') || hexo-config('style.logo')) { if (hexo-config('base_info.logo_img') || hexo-config('style.logo')) {
.logo-image { .logo-image {
width: $logo-image-box-width; width $logo-image-box-width
height: $logo-image-box-width; height $logo-image-box-width
margin-right: 8px; margin-right 8px
+keep-tablet() { +keep-tablet() {
width: $logo-image-box-width * 0.9; width $logo-image-box-width * 0.9
height: $logo-image-box-width * 0.9; height $logo-image-box-width * 0.9
} }
+keep-mobile() { +keep-mobile() {
width: $logo-image-box-width * 0.8; width $logo-image-box-width * 0.8
height: $logo-image-box-width * 0.8; height $logo-image-box-width * 0.8
} }
img { img {
border-radius: 6px; width 100%
width: 100%; border-radius 6px
} }
} }
} }
.logo-title { .logo-title {
font-size: $logo-title-font-size; color var(--first-text-color)
font-weight: bold; font-weight bold
letter-spacing: 1px; font-size $logo-title-font-size
line-height: 1; line-height 1
color: var(--first-text-color); letter-spacing 1px
+keep-tablet() { +keep-tablet() {
font-size: $logo-title-font-size * 0.9; font-size $logo-title-font-size * 0.9
} }
+keep-mobile() { +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 { .pc {
.menu-list { .menu-list {
display: flex; display flex
align-items: center; align-items center
+keep-tablet() { +keep-tablet() {
display: none; display none
} }
.menu-item { .menu-item {
float: left; position relative
position: relative; float left
margin-left: 30px; margin-left 2rem
font-size: 1rem; color var(--default-text-color)
cursor: pointer; font-size 1rem
color: var(--default-text-color); cursor pointer
&:first-child { &:first-child {
margin-left: 0; margin-left 0
} }
a:hover, .active { a:hover
.active {
&::after { &::after {
content: ''; position absolute
position: absolute; bottom -10px
bottom: -10px; left 50%
left: 50%; width 100%
width: 100%; height 2px
height: 2px; background var(--primary-color)
transform: translateX(-50%); transform translateX(-50%)
background: var(--primary-color); content ''
transition-t("transform, bottom", "0, 0", "0.2, 0.2", "linear, linear"); transition-t("transform, bottom", "0, 0", "0.2, 0.2", "linear, linear")
.header-shrink & { .header-shrink & {
bottom: -($header-shrink-height / 2 - 12); bottom -($header-shrink-height / 2 - 12)
} }
} }
} }
&.search { &.search {
font-size: $pc-search-icon-font-size; margin-left 26px
margin-left: 26px; font-size $pc-search-icon-font-size
i { i {
color: var(--default-text-color); color var(--default-text-color)
} }
} }
} }
} }
} }
.mobile { .mobile {
display: flex; display flex
justify-content: space-between; align-items center
align-items: center; justify-content space-between
.icon-item { .icon-item {
display: none; position relative
position: relative; display none
cursor: pointer; width 20px
font-size: 18px; height 20px
margin-left: 12px; margin-left 12px
width: 20px; color var(--default-text-color)
height: 20px; font-size 18px
color: var(--default-text-color); cursor pointer
i { i {
color: var(--default-text-color); color var(--default-text-color)
} }
&:first-child { &:first-child {
margin-left: 0; margin-left 0
} }
+keep-tablet() { +keep-tablet() {
display: flex; display flex
justify-content: center; align-items center
align-items: center; justify-content center
} }
} }
.menu-bar { .menu-bar {
.menu-bar-middle { .menu-bar-middle {
width: 18px; position relative
height: $menu-bar-line-height; width 18px
position: relative; height $menu-bar-line-height
background: var(--default-text-color); background var(--default-text-color)
.header-drawer-show & { .header-drawer-show & {
background: transparent; background transparent
} }
&::before, &::after { &::before
content: ''; &::after {
position: absolute; position absolute
left: 0; left 0
width: 100%; width 100%
height: $menu-bar-line-height; height $menu-bar-line-height
background: var(--default-text-color); background var(--default-text-color)
transition-t("transform", "0", "0.38", "ease"); content ''
transition-t("transform", "0", "0.38", "ease")
} }
&::before { &::before {
top: -6px; top -6px
.header-drawer-show & { .header-drawer-show & {
transform: translateY(6px) rotate(45deg); transform translateY(6px) rotate(45deg)
} }
} }
&::after { &::after {
bottom: -6px; bottom -6px
.header-drawer-show & { .header-drawer-show & {
transform: translateY(-6px) rotate(-45deg); transform translateY(-6px) rotate(-45deg)
} }
} }
} }
@ -234,74 +230,71 @@ $logo-image-box-width = 46px;
.header-drawer { .header-drawer {
width: 100%; position absolute
padding: $header-height 0 20px 0; top 0
position: absolute; left 0
top: 0; z-index $z-index-2
left: 0; width 100%
transform: scaleY(0); padding $header-height 0 20px 0
transform-origin: top; background var(--background-color)
z-index: $z-index-2; transform scaleY(0)
background: var(--background-color); transform-origin top
transition-t("transform", "0", "0.38", "ease"); transition-t("transform", "0", "0.38", "ease")
.header-drawer-show & { .header-drawer-show & {
transform: scaleY(1); transform scaleY(1)
} }
.drawer-menu-list { .drawer-menu-list {
display: flex; display flex
flex-direction: column; flex-direction column
justify-content: flex-start; align-items center
align-items: center; justify-content flex-start
.drawer-menu-item { .drawer-menu-item {
font-size: 1rem; height 38px
margin: 6px 0; margin 6px 0
height: 38px; font-size 1rem
a { a {
padding: 6px 20px; padding 6px 20px
border-radius: 20px; color var(--default-text-color)
color: var(--default-text-color); border-radius 20px
&:hover { &:hover {
color: var(--second-text-color); color var(--second-text-color)
border: 1px solid var(--default-text-color); border 1px solid var(--default-text-color)
} }
&.active { &.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 { .window-mask {
position: absolute; position absolute
top: 0; top 0
width: 100%; z-index $z-index-1
height: 100vh; width 100%
background: rgba(0, 0, 0, 0.4); height 100vh
z-index: $z-index-1; background rgba(0, 0, 0, 0.4)
visibility: hidden; visibility hidden
opacity: 0; opacity 0
transition-t("transform, opacity", "0, 0", "0.38, 0.38", "ease, ease"); transition-t("transform, opacity", "0, 0", "0.38, 0.38", "ease, ease")
.header-drawer-show & { .header-drawer-show & {
visibility: visible; visibility visible
opacity: 1; opacity 1
} }
} }
} }
.header-drawer-show { .header-drawer-show {
overflow: hidden; overflow hidden
} }

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

@ -1,36 +1,36 @@
.image-viewer-container { .image-viewer-container {
position: fixed; position fixed
left: 0; top 0
top: 0; left 0
width: 100%; z-index $z-index-8
height: 100%; display flex
display: flex; align-items center
align-items: center; justify-content center
justify-content: center; box-sizing border-box
background: rgba(0, 0, 0, 0); width 100%
visibility: hidden; height 100%
z-index: $z-index-8; padding 6%
padding: 6%; background rgba(0, 0, 0, 0)
box-sizing: border-box; visibility hidden
transition-t("visibility, background", "0, 0", "0.3, 0.3", "ease, ease"); transition-t("visibility, background", "0, 0", "0.3, 0.3", "ease, ease")
&.active { &.active {
background: rgba(0, 0, 0, 0.5); background rgba(0, 0, 0, 0.5)
visibility: visible; visibility visible
img { img {
cursor: zoom-out; padding 0.2rem
transform: scale(1); background var(--background-color)
padding: 2px; transform scale(1)
background: var(--background-color); cursor zoom-out
} }
} }
img { img {
max-width: 100%; max-width 100%
max-height: 100%; max-height 100%
transform: scale(0); transform scale(0)
transition-t("transform", "0", "0.3", "ease"); transition-t("transform", "0", "0.3", "ease")
} }
} }

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

@ -3,35 +3,34 @@ $search-header-height = 3rem
.search-pop-overlay { .search-pop-overlay {
position fixed position fixed
display flex
height 100%
width 100%
left 0
top 0 top 0
left 0
z-index $z-index-8
display flex
width 100%
height 100%
background rgba(0, 0, 0, 0) background rgba(0, 0, 0, 0)
visibility hidden visibility hidden
z-index $z-index-8
transition-t("visibility, background", "0, 0", "0.3, 0.3", "ease, ease") transition-t("visibility, background", "0, 0", "0.3, 0.3", "ease, ease")
&.active { &.active {
visibility visible
background rgba(0, 0, 0, 0.35) background rgba(0, 0, 0, 0.35)
visibility visible
.search-popup { .search-popup {
transform scale(1) transform scale(1)
} }
} }
.search-popup { .search-popup {
z-index $z-index-6
width 70%
height 80%
margin auto
background var(--background-color) background var(--background-color)
border-radius 0.4rem border-radius 0.4rem
height 80%
width 70%
margin auto
transform scale(0) transform scale(0)
z-index $z-index-6
transition-t("transform", "0", "0.3", "ease") transition-t("transform", "0", "0.3", "ease")
+keep-tablet() { +keep-tablet() {
@ -43,18 +42,18 @@ $search-header-height = 3rem
} }
.search-header { .search-header {
display flex
align-items center
height $search-header-height
padding 0 1rem
background var(--fourth-text-color) background var(--fourth-text-color)
border-top-left-radius 0.2rem border-top-left-radius 0.2rem
border-top-right-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 { .search-input-field-pre {
cursor pointer
color var(--default-text-color)
margin-right 0.2rem margin-right 0.2rem
color var(--default-text-color)
cursor pointer
} }
.search-input-container { .search-input-container {
@ -62,12 +61,12 @@ $search-header-height = 3rem
padding 0.2rem padding 0.2rem
.search-input { .search-input {
width 100%
color var(--default-text-color)
font-size 1.2rem
background transparent background transparent
border 0 border 0
outline 0 outline 0
width 100%
font-size 1.2rem
color var(--default-text-color)
&::-webkit-search-cancel-button { &::-webkit-search-cancel-button {
display none display none
@ -86,21 +85,20 @@ $search-header-height = 3rem
font-size $icon-size font-size $icon-size
cursor pointer cursor pointer
&:hover .fas, far, fab { &:hover {
color var(--first-text-color) color var(--first-text-color)
} }
} }
} }
#search-result { #search-result {
position relative position relative
box-sizing border-box
display flex display flex
box-sizing border-box
height 'calc(100% - %s)' % $search-header-height height 'calc(100% - %s)' % $search-header-height
overflow auto
padding 0.3rem 1.5rem padding 0.3rem 1.5rem
overflow auto
.search-result-list { .search-result-list {
width 100% width 100%
@ -109,9 +107,9 @@ $search-header-height = 3rem
li { li {
box-sizing border-box box-sizing border-box
border-bottom 0.1rem dashed var(--border-color)
padding 0.8rem 0
margin 0.8rem 0 margin 0.8rem 0
padding 0.8rem 0
border-bottom 0.1rem dashed var(--border-color)
&:last-child { &:last-child {
border-bottom none border-bottom none
@ -120,30 +118,30 @@ $search-header-height = 3rem
.search-result-title { .search-result-title {
position relative position relative
font-weight bold
margin-bottom 0.8rem
padding-left 1rem
display flex display flex
align-items center align-items center
margin-bottom 0.8rem
padding-left 1rem
font-weight bold
&::after { &::after {
content ''
position absolute position absolute
top 50%
left 0
width 0.4rem width 0.4rem
height 0.4rem height 0.4rem
border-radius 50%
top 50%
transform translateY(-50%)
left 0
background var(--default-text-color) background var(--default-text-color)
border-radius 50%
transform translateY(-50%)
content ''
} }
} }
.search-result { .search-result {
line-height 2rem
margin 0 margin 0
padding-left 1rem padding-left 1rem
line-height 2rem
word-wrap break-word word-wrap break-word
} }
@ -154,20 +152,18 @@ $search-header-height = 3rem
} }
.search-keyword { .search-keyword {
border-bottom 0.1rem dashed var(--primary-color)
color var(--primary-color) color var(--primary-color)
font-weight bold font-weight bold
border-bottom 0.1rem dashed var(--primary-color)
} }
} }
} }
#no-result { #no-result {
color var(--third-text-color)
margin auto margin auto
color var(--third-text-color)
} }
} }
} }
} }

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

@ -1,21 +1,25 @@
$friend-link-item-height = 82px; $friend-link-item-height = 82px
$friend-link-item-height-tablet = 68px; $friend-link-item-height-tablet = 68px
$friend-link-item-interval = 16px; $friend-link-item-interval = 16px
$friend-link-item-border-radius = 6px; $friend-link-item-border-radius = 6px
.page-template-container { .page-template-container {
keep-container(false, 0, 0, 30px, 30px); keep-container(false, 0, 0, 2rem, 2rem)
.page-template-content { .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 { &:first-child {
margin-top: 0; margin-top 0
} }
} }
} }
@ -24,136 +28,130 @@ $friend-link-item-border-radius = 6px;
.friends-link-container { .friends-link-container {
.friends-link-list { .friends-link-list {
position: relative; position relative
.friends-link-item { .friends-link-item {
box-sizing: border-box; position relative
position: relative; float left
float: left; box-sizing border-box
width: 50%; width 50%
cursor: pointer; height $friend-link-item-height
height: $friend-link-item-height; padding-bottom $friend-link-item-interval
padding-bottom: $friend-link-item-interval; cursor pointer
+keep-tablet() { +keep-tablet() {
height: $friend-link-item-height-tablet; height $friend-link-item-height-tablet
} }
&:nth-child(odd) { &:nth-child(odd) {
padding-right: $friend-link-item-interval * 0.5; padding-right $friend-link-item-interval * 0.5
} }
&:nth-child(even) { &:nth-child(even) {
padding-left: $friend-link-item-interval * 0.5; padding-left $friend-link-item-interval * 0.5
} }
.content { .content {
position: relative; position relative
width: 100%; box-sizing border-box
height: 100%; width 100%
box-shadow: 1px 1px 2px var(--shadow-color); height 100%
border-radius: $friend-link-item-border-radius; padding-left $friend-link-item-height - $friend-link-item-interval
padding-left: $friend-link-item-height - $friend-link-item-interval; border-radius $friend-link-item-border-radius
box-sizing: border-box; box-shadow 1px 1px 2px var(--shadow-color)
+keep-tablet() { +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 { &:hover {
box-shadow: 1px 1px 6px var(--shadow-color); box-shadow 1px 1px 6px var(--shadow-color)
.info .name { .info .name {
color: var(--primary-color); color var(--primary-color)
} }
} }
.radius { .radius {
border-top-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; border-bottom-left-radius $friend-link-item-border-radius
} }
.avatar { .avatar {
position: absolute; position absolute
top: 0; top 0
left: 0; left 0
width: $friend-link-item-height - $friend-link-item-interval; display flex
height: 100%; align-items center
display: flex; justify-content center
justify-content: center; width $friend-link-item-height - $friend-link-item-interval
align-items: center; height 100%
font-size: 2rem; color var(--second-text-color)
background: var(--second-background-color); font-size 2rem
color: var(--second-text-color); background var(--second-background-color)
+keep-tablet() { +keep-tablet() {
width: $friend-link-item-height-tablet - $friend-link-item-interval; width $friend-link-item-height-tablet - $friend-link-item-interval
} }
img { img {
box-sizing: border-box; position relative
position: relative; box-sizing border-box
width: 100%; width 100%
height: 100%; height 100%
} }
} }
.info { .info {
position: relative; position relative
width: 100%; display flex
height: 100%; flex-direction column
box-sizing: border-box; align-items center
padding: 10px; justify-items flex-start
display: flex; box-sizing border-box
flex-direction: column; width 100%
align-items: center; height 100%
justify-items: flex-start; padding 10px
+keep-tablet() { +keep-tablet() {
padding: 6px; padding 6px
} }
.name { .name {
width: 100%; width 100%
height: 60%; height 60%
font-size: 1.28rem; color var(--second-text-color)
color: var(--second-text-color); font-size 1.28rem
+keep-tablet() { +keep-tablet() {
font-size: 1.08rem; font-size 1.08rem
} }
} }
.description { .description {
width: 100%; width 100%
height: 40%; height 40%
font-size: 1rem; color var(--third-text-color)
color: var(--third-text-color); font-size 1rem
+keep-tablet() { +keep-tablet() {
font-size: 0.98rem; font-size 0.98rem
} }
} }
.ellipsis { .ellipsis {
overflow: hidden; overflow hidden
text-overflow: ellipsis; white-space nowrap
white-space: nowrap; text-overflow ellipsis
} }
} }
} }
} }
} }
} }
} }
} }

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

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

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

@ -1,52 +1,51 @@
$li-border-radius = 5px; $li-border-radius = 0.4rem
$li-margin-bottom = 12px; $li-margin-bottom = 0.8rem
.post-tools-container { .post-tools-container {
.tools-list { .tools-list {
li { li {
cursor: pointer; display flex
width: $post-tool-button-width; align-items center
height: $post-tool-button-width; justify-content center
border-radius: 50%; width $post-tool-button-width
font-size: 1.2rem; height $post-tool-button-width
display: flex; margin-bottom $li-margin-bottom
align-items: center; color var(--default-text-color)
justify-content: center; font-size 1.2rem
margin-bottom: $li-margin-bottom; background var(--background-color)
background: var(--background-color); border-radius 50%
color: var(--default-text-color); cursor pointer
i { i {
color: var(--default-text-color); color var(--default-text-color)
} }
&:hover { &:hover {
background: var(--primary-color); color var(--background-color)
color: var(--background-color); background var(--primary-color)
i { i {
color: var(--background-color); color var(--background-color)
} }
} }
&:last-child { &: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 { &.page-aside-toggle {
display: none; display none
+keep-tablet() { +keep-tablet() {
display: none !important; display none !important
} }
} }
} }
} }
} }

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

@ -1,74 +1,69 @@
.progress-bar-container { .progress-bar-container {
position: fixed; position fixed
top: 0; top 0
left: 0; left 0
width: 100%; z-index $z-index-9
z-index: $z-index-9; width 100%
if (hexo-config('pjax.enable') == true) { if (hexo-config('pjax.enable') == true) {
.pjax-progress-bar { .pjax-progress-bar {
position: absolute; position absolute
top: 0; top 0
left: 0; left 0
height: 2px; z-index $z-index-8
width: 0; width 0
background: var(--pjax-progress-bar-color); height 2px
visibility: hidden; background var(--pjax-progress-bar-color)
opacity: 0; visibility hidden
z-index: $z-index-8; opacity 0
transition-t("width", "0", "0.1", "linear"); transition-t("width, opacity", "0, 0", "0.1, 0.1", "linear")
&.show { &.show {
opacity: 1; visibility visible
visibility: visible; opacity 1
} }
} }
.pjax-progress-icon { .pjax-progress-icon {
position: absolute; position absolute
top: 0; top 0.4rem
right: 0; right 0.3rem
z-index: $z-index-8; z-index $z-index-8
display: flex; color var(--default-text-color)
align-items: center; font-size 1.1rem
justify-content: center; visibility hidden
padding: 7px 6px 0 0;
visibility: hidden;
font-size: 1.1rem;
color: var(--default-text-color);
+keep-tablet() { +keep-tablet() {
padding: 6px 5px 0 0; top 0.3rem
font-size: 1rem; right 0.2rem
font-size 1rem
} }
&.show { &.show {
visibility: visible; visibility visible
} }
} }
} }
if (hexo-config('style.scroll.progress_bar.enable') == true) { if (hexo-config('style.scroll.progress_bar.enable') == true) {
.scroll-progress-bar { .scroll-progress-bar {
position: absolute; position absolute
top: 0; top 0
left: 0; left 0
width: 0; z-index $z-index-7
height: $scroll-progress-bar-height; width 0
visibility: hidden; height $scroll-progress-bar-height
z-index: $z-index-7; background var(--primary-color)
background: var(--primary-color); visibility hidden
transition-t("width", "0", "0.1", "linear"); transition-t("width", "0", "0.1", "linear")
&.hide { &.hide {
display: none !important; display none !important
} }
} }
} }
} }

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

@ -1,55 +1,55 @@
$tools-item-width = 32px; $tools-item-width = 2.2rem
$tools-item-font-size = 1.1rem; $tools-item-font-size = 1.1rem
$tools-item-border-radius = 1px; $tools-item-border-radius = 0.1rem
.side-tools-container { .side-tools-container {
position: relative; position relative
.tools-item { .tools-item {
width: $tools-item-width; width $tools-item-width
height: $tools-item-width; height $tools-item-width
font-size: $tools-item-font-size; margin-bottom 0.2rem
margin-bottom: 3px; color var(--default-text-color)
cursor: pointer; font-size $tools-item-font-size
border-right: none; background var(--background-color)
border-radius: $tools-item-border-radius; border-right none
box-shadow: 1px 1px 3px var(--shadow-color); border-radius $tools-item-border-radius
color: var(--default-text-color); box-shadow 0.1rem 0.1rem 0.2rem var(--shadow-color)
background: var(--background-color); cursor pointer
i { i {
color: var(--default-text-color); color var(--default-text-color)
} }
&:hover { &:hover {
color: var(--background-color); color var(--background-color)
background: var(--primary-color); background var(--primary-color)
box-shadow: 2px 2px 6px var(--shadow-color); box-shadow 0.2rem 0.2rem 0.4rem var(--shadow-color)
i { i {
color: var(--background-color); color var(--background-color)
} }
} }
+keep-tablet() { +keep-tablet() {
width: $tools-item-width * 0.9; width $tools-item-width * 0.9
height: $tools-item-width * 0.9; height $tools-item-width * 0.9
font-size: $tools-item-font-size * 0.9; margin-bottom 0.2rem
margin-bottom: 2px; font-size $tools-item-font-size * 0.9
} }
&.rss { &.rss {
a { a {
border-radius: $tools-item-border-radius; width 100%
width: 100%; height 100%
height: 100%; border-radius $tools-item-border-radius
&:hover { &:hover {
color: var(--background-color); color var(--background-color)
background: var(--primary-color); background var(--primary-color)
box-shadow: 2px 2px 6px var(--shadow-color); box-shadow 0.2rem 0.2rem 0.4rem var(--shadow-color)
} }
} }
} }
@ -57,20 +57,20 @@ $tools-item-border-radius = 1px;
.side-tools-list { .side-tools-list {
opacity: 0; transform translateX(100%)
transform: translateX(100%); opacity 0
transition-t("transform, opacity", "0, 0", "0.2, 0.2", "linear, linear"); transition-t("transform, opacity", "0, 0", "0.2, 0.2", "linear, linear")
.tool-expand-width { .tool-expand-width {
+keep-tablet() { +keep-tablet() {
display: none; display none
} }
} }
&.show { &.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) { if (hexo-config('style.scroll.percent.enable') == true) {
.tool-scroll-to-top { .tool-scroll-to-top {
display: none; display none
&.show { &.show {
display: flex; display flex
} }
&:hover { &:hover {
.percent { .percent {
display: none; display none
} }
.arrow-up { .arrow-up {
display: flex; display flex
} }
} }
.arrow-up { .arrow-up {
display: none; display none
} }
.percent { .percent {
display: flex; display flex
font-size: 1rem; font-size 1rem
} }
} }
} }
} }
} }

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

@ -1,15 +1,15 @@
.tagcloud-container { .tagcloud-container {
keep-container(false, 0, 0, 20px, 0); keep-container(false, 0, 0, 1.5rem, 0)
.tagcloud-content { .tagcloud-content {
text-align: justify; text-align justify
a { a {
padding: 10px 8px; display inline-block
display: inline-block; box-sizing border-box
box-sizing: border-box; padding 0.7rem 0.5rem
} }
} }
} }

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

@ -1,70 +1,73 @@
.post-toc-wrap { .post-toc-wrap {
width: 100%; box-sizing border-box
font-size: 0.92rem; width 100%
box-sizing: border-box; font-size 0.92rem
.post-toc { .post-toc {
ol { ol {
list-style: none; margin 0
margin: 0; padding 0 2px 12px 10px
padding: 0 2px 12px 10px; text-align left
text-align: left; list-style none
&:last-child { &:last-child {
padding-bottom: 0; padding-bottom 0
} }
> ol { > ol {
padding-left: 0; padding-left 0
} }
a { a {
transition-property: all; transition-property all
transition(); transition()
} }
} }
.nav-item { .nav-item {
line-height: 1.8; overflow hidden
overflow: hidden; line-height 1.8
text-overflow: ellipsis; white-space nowrap
white-space: nowrap; text-overflow ellipsis
} }
.nav { .nav {
.nav-child { .nav-child {
display: hexo-config('toc.expand_all') ? block : none; display hexo-config('toc.expand_all') ? block : none
} }
.active > .nav-child { .active > .nav-child {
display: block; display block
} }
.active-current > .nav-child { .active-current > .nav-child {
display: block; display block
> .nav-item { > .nav-item {
display: block; display block
} }
} }
.nav-number, .nav-text { .nav-number
color: var(--default-text-color); .nav-text {
color var(--default-text-color)
} }
.active > a { .active > a {
.nav-number, .nav-text { .nav-number
color: var(--primary-color); .nav-text {
color var(--primary-color)
} }
} }
.active-current > a { .active-current > a {
.nav-number, .nav-text { .nav-number
color: var(--primary-color); .nav-text {
color var(--primary-color)
} }
} }
} }

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

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

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

@ -1,224 +1,218 @@
$avatarWidth = 46px; $avatarWidth = 46px
$arrow-icon-width = 16px; $arrow-icon-width = 16px
$post-nav-max-width = 220px; $post-nav-max-width = 220px
$article-title-font-size = 1.6rem; $article-title-font-size = 1.6rem
.article-content-container { .article-content-container {
keep-container(false, 0, 0, 30px, 30px); keep-container(false, 0, 0, 2rem, 2rem)
+keep-mobile() { +keep-mobile() {
padding: 1.2rem 0.2rem; padding 1.2rem 0.2rem
box-shadow: none; box-shadow none
} }
.article-title { .article-title {
color: var(--second-text-color); color var(--second-text-color)
font-weight: 600; font-weight 600
font-size: $article-title-font-size; font-size $article-title-font-size
+keep-tablet() { +keep-tablet() {
font-size: $article-title-font-size * 0.9; font-size $article-title-font-size * 0.9
} }
+keep-mobile() { +keep-mobile() {
font-size: $article-title-font-size * 0.8; font-size $article-title-font-size * 0.8
} }
} }
.article-header { .article-header {
position: relative; position relative
padding-left: $avatarWidth; box-sizing border-box
width: 100%; width 100%
height: $avatarWidth; height $avatarWidth
box-sizing: border-box; padding-left $avatarWidth
.avatar { .avatar {
position: absolute; position absolute
top: 0 top 0
left: 0; left 0
width: $avatarWidth; box-sizing border-box
height: $avatarWidth; width $avatarWidth
padding: 1px; height $avatarWidth
box-sizing: border-box; padding 1px
border: 1px solid var(--border-color); border 1px solid var(--border-color)
border-radius: 50%; border-radius 50%
img { img {
border-radius: 50%; width 100%
width: 100%; height 100%
height: 100%; background var(--avatar-background-color)
background: var(--avatar-background-color); border-radius 50%
} }
} }
.info { .info {
padding: 2px 0; display flex
margin-left: 10px; flex-direction column
box-sizing: border-box; justify-content space-between
display: flex; box-sizing border-box
flex-direction: column; width 100%
justify-content: space-between; height 100%
width: 100%; margin-left 10px
height: 100%; padding 2px 0
.author { .author {
font-weight: 600; display flex
font-size: 1.18rem; align-items center
display: flex; font-weight 600
align-items: center; font-size 1.18rem
.name { .name {
color: var(--default-text-color); color var(--default-text-color)
} }
.author-label { .author-label {
margin-left: 10px; margin-left 10px
font-size: 0.8rem; padding 0 5px
font-weight: 500; color #fff
padding: 0 5px; font-weight 500
border-radius: 5px; font-size 0.8rem
color: #fff; background var(--selection-color)
background: var(--selection-color); border-radius 5px
} }
} }
} }
} }
.article-header, .article-header-meta-info { .article-header
margin-top: 16px; .article-header-meta-info {
margin-top 16px
+keep-tablet() { +keep-tablet() {
transform: scale(0.9); transform scale(0.9)
transform-origin: left top; transform-origin left top
} }
} }
.article-content { .article-content {
margin-top: $component-spacing-value; margin-top $component-spacing-value
padding-bottom: 10px; padding-bottom 10px
word-wrap: break-word; color var(--default-text-color)
border-bottom: 1px solid var(--border-color); word-wrap break-word
color: var(--default-text-color); border-bottom 1px solid var(--border-color)
} }
.post-tags-box { .post-tags-box {
display: none; display none
margin-top: 1.6rem; justify-content center
justify-content: center; margin-top 1.6rem
font-size: 1.1rem; font-size 1.1rem
+keep-tablet() { +keep-tablet() {
display: flex; display flex
} }
+keep-mobile() { +keep-mobile() {
margin-top: 1.2rem; margin-top 1.2rem
font-size: 1rem; font-size 1rem
} }
.tag-item { .tag-item {
margin: 0 0.25rem; margin 0 0.25rem
} }
} }
.post-copyright-info { .post-copyright-info {
margin-top: $component-spacing-value; width 100%
width: 100%; margin-top $component-spacing-value
+keep-tablet() { +keep-tablet() {
margin-top: $component-spacing-value * 0.8; margin-top $component-spacing-value * 0.8
} }
} }
.article-nav { .article-nav {
height: 40px; height 40px
margin-top: $component-spacing-value; margin-top $component-spacing-value
.article-prev, .article-next { .article-prev
max-width: $post-nav-max-width; .article-next {
height: 100%; box-sizing border-box
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 { a {
position: relative; position relative
display: block; display block
width: 100%; box-sizing border-box
height: 100%; width 100%
box-sizing: border-box; height 100%
&.prev { &.prev {
padding-left: $arrow-icon-width; padding-left $arrow-icon-width
} }
&.next { &.next {
padding-right: $arrow-icon-width; padding-right $arrow-icon-width
} }
.arrow-icon { .arrow-icon {
position: absolute; position absolute
top: 0; top 0
height: 100%; width $arrow-icon-width
width: $arrow-icon-width; height 100%
&.left { &.left {
left: 0; left 0
} }
&.right { &.right {
right: 0; right 0
} }
} }
.title { .title {
width: 100%; width 100%
height: 100%; height 100%
} }
} }
} }
.article-prev { .article-prev {
float: left; float left
} }
.article-next { .article-next {
float: right; float right
} }
.post-nav-item { .post-nav-item {
display: none; display none
+keep-tablet() { +keep-tablet() {
display: inline-block; display inline-block
} }
} }
.post-nav-title-item { .post-nav-title-item {
overflow: hidden; overflow hidden
text-overflow: ellipsis; white-space nowrap
white-space: nowrap; text-overflow ellipsis
+keep-tablet() { +keep-tablet() {
display: none; display none
} }
} }
} }
} }

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

@ -1,28 +1,28 @@
$category-name-font-size = 1.6rem; $category-name-font-size = 1.6rem
.category-container { .category-container {
keep-container(false, 0, 0, 30px, 30px); keep-container(false, 0, 0, 2rem, 2rem)
.category-name { .category-name {
color: var(--second-text-color); margin-bottom $component-spacing-value
font-size: $category-name-font-size; 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 { i {
color: var(--second-text-color); color var(--second-text-color)
} }
+keep-tablet() { +keep-tablet() {
font-size: $category-name-font-size * 0.9; font-size $category-name-font-size * 0.9
} }
+keep-mobile() { +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);
} }
} }

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

@ -1,58 +1,57 @@
.category-list-container { .category-list-container {
keep-container(false, 0, 0, 30px, 0); keep-container(false, 0, 0, 2rem, 0)
.category-list-content { .category-list-content {
.all-category-list { .all-category-list {
& > .all-category-list-item > .all-category-list-link {
font-size 1.1rem
}
li.all-category-list-item { li.all-category-list-item {
font-size: 1rem; margin-bottom 1rem
margin-bottom: 15px; font-size 1rem
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom 0
} }
span.all-category-list-count { span.all-category-list-count {
float: right; float right
color: var(--default-text-color); color var(--default-text-color)
&::before { &::before {
content: '['; content '['
} }
&::after { &::after {
content: ']'; content ']'
} }
} }
ul.all-category-list-child { ul.all-category-list-child {
margin-top 1rem
margin-left: 10px; margin-left 0.9rem
margin-top: 15px;
li { li {
&::before { &::before {
content: '- '; content '- '
} }
margin-bottom: 10px; margin-bottom 0.9rem
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom 0
} }
} }
} }
} }
} }
} }
} }

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

@ -1,114 +1,111 @@
.home-content-container { .home-content-container {
background: var(--background-color); background var(--background-color)
.home-article-list { .home-article-list {
.home-article-item { .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 { .top-icon {
position: absolute; position absolute
top: 10px; top 10px
right: 12px; right 12px
font-size: 1.2rem; color var(--third-text-color)
transform: rotate(45deg); font-size 1.2rem
color: var(--third-text-color); transform rotate(45deg)
+keep-tablet() { +keep-tablet() {
font-size: 1.16rem; font-size 1.16rem
} }
} }
.home-article-title { .home-article-title {
position: relative; position relative
font-weight: 600; margin 0
font-size: 1.4rem; color var(--second-text-color)
line-height: 1.5; font-weight 600
color: var(--second-text-color); font-size 1.4rem
line-height 1.5
+keep-tablet() { +keep-tablet() {
font-size: 1.3rem; font-size 1.3rem
} }
+keep-mobile() { +keep-mobile() {
font-size: 1.2rem; font-size 1.2rem
} }
margin: 0;
} }
.home-article-content { .home-article-content {
word-wrap: break-word; margin 20px 0
text-align: justify; color var(--default-text-color)
margin: 20px 0; text-align justify
color: var(--default-text-color); word-wrap break-word
} }
.home-article-meta-info-container { .home-article-meta-info-container {
display: flex; display flex
justify-content: space-between; align-items center
align-items: center; justify-content space-between
font-size: 0.92rem; color var(--third-text-color)
color: var(--third-text-color); font-size 0.92rem
.home-article-meta-info { .home-article-meta-info {
letter-spacing: 0.5px; letter-spacing 0.5px
span { span {
margin-right: 10px; margin-right 10px
&:last-child { &:last-child {
margin-right: 0; margin-right 0
} }
ul, li { ul
display: inline; li {
display inline
} }
} }
.home-article-category { .home-article-category {
+keep-mobile() { +keep-mobile() {
display: none; display none
} }
} }
.home-article-tag { .home-article-tag {
+keep-tablet() { +keep-tablet() {
display: none; display none
} }
} }
} }
hr { hr {
border: none; flex 1
flex: 1; height 1px
height: 1px; margin 0 10px
background: var(--border-color); background var(--border-color)
margin: 0 10px; border none
} }
a { a {
color: var(--third-text-color); color var(--third-text-color)
&:hover { &:hover {
color: var(--primary-color) color var(--primary-color)
} }
} }
} }
} }
} }
} }

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

@ -1,200 +1,198 @@
$temp-width = hexo-config('style.left_side_width'); $temp-width = hexo-config('style.left_side_width')
$page-aside-width = $temp-width ? convert($temp-width) : 260px; $page-aside-width = $temp-width ? convert($temp-width) : 260px
.page-container { .page-container {
position: relative; position relative
box-sizing: border-box; box-sizing border-box
width: 100%; width 100%
height: auto; height auto
background: var(--background-color); background var(--background-color)
transition-t("padding-left", "0", "0.3", "ease-out"); transition-t("padding-left", "0", "0.3", "ease-out")
+keep-tablet() { +keep-tablet() {
padding-left: 0 !important; padding-left 0 !important
} }
.page-main-content { .page-main-content {
padding-top: $header-height; position relative
position: relative; padding-top $header-height
&.home { &.home {
.transparent-1 { .transparent-1 {
background: var(--header-transparent-background-1); background var(--header-transparent-background-1)
} }
.transparent-2 { .transparent-2 {
background: var(--header-transparent-background-2); background var(--header-transparent-background-2)
} }
} }
.header-shrink & { .header-shrink & {
padding-top: $header-shrink-height; padding-top $header-shrink-height
+keep-tablet() { +keep-tablet() {
padding-top: $header-shrink-height * 0.9; padding-top $header-shrink-height * 0.9
} }
+keep-mobile() { +keep-mobile() {
padding-top: $header-shrink-height * 0.8; padding-top $header-shrink-height * 0.8
} }
} }
+keep-tablet() { +keep-tablet() {
padding-top: $header-height * 0.9; padding-top $header-height * 0.9
} }
+keep-mobile() { +keep-mobile() {
padding-top: $header-height * 0.8; padding-top $header-height * 0.8
} }
.page-main-content-top { .page-main-content-top {
position: fixed; position fixed
top: 0; top 0
right: 0; right 0
width: 100%; z-index $z-index-5
height: $header-height; box-sizing border-box
z-index: $z-index-5; width 100%
box-sizing: border-box; height $header-height
transition-t("transform, padding-left, height", "0, 0, 0", "0.3, 0.2, 0.2", "ease-out, linear, ease"); transition-t("transform, padding-left, height", "0, 0, 0", "0.3, 0.2, 0.2", "ease-out, linear, ease")
&.hide { &.hide {
transform: translateY(-105%); transform translateY(-105%)
} }
.header-shrink & { .header-shrink & {
height: $header-shrink-height; height $header-shrink-height
+keep-tablet() { +keep-tablet() {
height: $header-shrink-height * 0.9; height $header-shrink-height * 0.9
} }
+keep-mobile() { +keep-mobile() {
height: $header-shrink-height * 0.8; height $header-shrink-height * 0.8
} }
} }
+keep-tablet() { +keep-tablet() {
height: $header-height * 0.9; height $header-height * 0.9
padding-left: 0 !important; padding-left 0 !important
} }
+keep-mobile() { +keep-mobile() {
height: $header-height * 0.8; height $header-height * 0.8
} }
} }
.page-main-content-middle { .page-main-content-middle {
box-sizing: border-box; display flex
width: 100%; justify-content center
display: flex; box-sizing border-box
justify-content: center; width 100%
padding: $component-spacing-value 0; padding $component-spacing-value 0
+keep-tablet() { +keep-tablet() {
padding: $component-spacing-value * 0.8 0; padding $component-spacing-value * 0.8 0
} }
+keep-mobile() { +keep-mobile() {
padding: $component-spacing-value * 0.6 0; padding $component-spacing-value * 0.6 0
} }
.main-content { .main-content {
position: relative; position relative
box-sizing: border-box; box-sizing border-box
width: $main-content-width; width $main-content-width
max-width: $content-max-width; max-width $content-max-width
height: 100%; height 100%
+keep-tablet() { +keep-tablet() {
width: $main-content-width-tablet; width $main-content-width-tablet
} }
+keep-mobile() { +keep-mobile() {
width: $main-content-width-mobile; width $main-content-width-mobile
} }
} }
} }
.page-main-content-bottom { .page-main-content-bottom {
width: 100%; width 100%
} }
} }
.page-aside { .page-aside {
position: fixed; position fixed
top: 0; top 0
bottom: 0; bottom 0
left: - $page-aside-width; left - $page-aside-width
width: $page-aside-width; z-index $z-index-6
height: 100%; box-sizing border-box
z-index: $z-index-6; width $page-aside-width
overflow-y: auto; height 100%
padding: 20px; padding 20px
box-sizing: border-box; overflow-y auto
background: var(--background-color); 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() { +keep-tablet() {
left: 0 !important; left 0 !important
display: none !important; display none !important
} }
} }
.post-tools { .post-tools {
position: fixed; position fixed
top: $header-height + $component-spacing-value; top $header-height + $component-spacing-value
right: $component-spacing-value; right $component-spacing-value
transition-t("top", "0", "0.2", "ease"); transition-t("top", "0", "0.2", "ease")
.header-shrink & { .header-shrink & {
top: $header-shrink-height + $component-spacing-value; top $header-shrink-height + $component-spacing-value
+keep-tablet() { +keep-tablet() {
top: $header-shrink-height * 0.9 + $component-spacing-value; top $header-shrink-height * 0.9 + $component-spacing-value
} }
+keep-mobile() { +keep-mobile() {
top: $header-shrink-height * 0.8 + $component-spacing-value; top $header-shrink-height * 0.8 + $component-spacing-value
} }
} }
+keep-tablet() { +keep-tablet() {
top: $header-height * 0.9 + $component-spacing-value; top $header-height * 0.9 + $component-spacing-value
right: 10px; right 10px
transform: scale(0.82); transform scale(0.82)
transform-origin: right top; transform-origin right top
} }
+keep-mobile() { +keep-mobile() {
top: $header-height * 0.8 + $component-spacing-value; top $header-height * 0.8 + $component-spacing-value
right: 5px; right 5px
transform: scale(0.72); transform scale(0.72)
} }
} }
.right-bottom-side-tools { .right-bottom-side-tools {
position: fixed; position fixed
bottom: 5%; right 0
right: 0; bottom 5%
} }
} }

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

@ -1,28 +1,28 @@
$tag-name-font-size = 1.6rem; $tag-name-font-size = 1.6rem
.tag-container { .tag-container {
keep-container(false, 0, 0, 30px, 30px); keep-container(false, 0, 0, 2rem, 2rem)
.tag-name { .tag-name {
color: var(--second-text-color); margin-bottom $component-spacing-value
font-size: $tag-name-font-size; 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 { i {
color: var(--second-text-color); color var(--second-text-color)
} }
+keep-tablet() { +keep-tablet() {
font-size: $tag-name-font-size * 0.9; font-size $tag-name-font-size * 0.9
} }
+keep-mobile() { +keep-mobile() {
font-size: $tag-name-font-size * 0.8; font-size $tag-name-font-size * 0.8
} }
font-weight: 600;
padding-bottom: 20px;
margin-bottom: $component-spacing-value;
border-bottom: 1px solid var(--border-color);
} }
} }

43
source/js/back2top.js
View File

@ -1,55 +1,52 @@
/* global KEEP */ /* global KEEP */
KEEP.initBack2Top = () => { KEEP.initBack2Top = () => {
KEEP.utils = { KEEP.utils = {
...KEEP.utils, ...KEEP.utils,
back2BottomButton_dom: document.querySelector('.tool-scroll-to-bottom'), back2BottomButton_dom: document.querySelector('.tool-scroll-to-bottom'),
back2top() { back2top() {
const scrollTopTimer = setInterval(function () { const scrollTopTimer = setInterval(function () {
let top = document.body.scrollTop || document.documentElement.scrollTop; let top = document.body.scrollTop || document.documentElement.scrollTop
let speed = top / 2; let speed = top / 2
if (document.body.scrollTop !== 0) { if (document.body.scrollTop !== 0) {
document.body.scrollTop -= speed; document.body.scrollTop -= speed
} else { } else {
document.documentElement.scrollTop -= speed; document.documentElement.scrollTop -= speed
} }
if (top === 0) { if (top === 0) {
clearInterval(scrollTopTimer); clearInterval(scrollTopTimer)
} }
}, 50); }, 50)
}, },
back2Bottom() { back2Bottom() {
let scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight; let scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop; let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
const scrollBottomTimer = setInterval(function () { const scrollBottomTimer = setInterval(function () {
if (!scrollTop) scrollTop = 10; if (!scrollTop) scrollTop = 10
scrollTop = Math.floor(scrollTop + scrollTop / 2); scrollTop = Math.floor(scrollTop + scrollTop / 2)
window.scrollTo(0, scrollTop); window.scrollTo(0, scrollTop)
if (scrollTop >= scrollHeight) { if (scrollTop >= scrollHeight) {
clearInterval(scrollBottomTimer); clearInterval(scrollBottomTimer)
} }
}, 50); }, 50)
}, },
initBack2Top() { initBack2Top() {
this.back2TopButton_dom.addEventListener('click', () => { this.back2TopButton_dom.addEventListener('click', () => {
this.back2top(); this.back2top()
}); })
}, },
initBack2Bottom() { initBack2Bottom() {
this.back2BottomButton_dom.addEventListener('click', () => { this.back2BottomButton_dom.addEventListener('click', () => {
this.back2Bottom(); this.back2Bottom()
}); })
}, }
} }
KEEP.utils.initBack2Top(); KEEP.utils.initBack2Top()
KEEP.utils.initBack2Bottom(); KEEP.utils.initBack2Bottom()
} }

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

@ -2,25 +2,31 @@
KEEP.initCodeBlockTools = () => { KEEP.initCodeBlockTools = () => {
HTMLElement.prototype.wrap = function (wrapper) { HTMLElement.prototype.wrap = function (wrapper) {
this.parentNode.insertBefore(wrapper, this); this.parentNode.insertBefore(wrapper, this)
this.parentNode.removeChild(this); this.parentNode.removeChild(this)
wrapper.appendChild(this); wrapper.appendChild(this)
}; }
const { style: codeCopyStyle } = KEEP.theme_config?.code_copy; const { style: codeCopyStyle } = KEEP.theme_config?.code_copy
const { style: codeBlockStyle } = KEEP.theme_config?.code_block_tools; const { style: codeBlockStyle } = KEEP.theme_config?.code_block_tools
const isMac = (codeBlockStyle || codeCopyStyle || 'default') === 'mac'; const isMac = (codeBlockStyle || codeCopyStyle || 'default') === 'mac'
const foldedIconClassName = isMac ? 'fas fa-chevron-left' : 'fas fa-chevron-right'; 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 {
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>` const foldDom = `<span class="tool fold tooltip" data-content="${foldLang}"><i class="fas fa-chevron-down"></i></span>`
document.querySelectorAll('figure.highlight').forEach(element => { document.querySelectorAll('figure.highlight').forEach((element) => {
let codeLang = element.classList.length ? element.classList[1].toUpperCase() : ''; let codeLang = element.classList.length ? element.classList[1].toUpperCase() : ''
if (codeLang === 'PLAINTEXT') { codeLang = '' } if (codeLang === 'PLAINTEXT') {
const highlightContainer = document.createElement('div'); codeLang = ''
highlightContainer.classList.add('highlight-container'); }
element.wrap(highlightContainer); const highlightContainer = document.createElement('div')
highlightContainer.classList.add('highlight-container')
element.wrap(highlightContainer)
const codeLangDom = `${codeLang ? '<span class="code-lang">' + codeLang + '</span>' : ''}` const codeLangDom = `${codeLang ? '<span class="code-lang">' + codeLang + '</span>' : ''}`
@ -30,72 +36,74 @@ KEEP.initCodeBlockTools = () => {
${isMac ? foldDom + codeLangDom : '<span>' + foldDom + codeLangDom + '</span>'} ${isMac ? foldDom + codeLangDom : '<span>' + foldDom + codeLangDom + '</span>'}
<span class="tool copy tooltip" data-content="${copyLang}"><i class="fas fa-copy"></i></span> <span class="tool copy tooltip" data-content="${copyLang}"><i class="fas fa-copy"></i></span>
</div>` </div>`
); )
const codeToolsBox = element.parentNode.querySelector('.code-tools-box'); const codeToolsBox = element.parentNode.querySelector('.code-tools-box')
const copyDom = codeToolsBox.querySelector('.copy'); const copyDom = codeToolsBox.querySelector('.copy')
const targetFoldDom = codeToolsBox.querySelector('.fold'); const targetFoldDom = codeToolsBox.querySelector('.fold')
copyDom.addEventListener('click', event => { copyDom.addEventListener('click', (event) => {
const target = event.currentTarget; const target = event.currentTarget
const code = [...element.querySelectorAll('.code .line')].map(line => line.innerText).join('\n'); const code = [...element.querySelectorAll('.code .line')]
const tta = document.createElement('textarea'); .map((line) => line.innerText)
tta.style.top = window.scrollY + 'px'; .join('\n')
tta.style.position = 'absolute'; const tta = document.createElement('textarea')
tta.style.opacity = '0'; tta.style.top = window.scrollY + 'px'
tta.readOnly = true; tta.style.position = 'absolute'
tta.value = code; tta.style.opacity = '0'
document.body.append(tta); tta.readOnly = true
const selection = document.getSelection(); tta.value = code
const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false; document.body.append(tta)
tta.select(); const selection = document.getSelection()
tta.setSelectionRange(0, code.length); const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false
tta.readOnly = false; tta.select()
const result = document.execCommand('copy'); tta.setSelectionRange(0, code.length)
tta.readOnly = false
const result = document.execCommand('copy')
const copyIconDom = target.querySelector('i'); const copyIconDom = target.querySelector('i')
const copyTooltipDom = codeToolsBox.querySelector('.copy .tooltip-content'); const copyTooltipDom = codeToolsBox.querySelector('.copy .tooltip-content')
if (result) { if (result) {
copyIconDom.className = 'fas fa-check'; copyIconDom.className = 'fas fa-check'
copyTooltipDom && (copyTooltipDom.innerHTML = copiedLang); copyTooltipDom && (copyTooltipDom.innerHTML = copiedLang)
} else { } else {
copyIconDom.className = 'fas fa-times'; copyIconDom.className = 'fas fa-times'
} }
tta.blur(); tta.blur()
target.blur(); target.blur()
if (selected) { if (selected) {
selection.removeAllRanges(); selection.removeAllRanges()
selection.addRange(selected); selection.addRange(selected)
} }
document.body.removeChild(tta); document.body.removeChild(tta)
}); })
copyDom.addEventListener('mouseleave', event => { copyDom.addEventListener('mouseleave', (event) => {
setTimeout(() => { setTimeout(() => {
event.target.querySelector('i').className = 'fas fa-copy'; event.target.querySelector('i').className = 'fas fa-copy'
const copyTooltipDom = codeToolsBox.querySelector('.copy .tooltip-content'); const copyTooltipDom = codeToolsBox.querySelector('.copy .tooltip-content')
copyTooltipDom && (copyTooltipDom.innerHTML = copyLang); copyTooltipDom && (copyTooltipDom.innerHTML = copyLang)
}, 500); }, 500)
}); })
let isFold = false let isFold = false
targetFoldDom.addEventListener('click', event => { targetFoldDom.addEventListener('click', (event) => {
const target = event.currentTarget; const target = event.currentTarget
const icon = target.querySelector('i'); const icon = target.querySelector('i')
const foldTooltipDom = codeToolsBox.querySelector('.fold .tooltip-content'); const foldTooltipDom = codeToolsBox.querySelector('.fold .tooltip-content')
isFold = !isFold; isFold = !isFold
if (isFold) { if (isFold) {
icon.className = foldedIconClassName; icon.className = foldedIconClassName
element.classList.add('folded'); element.classList.add('folded')
codeToolsBox.classList.add('folded'); codeToolsBox.classList.add('folded')
foldTooltipDom && (foldTooltipDom.innerHTML = foldedLang) foldTooltipDom && (foldTooltipDom.innerHTML = foldedLang)
} else { } else {
icon.className = 'fas fa-chevron-down'; icon.className = 'fas fa-chevron-down'
element.classList.remove('folded'); element.classList.remove('folded')
codeToolsBox.classList.remove('folded'); codeToolsBox.classList.remove('folded')
foldTooltipDom && (foldTooltipDom.innerHTML = foldLang) foldTooltipDom && (foldTooltipDom.innerHTML = foldLang)
} }
}); })
}); })
} }

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

@ -1,58 +1,56 @@
/* global KEEP */ /* global KEEP */
KEEP.initModeToggle = () => { KEEP.initModeToggle = () => {
KEEP.utils.modeToggle = { KEEP.utils.modeToggle = {
modeToggleButton_dom: document.querySelector('.tool-dark-light-toggle'), modeToggleButton_dom: document.querySelector('.tool-dark-light-toggle'),
iconDom: document.querySelector('.tool-dark-light-toggle i'), iconDom: document.querySelector('.tool-dark-light-toggle i'),
enableLightMode() { enableLightMode() {
document.body.classList.remove('dark-mode'); document.body.classList.remove('dark-mode')
document.body.classList.add('light-mode'); document.body.classList.add('light-mode')
this.iconDom.className = 'fas fa-moon'; this.iconDom.className = 'fas fa-moon'
KEEP.styleStatus.isDark = false; KEEP.styleStatus.isDark = false
KEEP.setStyleStatus(); KEEP.setStyleStatus()
}, },
enableDarkMode() { enableDarkMode() {
document.body.classList.add('dark-mode'); document.body.classList.add('dark-mode')
document.body.classList.remove('light-mode'); document.body.classList.remove('light-mode')
this.iconDom.className = 'fas fa-sun'; this.iconDom.className = 'fas fa-sun'
KEEP.styleStatus.isDark = true; KEEP.styleStatus.isDark = true
KEEP.setStyleStatus(); KEEP.setStyleStatus()
}, },
isDarkPrefersColorScheme() { isDarkPrefersColorScheme() {
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)'); return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)')
}, },
initModeStatus() { initModeStatus() {
const styleStatus = KEEP.getStyleStatus(); const styleStatus = KEEP.getStyleStatus()
if (styleStatus) { if (styleStatus) {
styleStatus.isDark ? this.enableDarkMode() : this.enableLightMode(); styleStatus.isDark ? this.enableDarkMode() : this.enableLightMode()
} else { } else {
this.isDarkPrefersColorScheme().matches ? this.enableDarkMode() : this.enableLightMode(); this.isDarkPrefersColorScheme().matches ? this.enableDarkMode() : this.enableLightMode()
} }
}, },
initModeToggleButton() { initModeToggleButton() {
this.modeToggleButton_dom.addEventListener('click', () => { this.modeToggleButton_dom.addEventListener('click', () => {
const isDark = document.body.classList.contains('dark-mode'); const isDark = document.body.classList.contains('dark-mode')
isDark ? this.enableLightMode() : this.enableDarkMode(); isDark ? this.enableLightMode() : this.enableDarkMode()
}); })
}, },
initModeAutoTrigger() { initModeAutoTrigger() {
const isDarkMode = this.isDarkPrefersColorScheme(); const isDarkMode = this.isDarkPrefersColorScheme()
isDarkMode.addEventListener('change', e => { isDarkMode.addEventListener('change', (e) => {
e.matches ? this.enableDarkMode() : this.enableLightMode(); e.matches ? this.enableDarkMode() : this.enableLightMode()
}); })
} }
} }
KEEP.utils.modeToggle.initModeStatus(); KEEP.utils.modeToggle.initModeStatus()
KEEP.utils.modeToggle.initModeToggleButton(); KEEP.utils.modeToggle.initModeToggleButton()
KEEP.utils.modeToggle.initModeAutoTrigger(); KEEP.utils.modeToggle.initModeAutoTrigger()
}; }

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

@ -6,43 +6,45 @@ KEEP.initHeaderShrink = () => {
isHeaderShrink: false, isHeaderShrink: false,
init() { init() {
this.headerHeight = this.headerDom.getBoundingClientRect().height; this.headerHeight = this.headerDom.getBoundingClientRect().height
}, },
headerShrink() { headerShrink() {
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop; const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
const headerWrapperDom = document.querySelector('.header-wrapper'); const headerWrapperDom = document.querySelector('.header-wrapper')
const { enable, header_transparent } = KEEP.theme_config.style.first_screen; const { enable, header_transparent } = KEEP.theme_config.style.first_screen
if (!this.isHeaderShrink && scrollTop > this.headerHeight) { if (!this.isHeaderShrink && scrollTop > this.headerHeight) {
this.isHeaderShrink = true; this.isHeaderShrink = true
document.body.classList.add('header-shrink'); document.body.classList.add('header-shrink')
if (enable === true && header_transparent === true) { if (enable === true && header_transparent === true) {
headerWrapperDom.classList.add('transparent-2'); headerWrapperDom.classList.add('transparent-2')
} }
} else if (this.isHeaderShrink && scrollTop <= this.headerHeight) { } else if (this.isHeaderShrink && scrollTop <= this.headerHeight) {
this.isHeaderShrink = false; this.isHeaderShrink = false
document.body.classList.remove('header-shrink'); document.body.classList.remove('header-shrink')
if (enable === true && header_transparent === true) { if (enable === true && header_transparent === true) {
headerWrapperDom.classList.remove('transparent-2'); headerWrapperDom.classList.remove('transparent-2')
} }
} }
}, },
toggleHeaderDrawerShow() { 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) { 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', () => { v.addEventListener('click', () => {
document.body.classList.toggle('header-drawer-show'); document.body.classList.toggle('header-drawer-show')
}); })
}); })
} }
} }
KEEP.utils.headerShrink.init(); KEEP.utils.headerShrink.init()
KEEP.utils.headerShrink.headerShrink(); KEEP.utils.headerShrink.headerShrink()
KEEP.utils.headerShrink.toggleHeaderDrawerShow(); KEEP.utils.headerShrink.toggleHeaderDrawerShow()
} }

43
source/js/lazyload.js
View File

@ -1,43 +1,42 @@
/* global KEEP */ /* global KEEP */
KEEP.initLazyLoad = () => { KEEP.initLazyLoad = () => {
const imgs = document.querySelectorAll('img'); const imgs = document.querySelectorAll('img')
let now = Date.now(); let now = Date.now()
let needLoad = true; let needLoad = true
function lazyload(imgs) { function lazyload(imgs) {
now = Date.now(); now = Date.now()
needLoad = Array.from(imgs).some(i => i.hasAttribute('lazyload')); needLoad = Array.from(imgs).some((i) => i.hasAttribute('lazyload'))
const h = window.innerHeight; const h = window.innerHeight
const s = document.documentElement.scrollTop || document.body.scrollTop; const s = document.documentElement.scrollTop || document.body.scrollTop
imgs.forEach(img => { imgs.forEach((img) => {
if (img.hasAttribute('lazyload') && !img.hasAttribute('loading')) { if (img.hasAttribute('lazyload') && !img.hasAttribute('loading')) {
if (h + s > img.offsetTop) {
if ((h + s) > img.offsetTop) { img.setAttribute('loading', true)
img.setAttribute('loading', true);
const loadImageTimeout = setTimeout(() => { const loadImageTimeout = setTimeout(() => {
const temp = new Image(); const temp = new Image()
const src = img.getAttribute('data-src'); const src = img.getAttribute('data-src')
temp.src = src; temp.src = src
temp.onload = () => { temp.onload = () => {
img.src = src; img.src = src
img.removeAttribute('lazyload'); img.removeAttribute('lazyload')
img.removeAttribute('loading'); img.removeAttribute('loading')
clearTimeout(loadImageTimeout); clearTimeout(loadImageTimeout)
} }
}, 500); }, 500)
} }
} }
}); })
} }
lazyload(imgs); lazyload(imgs)
window.onscroll = () => { window.onscroll = () => {
if (Date.now() - now > 50 && needLoad) { if (Date.now() - now > 50 && needLoad) {
lazyload(imgs); lazyload(imgs)
} }
} }
} }

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

@ -2,7 +2,6 @@
function initLeftSideToggle() { function initLeftSideToggle() {
KEEP.utils.leftSideToggle = { KEEP.utils.leftSideToggle = {
toggleBar: document.querySelector('.page-aside-toggle'), toggleBar: document.querySelector('.page-aside-toggle'),
pageTopDom: document.querySelector('.page-main-content-top'), pageTopDom: document.querySelector('.page-main-content-top'),
containerDom: document.querySelector('.page-container'), containerDom: document.querySelector('.page-container'),
@ -12,33 +11,35 @@ function initLeftSideToggle() {
isOpenPageAside: false, isOpenPageAside: false,
initToggleBarButton() { initToggleBarButton() {
this.toggleBar && this.toggleBar.addEventListener('click', () => { this.toggleBar &&
this.isOpenPageAside = !this.isOpenPageAside; this.toggleBar.addEventListener('click', () => {
KEEP.styleStatus.isOpenPageAside = this.isOpenPageAside; this.isOpenPageAside = !this.isOpenPageAside
KEEP.setStyleStatus(); KEEP.styleStatus.isOpenPageAside = this.isOpenPageAside
this.changePageLayoutWhenOpenToggle(this.isOpenPageAside); KEEP.setStyleStatus()
}); this.changePageLayoutWhenOpenToggle(this.isOpenPageAside)
})
}, },
changePageLayoutWhenOpenToggle(isOpen) { changePageLayoutWhenOpenToggle(isOpen) {
this.toggleBarIcon && (this.toggleBarIcon.className = isOpen ? 'fas fa-outdent' : 'fas fa-indent'); this.toggleBarIcon &&
const pageAsideWidth = KEEP.theme_config.style.left_side_width || '260px'; (this.toggleBarIcon.className = isOpen ? 'fas fa-outdent' : 'fas fa-indent')
this.containerDom.style.paddingLeft = isOpen ? pageAsideWidth : '0'; const pageAsideWidth = KEEP.theme_config.style.left_side_width || '260px'
this.pageTopDom.style.paddingLeft = isOpen ? pageAsideWidth : '0'; this.containerDom.style.paddingLeft = isOpen ? pageAsideWidth : '0'
this.leftAsideDom.style.left = isOpen ? '0' : `-${pageAsideWidth}`; this.pageTopDom.style.paddingLeft = isOpen ? pageAsideWidth : '0'
this.leftAsideDom.style.left = isOpen ? '0' : `-${pageAsideWidth}`
}, },
pageAsideHandleOfTOC(isOpen) { pageAsideHandleOfTOC(isOpen) {
this.toggleBar.style.display = 'flex'; this.toggleBar.style.display = 'flex'
this.isOpenPageAside = isOpen; this.isOpenPageAside = isOpen
this.changePageLayoutWhenOpenToggle(isOpen); this.changePageLayoutWhenOpenToggle(isOpen)
} }
} }
KEEP.utils.leftSideToggle.initToggleBarButton(); KEEP.utils.leftSideToggle.initToggleBarButton()
} }
if (KEEP.theme_config.pjax.enable === true && KEEP.utils) { if (KEEP.theme_config.pjax.enable === true && KEEP.utils) {
initLeftSideToggle(); initLeftSideToggle()
} else { } else {
window.addEventListener('DOMContentLoaded', initLeftSideToggle); window.addEventListener('DOMContentLoaded', initLeftSideToggle)
} }

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

@ -1,68 +1,69 @@
KEEP.initLocalSearch = () => { /* global KEEP */
KEEP.initLocalSearch = () => {
// Search DB path // Search DB path
let searchPath = KEEP.hexo_config.path; let searchPath = KEEP.hexo_config.path
if (!searchPath) { if (!searchPath) {
// Search DB path // Search DB path
console.warn('`hexo-generator-searchdb` plugin is not installed!'); console.warn('`hexo-generator-searchdb` plugin is not installed!')
return; return
} }
// Popup Window // Popup Window
let isfetched = false; let isfetched = false
let datas; let datas
let isXml = true; let isXml = true
if (searchPath.length === 0) { if (searchPath.length === 0) {
searchPath = 'search.xml'; searchPath = 'search.xml'
} else if (searchPath.endsWith('json')) { } else if (searchPath.endsWith('json')) {
isXml = false; isXml = false
} }
const searchInputDom = document.querySelector('.search-input'); const searchInputDom = document.querySelector('.search-input')
const resultContent = document.getElementById('search-result'); const resultContent = document.getElementById('search-result')
const getIndexByWord = (word, text, caseSensitive) => { const getIndexByWord = (word, text, caseSensitive) => {
let wordLen = word.length; let wordLen = word.length
if (wordLen === 0) return []; if (wordLen === 0) return []
let startPosition = 0; let startPosition = 0
let position = []; let position = []
let index = []; let index = []
if (!caseSensitive) { if (!caseSensitive) {
text = text.toLowerCase(); text = text.toLowerCase()
word = word.toLowerCase(); word = word.toLowerCase()
} }
while ((position = text.indexOf(word, startPosition)) > -1) { while ((position = text.indexOf(word, startPosition)) > -1) {
index.push({position, word}); index.push({ position, word })
startPosition = position + wordLen; startPosition = position + wordLen
} }
return index; return index
}; }
// Merge hits into slices // Merge hits into slices
const mergeIntoSlice = (start, end, index, searchText) => { const mergeIntoSlice = (start, end, index, searchText) => {
let item = index[index.length - 1]; let item = index[index.length - 1]
let {position, word} = item; let { position, word } = item
let hits = []; let hits = []
let searchTextCountInSlice = 0; let searchTextCountInSlice = 0
while (position + word.length <= end && index.length !== 0) { while (position + word.length <= end && index.length !== 0) {
if (word === searchText) { if (word === searchText) {
searchTextCountInSlice++; searchTextCountInSlice++
} }
hits.push({ hits.push({
position, position,
length: word.length length: word.length
}); })
let wordEnd = position + word.length; let wordEnd = position + word.length
// Move to next position of hit // Move to next position of hit
index.pop(); index.pop()
while (index.length !== 0) { while (index.length !== 0) {
item = index[index.length - 1]; item = index[index.length - 1]
position = item.position; position = item.position
word = item.word; word = item.word
if (wordEnd > position) { if (wordEnd > position) {
index.pop(); index.pop()
} else { } else {
break; break
} }
} }
} }
@ -71,212 +72,228 @@ KEEP.initLocalSearch = () => {
start, start,
end, end,
searchTextCount: searchTextCountInSlice searchTextCount: searchTextCountInSlice
}; }
}; }
// Highlight title and content // Highlight title and content
const highlightKeyword = (text, slice) => { const highlightKeyword = (text, slice) => {
let result = ''; let result = ''
let prevEnd = slice.start; let prevEnd = slice.start
slice.hits.forEach(hit => { slice.hits.forEach((hit) => {
result += text.substring(prevEnd, hit.position); result += text.substring(prevEnd, hit.position)
let end = hit.position + hit.length; let end = hit.position + hit.length
result += `<b class="search-keyword">${text.substring(hit.position, end)}</b>`; result += `<b class="search-keyword">${text.substring(hit.position, end)}</b>`
prevEnd = end; prevEnd = end
}); })
result += text.substring(prevEnd, slice.end); result += text.substring(prevEnd, slice.end)
return result; return result
}; }
const inputEventFunction = () => { const inputEventFunction = () => {
if (!isfetched) return; if (!isfetched) return
let searchText = searchInputDom.value.trim().toLowerCase(); let searchText = searchInputDom.value.trim().toLowerCase()
let keywords = searchText.split(/[-\s]+/); let keywords = searchText.split(/[-\s]+/)
if (keywords.length > 1) { if (keywords.length > 1) {
keywords.push(searchText); keywords.push(searchText)
} }
let resultItems = []; let resultItems = []
if (searchText.length > 0) { if (searchText.length > 0) {
// Perform local searching // Perform local searching
datas.forEach(({title, content, url}) => { datas.forEach(({ title, content, url }) => {
let titleInLowerCase = title.toLowerCase(); let titleInLowerCase = title.toLowerCase()
let contentInLowerCase = content.toLowerCase(); let contentInLowerCase = content.toLowerCase()
let indexOfTitle = []; let indexOfTitle = []
let indexOfContent = []; let indexOfContent = []
let searchTextCount = 0; let searchTextCount = 0
keywords.forEach(keyword => { keywords.forEach((keyword) => {
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false)); indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false))
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false)); indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false))
}); })
// Show search results // Show search results
if (indexOfTitle.length > 0 || indexOfContent.length > 0) { 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 // Sort index by position of keyword
[indexOfTitle, indexOfContent].forEach(index => { ;[indexOfTitle, indexOfContent].forEach((index) => {
index.sort((itemLeft, itemRight) => { index.sort((itemLeft, itemRight) => {
if (itemRight.position !== itemLeft.position) { 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) { if (indexOfTitle.length !== 0) {
let tmp = mergeIntoSlice(0, title.length, indexOfTitle, searchText); let tmp = mergeIntoSlice(0, title.length, indexOfTitle, searchText)
searchTextCount += tmp.searchTextCountInSlice; searchTextCount += tmp.searchTextCountInSlice
slicesOfTitle.push(tmp); slicesOfTitle.push(tmp)
} }
let slicesOfContent = []; let slicesOfContent = []
while (indexOfContent.length !== 0) { while (indexOfContent.length !== 0) {
let item = indexOfContent[indexOfContent.length - 1]; let item = indexOfContent[indexOfContent.length - 1]
let {position, word} = item; let { position, word } = item
// Cut out 100 characters // Cut out 100 characters
let start = position - 20; let start = position - 20
let end = position + 80; let end = position + 80
if (start < 0) { if (start < 0) {
start = 0; start = 0
} }
if (end < position + word.length) { if (end < position + word.length) {
end = position + word.length; end = position + word.length
} }
if (end > content.length) { if (end > content.length) {
end = content.length; end = content.length
} }
let tmp = mergeIntoSlice(start, end, indexOfContent, searchText); let tmp = mergeIntoSlice(start, end, indexOfContent, searchText)
searchTextCount += tmp.searchTextCountInSlice; searchTextCount += tmp.searchTextCountInSlice
slicesOfContent.push(tmp); slicesOfContent.push(tmp)
} }
// Sort slices in content by search text's count and hits' count // Sort slices in content by search text's count and hits' count
slicesOfContent.sort((sliceLeft, sliceRight) => { slicesOfContent.sort((sliceLeft, sliceRight) => {
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) { if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
return sliceRight.searchTextCount - sliceLeft.searchTextCount; return sliceRight.searchTextCount - sliceLeft.searchTextCount
} else if (sliceLeft.hits.length !== sliceRight.hits.length) { } 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 // 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) { if (upperBound >= 0) {
slicesOfContent = slicesOfContent.slice(0, upperBound); slicesOfContent = slicesOfContent.slice(0, upperBound)
} }
let resultItem = ''; let resultItem = ''
if (slicesOfTitle.length !== 0) { 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 { } 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 => { slicesOfContent.forEach((slice) => {
resultItem += `<a href="${url}"><p class="search-result">${highlightKeyword(content, slice)}...</p></a>`; resultItem += `<a href="${url}"><p class="search-result">${highlightKeyword(
}); content,
slice
)}...</p></a>`
})
resultItem += '</li>'; resultItem += '</li>'
resultItems.push({ resultItems.push({
item: resultItem, item: resultItem,
id: resultItems.length, id: resultItems.length,
hitCount, hitCount,
searchTextCount searchTextCount
}); })
} }
}); })
} }
if (keywords.length === 1 && keywords[0] === '') { 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) { } 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 { } else {
resultItems.sort((resultLeft, resultRight) => { resultItems.sort((resultLeft, resultRight) => {
if (resultLeft.searchTextCount !== resultRight.searchTextCount) { if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
return resultRight.searchTextCount - resultLeft.searchTextCount; return resultRight.searchTextCount - resultLeft.searchTextCount
} else if (resultLeft.hitCount !== resultRight.hitCount) { } else if (resultLeft.hitCount !== resultRight.hitCount) {
return resultRight.hitCount - resultLeft.hitCount; return resultRight.hitCount - resultLeft.hitCount
} }
return resultRight.id - resultLeft.id; return resultRight.id - resultLeft.id
}); })
let searchResultList = '<ul class="search-result-list">'; let searchResultList = '<ul class="search-result-list">'
resultItems.forEach(result => { resultItems.forEach((result) => {
searchResultList += result.item; searchResultList += result.item
}); })
searchResultList += '</ul>'; searchResultList += '</ul>'
resultContent.innerHTML = searchResultList; resultContent.innerHTML = searchResultList
window.pjax && window.pjax.refresh(resultContent); window.pjax && window.pjax.refresh(resultContent)
} }
}; }
const fetchData = () => { const fetchData = () => {
fetch(KEEP.hexo_config.root + searchPath) fetch(KEEP.hexo_config.root + searchPath)
.then(response => response.text()) .then((response) => response.text())
.then(res => { .then((res) => {
// Get the contents from search data // Get the contents from search data
isfetched = true; isfetched = true
datas = isXml ? [...new DOMParser().parseFromString(res, 'text/xml').querySelectorAll('entry')].map(element => { datas = isXml
return { ? [...new DOMParser().parseFromString(res, 'text/xml').querySelectorAll('entry')].map(
title: element.querySelector('title').textContent, (element) => {
content: element.querySelector('content').textContent, return {
url: element.querySelector('url').textContent title: element.querySelector('title').textContent,
}; content: element.querySelector('content').textContent,
}) : JSON.parse(res); url: element.querySelector('url').textContent
}
}
)
: JSON.parse(res)
// Only match articles with not empty titles // Only match articles with not empty titles
datas = datas.filter(data => data.title).map(data => { datas = datas
data.title = data.title.trim(); .filter((data) => data.title)
data.content = data.content ? data.content.trim().replace(/<[^>]+>/g, '') : ''; .map((data) => {
data.url = decodeURIComponent(data.url).replace(/\/{2,}/g, '/'); data.title = data.title.trim()
return data; data.content = data.content ? data.content.trim().replace(/<[^>]+>/g, '') : ''
}); data.url = decodeURIComponent(data.url).replace(/\/{2,}/g, '/')
return data
})
// Remove loading animation // Remove loading animation
const noResultDom = document.querySelector('#no-result'); const noResultDom = document.querySelector('#no-result')
noResultDom && (noResultDom.innerHTML = '<i class="fas fa-search fa-5x"></i>'); noResultDom && (noResultDom.innerHTML = '<i class="fas fa-search fa-5x"></i>')
}); })
}; }
if (KEEP.theme_config.local_search.preload) { if (KEEP.theme_config.local_search.preload) {
fetchData(); fetchData()
} }
if (searchInputDom) { if (searchInputDom) {
searchInputDom.addEventListener('input', inputEventFunction); searchInputDom.addEventListener('input', inputEventFunction)
} }
// Handle and trigger popup window // Handle and trigger popup window
document.querySelectorAll('.search-popup-trigger').forEach(element => { document.querySelectorAll('.search-popup-trigger').forEach((element) => {
element.addEventListener('click', () => { element.addEventListener('click', () => {
document.body.style.overflow = 'hidden'; document.body.style.overflow = 'hidden'
document.querySelector('.search-pop-overlay').classList.add('active'); document.querySelector('.search-pop-overlay').classList.add('active')
setTimeout(() => searchInputDom.focus(), 500); setTimeout(() => searchInputDom.focus(), 500)
if (!isfetched) fetchData(); if (!isfetched) fetchData()
}); })
}); })
// Monitor main search box // Monitor main search box
const onPopupClose = () => { const onPopupClose = () => {
document.body.style.overflow = ''; document.body.style.overflow = ''
document.querySelector('.search-pop-overlay').classList.remove('active'); 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')) { if (event.target === document.querySelector('.search-pop-overlay')) {
onPopupClose(); onPopupClose()
} }
}); })
document.querySelector('.search-input-field-pre').addEventListener('click', () => { document.querySelector('.search-input-field-pre').addEventListener('click', () => {
searchInputDom.value = ''; searchInputDom.value = ''
searchInputDom.focus(); searchInputDom.focus()
inputEventFunction(); inputEventFunction()
}); })
document.querySelector('.close-popup-btn').addEventListener('click', onPopupClose); document.querySelector('.close-popup-btn').addEventListener('click', onPopupClose)
window.addEventListener('pjax:success', onPopupClose); window.addEventListener('pjax:success', onPopupClose)
window.addEventListener('keyup', event => { window.addEventListener('keyup', (event) => {
if (event.key === 'Escape') { if (event.key === 'Escape') {
onPopupClose(); onPopupClose()
} }
}); })
} }

51
source/js/main.js
View File

@ -1,14 +1,15 @@
/* global KEEP */ /* global KEEP */
window.addEventListener('DOMContentLoaded', () => { window.addEventListener('DOMContentLoaded', () => {
const { version, local_search, code_block_tools, code_copy, lazyload } = KEEP.theme_config
KEEP.themeInfo = { KEEP.themeInfo = {
theme: `Keep v3.4.7`, theme: `Keep v${version}`,
author: 'XPoet', author: 'XPoet',
repository: 'https://github.com/XPoet/hexo-theme-keep' repository: 'https://github.com/XPoet/hexo-theme-keep'
} }
KEEP.localStorageKey = 'KEEP-THEME-STATUS'; KEEP.localStorageKey = 'KEEP-THEME-STATUS'
KEEP.styleStatus = { KEEP.styleStatus = {
isExpandPageWidth: false, isExpandPageWidth: false,
@ -21,51 +22,49 @@ window.addEventListener('DOMContentLoaded', () => {
KEEP.printThemeInfo = () => { KEEP.printThemeInfo = () => {
console.log( console.log(
`\n %c ${KEEP.themeInfo.theme} %c ${KEEP.themeInfo.repository} \n`, `\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 // set styleStatus to localStorage
KEEP.setStyleStatus = () => { KEEP.setStyleStatus = () => {
localStorage.setItem(KEEP.localStorageKey, JSON.stringify(KEEP.styleStatus)); localStorage.setItem(KEEP.localStorageKey, JSON.stringify(KEEP.styleStatus))
} }
// get styleStatus from localStorage // get styleStatus from localStorage
KEEP.getStyleStatus = () => { KEEP.getStyleStatus = () => {
let temp = localStorage.getItem(KEEP.localStorageKey); let temp = localStorage.getItem(KEEP.localStorageKey)
if (temp) { if (temp) {
temp = JSON.parse(temp); temp = JSON.parse(temp)
for (let key in KEEP.styleStatus) { for (let key in KEEP.styleStatus) {
KEEP.styleStatus[key] = temp[key]; KEEP.styleStatus[key] = temp[key]
} }
return temp; return temp
} else { } else {
return null; return null
} }
} }
KEEP.refresh = () => { KEEP.refresh = () => {
KEEP.initUtils(); KEEP.initUtils()
KEEP.initHeaderShrink(); KEEP.initHeaderShrink()
KEEP.initModeToggle(); KEEP.initModeToggle()
KEEP.initBack2Top(); KEEP.initBack2Top()
if (KEEP.theme_config.local_search?.enable === true) { if (local_search?.enable === true) {
KEEP.initLocalSearch(); KEEP.initLocalSearch()
} }
if ( if (code_block_tools?.enable === true || code_copy?.enable === true) {
KEEP.theme_config.code_block_tools?.enable === true KEEP.initCodeBlockTools()
|| KEEP.theme_config.code_copy?.enable === true
) {
KEEP.initCodeBlockTools();
} }
if (KEEP.theme_config.lazyload?.enable === true) { if (lazyload?.enable === true) {
KEEP.initLazyLoad(); KEEP.initLazyLoad()
} }
} }
KEEP.printThemeInfo(); KEEP.printThemeInfo()
KEEP.refresh(); KEEP.refresh()
}); })

121
source/js/toc.js
View File

@ -1,106 +1,111 @@
/* global KEEP */ /* global KEEP */
function initTOC() { 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) { if (KEEP.utils.navItems.length > 0) {
KEEP.utils = { KEEP.utils = {
...KEEP.utils, ...KEEP.utils,
findActiveIndexByTOC() { findActiveIndexByTOC() {
if (!Array.isArray(KEEP.utils.sections)) return; if (!Array.isArray(KEEP.utils.sections)) return
let index = KEEP.utils.sections.findIndex(element => { let index = KEEP.utils.sections.findIndex((element) => {
return element && element.getBoundingClientRect().top - 20 > 0; return element && element.getBoundingClientRect().top - 20 > 0
}); })
if (index === -1) { if (index === -1) {
index = KEEP.utils.sections.length - 1; index = KEEP.utils.sections.length - 1
} else if (index > 0) { } else if (index > 0) {
index--; index--
} }
this.activateNavByIndex(index); this.activateNavByIndex(index)
}, },
registerSidebarTOC() { registerSidebarTOC() {
KEEP.utils.sections = [...document.querySelectorAll('.post-toc li a.nav-link')].map(element => { KEEP.utils.sections = [...document.querySelectorAll('.post-toc li a.nav-link')].map(
const target = document.getElementById(decodeURI(element.getAttribute('href')).replace('#', '')); (element) => {
element.addEventListener('click', event => { const target = document.getElementById(
event.preventDefault(); decodeURI(element.getAttribute('href')).replace('#', '')
const offset = target.getBoundingClientRect().top + window.scrollY; )
window.anime({ element.addEventListener('click', (event) => {
targets: document.scrollingElement, event.preventDefault()
duration: 500, const offset = target.getBoundingClientRect().top + window.scrollY
easing: 'linear', window.anime({
scrollTop: offset - 10, targets: document.scrollingElement,
complete: function () { duration: 500,
setTimeout(() => { easing: 'linear',
KEEP.utils.pageTop_dom.classList.add('hide'); scrollTop: offset - 10,
}, 100) complete: function () {
} setTimeout(() => {
}); KEEP.utils.pageTop_dom.classList.add('hide')
}); }, 100)
return target; }
}); })
})
return target
}
)
}, },
activateNavByIndex(index) { activateNavByIndex(index) {
const target = document.querySelectorAll('.post-toc li a.nav-link')[index]; const target = document.querySelectorAll('.post-toc li a.nav-link')[index]
if (!target || target.classList.contains('active-current')) return; if (!target || target.classList.contains('active-current')) return
document.querySelectorAll('.post-toc .active').forEach(element => { document.querySelectorAll('.post-toc .active').forEach((element) => {
element.classList.remove('active', 'active-current'); element.classList.remove('active', 'active-current')
}); })
target.classList.add('active', 'active-current'); target.classList.add('active', 'active-current')
let parent = target.parentNode; let parent = target.parentNode
while (!parent.matches('.post-toc')) { while (!parent.matches('.post-toc')) {
if (parent.matches('li')) parent.classList.add('active'); if (parent.matches('li')) parent.classList.add('active')
parent = parent.parentNode; parent = parent.parentNode
} }
// Scrolling to center active TOC element if TOC content is taller then viewport. // 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({ window.anime({
targets: tocElement, targets: tocElement,
duration: 200, duration: 200,
easing: 'linear', 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() { showPageAsideWhenHasTOC() {
const openHandle = () => { const openHandle = () => {
const styleStatus = KEEP.getStyleStatus(); const styleStatus = KEEP.getStyleStatus()
const key = 'isOpenPageAside'; const key = 'isOpenPageAside'
if (styleStatus && styleStatus.hasOwnProperty(key)) { if (styleStatus && styleStatus.hasOwnProperty(key)) {
KEEP.utils.leftSideToggle.pageAsideHandleOfTOC(styleStatus[key]); KEEP.utils.leftSideToggle.pageAsideHandleOfTOC(styleStatus[key])
} else { } 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)) { 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 { } else {
openHandle(); openHandle()
} }
} }
} }
KEEP.utils.showPageAsideWhenHasTOC(); KEEP.utils.showPageAsideWhenHasTOC()
KEEP.utils.registerSidebarTOC(); KEEP.utils.registerSidebarTOC()
} else { } else {
const pageAsideDom = document.querySelector('.page-aside'); const pageAsideDom = document.querySelector('.page-aside')
pageAsideDom && KEEP.utils.pageContainer_dom.removeChild(pageAsideDom); pageAsideDom && KEEP.utils.pageContainer_dom.removeChild(pageAsideDom)
} }
} }
if (KEEP.theme_config.pjax.enable === true && KEEP.utils) { if (KEEP.theme_config.pjax.enable === true && KEEP.utils) {
initTOC(); initTOC()
} else { } else {
window.addEventListener('DOMContentLoaded', initTOC); window.addEventListener('DOMContentLoaded', initTOC)
} }

345
source/js/utils.js
View File

@ -1,7 +1,6 @@
/* global KEEP */ /* global KEEP */
KEEP.initUtils = () => { KEEP.initUtils = () => {
KEEP.utils = { KEEP.utils = {
html_root_dom: document.querySelector('html'), html_root_dom: document.querySelector('html'),
pageContainer_dom: document.querySelector('.page-container'), pageContainer_dom: document.querySelector('.page-container'),
@ -22,56 +21,55 @@ KEEP.initUtils = () => {
isHeaderTransparent: false, isHeaderTransparent: false,
initData() { initData() {
const { scroll, first_screen } = KEEP.theme_config.style; const { scroll, first_screen } = KEEP.theme_config.style
this.isHasScrollProgressBar = scroll.progress_bar.enable === true; this.isHasScrollProgressBar = scroll.progress_bar.enable === true
this.isHasScrollPercent = scroll.percent.enable === true; this.isHasScrollPercent = scroll.percent.enable === true
const { enable, header_transparent } = first_screen; const { enable, header_transparent } = first_screen
this.isHeaderTransparent = enable === true && header_transparent === true; this.isHeaderTransparent = enable === true && header_transparent === true
}, },
// Scroll Style Handle // Scroll Style Handle
styleHandleWhenScroll() { styleHandleWhenScroll() {
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop; const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
const scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight; const scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight
const clientHeight = window.innerHeight || document.documentElement.clientHeight; 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) { if (this.isHasScrollProgressBar) {
const ProgressPercent = (scrollTop / (scrollHeight - clientHeight) * 100).toFixed(3); const ProgressPercent = ((scrollTop / (scrollHeight - clientHeight)) * 100).toFixed(3)
this.scrollProgressBar_dom.style.visibility = percent === 0 ? 'hidden' : 'visible'; this.scrollProgressBar_dom.style.visibility = percent === 0 ? 'hidden' : 'visible'
this.scrollProgressBar_dom.style.width = `${ProgressPercent}%`; this.scrollProgressBar_dom.style.width = `${ProgressPercent}%`
} }
if (this.isHasScrollPercent) { if (this.isHasScrollPercent) {
const percent_dom = this.back2TopButton_dom.querySelector('.percent'); const percent_dom = this.back2TopButton_dom.querySelector('.percent')
if (percent === 0 || percent === undefined) { if (percent === 0 || percent === undefined) {
this.back2TopButton_dom.classList.remove('show'); this.back2TopButton_dom.classList.remove('show')
} else { } else {
this.back2TopButton_dom.classList.add('show'); this.back2TopButton_dom.classList.add('show')
percent_dom.innerHTML = percent.toFixed(0); percent_dom.innerHTML = percent.toFixed(0)
} }
} }
// hide header handle // hide header handle
if (scrollTop > this.prevScrollValue && scrollTop > this.innerHeight) { if (scrollTop > this.prevScrollValue && scrollTop > this.innerHeight) {
this.pageTop_dom.classList.add('hide'); this.pageTop_dom.classList.add('hide')
if (this.isHeaderTransparent) { if (this.isHeaderTransparent) {
this.headerWrapper_dom.classList.remove('transparent-1', 'transparent-2'); this.headerWrapper_dom.classList.remove('transparent-1', 'transparent-2')
} }
} else { } else {
this.pageTop_dom.classList.remove('hide'); this.pageTop_dom.classList.remove('hide')
if (this.isHeaderTransparent) { if (this.isHeaderTransparent) {
if (scrollTop <= this.headerWrapper_dom.getBoundingClientRect().height) { if (scrollTop <= this.headerWrapper_dom.getBoundingClientRect().height) {
this.headerWrapper_dom.classList.remove('transparent-2'); this.headerWrapper_dom.classList.remove('transparent-2')
this.headerWrapper_dom.classList.add('transparent-1'); this.headerWrapper_dom.classList.add('transparent-1')
} else if (scrollTop < this.innerHeight) { } 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 // register window scroll event
@ -79,182 +77,183 @@ KEEP.initUtils = () => {
window.addEventListener('scroll', () => { window.addEventListener('scroll', () => {
// style handle when scroll // style handle when scroll
if (this.isHasScrollPercent || this.isHasScrollProgressBar) { if (this.isHasScrollPercent || this.isHasScrollProgressBar) {
this.styleHandleWhenScroll(); this.styleHandleWhenScroll()
} }
// TOC scroll handle // TOC scroll handle
if (KEEP.theme_config.toc.enable && KEEP.utils.hasOwnProperty('findActiveIndexByTOC')) { if (KEEP.theme_config.toc.enable && KEEP.utils.hasOwnProperty('findActiveIndexByTOC')) {
KEEP.utils.findActiveIndexByTOC(); KEEP.utils.findActiveIndexByTOC()
} }
// header shrink // header shrink
KEEP.utils.headerShrink.headerShrink(); KEEP.utils.headerShrink.headerShrink()
}); })
}, },
// toggle show tools list // toggle show tools list
toggleShowToolsList() { toggleShowToolsList() {
document.querySelector('.tool-toggle-show').addEventListener('click', () => { 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 // global font adjust
globalFontAdjust() { globalFontAdjust() {
const fontSize = document.defaultView.getComputedStyle(document.body).fontSize; const fontSize = document.defaultView.getComputedStyle(document.body).fontSize
const fs = parseFloat(fontSize); const fs = parseFloat(fontSize)
const initFontSize = () => { const initFontSize = () => {
const styleStatus = KEEP.getStyleStatus(); const styleStatus = KEEP.getStyleStatus()
if (styleStatus) { if (styleStatus) {
this.fontSizeLevel = styleStatus.fontSizeLevel; this.fontSizeLevel = styleStatus.fontSizeLevel
setFontSize(this.fontSizeLevel); setFontSize(this.fontSizeLevel)
} }
} }
const setFontSize = (fontSizeLevel) => { const setFontSize = (fontSizeLevel) => {
this.html_root_dom.style.fontSize = `${fs * (1 + fontSizeLevel * 0.05)}px`; this.html_root_dom.style.fontSize = `${fs * (1 + fontSizeLevel * 0.05)}px`
KEEP.styleStatus.fontSizeLevel = fontSizeLevel; KEEP.styleStatus.fontSizeLevel = fontSizeLevel
KEEP.setStyleStatus(); KEEP.setStyleStatus()
} }
initFontSize(); initFontSize()
document.querySelector('.tool-font-adjust-plus').addEventListener('click', () => { document.querySelector('.tool-font-adjust-plus').addEventListener('click', () => {
if (this.fontSizeLevel === 5) return; if (this.fontSizeLevel === 5) return
this.fontSizeLevel++; this.fontSizeLevel++
setFontSize(this.fontSizeLevel); setFontSize(this.fontSizeLevel)
}); })
document.querySelector('.tool-font-adjust-minus').addEventListener('click', () => { document.querySelector('.tool-font-adjust-minus').addEventListener('click', () => {
if (this.fontSizeLevel <= 0) return; if (this.fontSizeLevel <= 0) return
this.fontSizeLevel--; this.fontSizeLevel--
setFontSize(this.fontSizeLevel); setFontSize(this.fontSizeLevel)
}); })
}, },
// toggle content area width // toggle content area width
contentAreaWidthAdjust() { contentAreaWidthAdjust() {
const toolExpandDom = document.querySelector('.tool-expand-width'); const toolExpandDom = document.querySelector('.tool-expand-width')
const headerContentDom = document.querySelector('.header-content'); const headerContentDom = document.querySelector('.header-content')
const mainContentDom = document.querySelector('.main-content'); const mainContentDom = document.querySelector('.main-content')
const iconDom = toolExpandDom.querySelector('i'); const iconDom = toolExpandDom.querySelector('i')
const defaultMaxWidth = KEEP.theme_config.style.content_max_width || '1000px'; const defaultMaxWidth = KEEP.theme_config.style.content_max_width || '1000px'
const expandMaxWidth = '90%'; const expandMaxWidth = '90%'
let headerMaxWidth = defaultMaxWidth; let headerMaxWidth = defaultMaxWidth
let isExpand = false; let isExpand = false
if (KEEP.theme_config.style.first_screen.enable === true && window.location.pathname === '/') { if (
headerMaxWidth = parseInt(defaultMaxWidth) * 1.2 + 'px'; KEEP.theme_config.style.first_screen.enable === true &&
window.location.pathname === '/'
) {
headerMaxWidth = parseInt(defaultMaxWidth) * 1.2 + 'px'
} }
const setPageWidth = (isExpand) => { const setPageWidth = (isExpand) => {
KEEP.styleStatus.isExpandPageWidth = isExpand; KEEP.styleStatus.isExpandPageWidth = isExpand
KEEP.setStyleStatus(); KEEP.setStyleStatus()
if (isExpand) { if (isExpand) {
iconDom.classList.remove('fa-up-right-and-down-left-from-center'); iconDom.classList.remove('fa-up-right-and-down-left-from-center')
iconDom.classList.add('fa-down-left-and-up-right-to-center'); iconDom.classList.add('fa-down-left-and-up-right-to-center')
headerContentDom.style.maxWidth = expandMaxWidth; headerContentDom.style.maxWidth = expandMaxWidth
mainContentDom.style.maxWidth = expandMaxWidth; mainContentDom.style.maxWidth = expandMaxWidth
} else { } else {
iconDom.classList.remove('fa-down-left-and-up-right-to-center'); iconDom.classList.remove('fa-down-left-and-up-right-to-center')
iconDom.classList.add('fa-up-right-and-down-left-from-center'); iconDom.classList.add('fa-up-right-and-down-left-from-center')
headerContentDom.style.maxWidth = headerMaxWidth; headerContentDom.style.maxWidth = headerMaxWidth
mainContentDom.style.maxWidth = defaultMaxWidth; mainContentDom.style.maxWidth = defaultMaxWidth
} }
} }
const initPageWidth = () => { const initPageWidth = () => {
const styleStatus = KEEP.getStyleStatus(); const styleStatus = KEEP.getStyleStatus()
if (styleStatus) { if (styleStatus) {
isExpand = styleStatus.isExpandPageWidth; isExpand = styleStatus.isExpandPageWidth
setPageWidth(isExpand); setPageWidth(isExpand)
} }
} }
initPageWidth(); initPageWidth()
toolExpandDom.addEventListener('click', () => { toolExpandDom.addEventListener('click', () => {
isExpand = !isExpand; isExpand = !isExpand
setPageWidth(isExpand) setPageWidth(isExpand)
}); })
}, },
// go comment anchor // go comment anchor
goComment() { goComment() {
this.goComment_dom = document.querySelector('.go-comment'); this.goComment_dom = document.querySelector('.go-comment')
if (this.goComment_dom) { if (this.goComment_dom) {
this.goComment_dom.addEventListener('click', () => { this.goComment_dom.addEventListener('click', () => {
document.querySelector('#comment-anchor').scrollIntoView(); document.querySelector('#comment-anchor').scrollIntoView()
}); })
} }
}, },
// get dom element height // get dom element height
getElementHeight(selectors) { getElementHeight(selectors) {
const dom = document.querySelector(selectors); const dom = document.querySelector(selectors)
return dom ? dom.getBoundingClientRect().height : 0; return dom ? dom.getBoundingClientRect().height : 0
}, },
// init first screen height // init first screen height
initFirstScreenHeight() { 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 // init page height handle
initPageHeightHandle() { initPageHeightHandle() {
if (this.firstScreen_dom) return; if (this.firstScreen_dom) return
const temp_h1 = this.getElementHeight('.page-main-content-top'); const temp_h1 = this.getElementHeight('.page-main-content-top')
const temp_h2 = this.getElementHeight('.page-main-content-middle'); const temp_h2 = this.getElementHeight('.page-main-content-middle')
const temp_h3 = this.getElementHeight('.page-main-content-bottom'); const temp_h3 = this.getElementHeight('.page-main-content-bottom')
const allDomHeight = temp_h1 + temp_h2 + temp_h3; const allDomHeight = temp_h1 + temp_h2 + temp_h3
const innerHeight = window.innerHeight; const innerHeight = window.innerHeight
const pb_dom = document.querySelector('.page-main-content-bottom'); const pb_dom = document.querySelector('.page-main-content-bottom')
if (allDomHeight < innerHeight) { if (allDomHeight < innerHeight) {
const marginTopValue = Math.floor(innerHeight - allDomHeight); const marginTopValue = Math.floor(innerHeight - allDomHeight)
if (marginTopValue > 0) { if (marginTopValue > 0) {
pb_dom.style.marginTop = `${marginTopValue - 2}px`; pb_dom.style.marginTop = `${marginTopValue - 2}px`
} }
} }
}, },
// big image viewer // big image viewer
imageViewer() { imageViewer() {
let isBigImage = false; let isBigImage = false
const showHandle = (maskDom, isShow) => { const showHandle = (maskDom, isShow) => {
document.body.style.overflow = isShow ? 'hidden' : 'auto'; document.body.style.overflow = isShow ? 'hidden' : 'auto'
if (isShow) { if (isShow) {
maskDom.classList.add('active'); maskDom.classList.add('active')
} else { } else {
maskDom.classList.remove('active'); maskDom.classList.remove('active')
} }
} }
const imageViewerDom = document.querySelector('.image-viewer-container'); const imageViewerDom = document.querySelector('.image-viewer-container')
const targetImg = document.querySelector('.image-viewer-container img'); const targetImg = document.querySelector('.image-viewer-container img')
imageViewerDom && imageViewerDom.addEventListener('click', () => { imageViewerDom &&
isBigImage = false; imageViewerDom.addEventListener('click', () => {
showHandle(imageViewerDom, isBigImage); isBigImage = false
}); showHandle(imageViewerDom, isBigImage)
})
const imgDoms = document.querySelectorAll('.markdown-body img'); const imgDoms = document.querySelectorAll('.markdown-body img')
if (imgDoms.length) { if (imgDoms.length) {
imgDoms.forEach(img => { imgDoms.forEach((img) => {
img.addEventListener('click', () => { img.addEventListener('click', () => {
isBigImage = true; isBigImage = true
showHandle(imageViewerDom, isBigImage); showHandle(imageViewerDom, isBigImage)
targetImg.setAttribute('src', img.getAttribute('src')); targetImg.setAttribute('src', img.getAttribute('src'))
}); })
}); })
} else { } else {
this.pageContainer_dom.removeChild(imageViewerDom); this.pageContainer_dom.removeChild(imageViewerDom)
} }
}, },
@ -264,140 +263,134 @@ KEEP.initUtils = () => {
}, },
getHowLongAgo(timestamp) { getHowLongAgo(timestamp) {
const lang = KEEP.language_ago; const lang = KEEP.language_ago
const __Y = Math.floor(timestamp / (60 * 60 * 24 * 30) / 12); const __Y = Math.floor(timestamp / (60 * 60 * 24 * 30) / 12)
const __M = Math.floor(timestamp / (60 * 60 * 24 * 30)); const __M = Math.floor(timestamp / (60 * 60 * 24 * 30))
const __W = Math.floor(timestamp / (60 * 60 * 24) / 7); const __W = Math.floor(timestamp / (60 * 60 * 24) / 7)
const __d = Math.floor(timestamp / (60 * 60 * 24)); const __d = Math.floor(timestamp / (60 * 60 * 24))
const __h = Math.floor(timestamp / (60 * 60) % 24); const __h = Math.floor((timestamp / (60 * 60)) % 24)
const __m = Math.floor(timestamp / 60 % 60); const __m = Math.floor((timestamp / 60) % 60)
const __s = Math.floor(timestamp % 60); const __s = Math.floor(timestamp % 60)
if (__Y > 0) { if (__Y > 0) {
return this.setHowLongAgoLanguage(__Y, lang.year); return this.setHowLongAgoLanguage(__Y, lang.year)
} else if (__M > 0) { } else if (__M > 0) {
return this.setHowLongAgoLanguage(__M, lang.month); return this.setHowLongAgoLanguage(__M, lang.month)
} else if (__W > 0) { } else if (__W > 0) {
return this.setHowLongAgoLanguage(__W, lang.week); return this.setHowLongAgoLanguage(__W, lang.week)
} else if (__d > 0) { } else if (__d > 0) {
return this.setHowLongAgoLanguage(__d, lang.day); return this.setHowLongAgoLanguage(__d, lang.day)
} else if (__h > 0) { } else if (__h > 0) {
return this.setHowLongAgoLanguage(__h, lang.hour); return this.setHowLongAgoLanguage(__h, lang.hour)
} else if (__m > 0) { } else if (__m > 0) {
return this.setHowLongAgoLanguage(__m, lang.minute); return this.setHowLongAgoLanguage(__m, lang.minute)
} else if (__s > 0) { } else if (__s > 0) {
return this.setHowLongAgoLanguage(__s, lang.second); return this.setHowLongAgoLanguage(__s, lang.second)
} }
}, },
setHowLongAgoInHome() { setHowLongAgoInHome() {
const post = document.querySelectorAll('.home-article-meta-info .home-article-date'); const post = document.querySelectorAll('.home-article-meta-info .home-article-date')
post && post.forEach(v => { post &&
const nowDate = Date.now(); post.forEach((v) => {
const postDate = new Date(v.dataset.date.split(' GMT')[0]).getTime(); const nowDate = Date.now()
v.innerHTML = this.getHowLongAgo(Math.floor((nowDate - postDate) / 1000)); const postDate = new Date(v.dataset.date.split(' GMT')[0]).getTime()
}); v.innerHTML = this.getHowLongAgo(Math.floor((nowDate - postDate) / 1000))
})
}, },
// loading progress bar start // loading progress bar start
pjaxProgressBarStart() { pjaxProgressBarStart() {
this.pjaxProgressBarTimer && clearInterval(this.pjaxProgressBarTimer); this.pjaxProgressBarTimer && clearInterval(this.pjaxProgressBarTimer)
if (this.isHasScrollProgressBar) { if (this.isHasScrollProgressBar) {
this.scrollProgressBar_dom.classList.add('hide'); this.scrollProgressBar_dom.classList.add('hide')
} }
this.pjaxProgressBar_dom.style.width = '0'; this.pjaxProgressBar_dom.style.width = '0'
this.pjaxProgressIcon_dom.classList.add('show'); this.pjaxProgressIcon_dom.classList.add('show')
let width = 1; let width = 1
const maxWidth = 99; const maxWidth = 99
this.pjaxProgressBar_dom.classList.add('show'); this.pjaxProgressBar_dom.classList.add('show')
this.pjaxProgressBar_dom.style.width = width + '%'; this.pjaxProgressBar_dom.style.width = width + '%'
this.pjaxProgressBarTimer = setInterval(() => { this.pjaxProgressBarTimer = setInterval(() => {
width += 5; width += 5
if (width > maxWidth) width = maxWidth; if (width > maxWidth) width = maxWidth
this.pjaxProgressBar_dom.style.width = width + '%'; this.pjaxProgressBar_dom.style.width = width + '%'
}, 100); }, 100)
}, },
// loading progress bar end // loading progress bar end
pjaxProgressBarEnd() { pjaxProgressBarEnd() {
this.pjaxProgressBarTimer && clearInterval(this.pjaxProgressBarTimer); this.pjaxProgressBarTimer && clearInterval(this.pjaxProgressBarTimer)
this.pjaxProgressBar_dom.style.width = '100%'; this.pjaxProgressBar_dom.style.width = '100%'
const temp_1 = setTimeout(() => { const temp_1 = setTimeout(() => {
this.pjaxProgressBar_dom.classList.remove('show'); this.pjaxProgressBar_dom.classList.remove('show')
this.pjaxProgressIcon_dom.classList.remove('show'); this.pjaxProgressIcon_dom.classList.remove('show')
if (this.isHasScrollProgressBar) { if (this.isHasScrollProgressBar) {
this.scrollProgressBar_dom.classList.remove('hide'); this.scrollProgressBar_dom.classList.remove('hide')
} }
const temp_2 = setTimeout(() => { const temp_2 = setTimeout(() => {
this.pjaxProgressBar_dom.style.width = '0'; this.pjaxProgressBar_dom.style.width = '0'
clearTimeout(temp_1), clearTimeout(temp_2); clearTimeout(temp_1), clearTimeout(temp_2)
}, 200); }, 200)
}, 200)
}, 200);
}, },
// insert tooltip content dom // insert tooltip content dom
insertTooltipContent() { insertTooltipContent() {
const init = () => { const init = () => {
document.querySelectorAll('.tooltip').forEach(element => { document.querySelectorAll('.tooltip').forEach((element) => {
const { content } = element.dataset; const { content } = element.dataset
if (content) { if (content) {
element.insertAdjacentHTML( element.insertAdjacentHTML(
'afterbegin', 'afterbegin',
`<span class="tooltip-content">${content}</span>` `<span class="tooltip-content">${content}</span>`
); )
} }
}); })
} }
setTimeout(() => { setTimeout(() => {
init(); init()
}, 1000); }, 1000)
} }
} }
// init data // init data
KEEP.utils.initData(); KEEP.utils.initData()
// init scroll // init scroll
KEEP.utils.registerWindowScroll(); KEEP.utils.registerWindowScroll()
// toggle show tools list // toggle show tools list
KEEP.utils.toggleShowToolsList(); KEEP.utils.toggleShowToolsList()
// global font adjust // global font adjust
KEEP.utils.globalFontAdjust(); KEEP.utils.globalFontAdjust()
// adjust content area width // adjust content area width
KEEP.utils.contentAreaWidthAdjust(); KEEP.utils.contentAreaWidthAdjust()
// go comment // go comment
KEEP.utils.goComment(); KEEP.utils.goComment()
// init page height handle // init page height handle
KEEP.utils.initPageHeightHandle(); KEEP.utils.initPageHeightHandle()
// init first screen height // init first screen height
KEEP.utils.initFirstScreenHeight(); KEEP.utils.initFirstScreenHeight()
// big image viewer handle // big image viewer handle
KEEP.utils.imageViewer(); KEEP.utils.imageViewer()
// set how long age in home article block // set how long age in home article block
KEEP.utils.setHowLongAgoInHome(); KEEP.utils.setHowLongAgoInHome()
// insert tooltip content dom // insert tooltip content dom
KEEP.utils.insertTooltipContent(); KEEP.utils.insertTooltipContent()
} }