narrarium-astro-reader 0.1.38 → 0.1.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "narrarium-astro-reader",
-  "version": "0.1.38",
+  "version": "0.1.40",
   "type": "module",
   "description": "Astro reader and scaffolding CLI for Narrarium book repositories.",
   "license": "MIT",

package/src/components/ChapterPager.astro

@@ -19,22 +19,30 @@ const nextChapter = currentIndex >= 0 && currentIndex < chapters.length - 1 ? ch
 ---
 
 <nav class="chapter-pager" aria-label="Chapter navigation">
-  <a class:list={["pager-link", !previousChapter && "is-disabled"]} href={previousChapter ? `chapters/${previousChapter.slug}/` : undefined} aria-disabled={!previousChapter}>
-    {previousChapter ? `Previous: ${previousChapter.metadata.title}` : "Start of book"}
+  <a class:list={["pager-link pager-link--prev", !previousChapter && "is-disabled"]} href={previousChapter ? `chapters/${previousChapter.slug}/` : undefined} aria-disabled={!previousChapter}>
+    <span class="pager-link__arrow" aria-hidden="true">←</span>
+    <span class="pager-link__body">
+      <span class="pager-link__label">Previous</span>
+      <span class="pager-link__title">{previousChapter ? previousChapter.metadata.title : "Start of book"}</span>
+    </span>
   </a>
 
   <label class="pager-jump">
-    <span class="label">Jump To</span>
+    <span class="pager-jump__label">Jump to chapter</span>
     <select onchange="if (this.value) window.location.href = this.value">
       {chapters.map((chapter) => (
         <option value={`chapters/${chapter.slug}/`} selected={chapter.slug === currentSlug}>
-          {`Chapter ${String(chapter.metadata.number).padStart(3, "0")} - ${chapter.metadata.title}`}
+          {`Chapter ${String(chapter.metadata.number).padStart(3, "0")} — ${chapter.metadata.title}`}
         </option>
       ))}
     </select>
   </label>
 
-  <a class:list={["pager-link", !nextChapter && "is-disabled"]} href={nextChapter ? `chapters/${nextChapter.slug}/` : undefined} aria-disabled={!nextChapter}>
-    {nextChapter ? `Next: ${nextChapter.metadata.title}` : "End of book"}
+  <a class:list={["pager-link pager-link--next", !nextChapter && "is-disabled"]} href={nextChapter ? `chapters/${nextChapter.slug}/` : undefined} aria-disabled={!nextChapter}>
+    <span class="pager-link__body">
+      <span class="pager-link__label">Next</span>
+      <span class="pager-link__title">{nextChapter ? nextChapter.metadata.title : "End of book"}</span>
+    </span>
+    <span class="pager-link__arrow" aria-hidden="true">→</span>
   </a>
 </nav>

package/src/pages/chapters/[chapter].astro

