initiation librodrome

2026-02-20 12:55:10 +01:00
commit 35e2897a73
208 changed files with 18951 additions and 0 deletions
--- a/app/layouts/reading.vue
+++ b/app/layouts/reading.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="app-layout grid grid-cols-1 min-h-dvh">
+    <LayoutTheHeader />
+    <div class="reading-layout pb-[var(--player-height)]">
+      <aside class="chapter-sidebar hidden lg:block">
+        <BookChapterNav />
+      </aside>
+      <main class="reading-main">
+        <slot />
+      </main>
+    </div>
+    <LayoutTheFooter />
+  </div>
+</template>
+
+<style scoped>
+.app-layout {
+  grid-template-rows: auto 1fr auto;
+}
+
+.reading-layout {
+  display: grid;
+  grid-template-columns: 1fr;
+  max-width: 100%;
+}
+
+@media (min-width: 1024px) {
+  .reading-layout {
+    grid-template-columns: var(--sidebar-width) 1fr;
+  }
+}
+
+.chapter-sidebar {
+  position: sticky;
+  top: var(--header-height);
+  height: calc(100dvh - var(--header-height));
+  overflow-y: auto;
+  border-right: 1px solid hsl(0 0% 100% / 0.08);
+  padding: 1.5rem;
+}
+
+.reading-main {
+  padding: 2rem 1.5rem;
+  max-width: 65ch;
+  margin: 0 auto;
+}
+
+@media (min-width: 768px) {
+  .reading-main {
+    padding: 3rem 2rem;
+  }
+}
+</style>