hexo-theme-particlex 2.6.7 → 2.6.9

package/layout/card.ejs

@@ -1,5 +1,5 @@
-<div id="card-div">
-    <div class="card-style">
+<div id="card-style">
+    <div id="card-div">
         <div class="avatar">
             <img src="<%- url_for(theme.avatar) %>" alt="avatar" />
         </div>

package/layout/import.ejs

@@ -1,23 +1,23 @@
-<script src="https://cdn.staticfile.org/vue/3.2.47/vue.global.prod.min.js"></script>
-<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.3.0/css/all.min.css" />
+<script src="https://cdn.staticfile.org/vue/3.3.4/vue.global.prod.min.js"></script>
+<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" />
 <link rel="stylesheet" href="<%- url_for("/css/fonts.min.css") %>" />
 <script> const mixins = {}; </script>
 <% if (theme.polyfill.enable) { %>
 <script src="https://polyfill.io/v3/polyfill.min.js?features=<%- theme.polyfill.features %>"></script>
 <% } %>
 <% if (theme.highlight.enable) { %>
-<script src="https://cdn.staticfile.org/highlight.js/11.7.0/highlight.min.js"></script>
+<script src="https://cdn.staticfile.org/highlight.js/11.8.0/highlight.min.js"></script>
 <script src="https://cdn.staticfile.org/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
 <link
     rel="stylesheet"
-    href="https://cdn.staticfile.org/highlight.js/11.7.0/styles/<%- theme.highlight.style %>.min.css"
+    href="https://cdn.staticfile.org/highlight.js/11.8.0/styles/<%- theme.highlight.style %>.min.css"
 />
 <script src="<%- url_for("/js/lib/highlight.js") %>"></script>
 <% } %>
 <% if (theme.math.enable) { %>
-<script src="https://cdn.staticfile.org/KaTeX/0.16.4/katex.min.js"></script>
-<script src="https://cdn.staticfile.org/KaTeX/0.16.4/contrib/auto-render.min.js"></script>
-<link rel="stylesheet" href="https://cdn.staticfile.org/KaTeX/0.16.4/katex.min.css" />
+<script src="https://cdn.staticfile.org/KaTeX/0.16.8/katex.min.js"></script>
+<script src="https://cdn.staticfile.org/KaTeX/0.16.8/contrib/auto-render.min.js"></script>
+<link rel="stylesheet" href="https://cdn.staticfile.org/KaTeX/0.16.8/katex.min.css" />
 <script src="<%- url_for("/js/lib/math.js") %>"></script>
 <% } %>
 <% if (theme.preview.enable) { %>
@@ -36,9 +36,9 @@
 <link rel="stylesheet" href="https://cdn.staticfile.org/gitalk/1.8.0/gitalk.min.css" />
 <% } %>
 <% if (theme.waline.enable) { %>
-<script src="https://cdn.staticfile.org/waline/2.14.8/waline.min.js"></script>
-<link rel="stylesheet" href="https://cdn.staticfile.org/waline/2.14.8/waline.min.css" />
-<link rel="stylesheet" href="https://cdn.staticfile.org/waline/2.14.8/waline-meta.min.css" />
+<script src="https://cdn.staticfile.org/waline/2.15.5/waline.min.js"></script>
+<link rel="stylesheet" href="https://cdn.staticfile.org/waline/2.15.5/waline.min.css" />
+<link rel="stylesheet" href="https://cdn.staticfile.org/waline/2.15.5/waline-meta.min.css" />
 <% } %>
 <% if (theme.twikoo.enable) { %>
 <script src="https://cdn.staticfile.org/twikoo/1.6.16/twikoo.all.min.js"></script>

package/layout/layout.ejs

@@ -36,12 +36,10 @@
                 </div>
             </transition>
             <%- partial("menu") %>
-            <transition name="into">
-                <div id="main" v-show="!loading">
-                    <%- partial(type) %>
-                    <%- partial("footer") %>
-                </div>
-            </transition>
+            <div id="main" :class="loading ? 'into-enter-from': 'into-enter-active'">
+                <%- partial(type) %>
+                <%- partial("footer") %>
+            </div>
             <% if (theme.preview.enable) { %>
             <transition name="fade">
                 <div id="preview" ref="preview" v-show="previewShow">

package/layout/menu.ejs

@@ -1,5 +1,5 @@
-<nav id="menu" :class="{ hidden: hiddenMenu, 'menu-color': menuColor}">
-    <div id="desktop-menu">
+<div id="menu" :class="{ hidden: hiddenMenu, 'menu-color': menuColor}">
+    <nav id="desktop-menu">
         <a class="title" href="<%- config.root %>">
             <span><%= config.title.toUpperCase() %></span>
         </a>
@@ -9,8 +9,8 @@
             <span>&ensp;<%= key %></span>
         </a>
         <% }); %>
