指间的诗意
GitHub
commit
1cdf45f578
|
|
@ -9,4 +9,4 @@ community_bridge: # Replace with a single Community Bridge project-name e.g., cl
|
|||
liberapay: # Replace with a single Liberapay username
|
||||
issuehunt: # Replace with a single IssueHunt username
|
||||
otechie: # Replace with a single Otechie username
|
||||
custom: ['https://cdn.jsdelivr.net/gh/XPoet/image-hosting@master/FE-Cheerleaders/play-tour.png']
|
||||
custom: ['https://cdn.staticaly.com/gh/XPoet/image-hosting@master/FE-Cheerleaders/play-tour.png']
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
name: npm publish
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
branches:
|
||||
- master
|
||||
|
||||
jobs:
|
||||
publish-npm:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 16
|
||||
registry-url: https://registry.npmjs.org/
|
||||
- run: npm publish
|
||||
env:
|
||||
NODE_AUTH_TOKEN: ${{secrets.NPM_PUBLISH_TOKEN}}
|
||||
|
|
@ -2,3 +2,5 @@ node_modules
|
|||
/.github/FUNDING.yml
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
.vscode/*
|
||||
.idea/*
|
||||
|
|
|
|||
27
_config.yml
27
_config.yml
|
|
@ -1,5 +1,5 @@
|
|||
## ======================================================================================
|
||||
## Keep v3.4.9
|
||||
## Keep v3.5.0
|
||||
## Repository: https://github.com/XPoet/hexo-theme-keep
|
||||
## Document: https://keep-docs.xpoet.cn
|
||||
## ======================================================================================
|
||||
|
|
@ -42,12 +42,6 @@ style:
|
|||
# e.g. font_family: STKaiti, STSong, STHeiti
|
||||
font_family:
|
||||
|
||||
# Left side TOC width (you don't usually have to change it)
|
||||
left_side_width: 260px
|
||||
|
||||
# Content area max width (you don't usually have to change it)
|
||||
content_max_width: 920px
|
||||
|
||||
# Mouse hover style settings
|
||||
hover:
|
||||
# Shadow effect when the mouse hover. Option values: true | false
|
||||
|
|
@ -159,12 +153,14 @@ post:
|
|||
custom_label_list: ["Trainee", "Engineer", "Architect"]
|
||||
|
||||
# ---------------------------------------------------------------------------------------
|
||||
# Code block tools
|
||||
# Code block
|
||||
# Support code copy and code block collapse
|
||||
# ---------------------------------------------------------------------------------------
|
||||
code_block_tools:
|
||||
code_block:
|
||||
tools: # Include "code copy", "code block collapse" and "code language"
|
||||
enable: false # Option values: true | false
|
||||
style: default # Option values: default | mac
|
||||
highlight_theme: default # Option values: default | obsidian
|
||||
|
||||
# ---------------------------------------------------------------------------------------
|
||||
# Table of Contents in the Sidebar
|
||||
|
|
@ -217,6 +213,7 @@ comment:
|
|||
|
||||
# Valine
|
||||
# See: https://github.com/xCss/Valine
|
||||
# https://valine.js.org
|
||||
valine:
|
||||
appid: # Your leancloud application appid
|
||||
appkey: # Your leancloud application appkey
|
||||
|
|
@ -224,6 +221,7 @@ comment:
|
|||
|
||||
# Gitalk
|
||||
# See: https://github.com/gitalk/gitalk
|
||||
# https://gitalk.github.io
|
||||
gitalk:
|
||||
github_id: # GitHub repo owner
|
||||
github_admins: # GitHub Admins (in Array type), optional.
|
||||
|
|
@ -233,10 +231,19 @@ comment:
|
|||
|
||||
# Twikoo
|
||||
# See: https://github.com/imaegoo/twikoo
|
||||
# https://twikoo.js.org
|
||||
twikoo:
|
||||
env_id: # Tencent Cloud environment id
|
||||
region: # Environment region. If select Guangzhou, fill in "ap-guangzhou".
|
||||
version: 1.6.7 # Twikoo version, default use v1.6.7, you can custom fill
|
||||
version: 1.6.7 # Twikoo version, default use v1.6.7
|
||||
|
||||
# Waline
|
||||
# See: https://github.com/walinejs/waline
|
||||
# https://waline.js.org/guide/get-started.html
|
||||
waline:
|
||||
server_url: # Server URL
|
||||
reaction: # Article reactions
|
||||
version: 2 # Waline version, default use v2
|
||||
|
||||
# ---------------------------------------------------------------------------------------
|
||||
# RSS
|
||||
|
|
|
|||
|
|
@ -1,19 +1,27 @@
|
|||
<%
|
||||
const {
|
||||
enable: t_comment_enable,
|
||||
use: t_comment_use
|
||||
} = theme?.comment
|
||||
%>
|
||||
<div class="comments-container">
|
||||
<div id="comment-anchor"></div>
|
||||
<div id="comments-anchor"></div>
|
||||
<div class="comment-area-title">
|
||||
<i class="fas fa-comments"></i> <%- __('comments') %>
|
||||
</div>
|
||||
<% if (theme.comment.enable === true && theme.comment.hasOwnProperty(theme.comment.use)) { %>
|
||||
|
||||
<% if (theme.comment.use === 'valine') { %>
|
||||
<% if (t_comment_enable === true && t_comment_use) { %>
|
||||
<% if (t_comment_use === 'valine') { %>
|
||||
<%- partial('valine') %>
|
||||
|
||||
<% } else if (theme.comment.use === 'gitalk') { %>
|
||||
<% } else if (t_comment_use === 'gitalk') { %>
|
||||
<%- partial('gitalk') %>
|
||||
|
||||
<% } else if (theme.comment.use === 'twikoo') { %>
|
||||
<% } else if (t_comment_use === 'twikoo') { %>
|
||||
<%- partial('twikoo') %>
|
||||
|
||||
<% } else if (t_comment_use === 'waline') { %>
|
||||
<%- partial('waline') %>
|
||||
|
||||
<% } %>
|
||||
<% } %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,35 @@
|
|||
<% const { client_id, client_secret, repository, github_id, github_admins } = theme.comment.gitalk %>
|
||||
<%
|
||||
const { enable: pjax_enable } = theme?.pjax
|
||||
const {
|
||||
client_id,
|
||||
client_secret,
|
||||
repository,
|
||||
github_id,
|
||||
github_admins
|
||||
} = theme.comment?.gitalk
|
||||
let cdn_css = '//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.css'
|
||||
let cdn_js = '//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.js'
|
||||
const { enable: t_cdn_enable, provider: t_cdn_provider } = theme?.cdn
|
||||
if (t_cdn_enable === true) {
|
||||
switch (t_cdn_provider) {
|
||||
case 'jsdelivr':
|
||||
cdn_css = '//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.css'
|
||||
cdn_js = '//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.js'
|
||||
break
|
||||
|
||||
<% if(
|
||||
theme.comment.use === 'gitalk'
|
||||
&& client_id
|
||||
&& client_secret
|
||||
&& github_id
|
||||
&& repository
|
||||
) { %>
|
||||
case 'unpkg':
|
||||
cdn_css = '//unpkg.com/gitalk/dist/gitalk.css'
|
||||
cdn_js = '//unpkg.com/gitalk/dist/gitalk.min.js'
|
||||
break
|
||||
}
|
||||
}
|
||||
%>
|
||||
<% if(client_id && client_secret && github_id && repository) { %>
|
||||
<div class="gitalk-comment-container">
|
||||
<div id="gitalk-container"></div>
|
||||
<script <%= theme.pjax.enable === true ? 'data-pjax' : '' %>
|
||||
src="//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.js"></script>
|
||||
<script <%= theme.pjax.enable === true ? 'data-pjax' : '' %>>
|
||||
|
||||
<link rel="stylesheet" href="<%= cdn_css %>">
|
||||
<script <%= pjax_enable === true ? 'data-pjax' : '' %> src="<%= cdn_js %>"></script>
|
||||
<script <%= pjax_enable === true ? 'data-pjax' : '' %>>
|
||||
function loadGitalk() {
|
||||
let __gitalk__pathname = decodeURI(location.pathname);
|
||||
const __gitalk__pathnameLength = __gitalk__pathname.length;
|
||||
|
|
@ -21,7 +39,6 @@
|
|||
}
|
||||
|
||||
try {
|
||||
|
||||
Gitalk && new Gitalk({
|
||||
clientID: '<%= client_id %>',
|
||||
clientSecret: '<%= client_secret %>',
|
||||
|
|
@ -31,13 +48,12 @@
|
|||
id: __gitalk__pathname,
|
||||
language: '<%= config.language %>'
|
||||
}).render('gitalk-container');
|
||||
|
||||
} catch (e) {
|
||||
window.Gitalk = null;
|
||||
}
|
||||
}
|
||||
|
||||
if ('<%= theme.pjax.enable %>') {
|
||||
if ('<%= pjax_enable %>' === 'true') {
|
||||
const loadGitalkTimeout = setTimeout(() => {
|
||||
loadGitalk();
|
||||
clearTimeout(loadGitalkTimeout);
|
||||
|
|
@ -46,4 +62,5 @@
|
|||
window.addEventListener('DOMContentLoaded', loadGitalk);
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
<% } %>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,28 @@
|
|||
<%
|
||||
const { enable: pjax_enable } = theme.pjax
|
||||
const { enable: pjax_enable } = theme?.pjax
|
||||
let {
|
||||
env_id: tk_env_id, region: tk_region, version: tk_version
|
||||
} = theme.comment.twikoo
|
||||
env_id: tk_env_id,
|
||||
region: tk_region,
|
||||
version: tk_version
|
||||
} = theme.comment?.twikoo
|
||||
if (!tk_version) { tk_version = '1.6.7' }
|
||||
const twikoo_cdn_url = `//cdn.jsdelivr.net/npm/twikoo@${tk_version}/dist/twikoo.all.min.js`
|
||||
const { enable: t_cdn_enable, provider: t_cdn_provider } = theme?.cdn
|
||||
let twikoo_cdn_url = `//cdn.jsdelivr.net/npm/twikoo@${tk_version}/dist/twikoo.all.min.js`
|
||||
if (t_cdn_enable === true) {
|
||||
switch (t_cdn_provider) {
|
||||
case 'jsdelivr':
|
||||
twikoo_cdn_url = `//cdn.jsdelivr.net/npm/twikoo@${tk_version}/dist/twikoo.all.min.js`
|
||||
break
|
||||
|
||||
case 'unpkg':
|
||||
twikoo_cdn_url = `//unpkg.com/twikoo@${tk_version}/dist/twikoo.all.min.js`
|
||||
break
|
||||
}
|
||||
}
|
||||
%>
|
||||
<% if(theme.comment.use === 'twikoo' && tk_env_id) { %>
|
||||
<% if(tk_env_id) { %>
|
||||
<div class="twikoo-container">
|
||||
<script <%= pjax_enable === true ? 'data-pjax' : '' %>
|
||||
src="<%= twikoo_cdn_url %>"
|
||||
></script>
|
||||
<script <%= pjax_enable === true ? 'data-pjax' : '' %> src="<%= twikoo_cdn_url %>"></script>
|
||||
<div id="twikoo-comment"></div>
|
||||
<script <%= pjax_enable === true ? 'data-pjax' : '' %>>
|
||||
function loadTwikoo() {
|
||||
|
|
@ -22,7 +34,7 @@ const twikoo_cdn_url = `//cdn.jsdelivr.net/npm/twikoo@${tk_version}/dist/twikoo.
|
|||
});
|
||||
}
|
||||
|
||||
if ('<%= pjax_enable === true %>') {
|
||||
if ('<%= pjax_enable %>' === 'true') {
|
||||
const loadTwikooTimeout = setTimeout(() => {
|
||||
loadTwikoo();
|
||||
clearTimeout(loadTwikooTimeout);
|
||||
|
|
|
|||
|
|
@ -1,22 +1,38 @@
|
|||
<% if(
|
||||
theme.comment.use === 'valine'
|
||||
&& theme.comment.valine.appid
|
||||
&& theme.comment.valine.appkey
|
||||
) { %>
|
||||
<%
|
||||
const { enable: pjax_enable } = theme?.pjax
|
||||
const {
|
||||
appid,
|
||||
appkey,
|
||||
placeholder
|
||||
} = theme.comment?.valine
|
||||
let cdn_url = '//cdn.jsdelivr.net/npm/valine@latest/dist/Valine.min.js'
|
||||
const { enable: t_cdn_enable, provider: t_cdn_provider } = theme?.cdn
|
||||
if (t_cdn_enable === true) {
|
||||
switch (t_cdn_provider) {
|
||||
case 'jsdelivr':
|
||||
cdn_url = '//cdn.jsdelivr.net/npm/valine@latest/dist/Valine.min.js'
|
||||
break
|
||||
|
||||
case 'unpkg':
|
||||
cdn_url = '//unpkg.com/valine@latest/dist/Valine.min.js'
|
||||
break
|
||||
}
|
||||
}
|
||||
%>
|
||||
<% if(appid && appkey) { %>
|
||||
<div class="valine-container">
|
||||
<script <%= theme.pjax.enable === true ? 'data-pjax' : '' %>
|
||||
src="//cdn.jsdelivr.net/npm/valine@latest/dist/Valine.min.js"></script>
|
||||
<script <%= pjax_enable === true ? 'data-pjax' : '' %> src="<%= cdn_url %>"></script>
|
||||
<div id="vcomments"></div>
|
||||
<script <%= theme.pjax.enable === true ? 'data-pjax' : '' %>>
|
||||
<script <%= pjax_enable === true ? 'data-pjax' : '' %>>
|
||||
function loadValine() {
|
||||
new Valine({
|
||||
el: '#vcomments',
|
||||
appId: '<%= theme.comment.valine.appid %>',
|
||||
appKey: '<%= theme.comment.valine.appkey %>',
|
||||
appId: '<%= appid %>',
|
||||
appKey: '<%= appkey %>',
|
||||
meta: ['nick', 'mail', 'link'],
|
||||
avatar: 'wavatar',
|
||||
enableQQ: true,
|
||||
placeholder: '<%= theme.comment.valine.placeholder %>',
|
||||
placeholder: '<%= placeholder %>',
|
||||
lang: '<%= config.language %>'.toLowerCase()
|
||||
});
|
||||
|
||||
|
|
@ -53,7 +69,7 @@
|
|||
}, 2000);
|
||||
}
|
||||
|
||||
if ('<%= theme.pjax.enable %>') {
|
||||
if ('<%= pjax_enable %>' === 'true') {
|
||||
const loadValineTimeout = setTimeout(() => {
|
||||
loadValine();
|
||||
clearTimeout(loadValineTimeout);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,55 @@
|
|||
<%
|
||||
const { enable: pjax_enable } = theme?.pjax
|
||||
let {
|
||||
server_url: waline_env_server_url,
|
||||
version: waline_version,
|
||||
reaction: waline_reaction
|
||||
} = theme.comment?.waline
|
||||
if (!waline_version) { waline_version = '2' }
|
||||
let cdn_css = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline.css`
|
||||
let cdn_css_meta = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline-meta.css`
|
||||
let cdn_js = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline.js`
|
||||
const { enable: t_cdn_enable, provider: t_cdn_provider } = theme?.cdn
|
||||
if (t_cdn_enable === true) {
|
||||
switch (t_cdn_provider) {
|
||||
case 'jsdelivr':
|
||||
cdn_css = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline.css`
|
||||
cdn_css_meta = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline-meta.css`
|
||||
cdn_js = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline.js`
|
||||
break
|
||||
|
||||
case 'unpkg':
|
||||
cdn_css = `//unpkg.com/@waline/client@v${waline_version}/dist/waline.css`
|
||||
cdn_css_meta = `//unpkg.com/@waline/client@v${waline_version}/dist/waline-meta.css`
|
||||
cdn_js = `//unpkg.com/@waline/client@v${waline_version}/dist/waline.js`
|
||||
break
|
||||
}
|
||||
}
|
||||
%>
|
||||
<% if(waline_env_server_url) { %>
|
||||
<div class="waline-comment-container">
|
||||
<link rel="stylesheet" href="<%= cdn_css %>"/>
|
||||
<link rel="stylesheet" href="<%= cdn_css_meta %>"/>
|
||||
<script <%= pjax_enable === true ? 'data-pjax' : '' %> src="<%= cdn_js %>"></script>
|
||||
<div id="waline-comment"></div>
|
||||
<script <%= pjax_enable === true ? 'data-pjax' : '' %>>
|
||||
function loadWaline() {
|
||||
Waline.init({
|
||||
el: '#waline-comment',
|
||||
serverURL: '<%= waline_env_server_url %>',
|
||||
lang: '<%= config.language %>' || 'zh-CN',
|
||||
comment: '.post-comments-count',
|
||||
reaction: '<%= waline_reaction %>' === 'true'
|
||||
})
|
||||
}
|
||||
|
||||
if ('<%= pjax_enable %>' === 'true') {
|
||||
setTimeout(() => {
|
||||
loadWaline()
|
||||
}, 1000)
|
||||
} else {
|
||||
window.addEventListener('DOMContentLoaded', loadWaline)
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
<% } %>
|
||||
|
|
@ -32,7 +32,7 @@ const { site_uv: bsz_site_uv, site_pv: bsz_site_pv, enable: bsz_enable } = theme
|
|||
<div class="theme-info info-item">
|
||||
<%- __('powered_by', '<a target="_blank" href="https://hexo.io">Hexo</a>') %> | <%- __('theme') %>
|
||||
|
||||
<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.4.9</a>
|
||||
<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.5.0</a>
|
||||
</div>
|
||||
<% if (f_icp) { %>
|
||||
<div class="icp-info info-item">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ const { logo: s_logo, first_screen: s_first_screen } = theme.style
|
|||
const { enable: s_fs_enable, header_transparent: s_fs_header_transparent } = s_first_screen
|
||||
const { title: config_title } = config
|
||||
%>
|
||||
<header class="header-wrapper<%= is_home() && s_fs_header_transparent ? ' transparent-1' : '' %>">
|
||||
<header class="header-wrapper<%= s_fs_enable === true && is_home() && s_fs_header_transparent ? ' transparent-1' : '' %>">
|
||||
|
||||
<div class="header-content<%- (s_fs_enable === true && is_home() && !page.prev) ? ' has-first-screen' : '' %>">
|
||||
<div class="left">
|
||||
|
|
|
|||
|
|
@ -39,5 +39,5 @@ const target_date = post.date !== post.updated ? post.updated : post.date
|
|||
<% } %>
|
||||
</div>
|
||||
|
||||
<a href="<%- url_for(post.path) %>"><%- __('read_more') %> <i class="fas fa-angle-right"></i></a>
|
||||
<a class="read-more" href="<%- url_for(post.path) %>"><%- __('read_more') %> <i class="fas fa-angle-right"></i></a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<% if (isLoadFriendsLink) { %>
|
||||
<%- partial('_partial/friends-link') %>
|
||||
<% } %>
|
||||
<div class="page-template-content markdown-body">
|
||||
<div class="page-template-content keep-markdown-body">
|
||||
<% if (isLoadFriendsLink || page.content) { %>
|
||||
<%- page.content %>
|
||||
<% } else { %>
|
||||
|
|
|
|||
|
|
@ -2,15 +2,16 @@
|
|||
<ul class="tools-list">
|
||||
<!-- TOC aside toggle -->
|
||||
<% if (theme.toc.enable) { %>
|
||||
<li class="tools-item page-aside-toggle">
|
||||
<i class="fas fa-outdent"></i>
|
||||
<li class="tools-item flex-center toggle-show-toc">
|
||||
<i class="fas fa-list"></i>
|
||||
</li>
|
||||
<% } %>
|
||||
|
||||
<!-- go comment -->
|
||||
<% if (theme.comment.enable === true && theme.comment.hasOwnProperty(theme.comment.use)) { %>
|
||||
<li class="go-comment">
|
||||
<li class="tools-item flex-center go-to-comments">
|
||||
<i class="fas fa-comment"></i>
|
||||
<span class="post-comments-count"></span>
|
||||
</li>
|
||||
<% } %>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
const {
|
||||
local_search: t_local_search,
|
||||
code_copy: t_code_copy,
|
||||
code_block_tools: t_code_block_tools,
|
||||
code_block: t_code_block,
|
||||
lazyload: t_lazyload,
|
||||
toc: t_toc,
|
||||
pjax: t_pjax
|
||||
|
|
@ -21,8 +21,8 @@ const {
|
|||
<%- __js('js/local-search.js') %>
|
||||
<% } %>
|
||||
|
||||
<% if (t_code_block_tools?.enable === true || t_code_copy?.enable === true) { %>
|
||||
<%- __js('js/code-block-tools.js') %>
|
||||
<% if (t_code_copy?.enable === true || t_code_block?.enable === true || t_code_block?.tools?.enable === true) { %>
|
||||
<%- __js('js/code-block.js') %>
|
||||
<% } %>
|
||||
|
||||
<% if (t_lazyload?.enable === true) { %>
|
||||
|
|
@ -32,9 +32,9 @@ const {
|
|||
<div class="post-scripts<%= theme.pjax?.enable === true ? ' pjax' : '' %>">
|
||||
<% if (t_toc?.enable === true && is_post()) { %>
|
||||
<%- __js([
|
||||
'js/left-side-toggle.js',
|
||||
'js/libs/anime.min.js',
|
||||
'js/toc.js'
|
||||
'js/post-helper.js',
|
||||
'js/toc.js',
|
||||
'js/libs/anime.min.js'
|
||||
]) %>
|
||||
<% } %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,10 +8,6 @@
|
|||
<i class="fas fa-search-minus"></i>
|
||||
</li>
|
||||
|
||||
<li class="tools-item tool-expand-width flex-center">
|
||||
<i class="fas fa-up-right-and-down-left-from-center"></i>
|
||||
</li>
|
||||
|
||||
<li class="tools-item tool-dark-light-toggle flex-center">
|
||||
<i class="fas fa-moon"></i>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
page.content,
|
||||
{
|
||||
class: 'nav',
|
||||
list_number: theme.toc.number
|
||||
list_number: theme.toc.number || false
|
||||
}
|
||||
) %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<div class="fade-in-down-animation">
|
||||
<div class="post-page-container">
|
||||
<div class="article-content-container">
|
||||
|
||||
<div class="article-title">
|
||||
|
|
@ -30,7 +31,7 @@
|
|||
</div>
|
||||
<% } %>
|
||||
|
||||
<div class="article-content markdown-body">
|
||||
<div class="article-content keep-markdown-body">
|
||||
<%- page.content %>
|
||||
</div>
|
||||
|
||||
|
|
@ -93,4 +94,11 @@
|
|||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
|
||||
<% if (is_post() && theme.toc.enable === true && page.toc !== false) { %>
|
||||
<div class="toc-content-container">
|
||||
<%- partial('_partial/toc') %>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
</a>
|
||||
</h3>
|
||||
|
||||
<div class="home-article-content markdown-body">
|
||||
<div class="home-article-content keep-markdown-body">
|
||||
<% if (post.excerpt) { %>
|
||||
<%- post.excerpt %>
|
||||
<% } else { %>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<%- partial('_partial/progress-bar') %>
|
||||
<main class="page-container">
|
||||
|
||||
<% if (theme.style.first_screen.enable === true && is_home() && !page.prev) { %>
|
||||
<% if (theme.style.first_screen?.enable === true && is_home() && !page.prev) { %>
|
||||
<%- partial('_partial/first-screen') %>
|
||||
<% } %>
|
||||
|
||||
<div class="page-main-content<%= is_home() ? ' home' : '' %>">
|
||||
<div class="page-main-content<%= is_home() ? ' is-home' : '' %>">
|
||||
|
||||
<div class="page-main-content-top">
|
||||
<%- partial('_partial/header') %>
|
||||
|
|
@ -59,15 +59,9 @@
|
|||
<%- partial('_partial/side-tools') %>
|
||||
</div>
|
||||
|
||||
<% if (is_post() && theme.toc.enable === true && page.toc !== false) { %>
|
||||
<aside class="page-aside">
|
||||
<%- partial('_partial/toc') %>
|
||||
</aside>
|
||||
<% } %>
|
||||
|
||||
<%- partial('_partial/image-viewer') %>
|
||||
|
||||
<% if (theme.local_search.enable) { %>
|
||||
<% if (theme.local_search?.enable) { %>
|
||||
<%- partial('_partial/local-search') %>
|
||||
<% } %>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "hexo-theme-keep",
|
||||
"version": "3.4.9",
|
||||
"version": "3.5.0",
|
||||
"private": false,
|
||||
"description": "A simple and elegant theme for Hexo.",
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ hexo.extend.helper.register('export_config', function () {
|
|||
style: theme.style || {},
|
||||
local_search: theme.local_search || {},
|
||||
code_copy: theme.code_copy || {},
|
||||
code_block_tools: theme.code_block_tools || {},
|
||||
code_block: theme.code_block || {},
|
||||
side_tools: theme.side_tools || {},
|
||||
pjax: theme.pjax || {},
|
||||
lazyload: theme.lazyload || {},
|
||||
|
|
|
|||
|
|
@ -55,7 +55,8 @@ hexo.extend.helper.register('getPostUrl', function (rootUrl, path) {
|
|||
|
||||
const getSourceCdnUrl = (tyle, themeConfig, path) => {
|
||||
const version = require('../../package.json').version
|
||||
const { provider = 'jsdelivr' } = themeConfig?.cdn
|
||||
const cdn = themeConfig?.cdn || {}
|
||||
const { provider = 'jsdelivr' } = cdn
|
||||
|
||||
let urlPrefix = ''
|
||||
switch (provider.toLocaleLowerCase()) {
|
||||
|
|
|
|||
|
|
@ -26,10 +26,10 @@ transition-t(property, delay, duration, function) {
|
|||
for f in convert(function) {
|
||||
$temp-function += ("," + f)
|
||||
}
|
||||
|
||||
transition-delay convert($temp-delay)
|
||||
transition-timing-function convert($temp-function)
|
||||
transition-duration convert($temp-duration)
|
||||
|
||||
transition-property convert($temp-property)
|
||||
}
|
||||
|
||||
|
|
@ -86,7 +86,7 @@ transition-t(property, delay, duration, function) {
|
|||
.title-hover-animation {
|
||||
position relative
|
||||
display inline-block
|
||||
color var(--second-text-color)
|
||||
color var(--text-color-2)
|
||||
line-height 1.3
|
||||
vertical-align top
|
||||
border-bottom none
|
||||
|
|
@ -97,7 +97,7 @@ transition-t(property, delay, duration, function) {
|
|||
left 0
|
||||
width 100%
|
||||
height 2px
|
||||
background-color var(--second-text-color)
|
||||
background-color var(--text-color-2)
|
||||
transform scaleX(0)
|
||||
visibility hidden
|
||||
content ""
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background var(--scroll-bar-bg-color)
|
||||
background var(--scrollbar-background-color)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -43,18 +43,33 @@ body {
|
|||
height 100%
|
||||
margin 0
|
||||
padding 0
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
font-weight $default-font-weight
|
||||
font-size $default-font-size
|
||||
font-family $default-font-family
|
||||
line-height $default-font-line-height
|
||||
background var(--background-color)
|
||||
letter-spacing 0.2px
|
||||
background var(--background-color-1)
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width 0.6rem
|
||||
height 0.6rem
|
||||
}
|
||||
|
||||
+keep-tablet() {
|
||||
&::-webkit-scrollbar {
|
||||
width 0.5rem
|
||||
height 0.5rem
|
||||
}
|
||||
}
|
||||
|
||||
+keep-mobile() {
|
||||
&::-webkit-scrollbar {
|
||||
width 0.4rem
|
||||
height 0.4rem
|
||||
}
|
||||
}
|
||||
|
||||
+keep-tablet() {
|
||||
font-size $default-font-size * 0.96
|
||||
line-height $default-font-line-height * 0.96
|
||||
|
|
@ -93,12 +108,12 @@ li {
|
|||
// a
|
||||
// ======================================================================
|
||||
a {
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
text-decoration none
|
||||
|
||||
i
|
||||
span {
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
}
|
||||
|
||||
&:hover
|
||||
|
|
@ -134,7 +149,7 @@ img {
|
|||
display block
|
||||
width 100%
|
||||
height 100%
|
||||
background var(--background-color)
|
||||
background var(--background-color-1)
|
||||
content ''
|
||||
transition-t("background", "0", "0.2", "ease")
|
||||
}
|
||||
|
|
@ -149,7 +164,7 @@ img {
|
|||
width 2rem
|
||||
height 2rem
|
||||
margin auto
|
||||
border 2px solid var(--fourth-text-color)
|
||||
border 2px solid var(--text-color-6)
|
||||
border-top-color var(--selection-color)
|
||||
border-left-color var(--selection-color)
|
||||
border-radius 50%
|
||||
|
|
@ -179,14 +194,14 @@ button {
|
|||
padding 0.4rem 1rem
|
||||
white-space nowrap
|
||||
text-align center
|
||||
background var(--background-color)
|
||||
background var(--background-color-1)
|
||||
border-radius 5px
|
||||
cursor pointer
|
||||
|
||||
hover-style(true, 1.06, 1.06)
|
||||
|
||||
&:hover {
|
||||
color var(--background-color)
|
||||
color var(--background-color-1)
|
||||
background var(--primary-color)
|
||||
}
|
||||
}
|
||||
|
|
@ -244,10 +259,10 @@ button {
|
|||
display none
|
||||
box-sizing border-box
|
||||
padding 0.2rem 0.6rem
|
||||
color var(--fourth-text-color)
|
||||
color var(--text-color-6)
|
||||
font-size 0.8rem
|
||||
white-space nowrap
|
||||
background var(--first-text-color)
|
||||
background var(--text-color-1)
|
||||
border-radius 0.3rem
|
||||
transform translateX(-50%) translateY(-100%)
|
||||
transition-t("display", "0", "0.2", "ease")
|
||||
|
|
@ -276,8 +291,8 @@ button {
|
|||
justify-content center
|
||||
box-sizing border-box
|
||||
min-height 6rem
|
||||
background var(--fourth-text-color)
|
||||
border 0.2rem solid var(--default-text-color)
|
||||
background var(--text-color-6)
|
||||
border 0.2rem solid var(--text-color-3)
|
||||
border-radius 0.3rem
|
||||
transform translateX(-50%) translateY(-100%)
|
||||
transition-t("display", "0", "0.2", "ease")
|
||||
|
|
|
|||
|
|
@ -3,6 +3,76 @@
|
|||
box-sizing border-box
|
||||
margin 1.4rem 0
|
||||
|
||||
&.mac {
|
||||
margin 1.4rem 0 1.8rem 0
|
||||
box-shadow 0 0.8rem 2rem 0 rgba(0, 0, 0, 0.4)
|
||||
|
||||
&:hover {
|
||||
.code-tools-box .copy {
|
||||
opacity 1
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.code-tools-box {
|
||||
justify-content flex-end
|
||||
padding 0.4rem 0.6rem 0.7rem 0.4rem
|
||||
background #21252b
|
||||
|
||||
&::before {
|
||||
position absolute
|
||||
left 0.8rem
|
||||
width 0.76rem
|
||||
height 0.76rem
|
||||
background #fc625d
|
||||
border-radius 50%
|
||||
box-shadow 1.3rem 0 #fdbc40, 2.6rem 0 #35cd4b
|
||||
content ''
|
||||
}
|
||||
|
||||
|
||||
&.folded {
|
||||
border-bottom-right-radius 0
|
||||
border-bottom-left-radius 0
|
||||
|
||||
.copy {
|
||||
display none
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.code-lang {
|
||||
order 1
|
||||
color #bbb
|
||||
}
|
||||
|
||||
|
||||
.fold {
|
||||
order 2
|
||||
padding 0 0.1rem 0 0.6rem
|
||||
|
||||
i {
|
||||
color #ccc
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.copy {
|
||||
position absolute
|
||||
top 3rem
|
||||
right 0.5rem
|
||||
padding 0 0.1rem
|
||||
opacity 0
|
||||
transition-t("opacity", "0", "0.2", "ease-in-out")
|
||||
|
||||
i {
|
||||
font-size 1rem
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.code-tools-box {
|
||||
display flex
|
||||
align-items center
|
||||
|
|
@ -10,30 +80,32 @@
|
|||
box-sizing border-box
|
||||
width 100%
|
||||
padding 0.3rem 0.4rem
|
||||
background var(--fourth-text-color)
|
||||
color var(--toolbar-foreground)
|
||||
background var(--toolbar-background)
|
||||
border-top-left-radius 0.3rem
|
||||
border-top-right-radius 0.3rem
|
||||
|
||||
|
||||
&.folded {
|
||||
border-bottom-right-radius 0.3rem
|
||||
border-bottom-left-radius 0.3rem
|
||||
}
|
||||
|
||||
|
||||
.code-lang {
|
||||
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 {
|
||||
disable-user-select()
|
||||
cursor pointer
|
||||
|
||||
i {
|
||||
color var(--second-text-color)
|
||||
font-size 0.8rem
|
||||
}
|
||||
}
|
||||
|
|
@ -52,69 +124,4 @@
|
|||
height 0
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (hexo-config('code_block_tools.style') == 'mac' || hexo-config('code_copy.style') == 'mac') {
|
||||
margin 1.4rem 0 1.8rem 0
|
||||
box-shadow 0 0.8rem 2rem 0 rgba(0, 0, 0, 0.4)
|
||||
|
||||
&:hover {
|
||||
.code-tools-box .copy {
|
||||
opacity 1
|
||||
}
|
||||
}
|
||||
|
||||
.code-tools-box {
|
||||
justify-content flex-end
|
||||
padding 0.4rem 0.6rem 0.7rem 0.4rem
|
||||
background #21252b
|
||||
|
||||
&::before {
|
||||
position absolute
|
||||
left 0.8rem
|
||||
width 0.76rem
|
||||
height 0.76rem
|
||||
background #fc625d
|
||||
border-radius 50%
|
||||
box-shadow 1.3rem 0 #fdbc40, 2.6rem 0 #35cd4b
|
||||
content ''
|
||||
}
|
||||
|
||||
&.folded {
|
||||
border-bottom-right-radius 0
|
||||
border-bottom-left-radius 0
|
||||
|
||||
.copy {
|
||||
display none
|
||||
}
|
||||
}
|
||||
|
||||
.code-lang {
|
||||
order 1
|
||||
color #bbb
|
||||
}
|
||||
|
||||
.fold {
|
||||
order 2
|
||||
padding 0 0.1rem 0 0.6rem
|
||||
i {
|
||||
color #ccc
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.copy {
|
||||
position absolute
|
||||
right 0.5rem
|
||||
bottom 0.3rem
|
||||
padding 0 0.1rem
|
||||
opacity 0
|
||||
transition-t("opacity", "0", "0.2", "ease-in-out")
|
||||
|
||||
i {
|
||||
font-size 1rem
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,54 +1,101 @@
|
|||
@import "../variables.styl"
|
||||
|
||||
$code-foreground = lighten($default-text-color, 2%)
|
||||
$code-background = darken($background-color, 5%)
|
||||
$highlight-foreground = lighten($default-text-color, 2%)
|
||||
$highlight-background = darken($background-color, 2%)
|
||||
$highlight-gutter-color = lighten($default-text-color, 5%)
|
||||
$highlight-gutter-bg-color = darken($background-color, 5%)
|
||||
$highlight-comment = #8e908c
|
||||
$highlight-red = #c82829
|
||||
$highlight-orange = #f5871f
|
||||
$highlight-yellow = #eab700
|
||||
$highlight-green = #718c00
|
||||
$highlight-aqua = #3e999f
|
||||
$highlight-blue = #4271ae
|
||||
$highlight-purple = #8959a8
|
||||
$highlight-deletion = #fdd
|
||||
$highlight-addition = #dfd
|
||||
// A single line block of code
|
||||
$code-foreground = lighten($text-color-3, 2%)
|
||||
$code-background = darken($background-color-1, 5%)
|
||||
$dark-code-foreground = lighten($dark-text-color-3, 2%)
|
||||
$dark-code-background = darken($dark-background-color-1, 10%)
|
||||
|
||||
|
||||
if (hexo-config('code_block.highlight_theme') == 'obsidian') {
|
||||
$toolbar-foreground = #b5b5b5
|
||||
$toolbar-background = #3a3f40
|
||||
$highlight-foreground = #faf5d6
|
||||
$highlight-background = #273036
|
||||
$highlight-gutter-color = #7a979a
|
||||
$highlight-gutter-bg-color = #273130
|
||||
$highlight-comment = #76888e
|
||||
$highlight-red = #ee5758
|
||||
$highlight-orange = #ec7600
|
||||
$highlight-yellow = #ffcd22
|
||||
$highlight-green = #93c763
|
||||
$highlight-aqua = #458383
|
||||
$highlight-blue = #6e95bd
|
||||
$highlight-purple = #b18bb7
|
||||
$highlight-deletion = #ff9999
|
||||
$highlight-addition = #ccff99
|
||||
|
||||
$dark-toolbar-foreground = darken($toolbar-foreground, 2%)
|
||||
$dark-toolbar-background = darken($toolbar-background, 2%)
|
||||
$dark-highlight-foreground = darken($highlight-foreground, 10%)
|
||||
$dark-highlight-background = darken($highlight-background, 2%)
|
||||
$dark-highlight-gutter-color = lighten($highlight-gutter-color, 1%)
|
||||
$dark-highlight-gutter-bg-color = darken($highlight-gutter-bg-color, 2%)
|
||||
$dark-highlight-comment = $highlight-comment
|
||||
$dark-highlight-red = darken($highlight-red, 2%)
|
||||
$dark-highlight-orange = darken($highlight-orange, 2%)
|
||||
$dark-highlight-yellow = darken($highlight-yellow, 2%)
|
||||
$dark-highlight-green = darken($highlight-green, 2%)
|
||||
$dark-highlight-aqua = darken($highlight-aqua, 2%)
|
||||
$dark-highlight-blue = darken($highlight-blue, 2%)
|
||||
$dark-highlight-purple = darken($highlight-purple, 2%)
|
||||
$dark-highlight-deletion = darken($highlight-deletion, 2%)
|
||||
$dark-highlight-addition = darken($highlight-addition, 2%)
|
||||
}
|
||||
else {
|
||||
$toolbar-foreground = $text-color-3
|
||||
$toolbar-background = $background-color-3
|
||||
$highlight-foreground = lighten($text-color-3, 2%)
|
||||
$highlight-background = darken($background-color-1, 2%)
|
||||
$highlight-gutter-color = lighten($text-color-3, 5%)
|
||||
$highlight-gutter-bg-color = darken($background-color-1, 5%)
|
||||
$highlight-comment = #8e908c
|
||||
$highlight-red = #c82829
|
||||
$highlight-orange = #f5871f
|
||||
$highlight-yellow = #eab700
|
||||
$highlight-green = #718c00
|
||||
$highlight-aqua = #3e999f
|
||||
$highlight-blue = #4271ae
|
||||
$highlight-purple = #8959a8
|
||||
$highlight-deletion = #fdd
|
||||
$highlight-addition = #dfd
|
||||
|
||||
$dark-toolbar-foreground = $dark-text-color-3
|
||||
$dark-toolbar-background = $dark-background-color-3
|
||||
$dark-highlight-foreground = lighten($dark-text-color-3, 2%)
|
||||
$dark-highlight-background = darken($dark-background-color-1, 8%)
|
||||
$dark-highlight-gutter-color = lighten($dark-text-color-3, 5%)
|
||||
$dark-highlight-gutter-bg-color = darken($dark-background-color-1, 10%)
|
||||
$dark-highlight-comment = #969896
|
||||
$dark-highlight-red = #cc6666
|
||||
$dark-highlight-orange = #de935f
|
||||
$dark-highlight-yellow = #f0c674
|
||||
$dark-highlight-green = #b5bd68
|
||||
$dark-highlight-aqua = #8abeb7
|
||||
$dark-highlight-blue = #81a2be
|
||||
$dark-highlight-purple = #b294bb
|
||||
$dark-highlight-deletion = #008000
|
||||
$dark-highlight-addition = #800000
|
||||
}
|
||||
|
||||
$night-code-foreground = lighten($dark-default-text-color, 2%)
|
||||
$night-code-background = darken($dark-background-color, 10%)
|
||||
$night-highlight-foreground = lighten($dark-default-text-color, 2%)
|
||||
$night-highlight-background = darken($dark-background-color, 8%)
|
||||
$night-highlight-gutter-color = lighten($dark-default-text-color, 5%)
|
||||
$night-highlight-gutter-bg-color = darken($dark-background-color, 10%)
|
||||
$night-highlight-comment = #969896
|
||||
$night-highlight-red = #cc6666
|
||||
$night-highlight-orange = #de935f
|
||||
$night-highlight-yellow = #f0c674
|
||||
$night-highlight-green = #b5bd68
|
||||
$night-highlight-aqua = #8abeb7
|
||||
$night-highlight-blue = #81a2be
|
||||
$night-highlight-purple = #b294bb
|
||||
$night-highlight-deletion = #008000
|
||||
$night-highlight-addition = #800000
|
||||
|
||||
code-theme(mode) {
|
||||
--code-foreground mode == 'light' ? $code-foreground : $night-code-foreground
|
||||
--code-background mode == 'light' ? $code-background : $night-code-background
|
||||
--highlight-background mode == 'light' ? $highlight-background : $night-highlight-background
|
||||
--highlight-foreground mode == 'light' ? $highlight-foreground : $night-highlight-foreground
|
||||
--highlight-comment mode == 'light' ? $highlight-comment : $night-highlight-comment
|
||||
--highlight-red mode == 'light' ? $highlight-red : $night-highlight-red
|
||||
--highlight-orange mode == 'light' ? $highlight-orange : $night-highlight-orange
|
||||
--highlight-yellow mode == 'light' ? $highlight-yellow : $night-highlight-yellow
|
||||
--highlight-green mode == 'light' ? $highlight-green : $night-highlight-green
|
||||
--highlight-aqua mode == 'light' ? $highlight-aqua : $night-highlight-aqua
|
||||
--highlight-blue mode == 'light' ? $highlight-blue : $night-highlight-blue
|
||||
--highlight-purple mode == 'light' ? $highlight-purple : $night-highlight-purple
|
||||
--highlight-gutter-color mode == 'light' ? $highlight-gutter-color : $night-highlight-gutter-color
|
||||
--highlight-gutter-bg-color mode == 'light' ? $highlight-gutter-bg-color : $night-highlight-gutter-bg-color
|
||||
--toolbar-foreground mode == 'light' ? $toolbar-foreground : $dark-toolbar-foreground
|
||||
--toolbar-background mode == 'light' ? $toolbar-background : $dark-toolbar-background
|
||||
--code-foreground mode == 'light' ? $code-foreground : $dark-code-foreground
|
||||
--code-background mode == 'light' ? $code-background : $dark-code-background
|
||||
--highlight-background mode == 'light' ? $highlight-background : $dark-highlight-background
|
||||
--highlight-foreground mode == 'light' ? $highlight-foreground : $dark-highlight-foreground
|
||||
--highlight-comment mode == 'light' ? $highlight-comment : $dark-highlight-comment
|
||||
--highlight-red mode == 'light' ? $highlight-red : $dark-highlight-red
|
||||
--highlight-orange mode == 'light' ? $highlight-orange : $dark-highlight-orange
|
||||
--highlight-yellow mode == 'light' ? $highlight-yellow : $dark-highlight-yellow
|
||||
--highlight-green mode == 'light' ? $highlight-green : $dark-highlight-green
|
||||
--highlight-aqua mode == 'light' ? $highlight-aqua : $dark-highlight-aqua
|
||||
--highlight-blue mode == 'light' ? $highlight-blue : $dark-highlight-blue
|
||||
--highlight-purple mode == 'light' ? $highlight-purple : $dark-highlight-purple
|
||||
--highlight-gutter-color mode == 'light' ? $highlight-gutter-color : $dark-highlight-gutter-color
|
||||
--highlight-gutter-bg-color mode == 'light' ? $highlight-gutter-bg-color : $dark-highlight-gutter-bg-color
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ $code-block {
|
|||
font-size 0.96rem
|
||||
line-height 1.5rem
|
||||
background var(--highlight-background)
|
||||
-webkit-text-size-adjust none
|
||||
not-text-size-adjust()
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -40,7 +40,8 @@ pre {
|
|||
|
||||
.highlight {
|
||||
@extend $code-block
|
||||
border-radius 0.1rem
|
||||
border-bottom-right-radius 0.1rem
|
||||
border-bottom-left-radius 0.1rem
|
||||
|
||||
pre {
|
||||
margin 0
|
||||
|
|
@ -95,24 +96,27 @@ pre {
|
|||
|
||||
.line {
|
||||
height 1.5rem
|
||||
color var(--default-text-color)
|
||||
color var(--highlight-foreground)
|
||||
|
||||
.attr {
|
||||
color var(--default-text-color)
|
||||
color var(--highlight-foreground)
|
||||
}
|
||||
|
||||
.string {
|
||||
color var(--default-text-color)
|
||||
color var(--highlight-foreground)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.gutter {
|
||||
-webkit-user-select none
|
||||
-moz-user-select none
|
||||
-ms-user-select none
|
||||
user-select none
|
||||
disable-user-select()
|
||||
color var(--highlight-gutter-color)
|
||||
background var(--highlight-gutter-bg-color)
|
||||
|
||||
.line {
|
||||
color var(--highlight-gutter-color)
|
||||
}
|
||||
}
|
||||
|
||||
.gist table {
|
||||
|
|
@ -123,7 +127,6 @@ pre {
|
|||
}
|
||||
}
|
||||
|
||||
// For diff highlight
|
||||
pre .deletion {
|
||||
background var(--highlight-deletion)
|
||||
}
|
||||
|
|
@ -157,6 +160,10 @@ pre {
|
|||
color var(--highlight-red)
|
||||
}
|
||||
|
||||
.property {
|
||||
color var(--highlight-blue)
|
||||
}
|
||||
|
||||
.number
|
||||
.preprocessor
|
||||
.built_in
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
$keep-container-border-radius = 5px
|
||||
$keep-container-border-radius = 0.4rem
|
||||
|
||||
hover-style(isTransform, scaleX, scaleY) {
|
||||
box-shadow 2px 2px 5px var(--shadow-color)
|
||||
|
|
@ -22,7 +22,7 @@ hover-style(isTransform, scaleX, scaleY) {
|
|||
keep-container(isTransform, scaleX, scaleY, padding, marginBottomValue) {
|
||||
box-sizing border-box
|
||||
padding padding
|
||||
background var(--background-color)
|
||||
background var(--content-background-color)
|
||||
border-radius $keep-container-border-radius
|
||||
|
||||
if (marginBottomValue != 0) {
|
||||
|
|
@ -58,3 +58,12 @@ disable-user-select() {
|
|||
-webkit-user-select none
|
||||
user-select none
|
||||
}
|
||||
|
||||
|
||||
not-text-size-adjust() {
|
||||
-ms-text-size-adjust none
|
||||
-moz-text-size-adjust none
|
||||
-webkit-text-size-adjust none
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.markdown-body {
|
||||
.keep-markdown-body {
|
||||
font-size 1rem
|
||||
|
||||
blockquote {
|
||||
|
|
@ -11,14 +11,14 @@
|
|||
|
||||
box-sizing border-box
|
||||
margin 1.4rem 0
|
||||
color var(--default-text-color)
|
||||
background var(--second-background-color)
|
||||
border-left 0.4rem solid var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
background var(--background-color-2)
|
||||
border-left 0.4rem solid var(--text-color-4)
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
line-height 2
|
||||
}
|
||||
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
padding-bottom 0.2rem
|
||||
text-decoration none
|
||||
overflow-wrap break-word
|
||||
border-bottom 0.1rem solid var(--third-text-color)
|
||||
border-bottom 0.1rem solid var(--text-color-4)
|
||||
outline 0
|
||||
cursor pointer
|
||||
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
.fab {
|
||||
position relative
|
||||
margin 0 0.2rem 0 0.4rem
|
||||
color var(--third-text-color)
|
||||
color var(--text-color-4)
|
||||
font-size 0.88rem
|
||||
}
|
||||
|
||||
|
|
@ -54,12 +54,12 @@
|
|||
|
||||
|
||||
strong {
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
}
|
||||
|
||||
|
||||
em {
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -115,7 +115,7 @@
|
|||
|
||||
|
||||
li {
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -125,7 +125,7 @@
|
|||
h4
|
||||
h5
|
||||
h6 {
|
||||
color var(--second-text-color)
|
||||
color var(--text-color-2)
|
||||
line-height 1.5
|
||||
|
||||
+keep-tablet() {
|
||||
|
|
@ -209,6 +209,10 @@
|
|||
opacity 0
|
||||
}
|
||||
|
||||
&[lazyload] {
|
||||
margin 0.8rem auto 0.2rem
|
||||
}
|
||||
|
||||
if (hexo-config('post.img_align') == 'center' || hexo-config('style.article_img_align') == 'center') {
|
||||
margin 0.8rem auto 0.2rem
|
||||
}
|
||||
|
|
@ -246,12 +250,12 @@
|
|||
}
|
||||
|
||||
tr {
|
||||
background-color var(--background-color)
|
||||
border 0.1rem solid var(--fourth-text-color)
|
||||
background-color var(--background-color-1)
|
||||
border 0.1rem solid var(--text-color-6)
|
||||
}
|
||||
|
||||
tr:nth-child(2n) {
|
||||
background-color var(--second-background-color)
|
||||
background-color var(--background-color-2)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,16 +14,19 @@ $main-content-width-tablet = 86% // main content
|
|||
$main-content-width-mobile = 90% // main content width (mobile)
|
||||
$post-tool-button-width = 38px // post tool button width
|
||||
$component-spacing-value = 38px // component-spacing-value (PC)
|
||||
$content-max-width = 928px // main content max width
|
||||
|
||||
// main content max width
|
||||
$temp-content-max-width = hexo-config('style.content_max_width')
|
||||
$content-max-width = $temp-content-max-width ? convert($temp-content-max-width) : 1000px
|
||||
// main content max width of has TOC
|
||||
$has-toc-content-max-width = $content-max-width * 1.2
|
||||
|
||||
// main content max width of has first screen
|
||||
$has-fs-content-max-width = $content-max-width * 1.2
|
||||
|
||||
|
||||
// ==============================================================================================
|
||||
// media query
|
||||
// ==============================================================================================
|
||||
$media-max-width = 780px // media query max width (tablet)
|
||||
$media-max-width = 800px // media query max width (tablet)
|
||||
$media-max-width-mobile = 500px // media query max width (mobile)
|
||||
|
||||
keep-tablet() {
|
||||
|
|
@ -60,53 +63,89 @@ $z-index-10 = 1010
|
|||
$temp-color = hexo-config('style.primary_color')
|
||||
$primary-color = $temp-color ? convert($temp-color) : #0066cc
|
||||
|
||||
// light
|
||||
$primary-color-light-1 = lighten($primary-color, 10%)
|
||||
$primary-color-light-2 = lighten($primary-color, 20%)
|
||||
|
||||
// dark
|
||||
$primary-color-dark-1 = darken($primary-color, 10%)
|
||||
$primary-color-dark-2 = darken($primary-color, 20%)
|
||||
|
||||
|
||||
// ==============================================================================================
|
||||
// theme light mode color set
|
||||
// ==============================================================================================
|
||||
$background-color = #fff
|
||||
$second-background-color = darken($background-color, 3%)
|
||||
$default-text-color = #50505c
|
||||
$first-text-color = darken($default-text-color, 10%)
|
||||
$second-text-color = darken($default-text-color, 5%)
|
||||
$third-text-color = lighten($default-text-color, 30%)
|
||||
$fourth-text-color = lighten($default-text-color, 90%)
|
||||
$border-color = darken($background-color, 30%)
|
||||
$background-color-1 = #fff
|
||||
$background-color-2= darken($background-color-1, 3%)
|
||||
$background-color-3= darken($background-color-1, 6%)
|
||||
$content-background-color = #fff
|
||||
|
||||
$text-color-3 = #50505c
|
||||
$text-color-1 = darken($text-color-3, 10%)
|
||||
$text-color-2 = darken($text-color-3, 5%)
|
||||
$text-color-4 = lighten($text-color-3, 30%)
|
||||
$text-color-5 = lighten($text-color-3, 60%)
|
||||
$text-color-6 = lighten($text-color-3, 90%)
|
||||
|
||||
$toc-text-color = lighten($text-color-3, 20%)
|
||||
|
||||
$badge-color = darken($background-color-1, 6%)
|
||||
$badge-background-color = lighten($text-color-3, 40%)
|
||||
|
||||
$border-color = darken($background-color-1, 30%)
|
||||
$selection-color = lighten($primary-color, 10%)
|
||||
|
||||
$shadow-color = rgba(0, 0, 0, 0.2)
|
||||
$shadow-hover-color = rgba(0, 0, 0, 0.28)
|
||||
$scrollbar-color = lighten($default-text-color, 6%)
|
||||
$scroll-bar-bg-color = darken($background-color, 10%)
|
||||
$link-color = darken($default-text-color, 10%)
|
||||
$shadow-hover-color = rgba(0, 0, 0, 0.3)
|
||||
|
||||
$scrollbar-color = lighten($text-color-3, 10%)
|
||||
$scrollbar-background-color = darken($background-color-1, 10%)
|
||||
$toc-scrollbar-color = alpha($text-color-3, 0.1)
|
||||
|
||||
$copyright-info-color = #cc0033
|
||||
$avatar-background-color = #0066cc
|
||||
$header-transparent-background-1 = alpha($background-color, 0.28)
|
||||
$header-transparent-background-2 = alpha($background-color, 0.58)
|
||||
$avatar-background-color = $primary-color-dark-1
|
||||
$header-transparent-background-1 = alpha($background-color-1, 0.28)
|
||||
$header-transparent-background-2 = alpha($background-color-1, 0.58)
|
||||
|
||||
$pjax-progress-bar-color = linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3)
|
||||
|
||||
|
||||
// ==============================================================================================
|
||||
// theme dark mode color set
|
||||
// ==============================================================================================
|
||||
$dark-primary-color = $primary-color
|
||||
$dark-background-color = #383940
|
||||
$dark-second-background-color = darken($dark-background-color, 10%)
|
||||
$dark-default-text-color = #bebec6
|
||||
$dark-first-text-color = lighten($dark-default-text-color, 30%)
|
||||
$dark-second-text-color = lighten($dark-default-text-color, 20%)
|
||||
$dark-third-text-color = darken($dark-default-text-color, 20%)
|
||||
$dark-fourth-text-color = darken($dark-default-text-color, 75%)
|
||||
$dark-border-color = lighten($dark-background-color, 20%)
|
||||
$dark-selection-color = $selection-color
|
||||
$dark-background-color-1 = #383940
|
||||
$dark-background-color-2= lighten($dark-background-color-1, 3%)
|
||||
$dark-background-color-3= lighten($dark-background-color-1, 6%)
|
||||
$dark-content-background-color = darken($dark-background-color-1, 2%)
|
||||
|
||||
$dark-text-color-3 = #bebec6
|
||||
$dark-text-color-1 = lighten($dark-text-color-3, 10%)
|
||||
$dark-text-color-2 = lighten($dark-text-color-3, 5%)
|
||||
$dark-text-color-4 = darken($dark-text-color-3, 20%)
|
||||
$dark-text-color-5 = darken($dark-text-color-3, 50%)
|
||||
$dark-text-color-6 = darken($dark-text-color-3, 70%)
|
||||
|
||||
$dark-toc-text-color = darken($dark-text-color-3, 15%)
|
||||
|
||||
$dark-badge-color = lighten($dark-background-color-1, 10%)
|
||||
$dark-badge-background-color = lighten($dark-text-color-3, 40%)
|
||||
|
||||
$dark-border-color = lighten($dark-background-color-1, 30%)
|
||||
$dark-selection-color = darken($selection-color, 20%)
|
||||
|
||||
$dark-shadow-color = rgba(128, 128, 128, 0.2)
|
||||
$dark-shadow-hover-color = rgba(128, 128, 128, 0.28)
|
||||
$dark-scrollbar-color = darken($dark-background-color, 10%)
|
||||
$dark-scroll-bar-bg-color = lighten($dark-background-color, 20%)
|
||||
$dark-link-color = lighten($dark-default-text-color, 10%)
|
||||
|
||||
$dark-scrollbar-color = darken($dark-background-color-1, 10%)
|
||||
$dark-scrollbar-background-color = lighten($dark-background-color-1, 20%)
|
||||
$dark-toc-scrollbar-color = alpha($dark-text-color-3, 0.1)
|
||||
|
||||
$dark-copyright-info-color = darken($copyright-info-color, 20%)
|
||||
$dark-avatar-background-color = darken($avatar-background-color, 10%)
|
||||
$dark-header-transparent-background-1 = alpha($dark-background-color, 0.28)
|
||||
$dark-header-transparent-background-2 = alpha($dark-background-color, 0.58)
|
||||
$dark-avatar-background-color = darken($avatar-background-color, 20%)
|
||||
|
||||
$dark-header-transparent-background-1 = alpha($dark-background-color-1, 0.28)
|
||||
$dark-header-transparent-background-2 = alpha($dark-background-color-1, 0.58)
|
||||
|
||||
$dark-pjax-progress-bar-color = linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee)
|
||||
|
||||
|
||||
|
|
@ -126,25 +165,57 @@ $default-font-weight = 400
|
|||
// light/dark mode color
|
||||
// ==============================================================================================
|
||||
root-color(mode) {
|
||||
--background-color mode == 'light' ? $background-color : $dark-background-color
|
||||
--second-background-color mode == 'light' ? $second-background-color : $dark-second-background-color
|
||||
--primary-color mode == 'light' ? $primary-color : $dark-primary-color
|
||||
--first-text-color mode == 'light' ? $first-text-color : $dark-first-text-color
|
||||
--second-text-color mode == 'light' ? $second-text-color : $dark-second-text-color
|
||||
--third-text-color mode == 'light' ? $third-text-color : $dark-third-text-color
|
||||
--fourth-text-color mode == 'light' ? $fourth-text-color : $dark-fourth-text-color
|
||||
--default-text-color mode == 'light' ? $default-text-color : $dark-default-text-color
|
||||
// primary color
|
||||
--primary-color $primary-color
|
||||
--primary-color-light-1 $primary-color-light-1
|
||||
--primary-color-light-2 $primary-color-light-2
|
||||
--primary-color-dark-1 $primary-color-dark-1
|
||||
--primary-color-dark-2 $primary-color-dark-2
|
||||
|
||||
// background color
|
||||
--background-color-1 mode == 'light' ? $background-color-1 : $dark-background-color-1
|
||||
--background-color-2 mode == 'light' ? $background-color-2 : $dark-background-color-2
|
||||
--background-color-3 mode == 'light' ? $background-color-3 : $dark-background-color-3
|
||||
|
||||
// content background color
|
||||
--content-background-color mode == 'light' ? $content-background-color : $dark-content-background-color
|
||||
|
||||
// text color
|
||||
--text-color-1 mode == 'light' ? $text-color-1 : $dark-text-color-1
|
||||
--text-color-2 mode == 'light' ? $text-color-2 : $dark-text-color-2
|
||||
--text-color-3 mode == 'light' ? $text-color-3 : $dark-text-color-3
|
||||
--text-color-4 mode == 'light' ? $text-color-4 : $dark-text-color-4
|
||||
--text-color-5 mode == 'light' ? $text-color-5 : $dark-text-color-5
|
||||
--text-color-6 mode == 'light' ? $text-color-6 : $dark-text-color-6
|
||||
|
||||
// toc text color
|
||||
--toc-text-color mode == 'light' ? $toc-text-color : $dark-toc-text-color
|
||||
|
||||
// badge color
|
||||
--badge-color mode == 'light' ? $badge-color : $dark-badge-color
|
||||
--badge-background-color mode == 'light' ? $badge-background-color : $dark-badge-background-color
|
||||
|
||||
// border color
|
||||
--border-color mode == 'light' ? $border-color : $dark-border-color
|
||||
|
||||
// selection color
|
||||
--selection-color mode == 'light' ? $selection-color : $dark-selection-color
|
||||
|
||||
// shadow color
|
||||
--shadow-color mode == 'light' ? $shadow-color : $dark-shadow-color
|
||||
--shadow-hover-color mode == 'light' ? $shadow-hover-color : $dark-shadow-hover-color
|
||||
|
||||
// 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
|
||||
--link-color mode == 'light' ? $link-color : $dark-link-color
|
||||
--scrollbar-background-color mode == 'light' ? $scrollbar-background-color : $dark-scrollbar-background-color
|
||||
--toc-scrollbar-color mode == 'light' ? $toc-scrollbar-color : $dark-toc-scrollbar-color
|
||||
|
||||
--copyright-info-color mode == 'light' ? $copyright-info-color : $dark-copyright-info-color
|
||||
--avatar-background-color mode == 'light' ? $avatar-background-color : $dark-avatar-background-color
|
||||
|
||||
--header-transparent-background-1 mode == 'light' ? $header-transparent-background-1 : $dark-header-transparent-background-1
|
||||
--header-transparent-background-2 mode == 'light' ? $header-transparent-background-2 : $dark-header-transparent-background-2
|
||||
|
||||
--pjax-progress-bar-color mode == 'light' ? $pjax-progress-bar-color : $dark-pjax-progress-bar-color
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ $article-date-font-size = 1rem
|
|||
|
||||
.archive-year {
|
||||
margin-right 6px
|
||||
color var(--second-text-color)
|
||||
color var(--text-color-2)
|
||||
font-weight 600
|
||||
font-size $archive-year-font-size
|
||||
|
||||
|
|
@ -28,7 +28,7 @@ $article-date-font-size = 1rem
|
|||
|
||||
|
||||
.archive-year-post-count {
|
||||
color var(--second-text-color)
|
||||
color var(--text-color-2)
|
||||
font-weight 500
|
||||
font-size $archive-year-count-font-size
|
||||
|
||||
|
|
@ -68,12 +68,12 @@ $article-date-font-size = 1rem
|
|||
|
||||
|
||||
a.article-title {
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
}
|
||||
|
||||
.article-date {
|
||||
float right
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
font-size $article-date-font-size
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
width 100%
|
||||
overflow hidden
|
||||
font-size 1rem
|
||||
background var(--second-background-color)
|
||||
background var(--background-color-2)
|
||||
|
||||
&::after {
|
||||
position absolute
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background var(--third-text-color)
|
||||
background var(--text-color-4)
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
|
||||
li {
|
||||
margin-bottom 0.4rem
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
white-space nowrap
|
||||
|
||||
.license {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
.article-meta-item {
|
||||
margin-right 0.6rem
|
||||
color var(--third-text-color)
|
||||
color var(--text-color-4)
|
||||
|
||||
&:last-child {
|
||||
margin-right 0
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
}
|
||||
|
||||
a {
|
||||
color var(--third-text-color)
|
||||
color var(--text-color-4)
|
||||
|
||||
&:hover {
|
||||
color var(--primary-color)
|
||||
|
|
|
|||
|
|
@ -8,6 +8,9 @@ if (hexo-config('comment.enable') == true && hexo-config('comment.use') != "") {
|
|||
else if (hexo-config('comment.use') == "twikoo") {
|
||||
@import "./twikoo.styl"
|
||||
}
|
||||
else if (hexo-config('comment.use') == "waline") {
|
||||
@import "./waline.styl"
|
||||
}
|
||||
}
|
||||
|
||||
.comments-container {
|
||||
|
|
@ -15,7 +18,7 @@ if (hexo-config('comment.enable') == true && hexo-config('comment.use') != "") {
|
|||
width 100%
|
||||
margin-top $component-spacing-value
|
||||
|
||||
#comment-anchor {
|
||||
#comments-anchor {
|
||||
width 100%
|
||||
height 0.8rem
|
||||
}
|
||||
|
|
@ -23,11 +26,11 @@ if (hexo-config('comment.enable') == true && hexo-config('comment.use') != "") {
|
|||
.comment-area-title {
|
||||
width 100%
|
||||
margin 0.8rem 0
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
font-size 1.38rem
|
||||
|
||||
i {
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
}
|
||||
|
||||
+keep-tablet() {
|
||||
|
|
|
|||
|
|
@ -1,562 +1,105 @@
|
|||
// variables
|
||||
$gt-color-main := #6190e8
|
||||
$gt-color-sub := #a1a1a1
|
||||
$gt-color-loader := #999999
|
||||
$gt-color-error := #ff3860
|
||||
$gt-color-hr := #e9e9e9
|
||||
$gt-color-comment-txt := #333333
|
||||
$gt-color-link-active := #333333
|
||||
$gt-color-btn := #ffffff
|
||||
$gt-size-base := 16px // default font-size
|
||||
$gt-size-border-radius := 5px
|
||||
$gt-breakpoint-mobile := 479px
|
||||
$gt-mask-z-index := 9999
|
||||
.gitalk-comment-container {
|
||||
|
||||
// functions & mixins
|
||||
clearfix() {
|
||||
&:before
|
||||
&:after {
|
||||
display table
|
||||
clear both
|
||||
content ""
|
||||
}
|
||||
}
|
||||
em($px, $base-size = $gt-size-base) {
|
||||
u = unit($px)
|
||||
if (u is 'px') {
|
||||
unit($px / $base-size, 'em')
|
||||
}
|
||||
else {
|
||||
unit($px, u)
|
||||
}
|
||||
}
|
||||
transition-t("color, background", "0, 0", "0.2, 0.2", "ease, ease")
|
||||
|
||||
mobile() {
|
||||
@media (max-width $gt-breakpoint-mobile) {
|
||||
{block}
|
||||
}
|
||||
}
|
||||
|
||||
// variables - calculated
|
||||
$gt-size-loader-dot := em(6px)
|
||||
$gt-size-loader := em(28px)
|
||||
$gt-size-avatar := em(50px)
|
||||
$gt-size-avatar-mobi := em(32px)
|
||||
|
||||
// styles
|
||||
// Put everything under container to avoid style conflicts
|
||||
.comments-container {
|
||||
.gt-container {
|
||||
box-sizing border-box
|
||||
* {
|
||||
box-sizing border-box
|
||||
}
|
||||
font-size $gt-size-base
|
||||
// common
|
||||
a {
|
||||
color $gt-color-main
|
||||
&:hover {
|
||||
color lighten($gt-color-main, 20%)
|
||||
border-color lighten($gt-color-main, 20%)
|
||||
}
|
||||
&.is--active {
|
||||
color $gt-color-link-active
|
||||
cursor default !important
|
||||
&:hover {
|
||||
color $gt-color-link-active
|
||||
}
|
||||
}
|
||||
}
|
||||
.hide {
|
||||
display none !important
|
||||
}
|
||||
// icons
|
||||
.gt-svg {
|
||||
display inline-block
|
||||
width em(16px)
|
||||
height em(16px)
|
||||
vertical-align sub
|
||||
svg {
|
||||
width 100%
|
||||
height 100%
|
||||
fill $gt-color-main
|
||||
}
|
||||
}
|
||||
.gt-ico {
|
||||
display inline-block
|
||||
&-text {
|
||||
margin-left em(5px)
|
||||
}
|
||||
&-github {
|
||||
width 100%
|
||||
height 100%
|
||||
.gt-svg {
|
||||
width 100%
|
||||
height 100%
|
||||
}
|
||||
svg {
|
||||
fill inherit
|
||||
}
|
||||
}
|
||||
}
|
||||
// loader
|
||||
.gt-spinner {
|
||||
position relative
|
||||
&::before {
|
||||
position absolute
|
||||
top 3px
|
||||
box-sizing border-box
|
||||
width em(12px)
|
||||
height em(12px)
|
||||
margin-top em(-3px)
|
||||
margin-left em(-6px)
|
||||
border 1px solid $gt-color-btn
|
||||
border-top-color $gt-color-main
|
||||
border-radius 50%
|
||||
animation gt-kf-rotate 0.6s linear infinite
|
||||
content ''
|
||||
}
|
||||
}
|
||||
|
||||
.gt-loader {
|
||||
position relative
|
||||
display inline-block
|
||||
width $gt-size-loader
|
||||
height $gt-size-loader
|
||||
font-style normal
|
||||
// font-size: $gt-size-loader
|
||||
line-height $gt-size-loader
|
||||
border 1px solid $gt-color-loader
|
||||
border-radius 50%
|
||||
animation ease gt-kf-rotate 1.5s infinite
|
||||
&:before {
|
||||
position absolute
|
||||
top 0
|
||||
left 50%
|
||||
display block
|
||||
width $gt-size-loader-dot
|
||||
height $gt-size-loader-dot
|
||||
margin-top -($gt-size-loader-dot / 2)
|
||||
margin-left -($gt-size-loader-dot / 2)
|
||||
background-color $gt-color-loader
|
||||
border-radius 50%
|
||||
content ''
|
||||
}
|
||||
}
|
||||
// avatar
|
||||
.gt-avatar {
|
||||
display inline-block
|
||||
width $gt-size-avatar
|
||||
height $gt-size-avatar
|
||||
+mobile() {
|
||||
width $gt-size-avatar-mobi
|
||||
height $gt-size-avatar-mobi
|
||||
}
|
||||
img {
|
||||
width 100%
|
||||
height auto
|
||||
border-radius 3px
|
||||
}
|
||||
&-github {
|
||||
width $gt-size-avatar - em(2px)
|
||||
height $gt-size-avatar - em(2px)
|
||||
cursor pointer
|
||||
+mobile() {
|
||||
width $gt-size-avatar-mobi - em(2px)
|
||||
height $gt-size-avatar-mobi - em(2px)
|
||||
}
|
||||
}
|
||||
}
|
||||
// button
|
||||
.gt-btn {
|
||||
display inline-block
|
||||
padding em(12px) em(20px)
|
||||
color $gt-color-btn
|
||||
font-size em(12px)
|
||||
line-height 1
|
||||
white-space nowrap
|
||||
text-decoration none
|
||||
background-color $gt-color-main
|
||||
border 1px solid $gt-color-main
|
||||
border-radius $gt-size-border-radius
|
||||
outline none
|
||||
cursor pointer
|
||||
&-text {
|
||||
font-weight 400
|
||||
}
|
||||
&-loading {
|
||||
position relative
|
||||
display inline-block
|
||||
width em(12px)
|
||||
height em(16px)
|
||||
margin-left em(8px)
|
||||
vertical-align top
|
||||
}
|
||||
&.is--disable {
|
||||
cursor not-allowed
|
||||
opacity 0.5
|
||||
}
|
||||
&-login {
|
||||
margin-right 0
|
||||
}
|
||||
&-preview {
|
||||
color $gt-color-main
|
||||
background-color var(--background-color)
|
||||
&:hover {
|
||||
background-color var(--second-background-color)
|
||||
}
|
||||
}
|
||||
&-public {
|
||||
&:hover {
|
||||
background-color lighten($gt-color-main, 20%)
|
||||
border-color lighten($gt-color-main, 20%)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-loadmore
|
||||
// loadmore
|
||||
|
||||
/* error */
|
||||
.gt-error {
|
||||
margin em(10px)
|
||||
color $gt-color-error
|
||||
text-align center
|
||||
background-color var(--primary-color-light-1)
|
||||
border 1px solid var(--primary-color-light-1)
|
||||
transition-t("color, background", "0, 0", "0.2, 0.2", "ease, ease")
|
||||
}
|
||||
|
||||
// initing
|
||||
.gt-initing {
|
||||
padding em(20px) 0
|
||||
text-align center
|
||||
&-text {
|
||||
margin em(10px) auto
|
||||
font-size 92%
|
||||
}
|
||||
|
||||
.gt-initing-text {
|
||||
color var(--text-color-3)
|
||||
}
|
||||
|
||||
// no int
|
||||
.gt-no-init {
|
||||
padding em(20px) 0
|
||||
text-align center
|
||||
}
|
||||
|
||||
// link
|
||||
.gt-link {
|
||||
border-bottom 1px dotted $gt-color-main
|
||||
&-counts
|
||||
&-project {
|
||||
text-decoration none
|
||||
}
|
||||
}
|
||||
|
||||
// meta
|
||||
.gt-meta {
|
||||
position relative
|
||||
z-index 10
|
||||
margin em(20px) 0
|
||||
padding em(16px) 0
|
||||
font-size em(16px)
|
||||
border-bottom 1px solid $gt-color-hr
|
||||
clearfix()
|
||||
}
|
||||
|
||||
.gt-counts {
|
||||
margin 0 em(10px) 0 0
|
||||
color var(--default-text-color)
|
||||
a {
|
||||
color var(--primary-color)
|
||||
}
|
||||
color var(--text-color-3)
|
||||
}
|
||||
|
||||
.gt-user {
|
||||
float right
|
||||
margin 0
|
||||
font-size 92%
|
||||
&-pic {
|
||||
width 16px
|
||||
height 16px
|
||||
margin-right em(8px)
|
||||
vertical-align top
|
||||
}
|
||||
&-inner {
|
||||
display inline-block
|
||||
cursor pointer
|
||||
.gt-user-name {
|
||||
color var(--default-text-color)
|
||||
}
|
||||
color var(--text-color-3)
|
||||
}
|
||||
|
||||
.gt-ico {
|
||||
margin 0 0 0 em(5px)
|
||||
svg {
|
||||
fill var(--default-text-color)
|
||||
}
|
||||
}
|
||||
.is--poping {
|
||||
.gt-ico {
|
||||
svg {
|
||||
fill $gt-color-main
|
||||
}
|
||||
path {
|
||||
fill var(--text-color-3)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gt-version {
|
||||
margin-left em(6px)
|
||||
color $gt-color-sub
|
||||
}
|
||||
|
||||
.gt-copyright {
|
||||
margin 0 em(15px) em(8px)
|
||||
padding-top em(8px)
|
||||
border-top 1px solid var(--border-color)
|
||||
}
|
||||
|
||||
// popup
|
||||
.gt-popup {
|
||||
position absolute
|
||||
top em(38px)
|
||||
right 0
|
||||
display inline-block
|
||||
padding em(10px) 0
|
||||
font-size em(14px)
|
||||
letter-spacing 0.5px
|
||||
background var(--background-color)
|
||||
top 2.6rem
|
||||
background var(--background-color-2)
|
||||
border 1px solid var(--border-color)
|
||||
.gt-action {
|
||||
position relative
|
||||
display block
|
||||
margin em(8px) 0
|
||||
padding 0 em(18px)
|
||||
text-decoration none
|
||||
cursor pointer
|
||||
&.is--active {
|
||||
&:before {
|
||||
position absolute
|
||||
top em(7px)
|
||||
left em(8px)
|
||||
width em(4px)
|
||||
height em(4px)
|
||||
background $gt-color-main
|
||||
content ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// header
|
||||
|
||||
|
||||
.gt-header {
|
||||
position relative
|
||||
display flex
|
||||
&-comment {
|
||||
flex 1
|
||||
margin-left em(20px)
|
||||
+mobile() {
|
||||
margin-left em(14px)
|
||||
}
|
||||
}
|
||||
&-textarea {
|
||||
display block
|
||||
box-sizing border-box
|
||||
width 100%
|
||||
min-height em(82px)
|
||||
max-height em(240px)
|
||||
padding em(12px)
|
||||
color var(--default-text-color)
|
||||
font-size em(14px)
|
||||
word-wrap break-word
|
||||
background-color var(--fourth-text-color)
|
||||
border 1px solid var(--border-color)
|
||||
border-radius $gt-size-border-radius
|
||||
outline none
|
||||
transition all 0.25s ease
|
||||
resize vertical
|
||||
&:hover {
|
||||
background-color var(--background-color)
|
||||
}
|
||||
}
|
||||
&-preview {
|
||||
padding em(12px)
|
||||
background-color var(--background-color)
|
||||
border 1px solid var(--border-color)
|
||||
border-radius $gt-size-border-radius
|
||||
}
|
||||
&-controls {
|
||||
position relative
|
||||
margin em(12px) 0 0
|
||||
clearfix()
|
||||
+mobile() {
|
||||
margin 0
|
||||
}
|
||||
&-tip {
|
||||
color $gt-color-main
|
||||
font-size em(14px)
|
||||
text-decoration none
|
||||
vertical-align sub
|
||||
+mobile() {
|
||||
display none
|
||||
}
|
||||
}
|
||||
.gt-btn {
|
||||
float right
|
||||
margin-left em(20px)
|
||||
+mobile() {
|
||||
float none
|
||||
width 100%
|
||||
margin em(12px) 0 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
position fixed
|
||||
top 0
|
||||
right 0
|
||||
bottom 100%
|
||||
left 0
|
||||
opacity 0
|
||||
content ''
|
||||
}
|
||||
&.gt-input-focused {
|
||||
position relative
|
||||
&:after {
|
||||
position fixed
|
||||
top 0
|
||||
right 0
|
||||
bottom 0
|
||||
left 0
|
||||
z-index $gt-mask-z-index
|
||||
background #000
|
||||
opacity 0.6
|
||||
transition opacity 0.3s, bottom 0s
|
||||
content ''
|
||||
}
|
||||
.gt-header-comment {
|
||||
z-index $gt-mask-z-index + 1
|
||||
textarea {
|
||||
color var(--text-color-3)
|
||||
background-color var(--background-color-2)
|
||||
transition-t("color, background", "0, 0", "0.2, 0.2", "ease, ease")
|
||||
}
|
||||
|
||||
.gt-header-controls {
|
||||
|
||||
.gt-btn-preview {
|
||||
color #fff
|
||||
background-color var(--primary-color-light-1)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// comments
|
||||
|
||||
.gt-comments {
|
||||
padding-top em(20px)
|
||||
&-null {
|
||||
text-align center
|
||||
}
|
||||
&-controls {
|
||||
margin em(20px) 0
|
||||
text-align center
|
||||
}
|
||||
.gt-comments-null {
|
||||
color var(--text-color-4)
|
||||
}
|
||||
|
||||
// comment
|
||||
.gt-comment {
|
||||
position relative
|
||||
display flex
|
||||
padding em(10px) 0
|
||||
&-content {
|
||||
flex 1
|
||||
margin-left em(20px)
|
||||
padding em(12px) em(16px)
|
||||
overflow auto
|
||||
background-color var(--second-background-color)
|
||||
transition all ease 0.25s
|
||||
+mobile() {
|
||||
margin-left em(14px)
|
||||
padding em(10px) em(12px)
|
||||
}
|
||||
}
|
||||
&-header {
|
||||
position relative
|
||||
margin-bottom em(8px)
|
||||
font-size em(14px)
|
||||
}
|
||||
&-block-1 {
|
||||
float right
|
||||
width em(32px)
|
||||
height em(22px)
|
||||
}
|
||||
&-block-2 {
|
||||
float right
|
||||
width em(64px)
|
||||
height em(22px)
|
||||
}
|
||||
&-username {
|
||||
color $gt-color-main
|
||||
font-weight 500
|
||||
text-decoration none
|
||||
&:hover {
|
||||
text-decoration underline
|
||||
}
|
||||
}
|
||||
&-text {
|
||||
margin-left em(8px)
|
||||
color $gt-color-sub
|
||||
}
|
||||
&-date {
|
||||
margin-left em(8px)
|
||||
color $gt-color-sub
|
||||
}
|
||||
&-like
|
||||
&-edit
|
||||
&-reply {
|
||||
position absolute
|
||||
height em(22px)
|
||||
&:hover {
|
||||
cursor pointer
|
||||
}
|
||||
}
|
||||
&-like {
|
||||
top 0
|
||||
right em(32px)
|
||||
}
|
||||
&-edit
|
||||
&-reply {
|
||||
top 0
|
||||
right 0
|
||||
}
|
||||
&-body {
|
||||
// color: $gt-color-comment-txt !important
|
||||
color var(--second-text-color) !important
|
||||
.email-hidden-toggle a {
|
||||
display inline-block
|
||||
height 12px
|
||||
padding 0 9px
|
||||
color #444d56
|
||||
font-weight 600
|
||||
font-size 12px
|
||||
line-height 6px
|
||||
text-decoration none
|
||||
vertical-align middle
|
||||
background #dfe2e5
|
||||
border-radius 1px
|
||||
&:hover {
|
||||
background-color #c6cbd1
|
||||
}
|
||||
}
|
||||
.email-hidden-reply {
|
||||
display none
|
||||
white-space pre-wrap
|
||||
.email-signature-reply {
|
||||
margin 15px 0
|
||||
padding 0 15px
|
||||
color #586069
|
||||
border-left 4px solid #dfe2e5
|
||||
}
|
||||
}
|
||||
.email-hidden-reply.expanded {
|
||||
display block
|
||||
}
|
||||
}
|
||||
&-admin {
|
||||
.gt-comment-content {
|
||||
background-color var(--fourth-text-color)
|
||||
background-color var(--background-color-2)
|
||||
transition-t("color, background", "0, 0", "0.2, 0.2", "ease, ease")
|
||||
|
||||
&:hover {
|
||||
box-shadow none
|
||||
}
|
||||
|
||||
.gt-comment-body {
|
||||
p
|
||||
li {
|
||||
color var(--text-color-3)
|
||||
}
|
||||
|
||||
.email-fragment {
|
||||
color var(--text-color-3)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gt-kf-rotate {
|
||||
0% {
|
||||
transform rotate(0)
|
||||
.notranslate {
|
||||
background-color var(--background-color-3)
|
||||
|
||||
code {
|
||||
color var(--text-color-2)
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color var(--background-color-3)
|
||||
}
|
||||
}
|
||||
100% {
|
||||
transform rotate(360deg)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
.tk-meta-input {
|
||||
.el-input {
|
||||
.el-input-group__prepend {
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
}
|
||||
|
||||
input {
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -17,47 +17,50 @@
|
|||
|
||||
.tk-input {
|
||||
textarea {
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.actions {
|
||||
|
||||
.tk-row-actions-start {
|
||||
.tk-action-icon {
|
||||
|
||||
.tk-submit-action-icon {
|
||||
|
||||
svg {
|
||||
fill var(--default-text-color)
|
||||
path {
|
||||
fill var(--text-color-3)
|
||||
transition-t("fill", "0", "0.2", "ease")
|
||||
}
|
||||
}
|
||||
|
||||
&.OwO {
|
||||
|
||||
.OwO-body {
|
||||
color var(--default-text-color)
|
||||
background-color var(--background-color)
|
||||
}
|
||||
color var(--text-color-3)
|
||||
background-color var(--background-color-1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tk-preview {
|
||||
span {
|
||||
color var(--default-text-color)
|
||||
background var(--second-background-color)
|
||||
color var(--text-color-3)
|
||||
background var(--background-color-2)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tk-preview-container {
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
}
|
||||
|
||||
|
||||
.tk-comments-container {
|
||||
.tk-comments-count {
|
||||
span {
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -67,10 +70,16 @@
|
|||
margin-bottom 1.4rem
|
||||
|
||||
.tk-meta {
|
||||
|
||||
.tk-nick {
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
}
|
||||
|
||||
strong {
|
||||
color var(--text-color-3)
|
||||
}
|
||||
|
||||
|
||||
.tk-tag {
|
||||
|
||||
&.tk-tag-green {
|
||||
|
|
@ -85,18 +94,26 @@
|
|||
|
||||
.tk-time {
|
||||
time {
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-4)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tk-content {
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
|
||||
span {
|
||||
color var(--text-color-3)
|
||||
}
|
||||
|
||||
p {
|
||||
color var(--text-color-3)
|
||||
}
|
||||
}
|
||||
|
||||
.tk-expand {
|
||||
color var(--third-text-color)
|
||||
color var(--text-color-4)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,14 +4,14 @@
|
|||
|
||||
.vwrap {
|
||||
|
||||
border 0.1rem solid var(--third-text-color)
|
||||
border 0.1rem solid var(--text-color-4)
|
||||
|
||||
.vheader {
|
||||
|
||||
.vinput {
|
||||
|
||||
color var(--default-text-color)
|
||||
border-color var(--third-text-color)
|
||||
color var(--text-color-3)
|
||||
border-color var(--text-color-4)
|
||||
|
||||
&:focus {
|
||||
border-bottom 0.1rem dashed var(--primary-color) !important
|
||||
|
|
@ -23,14 +23,14 @@
|
|||
.vedit {
|
||||
|
||||
.veditor {
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
}
|
||||
|
||||
.vctrl {
|
||||
|
||||
.vicon {
|
||||
|
||||
fill var(--default-text-color)
|
||||
fill var(--text-color-3)
|
||||
|
||||
&.actived {
|
||||
fill var(--primary-color)
|
||||
|
|
@ -41,9 +41,9 @@
|
|||
|
||||
|
||||
button.vsubmit {
|
||||
color var(--default-text-color) !important
|
||||
color var(--text-color-3) !important
|
||||
background transparent !important
|
||||
border 0.1rem solid var(--default-text-color) !important
|
||||
border 0.1rem solid var(--text-color-3) !important
|
||||
|
||||
&:hover {
|
||||
color var(--primary-color) !important
|
||||
|
|
@ -54,10 +54,10 @@
|
|||
|
||||
|
||||
.vcount {
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
|
||||
.vnum {
|
||||
color var(--second-text-color)
|
||||
color var(--text-color-2)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -85,15 +85,15 @@
|
|||
}
|
||||
|
||||
.vsys {
|
||||
color var(--default-text-color)
|
||||
background var(--fourth-text-color) !important
|
||||
color var(--text-color-3)
|
||||
background var(--background-color-2) !important
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.vcontent {
|
||||
P {
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
|
||||
code {
|
||||
color var(--code-foreground)
|
||||
|
|
@ -114,14 +114,14 @@
|
|||
|
||||
|
||||
.vcopy {
|
||||
color var(--third-text-color)
|
||||
color var(--text-color-4)
|
||||
}
|
||||
|
||||
|
||||
.vpage {
|
||||
|
||||
.vmore {
|
||||
color var(--second-text-color)
|
||||
color var(--text-color-2)
|
||||
border 0.1rem solid var(--border-color)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
.waline-comment-container {
|
||||
#waline-comment {
|
||||
--waline-theme-color var(--primary-color)
|
||||
--waline-active-color var(--primary-color-light-1)
|
||||
--waline-color var(--text-color-3)
|
||||
--waline-bgcolor var(--background-color-1)
|
||||
--waline-border-color var(--border-color)
|
||||
--waline-disable-bgcolor var(--background-color-2)
|
||||
--waline-disable-color var(--text-color-3)
|
||||
--waline-code-bgcolor rgba(40, 44, 52, 0.9)
|
||||
--waline-info-bgcolor var(--background-color-3)
|
||||
--waline-info-color var(--text-color-3)
|
||||
--waline-border 1px solid var(--waline-border-color)
|
||||
|
||||
input
|
||||
textarea {
|
||||
position relative
|
||||
box-sizing border-box
|
||||
padding 0.6rem 1rem
|
||||
color var(--text-color-3)
|
||||
background transparent
|
||||
border-radius 0.4rem
|
||||
outline none
|
||||
|
||||
&:hover {
|
||||
background var(--background-color-2)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.wl-header {
|
||||
box-sizing border-box
|
||||
padding 0
|
||||
}
|
||||
|
||||
|
||||
button {
|
||||
transition-t("color, background", "0, 0", "0.2, 0.2", "ease, ease")
|
||||
}
|
||||
|
||||
.wl-logout-btn {
|
||||
svg {
|
||||
width 1rem
|
||||
height 1rem
|
||||
path {
|
||||
color var(--background-color-3)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wl-panel {
|
||||
border-radius 0.4rem
|
||||
}
|
||||
|
||||
.wl-count
|
||||
.wl-num
|
||||
.wl-preview h4
|
||||
.wl-like span {
|
||||
color var(--text-color-4)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -5,12 +5,13 @@ $temp-img = hexo-config('style.first_screen.background_img')
|
|||
$first-screen-img = $temp-img ? $temp-img : '/images/bg.svg'
|
||||
|
||||
$temp-font-color = hexo-config('style.first_screen.font_color')
|
||||
$first-screen-font-color = $temp-font-color ? convert($temp-font-color) : var(--default-text-color)
|
||||
$first-screen-font-color = $temp-font-color ? convert($temp-font-color) : var(--text-color-3)
|
||||
|
||||
.first-screen-container {
|
||||
position relative
|
||||
box-sizing border-box
|
||||
width 100%
|
||||
height 100vh
|
||||
overflow hidden
|
||||
background url($first-screen-img) center center / cover no-repeat
|
||||
|
||||
|
|
@ -66,7 +67,7 @@ $first-screen-font-color = $temp-font-color ? convert($temp-font-color) : var(--
|
|||
cursor pointer
|
||||
|
||||
i {
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
.footer {
|
||||
color var(--third-text-color)
|
||||
color var(--text-color-4)
|
||||
font-size 1rem
|
||||
|
||||
|
||||
a {
|
||||
color var(--third-text-color)
|
||||
color var(--text-color-4)
|
||||
|
||||
&:hover {
|
||||
color var(--primary-color)
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
.info-item {
|
||||
margin 0.3rem 0
|
||||
color var(--third-text-color)
|
||||
color var(--text-color-4)
|
||||
|
||||
&.ypyun-info a {
|
||||
display flex
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ $logo-image-box-width = 46px
|
|||
width 100%
|
||||
height 100%
|
||||
padding-top $scroll-progress-bar-height
|
||||
background var(--background-color)
|
||||
background var(--background-color-1)
|
||||
|
||||
hover-style(false, 0, 0)
|
||||
|
||||
|
|
@ -25,10 +25,15 @@ $logo-image-box-width = 46px
|
|||
width $main-content-width
|
||||
max-width $content-max-width
|
||||
height 100%
|
||||
transition-t("max-width, width", "0, 0", "0.1, 0.1", "ease, ease")
|
||||
|
||||
|
||||
&.has-first-screen {
|
||||
max-width $content-max-width * 1.2
|
||||
max-width $has-fs-content-max-width
|
||||
}
|
||||
|
||||
.has-toc & {
|
||||
max-width $has-toc-content-max-width
|
||||
}
|
||||
|
||||
+keep-tablet() {
|
||||
|
|
@ -75,7 +80,7 @@ $logo-image-box-width = 46px
|
|||
}
|
||||
|
||||
.logo-title {
|
||||
color var(--first-text-color)
|
||||
color var(--text-color-1)
|
||||
font-weight bold
|
||||
font-size $logo-title-font-size
|
||||
line-height 1
|
||||
|
|
@ -109,7 +114,7 @@ $logo-image-box-width = 46px
|
|||
position relative
|
||||
float left
|
||||
margin-left 2rem
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
font-size 1rem
|
||||
cursor pointer
|
||||
|
||||
|
|
@ -143,7 +148,7 @@ $logo-image-box-width = 46px
|
|||
font-size $pc-search-icon-font-size
|
||||
|
||||
i {
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -162,12 +167,12 @@ $logo-image-box-width = 46px
|
|||
width 20px
|
||||
height 20px
|
||||
margin-left 12px
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
font-size 18px
|
||||
cursor pointer
|
||||
|
||||
i {
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
|
|
@ -187,7 +192,7 @@ $logo-image-box-width = 46px
|
|||
position relative
|
||||
width 18px
|
||||
height $menu-bar-line-height
|
||||
background var(--default-text-color)
|
||||
background var(--text-color-3)
|
||||
|
||||
.header-drawer-show & {
|
||||
background transparent
|
||||
|
|
@ -200,7 +205,7 @@ $logo-image-box-width = 46px
|
|||
left 0
|
||||
width 100%
|
||||
height $menu-bar-line-height
|
||||
background var(--default-text-color)
|
||||
background var(--text-color-3)
|
||||
content ''
|
||||
transition-t("transform", "0", "0.38", "ease")
|
||||
}
|
||||
|
|
@ -236,7 +241,7 @@ $logo-image-box-width = 46px
|
|||
z-index $z-index-2
|
||||
width 100%
|
||||
padding $header-height 0 20px 0
|
||||
background var(--background-color)
|
||||
background var(--background-color-1)
|
||||
transform scaleY(0)
|
||||
transform-origin top
|
||||
transition-t("transform", "0", "0.38", "ease")
|
||||
|
|
@ -258,18 +263,18 @@ $logo-image-box-width = 46px
|
|||
|
||||
a {
|
||||
padding 6px 20px
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
border-radius 20px
|
||||
|
||||
&:hover {
|
||||
color var(--second-text-color)
|
||||
border 1px solid var(--default-text-color)
|
||||
color var(--text-color-2)
|
||||
border 1px solid var(--text-color-3)
|
||||
}
|
||||
|
||||
|
||||
&.active {
|
||||
color var(--second-text-color)
|
||||
border 1px solid var(--default-text-color)
|
||||
color var(--text-color-2)
|
||||
border 1px solid var(--text-color-3)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ $search-header-height = 3rem
|
|||
width 70%
|
||||
height 80%
|
||||
margin auto
|
||||
background var(--background-color)
|
||||
background var(--background-color-1)
|
||||
border-radius 0.4rem
|
||||
transform scale(0)
|
||||
transition-t("transform", "0", "0.3", "ease")
|
||||
|
|
@ -46,13 +46,13 @@ $search-header-height = 3rem
|
|||
align-items center
|
||||
height $search-header-height
|
||||
padding 0 1rem
|
||||
background var(--fourth-text-color)
|
||||
background var(--text-color-6)
|
||||
border-top-left-radius 0.2rem
|
||||
border-top-right-radius 0.2rem
|
||||
|
||||
.search-input-field-pre {
|
||||
margin-right 0.2rem
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
cursor pointer
|
||||
}
|
||||
|
||||
|
|
@ -62,7 +62,7 @@ $search-header-height = 3rem
|
|||
|
||||
.search-input {
|
||||
width 100%
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
font-size 1.2rem
|
||||
background transparent
|
||||
border 0
|
||||
|
|
@ -73,7 +73,7 @@ $search-header-height = 3rem
|
|||
}
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color var(--third-text-color)
|
||||
color var(--text-color-4)
|
||||
font-size 1rem
|
||||
}
|
||||
}
|
||||
|
|
@ -81,12 +81,12 @@ $search-header-height = 3rem
|
|||
|
||||
|
||||
.close-popup-btn {
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
font-size $icon-size
|
||||
cursor pointer
|
||||
|
||||
&:hover {
|
||||
color var(--first-text-color)
|
||||
color var(--text-color-1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -130,7 +130,7 @@ $search-header-height = 3rem
|
|||
left 0
|
||||
width 0.4rem
|
||||
height 0.4rem
|
||||
background var(--default-text-color)
|
||||
background var(--text-color-3)
|
||||
border-radius 50%
|
||||
transform translateY(-50%)
|
||||
content ''
|
||||
|
|
@ -147,7 +147,7 @@ $search-header-height = 3rem
|
|||
|
||||
a {
|
||||
&:hover {
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -162,7 +162,7 @@ $search-header-height = 3rem
|
|||
|
||||
#no-result {
|
||||
margin auto
|
||||
color var(--third-text-color)
|
||||
color var(--text-color-4)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ $friend-link-item-border-radius = 6px
|
|||
keep-container(false, 0, 0, 2rem, 2rem)
|
||||
|
||||
.page-template-content {
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
|
||||
h1
|
||||
h2
|
||||
|
|
@ -87,9 +87,9 @@ $friend-link-item-border-radius = 6px
|
|||
justify-content center
|
||||
width $friend-link-item-height - $friend-link-item-interval
|
||||
height 100%
|
||||
color var(--second-text-color)
|
||||
color var(--text-color-2)
|
||||
font-size 2rem
|
||||
background var(--second-background-color)
|
||||
background var(--background-color-2)
|
||||
|
||||
|
||||
+keep-tablet() {
|
||||
|
|
@ -123,7 +123,7 @@ $friend-link-item-border-radius = 6px
|
|||
.name {
|
||||
width 100%
|
||||
height 60%
|
||||
color var(--second-text-color)
|
||||
color var(--text-color-2)
|
||||
font-size 1.28rem
|
||||
|
||||
+keep-tablet() {
|
||||
|
|
@ -134,7 +134,7 @@ $friend-link-item-border-radius = 6px
|
|||
.description {
|
||||
width 100%
|
||||
height 40%
|
||||
color var(--third-text-color)
|
||||
color var(--text-color-4)
|
||||
font-size 1rem
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,32 +2,34 @@ $li-border-radius = 0.4rem
|
|||
$li-margin-bottom = 0.8rem
|
||||
|
||||
.post-tools-container {
|
||||
position relative
|
||||
box-sizing border-box
|
||||
padding-top 2rem
|
||||
|
||||
.tools-list {
|
||||
|
||||
li {
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
position relative
|
||||
box-sizing border-box
|
||||
width $post-tool-button-width
|
||||
height $post-tool-button-width
|
||||
margin-bottom $li-margin-bottom
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
font-size 1.2rem
|
||||
background var(--background-color)
|
||||
background var(--background-color-1)
|
||||
border-radius 50%
|
||||
cursor pointer
|
||||
|
||||
i {
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color var(--background-color)
|
||||
color var(--background-color-1)
|
||||
background var(--primary-color)
|
||||
|
||||
i {
|
||||
color var(--background-color)
|
||||
color var(--background-color-1)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -39,13 +41,37 @@ $li-margin-bottom = 0.8rem
|
|||
|
||||
hover-style(true, 1.06, 1.06)
|
||||
|
||||
&.page-aside-toggle {
|
||||
&.toggle-show-toc {
|
||||
display none
|
||||
|
||||
+keep-tablet() {
|
||||
display none !important
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.go-to-comments {
|
||||
.post-comments-count {
|
||||
position absolute
|
||||
top 0
|
||||
right -1rem
|
||||
display none
|
||||
align-items center
|
||||
justify-content center
|
||||
box-sizing border-box
|
||||
min-width 1.1rem
|
||||
height 1.1rem
|
||||
padding 0 0.2rem
|
||||
color var(--badge-color)
|
||||
font-size 12px
|
||||
background var(--badge-background-color)
|
||||
border-radius 0.4rem
|
||||
|
||||
+keep-tablet() {
|
||||
display none !important
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
top 0.4rem
|
||||
right 0.3rem
|
||||
z-index $z-index-8
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
font-size 1.1rem
|
||||
visibility hidden
|
||||
|
||||
|
|
|
|||
|
|
@ -10,25 +10,25 @@ $tools-item-border-radius = 0.1rem
|
|||
width $tools-item-width
|
||||
height $tools-item-width
|
||||
margin-bottom 0.2rem
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
font-size $tools-item-font-size
|
||||
background var(--background-color)
|
||||
background var(--background-color-1)
|
||||
border-right none
|
||||
border-radius $tools-item-border-radius
|
||||
box-shadow 0.1rem 0.1rem 0.2rem var(--shadow-color)
|
||||
cursor pointer
|
||||
|
||||
i {
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color var(--background-color)
|
||||
color var(--background-color-1)
|
||||
background var(--primary-color)
|
||||
box-shadow 0.2rem 0.2rem 0.4rem var(--shadow-color)
|
||||
|
||||
i {
|
||||
color var(--background-color)
|
||||
color var(--background-color-1)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -47,7 +47,7 @@ $tools-item-border-radius = 0.1rem
|
|||
border-radius $tools-item-border-radius
|
||||
|
||||
&:hover {
|
||||
color var(--background-color)
|
||||
color var(--background-color-1)
|
||||
background var(--primary-color)
|
||||
box-shadow 0.2rem 0.2rem 0.4rem var(--shadow-color)
|
||||
}
|
||||
|
|
@ -61,13 +61,6 @@ $tools-item-border-radius = 0.1rem
|
|||
opacity 0
|
||||
transition-t("transform, opacity", "0, 0", "0.2, 0.2", "linear, linear")
|
||||
|
||||
.tool-expand-width {
|
||||
+keep-tablet() {
|
||||
display none
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.show {
|
||||
transform translateX(0)
|
||||
opacity 1
|
||||
|
|
|
|||
|
|
@ -1,13 +1,25 @@
|
|||
.post-toc-wrap {
|
||||
position relative
|
||||
box-sizing border-box
|
||||
width 100%
|
||||
height 100%
|
||||
overflow-y auto
|
||||
font-size 0.92rem
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background var(--toc-scrollbar-color)
|
||||
border-radius 0.3rem
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background transparent
|
||||
}
|
||||
|
||||
.post-toc {
|
||||
|
||||
ol {
|
||||
margin 0
|
||||
padding 0 2px 12px 10px
|
||||
padding 0 0.1rem 0.8rem 0.6rem
|
||||
text-align left
|
||||
list-style none
|
||||
|
||||
|
|
@ -27,6 +39,7 @@
|
|||
|
||||
|
||||
.nav-item {
|
||||
margin-bottom 0.2rem
|
||||
overflow hidden
|
||||
line-height 1.8
|
||||
white-space nowrap
|
||||
|
|
@ -36,7 +49,7 @@
|
|||
|
||||
.nav {
|
||||
.nav-child {
|
||||
display hexo-config('toc.expand_all') ? block : none
|
||||
display hexo-config('toc.expand_all') ? block:none
|
||||
}
|
||||
|
||||
.active > .nav-child {
|
||||
|
|
@ -54,7 +67,7 @@
|
|||
|
||||
.nav-number
|
||||
.nav-text {
|
||||
color var(--default-text-color)
|
||||
color var(--toc-text-color)
|
||||
}
|
||||
|
||||
.active > a {
|
||||
|
|
|
|||
|
|
@ -1,19 +1,60 @@
|
|||
$avatarWidth = 46px
|
||||
$arrow-icon-width = 16px
|
||||
$post-nav-max-width = 220px
|
||||
$avatarWidth = 3rem
|
||||
$arrow-icon-width = 1rem
|
||||
$post-nav-max-width = 14rem
|
||||
$article-title-font-size = 1.6rem
|
||||
$toc-container-width = 15rem
|
||||
|
||||
.article-content-container {
|
||||
|
||||
.post-page-container {
|
||||
position relative
|
||||
display flex
|
||||
justify-content space-between
|
||||
box-sizing border-box
|
||||
width 100%
|
||||
height 100%
|
||||
|
||||
|
||||
&.show-toc {
|
||||
.toc-content-container {
|
||||
display block
|
||||
}
|
||||
|
||||
.article-content-container {
|
||||
width 'calc(100% - %s)' % $toc-container-width
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+keep-tablet() {
|
||||
.toc-content-container {
|
||||
display none !important
|
||||
}
|
||||
|
||||
.article-content-container {
|
||||
width 100% !important
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.article-content-container {
|
||||
position relative
|
||||
box-sizing border-box
|
||||
width 100%
|
||||
height 100%
|
||||
keep-container(false, 0, 0, 2rem, 2rem)
|
||||
|
||||
+keep-mobile() {
|
||||
padding 1.2rem 0.2rem
|
||||
box-shadow none
|
||||
|
||||
&:hover {
|
||||
box-shadow none
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.article-title {
|
||||
color var(--second-text-color)
|
||||
color var(--text-color-2)
|
||||
font-weight 600
|
||||
font-size $article-title-font-size
|
||||
|
||||
|
|
@ -41,7 +82,7 @@ $article-title-font-size = 1.6rem
|
|||
box-sizing border-box
|
||||
width $avatarWidth
|
||||
height $avatarWidth
|
||||
padding 1px
|
||||
padding 0.1rem
|
||||
border 1px solid var(--border-color)
|
||||
border-radius 50%
|
||||
|
||||
|
|
@ -61,8 +102,8 @@ $article-title-font-size = 1.6rem
|
|||
box-sizing border-box
|
||||
width 100%
|
||||
height 100%
|
||||
margin-left 10px
|
||||
padding 2px 0
|
||||
margin-left 0.8rem
|
||||
padding 0.2rem 0
|
||||
|
||||
.author {
|
||||
display flex
|
||||
|
|
@ -71,17 +112,17 @@ $article-title-font-size = 1.6rem
|
|||
font-size 1.18rem
|
||||
|
||||
.name {
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
}
|
||||
|
||||
.author-label {
|
||||
margin-left 10px
|
||||
padding 0 5px
|
||||
margin-left 0.8rem
|
||||
padding 0 0.4rem
|
||||
color #fff
|
||||
font-weight 500
|
||||
font-size 0.8rem
|
||||
background var(--selection-color)
|
||||
border-radius 5px
|
||||
border-radius 0.4rem
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -90,7 +131,7 @@ $article-title-font-size = 1.6rem
|
|||
|
||||
.article-header
|
||||
.article-header-meta-info {
|
||||
margin-top 16px
|
||||
margin-top 1rem
|
||||
+keep-tablet() {
|
||||
transform scale(0.9)
|
||||
transform-origin left top
|
||||
|
|
@ -100,10 +141,13 @@ $article-title-font-size = 1.6rem
|
|||
|
||||
.article-content {
|
||||
margin-top $component-spacing-value
|
||||
padding-bottom 10px
|
||||
color var(--default-text-color)
|
||||
padding-bottom 2rem
|
||||
color var(--text-color-3)
|
||||
word-wrap break-word
|
||||
border-bottom 1px solid var(--border-color)
|
||||
|
||||
if (hexo-config('copyright_info.enable') == true) {
|
||||
border-bottom 0.1rem dashed var(--border-color)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -128,6 +172,7 @@ $article-title-font-size = 1.6rem
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.post-copyright-info {
|
||||
width 100%
|
||||
margin-top $component-spacing-value
|
||||
|
|
@ -139,7 +184,7 @@ $article-title-font-size = 1.6rem
|
|||
|
||||
|
||||
.article-nav {
|
||||
height 40px
|
||||
height 2.8rem
|
||||
margin-top $component-spacing-value
|
||||
|
||||
.article-prev
|
||||
|
|
@ -148,7 +193,7 @@ $article-title-font-size = 1.6rem
|
|||
max-width $post-nav-max-width
|
||||
height 100%
|
||||
|
||||
keep-container(true, 1.03, 1.03, 10px, 0)
|
||||
keep-container(true, 1.03, 1.03, 0.8rem, 0)
|
||||
|
||||
a {
|
||||
position relative
|
||||
|
|
@ -214,5 +259,23 @@ $article-title-font-size = 1.6rem
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.toc-content-container {
|
||||
position sticky
|
||||
top $header-height + $component-spacing-value
|
||||
display none
|
||||
box-sizing border-box
|
||||
width $toc-container-width
|
||||
max-height 'calc(100vh - %s)' % ($header-height + $component-spacing-value)
|
||||
padding 2rem 0 2rem 1.4rem
|
||||
transition-t("top, display, max-height", "0, 0, 0", "0.2, 0.1, 0.2", "ease, ease, ease")
|
||||
|
||||
.header-shrink & {
|
||||
top $header-shrink-height + $component-spacing-value
|
||||
max-height 'calc(100vh - %s)' % ($header-shrink-height + $component-spacing-value)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,14 +7,14 @@ $category-name-font-size = 1.6rem
|
|||
.category-name {
|
||||
margin-bottom $component-spacing-value
|
||||
padding-bottom 20px
|
||||
color var(--second-text-color)
|
||||
color var(--text-color-2)
|
||||
|
||||
font-weight 600
|
||||
font-size $category-name-font-size
|
||||
border-bottom 1px solid var(--border-color)
|
||||
|
||||
i {
|
||||
color var(--second-text-color)
|
||||
color var(--text-color-2)
|
||||
}
|
||||
|
||||
+keep-tablet() {
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
|
||||
span.all-category-list-count {
|
||||
float right
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
|
||||
|
||||
&::before {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.home-content-container {
|
||||
background var(--background-color)
|
||||
background var(--background-color-1)
|
||||
|
||||
|
||||
.home-article-list {
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
position absolute
|
||||
top 10px
|
||||
right 12px
|
||||
color var(--third-text-color)
|
||||
color var(--text-color-4)
|
||||
font-size 1.2rem
|
||||
transform rotate(45deg)
|
||||
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
.home-article-title {
|
||||
position relative
|
||||
margin 0
|
||||
color var(--second-text-color)
|
||||
color var(--text-color-2)
|
||||
font-weight 600
|
||||
font-size 1.4rem
|
||||
line-height 1.5
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
|
||||
.home-article-content {
|
||||
margin 20px 0
|
||||
color var(--default-text-color)
|
||||
color var(--text-color-3)
|
||||
text-align justify
|
||||
word-wrap break-word
|
||||
}
|
||||
|
|
@ -56,10 +56,9 @@
|
|||
display flex
|
||||
align-items center
|
||||
justify-content space-between
|
||||
color var(--third-text-color)
|
||||
color var(--text-color-4)
|
||||
font-size 0.92rem
|
||||
|
||||
|
||||
.home-article-meta-info {
|
||||
letter-spacing 0.5px
|
||||
|
||||
|
|
@ -90,6 +89,12 @@
|
|||
}
|
||||
|
||||
|
||||
.read-more {
|
||||
display flex
|
||||
align-items center
|
||||
}
|
||||
|
||||
|
||||
hr {
|
||||
flex 1
|
||||
height 1px
|
||||
|
|
@ -98,8 +103,9 @@
|
|||
border none
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
color var(--third-text-color)
|
||||
color var(--text-color-4)
|
||||
|
||||
&:hover {
|
||||
color var(--primary-color)
|
||||
|
|
|
|||
|
|
@ -1,14 +1,9 @@
|
|||
$temp-width = hexo-config('style.left_side_width')
|
||||
$page-aside-width = $temp-width ? convert($temp-width) : 260px
|
||||
|
||||
.page-container {
|
||||
position relative
|
||||
box-sizing border-box
|
||||
width 100%
|
||||
height auto
|
||||
background var(--background-color)
|
||||
transition-t("padding-left", "0", "0.3", "ease-out")
|
||||
|
||||
background var(--background-color-1)
|
||||
|
||||
+keep-tablet() {
|
||||
padding-left 0 !important
|
||||
|
|
@ -17,9 +12,10 @@ $page-aside-width = $temp-width ? convert($temp-width) : 260px
|
|||
|
||||
.page-main-content {
|
||||
position relative
|
||||
box-sizing border-box
|
||||
padding-top $header-height
|
||||
|
||||
&.home {
|
||||
&.is-home {
|
||||
.transparent-1 {
|
||||
background var(--header-transparent-background-1)
|
||||
}
|
||||
|
|
@ -61,7 +57,7 @@ $page-aside-width = $temp-width ? convert($temp-width) : 260px
|
|||
box-sizing border-box
|
||||
width 100%
|
||||
height $header-height
|
||||
transition-t("transform, padding-left, height", "0, 0, 0", "0.3, 0.2, 0.2", "ease-out, linear, ease")
|
||||
transition-t("transform, height", "0, 0", "0.3, 0.2", "ease-out, ease")
|
||||
|
||||
&.hide {
|
||||
transform translateY(-105%)
|
||||
|
|
@ -113,6 +109,11 @@ $page-aside-width = $temp-width ? convert($temp-width) : 260px
|
|||
width $main-content-width
|
||||
max-width $content-max-width
|
||||
height 100%
|
||||
transition-t("max-width, width", "0, 0", "0.1, 0.1", "ease, ease")
|
||||
|
||||
.has-toc & {
|
||||
max-width $has-toc-content-max-width
|
||||
}
|
||||
|
||||
+keep-tablet() {
|
||||
width $main-content-width-tablet
|
||||
|
|
@ -131,35 +132,12 @@ $page-aside-width = $temp-width ? convert($temp-width) : 260px
|
|||
}
|
||||
|
||||
|
||||
.page-aside {
|
||||
position fixed
|
||||
top 0
|
||||
bottom 0
|
||||
left - $page-aside-width
|
||||
z-index $z-index-6
|
||||
box-sizing border-box
|
||||
width $page-aside-width
|
||||
height 100%
|
||||
padding 20px
|
||||
overflow-y auto
|
||||
background var(--background-color)
|
||||
|
||||
hover-style(false, 0, 0)
|
||||
|
||||
transition-t("left, transform", "0, 0", "0.3, 0.2", "ease-out, linear")
|
||||
|
||||
+keep-tablet() {
|
||||
left 0 !important
|
||||
display none !important
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.post-tools {
|
||||
position fixed
|
||||
top $header-height + $component-spacing-value
|
||||
right $component-spacing-value
|
||||
transition-t("top", "0", "0.2", "ease")
|
||||
left 'calc((100vw - %s / 2) - 5rem)' % $content-max-width
|
||||
opacity 0
|
||||
transition-t("top, transform, opacity, left", "0, 0, 0.2, 0", "0.2, 0.2, 0.2, 0.2", "ease, ease, ease, ease")
|
||||
|
||||
.header-shrink & {
|
||||
top $header-shrink-height + $component-spacing-value
|
||||
|
|
@ -167,25 +145,17 @@ $page-aside-width = $temp-width ? convert($temp-width) : 260px
|
|||
+keep-tablet() {
|
||||
top $header-shrink-height * 0.9 + $component-spacing-value
|
||||
}
|
||||
|
||||
+keep-mobile() {
|
||||
top $header-shrink-height * 0.8 + $component-spacing-value
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+keep-tablet() {
|
||||
top $header-height * 0.9 + $component-spacing-value
|
||||
right 10px
|
||||
transform scale(0.82)
|
||||
transform-origin right top
|
||||
}
|
||||
|
||||
|
||||
+keep-mobile() {
|
||||
top $header-height * 0.8 + $component-spacing-value
|
||||
right 5px
|
||||
transform scale(0.72)
|
||||
display none
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,14 +7,14 @@ $tag-name-font-size = 1.6rem
|
|||
.tag-name {
|
||||
margin-bottom $component-spacing-value
|
||||
padding-bottom 20px
|
||||
color var(--second-text-color)
|
||||
color var(--text-color-2)
|
||||
|
||||
font-weight 600
|
||||
font-size $tag-name-font-size
|
||||
border-bottom 1px solid var(--border-color)
|
||||
|
||||
i {
|
||||
color var(--second-text-color)
|
||||
color var(--text-color-2)
|
||||
}
|
||||
|
||||
+keep-tablet() {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import "common/basic.styl"
|
||||
@import "common/markdown.styl"
|
||||
@import "common/code-block/highlight.styl"
|
||||
@import "common/code-block/code-block-tools.styl"
|
||||
@import "common/code-block/code-block.styl"
|
||||
@import "common/code-block/code-theme.styl"
|
||||
@import "layout/page.styl"
|
||||
@import "layout/_partial/local-search.styl"
|
||||
|
|
|
|||
|
|
@ -7,9 +7,11 @@ KEEP.initCodeBlockTools = () => {
|
|||
wrapper.appendChild(this)
|
||||
}
|
||||
|
||||
const { style: codeCopyStyle } = KEEP.theme_config?.code_copy
|
||||
const { style: codeBlockStyle } = KEEP.theme_config?.code_block_tools
|
||||
const isMac = (codeBlockStyle || codeCopyStyle || 'default') === 'mac'
|
||||
const { style: codeCopyStyle } = KEEP.theme_config?.code_copy || {}
|
||||
const { style: codeBlockStyle } = KEEP.theme_config?.code_block || {}
|
||||
const { style: codeBlockToolsStyle } = KEEP.theme_config?.code_block?.tools || {}
|
||||
|
||||
const isMac = (codeCopyStyle || codeBlockStyle || codeBlockToolsStyle || 'default') === 'mac'
|
||||
const foldedIconClassName = isMac ? 'fas fa-chevron-left' : 'fas fa-chevron-right'
|
||||
const {
|
||||
copy: copyLang,
|
||||
|
|
@ -17,7 +19,7 @@ KEEP.initCodeBlockTools = () => {
|
|||
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}" data-offset-y="-2px"><i class="fas fa-chevron-down"></i></span>`
|
||||
|
||||
document.querySelectorAll('figure.highlight').forEach((element) => {
|
||||
let codeLang = element.classList.length ? element.classList[1].toUpperCase() : ''
|
||||
|
|
@ -26,6 +28,9 @@ KEEP.initCodeBlockTools = () => {
|
|||
}
|
||||
const highlightContainer = document.createElement('div')
|
||||
highlightContainer.classList.add('highlight-container')
|
||||
if (isMac) {
|
||||
highlightContainer.classList.add('mac')
|
||||
}
|
||||
element.wrap(highlightContainer)
|
||||
|
||||
const codeLangDom = `${codeLang ? '<span class="code-lang">' + codeLang + '</span>' : ''}`
|
||||
|
|
@ -34,7 +39,7 @@ KEEP.initCodeBlockTools = () => {
|
|||
'afterbegin',
|
||||
`<div class="code-tools-box">
|
||||
${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}" data-offset-y="-2px"><i class="fas fa-copy"></i></span>
|
||||
</div>`
|
||||
)
|
||||
const codeToolsBox = element.parentNode.querySelector('.code-tools-box')
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
/* global KEEP */
|
||||
|
||||
function initLeftSideToggle() {
|
||||
KEEP.utils.leftSideToggle = {
|
||||
toggleBar: document.querySelector('.page-aside-toggle'),
|
||||
pageTopDom: document.querySelector('.page-main-content-top'),
|
||||
containerDom: document.querySelector('.page-container'),
|
||||
leftAsideDom: document.querySelector('.page-aside'),
|
||||
toggleBarIcon: document.querySelector('.page-aside-toggle i'),
|
||||
|
||||
isOpenPageAside: false,
|
||||
|
||||
initToggleBarButton() {
|
||||
this.toggleBar &&
|
||||
this.toggleBar.addEventListener('click', () => {
|
||||
this.isOpenPageAside = !this.isOpenPageAside
|
||||
KEEP.styleStatus.isOpenPageAside = this.isOpenPageAside
|
||||
KEEP.setStyleStatus()
|
||||
this.changePageLayoutWhenOpenToggle(this.isOpenPageAside)
|
||||
})
|
||||
},
|
||||
|
||||
changePageLayoutWhenOpenToggle(isOpen) {
|
||||
this.toggleBarIcon &&
|
||||
(this.toggleBarIcon.className = isOpen ? 'fas fa-outdent' : 'fas fa-indent')
|
||||
const pageAsideWidth = KEEP.theme_config.style.left_side_width || '260px'
|
||||
this.containerDom.style.paddingLeft = isOpen ? pageAsideWidth : '0'
|
||||
this.pageTopDom.style.paddingLeft = isOpen ? pageAsideWidth : '0'
|
||||
this.leftAsideDom.style.left = isOpen ? '0' : `-${pageAsideWidth}`
|
||||
},
|
||||
|
||||
pageAsideHandleOfTOC(isOpen) {
|
||||
this.toggleBar.style.display = 'flex'
|
||||
this.isOpenPageAside = isOpen
|
||||
this.changePageLayoutWhenOpenToggle(isOpen)
|
||||
}
|
||||
}
|
||||
KEEP.utils.leftSideToggle.initToggleBarButton()
|
||||
}
|
||||
|
||||
if (KEEP.theme_config.pjax.enable === true && KEEP.utils) {
|
||||
initLeftSideToggle()
|
||||
} else {
|
||||
window.addEventListener('DOMContentLoaded', initLeftSideToggle)
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
/* global KEEP */
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
const { version, local_search, code_block_tools, code_copy, lazyload } = KEEP.theme_config
|
||||
const { version, local_search, code_block, code_copy, lazyload } = KEEP.theme_config
|
||||
|
||||
KEEP.themeInfo = {
|
||||
theme: `Keep v${version}`,
|
||||
|
|
@ -15,7 +15,7 @@ window.addEventListener('DOMContentLoaded', () => {
|
|||
isExpandPageWidth: false,
|
||||
isDark: false,
|
||||
fontSizeLevel: 0,
|
||||
isOpenPageAside: true
|
||||
isShowToc: true
|
||||
}
|
||||
|
||||
// print theme base info
|
||||
|
|
@ -56,7 +56,11 @@ window.addEventListener('DOMContentLoaded', () => {
|
|||
KEEP.initLocalSearch()
|
||||
}
|
||||
|
||||
if (code_block_tools?.enable === true || code_copy?.enable === true) {
|
||||
if (
|
||||
code_block?.tools?.enable === true ||
|
||||
code_block?.enable === true ||
|
||||
code_copy?.enable === true
|
||||
) {
|
||||
KEEP.initCodeBlockTools()
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,127 @@
|
|||
/* global KEEP */
|
||||
|
||||
function initToggleShowToc() {
|
||||
KEEP.utils.postHelper = {
|
||||
postPageContainerDom: document.querySelector('.post-page-container'),
|
||||
toggleShowTocBtnDom: document.querySelector('.toggle-show-toc'),
|
||||
toggleShowTocIcon: document.querySelector('.toggle-show-toc i'),
|
||||
mainContentDom: document.querySelector('.main-content'),
|
||||
postToolsDom: document.querySelector('.post-tools'),
|
||||
goToCommentsDom: document.querySelector('.post-tools .go-to-comments'),
|
||||
|
||||
isShowToc: false,
|
||||
|
||||
initToggleToc() {
|
||||
this.toggleShowTocBtnDom &&
|
||||
this.toggleShowTocBtnDom.addEventListener('click', () => {
|
||||
this.isShowToc = !this.isShowToc
|
||||
KEEP.styleStatus.isShowToc = this.isShowToc
|
||||
KEEP.setStyleStatus()
|
||||
this.handleToggleToc(this.isShowToc)
|
||||
})
|
||||
},
|
||||
|
||||
handleToggleToc(isOpen) {
|
||||
if (isOpen) {
|
||||
this.postPageContainerDom.classList.add('show-toc')
|
||||
document.body.classList.add('has-toc')
|
||||
} else {
|
||||
this.postPageContainerDom.classList.remove('show-toc')
|
||||
document.body.classList.remove('has-toc')
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
this.setPostToolsLeft()
|
||||
}, 120)
|
||||
},
|
||||
|
||||
hasToc(isOpen) {
|
||||
this.toggleShowTocBtnDom.style.display = 'flex'
|
||||
this.isShowToc = isOpen
|
||||
this.handleToggleToc(isOpen)
|
||||
},
|
||||
|
||||
setPostToolsLeft(mcw) {
|
||||
const mainContainerWidth = mcw
|
||||
? mcw
|
||||
: this.mainContentDom.getBoundingClientRect().width.toFixed(0)
|
||||
let offsetX = 5
|
||||
|
||||
if (window.innerWidth <= 800) {
|
||||
offsetX = 3
|
||||
}
|
||||
|
||||
this.postToolsDom.style.opacity = `1`
|
||||
this.postToolsDom.style.left = `calc((100vw - ${mainContainerWidth}px) / 2 - ${offsetX}rem)`
|
||||
},
|
||||
|
||||
initSetPostToolsLeft() {
|
||||
setTimeout(() => {
|
||||
this.setPostToolsLeft()
|
||||
}, 150)
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
this.setPostToolsLeft()
|
||||
})
|
||||
},
|
||||
|
||||
// go comment anchor
|
||||
goToComments() {
|
||||
const commentsAnchor = document.querySelector('#comments-anchor')
|
||||
if (this.goToCommentsDom && commentsAnchor) {
|
||||
this.goToCommentsDom.addEventListener('click', (event) => {
|
||||
event.preventDefault()
|
||||
let winScrollY = window.scrollY
|
||||
winScrollY = winScrollY === 0 ? -20 : winScrollY
|
||||
const offset = commentsAnchor.getBoundingClientRect().top + winScrollY
|
||||
window.anime({
|
||||
targets: document.scrollingElement,
|
||||
duration: 300,
|
||||
easing: 'linear',
|
||||
scrollTop: offset,
|
||||
complete: () => {
|
||||
setTimeout(() => {
|
||||
KEEP.utils.pageTop_dom.classList.add('hide')
|
||||
}, 150)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// watch comments count
|
||||
watchPostCommentsCount() {
|
||||
const commentsCountDom = this.postToolsDom.querySelector('.post-comments-count')
|
||||
if (!commentsCountDom) return
|
||||
const config = { attributes: true, childList: true }
|
||||
|
||||
const callback = function (mutationsList) {
|
||||
mutationsList.forEach((item) => {
|
||||
if (item.type === 'childList') {
|
||||
const count = Number(item.target.innerHTML)
|
||||
if (count > 0) {
|
||||
commentsCountDom.style.display = 'flex'
|
||||
if (count > 99) {
|
||||
commentsCountDom.innerHTML = '99+'
|
||||
observer.disconnect()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const observer = new MutationObserver(callback)
|
||||
observer.observe(commentsCountDom, config)
|
||||
}
|
||||
}
|
||||
KEEP.utils.postHelper.initToggleToc()
|
||||
KEEP.utils.postHelper.initSetPostToolsLeft()
|
||||
KEEP.utils.postHelper.goToComments()
|
||||
KEEP.utils.postHelper.watchPostCommentsCount()
|
||||
}
|
||||
|
||||
if (KEEP.theme_config.pjax.enable === true && KEEP.utils) {
|
||||
initToggleShowToc()
|
||||
} else {
|
||||
window.addEventListener('DOMContentLoaded', initToggleShowToc)
|
||||
}
|
||||
|
|
@ -1,9 +1,10 @@
|
|||
/* global KEEP */
|
||||
|
||||
function initTOC() {
|
||||
KEEP.utils.navItems = document.querySelectorAll('.post-toc-wrap .post-toc li')
|
||||
const postPageContainerDom = document.querySelector('.post-page-container')
|
||||
const tocContentContainer = document.querySelector('.toc-content-container')
|
||||
|
||||
if (KEEP.utils.navItems.length > 0) {
|
||||
if (KEEP.utils.hasToc) {
|
||||
KEEP.utils = {
|
||||
...KEEP.utils,
|
||||
|
||||
|
|
@ -28,16 +29,19 @@ function initTOC() {
|
|||
)
|
||||
element.addEventListener('click', (event) => {
|
||||
event.preventDefault()
|
||||
const offset = target.getBoundingClientRect().top + window.scrollY
|
||||
let winScrollY = window.scrollY
|
||||
winScrollY = winScrollY === 0 ? -20 : winScrollY
|
||||
const offset = target.getBoundingClientRect().top + winScrollY
|
||||
window.anime({
|
||||
targets: document.scrollingElement,
|
||||
duration: 500,
|
||||
easing: 'linear',
|
||||
scrollTop: offset - 10,
|
||||
complete: function () {
|
||||
complete: () => {
|
||||
history.pushState(null, document.title, element.href)
|
||||
setTimeout(() => {
|
||||
KEEP.utils.pageTop_dom.classList.add('hide')
|
||||
}, 100)
|
||||
}, 150)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
|
@ -59,7 +63,7 @@ function initTOC() {
|
|||
if (parent.matches('li')) parent.classList.add('active')
|
||||
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 than viewport.
|
||||
const tocElement = document.querySelector('.post-toc-wrap')
|
||||
window.anime({
|
||||
targets: tocElement,
|
||||
|
|
@ -73,34 +77,33 @@ function initTOC() {
|
|||
})
|
||||
},
|
||||
|
||||
showPageAsideWhenHasTOC() {
|
||||
handleShowWhenHasToc() {
|
||||
const openHandle = () => {
|
||||
const styleStatus = KEEP.getStyleStatus()
|
||||
const key = 'isOpenPageAside'
|
||||
const key = 'isShowToc'
|
||||
if (styleStatus && styleStatus.hasOwnProperty(key)) {
|
||||
KEEP.utils.leftSideToggle.pageAsideHandleOfTOC(styleStatus[key])
|
||||
KEEP.utils.postHelper.hasToc(styleStatus[key])
|
||||
} else {
|
||||
KEEP.utils.leftSideToggle.pageAsideHandleOfTOC(true)
|
||||
KEEP.utils.postHelper.hasToc(true)
|
||||
}
|
||||
}
|
||||
|
||||
const initOpenKey = 'init_open'
|
||||
|
||||
if (KEEP.theme_config.toc.hasOwnProperty(initOpenKey)) {
|
||||
KEEP.theme_config.toc[initOpenKey]
|
||||
? openHandle()
|
||||
: KEEP.utils.leftSideToggle.pageAsideHandleOfTOC(false)
|
||||
KEEP.theme_config.toc[initOpenKey] ? openHandle() : KEEP.utils.postHelper.hasToc(false)
|
||||
} else {
|
||||
openHandle()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
KEEP.utils.showPageAsideWhenHasTOC()
|
||||
KEEP.utils.handleShowWhenHasToc()
|
||||
KEEP.utils.registerSidebarTOC()
|
||||
} else {
|
||||
const pageAsideDom = document.querySelector('.page-aside')
|
||||
pageAsideDom && KEEP.utils.pageContainer_dom.removeChild(pageAsideDom)
|
||||
if (tocContentContainer && postPageContainerDom) {
|
||||
postPageContainerDom.removeChild(tocContentContainer)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ KEEP.initUtils = () => {
|
|||
isHasScrollProgressBar: false,
|
||||
isHasScrollPercent: false,
|
||||
isHeaderTransparent: false,
|
||||
hasToc: false,
|
||||
|
||||
initData() {
|
||||
const { scroll, first_screen } = KEEP.theme_config.style
|
||||
|
|
@ -76,9 +77,7 @@ KEEP.initUtils = () => {
|
|||
registerWindowScroll() {
|
||||
window.addEventListener('scroll', () => {
|
||||
// style handle when scroll
|
||||
if (this.isHasScrollPercent || this.isHasScrollProgressBar) {
|
||||
this.styleHandleWhenScroll()
|
||||
}
|
||||
|
||||
// TOC scroll handle
|
||||
if (KEEP.theme_config.toc.enable && KEEP.utils.hasOwnProperty('findActiveIndexByTOC')) {
|
||||
|
|
@ -131,77 +130,22 @@ KEEP.initUtils = () => {
|
|||
})
|
||||
},
|
||||
|
||||
// toggle content area width
|
||||
contentAreaWidthAdjust() {
|
||||
const toolExpandDom = document.querySelector('.tool-expand-width')
|
||||
const headerContentDom = document.querySelector('.header-content')
|
||||
const mainContentDom = document.querySelector('.main-content')
|
||||
const iconDom = toolExpandDom.querySelector('i')
|
||||
|
||||
const defaultMaxWidth = KEEP.theme_config.style.content_max_width || '1000px'
|
||||
const expandMaxWidth = '90%'
|
||||
let headerMaxWidth = defaultMaxWidth
|
||||
|
||||
let isExpand = false
|
||||
|
||||
if (
|
||||
KEEP.theme_config.style.first_screen.enable === true &&
|
||||
window.location.pathname === '/'
|
||||
) {
|
||||
headerMaxWidth = parseInt(defaultMaxWidth) * 1.2 + 'px'
|
||||
}
|
||||
|
||||
const setPageWidth = (isExpand) => {
|
||||
KEEP.styleStatus.isExpandPageWidth = isExpand
|
||||
KEEP.setStyleStatus()
|
||||
if (isExpand) {
|
||||
iconDom.classList.remove('fa-up-right-and-down-left-from-center')
|
||||
iconDom.classList.add('fa-down-left-and-up-right-to-center')
|
||||
headerContentDom.style.maxWidth = expandMaxWidth
|
||||
mainContentDom.style.maxWidth = expandMaxWidth
|
||||
} else {
|
||||
iconDom.classList.remove('fa-down-left-and-up-right-to-center')
|
||||
iconDom.classList.add('fa-up-right-and-down-left-from-center')
|
||||
headerContentDom.style.maxWidth = headerMaxWidth
|
||||
mainContentDom.style.maxWidth = defaultMaxWidth
|
||||
}
|
||||
}
|
||||
|
||||
const initPageWidth = () => {
|
||||
const styleStatus = KEEP.getStyleStatus()
|
||||
if (styleStatus) {
|
||||
isExpand = styleStatus.isExpandPageWidth
|
||||
setPageWidth(isExpand)
|
||||
}
|
||||
}
|
||||
|
||||
initPageWidth()
|
||||
|
||||
toolExpandDom.addEventListener('click', () => {
|
||||
isExpand = !isExpand
|
||||
setPageWidth(isExpand)
|
||||
})
|
||||
},
|
||||
|
||||
// go comment anchor
|
||||
goComment() {
|
||||
this.goComment_dom = document.querySelector('.go-comment')
|
||||
if (this.goComment_dom) {
|
||||
this.goComment_dom.addEventListener('click', () => {
|
||||
document.querySelector('#comment-anchor').scrollIntoView()
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// get dom element height
|
||||
getElementHeight(selectors) {
|
||||
const dom = document.querySelector(selectors)
|
||||
return dom ? dom.getBoundingClientRect().height : 0
|
||||
},
|
||||
|
||||
// init first screen height
|
||||
initFirstScreenHeight() {
|
||||
this.firstScreen_dom && (this.firstScreen_dom.style.height = this.innerHeight + 'px')
|
||||
// init has TOC
|
||||
initHasToc() {
|
||||
const tocNavDoms = document.querySelectorAll('.post-toc-wrap .post-toc li')
|
||||
if (tocNavDoms.length > 0) {
|
||||
this.hasToc = true
|
||||
document.body.classList.add('has-toc')
|
||||
} else {
|
||||
this.hasToc = false
|
||||
document.body.classList.remove('has-toc')
|
||||
}
|
||||
},
|
||||
|
||||
// init page height handle
|
||||
|
|
@ -223,20 +167,21 @@ KEEP.initUtils = () => {
|
|||
|
||||
// zoom in image
|
||||
zoomInImage() {
|
||||
const SIDE_GAP = 30
|
||||
let SIDE_GAP = 40
|
||||
let isZoomIn = false
|
||||
let curWinScrollY = 0
|
||||
let selectedImgDom = null
|
||||
const imgDomList = document.querySelectorAll('.markdown-body img')
|
||||
const imgDomList = document.querySelectorAll('.keep-markdown-body img')
|
||||
const zoomInImgMask = document.querySelector('.zoom-in-image-mask')
|
||||
const zoomInImg = zoomInImgMask.querySelector('.zoom-in-image')
|
||||
|
||||
const zoomOut = () => {
|
||||
if (isZoomIn) {
|
||||
isZoomIn = false
|
||||
curWinScrollY = 0
|
||||
zoomInImg && (zoomInImg.style.transform = `scale(1)`)
|
||||
zoomInImgMask && zoomInImgMask.classList.remove('show')
|
||||
const timer = setTimeout(() => {
|
||||
clearTimeout(timer)
|
||||
setTimeout(() => {
|
||||
selectedImgDom && selectedImgDom.classList.remove('hide')
|
||||
}, 300)
|
||||
}
|
||||
|
|
@ -249,15 +194,30 @@ KEEP.initUtils = () => {
|
|||
})
|
||||
|
||||
document.addEventListener('scroll', () => {
|
||||
if (isZoomIn && Math.abs(curWinScrollY - window.scrollY) >= 50) {
|
||||
zoomOut()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const setSideGap = () => {
|
||||
const w = document.body.offsetWidth
|
||||
if (w <= 500) {
|
||||
SIDE_GAP = 10
|
||||
} else if (w <= 800) {
|
||||
SIDE_GAP = 20
|
||||
} else {
|
||||
SIDE_GAP = 40
|
||||
}
|
||||
}
|
||||
|
||||
if (imgDomList.length) {
|
||||
zoomOutHandle()
|
||||
imgDomList.forEach((img) => {
|
||||
img.addEventListener('click', () => {
|
||||
curWinScrollY = window.scrollY
|
||||
isZoomIn = !isZoomIn
|
||||
setSideGap()
|
||||
zoomInImg.setAttribute('src', img.getAttribute('src'))
|
||||
selectedImgDom = img
|
||||
if (isZoomIn) {
|
||||
|
|
@ -377,17 +337,30 @@ KEEP.initUtils = () => {
|
|||
const init = () => {
|
||||
// tooltip
|
||||
document.querySelectorAll('.tooltip').forEach((element) => {
|
||||
const { content } = element.dataset
|
||||
const { content, offsetX, offsetY } = element.dataset
|
||||
|
||||
let style = ''
|
||||
let sTop = ''
|
||||
let sLeft = ''
|
||||
if (offsetX) {
|
||||
sTop = `left: ${offsetX};`
|
||||
}
|
||||
if (offsetY) {
|
||||
sLeft = `top: ${offsetY};`
|
||||
}
|
||||
if (offsetX || offsetY) {
|
||||
style = ` style="${sLeft}${sTop}"`
|
||||
}
|
||||
|
||||
if (content) {
|
||||
element.insertAdjacentHTML(
|
||||
'afterbegin',
|
||||
`<span class="tooltip-content">${content}</span>`
|
||||
`<span class="tooltip-content"${style}>${content}</span>`
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
// tooltip-img
|
||||
|
||||
const imgsSet = {}
|
||||
|
||||
const toggleShowImg = (dom, nameIdx) => {
|
||||
|
|
@ -458,17 +431,11 @@ KEEP.initUtils = () => {
|
|||
// global font adjust
|
||||
KEEP.utils.globalFontAdjust()
|
||||
|
||||
// adjust content area width
|
||||
KEEP.utils.contentAreaWidthAdjust()
|
||||
|
||||
// go comment
|
||||
KEEP.utils.goComment()
|
||||
|
||||
// init page height handle
|
||||
KEEP.utils.initPageHeightHandle()
|
||||
|
||||
// init first screen height
|
||||
KEEP.utils.initFirstScreenHeight()
|
||||
// check whether TOC exists
|
||||
KEEP.utils.initHasToc()
|
||||
|
||||
// big image viewer handle
|
||||
KEEP.utils.zoomInImage()
|
||||
|
|
|
|||
Loading…
Reference in New Issue