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

style: CSS样式及配色优化

This commit is contained in:
XPoet 2020-04-03 18:18:42 +08:00
parent 0363261d7c
commit ff70fe886d
17 changed files with 228 additions and 220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
_config.yml
View File

@ -30,12 +30,6 @@ social:
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
#Instagram: https://instagram.com/yourname || instagram #Instagram: https://instagram.com/yourname || instagram
# Code Highlight theme
# Available value:
# normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal
# Valine. # Valine.
# You can get your appid and appkey from https://leancloud.cn # You can get your appid and appkey from https://leancloud.cn
# more info please open https://github.com/xCss/Valine # more info please open https://github.com/xCss/Valine
@ -62,7 +56,7 @@ busuanzi_count:
# Local Search # Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb # Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search: local_search:
enable: false enable: true
# If auto, trigger search by changing input. # If auto, trigger search by changing input.
# If manual, trigger search by pressing enter key or search button. # If manual, trigger search by pressing enter key or search button.
trigger: auto trigger: auto

2
languages/en.yml
View File

@ -15,7 +15,7 @@ rss_feed: RSS Feed
category: Category category: Category
tag: Tag tag: Tag
home: Home home: Home
archive: Archives archives: Archives
about: About about: About
site_uv: UV site_uv: UV
site_pv: PV site_pv: PV

2
languages/zh-CN.yml
View File

@ -15,7 +15,7 @@ rss_feed: RSS Feed
category: 分类 category: 分类
tag: 标签 tag: 标签
home: 首页 home: 首页
archive: 归档 archives: 归档
about: 关于 about: 关于
site_uv: 访问人数 site_uv: 访问人数
site_pv: 总访问量 site_pv: 总访问量

2
layout/article-content.ejs
View File

@ -7,7 +7,7 @@
<%- partial('_partial/article-meta-info', {articleObject: page, index: true}) %> <%- partial('_partial/article-meta-info', {articleObject: page, index: true}) %>
</div> </div>
<div class="article-content markdown"> <div class="article-content markdown-body">
<%- page.content %> <%- page.content %>
</div> </div>

2
layout/home-content.ejs
View File

