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

build(deps): use stylelint to format styl code

This commit is contained in:
XPoet 2022-09-30 10:51:42 +08:00
parent 4188e481cf
commit 9bfeda06a2
39 changed files with 1746 additions and 1647 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
.stylelintrc.js Normal file
View File

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

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

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

8
layout/_partial/footer.ejs
View File

@ -22,14 +22,10 @@ const { site_uv: bsz_site_uv, site_pv: bsz_site_pv, enable: bsz_enable } = theme
src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div class="website-count info-item">
<% if (bsz_site_uv) { %>
<span id="busuanzi_container_site_uv">
<%- __('site_uv') %>&nbsp;<span id="busuanzi_value_site_uv"></span>&ensp;
</span>
<%- __('site_uv') %>&nbsp;<span id="busuanzi_value_site_uv"></span>&ensp;
<% } %>
<% if (bsz_site_pv) { %>
<span id="busuanzi_container_site_pv">
<%- __('site_pv') %>&nbsp;<span id="busuanzi_value_site_pv"></span>
</span>
<%- __('site_pv') %>&nbsp;<span id="busuanzi_value_site_pv"></span>
<% } %>
</div>
<% } %>

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

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

13
package.json
View File

@ -4,8 +4,10 @@
"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",
"lint:style": "stylelint --fix source/css/**/**/**/*.styl",
"git:push": "git push --tag && git push -u origin dev",
"git:add": "npm run lint:style && git add ."
},
"repository": {
"type": "git",
@ -25,5 +27,10 @@
"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": {
"stylelint": "^14.13.0",
"stylelint-config-rational-order": "^0.1.2",
"stylelint-stylus": "^0.17.0"
}
}

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

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

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

