@hanology/cham-browser 0.4.51 → 0.4.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanology/cham-browser",
-  "version": "0.4.51",
+  "version": "0.4.53",
   "description": "CHAM — browser-compatible parser, serializer, and site generator for Classical Han Annotated Markdown",
   "type": "module",
   "main": "dist/index.js",

package/template/src/views/PieceView.vue

@@ -475,15 +475,17 @@ function tcy(n: number): string {
 
         <nav class="v-nav">
           <button v-if="adjacent.prev !== null" class="v-nav-btn" @click="navigate(-1)">
-            <span class="v-nav-dir">▲</span>
-            <span class="v-nav-label">{{ t('piece.previous') }}</span>
-            <span class="v-nav-title">{{ getPiece(adjacent.prev)?.title }}</span>
+            <span class="v-nav-content">
+              <span class="v-nav-info"><span class="v-nav-dir">▲</span><span class="v-nav-label">{{ t('piece.previous') }}</span></span>
+              <span class="v-nav-title">{{ getPiece(adjacent.prev)?.title }}</span>
+            </span>
           </button>
           <div v-else class="v-nav-spacer" />
           <button v-if="adjacent.next !== null" class="v-nav-btn" @click="navigate(1)">
-            <span class="v-nav-dir">▼</span>
-            <span class="v-nav-label">{{ t('piece.next') }}</span>
-            <span class="v-nav-title">{{ getPiece(adjacent.next)?.title }}</span>
+            <span class="v-nav-content">
+              <span class="v-nav-info"><span class="v-nav-dir">▼</span><span class="v-nav-label">{{ t('piece.next') }}</span></span>
+              <span class="v-nav-title">{{ getPiece(adjacent.next)?.title }}</span>
+            </span>
           </button>
         </nav>
       </div>
@@ -839,22 +841,28 @@ function tcy(n: number): string {
 }
 .v-nav-spacer { flex: 1; }
 .v-nav-btn {
-  writing-mode: vertical-rl;
-  text-orientation: mixed;
   padding: 20px 14px;
   background: var(--surface);
   border: 1px solid var(--border-light);
   border-radius: 6px;
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-  line-height: 1.6;
-  position: relative;
 }
 .v-nav-btn:hover {
   border-color: var(--gold);
   box-shadow: 0 4px 20px rgba(var(--shadow-rgb), 0.1);
 }
 .v-nav-btn:hover .v-nav-title { color: var(--vermillion); }
+.v-nav-content {
+  display: flex;
+  flex-direction: column;
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  line-height: 1.6;
+}
+.v-nav-info {
+  display: block;
+}
 .v-nav-dir {
   font-size: 16px; color: var(--vermillion);
   margin-bottom: 0.3em;