ui: optimize post copyright style

XPoet · Sep 8, 2023 · cb03fd1 · cb03fd1
1 parent 212d638
commit cb03fd1
Show file tree

Hide file tree

Showing 9 changed files with 121 additions and 82 deletions.
diff --git a/languages/en.yml b/languages/en.yml
@@ -54,10 +54,12 @@ copy_copyright:
   author: Original article author
   link: Original article link
 copyright:
-  author: Post author
-  title: Post title
-  link: Post link
+  author: Author
+  title: Title
+  link: Link
   create_time: Create time
+  published: Published
+  license: License
   license_title: Copyright notice
   license_content: "All articles in this blog are licensed under %s unless stating additionally."
 article-aging: "It has been %s days since the last update of this article. Some contents may be outdated. Please pay attention to screening."

diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml
@@ -54,10 +54,12 @@ copy_copyright:
   author: 原文作者
   link: 原文链接
 copyright:
-  title: 本文标题
-  author: 本文作者
-  link: 本文链接
+  title: 标题
+  author: 作者
+  link: 链接
   create_time: 创建时间
+  published: 发布于
+  license: 许可
   license_title: 版权声明
   license_content: "本博客所有文章除特别声明外，均采用 %s 许可协议。转载请注明出处！"
 article-aging: "本文距离上次更新已过去 %s 天，部分内容可能已经过时，请注意甄别。"

diff --git a/languages/zh-TW.yml b/languages/zh-TW.yml
@@ -54,10 +54,12 @@ copy_copyright:
   author: 原文作者
   link: 原文鏈接
 copyright:
-  author: 文章作者
-  title: 文章標題
-  link: 永久連結
+  author: 作者
+  title: 標題
+  link: 連結
   create_time: 撰寫時間
+  published: 發布于
+  license: 許可
   license_title: 版權宣告
   license_content: "這個網站所有文章均使用 %s 授權"
 article-aging: "本文距離上次更新已過去 %s 天，部分內容可能已經過時，請註意甄別。"

diff --git a/layout/_partial/article-copyright-info.ejs b/layout/_partial/article-copyright-info.ejs
@@ -1,24 +1,48 @@
-<%
-const colon = config.language === 'en' ? ': ' : '：'
-%>
-<div class="article-copyright-info-container">
-    <ul class="copyright-info-content">
-        <li class="post-title">
-            <span class="type"><%- __('copyright.title') %></span><%= colon %><span class="content"><%= page.title %></span>
-        </li>
-        <li class="post-author">
-            <span class="type"><%- __('copyright.author') %></span><%= colon %><span class="content"><%= theme?.base_info?.author || config.author %></span>
-        </li>
-        <li class="post-time">
-            <span class="type"><%- __('copyright.create_time') %></span><%= colon %><span class="content"><%= date(page.date, 'YYYY-MM-DD HH:mm:ss') %></span>
-        </li>
-        <li class="post-link">
-            <span class="type"><%- __('copyright.link') %></span><%= colon %><span class="content"><%= page.path %></span>
-        </li>
-        <li class="post-license">
-            <span class="type"><%- __('copyright.license_title') %></span><%= colon %><span class="content"><%- __('copyright.license_content', '<a class="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">BY-NC-SA</a>') %></span>
-        </li>
-    </ul>
+<div class="article-copyright-info-container border-box">
+    <div class="copyright-info-content border-box">
+        <div class="copyright-info-top border-box">
+            <div class="post-title border-box text-ellipsis">
+                <%= page.title %>
+            </div>
+
+            <div class="post-link border-box text-ellipsis">
+                <%= page.path %>
+            </div>
+        </div>
+
+        <div class="copyright-info-bottom border-box">
+            <div class="post-author bottom-item">
+                <div class="type">
+                    <%- __('copyright.author') %>
+                </div>
+                <div class="content"><%= theme?.base_info?.author || config.author %></div>
+            </div>
+
+            <div class="post-time bottom-item">
+                <div class="type">
+                    <%- __('copyright.published') %>
+                </div>
+                <div class="content"><%= date(page.date, 'YYYY-MM-DD HH:mm') %></div>
+            </div>
+
+
+            <div class="post-license bottom-item">
+                <div class="type">
+                    <%- __('copyright.license') %>
+                </div>
+                <div class="content tooltip" data-content="CC BY-NC-SA 4.0">
+                    <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">
+                        <i class="fa-brands fa-creative-commons"></i>
+                        <i class="fa-brands fa-creative-commons-by"></i>
+                        <i class="fa-brands fa-creative-commons-nc"></i>
+                        <i class="fa-brands fa-creative-commons-sa"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <i class="copyright-bg fa-solid fa-copyright"></i>
+    </div>
     <div class="copy-copyright-info flex-center tooltip" data-content="<%= __('copy_copyright.copy') %>" data-offset-y="-2px">
         <i class="fa-solid fa-copy"></i>
     </div>

diff --git a/source/css/common/basic.styl b/source/css/common/basic.styl
@@ -204,6 +204,7 @@ img {
   box-sizing border-box
 }
 
+
 // ======================================================================
 // text ellipsis
 // ======================================================================
