feat: add minimal reader and shared account navigation

2026-09-28 17:53:38 +09:00
parent 96e545401e
commit 4e8957c94a
15 changed files with 844 additions and 96 deletions
@@ -0,0 +1,148 @@
+/* Hallmark · macrostructure: sidebar-09 Inbox · tone: reading-first · anchor hue: neutral */
+/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 */
+.inbox-workspace {
+  height: 100dvh;
+  min-height: 0;
+  overflow: hidden;
+}
+.inbox-sidebar {
+  width: 420px;
+  flex-shrink: 0;
+  flex-direction: row;
+  border-right: 1px solid var(--border);
+}
+.inbox-list-panel {
+  flex: 1;
+  min-width: 0;
+  width: auto;
+}
+.inbox-article-row {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 11px;
+  width: 100%;
+  padding: 22px 20px;
+  border-bottom: 1px solid var(--border);
+  text-align: left;
+  cursor: pointer;
+}
+.inbox-article-row:hover {
+  background: var(--sidebar-accent);
+}
+.inbox-article-row[aria-current="true"] {
+  background: var(--muted);
+  box-shadow: inset 2px 0 var(--primary);
+}
+.inbox-row-meta {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+  color: var(--muted-foreground);
+  font-size: 11px;
+}
+.inbox-row-title {
+  display: block;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.65;
+  text-wrap: pretty;
+}
+.inbox-row-summary {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  color: var(--muted-foreground);
+  font-size: 12px;
+  line-height: 1.8;
+}
+.inbox-reader {
+  min-width: 0;
+  height: 100%;
+  overflow: hidden;
+}
+.inbox-reader-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 60px;
+  padding: 10px 26px;
+  border-bottom: 1px solid var(--border);
+}
+.inbox-reader-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+.inbox-article {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 54px 52px 40px;
+}
+.inbox-article-title {
+  margin: 0;
+  font-size: clamp(24px, 2.4vw, 34px);
+  line-height: 1.55;
+  font-weight: 650;
+  letter-spacing: -0.03em;
+  overflow-wrap: anywhere;
+  text-wrap: pretty;
+}
+.inbox-byline {
+  margin-block: 30px;
+}
+.inbox-article-body {
+  font-size: 15px;
+  line-height: 2.15;
+  letter-spacing: 0.015em;
+}
+.inbox-article-body p + p {
+  margin-top: 24px;
+}
+.inbox-no-results {
+  display: grid;
+  justify-items: start;
+  gap: 12px;
+  padding: 32px 20px;
+  color: var(--muted-foreground);
+  font-size: 13px;
+  line-height: 1.8;
+}
+.inbox-back {
+  display: none;
+}
+@media (min-width: 768px) and (max-width: 1100px) {
+  .inbox-sidebar {
+    width: 340px;
+  }
+  .inbox-article {
+    padding: 36px 28px;
+  }
+}
+@media (max-width: 767px) {
+  .inbox-sidebar {
+    width: 100%;
+    border-right: 0;
+  }
+  .inbox-reader {
+    display: none;
+  }
+  .inbox-workspace[data-reading="true"] .inbox-sidebar {
+    display: none;
+  }
+  .inbox-workspace[data-reading="true"] .inbox-reader {
+    display: flex;
+  }
+  .inbox-back {
+    display: inline-flex;
+  }
+  .inbox-reader-toolbar {
+    padding-inline: 12px;
+  }
+  .inbox-article {
+    padding: 30px 24px;
+  }
+}