diff --git a/languages/en.yml b/languages/en.yml
index 3d066d56..081dcf34 100644
--- a/languages/en.yml
+++ b/languages/en.yml
@@ -62,14 +62,14 @@ post:
author: Author
link: Link
license_title: Copyright
- license_content: All articles in this blog are licensed under
+ license_content: All articles in this blog are licensed under
%s unless stating additionally
# Algolia search
algolia_search:
input_placeholder: Search for Posts
hits_empty: "We didn't find any results for the search: ${query}"
- hits_stats: "${hits} results found in ${time} ms"
+ hits_stats: '${hits} results found in ${time} ms'
# Local search
local_search:
@@ -97,8 +97,13 @@ footer:
uv: Visitors
pv: Views
-# Global notification
-notification:
+# Prompt message
+prompt:
copy:
success: Copy Success
error: Copy Error
+ creative_commons: Creative Commons
+ copy_code: Copy Code
+
+# Others
+creative_commons: Creative Commons
diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml
index 6eefe766..cbd976f5 100644
--- a/languages/zh-CN.yml
+++ b/languages/zh-CN.yml
@@ -62,14 +62,14 @@ post:
author: 本文作者
link: 本文链接
license_title: 版权声明
- license_content: 本博客所有文章除特别声明外，均采用
+ license_content: 本博客所有文章除特别声明外，均采用
%s 许可协议。转载请注明出处！
# Algolia 搜索
algolia_search:
input_placeholder: 搜索文章
- hits_empty: "没有找到任何搜索结果：${query}"
- hits_stats: "找到 ${hits} 条搜索结果，耗时 ${time} 毫秒"
+ hits_empty: '没有找到任何搜索结果：${query}'
+ hits_stats: '找到 ${hits} 条搜索结果，耗时 ${time} 毫秒'
# 本地搜索
local_search:
@@ -97,8 +97,13 @@ footer:
uv: 访问人数
pv: 浏览总量
-# 全局消息提示信息
-notification:
+# 提示信息
+prompt:
copy:
success: 复制成功
error: 复制失败
+ creative_commons: 知识共享
+ copy_code: 复制代码
+
+# 其他
+creative_commons: 知识共享
diff --git a/layout/_common/config.pug b/layout/_common/config.pug
index 90c85e7c..afcca196 100644
--- a/layout/_common/config.pug
+++ b/layout/_common/config.pug
@@ -59,9 +59,11 @@
switch_post: theme.shortcuts.switch_post.enable
});
- var notification = JSON.stringify({
- copy_success: _p("notification.copy.success"),
- copy_error: _p("notification.copy.error")
+ var prompt = JSON.stringify({
+ copy_success: _p("prompt.copy.success"),
+ copy_error: _p("prompt.copy.error"),
+ creative_commons: _p("prompt.creative_commons"),
+ copy_code: _p("prompt.copy_code")
});
script.
@@ -78,7 +80,7 @@ script.
lazyload: !{ lazyload },
external_link: !{ external_link },
shortcuts: !{ shortcuts },
- notification: !{ notification }
+ prompt: !{ prompt }
};
window.CONFIG = CONFIG;
diff --git a/layout/_common/sidebar.pug b/layout/_common/sidebar.pug
index ea17fe01..a5230917 100644
--- a/layout/_common/sidebar.pug
+++ b/layout/_common/sidebar.pug
@@ -87,8 +87,8 @@ aside#sidebar
- var ccURL = `https://creativecommons.org/licenses/${ccLicense}/4.0/deed.${ccLanguage}`
div.sidebar-cc
a(href=ccURL target="_blank" rel="noopener"
- data-popover="Creative Commons" data-popover-pos="up")
- img(src=url_for(`/${theme.images}/cc-${ccLicense}.svg`) alt="creative commons")
+ data-popover=_p("prompt.creative_commons") data-popover-pos="up")
+ img(src=url_for(`/${theme.images}/cc-${ccLicense}.svg`) alt=_p("creative_commons"))
if theme.reading_progress.enable && is_post()
div.sidebar-progress
diff --git a/source/css/_common/index.styl b/source/css/_common/index.styl
index 62ddc266..1733d8b1 100644
--- a/source/css/_common/index.styl
+++ b/source/css/_common/index.styl
@@ -4,5 +4,4 @@
@import './footer.styl'
@import './post.styl'
@import './page.styl'
-@import './notification.styl'
@import './responsive.styl'
diff --git a/source/css/_common/notification.styl b/source/css/_common/notification.styl
deleted file mode 100644
index 4c65de8f..00000000
--- a/source/css/_common/notification.styl
+++ /dev/null
@@ -1,43 +0,0 @@
-.stun-message
- position: fixed
- top: 1rem
- left: 50%
- z-index: $z-index2
- transform: translateX(-50%)
-
-.stun-alert
- position: relative
- border-radius: 3px
- padding: 8px 12px
- font-size: $font-size-large
- line-height: 1rem
- color: $black-light
- background-color: #fff
- box-shadow: 0 4px 12px rgba(0, 0, 0, .15)
-
- &-success
- color: $alert-success
-
- & ~ i
- color: $alert-success
-
- &-info
- color: $alert-info
-
- & ~ i
- color: $alert-info
-
- &-warning
- color: $alert-warning
-
- & ~ i
- color: $alert-warning
-
- &-error
- color: $alert-error
-
- & ~ i
- color: $alert-error
-
- &-description
- margin-left: .5rem
diff --git a/source/css/_global/utils.styl b/source/css/_global/utils.styl
index d4b82df3..70fdf888 100644
--- a/source/css/_global/utils.styl
+++ b/source/css/_global/utils.styl
@@ -18,11 +18,11 @@ clearImgStyle()
display: table
clear: both
-// UI component
+// UI components
// ----------------------------------------
$popover-bg-color = alpha(#000, .7)
-// UI components of "popover"
+// "Popover" component
[data-popover]
position: relative
@@ -53,6 +53,51 @@ $popover-bg-color = alpha(#000, .7)
opacity: 1
transform: translate(-50%, -115%)
+// "Alert" component
+.stun-message
+ position: fixed
+ top: 1rem
+ left: 50%
+ z-index: $z-index2
+ transform: translateX(-50%)
+
+.stun-alert
+ position: relative
+ border-radius: 3px
+ padding: 8px 12px
+ font-size: $font-size-large
+ line-height: 1rem
+ color: $black-light
+ background-color: #fff
+ box-shadow: 0 4px 12px rgba(0, 0, 0, .15)
+
+ &-success
+ color: $alert-success
+
+ & ~ i
+ color: $alert-success
+
+ &-info
+ color: $alert-info
+
+ & ~ i
+ color: $alert-info
+
+ &-warning
+ color: $alert-warning
+
+ & ~ i
+ color: $alert-warning
+
+ &-error
+ color: $alert-error
+
+ & ~ i
+ color: $alert-error
+
+ &-description
+ margin-left: .5rem
+
// Animation class
// ----------------------------------------
.anime-close
diff --git a/source/css/_highlight/diff.styl b/source/css/_highlight/diff.styl
index 557ec7b9..973c16ff 100644
--- a/source/css/_highlight/diff.styl
+++ b/source/css/_highlight/diff.styl
@@ -4,8 +4,8 @@ if ($highlight_theme == 'light')
$highlight-addition = #deffe7
$highlight-deletion = #ffe8eb
else if ($highlight_theme == 'dark')
- $highlight-addition = #91f4a9
- $highlight-deletion = #ffb1ba
+ $highlight-addition = alpha(#00ff00, .2)
+ $highlight-deletion = alpha(#ff0000, .2)
else if ($highlight_theme == 'ocean')
- $highlight-addition = #57c371
- $highlight-deletion = #df6969
+ $highlight-addition = alpha(#9bb955, .4)
+ $highlight-deletion = alpha(#ff0000, .2)
diff --git a/source/css/_highlight/highlight.styl b/source/css/_highlight/highlight.styl
index f3de00a1..3cfe5714 100644
--- a/source/css/_highlight/highlight.styl
+++ b/source/css/_highlight/highlight.styl
@@ -11,10 +11,9 @@ for lang in languages
&:first-child::before
content: lang
margin: 0 .6rem
- color: alpha($highlight-header-color, .5)
+ color: $highlight-code-lang-color
.highlight
- overflow: auto
position: relative
margin: .5rem 0 1rem
min-width: 100%
@@ -22,6 +21,9 @@ for lang in languages
color: $highlight-color
background-color: $highlight-background
+ .copy-button i
+ color: $copy-button-color
+
pre,
code
font-family: $code-font-family
@@ -34,7 +36,7 @@ for lang in languages
counter-reset: line
td
- border: 0
+ border-width: 0
figcaption
overflow: hidden
@@ -46,7 +48,7 @@ for lang in languages
span
&:first-child
float: left
- color: $highlight-header-color
+ color: $highlight-code-note-color
span
&:nth-child(2)
@@ -60,22 +62,25 @@ for lang in languages
.custom-lang
float: left
margin: 0 .6rem
- color: alpha($highlight-header-color, .5)
+ color: $highlight-code-lang-color
- .gutter,
.code
- padding: .4rem .5rem
+ if ($wordWrap)
+ padding: 0
+ else
+ padding: 0 0 0 .4rem
.gutter
+ padding: .4rem .6rem
width: 1rem
- background-color: $highlight-gutter-bg-color
+ background-color: $highlight-side-bg-color
if ($wordWrap)
display: none
pre
text-align: right
- color: $highlight-gutter-color
+ color: $highlight-side-color
background-color: inherit
if ($wordWrap)
@@ -83,91 +88,93 @@ for lang in languages
&::before
content: counter(line)
display: inline-block
- margin: 0 1rem 0 0
- width: 1rem
+ margin: 0 .4rem 0 0
+ box-sizing: content-box
+ padding: 0 .8rem 0 .4rem
+ min-width: 1rem
text-align: right
- color: $highlight-gutter-color
+ color: $highlight-side-color
+ background-color: $highlight-side-bg-color
counter-increment: line
- pre
- .variable,
- .attribute
- color: $highlight-red
-
- .number,
- .preprocessor,
- .literal,
- .params,
- .constant,
- .number,
- .command
- color: $highlight-orange
-
- .built_in
- color: $highlight-yellow
-
- .special,
- .formula,
- .class,
- .string,
- .value,
- .inheritance,
- .header,
- .regexp,
- .tag
- color: $highlight-green
-
- .keyword,
- .title
- color: $highlight-aqua
-
- .function,
- .title
- color: $highlight-blue
-
- .comment
- color: $highlight-comment
-
- .ruby .constant,
- .xml .tag .title,
- .xml .pi,
- .xml .doctype,
- .html .doctype,
- .css .id,
- .tag .name,
- .css .class,
- .css .pseudo
- color: $highlight-red
-
- .ruby .class .title,
- .css .rules .attribute,
- .ruby .symbol,
- .xml .cdata
- color: $highlight-green
-
- .css .hexcolor,
- .tag .string
- color: $highlight-aqua
-
- .python .decorator,
- .python .title,
- .ruby .function .title,
- .ruby .title .keyword,
- .perl .sub,
- .javascript .title,
- .js .title,
- .coffeescript .title
- color: $highlight-blue
-
- .tag .attr,
- .javascript .keyword,
- .javascript .function,
- .js .keyword,
- .js .function
- color: $highlight-purple
-
- .diff .addition
- background-color: $highlight-addition
-
- .diff .deletion
- background-color: $highlight-deletion
+.variable,
+.attribute
+ color: $highlight-red
+
+.number,
+.preprocessor,
+.literal,
+.params,
+.constant,
+.number,
+.command
+ color: $highlight-orange
+
+.built_in
+ color: $highlight-yellow
+
+.special,
+.formula,
+.class,
+.string,
+.value,
+.inheritance,
+.header,
+.regexp,
+.tag
+ color: $highlight-green
+
+.keyword,
+.title
+ color: $highlight-aqua
+
+.function,
+.title
+ color: $highlight-blue
+
+.comment
+ color: $highlight-comment
+
+.ruby .constant,
+.xml .tag .title,
+.xml .pi,
+.xml .doctype,
+.html .doctype,
+.css .id,
+.tag .name,
+.css .class,
+.css .pseudo
+ color: $highlight-red
+
+.ruby .class .title,
+.css .rules .attribute,
+.ruby .symbol,
+.xml .cdata
+ color: $highlight-green
+
+.css .hexcolor,
+.tag .string
+ color: $highlight-aqua
+
+.python .decorator,
+.python .title,
+.ruby .function .title,
+.ruby .title .keyword,
+.perl .sub,
+.javascript .title,
+.js .title,
+.coffeescript .title
+ color: $highlight-blue
+
+.tag .attr,
+.javascript .keyword,
+.javascript .function,
+.js .keyword,
+.js .function
+ color: $highlight-purple
+
+.diff .addition
+ background-color: $highlight-addition
+
+.diff .deletion
+ background-color: $highlight-deletion
diff --git a/source/css/_highlight/theme.styl b/source/css/_highlight/theme.styl
index 0ba72385..7493f018 100644
--- a/source/css/_highlight/theme.styl
+++ b/source/css/_highlight/theme.styl
@@ -3,11 +3,13 @@ $highlight_theme = hexo-config('highlight_theme')
if ($highlight_theme == 'light')
$highlight-color = #757575
$highlight-background = #f6f8fa
- $highlight-gutter-color = $highlight-color
- $highlight-gutter-bg-color = $highlight-background
+ $highlight-side-color = lighten($highlight-color, 60%)
+ $highlight-side-bg-color = darken($highlight-background, 1%)
$highlight-header-color = $highlight-color
- $highlight-header-bg-color = #eaf0f5
- $highlight-code-type-color = $highlight-header-color
+ $highlight-header-bg-color = $highlight-side-bg-color
+ $highlight-code-lang-color = alpha($highlight-header-color, .6)
+ $highlight-code-note-color = $highlight-header-color
+ $copy-button-color = alpha($highlight-header-color, .7)
$highlight-comment = #90a4ae
$highlight-red = #E53935
$highlight-orange = #F76D47
@@ -20,11 +22,13 @@ if ($highlight_theme == 'light')
if ($highlight_theme == 'dark')
$highlight-color = #7a85b9
$highlight-background = #0f111a
- $highlight-gutter-color = $highlight-color
- $highlight-gutter-bg-color = $highlight-background
+ $highlight-side-color = darken($highlight-color, 50%)
+ $highlight-side-bg-color = darken($highlight-background, 10%)
$highlight-header-color = $highlight-color
- $highlight-header-bg-color = $highlight-gutter-bg-color
- $highlight-code-type-color = $highlight-header-color
+ $highlight-header-bg-color = $highlight-side-bg-color
+ $highlight-code-lang-color = alpha($highlight-header-color, .6)
+ $highlight-code-note-color = $highlight-header-color
+ $copy-button-color = alpha($highlight-header-color, .7)
$highlight-comment = #98a4d0
$highlight-red = #ff5370
$highlight-orange = #f78c6c
@@ -37,11 +41,13 @@ if ($highlight_theme == 'dark')
if ($highlight_theme == 'ocean')
$highlight-color = #f8f8f2
$highlight-background = #304148
- $highlight-gutter-color = $highlight-color
- $highlight-gutter-bg-color = $highlight-background
+ $highlight-side-color = alpha($highlight-color, 20%)
+ $highlight-side-bg-color = darken($highlight-background, 5%)
$highlight-header-color = $highlight-color
- $highlight-header-bg-color = $highlight-gutter-bg-color
- $highlight-code-type-color = $highlight-header-color
+ $highlight-header-bg-color = $highlight-side-bg-color
+ $highlight-code-lang-color = alpha($highlight-header-color, .5)
+ $highlight-code-note-color = $highlight-header-color
+ $copy-button-color = alpha($highlight-header-color, .6)
$highlight-comment = #65737e
$highlight-red = #ec5f67
$highlight-orange = #f99157
diff --git a/source/js/copy.js b/source/js/copy.js
index 1ac85473..d3af8971 100644
--- a/source/js/copy.js
+++ b/source/js/copy.js
@@ -19,7 +19,9 @@ $(document).ready(function () {
});
var $copyIcon = $(
- '