style: CSS样式及配色优化
This commit is contained in:
XPoet
parent
0363261d7c
commit
ff70fe886d
|
|
@ -30,12 +30,6 @@ social:
|
|||
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
|
||||
#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.
|
||||
# You can get your appid and appkey from https://leancloud.cn
|
||||
# more info please open https://github.com/xCss/Valine
|
||||
|
|
@ -62,7 +56,7 @@ busuanzi_count:
|
|||
# Local Search
|
||||
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
|
||||
local_search:
|
||||
enable: false
|
||||
enable: true
|
||||
# If auto, trigger search by changing input.
|
||||
# If manual, trigger search by pressing enter key or search button.
|
||||
trigger: auto
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ rss_feed: RSS Feed
|
|||
category: Category
|
||||
tag: Tag
|
||||
home: Home
|
||||
archive: Archives
|
||||
archives: Archives
|
||||
about: About
|
||||
site_uv: UV
|
||||
site_pv: PV
|
||||
|
|
@ -15,7 +15,7 @@ rss_feed: RSS Feed
|
|||
category: 分类
|
||||
tag: 标签
|
||||
home: 首页
|
||||
archive: 归档
|
||||
archives: 归档
|
||||
about: 关于
|
||||
site_uv: 访问人数
|
||||
site_pv: 总访问量
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<%- partial('_partial/article-meta-info', {articleObject: page, index: true}) %>
|
||||
</div>
|
||||
|
||||
<div class="article-content markdown">
|
||||
<div class="article-content markdown-body">
|
||||
<%- page.content %>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<a class="article-title-hover-animation" href="<%- url_for(post.path) %>"><%= post.title %></a>
|
||||
</h3>
|
||||
|
||||
<div class="home-article-content markdown">
|
||||
<div class="home-article-content markdown-body">
|
||||
<% if (post.excerpt) { %>
|
||||
<%- post.excerpt %>
|
||||
<% } else { %>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
</div>
|
||||
|
||||
<div class="page-middle">
|
||||
<main class="main-content">
|
||||
<main class="main-content normal-code-theme">
|
||||
<% if (is_home()) { %>
|
||||
<%- partial('home-content') %>
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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;
|
||||
|
|
@ -143,7 +143,6 @@
|
|||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
list-style-type: none;
|
||||
|
||||
.drawer-menu-item {
|
||||
|
||||
|
|
@ -225,7 +224,7 @@
|
|||
|
||||
.header-wrapper-shrink {
|
||||
background: var(--background-color);
|
||||
box-shadow: 0 1px 2px $border-color;
|
||||
box-shadow: 0 1px 2px var(--border-color);
|
||||
|
||||
.header-content {
|
||||
|
||||
|
|
@ -268,4 +267,8 @@
|
|||
display: block !important;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
width: $main-content-width * 1.2 !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -10,11 +10,13 @@ html, body {
|
|||
font-family: $default-font-family;
|
||||
font-weight: $default-font-weight;
|
||||
line-height: $default-font-line-height;
|
||||
-webkit-font-smoothing antialiased;
|
||||
//-webkit-font-smoothing antialiased;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
ul, li, ol {
|
||||
ul,
|
||||
li,
|
||||
ol {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
|
@ -29,17 +31,13 @@ button {
|
|||
background: transparent;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--normal-text-color);
|
||||
}
|
||||
|
||||
a:hover, a:active {
|
||||
color: $primary-color;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -49,15 +47,15 @@ a:hover, a:active {
|
|||
position: relative;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: $button-color;
|
||||
border: 1px solid $border-color;
|
||||
color: var(--third-text-color);
|
||||
border: 1px solid var(--third-text-color);
|
||||
white-space: nowrap;
|
||||
border-radius: 10em;
|
||||
padding: 0.5em 1em;
|
||||
|
||||
&:hover {
|
||||
color: $primary-color;
|
||||
border: 1px solid $primary-color;
|
||||
color: var(--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 {
|
||||
background: $primary-color;
|
||||
background: var(--selection-color);
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1,24 +1,41 @@
|
|||
@require "theme"
|
||||
@require "diff"
|
||||
@require "code-theme.styl"
|
||||
|
||||
$code-block {
|
||||
overflow: auto;
|
||||
margin: 20px 0;
|
||||
padding: 0;
|
||||
font-size $code-font-size;
|
||||
color: $highlight-foreground;
|
||||
background: $highlight-background;
|
||||
line-height: $line-height-code-block;
|
||||
font-size 1em;
|
||||
color: var(--highlight-foreground);
|
||||
background: var(--highlight-background);
|
||||
line-height: 1.6em;
|
||||
transition: all 0.5s ease;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
background: rgba(0, 0, 0, 0.2)
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
pre, code { font-family: $code-font-family; }
|
||||
|
||||
pre, code {
|
||||
font-family: "Source Code Pro", consolas, Menlo;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 4px;
|
||||
padding: 5px;
|
||||
word-wrap: break-word;
|
||||
color: $code-foreground;
|
||||
background: $code-background;
|
||||
border-radius: $code-border-radius;
|
||||
color: var(--code-foreground);
|
||||
background: var(--code-background);
|
||||
border-radius: 2px;
|
||||
font-size: $code-font-size;
|
||||
}
|
||||
|
||||
|
|
@ -28,7 +45,7 @@ pre {
|
|||
|
||||
code {
|
||||
padding: 0;
|
||||
color: $highlight-foreground;
|
||||
color: var(--highlight-foreground);
|
||||
background: none;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
|
@ -36,7 +53,7 @@ pre {
|
|||
|
||||
.highlight {
|
||||
@extend $code-block;
|
||||
border-radius: 1px
|
||||
border-radius: 1px;
|
||||
|
||||
pre {
|
||||
border: none;
|
||||
|
|
@ -57,36 +74,39 @@ pre {
|
|||
}
|
||||
|
||||
figcaption {
|
||||
clearfix();
|
||||
font-size: 1em;
|
||||
color: $highlight-foreground;
|
||||
color: var(--highlight-foreground);
|
||||
line-height: 1em;
|
||||
margin-bottom: 1em;
|
||||
|
||||
a {
|
||||
float: right;
|
||||
color: $highlight-foreground;
|
||||
color: var(--highlight-foreground);
|
||||
|
||||
&:hover { border-bottom-color: $highlight-foreground; }
|
||||
&:hover {
|
||||
border-bottom-color: var(--highlight-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gutter pre {
|
||||
padding-left: 10px
|
||||
padding-right: 10px
|
||||
color: $highlight-gutter.color
|
||||
text-align: center
|
||||
background-color: $highlight-gutter.bg-color
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
color: var(--highlight-gutter-color);
|
||||
text-align: center;
|
||||
background-color: var(--highlight-gutter-bg-color);
|
||||
}
|
||||
|
||||
.code pre {
|
||||
width: 100%
|
||||
padding-left: 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 {
|
||||
width: auto;
|
||||
|
||||
td { border: none; }
|
||||
td {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
// For diff highlight
|
||||
pre .deletion { background: $highlight-deletion; }
|
||||
pre .addition { background: $highlight-addition; }
|
||||
pre .meta { color: $highlight-purple; }
|
||||
pre .deletion {
|
||||
background: var(--highlight-deletion);
|
||||
}
|
||||
|
||||
pre .addition {
|
||||
background: var(--highlight-addition);
|
||||
}
|
||||
|
||||
pre .meta {
|
||||
color: var(--highlight-purple);
|
||||
}
|
||||
|
||||
pre {
|
||||
|
||||
.comment { color: $highlight-comment; }
|
||||
.comment {
|
||||
color: var(--highlight-comment);
|
||||
}
|
||||
|
||||
.variable
|
||||
.attribute
|
||||
|
|
@ -124,7 +156,7 @@ pre {
|
|||
.css .id
|
||||
.css .class
|
||||
.css .pseudo {
|
||||
color: $highlight-red;
|
||||
color: var(--highlight-red);
|
||||
}
|
||||
|
||||
.number
|
||||
|
|
@ -134,7 +166,7 @@ pre {
|
|||
.params
|
||||
.constant
|
||||
.command {
|
||||
color: $highlight-orange;
|
||||
color: var(--highlight-orange);
|
||||
}
|
||||
|
||||
.ruby .class .title
|
||||
|
|
@ -148,12 +180,12 @@ pre {
|
|||
.special
|
||||
.number
|
||||
.formula {
|
||||
color: $highlight-green;
|
||||
color: highlight-green;
|
||||
}
|
||||
|
||||
.title
|
||||
.css .hexcolor {
|
||||
color: $highlight-aqua;
|
||||
color: var(--highlight-aqua);
|
||||
}
|
||||
|
||||
.function
|
||||
|
|
@ -164,12 +196,12 @@ pre {
|
|||
.perl .sub
|
||||
.javascript .title
|
||||
.coffeescript .title {
|
||||
color: $highlight-blue;
|
||||
color: var(--highlight-blue);
|
||||
}
|
||||
|
||||
.keyword
|
||||
.javascript .function {
|
||||
color: $highlight-purple;
|
||||
color: var(--highlight-purple);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,17 +1,20 @@
|
|||
@require 'variables.styl'
|
||||
|
||||
.markdown {
|
||||
.markdown-body {
|
||||
|
||||
blockquote {
|
||||
border-left: 5px solid var(--normal-text-color);
|
||||
margin: 0;
|
||||
padding: 0 0 0 10px;
|
||||
background: $border-color;
|
||||
color : var(--third-text-color);
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primary-color;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -23,39 +26,39 @@
|
|||
h1 {
|
||||
color: var(--second-text-color);
|
||||
font-size: 2.2em;
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
h2 {
|
||||
color: var(--second-text-color);
|
||||
font-size: 2em;
|
||||
font-weight: 650;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: var(--second-text-color);
|
||||
font-size: 1.8em;
|
||||
font-weight: 600;
|
||||
font-weight: 550;
|
||||
}
|
||||
|
||||
|
||||
h4 {
|
||||
color: var(--second-text-color);
|
||||
font-size: 1.6em;
|
||||
font-weight: 550;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h5 {
|
||||
color: var(--second-text-color);
|
||||
font-size: 1.4em;
|
||||
font-weight: 500;
|
||||
font-weight: 450;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: var(--second-text-color);
|
||||
font-size: 1.2em;
|
||||
font-weight: 500;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -63,23 +66,23 @@
|
|||
padding: 2px;
|
||||
margin: 2px 0;
|
||||
width: 100%;
|
||||
border: 1px solid $border-color;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
table:not(figure.highlight) {
|
||||
|
||||
border: solid $border-color;
|
||||
border: solid var(--border-color);
|
||||
border-width: 1px 0 0 1px;
|
||||
|
||||
thead {
|
||||
|
||||
background: $border-color;
|
||||
background: var(--border-color);
|
||||
|
||||
tr {
|
||||
th {
|
||||
margin: 0;
|
||||
padding: 4px;
|
||||
border: solid $border-color;
|
||||
border: solid var(--border-color);
|
||||
border-width: 0 1px 1px 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -92,7 +95,7 @@
|
|||
|
||||
td {
|
||||
padding: 4px;
|
||||
border: solid $border-color;
|
||||
border: solid var(--border-color);
|
||||
border-width: 0 1px 1px 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@
|
|||
// ===============================
|
||||
// layout
|
||||
// ===============================
|
||||
$header-height = 100px; // 头部默认高度
|
||||
$header-shrink-height = 60px; // 头部收缩高度
|
||||
$main-content-width = 70%; // 中间内容区域宽度
|
||||
$media-max-width = 760px; // 媒体查询最大宽度
|
||||
$header-height = 100px; // 头部默认高度
|
||||
$header-shrink-height = 60px; // 头部收缩高度
|
||||
$main-content-width = 66%; // 中间内容区域宽度
|
||||
$media-max-width = 760px; // 媒体查询最大宽度
|
||||
|
||||
// ===============================
|
||||
// z-index
|
||||
|
|
@ -24,22 +24,25 @@ $z-index-6 = 1006;
|
|||
// ===============================
|
||||
// color
|
||||
// ===============================
|
||||
$primary-color = #ce3e29; // 主题颜色
|
||||
$background-color = #fff; // 背景颜色
|
||||
$first-text-color = #2c3e50; // 第一文本颜色
|
||||
$second-text-color = #525e6b; // 第二文本颜色
|
||||
$third-text-color = #9ca3ad; // 第三文本颜色
|
||||
$normal-text-color = #616161; // 通用文本颜色（默认字体颜色）
|
||||
$border-color = #eee; // 边框颜色
|
||||
// normal mode color
|
||||
$primary-color = #30a103; // 主题颜色
|
||||
$background-color = #fcfcfc; // 背景颜色
|
||||
$normal-text-color = #515061; // 通用文本颜色（默认字体颜色）
|
||||
$first-text-color = darken($normal-text-color, 20%); // 第一文本颜色
|
||||
$second-text-color = darken($normal-text-color, 10%); // 第二文本颜色
|
||||
$third-text-color = lighten($normal-text-color, 20%); // 第三文本颜色
|
||||
$border-color = darken($background-color, 15%); // 边框颜色
|
||||
$selection-color = lighten($primary-color, 8%);
|
||||
|
||||
// dark mode color
|
||||
$dark-background-color = #333; // 背景颜色
|
||||
$dark-primary-color = #ce3e29; // 主题颜色
|
||||
$dark-first-text-color = #eee; // 第一文本颜色
|
||||
$dark-second-text-color = #ccc; // 第二文本颜色
|
||||
$dark-third-text-color = #aaa; // 第三文本颜色
|
||||
$dark-normal-text-color = #bbb; // 通用文本颜色（默认字体颜色）
|
||||
$dark-border-color = #888; // 边框颜色
|
||||
$dark-primary-color = $primary-color;
|
||||
$dark-background-color = #444;
|
||||
$dark-normal-text-color = #bbb;
|
||||
$dark-first-text-color = lighten($dark-normal-text-color, 30%);
|
||||
$dark-second-text-color = lighten($dark-normal-text-color, 20%);
|
||||
$dark-third-text-color = darken($dark-normal-text-color, 20%);
|
||||
$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 = 'PingFang SC', 'Hiragino Sans GB', 'STHeiti Light';
|
||||
//$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-line-height = 20px;
|
||||
$default-font-weight = 400;
|
||||
|
|
@ -62,6 +66,7 @@ $default-font-weight = 400;
|
|||
--third-text-color: $third-text-color;
|
||||
--normal-text-color: $normal-text-color;
|
||||
--border-color: $border-color;
|
||||
--selection-color: $selection-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
|
@ -72,7 +77,8 @@ $default-font-weight = 400;
|
|||
--second-text-color: $dark-second-text-color;
|
||||
--third-text-color: $dark-third-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;
|
||||
--third-text-color: $dark-third-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 {
|
||||
|
|
@ -95,4 +102,5 @@ $default-font-weight = 400;
|
|||
--third-text-color: $third-text-color;
|
||||
--normal-text-color: $normal-text-color;
|
||||
--border-color: $border-color;
|
||||
--selection-color: $selection-color;
|
||||
}
|
||||
|
|
@ -50,6 +50,12 @@
|
|||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,6 @@
|
|||
@import "libs/font-awesome.min.css"
|
||||
@import "layout/common/animated.styl"
|
||||
@import "layout/common/basic.styl"
|
||||
@import "layout/common/markdown.styl"
|
||||
@import "highlight"
|
||||
@import "layout/page.styl"
|
||||
@import "layout/_partial/local-search.styl"
|
||||
@import "layout/_partial/valine.styl"
|
||||
|
|
@ -14,4 +12,6 @@
|
|||
@import "layout/archive-content.styl"
|
||||
@import "layout/article-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"
|
||||
|
|
@ -3,6 +3,8 @@
|
|||
*/
|
||||
const modeToggleBtn = document.querySelector('.mode-toggle');
|
||||
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'));
|
||||
if (modeConfig) {
|
||||
|
||||
|
|
@ -10,20 +12,24 @@ if (modeConfig) {
|
|||
|
||||
if (modeConfig.isDark) {
|
||||
document.body.classList.remove('light-mode');
|
||||
articleContent.classList.remove('night-code-theme');
|
||||
iconDom.className = 'fa fa-lightbulb-o';
|
||||
} else {
|
||||
iconDom.className = 'fa fa-moon-o';
|
||||
document.body.classList.add('light-mode');
|
||||
articleContent.classList.add('night-code-theme');
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
if (modeConfig.isDark) {
|
||||
document.body.classList.remove('dark-mode');
|
||||
articleContent.classList.remove('night-code-theme');
|
||||
iconDom.className = 'fa fa-moon-o';
|
||||
} else {
|
||||
document.body.classList.add('dark-mode');
|
||||
iconDom.className = 'fa fa-lightbulb-o';
|
||||
articleContent.classList.add('night-code-theme');
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -33,7 +39,14 @@ if (modeConfig) {
|
|||
const setItemUtil = (modeClass, prefersColorScheme) => {
|
||||
document.body.classList.toggle(modeClass);
|
||||
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(
|
||||
{
|
||||
prefersColorScheme: prefersColorScheme,
|
||||
|
|
|
|||
Loading…
Reference in New Issue