/* Tokens first. The shell's slot is the one that must survive every redesign: inside an older Second Draft shell a 48px round button floats in the bottom-right corner, 16px in from each edge, above everything. This app draws its own note trigger instead, so second-draft-note.css sets --shell-slot to 0 and puts it back only inside such a shell. Keep clear of the corner with var(--shell-slot), never a fixed 80px, and the space is there exactly when the button is. */ :root { --shell-switcher-size: 48px; --shell-switcher-inset: 16px; --shell-switcher-gap: 16px; --shell-slot: 80px; /* inset + size + gap: the corner the shell owns */ /* Handmade: ink on paper. Faces are Caveat (hand) and Karla (text), each with a system fallback so the sheet still prints with no connection. */ --hand: "Caveat", "Segoe Script", "Bradley Hand", cursive; --font: "Karla", "Trebuchet MS", Verdana, system-ui, sans-serif; --book-serif: "Iowan Old Style", "Palatino", "Book Antiqua", Georgia, serif; --paper: #f6f1e2; --card: #fdfaf1; --grid: #e3d9c2; --ink: #28497e; --ink-deep: #1e3a66; --graphite: #4c5261; --muted: #636b7c; --red: #ae3a2e; --black: #20242e; --line: #d8cdae; --accent: #28497e; --quiet: #636b7c; --r-note: 16px 6px 18px 7px / 7px 16px 6px 17px; --r-btn: 14px 5px 12px 6px / 6px 13px 5px 14px; --r-btn-alt: 6px 14px 5px 13px / 13px 5px 14px 6px; --r-item: 10px 16px 7px 15px / 15px 8px 16px 7px; } * { box-sizing: border-box; } html, body { margin: 0; background: var(--paper); color: var(--black); font: 16px/1.5 var(--font); } body { min-height: 100dvh; } /* The shell gives the page the whole window, behind the clock at the top and the gesture bar at the bottom: the background is ours to cover, the content ours to keep clear of both. The shell sets --shell-safe-* on before the first layout, so nothing moves afterwards; env() answers in a plain browser, where the variables are absent. See docs/shell-contract.md. The top bar carries the top inset, the page below it the rest. */ .page { max-width: 640px; margin: 0 auto; padding-right: calc(20px + max(var(--shell-safe-right, 0px), env(safe-area-inset-right, 0px))); padding-bottom: calc(max(var(--shell-safe-bottom, 0px), env(safe-area-inset-bottom, 0px)) + var(--shell-slot)); padding-left: calc(20px + max(var(--shell-safe-left, 0px), env(safe-area-inset-left, 0px))); } /* The app's bar: the width of the window, in the flow of the page. On a phone it is the heading with the note trigger at its end, as the page's column is. On a wide screen the heading keeps to the content's column and the trigger goes to the far end, the top-right corner of the screen — never left floating in the middle of it. */ .top-bar { /* The app's navigation stays in reach however far the page scrolls, and the note trigger with it. */ position: sticky; top: 0; z-index: 3; background: var(--paper); display: flex; align-items: flex-start; gap: 12px; margin: 0; padding-bottom: 8px; padding-top: calc(24px + max(var(--shell-safe-top, 0px), env(safe-area-inset-top, 0px))); padding-right: calc(20px + max(var(--shell-safe-right, 0px), env(safe-area-inset-right, 0px))); padding-left: calc(20px + max(var(--shell-safe-left, 0px), env(safe-area-inset-left, 0px))); } .top-bar .page-heading { flex: 1; min-width: 0; margin: 0; } @media (min-width: 760px) { /* Three columns: the middle one is the page's (640px less its padding). */ .top-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px) minmax(0, 1fr); gap: 0; } .top-bar .page-heading { grid-column: 2; } .top-bar .top-actions { grid-column: 3; justify-self: end; } } .page-heading { font-family: var(--hand); font-size: 1.9rem; font-weight: 700; line-height: 1.05; color: var(--ink-deep); margin: 0 0 8px; transform: rotate(-.6deg); } /* The note trigger: the app's own control, in the app's own colours, that opens Second Draft's note panel. It sits with the app's navigation — here at the end of the top bar, which stays; in an app with a bottom tab bar, in that bar — never over its content. 44px at least, and the mark keeps both of its shapes. second-draft-note.js fills in the mark and hides it from anyone who may not leave a note. */ .note-trigger { appearance: none; flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px solid var(--ink); border-radius: var(--r-btn); background: var(--card); color: var(--ink-deep); box-shadow: 3px 3px 0 rgba(40,73,126,.14); transform: rotate(-.8deg); } .note-trigger .sd-mark { width: 24px; height: 24px; } /* The bar's end: the install control, when there is one, then the note trigger. */ .top-actions { display: flex; flex: none; align-items: center; gap: 8px; } .install-app { appearance: none; min-height: 44px; padding: 0 14px; border: 2px solid var(--ink); border-radius: var(--r-btn-alt); background: var(--ink); color: #fff; font: inherit; font-weight: 700; box-shadow: 3px 3px 0 rgba(40,73,126,.14); transform: rotate(.7deg); } .install-app:focus-visible, .note-trigger:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } .quiet { color: var(--muted); margin: 0; } button, input, select, textarea { font: inherit; } .button { appearance: none; border: 0; border-radius: var(--r-btn); padding: 12px 18px; background: var(--ink); color: #fff; cursor: pointer; } /* ─── The printed sheet ────────────────────────────────────────────── One full-screen canvas under the bar. A drag on it is the app's (pan), never the browser's pull-to-refresh, and it keeps clear of nothing: it paints behind the phone's bars like the page behind it. */ .sheet-wrap { position: fixed; inset: 0; z-index: 1; overscroll-behavior: none; } #sheet { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; } #sheet:active { cursor: grabbing; } /* The starter's quiet line stays in the column (the wide-screen check lines the heading up with it): one small museum label over the sheet. */ p.quiet.sheet-status { margin-top: 6px; font-size: .85rem; } /* ─── The chapter card ─────────────────────────────────────────────── A corner of fine print: roman chapter number in small caps, book-serif title, a printer's ornament, then an italic pull quote with a drop cap. Cream stock, paper grain, one of the four inks as the accent. */ .chapter-card { position: fixed; z-index: 2; left: 14px; right: 14px; bottom: calc(16px + max(var(--shell-safe-bottom, 0px), env(safe-area-inset-bottom, 0px))); max-width: 340px; background: var(--card); background-image: radial-gradient(rgba(40,73,126,.05) 1px, transparent 1.4px); background-size: 5px 5px; border: 2px solid var(--ink); border-radius: var(--r-note); box-shadow: 4px 5px 0 rgba(40,73,126,.16); padding: 12px 16px 14px; transform: rotate(-.6deg) translateY(12px); opacity: 0; visibility: hidden; transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s; pointer-events: none; } .chapter-card.on { opacity: 1; visibility: visible; transform: rotate(-.6deg) translateY(0); transition: opacity .45s ease, transform .45s ease; } .chapter-card .card-kicker { font: 600 .72rem/1.4 var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--card-accent, var(--red)); margin: 0 0 2px; } .chapter-card h2 { font-family: var(--book-serif); font-size: 1.45rem; line-height: 1.15; font-weight: 700; color: var(--ink-deep); margin: 0 0 6px; } .chapter-card .card-rule { border: 0; border-top: 1px solid var(--card-accent, var(--red)); margin: 0 0 8px; position: relative; } .chapter-card .card-rule::after { content: "❦"; position: absolute; top: -.75em; left: 50%; transform: translateX(-50%); background: var(--card); padding: 0 .5em; color: var(--card-accent, var(--red)); font-size: .9rem; } .chapter-card blockquote { margin: 0; font-family: var(--book-serif); font-style: italic; font-size: .98rem; line-height: 1.5; color: var(--black); } .chapter-card blockquote .dropcap { float: left; font-style: normal; font-weight: 700; font-size: 2.5em; line-height: .85; padding-right: .12em; padding-top: .05em; color: var(--card-accent, var(--red)); } @media (min-width: 900px) { /* A wide window is a layout: the card takes a corner column of its own. */ .chapter-card { left: auto; right: calc(28px + max(var(--shell-safe-right, 0px), env(safe-area-inset-right, 0px))); bottom: calc(28px + max(var(--shell-safe-bottom, 0px), env(safe-area-inset-bottom, 0px))); max-width: 360px; } } /* Messages that are not the page: keep out of the shell's 80×80 corner. */ #toast { position: fixed; left: 16px; right: var(--shell-slot); z-index: 4; bottom: calc(env(safe-area-inset-bottom, 0px) + var(--shell-switcher-inset)); pointer-events: none; } #toast:empty { display: none; } #toast > * { background: var(--ink-deep); color: #fff; border-radius: var(--r-item); padding: 12px 16px; }