cowriter 0.1.0

package/frontend/app/globals.css

@@ -0,0 +1,274 @@
+@import "tailwindcss";
+
+:root {
+  color: #292524;
+  background: #f3efe7;
+  font-family: Geist, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  min-width: 320px;
+  min-height: 100%;
+  margin: 0;
+}
+
+button,
+input,
+textarea {
+  font: inherit;
+  letter-spacing: 0;
+}
+
+.font-book {
+  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
+}
+
+.book-stage {
+  background: #f3efe7;
+  padding: 1rem;
+}
+
+.book-page {
+  --book-page-width: min(6in, calc(100vw - 2rem), calc((100dvh - 5rem) * 2 / 3));
+  --book-content-width: 100%;
+  --book-page-gap: 1.2in;
+  --manuscript-page-offset: 0px;
+  width: var(--book-page-width);
+  height: calc(var(--book-page-width) * 1.5);
+  overflow: hidden;
+  border: 1px solid rgba(161, 161, 170, 0.6);
+  border-radius: 4px;
+  background: #fffdf8;
+  padding: 0.7in 0.58in 0.76in;
+  box-shadow:
+    0 30px 80px -48px rgba(87, 83, 78, 0.55),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  touch-action: none;
+}
+
+.book-page--cover {
+  display: grid;
+  place-items: stretch;
+  padding: 0;
+  background: #e7e0d3;
+}
+
+.book-cover-image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  user-select: none;
+}
+
+.book-page-clip {
+  height: 100%;
+  overflow: hidden;
+}
+
+.book-page-clip > div {
+  height: 100%;
+  min-height: 100%;
+}
+
+.book-page .ProseMirror {
+  width: var(--book-content-width);
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  outline: none;
+  overflow: visible;
+  column-fill: auto;
+  column-gap: var(--book-page-gap);
+  column-width: var(--book-content-width);
+  font-size: 15px;
+  line-height: 1.62;
+  transform: translateX(calc(-1 * var(--manuscript-page-offset)));
+  transition: transform 220ms ease-out;
+  will-change: transform;
+}
+
+.book-page .ProseMirror p {
+  margin: 0 0 0.9em;
+}
+
+.book-page .ProseMirror blockquote {
+  margin: 0 0 1em;
+  padding: 0.02rem 0 0.02rem 0.85rem;
+  border-left: 2px solid rgba(120, 113, 108, 0.58);
+  color: #44403c;
+}
+
+.book-page .ProseMirror blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+.book-page .ProseMirror table {
+  width: 100%;
+  margin: 0 0 1em;
+  border-collapse: collapse;
+  table-layout: fixed;
+  break-inside: avoid;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.book-page .ProseMirror th,
+.book-page .ProseMirror td {
+  position: relative;
+  min-width: 1em;
+  border: 1px solid rgba(120, 113, 108, 0.5);
+  padding: 0.28rem 0.38rem;
+  vertical-align: top;
+  word-break: break-word;
+}
+
+.book-page .ProseMirror th {
+  background: rgba(214, 211, 209, 0.35);
+  font-weight: 650;
+}
+
+.book-page .ProseMirror .selectedCell::after {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  content: "";
+  pointer-events: none;
+  background: rgba(180, 83, 9, 0.16);
+}
+
+.book-page .ProseMirror ::selection {
+  background: rgba(180, 83, 9, 0.28);
+}
+
+.book-page .ProseMirror h1,
+.book-page .ProseMirror h2,
+.book-page .ProseMirror h3 {
+  margin: 0 0 1rem;
+  font-family: Geist, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
+  font-weight: 650;
+  line-height: 1.15;
+}
+
+.book-page .ProseMirror p.is-editor-empty:first-child::before {
+  color: #a1a1aa;
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+
+.report-markdown {
+  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
+  font-size: 15px;
+  line-height: 1.68;
+}
+
+.report-markdown h1,
+.report-markdown h2,
+.report-markdown h3 {
+  margin: 1.4rem 0 0.65rem;
+  font-family: Geist, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
+  font-weight: 650;
+  line-height: 1.18;
+}
+
+.report-markdown h1:first-child,
+.report-markdown h2:first-child,
+.report-markdown h3:first-child {
+  margin-top: 0;
+}
+
+.report-markdown h1 {
+  font-size: 1.45rem;
+}
+
+.report-markdown h2 {
+  font-size: 1.15rem;
+}
+
+.report-markdown h3 {
+  font-size: 1rem;
+}
+
+.report-markdown p,
+.report-markdown ul,
+.report-markdown ol,
+.report-markdown blockquote,
+.report-markdown pre,
+.report-markdown table {
+  margin: 0 0 1rem;
+}
+
+.report-markdown ul,
+.report-markdown ol {
+  padding-left: 1.35rem;
+}
+
+.report-markdown li + li {
+  margin-top: 0.25rem;
+}
+
+.report-markdown code {
+  border-radius: 3px;
+  background: rgba(68, 64, 60, 0.08);
+  padding: 0.06rem 0.22rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.88em;
+}
+
+.report-markdown pre {
+  overflow: auto;
+  border: 1px solid rgba(120, 113, 108, 0.25);
+  background: rgba(68, 64, 60, 0.06);
+  padding: 0.85rem;
+}
+
+.report-markdown pre code {
+  background: transparent;
+  padding: 0;
+}
+
+.report-markdown blockquote {
+  border-left: 2px solid rgba(120, 113, 108, 0.5);
+  padding-left: 0.85rem;
+  color: #57534e;
+}
+
+.report-markdown table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: Geist, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.report-markdown th,
+.report-markdown td {
+  border: 1px solid rgba(120, 113, 108, 0.28);
+  padding: 0.4rem 0.5rem;
+  text-align: left;
+  vertical-align: top;
+}
+
+.report-markdown th {
+  background: rgba(214, 211, 209, 0.38);
+  font-weight: 650;
+}
+
+@media (max-width: 1023px) {
+  .book-page {
+    --book-page-width: min(6in, calc(100vw - 2rem), calc((100dvh - 5rem) * 2 / 3));
+    padding: 0.45in 0.36in 0.5in;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .book-page .ProseMirror {
+    transition: none;
+  }
+}

package/frontend/app/layout.tsx

@@ -0,0 +1,14 @@
+import "./globals.css";
+
+export const metadata = {
+  title: "Cowriter",
+  description: "A local macOS story-writing app with Codex built in.",
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}