Merge pull request #246 from XPoet/dev

Release new version

layout/_partial/archive-list.ejs

@@ -8,10 +8,10 @@
             <ul class="article-list border-box">
                 <% postItem.postList.forEach(post => { %>
                     <li class="article-item border-box">
+                        <span class="article-date border-box"><%= date(post.date, 'MM-DD') %></span>
                         <a class="article-title border-box text-ellipsis"
                            href="<%- url_for(post.path) %>"
                         ><%= post.title %></a>
-                        <span class="article-date border-box"><%= date(post.date, 'MM-DD') %></span>
                     </li>
                 <% }) %>
             </ul>

layout/_partial/comment/comment.ejs

@@ -6,9 +6,8 @@ const {
 %>
 
 <% if (theme_comment_enable === true && theme_comment_use) { %>
-    <div class="comments-container">
-        <div id="comments-anchor"></div>
-        <div class="comment-area-title">
+    <div class="comments-container border-box">
+        <div id="comments-anchor" class="comment-area-title border-box">
             <i class="fas fa-comments"></i>&nbsp;<%- __('comments') %>
         </div>
         <% if  (theme_comment_use === 'valine') { %>

layout/_partial/toc.ejs

@@ -1,5 +1,5 @@
-<div class="post-toc-wrap">
-    <div class="post-toc">
+<div class="post-toc-wrap border-box">
+    <div class="post-toc border-box">
         <%- toc(
                 page.content,
                 {

layout/category-content.ejs

@@ -1,5 +1,5 @@
 <div class="fade-in-down-animation">
-    <div class="category-container">
+    <div class="category-container border-box">
         <div class="category-name">
             <i class="fas fa-folder"></i>&nbsp;<%= page.category %>
         </div>

layout/home-content.ejs

@@ -9,7 +9,7 @@
                     >
                         <% if (post.sticky) { %>
                             <div class="post-sticky-box cover">
-                                <i class="fas fa-thumbtack"></i>&nbsp;<%- __('top') %>
+                                <i class="fas fa-thumbtack"></i><span class="sticky-name">&nbsp;<%- __('top') %></span>
                             </div>
                         <% } %>
                         <img class="cover-img" src="<%= post.cover %>" alt="<%= post.title %>">
@@ -18,8 +18,8 @@
 
                 <div class="home-article-item-bottom border-box">
                     <% if (post.sticky && !post?.cover) { %>
-                        <div class="post-sticky-box">
-                            <i class="fas fa-thumbtack"></i>&nbsp;<%- __('top') %>
+                        <div class="post-sticky-box card">
+                            <i class="fas fa-thumbtack"></i><span class="sticky-name">&nbsp;<%- __('top') %></span>
                         </div>
                     <% } %>
                     <h3 class="home-article-title border-box">

layout/tag-content.ejs

@@ -1,6 +1,6 @@
 <div class="fade-in-down-animation">
-    <div class="tag-container">
-        <div class="tag-name"><i class="fas fa-tag"></i>&nbsp;<%= page.tag %>
+    <div class="tag-container border-box">
+        <div class="tag-name"><i class="fas fa-hashtag"></i>&nbsp;<%= page.tag %>
         </div>
         <div class="tag-post-list">
             <%- partial('_partial/archive-list', { archive_posts: page.posts }) %>

source/css/common/basic.styl

@@ -1,6 +1,7 @@
-@import 'variables.styl'
+@import 'css-variables.styl'
+@import 'stylus-variables.styl'
 @import 'animated.styl'
-@import 'keep-theme.styl'
+@import 'keep-style.styl'
 
 // ======================================================================
 // all

source/css/common/code-block/code-theme.styl

@@ -1,4 +1,4 @@
-@import "../variables.styl"
+@import "../stylus-variables.styl"
 
 // A single line block of code
 $code-foreground = lighten($text-color-3, 2%)

source/css/common/css-vars.styl → source/css/common/css-variables.styl

@@ -1,4 +1,4 @@
-@import "variables.styl"
+@import "stylus-variables.styl"
 
 :root {
   // ==============================================================================================

source/css/common/keep-style.styl

@@ -0,0 +1,161 @@
+@import 'stylus-variables.styl'
+
+keep-container(sValue, pValue, mbValue) {
+  box-sizing border-box
+  margin-bottom mbValue
+  padding pValue
+  background var(--content-background-color)
+  border-radius var(--box-border-radius)
+  box-shadow 0 0 8px var(--shadow-color)
+
+  if (sValue != 1) {
+    transition-t("transform", "0", "0.2", "linear")
+  }
+
+  &:hover {
+    if (sValue != 1) {
+      transform scale(sValue)
+    }
+    box-shadow 0 0 12px var(--shadow-hover-color)
+  }
+
+  +keep-tablet() {
+    margin-bottom mbValue * 0.8
+    padding pValue * 0.8
+    border-radius calc(var(--box-border-radius) * 0.8)
+  }
+
+
+  +keep-mobile() {
+    margin-bottom mbValue * 0.6
+    padding pValue * 0.6
+    border-radius calc(var(--box-border-radius) * 0.6)
+  }
+}
+
+
+disable-user-select() {
+  -moz-user-select none
+  -ms-user-select none
+  -webkit-user-select none
+  user-select none
+}
+
+
+not-text-size-adjust() {
+  -ms-text-size-adjust none
+  -moz-text-size-adjust none
+  -webkit-text-size-adjust none
+}
+
+
+keep-tablet() {
+  @media (max-width $media-max-width) {
+    { block }
+  }
+}
+
+
+keep-mobile() {
+  @media (max-width $media-max-width-mobile) {
+    { block }
+  }
+}
+
+
+root-color(mode) {
+  // primary color
+  --primary-color $primary-color
+  --primary-color-light-1 $primary-color-light-1
+  --primary-color-light-2 $primary-color-light-2
+  --primary-color-dark-1 $primary-color-dark-1
+  --primary-color-dark-2 $primary-color-dark-2
+
+  // 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
+
+  // content background color
+  --content-background-color mode == 'light' ? $content-background-color : $dark-content-background-color
+
+  // text color
+  --text-color-1 mode == 'light' ? $text-color-1 : $dark-text-color-1
+  --text-color-2 mode == 'light' ? $text-color-2 : $dark-text-color-2
+  --text-color-3 mode == 'light' ? $text-color-3 : $dark-text-color-3
+  --text-color-4 mode == 'light' ? $text-color-4 : $dark-text-color-4
+  --text-color-5 mode == 'light' ? $text-color-5 : $dark-text-color-5
+  --text-color-6 mode == 'light' ? $text-color-6 : $dark-text-color-6
+
+  // toc text color
+  --toc-text-color mode == 'light' ? $toc-text-color : $dark-toc-text-color
+
+  // badge color
+  --badge-color mode == 'light' ? $badge-color : $dark-badge-color
+  --badge-background-color mode == 'light' ? $badge-background-color : $dark-badge-background-color
+
+  // border color
+  --border-color mode == 'light' ? $border-color : $dark-border-color
+
+  // selection color
+  --selection-color mode == 'light' ? $selection-color : $dark-selection-color
+
+  // shadow color
+  --shadow-color mode == 'light' ? $shadow-color : $dark-shadow-color
+  --shadow-hover-color mode == 'light' ? $shadow-hover-color : $dark-shadow-hover-color
+
+  // scrollbar color
+  --scrollbar-color mode == 'light' ? $scrollbar-color : $dark-scrollbar-color
+  --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 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
+
+  // header transparent background color
+  --header-transparent-background-1 mode == 'light' ? $header-transparent-background-1 : $dark-header-transparent-background-1
+  --header-transparent-background-2 mode == 'light' ? $header-transparent-background-2 : $dark-header-transparent-background-2
+
+  // pjax progress bar color
+  --pjax-progress-bar-color mode == 'light' ? $pjax-progress-bar-color : $dark-pjax-progress-bar-color
+
+  // article aging tips primary color
+  --article-aging-tips-color mode == 'light' ? $article-aging-tips-color : $dark-article-aging-tips-color
+  --article-aging-tips-background-color mode == 'light' ? $article-aging-tips-background-color : $dark-article-aging-tips-background-color
+  --article-aging-tips-border-color mode == 'light' ? $article-aging-tips-border-color : $dark-article-aging-tips-border-color
+
+  --post-h-bottom-border-color mode == 'light' ? $post-h-bottom-border-color : $dark-post-h-bottom-border-color
+}
+
+
+:root {
+  root-color('light')
+}
+
+
+@media (prefers-color-scheme light) {
+  :root {
+    root-color('light')
+  }
+}
+
+
+@media (prefers-color-scheme dark) {
+  :root {
+    root-color('dark')
+  }
+}
+
+
+.light-mode {
+  root-color('light')
+}
+
+
+.dark-mode {
+  root-color('dark')
+}