@ -8,7 +8,7 @@
<a class="article-title-hover-animation" href="<%- url_for(post.path) %>"><%= post.title %></a> <a class="article-title-hover-animation" href="<%- url_for(post.path) %>"><%= post.title %></a>
</h3> </h3>
<div class="home-article-content markdown"> <div class="home-article-content markdown-body">
<% if (post.excerpt) { %> <% if (post.excerpt) { %>
<%- post.excerpt %> <%- post.excerpt %>
<% } else { %> <% } else { %>

2
layout/page.ejs
View File

@ -4,7 +4,7 @@
</div> </div>
<div class="page-middle"> <div class="page-middle">
<main class="main-content"> <main class="main-content normal-code-theme">
<% if (is_home()) { %> <% if (is_home()) { %>
<%- partial('home-content') %> <%- partial('home-content') %>

8
source/css/highlight/diff.styl
View File

@ -1,8 +0,0 @@
$highlight_theme = hexo-config("highlight_theme")
if $highlight_theme == "normal"
$highlight-deletion = #fdd
$highlight-addition = #dfd
else
$highlight-deletion = #008000
$highlight-addition = #800000

99
source/css/highlight/theme.styl
View File

@ -1,99 +0,0 @@
$highlight_theme = hexo-config("highlight_theme")
if $highlight_theme == "normal"
$highlight-background = #f7f7f7
$highlight-current-line = #efefef
$highlight-selection = #d6d6d6
$highlight-foreground = #4d4d4c
$highlight-comment = #8e908c
$highlight-red = #c82829
$highlight-orange = #f5871f
$highlight-yellow = #eab700
$highlight-green = #718c00
$highlight-aqua = #3e999f
$highlight-blue = #4271ae
$highlight-purple = #8959a8
$highlight-gutter = {
color: #869194,
bg-color: #eff2f3
}
if $highlight_theme == "night"
$highlight-background = #1d1f21
$highlight-current-line = #282a2e
$highlight-selection = #373b41
$highlight-foreground = #c5c8c6
$highlight-comment = #969896
$highlight-red = #cc6666
$highlight-orange = #de935f
$highlight-yellow = #f0c674
$highlight-green = #b5bd68
$highlight-aqua = #8abeb7
$highlight-blue = #81a2be
$highlight-purple = #b294bb
$highlight-gutter = {
color: lighten($highlight-background, 50%),
bg-color: darken($highlight-background, 100%)
}
if $highlight_theme == "night eighties"
$highlight-background = #2d2d2d
$highlight-current-line = #393939
$highlight-selection = #515151
$highlight-foreground = #cccccc
$highlight-comment = #999999
$highlight-red = #f2777a
$highlight-orange = #f99157
$highlight-yellow = #ffcc66
$highlight-green = #99cc99
$highlight-aqua = #66cccc
$highlight-blue = #6699cc
$highlight-purple = #cc99cc
$highlight-gutter = {
color: $highlight-comment,
bg-color: darken($highlight-background, 40%)
}
if $highlight_theme == "night blue"
$highlight-background = #002451
$highlight-current-line = #00346e
$highlight-selection = #003f8e
$highlight-foreground = #ffffff
$highlight-comment = #7285b7
$highlight-red = #ff9da4
$highlight-orange = #ffc58f
$highlight-yellow = #ffeead
$highlight-green = #d1f1a9
$highlight-aqua = #99ffff
$highlight-blue = #bbdaff
$highlight-purple = #ebbbff
$highlight-gutter = {
color: $highlight-comment,
bg-color: darken($highlight-background, 60%)
}
if $highlight_theme == "night bright"
$highlight-background = #000000
$highlight-current-line = #2a2a2a
$highlight-selection = #424242
$highlight-foreground = #eaeaea
$highlight-comment = #969896
$highlight-red = #d54e53
$highlight-orange = #e78c45
$highlight-yellow = #e7c547
$highlight-green = #b9ca4a
$highlight-aqua = #70c0b1
$highlight-blue = #7aa6da
$highlight-purple = #c397d8
$highlight-gutter = {
color: lighten($highlight-background, 40%),
bg-color: lighten($highlight-background, 16%)
}
$code-font-size = 0.9em;
$line-height-code-block = 1.5em;
$code-foreground = #ff7600;
$code-background = #f8f8f8;
$code-border-radius = 2px;
$code-font-family = consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace;

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

@ -143,7 +143,6 @@
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
list-style-type: none;
.drawer-menu-item { .drawer-menu-item {
@ -225,7 +224,7 @@
.header-wrapper-shrink { .header-wrapper-shrink {
background: var(--background-color); background: var(--background-color);
box-shadow: 0 1px 2px $border-color; box-shadow: 0 1px 2px var(--border-color);
.header-content { .header-content {
@ -268,4 +267,8 @@
display: block !important; display: block !important;
} }
.header-content {
width: $main-content-width * 1.2 !important;
}
} }

34
source/css/layout/common/basic.styl
View File

@ -10,11 +10,13 @@ html, body {
font-family: $default-font-family; font-family: $default-font-family;
font-weight: $default-font-weight; font-weight: $default-font-weight;
line-height: $default-font-line-height; line-height: $default-font-line-height;
-webkit-font-smoothing antialiased; //-webkit-font-smoothing antialiased;
transition: all 0.5s ease; transition: all 0.5s ease;
} }
ul, li, ol { ul,
li,
ol {
padding: 0; padding: 0;
margin: 0; margin: 0;
list-style: none; list-style: none;
@ -29,17 +31,13 @@ button {
background: transparent; background: transparent;
} }
p {
line-height: 2em;
}
a { a {
text-decoration: none; text-decoration: none;
color: var(--normal-text-color); color: var(--normal-text-color);
} }
a:hover, a:active { a:hover, a:active {
color: $primary-color; color: var(--primary-color);
} }
@ -49,15 +47,15 @@ a:hover, a:active {
position: relative; position: relative;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
color: $button-color; color: var(--third-text-color);
border: 1px solid $border-color; border: 1px solid var(--third-text-color);
white-space: nowrap; white-space: nowrap;
border-radius: 10em; border-radius: 10em;
padding: 0.5em 1em; padding: 0.5em 1em;
&:hover { &:hover {
color: $primary-color; color: var(--primary-color);
border: 1px solid $primary-color; border: 1px solid var(--primary-color);
} }
} }
@ -92,19 +90,7 @@ a:hover, a:active {
} }
// Clearfix. http://nicolasgallagher.com/micro-clearfix-hack/
clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
::selection { ::selection {
background: $primary-color; background: var(--selection-color);
color: #fff; color: #fff;
} }

70
source/css/layout/common/highlight/code-theme.styl Normal file
View File

@ -0,0 +1,70 @@
@require '../variables.styl'
$code-foreground = lighten($normal-text-color, 2%)
$code-background = darken($background-color, 5%)
$highlight-foreground = lighten($normal-text-color, 2%)
$highlight-background = darken($background-color, 2%)
$highlight-gutter-color = lighten($normal-text-color, 5%)
$highlight-gutter-bg-color = darken($background-color, 5%)
$highlight-comment = #8e908c
$highlight-red = #c82829
$highlight-orange = #f5871f
$highlight-yellow = #eab700
$highlight-green = #718c00
$highlight-aqua = #3e999f
$highlight-blue = #4271ae
$highlight-purple = #8959a8
$highlight-deletion = #fdd
$highlight-addition = #dfd
$night-code-foreground = lighten($dark-normal-text-color, 2%)
$night-code-background = darken($dark-background-color, 10%)
$night-highlight-foreground = lighten($dark-normal-text-color, 2%)
$night-highlight-background = darken($dark-background-color, 8%)
$night-highlight-gutter-color = lighten($dark-normal-text-color, 5%)
$night-highlight-gutter-bg-color = darken($dark-background-color, 10%)
$night-highlight-comment = #969896
$night-highlight-red = #cc6666
$night-highlight-orange = #de935f
$night-highlight-yellow = #f0c674
$night-highlight-green = #b5bd68
$night-highlight-aqua = #8abeb7
$night-highlight-blue = #81a2be
$night-highlight-purple = #b294bb
$night-highlight-deletion = #008000
$night-highlight-addition = #800000
.normal-code-theme {
--code-foreground: $code-foreground;
--code-background: $code-background;
--highlight-background: $highlight-background;
--highlight-foreground: $highlight-foreground;
--highlight-comment: $highlight-comment;
--highlight-red: $highlight-red;
--highlight-orange: $highlight-orange;
--highlight-yellow: $highlight-yellow;
--highlight-green: $highlight-green;
--highlight-aqua: $highlight-aqua;
--highlight-blue: $highlight-blue;
--highlight-purple: $highlight-purple;
--highlight-gutter-color: $highlight-gutter-color;
--highlight-gutter-bg-color: $highlight-gutter-bg-color;
}
.night-code-theme {
--code-foreground: $night-code-foreground;
--code-background: $night-code-background;
--highlight-background: $night-highlight-background;
--highlight-foreground: $night-highlight-foreground;
--highlight-comment: $night-highlight-comment;
--highlight-red: $night-highlight-red;
--highlight-orange: $night-highlight-orange;
--highlight-yellow: $night-highlight-yellow;
--highlight-green: $night-highlight-green;
--highlight-aqua: $night-highlight-aqua;
--highlight-blue: $night-highlight-blue;
--highlight-purple: $night-highlight-purple;
--highlight-gutter-color: $night-highlight-gutter-color;
--highlight-gutter-bg-color: $night-highlight-gutter-bg-color;
}

102
source/css/highlight/highlight.styl → source/css/layout/common/highlight/highlight.styl
View File

@ -1,24 +1,41 @@
@require "theme" @require "code-theme.styl"
@require "diff"
$code-block { $code-block {
overflow: auto; overflow: auto;
margin: 20px 0; margin: 20px 0;
padding: 0; padding: 0;
font-size $code-font-size; font-size 1em;
color: $highlight-foreground; color: var(--highlight-foreground);
background: $highlight-background; background: var(--highlight-background);
line-height: $line-height-code-block; line-height: 1.6em;
transition: all 0.5s ease;
&::-webkit-scrollbar {
height: 8px;
} }
pre, code { font-family: $code-font-family; } &::-webkit-scrollbar-thumb {
border-radius: 5px;
background: rgba(0, 0, 0, 0.2)
}
&::-webkit-scrollbar-track {
background: transparent;
}
}
pre, code {
font-family: "Source Code Pro", consolas, Menlo;
}
code { code {
padding: 4px; padding: 5px;
word-wrap: break-word; word-wrap: break-word;
color: $code-foreground; color: var(--code-foreground);
background: $code-background; background: var(--code-background);
border-radius: $code-border-radius; border-radius: 2px;
font-size: $code-font-size; font-size: $code-font-size;
} }
@ -28,7 +45,7 @@ pre {
code { code {
padding: 0; padding: 0;
color: $highlight-foreground; color: var(--highlight-foreground);
background: none; background: none;
text-shadow: none; text-shadow: none;
} }
@ -36,7 +53,7 @@ pre {
.highlight { .highlight {
@extend $code-block; @extend $code-block;
border-radius: 1px border-radius: 1px;
pre { pre {
border: none; border: none;
@ -57,36 +74,39 @@ pre {
} }
figcaption { figcaption {
clearfix();
font-size: 1em; font-size: 1em;
color: $highlight-foreground; color: var(--highlight-foreground);
line-height: 1em; line-height: 1em;
margin-bottom: 1em; margin-bottom: 1em;
a { a {
float: right; float: right;
color: $highlight-foreground; color: var(--highlight-foreground);
&:hover { border-bottom-color: $highlight-foreground; } &:hover {
border-bottom-color: var(--highlight-foreground);
}
} }
} }
.gutter pre { .gutter pre {
padding-left: 10px padding-left: 10px;
padding-right: 10px padding-right: 10px;
color: $highlight-gutter.color color: var(--highlight-gutter-color);
text-align: center text-align: center;
background-color: $highlight-gutter.bg-color background-color: var(--highlight-gutter-bg-color);
} }
.code pre { .code pre {
width: 100% width: 100%
padding-left: 10px padding-left: 10px
padding-right: 10px padding-right: 10px
background-color: $highlight-background background-color: var(--highlight-background)
} }
.line { height: 20px; } .line {
height: 20px;
}
} }
@ -100,17 +120,29 @@ pre {
.gist table { .gist table {
width: auto; width: auto;
td { border: none; } td {
border: none;
}
} }
// For diff highlight // For diff highlight
pre .deletion { background: $highlight-deletion; } pre .deletion {
pre .addition { background: $highlight-addition; } background: var(--highlight-deletion);
pre .meta { color: $highlight-purple; } }
pre .addition {
background: var(--highlight-addition);
}
pre .meta {
color: var(--highlight-purple);
}
pre { pre {
.comment { color: $highlight-comment; } .comment {
color: var(--highlight-comment);
}
.variable .variable
.attribute .attribute
@ -124,7 +156,7 @@ pre {
.css .id .css .id
.css .class .css .class
.css .pseudo { .css .pseudo {
color: $highlight-red; color: var(--highlight-red);
} }
.number .number
@ -134,7 +166,7 @@ pre {
.params .params
.constant .constant
.command { .command {
color: $highlight-orange; color: var(--highlight-orange);
} }
.ruby .class .title .ruby .class .title
@ -148,12 +180,12 @@ pre {
.special .special
.number .number
.formula { .formula {
color: $highlight-green; color: highlight-green;
} }
.title .title
.css .hexcolor { .css .hexcolor {
color: $highlight-aqua; color: var(--highlight-aqua);
} }
.function .function
@ -164,12 +196,12 @@ pre {
.perl .sub .perl .sub
.javascript .title .javascript .title
.coffeescript .title { .coffeescript .title {
color: $highlight-blue; color: var(--highlight-blue);
} }
.keyword .keyword
.javascript .function { .javascript .function {
color: $highlight-purple; color: var(--highlight-purple);
} }
} }

31
source/css/layout/common/markdown.styl
View File

@ -1,17 +1,20 @@
@require 'variables.styl' @require 'variables.styl'
.markdown { .markdown-body {
blockquote { blockquote {
border-left: 5px solid var(--normal-text-color); border-left: 5px solid var(--normal-text-color);
margin: 0; margin: 0;
padding: 0 0 0 10px; padding: 0 0 0 10px;
background: $border-color; color : var(--third-text-color);
} }
p {
line-height: 2em;
}
a { a {
color: $primary-color; color: var(--primary-color);
} }
@ -23,39 +26,39 @@
h1 { h1 {
color: var(--second-text-color); color: var(--second-text-color);
font-size: 2.2em; font-size: 2.2em;
font-weight: 700; font-weight: 600;
} }
h2 { h2 {
color: var(--second-text-color); color: var(--second-text-color);
font-size: 2em; font-size: 2em;
font-weight: 650; font-weight: 600;
} }
h3 { h3 {
color: var(--second-text-color); color: var(--second-text-color);
font-size: 1.8em; font-size: 1.8em;
font-weight: 600; font-weight: 550;
} }
h4 { h4 {
color: var(--second-text-color); color: var(--second-text-color);
font-size: 1.6em; font-size: 1.6em;
font-weight: 550; font-weight: 500;
} }
h5 { h5 {
color: var(--second-text-color); color: var(--second-text-color);
font-size: 1.4em; font-size: 1.4em;
font-weight: 500; font-weight: 450;
} }
h6 { h6 {
color: var(--second-text-color); color: var(--second-text-color);
font-size: 1.2em; font-size: 1.2em;
font-weight: 500; font-weight: 400;
} }
@ -63,23 +66,23 @@
padding: 2px; padding: 2px;
margin: 2px 0; margin: 2px 0;
width: 100%; width: 100%;
border: 1px solid $border-color; border: 1px solid var(--border-color);
} }
table:not(figure.highlight) { table:not(figure.highlight) {
border: solid $border-color; border: solid var(--border-color);
border-width: 1px 0 0 1px; border-width: 1px 0 0 1px;
thead { thead {
background: $border-color; background: var(--border-color);
tr { tr {
th { th {
margin: 0; margin: 0;
padding: 4px; padding: 4px;
border: solid $border-color; border: solid var(--border-color);
border-width: 0 1px 1px 0; border-width: 0 1px 1px 0;
} }
} }
@ -92,7 +95,7 @@
td { td {
padding: 4px; padding: 4px;
border: solid $border-color; border: solid var(--border-color);
border-width: 0 1px 1px 0; border-width: 0 1px 1px 0;
} }
} }

44
source/css/layout/common/variables.styl
View File

@ -7,7 +7,7 @@
// =============================== // ===============================
$header-height = 100px; // 头部默认高度 $header-height = 100px; // 头部默认高度
$header-shrink-height = 60px; // 头部收缩高度 $header-shrink-height = 60px; // 头部收缩高度
$main-content-width = 70%; // 中间内容区域宽度 $main-content-width = 66%; // 中间内容区域宽度
$media-max-width = 760px; // 媒体查询最大宽度 $media-max-width = 760px; // 媒体查询最大宽度
// =============================== // ===============================
@ -24,22 +24,25 @@ $z-index-6 = 1006;
// =============================== // ===============================
// color // color
// =============================== // ===============================
$primary-color = #ce3e29; // 主题颜色 // normal mode color
$background-color = #fff; // 背景颜色 $primary-color = #30a103; // 主题颜色
$first-text-color = #2c3e50; // 第一文本颜色 $background-color = #fcfcfc; // 背景颜色
$second-text-color = #525e6b; // 第二文本颜色 $normal-text-color = #515061; // 通用文本颜色（默认字体颜色）
$third-text-color = #9ca3ad; // 第三文本颜色 $first-text-color = darken($normal-text-color, 20%); // 第一文本颜色
$normal-text-color = #616161; // 通用文本颜色（默认字体颜色） $second-text-color = darken($normal-text-color, 10%); // 第二文本颜色
$border-color = #eee; // 边框颜色 $third-text-color = lighten($normal-text-color, 20%); // 第三文本颜色
$border-color = darken($background-color, 15%); // 边框颜色
$selection-color = lighten($primary-color, 8%);
// dark mode color // dark mode color
$dark-background-color = #333; // 背景颜色 $dark-primary-color = $primary-color;
$dark-primary-color = #ce3e29; // 主题颜色 $dark-background-color = #444;
$dark-first-text-color = #eee; // 第一文本颜色 $dark-normal-text-color = #bbb;
$dark-second-text-color = #ccc; // 第二文本颜色 $dark-first-text-color = lighten($dark-normal-text-color, 30%);
$dark-third-text-color = #aaa; // 第三文本颜色 $dark-second-text-color = lighten($dark-normal-text-color, 20%);
$dark-normal-text-color = #bbb; // 通用文本颜色（默认字体颜色） $dark-third-text-color = darken($dark-normal-text-color, 20%);
$dark-border-color = #888; // 边框颜色 $dark-border-color = lighten($dark-background-color, 15%);
$dark-selection-color = $selection-color;
// =============================== // ===============================
@ -48,7 +51,8 @@ $dark-border-color = #888; // 边框颜色
//$default-font-family = 'PingHei', 'PingFang SC', 'Microsoft YaHei'; //$default-font-family = 'PingHei', 'PingFang SC', 'Microsoft YaHei';
//$default-font-family = 'PingFang SC', 'Hiragino Sans GB', 'STHeiti Light'; //$default-font-family = 'PingFang SC', 'Hiragino Sans GB', 'STHeiti Light';
//$default-font-family = 'Microsoft YaHei', 'SimHei', 'WenQuanYi Micro Hei', sans-serif; //$default-font-family = 'Microsoft YaHei', 'SimHei', 'WenQuanYi Micro Hei', sans-serif;
$default-font-family = "Exo 2", "Trebuchet MS", "Helvetica", "Arial"; //$default-font-family = "Exo 2", "Trebuchet MS", "Helvetica", "Arial";
$default-font-family = Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
$default-font-size = 14px; $default-font-size = 14px;
$default-font-line-height = 20px; $default-font-line-height = 20px;
$default-font-weight = 400; $default-font-weight = 400;
@ -62,6 +66,7 @@ $default-font-weight = 400;
--third-text-color: $third-text-color; --third-text-color: $third-text-color;
--normal-text-color: $normal-text-color; --normal-text-color: $normal-text-color;
--border-color: $border-color; --border-color: $border-color;
--selection-color: $selection-color;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -72,7 +77,8 @@ $default-font-weight = 400;
--second-text-color: $dark-second-text-color; --second-text-color: $dark-second-text-color;
--third-text-color: $dark-third-text-color; --third-text-color: $dark-third-text-color;
--normal-text-color: $dark-normal-text-color; --normal-text-color: $dark-normal-text-color;
--dark-border-color: $dark-border-color; --border-color: $dark-border-color;
--selection-color: $dark-selection-color;
} }
} }
@ -84,7 +90,8 @@ $default-font-weight = 400;
--second-text-color: $dark-second-text-color; --second-text-color: $dark-second-text-color;
--third-text-color: $dark-third-text-color; --third-text-color: $dark-third-text-color;
--normal-text-color: $dark-normal-text-color; --normal-text-color: $dark-normal-text-color;
--dark-border-color: $dark-border-color; --border-color: $dark-border-color;
--selection-color: $dark-selection-color;
} }
.light-mode { .light-mode {
@ -95,4 +102,5 @@ $default-font-weight = 400;
--third-text-color: $third-text-color; --third-text-color: $third-text-color;
--normal-text-color: $normal-text-color; --normal-text-color: $normal-text-color;
--border-color: $border-color; --border-color: $border-color;
--selection-color: $selection-color;
} }

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

@ -50,6 +50,12 @@
} }
.sidebar-tools { .sidebar-tools {
top: $header-shrink-height + 30px !important; top: $header-shrink-height + 50px !important;
}
}
@media screen and (max-width: $media-max-width) {
.main-content {
width: $main-content-width * 1.2 !important;
} }
} }

4
source/css/style.styl
View File

@ -1,8 +1,6 @@
@import "libs/font-awesome.min.css" @import "libs/font-awesome.min.css"
@import "layout/common/animated.styl" @import "layout/common/animated.styl"
@import "layout/common/basic.styl" @import "layout/common/basic.styl"
@import "layout/common/markdown.styl"
@import "highlight"
@import "layout/page.styl" @import "layout/page.styl"
@import "layout/_partial/local-search.styl" @import "layout/_partial/local-search.styl"
@import "layout/_partial/valine.styl" @import "layout/_partial/valine.styl"
@ -15,3 +13,5 @@
@import "layout/article-content.styl" @import "layout/article-content.styl"
@import "layout/category-content.styl" @import "layout/category-content.styl"
@import "layout/tag-content.styl" @import "layout/tag-content.styl"
@import "layout/common/markdown.styl"
@import "layout/common/highlight/highlight.styl"

15
source/js/toggle-mode.js
View File

@ -3,6 +3,8 @@
*/ */
const modeToggleBtn = document.querySelector('.mode-toggle'); const modeToggleBtn = document.querySelector('.mode-toggle');
const iconDom = modeToggleBtn.querySelector('i'); const iconDom = modeToggleBtn.querySelector('i');
// const articleContent = document.querySelector('.article-content');
const articleContent = document.querySelector('.main-content');
const modeConfig = JSON.parse(localStorage.getItem('ils_x')); const modeConfig = JSON.parse(localStorage.getItem('ils_x'));
if (modeConfig) { if (modeConfig) {
@ -10,20 +12,24 @@ if (modeConfig) {
if (modeConfig.isDark) { if (modeConfig.isDark) {
document.body.classList.remove('light-mode'); document.body.classList.remove('light-mode');
articleContent.classList.remove('night-code-theme');
iconDom.className = 'fa fa-lightbulb-o'; iconDom.className = 'fa fa-lightbulb-o';
} else { } else {
iconDom.className = 'fa fa-moon-o'; iconDom.className = 'fa fa-moon-o';
document.body.classList.add('light-mode'); document.body.classList.add('light-mode');
articleContent.classList.add('night-code-theme');
} }
} else { } else {
if (modeConfig.isDark) { if (modeConfig.isDark) {
document.body.classList.remove('dark-mode'); document.body.classList.remove('dark-mode');
articleContent.classList.remove('night-code-theme');
iconDom.className = 'fa fa-moon-o'; iconDom.className = 'fa fa-moon-o';
} else { } else {
document.body.classList.add('dark-mode'); document.body.classList.add('dark-mode');
iconDom.className = 'fa fa-lightbulb-o'; iconDom.className = 'fa fa-lightbulb-o';
articleContent.classList.add('night-code-theme');
} }
} }
@ -33,7 +39,14 @@ if (modeConfig) {
const setItemUtil = (modeClass, prefersColorScheme) => { const setItemUtil = (modeClass, prefersColorScheme) => {
document.body.classList.toggle(modeClass); document.body.classList.toggle(modeClass);
const isDark = document.body.className.indexOf(modeClass) === -1; const isDark = document.body.className.indexOf(modeClass) === -1;
iconDom.className = isDark ? 'fa fa-moon-o' : 'fa fa-lightbulb-o';
if (isDark) {
iconDom.className = 'fa fa-moon-o';
articleContent.classList.remove('night-code-theme');
} else {
iconDom.className = 'fa fa-lightbulb-o';
articleContent.classList.add('night-code-theme');
}
localStorage.setItem('ils_x', JSON.stringify( localStorage.setItem('ils_x', JSON.stringify(
{ {
prefersColorScheme: prefersColorScheme, prefersColorScheme: prefersColorScheme,