Merge pull request #242 from XPoet/dev

Release new version
XPoet · Sep 7, 2023 · 570ebe2 · 570ebe2
2 parents 44dcb31 + 1b15431
commit 570ebe2
Show file tree

Hide file tree

Showing 17 changed files with 269 additions and 158 deletions.
diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml
@@ -24,7 +24,7 @@ archives: 归档
 about: 关于
 links: 友链
 link: 友链
-top: 顶置
+top: 置顶
 read_more: 阅读全文
 wordcount: 字
 min2read: 分钟

diff --git a/layout/_partial/article-meta-info.ejs b/layout/_partial/article-meta-info.ejs
@@ -7,7 +7,7 @@ const home_tag_limit_number = theme?.home_article?.tag?.limit || 3
     <div class="article-meta-info border-box">
         <% if (page_type === 'home') { %>
             <span class="meta-info-item border-box">
-                <i class="icon fas fa-history"></i>&nbsp;<span class="home-article-history" data-updated="<%= post.updated %>"><%= date(post.updated, 'YYYY-MM-DD') %></span>
+                <i class="icon fas fa-history"></i>&nbsp;<span class="home-article-history" data-updated="<%= post.updated %>"><%= date(post.updated, 'YYYY-MM-DD HH:mm:ss') %></span>
             </span>
         <% } %>
 

diff --git a/layout/_partial/side-tools.ejs b/layout/_partial/side-tools.ejs
@@ -1,5 +1,5 @@
-<div class="side-tools-container">
-    <ul class="side-tools-list">
+<div class="side-tools-container border-box <%= is_home() ? 'side-tools-show-handle' : '' %>">
+    <ul class="side-tools-list side-tools-show-handle border-box">
         <li class="tools-item tool-font-adjust-plus flex-center">
             <i class="fas fa-search-plus"></i>
         </li>
@@ -35,7 +35,7 @@
         </li>
     </ul>
 
