refactor: Modify theme color of code block & optimize UI style

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
       <a href="%s" rel="external nofollow" target="_blank">%s</a> 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

languages/zh-CN.yml

@@ -62,14 +62,14 @@ post:
     author: 本文作者
     link: 本文链接
     license_title: 版权声明
-    license_content: 本博客所有文章除特别声明外，均采用 
+    license_content: 本博客所有文章除特别声明外，均采用
       <a href="%s" rel="external nofollow" target="_blank">%s</a> 许可协议。转载请注明出处！
 
 # 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: 知识共享

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;

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

source/css/_common/index.styl

@@ -4,5 +4,4 @@
 @import './footer.styl'
 @import './post.styl'
 @import './page.styl'
-@import './notification.styl'
 @import './responsive.styl'

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

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)