/* Design tokens for the paperplanes.cloud hand-drawn scrapbook style. Values sourced from paperplanes.cloud/README.md's design handoff. */ :root { /* paper / background */ --pp-bg-article: #fdfcf7; --pp-bg-corkboard: #f2ece0; --pp-bg-canvas: #c9c6bd; /* ink / text */ --pp-ink: #1e1e1e; /* accent */ --pp-accent: #e8590c; --pp-accent-tape: rgba(232, 89, 44, 0.55); /* muted text */ --pp-muted-55: rgba(30, 30, 30, 0.55); --pp-muted-6: rgba(30, 30, 30, 0.6); --pp-muted-65: rgba(30, 30, 30, 0.65); --pp-muted-5: rgba(30, 30, 30, 0.5); /* neutral tape */ --pp-tape-neutral: rgba(30, 30, 30, 0.15); /* borders */ --pp-border: 2.5px solid var(--pp-ink); --pp-border-thin: 2px solid var(--pp-ink); /* shadows */ --pp-shadow-card: 0 6px 12px rgba(0, 0, 0, 0.18); --pp-shadow-outer: 0 4px 14px rgba(0, 0, 0, 0.18); /* type scale */ --pp-font: 'Excalifont', cursive; --pp-size-h1: 38px; --pp-size-wordmark: 28px; --pp-size-card-title: 19px; --pp-size-entry-title: 24px; --pp-size-body: 17px; --pp-size-meta: 14px; --pp-size-small: 13px; --pp-size-caption: 12px; /* dotted paper texture */ --pp-dots-24: radial-gradient(rgba(30, 30, 30, 0.14) 1px, transparent 1.5px); --pp-dots-22: radial-gradient(rgba(30, 30, 30, 0.16) 1px, transparent 1.5px); } /* Self-hosted (see /static/fonts) rather than the external Excalidraw CDN, so the site has no runtime dependency on a third party. Confirm Excalifont's license permits this before shipping publicly. */ @font-face { font-family: 'Excalifont'; src: url('/static/fonts/Excalifont-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; /* block (not swap): every page nav is a full reload on this static multi-page site, so `swap`'s fallback-then-swap flash repeats on every click, reading as a font "flicker". Combined with the in the page , the font is normally ready well within the block period, so text simply appears once in the right font instead of flashing a fallback first. */ font-display: block; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { min-height: 100vh; display: flex; flex-direction: column; font-family: var(--pp-font); color: var(--pp-ink); background: var(--pp-bg-canvas); } /* Theme (background) lives on body, not on .page/.blog-listing — the nav header is a sibling of those, so putting the background here instead means nav and content share one continuous surface with no visible seam between them. */ body.theme-home { background-color: var(--pp-bg-corkboard); background-image: var(--pp-dots-24); background-size: 24px 24px; } body.theme-article { background-color: var(--pp-bg-article); background-image: var(--pp-dots-22); background-size: 22px 22px; } a { color: inherit; } img, svg { max-width: 100%; } /* Site chrome — wordmark, pinned to the viewport's own edges. Deliberately plain HTML/CSS rather than hand-drawn Excalidraw content: a fixed-width canvas has no way to reach the true viewport edge. See BACKLOG.md for the hand-drawn "chrome frame" alternative this skips. */ .site-nav { display: flex; align-items: center; flex-shrink: 0; padding: 24px; } .site-nav-mark { line-height: 0; } .site-nav-mark img { display: block; height: 44px; width: auto; } /* Page layout — wraps a single Excalidraw-drawn page (home or post) */ .page { flex: 1; min-height: 0; display: flex; justify-content: center; padding: 40px 20px; overflow-x: auto; } .page-wrap { position: relative; flex-shrink: 0; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } /* Output of excalidraw-converter's convertPage() — see excalidraw-converter's README for the exact markup shape (.excalidraw-page/-bg/-links-layer/-text-layer). Width comes from its own inline style (the variant's authored canvas width) — no override here, so content renders at fixed size instead of scaling down on narrower viewports; .page has overflow-x: auto for the case where the viewport is narrower than the active variant. */ .excalidraw-bg svg { width: 100%; height: auto; display: block; } .excalidraw-links-layer a { cursor: pointer; } .empty-note { font-family: var(--pp-font); color: var(--pp-muted-6); font-size: 15px; max-width: 500px; text-align: center; margin-top: 80px; } .empty-note code { background: rgba(30, 30, 30, 0.08); padding: 2px 6px; border-radius: 3px; } /* Blog listing page — the one page in the site that isn't hand-drawn */ .blog-listing { flex: 1; min-height: 0; display: flex; justify-content: center; padding: 40px 20px; } .blog-listing-wrap { width: 100%; max-width: 700px; font-family: system-ui, -apple-system, sans-serif; } .blog-listing-wrap h1 { font-family: var(--pp-font); font-size: var(--pp-size-h1); color: var(--pp-ink); } .blog-listing-entries { list-style: none; margin: 0; padding: 0; } .blog-listing-entry { border-bottom: var(--pp-border-thin); padding: 16px 0; } .blog-listing-entry a { text-decoration: none; font-size: var(--pp-size-entry-title); color: var(--pp-ink); } .blog-listing-entry a:hover { color: var(--pp-accent); } .blog-listing-meta { font-size: var(--pp-size-meta); color: var(--pp-muted-65); margin-top: 4px; }