@@ -252,7 +253,7 @@ img {
     position absolute
     top -0.4rem
     left 50%
-    z-index $z-index-9
+    z-index $z-index-10
     display none
     box-sizing border-box
     padding 0.2rem 0.6rem

diff --git a/source/css/common/variables.styl b/source/css/common/variables.styl
@@ -106,7 +106,7 @@ $scrollbar-color = lighten($text-color-3, 10%)
 $scrollbar-background-color = darken($background-color-1, 10%)
 $toc-scrollbar-color = alpha($text-color-3, 0.1)
 
-$copyright-info-color = #cc0033
+$copyright-icon-bg-color = alpha($text-color-3, 0.12)
 
 $avatar-background-color = $primary-color-dark-1
 
@@ -153,7 +153,7 @@ $dark-scrollbar-color = darken($dark-background-color-1, 10%)
 $dark-scrollbar-background-color = lighten($dark-background-color-1, 20%)
 $dark-toc-scrollbar-color = alpha($dark-text-color-3, 0.1)
 
-$dark-copyright-info-color = darken($copyright-info-color, 20%)
+$dark-copyright-icon-bg-color = alpha($dark-text-color-3, 0.12)
 
 $dark-avatar-background-color = darken($avatar-background-color, 20%)
 
@@ -219,8 +219,8 @@ root-color(mode) {
   --scrollbar-background-color mode == 'light' ? $scrollbar-background-color : $dark-scrollbar-background-color
   --toc-scrollbar-color mode == 'light' ? $toc-scrollbar-color : $dark-toc-scrollbar-color
 
-  // copyright info left side color
-  --copyright-info-color mode == 'light' ? $copyright-info-color : $dark-copyright-info-color
+  // copyright icon background color
+  --copyright-icon-bg-color mode == 'light' ? $copyright-icon-bg-color : $dark-copyright-icon-bg-color
 
   // avatar background color
   --avatar-background-color mode == 'light' ? $avatar-background-color : $dark-avatar-background-color

diff --git a/source/css/layout/_partial/article-copyright-info.styl b/source/css/layout/_partial/article-copyright-info.styl
@@ -1,21 +1,7 @@
 .article-copyright-info-container {
-  position relative
-  box-sizing border-box
   width 100%
-  padding 0.8rem 0.8rem 0.8rem 1.3rem
-  font-size 1rem
   background var(--background-color-2)
-
-  &::after {
-    position absolute
-    top 0
-    left 0
-    width 0.5rem
-    height 100%
-    background var(--copyright-info-color)
-    content ''
-  }
-
+  border-radius calc(var(--box-border-radius) / 2)
 
   &:hover {
     .copy-copyright-info {
@@ -25,49 +11,63 @@
 
 
   .copyright-info-content {
-    position relative
-    box-sizing border-box
-    overflow-x auto
+    width 100%
+    padding 1.2rem
+    overflow hidden
+    font-size 1rem
 
-    &::-webkit-scrollbar {
-      width 0.3rem
-      height 0.3rem
-      transition all 0.2s ease
-    }
 
-    &::-webkit-scrollbar-thumb {
-      background var(--text-color-4)
-    }
+    .copyright-info-top {
+      width 100%
+
+      .post-title {
+        width 100%
+        color var(--text-color-3)
+        font-size 1.1rem
+      }
 
-    &::-webkit-scrollbar-track {
-      background transparent
+      .post-link {
+        width 100%
+        margin-top 0.2rem
+        color var(--text-color-4)
+      }
     }
 
-    li {
-      margin-bottom 0.4rem
-      color var(--text-color-3)
-      white-space nowrap
 
-      .type
-      .content {
-        color var(--text-color-3)
-      }
+    .copyright-info-bottom {
+      display flex
+      justify-content flex-start
+      margin-top 1rem
+
+      .bottom-item {
+        margin-right 1.2rem
 
-      .license {
-        font-weight bold
+        .type {
+          color var(--text-color-4)
+        }
+
+        .content {
+          margin-top 0.2rem
+          color var(--text-color-3)
+        }
       }
 
-      &:last-child {
-        margin-bottom 0
+
+      .post-license {
+        .content {
+          i {
+            font-size 1.1rem
+          }
+        }
       }
     }
   }
 
 
   .copy-copyright-info {
     position absolute
-    top 0.4rem
-    right 0.4rem
+    top 0.6rem
+    right 0.6rem
     box-sizing border-box
     padding 0.3rem
     visibility hidden
@@ -78,4 +78,13 @@
       color var(--text-color-3)
     }
   }
+
+  .copyright-bg {
+    position absolute
+    top 50%
+    right 2rem
+    color var(--copyright-icon-bg-color)
+    font-size 14rem
+    transform translateY(-50%)
+  }
 }
diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl
@@ -39,7 +39,6 @@ $spacer-padding = 2rem
     order 0
     width 100%
     height 100%
-    overflow hidden
 
 
     keep-container(1, 0, 2rem)
@@ -63,6 +62,8 @@ $spacer-padding = 2rem
       padding-right $spacer-padding
       overflow hidden
       background-color var(--background-color-2)
+      border-top-left-radius var(--box-border-radius)
+      border-top-right-radius var(--box-border-radius)
 
 
       +keep-tablet() {

diff --git a/source/js/post-helper.js b/source/js/post-helper.js
@@ -146,9 +146,7 @@ function initToggleShowToc() {
 
     // set post link
     initSetPostLink() {
-      const postLinkContentDom = document.querySelector(
-        '.copyright-info-content .post-link .content'
-      )
+      const postLinkContentDom = document.querySelector('.copyright-info-content .post-link')
       postLinkContentDom && (postLinkContentDom.innerHTML = decodeURI(window.location.href))
     },
 
@@ -176,7 +174,7 @@ function initToggleShowToc() {
       copyDom.addEventListener('click', () => {
         if (!isCopied) {
           const author = cicDom.querySelector('.post-author .content').innerHTML
-          const link = cicDom.querySelector('.post-link .content').innerHTML
+          const link = cicDom.querySelector('.post-link').innerHTML
           const tgtTxt = `${ccLang.author}${colon}${author}\n${ccLang.link}${colon}${link}`
           navigator.clipboard.writeText(tgtTxt).then(() => {
             setCopyDomContent('fa-copy', 'fa-check', ccLang.copied, true)