@ -1,6 +1,6 @@
@require 'variables.styl'
@require 'animated.styl'
@require 'keep-theme.styl'
@import 'variables.styl'
@import 'animated.styl'
@import 'keep-theme.styl'
// ======================================================================
// all
@ -17,14 +17,14 @@
// ====================================
&::-webkit-scrollbar {
width 6px
height 6px
width 0.4rem
height 0.4rem
transition all 0.2s ease
}
&::-webkit-scrollbar-thumb {
background var(--scrollbar-color)
border-radius 1px
border-radius 0.1rem
}
&::-webkit-scrollbar-track {
@ -36,22 +36,23 @@
// ======================================================================
// html, body
// ======================================================================
html, body {
html
body {
position relative
width 100%
height 100%
margin 0
padding 0
color var(--default-text-color)
background var(--background-color)
font-family $default-font-family
font-weight $default-font-weight
font-size $default-font-size
font-family $default-font-family
line-height $default-font-line-height
background var(--background-color)
&::-webkit-scrollbar {
width 8px
height 8px
width 0.4rem
height 0.4rem
}
+keep-tablet() {
@ -64,7 +65,6 @@ html, body {
font-size $default-font-size * 0.9
line-height $default-font-line-height * 0.9
}
}
@ -72,17 +72,19 @@ html, body {
// selection
// ======================================================================
::selection {
background var(--selection-color)
color #fff
background var(--selection-color)
}
// ======================================================================
// ul, ol, li
// ======================================================================
ul, ol, li {
padding 0
ul
ol
li {
margin 0
padding 0
list-style none
}
@ -91,22 +93,24 @@ ul, ol, li {
// a
// ======================================================================
a {
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 ''
}
}
@ -196,15 +200,15 @@ button {
position absolute
top 0
left 50%
transform translateX(-50%) translateY(-108%)
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")
}
}

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

@ -11,28 +11,28 @@ disable-user-select() {
margin 1.4rem 0
.code-tools-box {
display flex
align-items center
justify-content space-between
box-sizing border-box
width 100%
padding 0.3rem 0.4rem
background var(--fourth-text-color)
border-top-left-radius 0.3rem
border-top-right-radius 0.3rem
display flex
justify-content space-between
align-items center
padding 0.3rem 0.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 {
@ -49,7 +49,6 @@ disable-user-select() {
.fold {
padding 0 0.4rem 0 0.2rem
}
}
@ -64,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 {
@ -74,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
@ -113,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
@ -123,11 +122,7 @@ disable-user-select() {
i {
font-size 1rem
}
}
}
}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,39 +1,53 @@
.article-copyright-info-container {
position: relative;
width: 100%;
box-sizing: border-box;
padding: 10px 6px;
font-size: 1rem;
background: var(--second-background-color);
position relative
box-sizing border-box
width 100%
font-size 1rem
background var(--second-background-color)
overflow hidden
&::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
}
}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -3,35 +3,34 @@ $search-header-height = 3rem
.search-pop-overlay {
position fixed
display flex
height 100%
width 100%
left 0
top 0
left 0
z-index $z-index-8
display flex
width 100%
height 100%
background rgba(0, 0, 0, 0)
visibility hidden
z-index $z-index-8
transition-t("visibility, background", "0, 0", "0.3, 0.3", "ease, ease")
&.active {
visibility visible
background rgba(0, 0, 0, 0.35)
visibility visible
.search-popup {
transform scale(1)
}
}
.search-popup {
z-index $z-index-6
width 70%
height 80%
margin auto
background var(--background-color)
border-radius 0.4rem
height 80%
width 70%
margin auto
transform scale(0)
z-index $z-index-6
transition-t("transform", "0", "0.3", "ease")
+keep-tablet() {
@ -43,18 +42,18 @@ $search-header-height = 3rem
}
.search-header {
display flex
align-items center
height $search-header-height
padding 0 1rem
background var(--fourth-text-color)
border-top-left-radius 0.2rem
border-top-right-radius 0.2rem
display flex
height $search-header-height
align-items center
padding 0 1rem
.search-input-field-pre {
cursor pointer
color var(--default-text-color)
margin-right 0.2rem
color var(--default-text-color)
cursor pointer
}
.search-input-container {
@ -62,12 +61,12 @@ $search-header-height = 3rem
padding 0.2rem
.search-input {
width 100%
color var(--default-text-color)
font-size 1.2rem
background transparent
border 0
outline 0
width 100%
font-size 1.2rem
color var(--default-text-color)
&::-webkit-search-cancel-button {
display none
@ -86,21 +85,22 @@ $search-header-height = 3rem
font-size $icon-size
cursor pointer
&:hover .fas, far, fab {
&:hover .fas
far
fab {
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 +109,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 +120,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 +154,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)
}
}
}
}

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

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

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

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

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

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

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

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

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

@ -1,55 +1,55 @@
$tools-item-width = 32px;
$tools-item-font-size = 1.1rem;
$tools-item-border-radius = 1px;
$tools-item-width = 32px
$tools-item-font-size = 1.1rem
$tools-item-border-radius = 1px
.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 3px
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 1px 1px 3px 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 2px 2px 6px 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 2px
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 2px 2px 6px var(--shadow-color)
}
}
}
@ -57,20 +57,20 @@ $tools-item-border-radius = 1px;
.side-tools-list {
opacity: 0;
transform: translateX(100%);
transition-t("transform, opacity", "0, 0", "0.2, 0.2", "linear, linear");
transform translateX(100%)
opacity 0
transition-t("transform, opacity", "0, 0", "0.2, 0.2", "linear, linear")
.tool-expand-width {
+keep-tablet() {
display: none;
display none
}
}
&.show {
opacity: 1;
transform: translateX(0);
transform translateX(0)
opacity 1
}
}
@ -79,35 +79,32 @@ $tools-item-border-radius = 1px;
if (hexo-config('style.scroll.percent.enable') == true) {
.tool-scroll-to-top {
display: none;
display none
&.show {
display: flex;
display flex
}
&:hover {
.percent {
display: none;
display none
}
.arrow-up {
display: flex;
display flex
}
}
.arrow-up {
display: none;
display none
}
.percent {
display: flex;
font-size: 1rem;
display flex
font-size 1rem
}
}
}
}
}

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

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

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

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

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

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

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

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

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

@ -1,28 +1,28 @@
$category-name-font-size = 1.6rem;
$category-name-font-size = 1.6rem
.category-container {
keep-container(false, 0, 0, 30px, 30px);
keep-container(false, 0, 0, 30px, 30px)
.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);
}
}

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

@ -1,58 +1,53 @@
.category-list-container {
keep-container(false, 0, 0, 30px, 0);
keep-container(false, 0, 0, 30px, 0)
.category-list-content {
.all-category-list {
li.all-category-list-item {
font-size: 1rem;
margin-bottom: 15px;
margin-bottom 15px
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 15px
margin-left: 10px;
margin-top: 15px;
margin-left 10px
li {
&::before {
content: '- ';
content '- '
}
margin-bottom: 10px;
margin-bottom 10px
&:last-child {
margin-bottom: 0;
margin-bottom 0
}
}
}
}
}
}
}

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

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

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

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

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

@ -1,28 +1,28 @@
$tag-name-font-size = 1.6rem;
$tag-name-font-size = 1.6rem
.tag-container {
keep-container(false, 0, 0, 30px, 30px);
keep-container(false, 0, 0, 30px, 30px)
.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);
}
}