- <%- __('copyright.title') %>：<%= page.title %>
- <%- __('copyright.author') %>：<%= theme.base_info.author || config.author %>
- <%- __('copyright.create_time') %>：<%= date(page.date, 'YYYY-MM-DD HH:mm:ss') %>
diff --git a/layout/_partial/footer.ejs b/layout/_partial/footer.ejs
index 5fe912a..8016b7b 100644
--- a/layout/_partial/footer.ejs
+++ b/layout/_partial/footer.ejs
@@ -22,21 +22,17 @@ const { site_uv: bsz_site_uv, site_pv: bsz_site_pv, enable: bsz_enable } = theme
src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js">
<% if (bsz_site_uv) { %>
-
- <%- __('site_uv') %>
-
+ <%- __('site_uv') %>
<% } %>
<% if (bsz_site_pv) { %>
-
- <%- __('site_pv') %>
-
+ <%- __('site_pv') %>
<% } %>
<% } %>
<% if (f_icp) { %>
diff --git a/layout/_partial/progress-bar.ejs b/layout/_partial/progress-bar.ejs
index cf191f9..7e09698 100644
--- a/layout/_partial/progress-bar.ejs
+++ b/layout/_partial/progress-bar.ejs
@@ -5,9 +5,7 @@
<% if (theme.pjax.enable === true) { %>
-
-
-
+
<% } %>
diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs
index c07da5e..b59824a 100644
--- a/layout/_partial/scripts.ejs
+++ b/layout/_partial/scripts.ejs
@@ -21,7 +21,7 @@ const {
<%- __js('js/local-search.js') %>
<% } %>
-<% if (t_code_block_tools.enable === true || t_code_copy.enable === true) { %>
+<% if (t_code_block_tools?.enable === true || t_code_copy?.enable === true) { %>
<%- __js('js/code-block-tools.js') %>
<% } %>
diff --git a/package.json b/package.json
index 93868e9..27bbd3c 100644
--- a/package.json
+++ b/package.json
@@ -1,11 +1,14 @@
{
"name": "hexo-theme-keep",
- "version": "3.4.7",
+ "version": "3.4.8",
"private": false,
"description": "A simple and elegant theme for Hexo.",
"scripts": {
- "release": "git push --tag && git push -u origin dev",
- "publish": "npm publish"
+ "npm:publish": "npm publish",
+ "format": "prettier --write ./source/js/*.js ./scripts",
+ "lint:style": "stylelint --fix ./source/css",
+ "git:push": "git push --tag && git push -u origin dev",
+ "git:add": "npm run lint:style && git add ."
},
"repository": {
"type": "git",
@@ -25,5 +28,11 @@
"bugs": {
"url": "https://github.com/XPoet/hexo-theme-keep/issues"
},
- "homepage": "https://github.com/XPoet/hexo-theme-keep#readme"
+ "homepage": "https://github.com/XPoet/hexo-theme-keep#readme",
+ "devDependencies": {
+ "prettier": "^2.7.1",
+ "stylelint": "^14.13.0",
+ "stylelint-config-rational-order": "^0.1.2",
+ "stylelint-stylus": "^0.17.0"
+ }
}
diff --git a/scripts/filters/lazyload-handle.js b/scripts/filters/lazyload-handle.js
index 2e6c9c1..2dd4af2 100644
--- a/scripts/filters/lazyload-handle.js
+++ b/scripts/filters/lazyload-handle.js
@@ -2,14 +2,14 @@
hexo.extend.filter.register(
'after_post_render',
function (data) {
- const theme = hexo.theme.config;
- if (!theme.lazyload || !theme.lazyload.enable) return;
+ const theme = hexo.theme.config
+ if (!theme.lazyload || !theme.lazyload.enable) return
data.content = data.content.replace(
// Match 'img' tags width the src attribute.
/]*)src="([^"]*)"([^>\/]*)\/?\s*>/gim,
function (match, attrBegin, src, attrEnd) {
// Exit if the src doesn't exists.
- if (!src) return match;
+ if (!src) return match
return `![]()
]*)href="([^"]*)"([^>]*)>([^<]*)<\/a>/gim
- data.content = data.content.replace(regPureATag, function (
- match,
- attrBegin,
- href,
- attrEnd,
- html
- ) {
- // Exit if the href attribute doesn't exists.
- if (!href) return match;
+ data.content = data.content.replace(
+ regPureATag,
+ function (match, attrBegin, href, attrEnd, html) {
+ // Exit if the href attribute doesn't exists.
+ if (!href) return match
- let link = '';
- try {
- link = new URL(href);
- } catch (e) {
- // Invalid url, e.g. Anchor link.
- return match;
+ let link = ''
+ try {
+ link = new URL(href)
+ } catch (e) {
+ // Invalid url, e.g. Anchor link.
+ return match
+ }
+
+ // Exit if the url has same host with `config.url`, which means isn't an external link.
+ if (!link.protocol || link.hostname === siteHost) return match
+
+ return `${html}`
}
-
- // Exit if the url has same host with `config.url`, which means isn't an external link.
- if (!link.protocol || link.hostname === siteHost) return match;
-
- return (
- `${html}`
- )
- })
+ )
},
0
)
diff --git a/scripts/helpers/export-config.js b/scripts/helpers/export-config.js
index c911a43..eb1e47b 100644
--- a/scripts/helpers/export-config.js
+++ b/scripts/helpers/export-config.js
@@ -1,39 +1,38 @@
/* global hexo */
-'use strict';
-const url = require('url');
-const fs = require('fs');
-const path = require('path');
-const yaml = require('js-yaml');
+'use strict'
+
+const url = require('url')
+const fs = require('fs')
+const path = require('path')
+const yaml = require('js-yaml')
/**
* Export theme config to js
*/
hexo.extend.helper.register('export_config', function () {
-
- const { config, theme } = this;
+ const { config, theme } = this
// ------------------------ export language to js ------------------------
- const languageDir = path.join(__dirname, '../../languages');
- let file = fs.readdirSync(languageDir).find(v => v === `${config.language}.yml`);
- file = languageDir + '/' + (file ? file : 'en.yml');
- let languageContent = fs.readFileSync(file, 'utf8');
+ const languageDir = path.join(__dirname, '../../languages')
+ let file = fs.readdirSync(languageDir).find((v) => v === `${config.language}.yml`)
+ file = languageDir + '/' + (file ? file : 'en.yml')
+ let languageContent = fs.readFileSync(file, 'utf8')
try {
- languageContent = yaml.load(languageContent);
- } catch (e) {
- console.log(e);
+ languageContent = yaml.load(languageContent)
+ } catch (err) {
+ console.log(err)
}
// -----------------------------------------------------------------------
-
let hexo_config = {
hostname: url.parse(config.url).hostname || config.url,
root: config.root,
language: config.language
- };
+ }
if (config.search) {
- hexo_config.path = config.search.path;
+ hexo_config.path = config.search.path
}
let theme_config = {
@@ -45,7 +44,7 @@ hexo.extend.helper.register('export_config', function () {
side_tools: theme.side_tools || {},
pjax: theme.pjax || {},
lazyload: theme.lazyload || {},
- version: theme.version
+ version: require('../../package.json').version
}
return ``;
-});
+ `
+})
diff --git a/scripts/helpers/helper.js b/scripts/helpers/helper.js
index fab40da..8c26c39 100644
--- a/scripts/helpers/helper.js
+++ b/scripts/helpers/helper.js
@@ -2,103 +2,102 @@
'use strict'
-const url = require('url');
+const url = require('url')
hexo.extend.helper.register('isInHomePaging', function (pagePath, route) {
if (pagePath.length > 5 && route === '/') {
- return pagePath.slice(0, 5) === 'page/';
+ return pagePath.slice(0, 5) === 'page/'
} else {
- return false;
+ return false
}
-});
+})
hexo.extend.helper.register('createNewArchivePosts', function (posts) {
- const postList = [], postYearList = [];
- posts.forEach(post => postYearList.push(post.date.year()));
- Array.from(new Set(postYearList)).forEach(year => {
+ const postList = [],
+ postYearList = []
+ posts.forEach((post) => postYearList.push(post.date.year()))
+ Array.from(new Set(postYearList)).forEach((year) => {
postList.push({
year: year,
postList: []
})
- });
+ })
postList.sort((a, b) => b.year - a.year)
- postList.forEach(item => {
- posts.forEach(post => item.year === post.date.year() && item.postList.push(post))
- });
- postList.forEach(item => item.postList.sort((a, b) => b.date.unix() - a.date.unix()));
- return postList;
-});
+ postList.forEach((item) => {
+ posts.forEach((post) => item.year === post.date.year() && item.postList.push(post))
+ })
+ postList.forEach((item) => item.postList.sort((a, b) => b.date.unix() - a.date.unix()))
+ return postList
+})
hexo.extend.helper.register('getAuthorLabel', function (postCount, isAuto, labelList) {
-
- let level = Math.floor(Math.log2(postCount));
- level = level < 2 ? 1 : level - 1;
+ let level = Math.floor(Math.log2(postCount))
+ level = level < 2 ? 1 : level - 1
if (isAuto === false && Array.isArray(labelList) && labelList.length > 0) {
- return level > labelList.length ? labelList[labelList.length - 1] : labelList[level - 1];
+ return level > labelList.length ? labelList[labelList.length - 1] : labelList[level - 1]
} else {
- return `Lv${level}`;
+ return `Lv${level}`
}
-
-});
+})
hexo.extend.helper.register('getPostUrl', function (rootUrl, path) {
if (rootUrl) {
- let { href } = url.parse(rootUrl);
+ let { href } = url.parse(rootUrl)
if (href.substr(href.length - 1, 1) !== '/') {
- href = href + '/';
+ href = href + '/'
}
- return href + path;
+ return href + path
} else {
- return path;
+ return path
}
-});
+})
const getSourceCdnUrl = (tyle, themeConfig, path) => {
- const { version = '3.4.7', cdn = {} } = themeConfig
- const { provider = 'jsdelivr' } = cdn
+ const version = require('../../package.json').version
+ const { provider = 'jsdelivr' } = themeConfig?.cdn
let urlPrefix = ''
switch (provider.toLocaleLowerCase()) {
case 'jsdelivr':
urlPrefix = '//cdn.jsdelivr.net/npm/hexo-theme-keep'
if (tyle === 'js') {
- return ``;
+ return ``
} else {
- return ``;
+ return ``
}
case 'unpkg':
urlPrefix = '//unpkg.com/hexo-theme-keep'
if (tyle === 'js') {
- return ``;
+ return ``
} else {
- return ``;
+ return ``
}
}
}
hexo.extend.helper.register('__js', function (path) {
const { enable } = this.theme.cdn
- const _js = hexo.extend.helper.get('js').bind(hexo);
+ const _js = hexo.extend.helper.get('js').bind(hexo)
const cdnPathHandle = (pa) => {
- return enable ? getSourceCdnUrl('js', this.theme, pa) : _js(pa);
+ return enable ? getSourceCdnUrl('js', this.theme, pa) : _js(pa)
}
- let t = ``;
+ let t = ``
if (Array.isArray(path)) {
for (const p of path) {
- t += cdnPathHandle(p);
+ t += cdnPathHandle(p)
}
} else {
- t = cdnPathHandle(path);
+ t = cdnPathHandle(path)
}
- return t;
-});
+ return t
+})
hexo.extend.helper.register('__css', function (path) {
const { enable } = this.theme.cdn
- const _css = hexo.extend.helper.get('css').bind(hexo);
- return enable ? getSourceCdnUrl('css', this.theme, path) : _css(path);
-});
+ const _css = hexo.extend.helper.get('css').bind(hexo)
+ return enable ? getSourceCdnUrl('css', this.theme, path) : _css(path)
+})
diff --git a/scripts/use-source-data.js b/scripts/use-source-data.js
index d617596..9e95b58 100644
--- a/scripts/use-source-data.js
+++ b/scripts/use-source-data.js
@@ -1,26 +1,21 @@
hexo.on('generateBefore', function () {
-
if (hexo.locals.get) {
- const data = hexo.locals.get('data');
+ const data = hexo.locals.get('data')
if (data) {
-
// theme config file handle
if (data._config) {
- hexo.theme.config = data._config;
-
+ hexo.theme.config = data._config
} else if (data.keep) {
- hexo.theme.config = data.keep;
-
+ hexo.theme.config = data.keep
} else if (data._keep) {
- hexo.theme.config = data._keep;
+ hexo.theme.config = data._keep
}
// friends link file handle
if (data.links || data.link) {
- hexo.theme.config.links = (data.links || data.link);
+ hexo.theme.config.links = data.links || data.link
}
-
}
}
-});
+})
diff --git a/source/css/common/animated.styl b/source/css/common/animated.styl
index 1c8b318..12ab458 100644
--- a/source/css/common/animated.styl
+++ b/source/css/common/animated.styl
@@ -1,102 +1,107 @@
transition-g() {
- transition-property: color, background, box-shadow, border-color;
- transition-delay: 0s, 0s, 0s, 0s;
- transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
- transition-timing-function: ease, ease, ease, ease;
+ transition-delay 0s, 0s, 0s, 0s
+ transition-timing-function ease, ease, ease, ease
+ transition-duration 0.2s, 0.2s, 0.2s, 0.2s
+ transition-property color, background, box-shadow, border-color
}
transition-t(property, delay, duration, function) {
- $temp-property = "color, background, box-shadow, border-color";
- $temp-delay = "0s, 0s, 0s, 0s";
- $temp-duration = "0.2s, 0.2s, 0.2s, 0.2s";
- $temp-function = "ease, ease, ease, ease";
+ $temp-property = "color, background, box-shadow, border-color"
+ $temp-delay = "0s, 0s, 0s, 0s"
+ $temp-duration = "0.2s, 0.2s, 0.2s, 0.2s"
+ $temp-function = "ease, ease, ease, ease"
for p in convert(property) {
- $temp-property += ("," + p);
+ $temp-property += ("," + p)
}
for d in convert(delay) {
- $temp-delay += ("," + d + "s");
+ $temp-delay += ("," + d + "s")
}
for d in convert(duration) {
- $temp-duration += ("," + d + "s");
+ $temp-duration += ("," + d + "s")
}
for f in convert(function) {
- $temp-function += ("," + f);
+ $temp-function += ("," + f)
}
+ transition-delay convert($temp-delay)
+ transition-timing-function convert($temp-function)
+ transition-duration convert($temp-duration)
- transition-property: convert($temp-property);
- transition-delay: convert($temp-delay);
- transition-duration: convert($temp-duration);
- transition-timing-function: convert($temp-function);
+ transition-property convert($temp-property)
}
.fade-in-down-animation {
- animation-fill-mode: both;
- animation-duration: 1s;
- animation-name: fade-in-down;
+ animation-name fade-in-down
+ animation-duration 1s
+ animation-fill-mode both
}
@keyframes fade-in-down {
0% {
- opacity: 0;
- transform: translateY(-50px);
+ transform translateY(-50px)
+ opacity 0
}
100% {
- opacity: 1;
- transform: translateY(0);
+ transform translateY(0)
+ opacity 1
}
}
@keyframes icon-animate {
- 0%, 100% {
- transform: scale(1);
+ 0%
+ 100% {
+ transform scale(1)
}
- 10%, 30% {
- transform: scale(.88);
+ 10%
+ 30% {
+ transform scale(0.88)
}
- 20%, 40%, 60%, 80% {
- transform: scale(1.08);
+ 20%
+ 40%
+ 60%
+ 80% {
+ transform scale(1.08)
}
- 50%, 70% {
- transform: scale(1.08);
+ 50%
+ 70% {
+ transform scale(1.08)
}
}
.title-hover-animation {
- display: inline-block;
- position: relative;
- border-bottom: none;
- line-height: 1.3;
- vertical-align: top;
- color: var(--second-text-color);
+ position relative
+ display inline-block
+ color var(--second-text-color)
+ line-height 1.3
+ vertical-align top
+ border-bottom none
&::before {
- content: "";
- position: absolute;
- width: 100%;
- height: 2px;
- bottom: -4px;
- left: 0;
- background-color: var(--second-text-color);
- visibility: hidden;
- transform: scaleX(0);
- transition-t("visibility transform", "0, 0", "0.2, 0.2", "ease-in-out, ease-in-out");
+ position absolute
+ bottom -4px
+ left 0
+ width 100%
+ height 2px
+ background-color var(--second-text-color)
+ transform scaleX(0)
+ visibility hidden
+ content ""
+ transition-t("visibility transform", "0, 0", "0.2, 0.2", "ease-in-out, ease-in-out")
}
&:hover::before {
- visibility: visible;
- transform: scaleX(1);
+ transform scaleX(1)
+ visibility visible
}
-
}
diff --git a/source/css/common/basic.styl b/source/css/common/basic.styl
index 14af953..2003bd8 100644
--- a/source/css/common/basic.styl
+++ b/source/css/common/basic.styl
@@ -1,6 +1,6 @@
-@require 'variables.styl'
-@require 'animated.styl'
-@require 'keep-theme.styl'
+@import 'variables.styl'
+@import 'animated.styl'
+@import 'keep-theme.styl'
// ======================================================================
// all
@@ -17,14 +17,14 @@
// ====================================
&::-webkit-scrollbar {
- width 6px
- height 6px
+ width 0.4rem
+ height 0.4rem
transition all 0.2s ease
}
&::-webkit-scrollbar-thumb {
background var(--scrollbar-color)
- border-radius 1px
+ border-radius 0.1rem
}
&::-webkit-scrollbar-track {
@@ -36,22 +36,23 @@
// ======================================================================
// html, body
// ======================================================================
-html, body {
+html
+body {
position relative
width 100%
height 100%
margin 0
padding 0
color var(--default-text-color)
- background var(--background-color)
- font-family $default-font-family
font-weight $default-font-weight
font-size $default-font-size
+ font-family $default-font-family
line-height $default-font-line-height
+ background var(--background-color)
&::-webkit-scrollbar {
- width 8px
- height 8px
+ width 0.4rem
+ height 0.4rem
}
+keep-tablet() {
@@ -64,7 +65,6 @@ html, body {
font-size $default-font-size * 0.9
line-height $default-font-line-height * 0.9
}
-
}
@@ -72,17 +72,19 @@ html, body {
// selection
// ======================================================================
::selection {
- background var(--selection-color)
color #fff
+ background var(--selection-color)
}
// ======================================================================
// ul, ol, li
// ======================================================================
-ul, ol, li {
- padding 0
+ul
+ol
+li {
margin 0
+ padding 0
list-style none
}
@@ -91,22 +93,24 @@ ul, ol, li {
// a
// ======================================================================
a {
- text-decoration none
color var(--default-text-color)
+ text-decoration none
- i, span {
+ i
+ span {
color var(--default-text-color)
}
- &:hover, &:active {
- text-decoration none !important
+ &:hover
+ &:active {
color var(--primary-color)
+ text-decoration none !important
- i, span {
+ i
+ span {
color var(--primary-color)
}
}
-
}
@@ -115,8 +119,8 @@ a {
// ======================================================================
img {
&[lazyload] {
- padding 10px
- margin 20px auto !important
+ margin 1.4rem auto !important
+ padding 0.8rem
cursor not-allowed
pointer-events none
}
@@ -127,23 +131,23 @@ img {
// button
// ======================================================================
button {
- padding 0
margin 0
+ padding 0
+ background transparent
border 0
outline none
cursor pointer
- background transparent
}
.btn {
- display inline-block
position relative
- text-align center
- cursor pointer
+ display inline-block
+ padding 0.4rem 1rem
white-space nowrap
- border-radius 5px
- padding 8px 16px
+ text-align center
background var(--background-color)
+ border-radius 5px
+ cursor pointer
hover-style(true, 1.06, 1.06)
@@ -159,8 +163,8 @@ button {
// ======================================================================
.flex-center {
display flex
- justify-content center
align-items center
+ justify-content center
}
@@ -169,12 +173,12 @@ button {
// ======================================================================
.clear {
&::after {
- content ''
display block
clear both
- visibility hidden
- overflow hidden
height 0
+ overflow hidden
+ visibility hidden
+ content ''
}
}
@@ -194,17 +198,17 @@ button {
.tooltip-content {
position absolute
- top -140%
+ top 0
left 50%
- transform translateX(-50%)
- font-size 0.8rem
- padding 0.2rem 0.6rem
- background var(--first-text-color)
- color var(--fourth-text-color)
- border-radius 0.3rem
- display none
z-index $z-index-9
+ display none
+ padding 0.2rem 0.6rem
+ color var(--fourth-text-color)
+ font-size 0.8rem
white-space nowrap
+ background var(--first-text-color)
+ border-radius 0.3rem
+ transform translateX(-50%) translateY(-108%)
transition-t("display", "0", "0.2", "ease")
}
}
diff --git a/source/css/common/code-block/code-block-tools.styl b/source/css/common/code-block/code-block-tools.styl
index 187af26..4285369 100644
--- a/source/css/common/code-block/code-block-tools.styl
+++ b/source/css/common/code-block/code-block-tools.styl
@@ -11,28 +11,28 @@ disable-user-select() {
margin 1.4rem 0
.code-tools-box {
+ display flex
+ align-items center
+ justify-content space-between
box-sizing border-box
width 100%
+ padding 0.3rem 0.4rem
background var(--fourth-text-color)
border-top-left-radius 0.3rem
border-top-right-radius 0.3rem
- display flex
- justify-content space-between
- align-items center
- padding 0.3rem 0.6rem 0.3rem 0.4rem
&.folded {
- border-bottom-left-radius 0.3rem
border-bottom-right-radius 0.3rem
+ border-bottom-left-radius 0.3rem
}
.code-lang {
- margin-left 0.2rem
- font-size 0.9rem
- font-weight 600
- font-family "Source Code Pro", consolas, Menlo
- color var(--default-text-color)
justify-content flex-start
+ margin-left 0.2rem
+ color var(--default-text-color)
+ font-weight 600
+ font-size 0.9rem
+ font-family "Source Code Pro", consolas, Menlo
}
.tool {
@@ -47,10 +47,8 @@ disable-user-select() {
.fold {
- font-weight bold
padding 0 0.4rem 0 0.2rem
}
-
}
@@ -65,7 +63,7 @@ disable-user-select() {
if (hexo-config('code_block_tools.style') == 'mac' || hexo-config('code_copy.style') == 'mac') {
margin 1.4rem 0 1.8rem 0
- box-shadow 0 0.8rem 2rem 0 rgba(0, 0, 0, .4)
+ box-shadow 0 0.8rem 2rem 0 rgba(0, 0, 0, 0.4)
&:hover {
.code-tools-box .copy {
@@ -75,23 +73,23 @@ disable-user-select() {
.code-tools-box {
justify-content flex-end
- background #21252b
padding 0.4rem 0.6rem 0.7rem 0.4rem
+ background #21252b
&::before {
position absolute
- content ''
- width 0.8rem
- height 0.8rem
left 0.8rem
+ width 0.76rem
+ height 0.76rem
background #fc625d
border-radius 50%
- box-shadow 1.4rem 0 #fdbc40, 2.8rem 0 #35cd4b
+ box-shadow 1.3rem 0 #fdbc40, 2.6rem 0 #35cd4b
+ content ''
}
&.folded {
- border-bottom-left-radius 0
border-bottom-right-radius 0
+ border-bottom-left-radius 0
.copy {
display none
@@ -114,8 +112,8 @@ disable-user-select() {
.copy {
position absolute
- bottom 0.3rem
right 0.5rem
+ bottom 0.3rem
padding 0 0.1rem
font-weight bold
opacity 0
@@ -124,11 +122,7 @@ disable-user-select() {
i {
font-size 1rem
}
-
}
-
}
-
}
-
}
diff --git a/source/css/common/code-block/code-theme.styl b/source/css/common/code-block/code-theme.styl
index 20c3715..5e47540 100644
--- a/source/css/common/code-block/code-theme.styl
+++ b/source/css/common/code-block/code-theme.styl
@@ -35,20 +35,20 @@ $night-highlight-deletion = #008000
$night-highlight-addition = #800000
code-theme(mode) {
- --code-foreground: mode == 'light' ? $code-foreground : $night-code-foreground
- --code-background: mode == 'light' ? $code-background : $night-code-background
- --highlight-background: mode == 'light' ? $highlight-background : $night-highlight-background
- --highlight-foreground: mode == 'light' ? $highlight-foreground : $night-highlight-foreground
- --highlight-comment: mode == 'light' ? $highlight-comment : $night-highlight-comment
- --highlight-red: mode == 'light' ? $highlight-red : $night-highlight-red
- --highlight-orange: mode == 'light' ? $highlight-orange : $night-highlight-orange
- --highlight-yellow: mode == 'light' ? $highlight-yellow : $night-highlight-yellow
- --highlight-green: mode == 'light' ? $highlight-green : $night-highlight-green
- --highlight-aqua: mode == 'light' ? $highlight-aqua : $night-highlight-aqua
- --highlight-blue: mode == 'light' ? $highlight-blue : $night-highlight-blue
- --highlight-purple: mode == 'light' ? $highlight-purple : $night-highlight-purple
- --highlight-gutter-color: mode == 'light' ? $highlight-gutter-color : $night-highlight-gutter-color
- --highlight-gutter-bg-color: mode == 'light' ? $highlight-gutter-bg-color : $night-highlight-gutter-bg-color
+ --code-foreground mode == 'light' ? $code-foreground : $night-code-foreground
+ --code-background mode == 'light' ? $code-background : $night-code-background
+ --highlight-background mode == 'light' ? $highlight-background : $night-highlight-background
+ --highlight-foreground mode == 'light' ? $highlight-foreground : $night-highlight-foreground
+ --highlight-comment mode == 'light' ? $highlight-comment : $night-highlight-comment
+ --highlight-red mode == 'light' ? $highlight-red : $night-highlight-red
+ --highlight-orange mode == 'light' ? $highlight-orange : $night-highlight-orange
+ --highlight-yellow mode == 'light' ? $highlight-yellow : $night-highlight-yellow
+ --highlight-green mode == 'light' ? $highlight-green : $night-highlight-green
+ --highlight-aqua mode == 'light' ? $highlight-aqua : $night-highlight-aqua
+ --highlight-blue mode == 'light' ? $highlight-blue : $night-highlight-blue
+ --highlight-purple mode == 'light' ? $highlight-purple : $night-highlight-purple
+ --highlight-gutter-color mode == 'light' ? $highlight-gutter-color : $night-highlight-gutter-color
+ --highlight-gutter-bg-color mode == 'light' ? $highlight-gutter-bg-color : $night-highlight-gutter-bg-color
}
@@ -56,13 +56,13 @@ code-theme(mode) {
code-theme('light')
}
-@media (prefers-color-scheme: light) {
+@media (prefers-color-scheme light) {
:root {
code-theme('light')
}
}
-@media (prefers-color-scheme: dark) {
+@media (prefers-color-scheme dark) {
:root {
code-theme('dark')
}
diff --git a/source/css/common/code-block/highlight.styl b/source/css/common/code-block/highlight.styl
index 19c09e3..e3f5b2e 100644
--- a/source/css/common/code-block/highlight.styl
+++ b/source/css/common/code-block/highlight.styl
@@ -1,70 +1,71 @@
-@require "code-theme.styl"
+@import "code-theme.styl"
$code-block {
- overflow auto
- margin 20px 0
+ margin 1.5rem 0
padding 0
+ overflow auto
+ color var(--highlight-foreground)
font-size 0.96rem
line-height 1.5rem
- color var(--highlight-foreground)
background var(--highlight-background)
}
-pre, code {
+pre
+code {
font-family "Source Code Pro", consolas, Menlo
}
code {
- padding 5px
- word-wrap break-word
- border-radius 2px
- font-size 0.96rem
+ padding 0.4rem
color var(--code-foreground)
+ font-size 0.96rem
+ word-wrap break-word
background var(--code-background)
+ border-radius 0.2rem
}
pre {
@extend $code-block
- padding 10px
+ padding 0.6rem
code {
padding 0
color var(--highlight-foreground)
- background none
text-shadow none
+ background none
}
}
.highlight {
@extend $code-block
- border-radius 1px
+ border-radius 0.1rem
pre {
- border none
margin 0
- padding 10px 0
+ padding 0.6rem 0
+ border none
}
table {
- margin 0
width auto
+ margin 0
border none
border-spacing unset
}
td {
- border none
padding 0
+ border none
}
figcaption {
- font-size 1rem
- color var(--highlight-foreground)
- line-height 1rem
margin-bottom 1rem
+ color var(--highlight-foreground)
+ font-size 1rem
+ line-height 1rem
a {
float right
@@ -77,8 +78,8 @@ pre {
}
.gutter pre {
- padding-left 10px
- padding-right 10px
+ padding-right 0.6rem
+ padding-left 0.6rem
color var(--highlight-gutter-color)
text-align center
background-color var(--highlight-gutter-bg-color)
@@ -86,13 +87,13 @@ pre {
.code pre {
width 100%
- padding-left 10px
- padding-right 10px
+ padding-right 0.6rem
+ padding-left 0.6rem
background-color var(--highlight-background)
}
.line {
- height 20px
+ height 1.5rem
color var(--default-text-color)
.attr {
@@ -102,7 +103,6 @@ pre {
.string {
color var(--default-text-color)
}
-
}
}
@@ -200,5 +200,4 @@ pre {
.javascript .function {
color var(--highlight-purple)
}
-
}
diff --git a/source/css/common/keep-theme.styl b/source/css/common/keep-theme.styl
index f99a546..f2ade80 100644
--- a/source/css/common/keep-theme.styl
+++ b/source/css/common/keep-theme.styl
@@ -1,53 +1,53 @@
-$keep-container-border-radius = 5px;
+$keep-container-border-radius = 5px
hover-style(isTransform, scaleX, scaleY) {
- box-shadow: 2px 2px 5px var(--shadow-color);
+ box-shadow 2px 2px 5px var(--shadow-color)
if (isTransform) {
- transition-t("transform", "0", "0.2", "linear");
+ transition-t("transform", "0", "0.2", "linear")
}
&:hover {
if (hexo-config('style.hover.scale') && isTransform) {
- transform: scaleX(scaleX) scaleY(scaleX);
+ transform scaleX(scaleX) scaleY(scaleX)
}
if (hexo-config('style.hover.shadow')) {
- box-shadow: 2px 2px 8px var(--shadow-hover-color);
+ box-shadow 2px 2px 8px var(--shadow-hover-color)
}
}
}
keep-container(isTransform, scaleX, scaleY, padding, marginBottomValue) {
- padding: padding;
- border-radius: $keep-container-border-radius;
- box-sizing: border-box;
- background: var(--background-color);
+ box-sizing border-box
+ padding padding
+ background var(--background-color)
+ border-radius $keep-container-border-radius
if (marginBottomValue != 0) {
- margin-bottom: marginBottomValue;
+ margin-bottom marginBottomValue
+keep-tablet() {
- margin-bottom: marginBottomValue * 0.8;
+ margin-bottom marginBottomValue * 0.8
}
+keep-mobile() {
- margin-bottom: marginBottomValue * 0.6;
+ margin-bottom marginBottomValue * 0.6
}
}
- hover-style(isTransform, scaleX, scaleY);
+ hover-style(isTransform, scaleX, scaleY)
+keep-tablet() {
- padding: padding * 0.8;
- border-radius: $keep-container-border-radius * 0.8;
+ padding padding * 0.8
+ border-radius $keep-container-border-radius * 0.8
}
+keep-mobile() {
- padding: padding * 0.6;
- border-radius: $keep-container-border-radius * 0.6;
+ padding padding * 0.6
+ border-radius $keep-container-border-radius * 0.6
}
}
diff --git a/source/css/common/markdown.styl b/source/css/common/markdown.styl
index 7290e22..6ffa6bf 100644
--- a/source/css/common/markdown.styl
+++ b/source/css/common/markdown.styl
@@ -1,86 +1,90 @@
.markdown-body {
- font-size: 1rem;
+ font-size 1rem
blockquote {
- p,
- ul,
+ p
+ ul
ol {
- padding: 5px 5px 5px 10px;
+ padding 0.4rem 0.4rem 0.4rem 0.8rem
}
- box-sizing: border-box;
- border-left: 5px solid var(--default-text-color);
- margin: 20px 0;
- color: var(--default-text-color);
- background: var(--second-background-color);
+ box-sizing border-box
+ margin 1.4rem 0
+ color var(--default-text-color)
+ background var(--second-background-color)
+ border-left 0.4rem solid var(--default-text-color)
}
p {
- line-height: 2;
- color: var(--default-text-color);
+ color var(--default-text-color)
+ line-height 2
}
a {
- position: relative;
- outline: 0;
- text-decoration: none;
- overflow-wrap: break-word;
- cursor: pointer;
- border-bottom: 1px solid var(--third-text-color);
- box-sizing: border-box;
- padding-bottom: 2px;
+ position relative
+ box-sizing border-box
+ padding-bottom 0.2rem
+ text-decoration none
+ overflow-wrap break-word
+ border-bottom 0.1rem solid var(--third-text-color)
+ outline 0
+ cursor pointer
- .fas, .far, fab {
- margin: 0 2px 0 6px;
- position: relative;
- color: var(--third-text-color);
- font-size: 0.88rem;
+ .fas
+ .far
+ .fab {
+ position relative
+ margin 0 0.2rem 0 0.4rem
+ color var(--third-text-color)
+ font-size 0.88rem
}
&:hover {
- text-decoration: underline;
+ text-decoration underline
&::after {
- background: var(--primary-color);
+ background var(--primary-color)
}
}
}
strong {
- color: var(--default-text-color);
+ color var(--default-text-color)
}
em {
- color: var(--default-text-color);
+ color var(--default-text-color)
}
- ul > li,
- ol > li {
- margin-left: 16px;
- line-height: 2rem;
+ ul
+ ol {
+ li {
+ margin-left 1rem
+ line-height 2rem
+ }
}
ul {
li {
- list-style: disc;
+ list-style disc
ul {
li {
- list-style: circle;
+ list-style circle
ul {
li {
- list-style: square;
+ list-style square
}
}
}
@@ -92,16 +96,16 @@
ol {
li {
- list-style: decimal;
+ list-style decimal
ol {
li {
- list-style: upper-alpha;
+ list-style upper-alpha
ol {
li {
- list-style: upper-roman;
+ list-style upper-roman
}
}
}
@@ -111,133 +115,138 @@
li {
- color: var(--default-text-color);
+ color var(--default-text-color)
}
- h1, h2, h3, h4, h5, h6 {
- color: var(--second-text-color);
- line-height: 1.5;
+ h1
+ h2
+ h3
+ h4
+ h5
+ h6 {
+ color var(--second-text-color)
+ line-height 1.5
+keep-tablet() {
- line-height: 1.25;
+ line-height 1.25
}
}
h1 {
- font-size: 1.8rem;
- font-weight: 600;
+ font-weight 600
+ font-size 1.8rem
+keep-tablet() {
- font-size: 1.7rem;
+ font-size 1.7rem
}
}
h2 {
- font-size: 1.7rem;
- font-weight: 600;
+ font-weight 600
+ font-size 1.7rem
+keep-tablet() {
- font-size: 1.6rem;
+ font-size 1.6rem
}
}
h3 {
- font-size: 1.6rem;
- font-weight: 550;
+ font-weight 550
+ font-size 1.6rem
+keep-tablet() {
- font-size: 1.5rem;
+ font-size 1.5rem
}
}
h4 {
- font-size: 1.5rem;
- font-weight: 550;
+ font-weight 550
+ font-size 1.5rem
+keep-tablet() {
- font-size: 1.4rem;
+ font-size 1.4rem
}
}
h5 {
- font-size: 1.28rem;
- font-weight: 500;
+ font-weight 500
+ font-size 1.28rem
+keep-tablet() {
- font-size: 1.18rem;
+ font-size 1.18rem
}
}
h6 {
- font-size: 1.2rem;
- font-weight: 500;
- line-height: 1.2;
+ font-weight 500
+ font-size 1.2rem
+ line-height 1.2
+keep-tablet() {
- font-size: 1.1rem;
- line-height: 1.1;
+ font-size 1.1rem
+ line-height 1.1
}
}
img {
- box-sizing: border-box;
- max-width: 100%;
- cursor: zoom-in;
- display: block;
- box-shadow: 0 0 2px var(--shadow-color);
- transition-t("padding, margin", "0, 0", "0.2, 0.2", "linear, linear");
+ display block
+ box-sizing border-box
+ max-width 100%
+ box-shadow 0 0 0.2rem var(--shadow-color)
+ cursor zoom-in
+ transition-t("padding, margin", "0, 0", "0.2, 0.2", "linear, linear")
if (hexo-config('post.img_align') == 'center' || hexo-config('style.article_img_align') == 'center') {
- margin: 10px auto 2px;
- } else {
- margin: 10px 0 2px;
+ margin 0.8rem auto 0.2rem
+ }
+ else {
+ margin 0.8rem 0 0.2rem
}
-
}
& > table {
- border-spacing: 0;
- border-collapse: collapse;
- width: 100%;
- overflow: auto;
+ width 100%
+ overflow auto
+ border-collapse collapse
+ border-spacing 0
+keep-mobile() {
& {
- table-layout: fixed;
+ table-layout fixed
}
}
- td,
+ td
th {
- padding: 0;
+ padding 0
}
th {
- font-weight: 600;
+ font-weight 600
}
- td,
+ td
th {
- padding: 6px 13px;
- border: 1px solid var(--border-color);
+ padding 0.4rem 1rem
+ border 0.1rem solid var(--border-color)
}
tr {
- background-color: var(--background-color);
- border: 1px solid var(--fourth-text-color);
+ background-color var(--background-color)
+ border 0.1rem solid var(--fourth-text-color)
}
tr:nth-child(2n) {
- background-color: var(--second-background-color);
+ background-color var(--second-background-color)
}
}
}
diff --git a/source/css/common/variables.styl b/source/css/common/variables.styl
index d78dee1..191c230 100644
--- a/source/css/common/variables.styl
+++ b/source/css/common/variables.styl
@@ -6,163 +6,167 @@
// ==============================================================================================
// layout
// ==============================================================================================
-$header-height = 70px; // header height
-$header-shrink-height = $header-height * 0.72; // header shrink height
-$scroll-progress-bar-height = 2px; // scroll progress bar height
-$main-content-width = 80%; // main content width (PC)
-$main-content-width-tablet = 86%; // main content width (tablet)
-$main-content-width-mobile = 90%; // main content width (mobile)
-$post-tool-button-width = 38px; // post tool button width
-$component-spacing-value = 38px; // component-spacing-value (PC)
+$header-height = 70px // header height
+$header-shrink-height = $header-height * 0.72 // header shrink height
+$scroll-progress-bar-height = 2px // scroll progress bar height
+$main-content-width = 80% // main content width (PC)
+$main-content-width-tablet = 86% // main content width (tablet)
+$main-content-width-mobile = 90% // main content width (mobile)
+$post-tool-button-width = 38px // post tool button width
+$component-spacing-value = 38px // component-spacing-value (PC)
// main content max width
-$temp-content-max-width = hexo-config('style.content_max_width');
-$content-max-width = $temp-content-max-width ? convert($temp-content-max-width) : 1000px;
+$temp-content-max-width = hexo-config('style.content_max_width')
+$content-max-width = $temp-content-max-width ? convert($temp-content-max-width) : 1000px
// ==============================================================================================
// media query
// ==============================================================================================
-$media-max-width = 780px; // media query max width (tablet)
-$media-max-width-mobile = 500px; // media query max width (mobile)
+$media-max-width = 780px // media query max width (tablet)
+$media-max-width-mobile = 500px // media query max width (mobile)
-keep-tablet()
- @media (max-width: $media-max-width)
+keep-tablet() {
+ @media (max-width $media-max-width) {
{ block }
+ }
+}
-keep-mobile()
- @media (max-width: $media-max-width-mobile)
+keep-mobile() {
+ @media (max-width $media-max-width-mobile) {
{ block }
+ }
+}
// ==============================================================================================
// z-index
// ==============================================================================================
-$z-index-1 = 1001;
-$z-index-2 = 1002;
-$z-index-3 = 1003;
-$z-index-4 = 1004;
-$z-index-5 = 1005;
-$z-index-6 = 1006;
-$z-index-7 = 1007;
-$z-index-8 = 1008;
-$z-index-9 = 1009;
+$z-index-1 = 1001
+$z-index-2 = 1002
+$z-index-3 = 1003
+$z-index-4 = 1004
+$z-index-5 = 1005
+$z-index-6 = 1006
+$z-index-7 = 1007
+$z-index-8 = 1008
+$z-index-9 = 1009
// ==============================================================================================
// theme primary color
// ==============================================================================================
-$temp-color = hexo-config('style.primary_color');
-$primary-color = $temp-color ? convert($temp-color) : #0066CC;
+$temp-color = hexo-config('style.primary_color')
+$primary-color = $temp-color ? convert($temp-color) : #0066cc
// ==============================================================================================
// theme light mode color set
// ==============================================================================================
-$background-color = #fff;
-$second-background-color = darken($background-color, 3%);
-$default-text-color = #50505c;
-$first-text-color = darken($default-text-color, 10%);
-$second-text-color = darken($default-text-color, 5%);
-$third-text-color = lighten($default-text-color, 30%);
-$fourth-text-color = lighten($default-text-color, 90%);
-$border-color = darken($background-color, 30%);
-$selection-color = lighten($primary-color, 10%);
-$shadow-color = rgba(0, 0, 0, 0.2);
-$shadow-hover-color = rgba(0, 0, 0, 0.28);
-$scrollbar-color = lighten($default-text-color, 6%);
-$scroll-bar-bg-color = darken($background-color, 10%);
-$link-color = darken($default-text-color, 10%);
-$copyright-info-color = #CC0033;
-$avatar-background-color = #0066CC;
-$header-transparent-background-1 = alpha($background-color, 0.28);
-$header-transparent-background-2 = alpha($background-color, 0.58);
-$pjax-progress-bar-color = linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
+$background-color = #fff
+$second-background-color = darken($background-color, 3%)
+$default-text-color = #50505c
+$first-text-color = darken($default-text-color, 10%)
+$second-text-color = darken($default-text-color, 5%)
+$third-text-color = lighten($default-text-color, 30%)
+$fourth-text-color = lighten($default-text-color, 90%)
+$border-color = darken($background-color, 30%)
+$selection-color = lighten($primary-color, 10%)
+$shadow-color = rgba(0, 0, 0, 0.2)
+$shadow-hover-color = rgba(0, 0, 0, 0.28)
+$scrollbar-color = lighten($default-text-color, 6%)
+$scroll-bar-bg-color = darken($background-color, 10%)
+$link-color = darken($default-text-color, 10%)
+$copyright-info-color = #cc0033
+$avatar-background-color = #0066cc
+$header-transparent-background-1 = alpha($background-color, 0.28)
+$header-transparent-background-2 = alpha($background-color, 0.58)
+$pjax-progress-bar-color = linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3)
// ==============================================================================================
// theme dark mode color set
// ==============================================================================================
-$dark-primary-color = $primary-color;
-$dark-background-color = #383940;
-$dark-second-background-color = darken($dark-background-color, 10%);
-$dark-default-text-color = #bebec6;
-$dark-first-text-color = lighten($dark-default-text-color, 30%);
-$dark-second-text-color = lighten($dark-default-text-color, 20%);
-$dark-third-text-color = darken($dark-default-text-color, 20%);
-$dark-fourth-text-color = darken($dark-default-text-color, 75%);
-$dark-border-color = lighten($dark-background-color, 20%);
-$dark-selection-color = $selection-color;
-$dark-shadow-color = rgba(128, 128, 128, 0.2);
-$dark-shadow-hover-color = rgba(128, 128, 128, 0.28);
-$dark-scrollbar-color = darken($dark-background-color, 10%);
-$dark-scroll-bar-bg-color = lighten($dark-background-color, 20%);
-$dark-link-color = lighten($dark-default-text-color, 10%);
-$dark-copyright-info-color = darken($copyright-info-color, 20%);
-$dark-avatar-background-color = darken($avatar-background-color, 10%);
-$dark-header-transparent-background-1 = alpha($dark-background-color, 0.28);
-$dark-header-transparent-background-2 = alpha($dark-background-color, 0.58);
-$dark-pjax-progress-bar-color = linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee);
+$dark-primary-color = $primary-color
+$dark-background-color = #383940
+$dark-second-background-color = darken($dark-background-color, 10%)
+$dark-default-text-color = #bebec6
+$dark-first-text-color = lighten($dark-default-text-color, 30%)
+$dark-second-text-color = lighten($dark-default-text-color, 20%)
+$dark-third-text-color = darken($dark-default-text-color, 20%)
+$dark-fourth-text-color = darken($dark-default-text-color, 75%)
+$dark-border-color = lighten($dark-background-color, 20%)
+$dark-selection-color = $selection-color
+$dark-shadow-color = rgba(128, 128, 128, 0.2)
+$dark-shadow-hover-color = rgba(128, 128, 128, 0.28)
+$dark-scrollbar-color = darken($dark-background-color, 10%)
+$dark-scroll-bar-bg-color = lighten($dark-background-color, 20%)
+$dark-link-color = lighten($dark-default-text-color, 10%)
+$dark-copyright-info-color = darken($copyright-info-color, 20%)
+$dark-avatar-background-color = darken($avatar-background-color, 10%)
+$dark-header-transparent-background-1 = alpha($dark-background-color, 0.28)
+$dark-header-transparent-background-2 = alpha($dark-background-color, 0.58)
+$dark-pjax-progress-bar-color = linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee)
// ==============================================================================================
// font
// ==============================================================================================
-$default-font-family = Optima-Regular, Optima, -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial;
-$default-font-size = 15.2px;
-$default-font-line-height = 22px;
-$default-font-weight = 400;
+$default-font-family = Optima-Regular, Optima, -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial
+$default-font-size = 15.2px
+$default-font-line-height = 22px
+$default-font-weight = 400
// ==============================================================================================
// light/dark mode color
// ==============================================================================================
root-color(mode) {
- --background-color: mode == 'light' ? $background-color : $dark-background-color;
- --second-background-color: mode == 'light' ? $second-background-color : $dark-second-background-color;
- --primary-color: mode == 'light' ? $primary-color : $dark-primary-color;
- --first-text-color: mode == 'light' ? $first-text-color : $dark-first-text-color;
- --second-text-color: mode == 'light' ? $second-text-color : $dark-second-text-color;
- --third-text-color: mode == 'light' ? $third-text-color : $dark-third-text-color;
- --fourth-text-color: mode == 'light' ? $fourth-text-color : $dark-fourth-text-color;
- --default-text-color: mode == 'light' ? $default-text-color : $dark-default-text-color;
- --border-color: mode == 'light' ? $border-color : $dark-border-color;
- --selection-color: mode == 'light' ? $selection-color : $dark-selection-color;
- --shadow-color: mode == 'light' ? $shadow-color : $dark-shadow-color;
- --shadow-hover-color: mode == 'light' ? $shadow-hover-color : $dark-shadow-hover-color;
- --scrollbar-color: mode == 'light' ? $scrollbar-color : $dark-scrollbar-color;
- --scroll-bar-bg-color: mode == 'light' ? $scroll-bar-bg-color : $dark-scroll-bar-bg-color;
- --link-color: mode == 'light' ? $link-color : $dark-link-color;
- --copyright-info-color: mode == 'light' ? $copyright-info-color : $dark-copyright-info-color;
- --avatar-background-color: mode == 'light' ? $avatar-background-color : $dark-avatar-background-color;
- --header-transparent-background-1: mode == 'light' ? $header-transparent-background-1 : $dark-header-transparent-background-1;
- --header-transparent-background-2: mode == 'light' ? $header-transparent-background-2 : $dark-header-transparent-background-2;
- --pjax-progress-bar-color : mode == 'light' ? $pjax-progress-bar-color : $dark-pjax-progress-bar-color;
+ --background-color mode == 'light' ? $background-color : $dark-background-color
+ --second-background-color mode == 'light' ? $second-background-color : $dark-second-background-color
+ --primary-color mode == 'light' ? $primary-color : $dark-primary-color
+ --first-text-color mode == 'light' ? $first-text-color : $dark-first-text-color
+ --second-text-color mode == 'light' ? $second-text-color : $dark-second-text-color
+ --third-text-color mode == 'light' ? $third-text-color : $dark-third-text-color
+ --fourth-text-color mode == 'light' ? $fourth-text-color : $dark-fourth-text-color
+ --default-text-color mode == 'light' ? $default-text-color : $dark-default-text-color
+ --border-color mode == 'light' ? $border-color : $dark-border-color
+ --selection-color mode == 'light' ? $selection-color : $dark-selection-color
+ --shadow-color mode == 'light' ? $shadow-color : $dark-shadow-color
+ --shadow-hover-color mode == 'light' ? $shadow-hover-color : $dark-shadow-hover-color
+ --scrollbar-color mode == 'light' ? $scrollbar-color : $dark-scrollbar-color
+ --scroll-bar-bg-color mode == 'light' ? $scroll-bar-bg-color : $dark-scroll-bar-bg-color
+ --link-color mode == 'light' ? $link-color : $dark-link-color
+ --copyright-info-color mode == 'light' ? $copyright-info-color : $dark-copyright-info-color
+ --avatar-background-color mode == 'light' ? $avatar-background-color : $dark-avatar-background-color
+ --header-transparent-background-1 mode == 'light' ? $header-transparent-background-1 : $dark-header-transparent-background-1
+ --header-transparent-background-2 mode == 'light' ? $header-transparent-background-2 : $dark-header-transparent-background-2
+ --pjax-progress-bar-color mode == 'light' ? $pjax-progress-bar-color : $dark-pjax-progress-bar-color
}
:root {
- root-color('light');
+ root-color('light')
}
-@media (prefers-color-scheme: light) {
+@media (prefers-color-scheme light) {
:root {
- root-color('light');
+ root-color('light')
}
}
-@media (prefers-color-scheme: dark) {
+@media (prefers-color-scheme dark) {
:root {
- root-color('dark');
+ root-color('dark')
}
}
.light-mode {
- root-color('light');
+ root-color('light')
}
.dark-mode {
- root-color('dark');
+ root-color('dark')
}
diff --git a/source/css/layout/_partial/archive-list.styl b/source/css/layout/_partial/archive-list.styl
index 1afe04e..aef5654 100644
--- a/source/css/layout/_partial/archive-list.styl
+++ b/source/css/layout/_partial/archive-list.styl
@@ -1,80 +1,80 @@
-$archive-year-font-size = 1.8rem;
-$archive-year-count-font-size = 1.2rem;
-$article-title-font-size = 1.2rem;
-$article-date-font-size = 1rem;
+$archive-year-font-size = 1.8rem
+$archive-year-count-font-size = 1.2rem
+$article-title-font-size = 1.2rem
+$article-date-font-size = 1rem
.archive-list-container {
.archive-item {
- margin-bottom: $component-spacing-value;
+ margin-bottom $component-spacing-value
&:last-child {
- margin-bottom: 0;
+ margin-bottom 0
}
.archive-item-header {
- margin-bottom: 10px;
+ margin-bottom 0.8rem
.archive-year {
- font-size: $archive-year-font-size;
+ margin-right 6px
+ color var(--second-text-color)
+ font-weight 600
+ font-size $archive-year-font-size
+keep-tablet() {
- font-size: $archive-year-font-size - 0.2rem;
+ font-size $archive-year-font-size - 0.2rem
}
-
- color: var(--second-text-color);
- font-weight: 600;
- margin-right: 6px;
}
.archive-year-post-count {
- font-size: $archive-year-count-font-size;
- font-weight: 500;
- color: var(--second-text-color);
+ color var(--second-text-color)
+ font-weight 500
+ font-size $archive-year-count-font-size
+keep-tablet() {
- font-size: $archive-year-count-font-size * 0.9;
+ font-size $archive-year-count-font-size * 0.9
}
}
-
}
.article-list {
- padding-left: 10px;
+ padding-left 0.8rem
+keep-tablet() {
- padding-left: 0;
+ padding-left 0
}
.article-item {
- font-size: 1rem;
- margin-top: 18px;
+ margin-top 1.2rem
+ font-size 1rem
+keep-tablet() {
- margin-top: 16px;
+ margin-top 1.1rem
}
+keep-mobile() {
- margin-top: 14px;
+ margin-top 1rem
}
&:hover {
- a.article-title, .article-date {
- color: var(--primary-color);
+ a.article-title
+ .article-date {
+ color var(--primary-color)
}
}
a.article-title {
- color: var(--default-text-color);
+ color var(--default-text-color)
}
.article-date {
- font-size: $article-date-font-size;
- float: right;
+ float right
+ color var(--default-text-color)
+ font-size $article-date-font-size
}
}
}
diff --git a/source/css/layout/_partial/article-copyright-info.styl b/source/css/layout/_partial/article-copyright-info.styl
index 5fc6e99..8211516 100644
--- a/source/css/layout/_partial/article-copyright-info.styl
+++ b/source/css/layout/_partial/article-copyright-info.styl
@@ -1,39 +1,53 @@
.article-copyright-info-container {
- position: relative;
- width: 100%;
- box-sizing: border-box;
- padding: 10px 6px;
- font-size: 1rem;
- background: var(--second-background-color);
+ position relative
+ box-sizing border-box
+ width 100%
+ overflow hidden
+ font-size 1rem
+ background var(--second-background-color)
&::after {
- position: absolute;
- top: 0;
- left: 0;
- content: '';
- width: 6px;
- height: 100%;
- background: var(--copyright-info-color);
+ position absolute
+ top 0
+ left 0
+ width 0.5rem
+ height 100%
+ background var(--copyright-info-color)
+ content ''
}
- ul {
+ .copyright-info-content {
+ position relative
+ box-sizing border-box
+ padding 0.8rem 0.8rem 0.8rem 1.3rem
+ overflow-x auto
- margin-left: 10px;
+ &::-webkit-scrollbar {
+ width 0.4rem
+ height 0.4rem
+ transition all 0.2s ease
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background var(--third-text-color)
+ }
+
+ &::-webkit-scrollbar-track {
+ background transparent
+ }
li {
- margin-bottom: 5px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- color: var(--default-text-color);
+ margin-bottom 0.4rem
+ color var(--default-text-color)
+ white-space nowrap
.license {
- font-weight: bold;
+ font-weight bold
}
&:last-child {
- margin-bottom: 0;
+ margin-bottom 0
}
}
}
diff --git a/source/css/layout/_partial/article-meta-info.styl b/source/css/layout/_partial/article-meta-info.styl
index dabd49d..617fa8f 100644
--- a/source/css/layout/_partial/article-meta-info.styl
+++ b/source/css/layout/_partial/article-meta-info.styl
@@ -1,59 +1,61 @@
.article-meta-info {
- font-size: 0.8rem;
+ font-size 0.8rem
.article-meta-item {
- margin-right: 10px;
- color: var(--third-text-color);
+ margin-right 0.6rem
+ color var(--third-text-color)
&:last-child {
- margin-right: 0;
+ margin-right 0
}
}
.article-date {
.mobile {
- display: none;
+ display none
}
+keep-tablet() {
.pc {
- display: none;
+ display none
}
.mobile {
- display: inline;
+ display inline
}
}
-
}
- .article-tags, .article-categories {
- display: inline;
+ .article-tags
+ .article-categories {
+ display inline
- ul, li {
- display: inline;
+ ul
+ li {
+ display inline
}
a {
- color: var(--third-text-color);
+ color var(--third-text-color)
&:hover {
- color: var(--primary-color);
+ color var(--primary-color)
}
}
}
.article-tags {
+keep-tablet() {
- display: none;
+ display none
}
}
- .article-min2read, .article-wordcount {
+ .article-min2read
+ .article-wordcount {
+keep-mobile() {
- display: none;
+ display none
}
}
}
diff --git a/source/css/layout/_partial/comment/comment.styl b/source/css/layout/_partial/comment/comment.styl
index 982fb73..1aabcdc 100644
--- a/source/css/layout/_partial/comment/comment.styl
+++ b/source/css/layout/_partial/comment/comment.styl
@@ -1,39 +1,38 @@
if (hexo-config('comment.enable') == true && hexo-config('comment.use') != "") {
if (hexo-config('comment.use') == "valine") {
- @require "./valine.styl";
-
- } else if (hexo-config('comment.use') == "gitalk") {
- @require "./gitalk.styl";
-
- } else if (hexo-config('comment.use') == "twikoo") {
- @require "./twikoo.styl";
+ @import "./valine.styl"
+ }
+ else if (hexo-config('comment.use') == "gitalk") {
+ @import "./gitalk.styl"
+ }
+ else if (hexo-config('comment.use') == "twikoo") {
+ @import "./twikoo.styl"
}
}
.comments-container {
- display: inline-block;
- margin-top: $component-spacing-value;
- width: 100%;
+ display inline-block
+ width 100%
+ margin-top $component-spacing-value
#comment-anchor {
- width: 100%;
- height: 10px;
+ width 100%
+ height 0.8rem
}
.comment-area-title {
- width: 100%;
- margin: 10px 0;
- font-size: 1.38rem;
- color: var(--default-text-color);
+ width 100%
+ margin 0.8rem 0
+ color var(--default-text-color)
+ font-size 1.38rem
i {
- color: var(--default-text-color);
+ color var(--default-text-color)
}
+keep-tablet() {
- margin: 5px 0;
- font-size: 1.2rem;
+ margin 0.4rem 0
+ font-size 1.2rem
}
}
-
}
diff --git a/source/css/layout/_partial/comment/gitalk.styl b/source/css/layout/_partial/comment/gitalk.styl
index 48f0a12..63b91da 100644
--- a/source/css/layout/_partial/comment/gitalk.styl
+++ b/source/css/layout/_partial/comment/gitalk.styl
@@ -1,9 +1,9 @@
-/* variables */
+// variables
$gt-color-main := #6190e8
$gt-color-sub := #a1a1a1
$gt-color-loader := #999999
$gt-color-error := #ff3860
-$gt-color-hr := #E9E9E9
+$gt-color-hr := #e9e9e9
$gt-color-comment-txt := #333333
$gt-color-link-active := #333333
$gt-color-btn := #ffffff
@@ -12,442 +12,551 @@ $gt-size-border-radius := 5px
$gt-breakpoint-mobile := 479px
$gt-mask-z-index := 9999
-/* functions & mixins */
+// functions & mixins
clearfix() {
- &:before,
+ &:before
&:after {
- content: " ";
- display: table;
+ display table
+ clear both
+ content ""
}
- &:after { clear: both; }
}
-em($px, $base-size = $gt-size-base)
+em($px, $base-size = $gt-size-base) {
u = unit($px)
- if (u is 'px')
+ if (u is 'px') {
unit($px / $base-size, 'em')
- else
+ }
+ else {
unit($px, u)
+ }
+}
-mobile()
- @media (max-width: $gt-breakpoint-mobile)
+mobile() {
+ @media (max-width $gt-breakpoint-mobile) {
{block}
+ }
+}
-/* variables - calculated */
+// variables - calculated
$gt-size-loader-dot := em(6px)
$gt-size-loader := em(28px)
$gt-size-avatar := em(50px)
$gt-size-avatar-mobi := em(32px)
-/* styles */
+// styles
// Put everything under container to avoid style conflicts
-.comments-container
- .gt-container
- box-sizing: border-box
- *
- box-sizing: border-box
- font-size: $gt-size-base
+.comments-container {
+ .gt-container {
+ box-sizing border-box
+ * {
+ box-sizing border-box
+ }
+ font-size $gt-size-base
// common
- a
- color: $gt-color-main
- &:hover
- color: lighten($gt-color-main, 20%)
- border-color: lighten($gt-color-main, 20%)
- &.is--active
- color: $gt-color-link-active
- cursor: default !important
- &:hover
- color: $gt-color-link-active
- .hide
- display: none !important
+ a {
+ color $gt-color-main
+ &:hover {
+ color lighten($gt-color-main, 20%)
+ border-color lighten($gt-color-main, 20%)
+ }
+ &.is--active {
+ color $gt-color-link-active
+ cursor default !important
+ &:hover {
+ color $gt-color-link-active
+ }
+ }
+ }
+ .hide {
+ display none !important
+ }
// icons
- .gt-svg
- display: inline-block
- width: em(16px)
- height: em(16px)
- vertical-align: sub
- svg
- width: 100%
- height: 100%
- fill: $gt-color-main
- .gt-ico
- display: inline-block
- &-text
- margin-left: em(5px)
- &-github
- width: 100%
- height: 100%
- .gt-svg
- width: 100%
- height: 100%
- svg
- fill: inherit
- /* loader */
- .gt-spinner
- position: relative
- &::before
- content: ''
- box-sizing: border-box
- position: absolute
- top: 3px
- width: em(12px)
- height: em(12px)
- margin-top: em(-3px)
- margin-left: em(-6px)
- border-radius: 50%
- border: 1px solid $gt-color-btn
- border-top-color: $gt-color-main
- animation: gt-kf-rotate .6s linear infinite
+ .gt-svg {
+ display inline-block
+ width em(16px)
+ height em(16px)
+ vertical-align sub
+ svg {
+ width 100%
+ height 100%
+ fill $gt-color-main
+ }
+ }
+ .gt-ico {
+ display inline-block
+ &-text {
+ margin-left em(5px)
+ }
+ &-github {
+ width 100%
+ height 100%
+ .gt-svg {
+ width 100%
+ height 100%
+ }
+ svg {
+ fill inherit
+ }
+ }
+ }
+ // loader
+ .gt-spinner {
+ position relative
+ &::before {
+ position absolute
+ top 3px
+ box-sizing border-box
+ width em(12px)
+ height em(12px)
+ margin-top em(-3px)
+ margin-left em(-6px)
+ border 1px solid $gt-color-btn
+ border-top-color $gt-color-main
+ border-radius 50%
+ animation gt-kf-rotate 0.6s linear infinite
+ content ''
+ }
+ }
- .gt-loader
- position: relative
- border: 1px solid $gt-color-loader
- animation: ease gt-kf-rotate 1.5s infinite
- display: inline-block
- font-style: normal
- width: $gt-size-loader
- height: $gt-size-loader
- //font-size: $gt-size-loader
- line-height: $gt-size-loader
- border-radius: 50%
- &:before
- content: ''
- position: absolute
- display: block
- top: 0
- left: 50%
- margin-top: -($gt-size-loader-dot / 2)
- margin-left: -($gt-size-loader-dot / 2)
- width: $gt-size-loader-dot
- height: $gt-size-loader-dot
- background-color: $gt-color-loader
- border-radius: 50%
+ .gt-loader {
+ position relative
+ display inline-block
+ width $gt-size-loader
+ height $gt-size-loader
+ font-style normal
+ // font-size: $gt-size-loader
+ line-height $gt-size-loader
+ border 1px solid $gt-color-loader
+ border-radius 50%
+ animation ease gt-kf-rotate 1.5s infinite
+ &:before {
+ position absolute
+ top 0
+ left 50%
+ display block
+ width $gt-size-loader-dot
+ height $gt-size-loader-dot
+ margin-top -($gt-size-loader-dot / 2)
+ margin-left -($gt-size-loader-dot / 2)
+ background-color $gt-color-loader
+ border-radius 50%
+ content ''
+ }
+ }
// avatar
- .gt-avatar
- display: inline-block
- width: $gt-size-avatar
- height: $gt-size-avatar
- +mobile()
- width: $gt-size-avatar-mobi
- height: $gt-size-avatar-mobi
- img
- width: 100%
- height: auto
- border-radius: 3px
- &-github
- width: $gt-size-avatar - em(2px)
- height: $gt-size-avatar - em(2px)
- cursor: pointer
- +mobile()
- width: $gt-size-avatar-mobi - em(2px)
- height: $gt-size-avatar-mobi - em(2px)
+ .gt-avatar {
+ display inline-block
+ width $gt-size-avatar
+ height $gt-size-avatar
+ +mobile() {
+ width $gt-size-avatar-mobi
+ height $gt-size-avatar-mobi
+ }
+ img {
+ width 100%
+ height auto
+ border-radius 3px
+ }
+ &-github {
+ width $gt-size-avatar - em(2px)
+ height $gt-size-avatar - em(2px)
+ cursor pointer
+ +mobile() {
+ width $gt-size-avatar-mobi - em(2px)
+ height $gt-size-avatar-mobi - em(2px)
+ }
+ }
+ }
// button
- .gt-btn
- padding: em(12px) em(20px)
- display: inline-block
- line-height: 1
- text-decoration: none
- white-space: nowrap
- cursor: pointer
- border: 1px solid $gt-color-main
- border-radius: $gt-size-border-radius
- background-color: $gt-color-main
- color: $gt-color-btn
- outline: none
- font-size: em(12px)
- &-text
- font-weight: 400
- &-loading
- position: relative
- margin-left: em(8px)
- display: inline-block
- width: em(12px)
- height: em(16px)
- vertical-align: top
- &.is--disable
- cursor: not-allowed
- opacity: 0.5
- &-login
- margin-right: 0
- &-preview
- background-color: var(--background-color)
- color: $gt-color-main
- &:hover
- background-color: var(--second-background-color)
- &-public
- &:hover
- background-color: lighten($gt-color-main, 20%)
- border-color: lighten($gt-color-main, 20%)
+ .gt-btn {
+ display inline-block
+ padding em(12px) em(20px)
+ color $gt-color-btn
+ font-size em(12px)
+ line-height 1
+ white-space nowrap
+ text-decoration none
+ background-color $gt-color-main
+ border 1px solid $gt-color-main
+ border-radius $gt-size-border-radius
+ outline none
+ cursor pointer
+ &-text {
+ font-weight 400
+ }
+ &-loading {
+ position relative
+ display inline-block
+ width em(12px)
+ height em(16px)
+ margin-left em(8px)
+ vertical-align top
+ }
+ &.is--disable {
+ cursor not-allowed
+ opacity 0.5
+ }
+ &-login {
+ margin-right 0
+ }
+ &-preview {
+ color $gt-color-main
+ background-color var(--background-color)
+ &:hover {
+ background-color var(--second-background-color)
+ }
+ }
+ &-public {
+ &:hover {
+ background-color lighten($gt-color-main, 20%)
+ border-color lighten($gt-color-main, 20%)
+ }
+ }
+ }
+ }
&-loadmore
// loadmore
/* error */
- .gt-error
- text-align: center
- margin: em(10px)
- color: $gt-color-error
+ .gt-error {
+ margin em(10px)
+ color $gt-color-error
+ text-align center
+ }
- /* initing */
- .gt-initing
- padding: em(20px) 0
- text-align: center
- &-text
- margin: em(10px) auto
- font-size: 92%
+ // initing
+ .gt-initing {
+ padding em(20px) 0
+ text-align center
+ &-text {
+ margin em(10px) auto
+ font-size 92%
+ }
+ }
- /* no int */
- .gt-no-init
- padding: em(20px) 0
- text-align: center
+ // no int
+ .gt-no-init {
+ padding em(20px) 0
+ text-align center
+ }
- /* link */
- .gt-link
- border-bottom: 1px dotted $gt-color-main
- &-counts, &-project
- text-decoration: none
+ // link
+ .gt-link {
+ border-bottom 1px dotted $gt-color-main
+ &-counts
+ &-project {
+ text-decoration none
+ }
+ }
- /* meta */
- .gt-meta
- margin: em(20px) 0
- padding: em(16px) 0
- position: relative
- border-bottom: 1px solid $gt-color-hr
- font-size: em(16px)
- z-index: 10
+ // meta
+ .gt-meta {
+ position relative
+ z-index 10
+ margin em(20px) 0
+ padding em(16px) 0
+ font-size em(16px)
+ border-bottom 1px solid $gt-color-hr
clearfix()
+ }
- .gt-counts
- margin: 0 em(10px) 0 0
- color: var(--default-text-color)
+ .gt-counts {
+ margin 0 em(10px) 0 0
+ color var(--default-text-color)
+ }
- .gt-user
- float: right
- margin: 0
- font-size: 92%
- &-pic
- width: 16px
- height: 16px
- vertical-align: top
- margin-right: em(8px)
- &-inner
- display: inline-block
- cursor: pointer
- .gt-user-name
- color: var(--default-text-color)
+ .gt-user {
+ float right
+ margin 0
+ font-size 92%
+ &-pic {
+ width 16px
+ height 16px
+ margin-right em(8px)
+ vertical-align top
+ }
+ &-inner {
+ display inline-block
+ cursor pointer
+ .gt-user-name {
+ color var(--default-text-color)
+ }
+ }
- .gt-ico
- margin: 0 0 0 em(5px)
- svg
- fill: var(--default-text-color)
- .is--poping
- .gt-ico
- svg
- fill: $gt-color-main
+ .gt-ico {
+ margin 0 0 0 em(5px)
+ svg {
+ fill var(--default-text-color)
+ }
+ }
+ .is--poping {
+ .gt-ico {
+ svg {
+ fill $gt-color-main
+ }
+ }
+ }
+ }
- .gt-version
- color: $gt-color-sub
- margin-left: em(6px)
+ .gt-version {
+ margin-left em(6px)
+ color $gt-color-sub
+ }
- .gt-copyright
- margin: 0 em(15px) em(8px)
- border-top: 1px solid var(--border-color)
- padding-top: em(8px)
+ .gt-copyright {
+ margin 0 em(15px) em(8px)
+ padding-top em(8px)
+ border-top 1px solid var(--border-color)
+ }
- /* popup */
- .gt-popup
- position: absolute
- right: 0
- top: em(38px)
- background: var(--background-color)
- display: inline-block
- border: 1px solid var(--border-color)
- padding: em(10px) 0
- font-size: em(14px)
- letter-spacing: .5px
- .gt-action
- cursor: pointer
- display: block
- margin: em(8px) 0
- padding: 0 em(18px)
- position: relative
- text-decoration: none
- &.is--active
- &:before
- content: ''
- width: em(4px)
- height: em(4px)
- background: $gt-color-main
- position: absolute
- left: em(8px)
- top: em(7px)
- /* header */
- .gt-header
- position: relative
- display: flex
- &-comment
- flex: 1
- margin-left: em(20px)
- +mobile()
- margin-left: em(14px)
- &-textarea
- padding: em(12px)
- display: block
- box-sizing: border-box
- width: 100%
- min-height: em(82px)
- max-height: em(240px)
- border-radius: $gt-size-border-radius
- border: 1px solid var(--border-color)
- font-size: em(14px)
- word-wrap: break-word
- resize: vertical
- color: var(--default-text-color)
- background-color: var(--fourth-text-color)
- outline: none
- transition: all 0.25s ease
- &:hover
- background-color: var(--background-color)
- &-preview
- padding: em(12px)
- border-radius: $gt-size-border-radius
- border: 1px solid var(--border-color)
- background-color: var(--background-color)
- &-controls
- position: relative
- margin: em(12px) 0 0
+ // popup
+ .gt-popup {
+ position absolute
+ top em(38px)
+ right 0
+ display inline-block
+ padding em(10px) 0
+ font-size em(14px)
+ letter-spacing 0.5px
+ background var(--background-color)
+ border 1px solid var(--border-color)
+ .gt-action {
+ position relative
+ display block
+ margin em(8px) 0
+ padding 0 em(18px)
+ text-decoration none
+ cursor pointer
+ &.is--active {
+ &:before {
+ position absolute
+ top em(7px)
+ left em(8px)
+ width em(4px)
+ height em(4px)
+ background $gt-color-main
+ content ''
+ }
+ }
+ }
+ }
+ // header
+ .gt-header {
+ position relative
+ display flex
+ &-comment {
+ flex 1
+ margin-left em(20px)
+ +mobile() {
+ margin-left em(14px)
+ }
+ }
+ &-textarea {
+ display block
+ box-sizing border-box
+ width 100%
+ min-height em(82px)
+ max-height em(240px)
+ padding em(12px)
+ color var(--default-text-color)
+ font-size em(14px)
+ word-wrap break-word
+ background-color var(--fourth-text-color)
+ border 1px solid var(--border-color)
+ border-radius $gt-size-border-radius
+ outline none
+ transition all 0.25s ease
+ resize vertical
+ &:hover {
+ background-color var(--background-color)
+ }
+ }
+ &-preview {
+ padding em(12px)
+ background-color var(--background-color)
+ border 1px solid var(--border-color)
+ border-radius $gt-size-border-radius
+ }
+ &-controls {
+ position relative
+ margin em(12px) 0 0
clearfix()
- +mobile()
- margin: 0
- &-tip
- font-size: em(14px)
- color: $gt-color-main
- text-decoration: none
- vertical-align: sub
- +mobile()
- display: none
- .gt-btn
- float: right
- margin-left: em(20px)
- +mobile()
- float: none
- width: 100%
- margin: em(12px) 0 0
+ +mobile() {
+ margin 0
+ }
+ &-tip {
+ color $gt-color-main
+ font-size em(14px)
+ text-decoration none
+ vertical-align sub
+ +mobile() {
+ display none
+ }
+ }
+ .gt-btn {
+ float right
+ margin-left em(20px)
+ +mobile() {
+ float none
+ width 100%
+ margin em(12px) 0 0
+ }
+ }
+ }
+ }
- &:after
- content: ''
- position: fixed
- bottom: 100%
- left: 0
- right: 0
- top: 0
- opacity: 0
- &.gt-input-focused
- position: relative
- &:after
- content: ''
- position: fixed
- bottom: 0
- left: 0
- right: 0
- top: 0
- background: #000
- opacity: 0.6
- transition: opacity .3s, bottom 0s
- z-index: $gt-mask-z-index
- .gt-header-comment
- z-index: $gt-mask-z-index + 1
+ &:after {
+ position fixed
+ top 0
+ right 0
+ bottom 100%
+ left 0
+ opacity 0
+ content ''
+ }
+ &.gt-input-focused {
+ position relative
+ &:after {
+ position fixed
+ top 0
+ right 0
+ bottom 0
+ left 0
+ z-index $gt-mask-z-index
+ background #000
+ opacity 0.6
+ transition opacity 0.3s, bottom 0s
+ content ''
+ }
+ .gt-header-comment {
+ z-index $gt-mask-z-index + 1
+ }
+ }
- /* comments */
- .gt-comments
- padding-top: em(20px)
- &-null
- text-align: center
- &-controls
- margin: em(20px) 0
- text-align: center
+ // comments
+ .gt-comments {
+ padding-top em(20px)
+ &-null {
+ text-align center
+ }
+ &-controls {
+ margin em(20px) 0
+ text-align center
+ }
+ }
- /* comment */
- .gt-comment
- position: relative
- padding: em(10px) 0
- display: flex
- &-content
- flex: 1
- margin-left: em(20px)
- padding: em(12px) em(16px)
- background-color: var(--second-background-color)
- overflow: auto
- transition: all ease 0.25s
- +mobile()
- margin-left: em(14px)
- padding: em(10px) em(12px)
- &-header
- margin-bottom: em(8px)
- font-size: em(14px)
- position: relative
- &-block-1
- float: right
- height: em(22px)
- width: em(32px)
- &-block-2
- float: right
- height: em(22px)
- width: em(64px)
- &-username
- font-weight: 500
- color: $gt-color-main
- text-decoration: none
- &:hover
- text-decoration: underline
- &-text
- margin-left: em(8px)
- color: $gt-color-sub
- &-date
- margin-left: em(8px)
- color: $gt-color-sub
- &-like, &-edit, &-reply
- position: absolute
- height: em(22px)
- &:hover
- cursor: pointer
+ // comment
+ .gt-comment {
+ position relative
+ display flex
+ padding em(10px) 0
+ &-content {
+ flex 1
+ margin-left em(20px)
+ padding em(12px) em(16px)
+ overflow auto
+ background-color var(--second-background-color)
+ transition all ease 0.25s
+ +mobile() {
+ margin-left em(14px)
+ padding em(10px) em(12px)
+ }
+ }
+ &-header {
+ position relative
+ margin-bottom em(8px)
+ font-size em(14px)
+ }
+ &-block-1 {
+ float right
+ width em(32px)
+ height em(22px)
+ }
+ &-block-2 {
+ float right
+ width em(64px)
+ height em(22px)
+ }
+ &-username {
+ color $gt-color-main
+ font-weight 500
+ text-decoration none
+ &:hover {
+ text-decoration underline
+ }
+ }
+ &-text {
+ margin-left em(8px)
+ color $gt-color-sub
+ }
+ &-date {
+ margin-left em(8px)
+ color $gt-color-sub
+ }
&-like
- top: 0
- right: em(32px)
- &-edit, &-reply
- top: 0
- right: 0
- &-body
- //color: $gt-color-comment-txt !important
- color: var(--second-text-color) !important
- .email-hidden-toggle a
- display: inline-block;
- height: 12px;
- padding: 0 9px;
- font-size: 12px;
- font-weight: 600;
- line-height: 6px;
- color: #444d56;
- text-decoration: none;
- vertical-align: middle;
- background: #dfe2e5;
- border-radius: 1px;
- &:hover
- background-color: #c6cbd1;
- .email-hidden-reply
- display: none;
- white-space: pre-wrap
- .email-signature-reply
- padding: 0 15px;
- margin: 15px 0;
- color: #586069;
- border-left: 4px solid #dfe2e5;
- .email-hidden-reply.expanded
- display: block
- &-admin
- .gt-comment-content
- background-color: var(--fourth-text-color)
+ &-edit
+ &-reply {
+ position absolute
+ height em(22px)
+ &:hover {
+ cursor pointer
+ }
+ }
+ &-like {
+ top 0
+ right em(32px)
+ }
+ &-edit
+ &-reply {
+ top 0
+ right 0
+ }
+ &-body {
+ // color: $gt-color-comment-txt !important
+ color var(--second-text-color) !important
+ .email-hidden-toggle a {
+ display inline-block
+ height 12px
+ padding 0 9px
+ color #444d56
+ font-weight 600
+ font-size 12px
+ line-height 6px
+ text-decoration none
+ vertical-align middle
+ background #dfe2e5
+ border-radius 1px
+ &:hover {
+ background-color #c6cbd1
+ }
+ }
+ .email-hidden-reply {
+ display none
+ white-space pre-wrap
+ .email-signature-reply {
+ margin 15px 0
+ padding 0 15px
+ color #586069
+ border-left 4px solid #dfe2e5
+ }
+ }
+ .email-hidden-reply.expanded {
+ display block
+ }
+ }
+ &-admin {
+ .gt-comment-content {
+ background-color var(--fourth-text-color)
+ }
+ }
+ }
- @keyframes gt-kf-rotate
- 0%
- transform: rotate(0)
- 100%
- transform: rotate(360deg)
+ @keyframes gt-kf-rotate {
+ 0% {
+ transform rotate(0)
+ }
+ 100% {
+ transform rotate(360deg)
+ }
+ }
+}
diff --git a/source/css/layout/_partial/comment/twikoo.styl b/source/css/layout/_partial/comment/twikoo.styl
index 96e7906..5e50b71 100644
--- a/source/css/layout/_partial/comment/twikoo.styl
+++ b/source/css/layout/_partial/comment/twikoo.styl
@@ -5,11 +5,11 @@
.tk-meta-input {
.el-input {
.el-input-group__prepend {
- color: var(--default-text-color);
+ color var(--default-text-color)
}
input {
- color: var(--default-text-color);
+ color var(--default-text-color)
}
}
}
@@ -17,7 +17,7 @@
.tk-input {
textarea {
- color: var(--default-text-color);
+ color var(--default-text-color)
}
}
@@ -28,83 +28,76 @@
.tk-action-icon {
svg {
- fill: var(--default-text-color);
+ fill var(--default-text-color)
}
&.OwO {
.OwO-body {
- color: var(--default-text-color);
- background-color: var(--background-color);
+ color var(--default-text-color)
+ background-color var(--background-color)
}
}
-
}
}
.tk-preview {
span {
- background: var(--second-background-color);
- color: var(--default-text-color);
+ color var(--default-text-color)
+ background var(--second-background-color)
}
}
-
}
.tk-preview-container {
- color: var(--default-text-color);
+ color var(--default-text-color)
}
.tk-comments-container {
.tk-comments-count {
span {
- color: var(--default-text-color);
+ color var(--default-text-color)
}
}
}
.tk-main {
- margin-bottom: 20px;
+ margin-bottom 1.4rem
.tk-meta {
.tk-nick {
- color: var(--default-text-color);
+ color var(--default-text-color)
}
.tk-tag {
&.tk-tag-green {
- background: -webkit-linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5);
- background: linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5);
- color: #fff;
- border none;
- border-radius: 5px;
+ color #fff
+ background -webkit-linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5)
+ background linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5)
+ border none
+ border-radius 0.4rem
}
-
}
.tk-time {
time {
- color: var(--default-text-color);
+ color var(--default-text-color)
}
}
-
-
}
.tk-content {
- color: var(--default-text-color);
+ color var(--default-text-color)
}
.tk-expand {
- color: var(--third-text-color);
+ color var(--third-text-color)
}
}
}
-
-
}
diff --git a/source/css/layout/_partial/comment/valine.styl b/source/css/layout/_partial/comment/valine.styl
index 6315a82..2ba18ea 100644
--- a/source/css/layout/_partial/comment/valine.styl
+++ b/source/css/layout/_partial/comment/valine.styl
@@ -4,17 +4,17 @@
.vwrap {
- border: 1px solid var(--third-text-color);
+ border 0.1rem solid var(--third-text-color)
.vheader {
.vinput {
- color: var(--default-text-color);
- border-color: var(--third-text-color);
+ color var(--default-text-color)
+ border-color var(--third-text-color)
&:focus {
- border-bottom: 1px dashed var(--primary-color) !important;
+ border-bottom 0.1rem dashed var(--primary-color) !important
}
}
}
@@ -23,45 +23,41 @@
.vedit {
.veditor {
- color: var(--default-text-color);
+ color var(--default-text-color)
}
.vctrl {
.vicon {
- fill: var(--default-text-color);
+ fill var(--default-text-color)
&.actived {
- fill: var(--primary-color);
+ fill var(--primary-color)
}
}
}
-
}
button.vsubmit {
-
- background: transparent !important;
- color: var(--default-text-color) !important;
- border: 1px solid var(--default-text-color) !important;
+ color var(--default-text-color) !important
+ background transparent !important
+ border 0.1rem solid var(--default-text-color) !important
&:hover {
- color: var(--primary-color) !important;
- border: 1px solid var(--primary-color) !important;
+ color var(--primary-color) !important
+ border 0.1rem solid var(--primary-color) !important
}
}
-
-
}
.vcount {
- color: var(--default-text-color);
+ color var(--default-text-color)
.vnum {
- color: var(--second-text-color);
+ color var(--second-text-color)
}
}
@@ -70,14 +66,14 @@
.vnick {
.author {
- font-weight: 450;
- font-size: 12px;
- padding: 2px;
- background: -webkit-linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5);
- background: linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5);
- color: #fff;
- margin-left: 2px;
- border-radius: 2px;
+ margin-left 0.15rem
+ padding 0.15rem
+ color #fff
+ font-weight 450
+ font-size 0.9rem
+ background -webkit-linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5)
+ background linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5)
+ border-radius 0.15rem
}
}
@@ -85,53 +81,49 @@
.vhead {
.vnick {
- color: var(--primary-color);
+ color var(--primary-color)
}
.vsys {
- color: var(--default-text-color);
- background: var(--fourth-text-color) !important;
+ color var(--default-text-color)
+ background var(--fourth-text-color) !important
}
}
.vcontent {
P {
- color: var(--default-text-color);
+ color var(--default-text-color)
code {
- color: var(--code-foreground);
- background: var(--code-background);
+ color var(--code-foreground)
+ background var(--code-background)
}
}
}
.vh {
- border-bottom-color: var(--border-color);
+ border-bottom-color var(--border-color)
}
.vquote {
- border-left-color: var(--border-color);
+ border-left-color var(--border-color)
}
}
.vcopy {
- color: var(--third-text-color);
+ color var(--third-text-color)
}
.vpage {
.vmore {
- border: 1px solid var(--border-color);
- color: var(--second-text-color);
+ color var(--second-text-color)
+ border 0.1rem solid var(--border-color)
}
}
-
-
}
-
-
}
diff --git a/source/css/layout/_partial/first-screen.styl b/source/css/layout/_partial/first-screen.styl
index dc4a2fb..d3ff565 100644
--- a/source/css/layout/_partial/first-screen.styl
+++ b/source/css/layout/_partial/first-screen.styl
@@ -34,11 +34,11 @@ $first-screen-font-color = $temp-font-color ? convert($temp-font-color) : var(--
padding-top 2rem
.description {
+ color $first-screen-font-color
font-weight bold
font-size $first-screen-font-size
line-height 1.8
text-align center
- color $first-screen-font-color
+keep-tablet() {
font-size $first-screen-font-size * 0.9
@@ -48,10 +48,10 @@ $first-screen-font-color = $temp-font-color ? convert($temp-font-color) : var(--
.s-icon-list {
position absolute
- box-sizing border-box
bottom 0
- font-size $first-screen-icon-size
display flex
+ box-sizing border-box
+ font-size $first-screen-icon-size
+keep-tablet() {
font-size $first-screen-icon-size * 0.9
diff --git a/source/css/layout/_partial/footer.styl b/source/css/layout/_partial/footer.styl
index e56559c..d618aee 100644
--- a/source/css/layout/_partial/footer.styl
+++ b/source/css/layout/_partial/footer.styl
@@ -1,39 +1,37 @@
.footer {
- font-size: 1rem;
- color: var(--third-text-color);
+ color var(--third-text-color)
+ font-size 1rem
a {
- color: var(--third-text-color);
-
+ color var(--third-text-color)
&:hover {
- color: var(--primary-color);
-
+ color var(--primary-color)
}
}
.info-container {
- padding-bottom: 1rem;
- text-align: center;
+ padding-bottom 1rem
+ text-align center
}
.info-item {
- margin: 0.3rem 0;
+ margin 0.3rem 0
+ color var(--third-text-color)
&.ypyun-info a {
- display: flex;
- align-items: center;
- justify-content: center;
+ display flex
+ align-items center
+ justify-content center
img {
- margin: 0 0.3rem;
+ margin 0 0.3rem
}
}
}
.icon-animate {
- animation: icon-animate 1.2s ease-in-out infinite;
+ animation icon-animate 1.2s ease-in-out infinite
}
-
}
diff --git a/source/css/layout/_partial/header.styl b/source/css/layout/_partial/header.styl
index bb053a4..921d015 100644
--- a/source/css/layout/_partial/header.styl
+++ b/source/css/layout/_partial/header.styl
@@ -1,96 +1,94 @@
-$logo-title-font-size = 2rem;
-$pc-search-icon-font-size = 1.5rem;
-$menu-bar-line-height = 2.5px;
-$logo-image-box-width = 46px;
+$logo-title-font-size = 2rem
+$pc-search-icon-font-size = 1.5rem
+$menu-bar-line-height = 2.5px
+$logo-image-box-width = 46px
.header-wrapper {
- width: 100%;
- height: 100%;
- box-sizing: border-box;
- display: flex;
- align-items: center;
- justify-content: center;
- padding-top: $scroll-progress-bar-height;
- background: var(--background-color);
+ display flex
+ align-items center
+ justify-content center
+ box-sizing border-box
+ width 100%
+ height 100%
+ padding-top $scroll-progress-bar-height
+ background var(--background-color)
- hover-style(false, 0, 0);
+ hover-style(false, 0, 0)
.header-content {
- position: relative;
- height: 100%;
- width: $main-content-width;
- max-width: $content-max-width;
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- z-index: $z-index-5;
+ position relative
+ z-index $z-index-5
+ display flex
+ flex-direction row
+ align-items center
+ justify-content space-between
+ width $main-content-width
+ max-width $content-max-width
+ height 100%
&.has-first-screen {
- max-width: $content-max-width * 1.2;
+ max-width $content-max-width * 1.2
}
+keep-tablet() {
- width: $main-content-width-tablet;
+ width $main-content-width-tablet
}
+keep-mobile() {
- width: $main-content-width-mobile;
+ width $main-content-width-mobile
}
.left {
- display: flex;
- align-items: center;
- transition-t("transform", "0", "0.2", "linear");
+ display flex
+ align-items center
+ transition-t("transform", "0", "0.2", "linear")
.header-shrink & {
- transform: scale(0.72);
- transform-origin: left;
+ transform scale(0.72)
+ transform-origin left
}
if (hexo-config('base_info.logo_img') || hexo-config('style.logo')) {
.logo-image {
- width: $logo-image-box-width;
- height: $logo-image-box-width;
- margin-right: 8px;
+ width $logo-image-box-width
+ height $logo-image-box-width
+ margin-right 8px
+keep-tablet() {
- width: $logo-image-box-width * 0.9;
- height: $logo-image-box-width * 0.9;
+ width $logo-image-box-width * 0.9
+ height $logo-image-box-width * 0.9
}
+keep-mobile() {
- width: $logo-image-box-width * 0.8;
- height: $logo-image-box-width * 0.8;
+ width $logo-image-box-width * 0.8
+ height $logo-image-box-width * 0.8
}
img {
- border-radius: 6px;
- width: 100%;
+ width 100%
+ border-radius 6px
}
}
-
}
.logo-title {
- font-size: $logo-title-font-size;
- font-weight: bold;
- letter-spacing: 1px;
- line-height: 1;
- color: var(--first-text-color);
+ color var(--first-text-color)
+ font-weight bold
+ font-size $logo-title-font-size
+ line-height 1
+ letter-spacing 1px
+keep-tablet() {
- font-size: $logo-title-font-size * 0.9;
+ font-size $logo-title-font-size * 0.9
}
+keep-mobile() {
- font-size: $logo-title-font-size * 0.8;
+ font-size $logo-title-font-size * 0.8
}
}
-
}
@@ -99,131 +97,129 @@ $logo-image-box-width = 46px;
.pc {
.menu-list {
- display: flex;
- align-items: center;
+ display flex
+ align-items center
+keep-tablet() {
- display: none;
+ display none
}
.menu-item {
- float: left;
- position: relative;
- margin-left: 30px;
- font-size: 1rem;
- cursor: pointer;
- color: var(--default-text-color);
+ position relative
+ float left
+ margin-left 2rem
+ color var(--default-text-color)
+ font-size 1rem
+ cursor pointer
&:first-child {
- margin-left: 0;
+ margin-left 0
}
- a:hover, .active {
+ a:hover
+ .active {
&::after {
- content: '';
- position: absolute;
- bottom: -10px;
- left: 50%;
- width: 100%;
- height: 2px;
- transform: translateX(-50%);
- background: var(--primary-color);
- transition-t("transform, bottom", "0, 0", "0.2, 0.2", "linear, linear");
+ position absolute
+ bottom -10px
+ left 50%
+ width 100%
+ height 2px
+ background var(--primary-color)
+ transform translateX(-50%)
+ content ''
+ transition-t("transform, bottom", "0, 0", "0.2, 0.2", "linear, linear")
.header-shrink & {
- bottom: -($header-shrink-height / 2 - 12);
+ bottom -($header-shrink-height / 2 - 12)
}
}
}
&.search {
- font-size: $pc-search-icon-font-size;
- margin-left: 26px;
+ margin-left 26px
+ font-size $pc-search-icon-font-size
i {
- color: var(--default-text-color);
+ color var(--default-text-color)
}
-
}
}
-
-
}
-
}
.mobile {
- display: flex;
- justify-content: space-between;
- align-items: center;
+ display flex
+ align-items center
+ justify-content space-between
.icon-item {
- display: none;
- position: relative;
- cursor: pointer;
- font-size: 18px;
- margin-left: 12px;
- width: 20px;
- height: 20px;
- color: var(--default-text-color);
+ position relative
+ display none
+ width 20px
+ height 20px
+ margin-left 12px
+ color var(--default-text-color)
+ font-size 18px
+ cursor pointer
i {
- color: var(--default-text-color);
+ color var(--default-text-color)
}
&:first-child {
- margin-left: 0;
+ margin-left 0
}
+keep-tablet() {
- display: flex;
- justify-content: center;
- align-items: center;
+ display flex
+ align-items center
+ justify-content center
}
}
.menu-bar {
.menu-bar-middle {
- width: 18px;
- height: $menu-bar-line-height;
- position: relative;
- background: var(--default-text-color);
+ position relative
+ width 18px
+ height $menu-bar-line-height
+ background var(--default-text-color)
.header-drawer-show & {
- background: transparent;
+ background transparent
}
- &::before, &::after {
- content: '';
- position: absolute;
- left: 0;
- width: 100%;
- height: $menu-bar-line-height;
- background: var(--default-text-color);
- transition-t("transform", "0", "0.38", "ease");
+ &::before
+ &::after {
+ position absolute
+ left 0
+ width 100%
+ height $menu-bar-line-height
+ background var(--default-text-color)
+ content ''
+ transition-t("transform", "0", "0.38", "ease")
}
&::before {
- top: -6px;
+ top -6px
.header-drawer-show & {
- transform: translateY(6px) rotate(45deg);
+ transform translateY(6px) rotate(45deg)
}
}
&::after {
- bottom: -6px;
+ bottom -6px
.header-drawer-show & {
- transform: translateY(-6px) rotate(-45deg);
+ transform translateY(-6px) rotate(-45deg)
}
}
}
@@ -234,74 +230,71 @@ $logo-image-box-width = 46px;
.header-drawer {
- width: 100%;
- padding: $header-height 0 20px 0;
- position: absolute;
- top: 0;
- left: 0;
- transform: scaleY(0);
- transform-origin: top;
- z-index: $z-index-2;
- background: var(--background-color);
- transition-t("transform", "0", "0.38", "ease");
+ position absolute
+ top 0
+ left 0
+ z-index $z-index-2
+ width 100%
+ padding $header-height 0 20px 0
+ background var(--background-color)
+ transform scaleY(0)
+ transform-origin top
+ transition-t("transform", "0", "0.38", "ease")
.header-drawer-show & {
- transform: scaleY(1);
+ transform scaleY(1)
}
.drawer-menu-list {
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: center;
+ display flex
+ flex-direction column
+ align-items center
+ justify-content flex-start
.drawer-menu-item {
- font-size: 1rem;
- margin: 6px 0;
- height: 38px;
+ height 38px
+ margin 6px 0
+ font-size 1rem
a {
- padding: 6px 20px;
- border-radius: 20px;
- color: var(--default-text-color);
+ padding 6px 20px
+ color var(--default-text-color)
+ border-radius 20px
&:hover {
- color: var(--second-text-color);
- border: 1px solid var(--default-text-color);
+ color var(--second-text-color)
+ border 1px solid var(--default-text-color)
}
&.active {
- border: 1px solid var(--default-text-color);
- color: var(--second-text-color);
+ color var(--second-text-color)
+ border 1px solid var(--default-text-color)
}
}
-
-
}
}
}
.window-mask {
- position: absolute;
- top: 0;
- width: 100%;
- height: 100vh;
- background: rgba(0, 0, 0, 0.4);
- z-index: $z-index-1;
- visibility: hidden;
- opacity: 0;
- transition-t("transform, opacity", "0, 0", "0.38, 0.38", "ease, ease");
+ position absolute
+ top 0
+ z-index $z-index-1
+ width 100%
+ height 100vh
+ background rgba(0, 0, 0, 0.4)
+ visibility hidden
+ opacity 0
+ transition-t("transform, opacity", "0, 0", "0.38, 0.38", "ease, ease")
.header-drawer-show & {
- visibility: visible;
- opacity: 1;
+ visibility visible
+ opacity 1
}
}
-
}
.header-drawer-show {
- overflow: hidden;
+ overflow hidden
}
diff --git a/source/css/layout/_partial/image-viewer.styl b/source/css/layout/_partial/image-viewer.styl
index 9dcfb5f..78294c5 100644
--- a/source/css/layout/_partial/image-viewer.styl
+++ b/source/css/layout/_partial/image-viewer.styl
@@ -1,36 +1,36 @@
.image-viewer-container {
- position: fixed;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- background: rgba(0, 0, 0, 0);
- visibility: hidden;
- z-index: $z-index-8;
- padding: 6%;
- box-sizing: border-box;
- transition-t("visibility, background", "0, 0", "0.3, 0.3", "ease, ease");
+ position fixed
+ top 0
+ left 0
+ z-index $z-index-8
+ display flex
+ align-items center
+ justify-content center
+ box-sizing border-box
+ width 100%
+ height 100%
+ padding 6%
+ background rgba(0, 0, 0, 0)
+ visibility hidden
+ transition-t("visibility, background", "0, 0", "0.3, 0.3", "ease, ease")
&.active {
- background: rgba(0, 0, 0, 0.5);
- visibility: visible;
+ background rgba(0, 0, 0, 0.5)
+ visibility visible
img {
- cursor: zoom-out;
- transform: scale(1);
- padding: 2px;
- background: var(--background-color);
+ padding 0.2rem
+ background var(--background-color)
+ transform scale(1)
+ cursor zoom-out
}
}
img {
- max-width: 100%;
- max-height: 100%;
- transform: scale(0);
- transition-t("transform", "0", "0.3", "ease");
+ max-width 100%
+ max-height 100%
+ transform scale(0)
+ transition-t("transform", "0", "0.3", "ease")
}
}
diff --git a/source/css/layout/_partial/local-search.styl b/source/css/layout/_partial/local-search.styl
index fc5871c..c0fc31b 100644
--- a/source/css/layout/_partial/local-search.styl
+++ b/source/css/layout/_partial/local-search.styl
@@ -3,35 +3,34 @@ $search-header-height = 3rem
.search-pop-overlay {
position fixed
- display flex
- height 100%
- width 100%
- left 0
top 0
+ left 0
+ z-index $z-index-8
+ display flex
+ width 100%
+ height 100%
background rgba(0, 0, 0, 0)
visibility hidden
- z-index $z-index-8
transition-t("visibility, background", "0, 0", "0.3, 0.3", "ease, ease")
&.active {
- visibility visible
background rgba(0, 0, 0, 0.35)
+ visibility visible
.search-popup {
transform scale(1)
}
-
}
.search-popup {
+ z-index $z-index-6
+ width 70%
+ height 80%
+ margin auto
background var(--background-color)
border-radius 0.4rem
- height 80%
- width 70%
- margin auto
transform scale(0)
- z-index $z-index-6
transition-t("transform", "0", "0.3", "ease")
+keep-tablet() {
@@ -43,18 +42,18 @@ $search-header-height = 3rem
}
.search-header {
+ display flex
+ align-items center
+ height $search-header-height
+ padding 0 1rem
background var(--fourth-text-color)
border-top-left-radius 0.2rem
border-top-right-radius 0.2rem
- display flex
- height $search-header-height
- align-items center
- padding 0 1rem
.search-input-field-pre {
- cursor pointer
- color var(--default-text-color)
margin-right 0.2rem
+ color var(--default-text-color)
+ cursor pointer
}
.search-input-container {
@@ -62,12 +61,12 @@ $search-header-height = 3rem
padding 0.2rem
.search-input {
+ width 100%
+ color var(--default-text-color)
+ font-size 1.2rem
background transparent
border 0
outline 0
- width 100%
- font-size 1.2rem
- color var(--default-text-color)
&::-webkit-search-cancel-button {
display none
@@ -86,21 +85,20 @@ $search-header-height = 3rem
font-size $icon-size
cursor pointer
- &:hover .fas, far, fab {
+ &:hover {
color var(--first-text-color)
}
}
-
}
#search-result {
position relative
- box-sizing border-box
display flex
+ box-sizing border-box
height 'calc(100% - %s)' % $search-header-height
- overflow auto
padding 0.3rem 1.5rem
+ overflow auto
.search-result-list {
width 100%
@@ -109,9 +107,9 @@ $search-header-height = 3rem
li {
box-sizing border-box
- border-bottom 0.1rem dashed var(--border-color)
- padding 0.8rem 0
margin 0.8rem 0
+ padding 0.8rem 0
+ border-bottom 0.1rem dashed var(--border-color)
&:last-child {
border-bottom none
@@ -120,30 +118,30 @@ $search-header-height = 3rem
.search-result-title {
position relative
- font-weight bold
- margin-bottom 0.8rem
- padding-left 1rem
display flex
align-items center
+ margin-bottom 0.8rem
+ padding-left 1rem
+ font-weight bold
&::after {
- content ''
position absolute
+ top 50%
+ left 0
width 0.4rem
height 0.4rem
- border-radius 50%
- top 50%
- transform translateY(-50%)
- left 0
background var(--default-text-color)
+ border-radius 50%
+ transform translateY(-50%)
+ content ''
}
}
.search-result {
- line-height 2rem
margin 0
padding-left 1rem
+ line-height 2rem
word-wrap break-word
}
@@ -154,20 +152,18 @@ $search-header-height = 3rem
}
.search-keyword {
- border-bottom 0.1rem dashed var(--primary-color)
color var(--primary-color)
font-weight bold
+ border-bottom 0.1rem dashed var(--primary-color)
}
-
}
}
#no-result {
- color var(--third-text-color)
margin auto
+ color var(--third-text-color)
}
-
}
}
}
diff --git a/source/css/layout/_partial/page-template.styl b/source/css/layout/_partial/page-template.styl
index 46f0458..05de19d 100644
--- a/source/css/layout/_partial/page-template.styl
+++ b/source/css/layout/_partial/page-template.styl
@@ -1,21 +1,25 @@
-$friend-link-item-height = 82px;
-$friend-link-item-height-tablet = 68px;
-$friend-link-item-interval = 16px;
-$friend-link-item-border-radius = 6px;
+$friend-link-item-height = 82px
+$friend-link-item-height-tablet = 68px
+$friend-link-item-interval = 16px
+$friend-link-item-border-radius = 6px
.page-template-container {
- keep-container(false, 0, 0, 30px, 30px);
+ keep-container(false, 0, 0, 2rem, 2rem)
.page-template-content {
- color: var(--default-text-color);
+ color var(--default-text-color)
- h1, h2, h3, h4, h5, h6 {
+ h1
+ h2
+ h3
+ h4
+ h5
+ h6 {
&:first-child {
- margin-top: 0;
+ margin-top 0
}
-
}
}
@@ -24,136 +28,130 @@ $friend-link-item-border-radius = 6px;
.friends-link-container {
.friends-link-list {
- position: relative;
+ position relative
.friends-link-item {
- box-sizing: border-box;
- position: relative;
- float: left;
- width: 50%;
- cursor: pointer;
- height: $friend-link-item-height;
- padding-bottom: $friend-link-item-interval;
+ position relative
+ float left
+ box-sizing border-box
+ width 50%
+ height $friend-link-item-height
+ padding-bottom $friend-link-item-interval
+ cursor pointer
+keep-tablet() {
- height: $friend-link-item-height-tablet;
+ height $friend-link-item-height-tablet
}
&:nth-child(odd) {
- padding-right: $friend-link-item-interval * 0.5;
+ padding-right $friend-link-item-interval * 0.5
}
&:nth-child(even) {
- padding-left: $friend-link-item-interval * 0.5;
+ padding-left $friend-link-item-interval * 0.5
}
.content {
- position: relative;
- width: 100%;
- height: 100%;
- box-shadow: 1px 1px 2px var(--shadow-color);
- border-radius: $friend-link-item-border-radius;
- padding-left: $friend-link-item-height - $friend-link-item-interval;
- box-sizing: border-box;
+ position relative
+ box-sizing border-box
+ width 100%
+ height 100%
+ padding-left $friend-link-item-height - $friend-link-item-interval
+ border-radius $friend-link-item-border-radius
+ box-shadow 1px 1px 2px var(--shadow-color)
+keep-tablet() {
- padding-left: $friend-link-item-height-tablet - $friend-link-item-interval;
+ padding-left $friend-link-item-height-tablet - $friend-link-item-interval
}
&:hover {
- box-shadow: 1px 1px 6px var(--shadow-color);
+ box-shadow 1px 1px 6px var(--shadow-color)
.info .name {
- color: var(--primary-color);
+ color var(--primary-color)
}
}
.radius {
- border-top-left-radius: $friend-link-item-border-radius;
- border-bottom-left-radius: $friend-link-item-border-radius;
+ border-top-left-radius $friend-link-item-border-radius
+ border-bottom-left-radius $friend-link-item-border-radius
}
.avatar {
- position: absolute;
- top: 0;
- left: 0;
- width: $friend-link-item-height - $friend-link-item-interval;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- font-size: 2rem;
- background: var(--second-background-color);
- color: var(--second-text-color);
+ position absolute
+ top 0
+ left 0
+ display flex
+ align-items center
+ justify-content center
+ width $friend-link-item-height - $friend-link-item-interval
+ height 100%
+ color var(--second-text-color)
+ font-size 2rem
+ background var(--second-background-color)
+keep-tablet() {
- width: $friend-link-item-height-tablet - $friend-link-item-interval;
+ width $friend-link-item-height-tablet - $friend-link-item-interval
}
img {
- box-sizing: border-box;
- position: relative;
- width: 100%;
- height: 100%;
+ position relative
+ box-sizing border-box
+ width 100%
+ height 100%
}
}
.info {
- position: relative;
- width: 100%;
- height: 100%;
- box-sizing: border-box;
- padding: 10px;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-items: flex-start;
+ position relative
+ display flex
+ flex-direction column
+ align-items center
+ justify-items flex-start
+ box-sizing border-box
+ width 100%
+ height 100%
+ padding 10px
+keep-tablet() {
- padding: 6px;
+ padding 6px
}
.name {
- width: 100%;
- height: 60%;
- font-size: 1.28rem;
- color: var(--second-text-color);
+ width 100%
+ height 60%
+ color var(--second-text-color)
+ font-size 1.28rem
+keep-tablet() {
- font-size: 1.08rem;
+ font-size 1.08rem
}
}
.description {
- width: 100%;
- height: 40%;
- font-size: 1rem;
- color: var(--third-text-color);
+ width 100%
+ height 40%
+ color var(--third-text-color)
+ font-size 1rem
+keep-tablet() {
- font-size: 0.98rem;
+ font-size 0.98rem
}
}
.ellipsis {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
+ overflow hidden
+ white-space nowrap
+ text-overflow ellipsis
}
-
}
}
-
}
-
}
-
}
-
}
-
}
diff --git a/source/css/layout/_partial/paginator.styl b/source/css/layout/_partial/paginator.styl
index 3b5ae7d..1b53825 100644
--- a/source/css/layout/_partial/paginator.styl
+++ b/source/css/layout/_partial/paginator.styl
@@ -1,13 +1,12 @@
.paginator {
- font-size: 1rem;
- margin-top: 30px;
+ margin-top 2rem
+ font-size 1rem
a.prev {
- float: left;
+ float left
}
a.next {
- float: right;
+ float right
}
-
}
diff --git a/source/css/layout/_partial/post-tools.styl b/source/css/layout/_partial/post-tools.styl
index 45bccd4..a89ef97 100644
--- a/source/css/layout/_partial/post-tools.styl
+++ b/source/css/layout/_partial/post-tools.styl
@@ -1,52 +1,51 @@
-$li-border-radius = 5px;
-$li-margin-bottom = 12px;
+$li-border-radius = 0.4rem
+$li-margin-bottom = 0.8rem
.post-tools-container {
.tools-list {
li {
- cursor: pointer;
- width: $post-tool-button-width;
- height: $post-tool-button-width;
- border-radius: 50%;
- font-size: 1.2rem;
- display: flex;
- align-items: center;
- justify-content: center;
- margin-bottom: $li-margin-bottom;
- background: var(--background-color);
- color: var(--default-text-color);
+ display flex
+ align-items center
+ justify-content center
+ width $post-tool-button-width
+ height $post-tool-button-width
+ margin-bottom $li-margin-bottom
+ color var(--default-text-color)
+ font-size 1.2rem
+ background var(--background-color)
+ border-radius 50%
+ cursor pointer
i {
- color: var(--default-text-color);
+ color var(--default-text-color)
}
&:hover {
- background: var(--primary-color);
- color: var(--background-color);
+ color var(--background-color)
+ background var(--primary-color)
i {
- color: var(--background-color);
+ color var(--background-color)
}
}
&:last-child {
- margin-bottom: 0;
+ margin-bottom 0
}
- hover-style(true, 1.06, 1.06);
+ hover-style(true, 1.06, 1.06)
&.page-aside-toggle {
- display: none;
+ display none
+keep-tablet() {
- display: none !important;
+ display none !important
}
}
}
}
-
}
diff --git a/source/css/layout/_partial/progress-bar.styl b/source/css/layout/_partial/progress-bar.styl
index 1519d72..85a2c49 100644
--- a/source/css/layout/_partial/progress-bar.styl
+++ b/source/css/layout/_partial/progress-bar.styl
@@ -1,74 +1,69 @@
.progress-bar-container {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- z-index: $z-index-9;
+ position fixed
+ top 0
+ left 0
+ z-index $z-index-9
+ width 100%
if (hexo-config('pjax.enable') == true) {
.pjax-progress-bar {
- position: absolute;
- top: 0;
- left: 0;
- height: 2px;
- width: 0;
- background: var(--pjax-progress-bar-color);
- visibility: hidden;
- opacity: 0;
- z-index: $z-index-8;
- transition-t("width", "0", "0.1", "linear");
+ position absolute
+ top 0
+ left 0
+ z-index $z-index-8
+ width 0
+ height 2px
+ background var(--pjax-progress-bar-color)
+ visibility hidden
+ opacity 0
+ transition-t("width, opacity", "0, 0", "0.1, 0.1", "linear")
&.show {
- opacity: 1;
- visibility: visible;
+ visibility visible
+ opacity 1
}
}
.pjax-progress-icon {
- position: absolute;
- top: 0;
- right: 0;
- z-index: $z-index-8;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 7px 6px 0 0;
- visibility: hidden;
- font-size: 1.1rem;
- color: var(--default-text-color);
+ position absolute
+ top 0.4rem
+ right 0.3rem
+ z-index $z-index-8
+ color var(--default-text-color)
+ font-size 1.1rem
+ visibility hidden
+keep-tablet() {
- padding: 6px 5px 0 0;
- font-size: 1rem;
+ top 0.3rem
+ right 0.2rem
+ font-size 1rem
}
&.show {
- visibility: visible;
+ visibility visible
}
}
-
}
if (hexo-config('style.scroll.progress_bar.enable') == true) {
.scroll-progress-bar {
- position: absolute;
- top: 0;
- left: 0;
- width: 0;
- height: $scroll-progress-bar-height;
- visibility: hidden;
- z-index: $z-index-7;
- background: var(--primary-color);
- transition-t("width", "0", "0.1", "linear");
+ position absolute
+ top 0
+ left 0
+ z-index $z-index-7
+ width 0
+ height $scroll-progress-bar-height
+ background var(--primary-color)
+ visibility hidden
+ transition-t("width", "0", "0.1", "linear")
&.hide {
- display: none !important;
+ display none !important
}
}
-
}
}
diff --git a/source/css/layout/_partial/side-tools.styl b/source/css/layout/_partial/side-tools.styl
index 1d298be..cc867c2 100644
--- a/source/css/layout/_partial/side-tools.styl
+++ b/source/css/layout/_partial/side-tools.styl
@@ -1,55 +1,55 @@
-$tools-item-width = 32px;
-$tools-item-font-size = 1.1rem;
-$tools-item-border-radius = 1px;
+$tools-item-width = 2.2rem
+$tools-item-font-size = 1.1rem
+$tools-item-border-radius = 0.1rem
.side-tools-container {
- position: relative;
+ position relative
.tools-item {
- width: $tools-item-width;
- height: $tools-item-width;
- font-size: $tools-item-font-size;
- margin-bottom: 3px;
- cursor: pointer;
- border-right: none;
- border-radius: $tools-item-border-radius;
- box-shadow: 1px 1px 3px var(--shadow-color);
- color: var(--default-text-color);
- background: var(--background-color);
+ width $tools-item-width
+ height $tools-item-width
+ margin-bottom 0.2rem
+ color var(--default-text-color)
+ font-size $tools-item-font-size
+ background var(--background-color)
+ border-right none
+ border-radius $tools-item-border-radius
+ box-shadow 0.1rem 0.1rem 0.2rem var(--shadow-color)
+ cursor pointer
i {
- color: var(--default-text-color);
+ color var(--default-text-color)
}
&:hover {
- color: var(--background-color);
- background: var(--primary-color);
- box-shadow: 2px 2px 6px var(--shadow-color);
+ color var(--background-color)
+ background var(--primary-color)
+ box-shadow 0.2rem 0.2rem 0.4rem var(--shadow-color)
i {
- color: var(--background-color);
+ color var(--background-color)
}
}
+keep-tablet() {
- width: $tools-item-width * 0.9;
- height: $tools-item-width * 0.9;
- font-size: $tools-item-font-size * 0.9;
- margin-bottom: 2px;
+ width $tools-item-width * 0.9
+ height $tools-item-width * 0.9
+ margin-bottom 0.2rem
+ font-size $tools-item-font-size * 0.9
}
&.rss {
a {
- border-radius: $tools-item-border-radius;
- width: 100%;
- height: 100%;
+ width 100%
+ height 100%
+ border-radius $tools-item-border-radius
&:hover {
- color: var(--background-color);
- background: var(--primary-color);
- box-shadow: 2px 2px 6px var(--shadow-color);
+ color var(--background-color)
+ background var(--primary-color)
+ box-shadow 0.2rem 0.2rem 0.4rem var(--shadow-color)
}
}
}
@@ -57,20 +57,20 @@ $tools-item-border-radius = 1px;
.side-tools-list {
- opacity: 0;
- transform: translateX(100%);
- transition-t("transform, opacity", "0, 0", "0.2, 0.2", "linear, linear");
+ transform translateX(100%)
+ opacity 0
+ transition-t("transform, opacity", "0, 0", "0.2, 0.2", "linear, linear")
.tool-expand-width {
+keep-tablet() {
- display: none;
+ display none
}
}
&.show {
- opacity: 1;
- transform: translateX(0);
+ transform translateX(0)
+ opacity 1
}
}
@@ -79,35 +79,32 @@ $tools-item-border-radius = 1px;
if (hexo-config('style.scroll.percent.enable') == true) {
.tool-scroll-to-top {
- display: none;
+ display none
&.show {
- display: flex;
+ display flex
}
&:hover {
.percent {
- display: none;
+ display none
}
.arrow-up {
- display: flex;
+ display flex
}
-
}
.arrow-up {
- display: none;
+ display none
}
.percent {
- display: flex;
- font-size: 1rem;
+ display flex
+ font-size 1rem
}
-
}
-
}
}
}
diff --git a/source/css/layout/_partial/tagcloud.styl b/source/css/layout/_partial/tagcloud.styl
index f2109c9..7bb8db1 100644
--- a/source/css/layout/_partial/tagcloud.styl
+++ b/source/css/layout/_partial/tagcloud.styl
@@ -1,15 +1,15 @@
.tagcloud-container {
- keep-container(false, 0, 0, 20px, 0);
+ keep-container(false, 0, 0, 1.5rem, 0)
.tagcloud-content {
- text-align: justify;
+ text-align justify
a {
- padding: 10px 8px;
- display: inline-block;
- box-sizing: border-box;
+ display inline-block
+ box-sizing border-box
+ padding 0.7rem 0.5rem
}
}
}
diff --git a/source/css/layout/_partial/toc.styl b/source/css/layout/_partial/toc.styl
index ec48c65..ac1ca1a 100644
--- a/source/css/layout/_partial/toc.styl
+++ b/source/css/layout/_partial/toc.styl
@@ -1,70 +1,73 @@
.post-toc-wrap {
- width: 100%;
- font-size: 0.92rem;
- box-sizing: border-box;
+ box-sizing border-box
+ width 100%
+ font-size 0.92rem
.post-toc {
ol {
- list-style: none;
- margin: 0;
- padding: 0 2px 12px 10px;
- text-align: left;
+ margin 0
+ padding 0 2px 12px 10px
+ text-align left
+ list-style none
&:last-child {
- padding-bottom: 0;
+ padding-bottom 0
}
> ol {
- padding-left: 0;
+ padding-left 0
}
a {
- transition-property: all;
- transition();
+ transition-property all
+ transition()
}
}
.nav-item {
- line-height: 1.8;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
+ overflow hidden
+ line-height 1.8
+ white-space nowrap
+ text-overflow ellipsis
}
.nav {
.nav-child {
- display: hexo-config('toc.expand_all') ? block : none;
+ display hexo-config('toc.expand_all') ? block : none
}
.active > .nav-child {
- display: block;
+ display block
}
.active-current > .nav-child {
- display: block;
+ display block
> .nav-item {
- display: block;
+ display block
}
}
- .nav-number, .nav-text {
- color: var(--default-text-color);
+ .nav-number
+ .nav-text {
+ color var(--default-text-color)
}
.active > a {
- .nav-number, .nav-text {
- color: var(--primary-color);
+ .nav-number
+ .nav-text {
+ color var(--primary-color)
}
}
.active-current > a {
- .nav-number, .nav-text {
- color: var(--primary-color);
+ .nav-number
+ .nav-text {
+ color var(--primary-color)
}
}
}
diff --git a/source/css/layout/archive-content.styl b/source/css/layout/archive-content.styl
index ecdde4e..ba60b26 100644
--- a/source/css/layout/archive-content.styl
+++ b/source/css/layout/archive-content.styl
@@ -1,5 +1,5 @@
.archive-container {
- keep-container(false, 0, 0, 30px, 30px);
+ keep-container(false, 0, 0, 2rem, 2rem)
}
diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl
index c9c1608..b968620 100644
--- a/source/css/layout/article-content.styl
+++ b/source/css/layout/article-content.styl
@@ -1,224 +1,218 @@
-$avatarWidth = 46px;
-$arrow-icon-width = 16px;
-$post-nav-max-width = 220px;
-$article-title-font-size = 1.6rem;
+$avatarWidth = 46px
+$arrow-icon-width = 16px
+$post-nav-max-width = 220px
+$article-title-font-size = 1.6rem
.article-content-container {
- keep-container(false, 0, 0, 30px, 30px);
+ keep-container(false, 0, 0, 2rem, 2rem)
+keep-mobile() {
- padding: 1.2rem 0.2rem;
- box-shadow: none;
+ padding 1.2rem 0.2rem
+ box-shadow none
}
.article-title {
- color: var(--second-text-color);
- font-weight: 600;
- font-size: $article-title-font-size;
+ color var(--second-text-color)
+ font-weight 600
+ font-size $article-title-font-size
+keep-tablet() {
- font-size: $article-title-font-size * 0.9;
+ font-size $article-title-font-size * 0.9
}
+keep-mobile() {
- font-size: $article-title-font-size * 0.8;
+ font-size $article-title-font-size * 0.8
}
}
.article-header {
- position: relative;
- padding-left: $avatarWidth;
- width: 100%;
- height: $avatarWidth;
- box-sizing: border-box;
+ position relative
+ box-sizing border-box
+ width 100%
+ height $avatarWidth
+ padding-left $avatarWidth
.avatar {
- position: absolute;
- top: 0
- left: 0;
- width: $avatarWidth;
- height: $avatarWidth;
- padding: 1px;
- box-sizing: border-box;
- border: 1px solid var(--border-color);
- border-radius: 50%;
+ position absolute
+ top 0
+ left 0
+ box-sizing border-box
+ width $avatarWidth
+ height $avatarWidth
+ padding 1px
+ border 1px solid var(--border-color)
+ border-radius 50%
img {
- border-radius: 50%;
- width: 100%;
- height: 100%;
- background: var(--avatar-background-color);
+ width 100%
+ height 100%
+ background var(--avatar-background-color)
+ border-radius 50%
}
-
}
.info {
- padding: 2px 0;
- margin-left: 10px;
- box-sizing: border-box;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- width: 100%;
- height: 100%;
+ display flex
+ flex-direction column
+ justify-content space-between
+ box-sizing border-box
+ width 100%
+ height 100%
+ margin-left 10px
+ padding 2px 0
.author {
- font-weight: 600;
- font-size: 1.18rem;
- display: flex;
- align-items: center;
+ display flex
+ align-items center
+ font-weight 600
+ font-size 1.18rem
.name {
- color: var(--default-text-color);
+ color var(--default-text-color)
}
.author-label {
- margin-left: 10px;
- font-size: 0.8rem;
- font-weight: 500;
- padding: 0 5px;
- border-radius: 5px;
- color: #fff;
- background: var(--selection-color);
+ margin-left 10px
+ padding 0 5px
+ color #fff
+ font-weight 500
+ font-size 0.8rem
+ background var(--selection-color)
+ border-radius 5px
}
-
}
}
-
}
- .article-header, .article-header-meta-info {
- margin-top: 16px;
+ .article-header
+ .article-header-meta-info {
+ margin-top 16px
+keep-tablet() {
- transform: scale(0.9);
- transform-origin: left top;
+ transform scale(0.9)
+ transform-origin left top
}
}
.article-content {
- margin-top: $component-spacing-value;
- padding-bottom: 10px;
- word-wrap: break-word;
- border-bottom: 1px solid var(--border-color);
- color: var(--default-text-color);
+ margin-top $component-spacing-value
+ padding-bottom 10px
+ color var(--default-text-color)
+ word-wrap break-word
+ border-bottom 1px solid var(--border-color)
}
.post-tags-box {
- display: none;
- margin-top: 1.6rem;
- justify-content: center;
- font-size: 1.1rem;
+ display none
+ justify-content center
+ margin-top 1.6rem
+ font-size 1.1rem
+keep-tablet() {
- display: flex;
+ display flex
}
+keep-mobile() {
- margin-top: 1.2rem;
- font-size: 1rem;
+ margin-top 1.2rem
+ font-size 1rem
}
.tag-item {
- margin: 0 0.25rem;
+ margin 0 0.25rem
}
}
.post-copyright-info {
- margin-top: $component-spacing-value;
- width: 100%;
+ width 100%
+ margin-top $component-spacing-value
+keep-tablet() {
- margin-top: $component-spacing-value * 0.8;
+ margin-top $component-spacing-value * 0.8
}
}
.article-nav {
- height: 40px;
- margin-top: $component-spacing-value;
+ height 40px
+ margin-top $component-spacing-value
- .article-prev, .article-next {
- max-width: $post-nav-max-width;
- height: 100%;
- box-sizing: border-box;
+ .article-prev
+ .article-next {
+ box-sizing border-box
+ max-width $post-nav-max-width
+ height 100%
- keep-container(true, 1.03, 1.03, 10px, 0);
+ keep-container(true, 1.03, 1.03, 10px, 0)
a {
- position: relative;
- display: block;
- width: 100%;
- height: 100%;
- box-sizing: border-box;
+ position relative
+ display block
+ box-sizing border-box
+ width 100%
+ height 100%
&.prev {
- padding-left: $arrow-icon-width;
+ padding-left $arrow-icon-width
}
&.next {
- padding-right: $arrow-icon-width;
+ padding-right $arrow-icon-width
}
.arrow-icon {
- position: absolute;
- top: 0;
- height: 100%;
- width: $arrow-icon-width;
+ position absolute
+ top 0
+ width $arrow-icon-width
+ height 100%
&.left {
- left: 0;
+ left 0
}
&.right {
- right: 0;
+ right 0
}
}
.title {
- width: 100%;
- height: 100%;
+ width 100%
+ height 100%
}
}
-
}
.article-prev {
- float: left;
+ float left
}
.article-next {
- float: right;
+ float right
}
.post-nav-item {
- display: none;
+ display none
+keep-tablet() {
- display: inline-block;
+ display inline-block
}
-
}
.post-nav-title-item {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
+ overflow hidden
+ white-space nowrap
+ text-overflow ellipsis
+keep-tablet() {
- display: none;
+ display none
}
}
-
}
-
-
}
diff --git a/source/css/layout/category-content.styl b/source/css/layout/category-content.styl
index 6f3ecd3..d443496 100644
--- a/source/css/layout/category-content.styl
+++ b/source/css/layout/category-content.styl
@@ -1,28 +1,28 @@
-$category-name-font-size = 1.6rem;
+$category-name-font-size = 1.6rem
.category-container {
- keep-container(false, 0, 0, 30px, 30px);
+ keep-container(false, 0, 0, 2rem, 2rem)
.category-name {
- color: var(--second-text-color);
- font-size: $category-name-font-size;
+ margin-bottom $component-spacing-value
+ padding-bottom 20px
+ color var(--second-text-color)
+
+ font-weight 600
+ font-size $category-name-font-size
+ border-bottom 1px solid var(--border-color)
i {
- color: var(--second-text-color);
+ color var(--second-text-color)
}
+keep-tablet() {
- font-size: $category-name-font-size * 0.9;
+ font-size $category-name-font-size * 0.9
}
+keep-mobile() {
- font-size: $category-name-font-size * 0.8;
+ font-size $category-name-font-size * 0.8
}
-
- font-weight: 600;
- padding-bottom: 20px;
- margin-bottom: $component-spacing-value;
- border-bottom: 1px solid var(--border-color);
}
}
diff --git a/source/css/layout/category-list.styl b/source/css/layout/category-list.styl
index 1b48d9e..cfd6f89 100644
--- a/source/css/layout/category-list.styl
+++ b/source/css/layout/category-list.styl
@@ -1,58 +1,57 @@
.category-list-container {
- keep-container(false, 0, 0, 30px, 0);
+ keep-container(false, 0, 0, 2rem, 0)
.category-list-content {
.all-category-list {
+ & > .all-category-list-item > .all-category-list-link {
+ font-size 1.1rem
+ }
+
li.all-category-list-item {
- font-size: 1rem;
- margin-bottom: 15px;
+ margin-bottom 1rem
+ font-size 1rem
&:last-child {
- margin-bottom: 0;
+ margin-bottom 0
}
span.all-category-list-count {
- float: right;
- color: var(--default-text-color);
+ float right
+ color var(--default-text-color)
&::before {
- content: '[';
+ content '['
}
&::after {
- content: ']';
+ content ']'
}
-
}
ul.all-category-list-child {
+ margin-top 1rem
- margin-left: 10px;
- margin-top: 15px;
+ margin-left 0.9rem
li {
&::before {
- content: '- ';
+ content '- '
}
- margin-bottom: 10px;
+ margin-bottom 0.9rem
&:last-child {
- margin-bottom: 0;
+ margin-bottom 0
}
-
}
}
}
-
-
}
-
}
}
diff --git a/source/css/layout/home-content.styl b/source/css/layout/home-content.styl
index 91e9b37..46a15f2 100644
--- a/source/css/layout/home-content.styl
+++ b/source/css/layout/home-content.styl
@@ -1,114 +1,111 @@
.home-content-container {
- background: var(--background-color);
+ background var(--background-color)
.home-article-list {
.home-article-item {
- position: relative;
+ position relative
- keep-container(true, 1.015, 1.015, 28px, 38px);
+ keep-container(true, 1.015, 1.015, 28px, 38px)
.top-icon {
- position: absolute;
- top: 10px;
- right: 12px;
- font-size: 1.2rem;
- transform: rotate(45deg);
- color: var(--third-text-color);
+ position absolute
+ top 10px
+ right 12px
+ color var(--third-text-color)
+ font-size 1.2rem
+ transform rotate(45deg)
+keep-tablet() {
- font-size: 1.16rem;
+ font-size 1.16rem
}
}
.home-article-title {
- position: relative;
- font-weight: 600;
- font-size: 1.4rem;
- line-height: 1.5;
- color: var(--second-text-color);
+ position relative
+ margin 0
+ color var(--second-text-color)
+ font-weight 600
+ font-size 1.4rem
+ line-height 1.5
+keep-tablet() {
- font-size: 1.3rem;
+ font-size 1.3rem
}
+keep-mobile() {
- font-size: 1.2rem;
+ font-size 1.2rem
}
-
- margin: 0;
-
}
.home-article-content {
- word-wrap: break-word;
- text-align: justify;
- margin: 20px 0;
- color: var(--default-text-color);
+ margin 20px 0
+ color var(--default-text-color)
+ text-align justify
+ word-wrap break-word
}
.home-article-meta-info-container {
- display: flex;
- justify-content: space-between;
- align-items: center;
- font-size: 0.92rem;
- color: var(--third-text-color);
+ display flex
+ align-items center
+ justify-content space-between
+ color var(--third-text-color)
+ font-size 0.92rem
.home-article-meta-info {
- letter-spacing: 0.5px;
+ letter-spacing 0.5px
span {
- margin-right: 10px;
+ margin-right 10px
&:last-child {
- margin-right: 0;
+ margin-right 0
}
- ul, li {
- display: inline;
+ ul
+ li {
+ display inline
}
}
.home-article-category {
+keep-mobile() {
- display: none;
+ display none
}
}
.home-article-tag {
+keep-tablet() {
- display: none;
+ display none
}
}
}
hr {
- border: none;
- flex: 1;
- height: 1px;
- background: var(--border-color);
- margin: 0 10px;
+ flex 1
+ height 1px
+ margin 0 10px
+ background var(--border-color)
+ border none
}
a {
- color: var(--third-text-color);
+ color var(--third-text-color)
&:hover {
- color: var(--primary-color)
+ color var(--primary-color)
}
}
}
-
-
}
}
}
diff --git a/source/css/layout/page.styl b/source/css/layout/page.styl
index 58a7047..0ce91b7 100644
--- a/source/css/layout/page.styl
+++ b/source/css/layout/page.styl
@@ -1,200 +1,198 @@
-$temp-width = hexo-config('style.left_side_width');
-$page-aside-width = $temp-width ? convert($temp-width) : 260px;
+$temp-width = hexo-config('style.left_side_width')
+$page-aside-width = $temp-width ? convert($temp-width) : 260px
.page-container {
- position: relative;
- box-sizing: border-box;
- width: 100%;
- height: auto;
- background: var(--background-color);
- transition-t("padding-left", "0", "0.3", "ease-out");
+ position relative
+ box-sizing border-box
+ width 100%
+ height auto
+ background var(--background-color)
+ transition-t("padding-left", "0", "0.3", "ease-out")
+keep-tablet() {
- padding-left: 0 !important;
+ padding-left 0 !important
}
.page-main-content {
- padding-top: $header-height;
- position: relative;
+ position relative
+ padding-top $header-height
&.home {
.transparent-1 {
- background: var(--header-transparent-background-1);
+ background var(--header-transparent-background-1)
}
.transparent-2 {
- background: var(--header-transparent-background-2);
+ background var(--header-transparent-background-2)
}
}
.header-shrink & {
- padding-top: $header-shrink-height;
+ padding-top $header-shrink-height
+keep-tablet() {
- padding-top: $header-shrink-height * 0.9;
+ padding-top $header-shrink-height * 0.9
}
+keep-mobile() {
- padding-top: $header-shrink-height * 0.8;
+ padding-top $header-shrink-height * 0.8
}
}
+keep-tablet() {
- padding-top: $header-height * 0.9;
+ padding-top $header-height * 0.9
}
+keep-mobile() {
- padding-top: $header-height * 0.8;
+ padding-top $header-height * 0.8
}
.page-main-content-top {
- position: fixed;
- top: 0;
- right: 0;
- width: 100%;
- height: $header-height;
- z-index: $z-index-5;
- box-sizing: border-box;
- transition-t("transform, padding-left, height", "0, 0, 0", "0.3, 0.2, 0.2", "ease-out, linear, ease");
+ position fixed
+ top 0
+ right 0
+ z-index $z-index-5
+ box-sizing border-box
+ width 100%
+ height $header-height
+ transition-t("transform, padding-left, height", "0, 0, 0", "0.3, 0.2, 0.2", "ease-out, linear, ease")
&.hide {
- transform: translateY(-105%);
+ transform translateY(-105%)
}
.header-shrink & {
- height: $header-shrink-height;
+ height $header-shrink-height
+keep-tablet() {
- height: $header-shrink-height * 0.9;
+ height $header-shrink-height * 0.9
}
+keep-mobile() {
- height: $header-shrink-height * 0.8;
+ height $header-shrink-height * 0.8
}
}
+keep-tablet() {
- height: $header-height * 0.9;
- padding-left: 0 !important;
+ height $header-height * 0.9
+ padding-left 0 !important
}
+keep-mobile() {
- height: $header-height * 0.8;
+ height $header-height * 0.8
}
-
}
.page-main-content-middle {
- box-sizing: border-box;
- width: 100%;
- display: flex;
- justify-content: center;
- padding: $component-spacing-value 0;
+ display flex
+ justify-content center
+ box-sizing border-box
+ width 100%
+ padding $component-spacing-value 0
+keep-tablet() {
- padding: $component-spacing-value * 0.8 0;
+ padding $component-spacing-value * 0.8 0
}
+keep-mobile() {
- padding: $component-spacing-value * 0.6 0;
+ padding $component-spacing-value * 0.6 0
}
.main-content {
- position: relative;
- box-sizing: border-box;
- width: $main-content-width;
- max-width: $content-max-width;
- height: 100%;
+ position relative
+ box-sizing border-box
+ width $main-content-width
+ max-width $content-max-width
+ height 100%
+keep-tablet() {
- width: $main-content-width-tablet;
+ width $main-content-width-tablet
}
+keep-mobile() {
- width: $main-content-width-mobile;
+ width $main-content-width-mobile
}
}
}
.page-main-content-bottom {
- width: 100%;
+ width 100%
}
}
.page-aside {
- position: fixed;
- top: 0;
- bottom: 0;
- left: - $page-aside-width;
- width: $page-aside-width;
- height: 100%;
- z-index: $z-index-6;
- overflow-y: auto;
- padding: 20px;
- box-sizing: border-box;
- background: var(--background-color);
+ position fixed
+ top 0
+ bottom 0
+ left - $page-aside-width
+ z-index $z-index-6
+ box-sizing border-box
+ width $page-aside-width
+ height 100%
+ padding 20px
+ overflow-y auto
+ background var(--background-color)
- hover-style(false, 0, 0);
+ hover-style(false, 0, 0)
- transition-t("left, transform", "0, 0", "0.3, 0.2", "ease-out, linear");
+ transition-t("left, transform", "0, 0", "0.3, 0.2", "ease-out, linear")
+keep-tablet() {
- left: 0 !important;
- display: none !important;
+ left 0 !important
+ display none !important
}
-
}
.post-tools {
- position: fixed;
- top: $header-height + $component-spacing-value;
- right: $component-spacing-value;
- transition-t("top", "0", "0.2", "ease");
+ position fixed
+ top $header-height + $component-spacing-value
+ right $component-spacing-value
+ transition-t("top", "0", "0.2", "ease")
.header-shrink & {
- top: $header-shrink-height + $component-spacing-value;
+ top $header-shrink-height + $component-spacing-value
+keep-tablet() {
- top: $header-shrink-height * 0.9 + $component-spacing-value;
+ top $header-shrink-height * 0.9 + $component-spacing-value
}
+keep-mobile() {
- top: $header-shrink-height * 0.8 + $component-spacing-value;
+ top $header-shrink-height * 0.8 + $component-spacing-value
}
}
+keep-tablet() {
- top: $header-height * 0.9 + $component-spacing-value;
- right: 10px;
- transform: scale(0.82);
- transform-origin: right top;
+ top $header-height * 0.9 + $component-spacing-value
+ right 10px
+ transform scale(0.82)
+ transform-origin right top
}
+keep-mobile() {
- top: $header-height * 0.8 + $component-spacing-value;
- right: 5px;
- transform: scale(0.72);
+ top $header-height * 0.8 + $component-spacing-value
+ right 5px
+ transform scale(0.72)
}
}
.right-bottom-side-tools {
- position: fixed;
- bottom: 5%;
- right: 0;
+ position fixed
+ right 0
+ bottom 5%
}
}
diff --git a/source/css/layout/tag-content.styl b/source/css/layout/tag-content.styl
index 2dc15db..3e793d8 100644
--- a/source/css/layout/tag-content.styl
+++ b/source/css/layout/tag-content.styl
@@ -1,28 +1,28 @@
-$tag-name-font-size = 1.6rem;
+$tag-name-font-size = 1.6rem
.tag-container {
- keep-container(false, 0, 0, 30px, 30px);
+ keep-container(false, 0, 0, 2rem, 2rem)
.tag-name {
- color: var(--second-text-color);
- font-size: $tag-name-font-size;
+ margin-bottom $component-spacing-value
+ padding-bottom 20px
+ color var(--second-text-color)
+
+ font-weight 600
+ font-size $tag-name-font-size
+ border-bottom 1px solid var(--border-color)
i {
- color: var(--second-text-color);
+ color var(--second-text-color)
}
+keep-tablet() {
- font-size: $tag-name-font-size * 0.9;
+ font-size $tag-name-font-size * 0.9
}
+keep-mobile() {
- font-size: $tag-name-font-size * 0.8;
+ font-size $tag-name-font-size * 0.8
}
-
- font-weight: 600;
- padding-bottom: 20px;
- margin-bottom: $component-spacing-value;
- border-bottom: 1px solid var(--border-color);
}
}
diff --git a/source/js/back2top.js b/source/js/back2top.js
index 0a71a6f..0a55150 100644
--- a/source/js/back2top.js
+++ b/source/js/back2top.js
@@ -1,55 +1,52 @@
/* global KEEP */
KEEP.initBack2Top = () => {
-
KEEP.utils = {
-
...KEEP.utils,
back2BottomButton_dom: document.querySelector('.tool-scroll-to-bottom'),
back2top() {
const scrollTopTimer = setInterval(function () {
- let top = document.body.scrollTop || document.documentElement.scrollTop;
- let speed = top / 2;
+ let top = document.body.scrollTop || document.documentElement.scrollTop
+ let speed = top / 2
if (document.body.scrollTop !== 0) {
- document.body.scrollTop -= speed;
+ document.body.scrollTop -= speed
} else {
- document.documentElement.scrollTop -= speed;
+ document.documentElement.scrollTop -= speed
}
if (top === 0) {
- clearInterval(scrollTopTimer);
+ clearInterval(scrollTopTimer)
}
- }, 50);
+ }, 50)
},
back2Bottom() {
- let scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
- let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
+ let scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight
+ let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
const scrollBottomTimer = setInterval(function () {
- if (!scrollTop) scrollTop = 10;
- scrollTop = Math.floor(scrollTop + scrollTop / 2);
- window.scrollTo(0, scrollTop);
+ if (!scrollTop) scrollTop = 10
+ scrollTop = Math.floor(scrollTop + scrollTop / 2)
+ window.scrollTo(0, scrollTop)
if (scrollTop >= scrollHeight) {
- clearInterval(scrollBottomTimer);
+ clearInterval(scrollBottomTimer)
}
- }, 50);
+ }, 50)
},
initBack2Top() {
this.back2TopButton_dom.addEventListener('click', () => {
- this.back2top();
- });
+ this.back2top()
+ })
},
initBack2Bottom() {
this.back2BottomButton_dom.addEventListener('click', () => {
- this.back2Bottom();
- });
- },
+ this.back2Bottom()
+ })
+ }
}
- KEEP.utils.initBack2Top();
- KEEP.utils.initBack2Bottom();
-
+ KEEP.utils.initBack2Top()
+ KEEP.utils.initBack2Bottom()
}
diff --git a/source/js/code-block-tools.js b/source/js/code-block-tools.js
index e397066..6199979 100644
--- a/source/js/code-block-tools.js
+++ b/source/js/code-block-tools.js
@@ -2,25 +2,31 @@
KEEP.initCodeBlockTools = () => {
HTMLElement.prototype.wrap = function (wrapper) {
- this.parentNode.insertBefore(wrapper, this);
- this.parentNode.removeChild(this);
- wrapper.appendChild(this);
- };
+ this.parentNode.insertBefore(wrapper, this)
+ this.parentNode.removeChild(this)
+ wrapper.appendChild(this)
+ }
- const { style: codeCopyStyle } = KEEP.theme_config?.code_copy;
- const { style: codeBlockStyle } = KEEP.theme_config?.code_block_tools;
- const isMac = (codeBlockStyle || codeCopyStyle || 'default') === 'mac';
- const foldedIconClassName = isMac ? 'fas fa-chevron-left' : 'fas fa-chevron-right';
- const { copy: copyLang, copied: copiedLang, fold: foldLang, folded: foldedLang } = KEEP.language_code_block;
+ const { style: codeCopyStyle } = KEEP.theme_config?.code_copy
+ const { style: codeBlockStyle } = KEEP.theme_config?.code_block_tools
+ const isMac = (codeBlockStyle || codeCopyStyle || 'default') === 'mac'
+ const foldedIconClassName = isMac ? 'fas fa-chevron-left' : 'fas fa-chevron-right'
+ const {
+ copy: copyLang,
+ copied: copiedLang,
+ fold: foldLang,
+ folded: foldedLang
+ } = KEEP.language_code_block
const foldDom = ``
- document.querySelectorAll('figure.highlight').forEach(element => {
- let codeLang = element.classList.length ? element.classList[1].toUpperCase() : '';
- if (codeLang === 'PLAINTEXT') { codeLang = '' }
- const highlightContainer = document.createElement('div');
- highlightContainer.classList.add('highlight-container');
- element.wrap(highlightContainer);
-
+ document.querySelectorAll('figure.highlight').forEach((element) => {
+ let codeLang = element.classList.length ? element.classList[1].toUpperCase() : ''
+ if (codeLang === 'PLAINTEXT') {
+ codeLang = ''
+ }
+ const highlightContainer = document.createElement('div')
+ highlightContainer.classList.add('highlight-container')
+ element.wrap(highlightContainer)
const codeLangDom = `${codeLang ? '' + codeLang + '' : ''}`
@@ -30,72 +36,74 @@ KEEP.initCodeBlockTools = () => {
${isMac ? foldDom + codeLangDom : '' + foldDom + codeLangDom + ''}