-    </div>
-    <div id="mobile-menu">
+    </nav>
+    <nav id="mobile-menu">
         <div class="title" @click="showMenuItems = !showMenuItems">
             <i class="fa-solid fa-bars fa-fw"></i>
             <span>&emsp;<%= config.title.toUpperCase() %></span>
@@ -29,8 +29,8 @@
                 <% }); %>
             </div>
         </transition>
-    </div>
-</nav>
+    </nav>
+</div>
 <transition name="fade">
     <div id="menu-curtain" @click="showMenuItems = !showMenuItems" v-show="showMenuItems"></div>
 </transition>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-particlex",
-  "version": "2.6.7",
+  "version": "2.6.9",
   "description": "A concise Hexo theme, based on Particle.",
   "repository": {
     "type": "git",

package/source/css/main.css

@@ -42,10 +42,6 @@
 #archives h3 {
     margin: 10px 0;
 }
-#card-div {
-    position: sticky;
-    top: 80px;
-}
 #crypto {
     margin: 50px 0;
 }
@@ -85,16 +81,26 @@
 #home-card {
     width: 300px;
 }
-#home-card .card-style {
+#home-card #card-style {
     background: #fff;
     border: none;
     border-radius: 10px;
     box-shadow: 0 0 20px #d9d9d980;
-    padding: 25px 0;
+    display: flex;
+    flex-direction: column;
+    height: 60vh;
+    justify-content: center;
+    overflow: auto;
+    position: sticky;
     text-align: center;
+    top: 20vh;
     width: 300px;
 }
-#home-card .card-style .avatar {
+#home-card #card-div {
+    overflow: auto;
+    padding: 25px 0;
+}
+#home-card #card-div .avatar {
     border: #f1f1f1 solid 3px;
     border-radius: 50%;
     height: 140px;
@@ -102,50 +108,50 @@
     text-align: center;
     width: 140px;
 }
-#home-card .card-style .avatar img {
+#home-card #card-div .avatar img {
     border-radius: 50%;
     height: 100%;
     width: 100%;
 }
-#home-card .card-style .avatar:hover img {
+#home-card #card-div .avatar:hover img {
     transform: rotate(360deg);
 }
-#home-card .card-style .description {
+#home-card #card-div .description {
     margin: 20px auto;
     width: 85%;
 }
-#home-card .card-style .friend-links .friend-link {
+#home-card #card-div .friend-links .friend-link {
     margin-bottom: 5px;
 }
-#home-card .card-style .friend-links a {
+#home-card #card-div .friend-links a {
     border-radius: 5px;
     color: #5c6b72;
     display: block;
     padding: 8px 0;
 }
-#home-card .card-style .icon-links .icon-link {
+#home-card #card-div .icon-links .icon-link {
     margin: 5px;
 }
-#home-card .card-style .icon-links a {
+#home-card #card-div .icon-links a {
     border-radius: 5px;
     color: #5c6b72;
     font-size: 18px;
     padding: 5px;
 }
-#home-card .card-style .icon-links a:hover,
-#home-card .card-style .friend-links a:hover,
+#home-card #card-div .icon-links a:hover,
+#home-card #card-div .friend-links a:hover,
 #home-posts .page-current .page-num:hover {
     background: #66afef;
     color: #fff;
 }
-#home-card .card-style .icon-links,
-#home-card .card-style .friend-links {
+#home-card #card-div .icon-links,
+#home-card #card-div .friend-links {
     border-top: #cdcdcd solid 1px;
     margin: 10px auto;
     padding-top: 10px;
     width: 85%;
 }
-#home-card .card-style .name {
+#home-card #card-div .name {
     font-size: 16px;
     font-weight: bold;
     margin: 20px auto;
@@ -570,12 +576,10 @@ body::-webkit-scrollbar-track {
 .input:hover {
     background: #fff;
 }
-.into-enter-active,
-.into-leave-active {
+.into-enter-active {
     transition: opacity 0.5s, transform 0.5s;
 }
-.into-enter-from,
-.into-leave-to {
+.into-enter-from {
     opacity: 0;
     transform: scale(1.1);
 }

package/source/js/main.js

@@ -32,9 +32,10 @@ const app = Vue.createApp({
                 this.showMenuItems = false;
             } else this.hiddenMenu = false;
             if (wrap) {
-                wrap.style.top = -Math.min(newScrollTop / 5, 80) + "px";
                 if (newScrollTop <= window.innerHeight - 100) this.menuColor = true;
                 else this.menuColor = false;
+                if (newScrollTop <= 400) wrap.style.top = "-" + newScrollTop / 5 + "px";
+                else wrap.style.top = "-80px";
             }
             this.scrollTop = newScrollTop;
         },