-    <ul class="exposed-tools-list">
+    <ul class="exposed-tools-list border-box">
         <% if (is_post() && page?.toc !== false && theme?.toc?.enable === true) { %>
             <li class="tools-item toggle-show-toc-tablet flex-center">
                 <i class="fas fa-list"></i>

diff --git a/layout/article-content.ejs b/layout/article-content.ejs
@@ -3,108 +3,121 @@
 
         <div class="article-content-container border-box">
 
-            <div class="article-title">
-                <span class="title-hover-animation"><%= page.title %></span>
-            </div>
+            <% if (page?.cover) { %>
+                <div class="article-content-top border-box">
+                    <div class="cover-article-title text-ellipsis">
+                        <%= page.title %>
+                    </div>
+                    <img class="post-cover" src="<%= page.cover %>" alt="<%= page.title %>">
+                </div>
+            <% } %>
 
-            <% if (theme?.base_info?.author || config?.author) { %>
-                <div class="article-header border-box">
-                    <% if (theme?.style?.avatar) { %>
-                        <div class="avatar-box border-box">
-                            <%- image_tag(theme?.style?.avatar) %>
-                        </div>
-                    <% } %>
-                    <div class="info-box">
-                        <div class="author">
-                            <span class="name"><%= theme?.base_info?.author || config?.author %></span>
-                            <% if (theme?.post?.author_label?.enable === true) { %>
-                                <span class="author-label"><%- getAuthorLabel(site.posts.length, theme?.post?.author_label) %></span>
-                            <% } %>
+            <div class="article-content-bottom border-box<%= page?.cover ? ' has-cover' : '' %>">
+                <% if (!page?.cover) { %>
+                    <div class="article-title">
+                        <span class="title-hover-animation"><%= page.title %></span>
+                    </div>
+                <% } %>
+
+                <% if (theme?.base_info?.author || config?.author) { %>
+                    <div class="article-header border-box">
+                        <% if (theme?.style?.avatar) { %>
+                            <div class="avatar-box border-box">
+                                <%- image_tag(theme?.style?.avatar) %>
+                            </div>
+                        <% } %>
+                        <div class="info-box">
+                            <div class="author">
+                                <span class="name"><%= theme?.base_info?.author || config?.author %></span>
+                                <% if (theme?.post?.author_label?.enable === true) { %>
+                                    <span class="author-label"><%- getAuthorLabel(site.posts.length, theme?.post?.author_label) %></span>
+                                <% } %>
+                            </div>
+                            <div class="meta-info border-box">
+                                <%- partial('_partial/article-meta-info', { post: page, page_type: 'post' }) %>
+                            </div>
                         </div>
+                    </div>
+                <% } else { %>
+                    <div class="article-header-meta-info">
                         <div class="meta-info border-box">
                             <%- partial('_partial/article-meta-info', { post: page, page_type: 'post' }) %>
                         </div>
                     </div>
-                </div>
-            <% } else { %>
-                <div class="article-header-meta-info">
-                    <div class="meta-info border-box">
-                        <%- partial('_partial/article-meta-info', { post: page, page_type: 'post' }) %>
-                    </div>
-                </div>
-            <% } %>
-
-            <div class="article-content keep-markdown-body">
-                <% if (page?.aging === true) { %>
-                    <div class="article-aging-tips"
-                         data-update-date="<%= page.updated %>"
-                         data-aging-days="<%= page?.aging_days %>"
-                    >
-                        <i class="fa-solid fa-circle-exclamation"></i><%- __('article-aging', '<span class="days">0</span>') %>
-                    </div>
                 <% } %>
 
-                <%- page.content %>
-            </div>
+                <div class="article-content keep-markdown-body">
+                    <% if (page?.aging === true) { %>
+                        <div class="article-aging-tips"
+                             data-update-date="<%= page.updated %>"
+                             data-aging-days="<%= page?.aging_days %>"
+                        >
+                            <i class="fa-solid fa-circle-exclamation"></i><%- __('article-aging', '<span class="days">0</span>') %>
+                        </div>
+                    <% } %>
 
-            <% if (
-                    (theme?.post?.copyright_info === true || theme?.copyright_info?.enable === true) && page?.copyright_info !== false
-            ) { %>
-                <div class="post-copyright-info">
-                    <%- partial('_partial/article-copyright-info') %>
+                    <%- page.content %>
                 </div>
-            <% } %>
 
-            <% if (page.tags.length) { %>
-                <ul class="post-tags-box">
-                    <% page.tags.forEach((tag) => { %>
-                        <li class="tag-item">
-                            <a href="<%- url_for(tag.path) %>"><i class="icon fas fa-hashtag"></i><%= tag.name %></a>&nbsp;
-                        </li>
-                    <% }); %>
-                </ul>
-            <% } %>
+                <% if (
+                        (theme?.post?.copyright_info === true || theme?.copyright_info?.enable === true) && page?.copyright_info !== false
+                ) { %>
+                    <div class="post-copyright-info">
+                        <%- partial('_partial/article-copyright-info') %>
+                    </div>
+                <% } %>
 
-            <% if (page.prev || page.next) { %>
-                <div class="article-nav">
-                    <% if (page.prev) { %>
-                        <div class="article-prev">
-                            <a class="prev"
-                               rel="prev"
-                               href="<%= url_for(page.prev.path) %>"
-                            >
+                <% if (page.tags.length) { %>
+                    <ul class="post-tags-box">
+                        <% page.tags.forEach((tag) => { %>
+                            <li class="tag-item">
+                                <a href="<%- url_for(tag.path) %>"><i class="icon fas fa-hashtag"></i><%= tag.name %></a>&nbsp;
+                            </li>
+                        <% }); %>
+                    </ul>
+                <% } %>
+
+                <% if (page.prev || page.next) { %>
+                    <div class="article-nav">
+                        <% if (page.prev) { %>
+                            <div class="article-prev">
+                                <a class="prev"
+                                   rel="prev"
+                                   href="<%= url_for(page.prev.path) %>"
+                                >
                             <span class="left arrow-icon flex-center">
                               <i class="fas fa-chevron-left"></i>
                             </span>
-                                <span class="title flex-center">
+                                    <span class="title flex-center">
                                 <span class="post-nav-title-item text-ellipsis"><%= page.prev.title %></span>
                                 <span class="post-nav-item"><%= __('prev_posts') %></span>
                             </span>
-                            </a>
-                        </div>
-                    <% } %>
-                    <% if (page.next) { %>
-                        <div class="article-next">
-                            <a class="next"
-                               rel="next"
-                               href="<%= url_for(page.next.path) %>"
-                            >
+                                </a>
+                            </div>
+                        <% } %>
+                        <% if (page.next) { %>
+                            <div class="article-next">
+                                <a class="next"
+                                   rel="next"
+                                   href="<%= url_for(page.next.path) %>"
+                                >
                             <span class="title flex-center">
                                 <span class="post-nav-title-item text-ellipsis"><%= page.next.title %></span>
                                 <span class="post-nav-item"><%= __('next_posts') %></span>
                             </span>
-                                <span class="right arrow-icon flex-center">
+                                    <span class="right arrow-icon flex-center">
                               <i class="fas fa-chevron-right"></i>
                             </span>
-                            </a>
-                        </div>
-                    <% } %>
-                </div>
-            <% } %>
+                                </a>
+                            </div>
+                        <% } %>
+                    </div>
+                <% } %>
 
-            <% if (page?.comment !== false) { %>
-                <%- partial('_partial/comment/comment') %>
-            <% } %>
+                <% if (page?.comment !== false) { %>
+                    <%- partial('_partial/comment/comment') %>
+                <% } %>
+            </div>
         </div>
 
         <% if (is_post() && theme?.toc?.enable === true && page?.toc !== false) { %>

diff --git a/layout/home-content.ejs b/layout/home-content.ejs
@@ -5,15 +5,22 @@
 
                 <% if (post?.cover) { %>
                     <div class="home-article-item-top border-box"
-                         style="height: <%= post?.cover_height ? post?.cover_height + 'px' : '8rem' %>"
+                         style="height: <%= post?.cover_height ? post?.cover_height + 'px' : '9.2rem' %>"
                     >
+                        <% if (post.sticky) { %>
+                            <div class="post-sticky-box cover">
+                                <i class="fas fa-thumbtack"></i>&nbsp;<%- __('top') %>
+                            </div>
+                        <% } %>
                         <img class="cover-img" src="<%= post.cover %>" alt="<%= post.title %>">
                     </div>
                 <% } %>
 
                 <div class="home-article-item-bottom border-box">
-                    <% if (post.sticky) { %>
-                        <i class="fas fa-thumbtack sticky-icon"></i>
+                    <% if (post.sticky && !post?.cover) { %>
+                        <div class="post-sticky-box">
+                            <i class="fas fa-thumbtack"></i>&nbsp;<%- __('top') %>
+                        </div>
                     <% } %>
                     <h3 class="home-article-title border-box">
                         <a href="<%- url_for(post.path) %>">

diff --git a/source/css/common/basic.styl b/source/css/common/basic.styl
@@ -186,36 +186,6 @@ img {
 }
 
 
-// ======================================================================
-// button
-// ======================================================================
-button {
-  margin 0
-  padding 0
-  background transparent
-  border 0
-  outline none
-  cursor pointer
-}
-
-.btn {
-  position relative
-  display inline-block
-  padding 0.4rem 1rem
-  white-space nowrap
-  text-align center
-  background var(--background-color-1)
-  border-radius 0.3rem
-  box-shadow 2px 2px 5px var(--shadow-color)
-  cursor pointer
-
-  &:hover {
-    color var(--background-color-1)
-    background var(--primary-color)
-  }
-}
-
-
 // ======================================================================
 // flex center
 // ======================================================================

diff --git a/source/css/common/keep-theme.styl b/source/css/common/keep-theme.styl
@@ -4,7 +4,7 @@ keep-container(sValue, pValue, mbValue) {
   padding pValue
   background var(--content-background-color)
   border-radius var(--box-border-radius)
-  box-shadow 2px 2px 5px var(--shadow-color)
+  box-shadow 0 0 8px var(--shadow-color)
 
   if (sValue != 1) {
     transition-t("transform", "0", "0.2", "linear")
@@ -14,7 +14,7 @@ keep-container(sValue, pValue, mbValue) {
     if (sValue != 1) {
       transform scale(sValue)
     }
-    box-shadow 2px 2px 8px var(--shadow-hover-color)
+    box-shadow 0 0 12px var(--shadow-hover-color)
   }
 
   +keep-tablet() {

diff --git a/source/css/common/variables.styl b/source/css/common/variables.styl
@@ -79,8 +79,9 @@ $primary-color-dark-2 = darken($primary-color, 20%)
 // theme light mode color set
 // ==============================================================================================
 $background-color-1 = #fff
-$background-color-2= darken($background-color-1, 3%)
-$background-color-3= darken($background-color-1, 6%)
+$background-color-1-transparent = alpha($background-color-1, 0.6)
+$background-color-2 = darken($background-color-1, 3%)
+$background-color-3 = darken($background-color-1, 6%)
 $content-background-color = #fff
 
 $text-color-3 = #50505c
@@ -98,8 +99,8 @@ $badge-background-color = lighten($text-color-3, 40%)
 $border-color = darken($background-color-1, 30%)
 $selection-color = lighten($primary-color, 10%)
 
-$shadow-color = rgba(0, 0, 0, 0.2)
-$shadow-hover-color = rgba(0, 0, 0, 0.3)
+$shadow-color = rgba(0, 0, 0, 0.16)
+$shadow-hover-color = rgba(0, 0, 0, 0.22)
 
 $scrollbar-color = lighten($text-color-3, 10%)
 $scrollbar-background-color = darken($background-color-1, 10%)
@@ -125,8 +126,9 @@ $post-h-bottom-border-color = alpha($text-color-3, 0.15)
 // theme dark mode color set
 // ==============================================================================================
 $dark-background-color-1 = #22272e
-$dark-background-color-2= lighten($dark-background-color-1, 4%)
-$dark-background-color-3= lighten($dark-background-color-1, 8%)
+$dark-background-color-1-transparent = alpha($dark-background-color-1, 0.6)
+$dark-background-color-2 = lighten($dark-background-color-1, 4%)
+$dark-background-color-3 = lighten($dark-background-color-1, 8%)
 $dark-content-background-color = darken($dark-background-color-1, 2%)
 
 $dark-text-color-3 = #adbac5
@@ -144,8 +146,8 @@ $dark-badge-background-color = lighten($dark-text-color-3, 40%)
 $dark-border-color = lighten($dark-background-color-1, 30%)
 $dark-selection-color = darken($selection-color, 20%)
 
-$dark-shadow-color = rgba(128, 128, 128, 0.2)
-$dark-shadow-hover-color = rgba(128, 128, 128, 0.28)
+$dark-shadow-color = rgba(120, 120, 120, 0.18)
+$dark-shadow-hover-color = rgba(120, 120, 120, 0.24)
 
 $dark-scrollbar-color = darken($dark-background-color-1, 10%)
 $dark-scrollbar-background-color = lighten($dark-background-color-1, 20%)
@@ -180,6 +182,7 @@ root-color(mode) {
 
   // background color
   --background-color-1 mode == 'light' ? $background-color-1 : $dark-background-color-1
+  --background-color-1-transparent mode == 'light' ? $background-color-1-transparent : $dark-background-color-1-transparent
   --background-color-2 mode == 'light' ? $background-color-2 : $dark-background-color-2
   --background-color-3 mode == 'light' ? $background-color-3 : $dark-background-color-3
 

diff --git a/source/css/layout/_partial/header.styl b/source/css/layout/_partial/header.styl
@@ -12,10 +12,10 @@ $logo-image-box-width = 2.8rem
   height 100%
   padding-top $scroll-progress-bar-height
   background var(--background-color-1)
-  box-shadow 2px 2px 5px var(--shadow-color)
+  box-shadow 1px 2px 6px var(--shadow-color)
 
   &:hover {
-    box-shadow 2px 2px 8px var(--shadow-hover-color)
+    box-shadow 1px 2px 10px var(--shadow-hover-color)
   }
 
   .header-content {

diff --git a/source/css/layout/_partial/post-tools.styl b/source/css/layout/_partial/post-tools.styl
@@ -2,7 +2,7 @@ $li-margin-bottom = 0.8rem
 $post-tool-button-width = 2.5rem
 
 .post-tools-container {
-  padding-top 2rem
+  padding-top $component-spacing-value
 
   .tools-list {