@@ -217,26 +217,26 @@ const renderedParagraphs = await Promise.all(
   </div>
 
   <aside class="focus-rail" aria-label="Full read controls">
-    <div class="focus-rail__meta">
-      <div>
-        <p class="eyebrow">Full read</p>
-        <div class="focus-rail__title">{chapter.metadata.title}</div>
+    <div class="focus-rail__row">
+      <div class="focus-rail__identity">
+        <span class="focus-rail__eyebrow">Full read</span>
+        <span class="focus-rail__title">{chapter.metadata.title}</span>
+      </div>
+      <div class="focus-rail__controls">
+        <a class:list={["focus-rail__link", !previousChapter && "is-disabled"]} href={previousChapter ? `chapters/${previousChapter.slug}/` : undefined} aria-disabled={!previousChapter}>← Prev</a>
+        <label class="focus-rail__jump">
+          <span class="sr-only">Jump to chapter</span>
+          <select data-reader-focus-jump aria-label="Jump to chapter">
+            {allChapters.map((entry) => (
+              <option value={entry.slug} selected={entry.slug === chapterSlug}>
+                {`Chapter ${String(entry.metadata.number).padStart(3, "0")} — ${entry.metadata.title}`}
+              </option>
+            ))}
+          </select>
+        </label>
+        <a class:list={["focus-rail__link", !nextChapter && "is-disabled"]} href={nextChapter ? `chapters/${nextChapter.slug}/` : undefined} aria-disabled={!nextChapter}>Next →</a>
+        <button type="button" class="focus-rail__button" data-reader-focus-toggle>Exit</button>
       </div>
-    </div>
-    <div class="focus-rail__controls">
-      <a class:list={["focus-rail__link", !previousChapter && "is-disabled"]} href={previousChapter ? `chapters/${previousChapter.slug}/` : undefined} aria-disabled={!previousChapter}>Previous</a>
-      <label class="focus-rail__jump">
-        <span class="sr-only">Jump to chapter</span>
-        <select data-reader-focus-jump aria-label="Jump to chapter">
-          {allChapters.map((entry) => (
-            <option value={entry.slug} selected={entry.slug === chapterSlug}>
-              {`Chapter ${String(entry.metadata.number).padStart(3, "0")} - ${entry.metadata.title}`}
-            </option>
-          ))}
-        </select>
-      </label>
-      <a class:list={["focus-rail__link", !nextChapter && "is-disabled"]} href={nextChapter ? `chapters/${nextChapter.slug}/` : undefined} aria-disabled={!nextChapter}>Next</a>
-      <button type="button" class="focus-rail__button" data-reader-focus-toggle>Exit</button>
     </div>
   </aside>
 

package/src/styles/global.css

@@ -933,51 +933,101 @@ h3 {
 .chapter-pager {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
-  gap: 1rem;
-  align-items: stretch;
-  border: 1px solid var(--line);
-  background: var(--surface);
-  padding: 0.9rem 1.25rem;
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
+  gap: 0.75rem;
+  align-items: center;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
 }
 
 .pager-link {
   display: flex;
   align-items: center;
-  gap: 0.4rem;
-  padding: 0.5rem 0.75rem;
+  gap: 0.75rem;
+  padding: 0.85rem 1.1rem;
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: 12px;
   background: var(--surface);
   color: var(--text-muted);
   text-decoration: none;
-  font-size: 0.875rem;
+  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
+  min-width: 0;
+}
+
+.pager-link--next {
+  justify-content: flex-end;
+  text-align: right;
+}
+
+.pager-link__arrow {
+  flex-shrink: 0;
+  font-size: 1.1rem;
+  line-height: 1;
+  color: var(--text-muted);
+  transition: color 120ms ease;
+}
+
+.pager-link__body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  min-width: 0;
+}
+
+.pager-link--next .pager-link__body {
+  align-items: flex-end;
+}
+
+.pager-link__label {
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  transition: color 120ms ease;
+}
+
+.pager-link__title {
+  font-size: 0.9rem;
   font-weight: 500;
+  color: var(--text);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
+  max-width: 22ch;
 }
 
-.pager-link:last-child {
-  text-align: right;
-  justify-content: flex-end;
+.pager-link.is-disabled .pager-link__title {
+  color: var(--text-muted);
 }
 
-.pager-link:hover {
+.pager-link:not(.is-disabled):hover {
   background: var(--surface-muted);
-  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
+  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
   color: var(--text);
+  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 10%, transparent);
+}
+
+.pager-link:not(.is-disabled):hover .pager-link__arrow,
+.pager-link:not(.is-disabled):hover .pager-link__label {
+  color: var(--accent);
 }
 
 .pager-jump {
-  display: grid;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   gap: 0.3rem;
-  align-content: center;
   min-width: 0;
 }
 
+.pager-jump__label {
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
 /* ─── Form controls ──────────────────────────────────────────── */
 .pager-jump select,
 .reader-control input,
@@ -1181,39 +1231,67 @@ mark {
   display: none;
   position: fixed;
   left: 50%;
-  bottom: 1rem;
+  bottom: 1.25rem;
   transform: translate(-50%, 0);
   z-index: 46;
-  width: min(760px, calc(100vw - 1rem));
-  padding: 1rem 1.25rem;
-  background: var(--surface);
+  width: min(820px, calc(100vw - 1.5rem));
+  padding: 0.75rem 1rem;
+  background: color-mix(in srgb, var(--surface) 96%, transparent);
   border: 1px solid var(--line);
   border-radius: 16px;
-  box-shadow: var(--shadow);
+  box-shadow: var(--shadow), 0 8px 32px rgba(0,0,0,0.18);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   opacity: 1;
   transition: opacity 180ms ease, transform 180ms ease;
 }
 
-.focus-rail__meta {
+.focus-rail__row {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: 1rem;
-  margin-bottom: 0.8rem;
+}
+
+.focus-rail__identity {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+  flex-shrink: 0;
+  max-width: 18ch;
+}
+
+.focus-rail__eyebrow {
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--accent);
 }
 
 .focus-rail__title {
   font-weight: 600;
-  font-size: 0.95rem;
+  font-size: 0.88rem;
   color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.focus-rail__controls {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex: 1;
+  min-width: 0;
 }
 
 .focus-rail__jump {
-  min-width: min(320px, 100%);
+  flex: 1;
+  min-width: 0;
 }
 
 .focus-rail__jump select {
-  min-width: min(320px, 100%);
+  width: 100%;
 }
 
 .focus-hint {
@@ -1410,13 +1488,25 @@ mark {
   .meta-row,
   .scene-header,
   .chapter-outline__header,
-  .focus-rail__meta,
-  .focus-rail__controls {
+  .focus-rail__row {
     grid-template-columns: 1fr;
     flex-direction: column;
     align-items: stretch;
   }
 
+  .pager-link--next {
+    text-align: left;
+    justify-content: flex-start;
+  }
+
+  .pager-link--next .pager-link__body {
+    align-items: flex-start;
+  }
+
+  .pager-jump {
+    align-items: stretch;
+  }
+
   .site-search {
     min-width: 0;
   }