style(post): enhance post separator and adjust tag display for improved layout

chore(release): bump version to 1.2.5 in theme.yaml

package.json

@@ -1,7 +1,7 @@
 {
   "name": "theme-terminal",
   "private": true,
-  "version": "1.2.2",
+  "version": "1.2.7",
   "description": "A terminal like theme for Halo.",
   "scripts": {
     "dev": "vite build --watch",

src/styles/header-dividing.scss

@@ -10,6 +10,10 @@
   --dash-spacing: 10px;
   --dash-width: 2px;
 
+  // 进入动画初始状态（仅 sticky 激活时播放）
+  opacity: 1;
+  transition: opacity 0.3s ease-in-out;
+
   // 虚线背景层 - 带遮罩
   &::before {
     content: '';
@@ -49,7 +53,7 @@
   &::after {
     content: '';
     position: absolute;
-    left: -30%;
+    left: -5%;
     top: 50%;
     transform: translateY(-50%);
     width: 30%;
@@ -77,20 +81,19 @@
     z-index: 100;
     --dash-spacing: 6px;
     --dash-width: 2px;
-    background: var(--background);
-    opacity: 0.8;
+    background-color: color-mix(in srgb, var(--background) 90%, transparent);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 
+    // 进入动画：透明度由0到1
+    animation: sticky-in 0.5s ease-in-out forwards;
+    opacity: 1;
+
     &::before {
-      animation: line-flow 1.5s linear infinite;
-      mask-image: none;
-      -webkit-mask-image: none;
       top: calc(50% - 1px);
       height: 2px;
     }
 
     &::after {
-      animation: scan-line 2.5s ease-in-out infinite;
       opacity: 0.6;
       filter: blur(3px);
       // 调整扫描线高度以适应 5px 容器
@@ -113,10 +116,12 @@
 // 扫描线动画 - 模拟终端扫描效果
 @keyframes scan-line {
   0% {
-    left: -20%;
+    left: -5%;
+    width: 5%;
     opacity: 0;
   }
   30% {
+    width: 30%;
     opacity: .3;
   }
   70% {
@@ -127,3 +132,12 @@
     opacity: 0;
   }
 }
+
+@keyframes sticky-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

src/styles/post-toc.scss

@@ -1,14 +1,21 @@
 @import "variables";
 
+.post-toc-sticky {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  width: 0;
+  height: 0;
+  overflow: visible;
+  transform: translate(-260px, 100px);
+}
+
 .post-toc {
-  position: absolute;
-  left: -280px;
-  top: 85px;
+  position: relative;
   width: 200px;
   max-height: calc(100vh - 200px);
   overflow-y: auto;
   overflow-x: hidden;
-  z-index: 100;
   font-size: 0.8rem;
   line-height: 1.6;
   color: var(--foreground);
@@ -126,6 +133,18 @@
     transition: color 0.15s ease, opacity 0.15s ease;
   }
 
+  // 左侧激活指示线
+  &::before {
+    content: '' !important;
+    position: absolute;
+    left: -10px !important;
+    top: 4px;
+    bottom: 4px;
+    width: 2px;
+    background-color: transparent;
+    border-radius: 1px;
+  }
+
   // 活跃状态
   &--active {
     background-color: color-mix(in srgb, var(--brightBlue) 15%, transparent);
@@ -139,16 +158,8 @@
       color: var(--brightBlue);
     }
 
-    // 左侧激活指示线
     &::before {
-      content: '' !important;
-      position: absolute;
-      left: -10px !important;
-      top: 4px;
-      bottom: 4px;
-      width: 2px;
       background-color: var(--brightBlue);
-      border-radius: 1px;
     }
   }
 }
@@ -178,7 +189,7 @@
 
   &__icon {
     margin-right: 6px;
-    color: var(--yellow);
+    color: var(--red);
   }
 
   &__title {

src/styles/post.scss

@@ -64,6 +64,7 @@
     grid-template-rows: repeat(2, 3px);
     gap: 2px;
     margin: 0 6px;
+    vertical-align: middle;
 
     span {
       width: 2px;
@@ -78,6 +79,11 @@
     span:nth-child(2) { animation: dot-blink-2 2.2s ease-in-out infinite 0.4s; }
     span:nth-child(3) { animation: dot-blink-3 3.4s ease-in-out infinite 1s; }
     span:nth-child(4) { animation: dot-blink-4 2.6s ease-in-out infinite 0.2s; }
+    span:nth-child(5) { animation: dot-blink-2 3s ease-in-out infinite 0.6s; }
+    span:nth-child(6) { animation: dot-blink-1 2.4 ease-in-out infinite 0.8s; }
+    span:nth-child(7) { animation: dot-blink-4 3.2s ease-in-out infinite 0.3s; }
+    span:nth-child(8) { animation: dot-blink-3 2.7s ease-in-out infinite 0.5s; }
+    span:nth-child(9) { animation: dot-blink-1 2.9s ease-in-out infinite 0.1s; }
   }
 
   &-title {
@@ -105,7 +111,7 @@
   }
 
   %tags {
-    margin-bottom: 20px;
+    margin-left: 10px;
     font-size: 1rem;
   }
 

templates/archives.html

@@ -15,9 +15,20 @@
                   <span class="post-date" th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"
                     >发布时间</span
                   >
-                  :: <span class="post-list-title" th:text="${post.spec.title}">文章标题</span></a>
+                  <span class="post-separator">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                  </span>
+                  <span class="post-list-title" th:text="${post.spec.title}">文章标题</span></a>
                   <span class="post-tags-inline">
-                    ::
+                    <span class="post-separator">
+                      <span></span>
+                      <span></span>
+                      <span></span>
+                      <span></span>
+                    </span>
                     <span th:each="tag : ${post.tags}">
                       <a
                       th:href="${tag.status.permalink}"

templates/category.html

@@ -19,9 +19,20 @@
               <span class="post-date" th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"
                 >发布时间</span
               >
-              :: <span class="post-list-title" th:text="${post.spec.title}">文章标题</span></a>
+              <span class="post-separator">
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+              </span>
+              <span class="post-list-title" th:text="${post.spec.title}">文章标题</span></a>
               <span class="post-tags-inline">
-                ::
+                <span class="post-separator">
+                  <span></span>
+                  <span></span>
+                  <span></span>
+                  <span></span>
+                </span>
                 <span th:each="tag : ${post.tags}">
                   <a
                   th:href="${tag.status.permalink}"

templates/index.html

@@ -27,16 +27,15 @@
             <span class="post-author" th:with="contributor = ${post.contributors[0]}" th:text="${contributor.displayName}">
               Author
             </span>
-          </div>
             <span class="post-tags-inline" th:each="tag : ${post.tags}">
-            <a
-              th:href="${tag.status.permalink}"
+              <a th:href="${tag.status.permalink}"
                  th:title="${tag.spec.displayName}"
                  th:text="'#'+${tag.spec.displayName}"
                  class="post-tag"
               >#Tag
               </a>
             </span>
+          </div>
           <div class="post-content" th:text="${post.status.excerpt}">Post Excerpt...</div>
 
           <div>

templates/moments.html

@@ -18,8 +18,14 @@
             <span class="post-date" th:text="${#dates.format(moment.spec.releaseTime,'yyyy-MM-dd')}">
               Moment CreateTime
             </span>
-            <span class="post-author" th:with="owner = ${moment.owner}" th:text="${':: '+owner.displayName}">
-              :: Author
+            <span class="post-separator">
+              <span></span>
+              <span></span>
+              <span></span>
+              <span></span>
+            </span>
+            <span class="post-author" th:with="owner = ${moment.owner}" th:text="${owner.displayName}">
+              Author
             </span>
           </div>
           <div class="post-content" th:utext="${content.html}">Moment Content...</div>

templates/page.html

@@ -10,7 +10,13 @@
         <span class="post-date" th:text="${#dates.format(singlePage.spec.publishTime,'yyyy-MM-dd')}">
           publishTime
         </span>
-        <span class="post-author" th:text="${':: '+singlePage.owner.displayName}">:: Author</span>
+        <span class="post-separator">
+          <span></span>
+          <span></span>
+          <span></span>
+          <span></span>
+        </span>
+        <span class="post-author" th:text="${singlePage.owner.displayName}">Author</span>
       </div>
       <div class="post-content">
         <div th:utext="${singlePage.content.content}">Post Content</div>

templates/post.html

@@ -4,8 +4,8 @@
   th:replace="~{modules/layout :: html(title = |${post.spec.title} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
 >
   <th:block th:fragment="content">
-    <div class="post" x-data="postLineNum" x-init="init()">
     <!-- 目录组件 -->
+    <div class="post-toc-sticky">
       <div class="post-toc" x-data="postToc" x-init="init()">
         <div class="toc-header">
           <span class="toc-header__icon">&lt;&gt;</span>
@@ -25,6 +25,8 @@
           </template>
         </ul>
       </div>
+    </div>
+    <div class="post" x-data="postLineNum" x-init="init()">
       <h1 class="post-title" th:text="'< ' + ${post.spec.title} + ' >'">Post Title</h1>
       <div class="post-meta">
         <span class="post-date" th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"> publishTime </span>
@@ -35,16 +37,15 @@
           <span></span>
         </span>
         <span class="post-author" th:text="${post.owner.displayName}">Author</span>
-      </div>
         <span class="post-tags-inline" th:each="tag : ${post.tags}">
-        <a
-          th:href="${tag.status.permalink}"
+          <a th:href="${tag.status.permalink}"
              th:title="${tag.spec.displayName}"
              th:text="'#'+${tag.spec.displayName}"
              class="post-tag"
-          >#Tag</a
-        >
+          >#Tag
+          </a>
         </span>
+      </div>
       <div class="post-body">
         <!-- 行数组件 -->
         <div class="post-line-gutter"></div>

templates/tag.html

@@ -21,9 +21,20 @@
               <span class="post-date" th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"
                 >发布时间</span
               >
-              :: <span class="post-list-title" th:text="${post.spec.title}">文章标题</span></a>
+              <span class="post-separator">
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+              </span>
+              <span class="post-list-title" th:text="${post.spec.title}">文章标题</span></a>
               <span class="post-tags-inline">
-                ::
+                <span class="post-separator">
+                  <span></span>
+                  <span></span>
+                  <span></span>
+                  <span></span>
+                </span>
                 <span th:each="tag : ${post.tags}">
                   <a
                   th:href="@{${post.status.permalink}}"

theme.yaml

@@ -13,5 +13,5 @@ spec:
   repo: https://git.dev.cm/theme-terminal
   settingName: "theme-terminal-setting"
   configMapName: "theme-terminal-configMap"
-  version: 1.2.2
+  version: 1.2.7
   require: ">=2.22.0"