From 3b46d456f7e49dca52d9f8f9fe483ef02ce0a73a Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Thu, 19 Nov 2020 15:14:53 +0800
Subject: [PATCH] style: optimize article copyright info

---
 layout/_partial/article-copyright-info.ejs     |  3 ++-
 .../_partial/article-copyright-info.styl       | 18 +++++++++++++-----
 source/css/layout/common/variables.styl        |  7 +++++--
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/layout/_partial/article-copyright-info.ejs b/layout/_partial/article-copyright-info.ejs
index 3040251..dacdf56 100644
--- a/layout/_partial/article-copyright-info.ejs
+++ b/layout/_partial/article-copyright-info.ejs
@@ -7,7 +7,8 @@
             <%- __('copyright.link') %>：<%= getPostUrl((theme.base_info.url || config.url), page.path) %>
         </li>
         <li>
-            <%- __('copyright.license_title') %>：<%- __('copyright.license_content', '<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">BY-NC-SA</a>') %>
+            <%- __('copyright.license_title') %>：
+            <%- __('copyright.license_content', '<a class="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">BY-NC-SA</a>') %>
         </li>
     </ul>
 </div>
diff --git a/source/css/layout/_partial/article-copyright-info.styl b/source/css/layout/_partial/article-copyright-info.styl
index d2fe164..a038ea4 100644
--- a/source/css/layout/_partial/article-copyright-info.styl
+++ b/source/css/layout/_partial/article-copyright-info.styl
@@ -3,27 +3,35 @@
   width: 100%;
   box-sizing: border-box;
   background: var(--second-background-color);
-  padding: 6px 6px 6px 16px;
-  font-size: 0.98em;
+  //border: 1px solid var(--border-color);
+  //border-left: none;
+  padding: 10px 6px;
+  font-size: 1em;
 
   &::after {
     position: absolute;
     top: 0;
     left: 0;
     content: '';
-    width: 6px;
+    width: 8px;
     height: 100%;
-    background: #dd0c0c;
+    background: var(--copyright-info-color);
   }
 
   ul {
 
+    margin-left: 10px;
+
     li {
-      margin-bottom: 3px;
+      margin-bottom: 5px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
 
+      .license {
+        font-weight: bold;
+      }
+
       &:last-child {
         margin-bottom: 0;
       }
diff --git a/source/css/layout/common/variables.styl b/source/css/layout/common/variables.styl
index 8203a5b..a89b4d6 100644
--- a/source/css/layout/common/variables.styl
+++ b/source/css/layout/common/variables.styl
@@ -66,11 +66,12 @@ $shadow-hover-color = rgba(0, 0, 0, 0.28);
 $scroll-bar-color = lighten($default-text-color, 20%);
 $scroll-bar-bg-color = darken($background-color, 10%);
 $link-color = darken($default-text-color, 10%);
+$copyright-info-color = #CC0033;
 
 // ====================== dark mode color ======================
 $dark-primary-color = $primary-color;
-$dark-background-color = #2f2f2f;
-$dark-second-background-color = darken($dark-background-color, 3%);
+$dark-background-color = #363636;
+$dark-second-background-color = darken($dark-background-color, 10%);
 $dark-default-text-color = #b9b5c2;
 $dark-first-text-color = lighten($dark-default-text-color, 30%);
 $dark-second-text-color = lighten($dark-default-text-color, 20%);
@@ -83,6 +84,7 @@ $dark-shadow-hover-color = rgba(128, 128, 128, 0.28);
 $dark-scroll-bar-color = darken($dark-default-text-color, 30%);
 $dark-scroll-bar-bg-color = lighten($dark-background-color, 10%);
 $dark-link-color = lighten($dark-default-text-color, 10%);
+$dark-copyright-info-color = darken($copyright-info-color, 20%);
 
 // ========================================================================
 // font
@@ -112,6 +114,7 @@ root-color(mode) {
   --scroll-bar-color: mode == 'light' ? $scroll-bar-color : $dark-scroll-bar-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;
 }