/* ============================================================================ styles.css — diary of... Two themes: Darkroom and Papyrus. Five accent pairs each. Entries render in a monospaced typewriter voice; the interface itself speaks Helvetica. Body classes set the mood: ============================================================================ */ /* ---------------------------------------------------------------------------- Fonts ---------------------------------------------------------------------------- */ :root { --font-mono: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace; --font-ui: "Helvetica Neue", Helvetica, Arial, sans-serif; } /* ---------------------------------------------------------------------------- Theme: Darkroom — charcoal black, light grey text ---------------------------------------------------------------------------- */ .theme-darkroom { --bg: #1B1B1B; --bg-raised: #242424; --bg-inset: #141414; --text: #C9C9C9; --text-dim: #8F8F8F; --border: #3A3A3A; --on-accent: #101010; } .theme-darkroom.accent-1 { --accent: #4A9EDB; --accent2: #3EB489; } /* azure / sea green */ .theme-darkroom.accent-2 { --accent: #B04A63; --accent2: #CC6633; } /* burgundy / burnt orange */ .theme-darkroom.accent-3 { --accent: #5E9B67; --accent2: #5C7FB8; } /* hunter green / navy */ .theme-darkroom.accent-4 { --accent: #8A9A4B; --accent2: #BFB38F; } /* olive / khaki camo */ .theme-darkroom.accent-5 { --accent: #B39DDB; --accent2: #A8C3A0; } /* pastel purple / sage */ /* ---------------------------------------------------------------------------- Theme: Papyrus — parchment, ink that never quite reaches black ---------------------------------------------------------------------------- */ .theme-papyrus { --bg: #EDE4D3; --bg-raised: #E4D9C4; --bg-inset: #F4EDE0; --text: #3B2F26; --text-dim: #6B5D4F; --border: #C9BBA3; --on-accent: #F7F2E7; } .theme-papyrus.accent-1 { --accent: #2C5F7C; --accent2: #4C7A6B; } /* ink blue / sea green */ .theme-papyrus.accent-2 { --accent: #6E1F30; --accent2: #A6552B; } /* burgundy / burnt sienna */ .theme-papyrus.accent-3 { --accent: #2E4E34; --accent2: #1C2E4A; } /* hunter / navy */ .theme-papyrus.accent-4 { --accent: #5C5A32; --accent2: #8C7B4E; } /* olive / khaki camo */ .theme-papyrus.accent-5 { --accent: #8874A6; --accent2: #B98B82; } /* lavender / dusty rose */ /* ---------------------------------------------------------------------------- Base ---------------------------------------------------------------------------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: 17px; line-height: 1.6; } .container { max-width: 720px; margin: 0 auto; padding: 1.25rem 1rem 4rem; } a { color: var(--accent); } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } /* ---------------------------------------------------------------------------- Headings and titles — the typewriter voice ---------------------------------------------------------------------------- */ .site-title { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700; color: var(--text); margin: 0.5rem 0 1.25rem; letter-spacing: -0.02em; } .section-heading { font-family: var(--font-mono); font-size: 1.15rem; color: var(--accent); border-bottom: 2px solid var(--accent); padding-bottom: 0.35rem; margin: 2rem 0 1rem; } .blog-content h2, .addendum-body h2 { font-family: var(--font-mono); font-size: 1.25rem; color: var(--accent); margin: 1.75rem 0 0.5rem; } .blog-content h3, .addendum-body h3 { font-family: var(--font-mono); font-size: 1.1rem; color: var(--accent2); margin: 1.5rem 0 0.5rem; } /* ---------------------------------------------------------------------------- Top navigation — Helvetica, quiet, functional ---------------------------------------------------------------------------- */ .top-nav { background: var(--bg-raised); border-bottom: 1px solid var(--border); } .top-nav-inner { max-width: 720px; margin: 0 auto; padding: 0.5rem 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; } .top-nav-group { display: flex; flex-wrap: wrap; gap: 0.5rem; } .top-nav-button { font-family: var(--font-ui); font-size: 0.9rem; color: var(--text); text-decoration: none; padding: 0.45rem 0.75rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); } .top-nav-button:hover, .top-nav-button:active { border-color: var(--accent); color: var(--accent); } /* ---------------------------------------------------------------------------- Diary header — avatar, name, bio ---------------------------------------------------------------------------- */ .diary-header { text-align: left; margin-bottom: 1rem; } .profile-image { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; border: 3px solid var(--accent); display: block; margin-bottom: 0.75rem; } .avatar-default { display: flex; align-items: center; justify-content: center; background: var(--bg-raised); color: var(--accent); font-family: var(--font-mono); font-weight: 700; } .profile-image.avatar-default { font-size: 3rem; } .diary-bio { color: var(--text-dim); font-family: var(--font-ui); margin: 0 0 1rem; max-width: 60ch; } /* ---------------------------------------------------------------------------- Entry list ---------------------------------------------------------------------------- */ .blog-list { display: flex; flex-direction: column; gap: 1.1rem; } .blog-entry { background: var(--bg-raised); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 10px; padding: 0.9rem 1rem; } .blog-entry h3 { margin: 0 0 0.3rem; font-family: var(--font-mono); font-size: 1.05rem; line-height: 1.4; } .blog-entry h3 a { color: var(--text); text-decoration: none; } .blog-entry h3 a:hover { color: var(--accent); } .blog-meta { margin: 0; font-family: var(--font-ui); font-size: 0.85rem; color: var(--accent2); } .meta-sep { color: var(--text-dim); padding: 0 0.25rem; } .empty-note { color: var(--text-dim); } /* ---------------------------------------------------------------------------- Single entry ---------------------------------------------------------------------------- */ .blog-post { margin-top: 0.5rem; } .blog-title { font-family: var(--font-mono); font-size: 1.5rem; line-height: 1.35; margin: 0 0 0.5rem; color: var(--text); } .blog-date { font-family: var(--font-ui); font-size: 0.85rem; color: var(--accent2); margin: 0 0 1.5rem; } .blog-date-sep { color: var(--text-dim); padding: 0 0.35rem; } /* The typed voice: monospace, and pre-wrap so the five-space paragraph indent survives exactly as written. */ .typed, .blog-content p, .addendum-body p { font-family: var(--font-mono); font-size: 0.95rem; line-height: 1.75; white-space: pre-wrap; overflow-wrap: break-word; margin: 0 0 1.25rem; } .attribution { color: var(--text-dim); border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 2rem; } .md-italic { font-style: italic; color: var(--accent2); } .md-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } /* ---------------------------------------------------------------------------- Images inside entries — captions speak Helvetica ---------------------------------------------------------------------------- */ .entry-figure { margin: 1.5rem 0; } .entry-image { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--border); display: block; } .entry-caption { font-family: var(--font-ui); font-size: 0.85rem; color: var(--text-dim); padding-top: 0.4rem; } /* ---------------------------------------------------------------------------- Addendums ---------------------------------------------------------------------------- */ .addendum { background: var(--bg-raised); border: 1px solid var(--border); border-left: 4px solid var(--accent2); border-radius: 10px; padding: 1rem; margin: 1.5rem 0; } .addendum-header { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.6rem; } .addendum-thumb { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent2); flex-shrink: 0; } .addendum-thumb.avatar-default { font-size: 1.2rem; } .addendum-byline { display: flex; flex-direction: column; font-family: var(--font-ui); font-size: 0.85rem; } .addendum-label { color: var(--accent2); font-weight: 600; } .addendum-date { color: var(--text-dim); } .addendum-body p { margin-bottom: 0.75rem; } /* ---------------------------------------------------------------------------- Entry navigation buttons ---------------------------------------------------------------------------- */ .blog-nav-buttons { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 2rem; } .nav-button { display: block; text-align: center; font-family: var(--font-ui); font-size: 1rem; color: var(--accent); background: var(--bg-raised); border: 1px solid var(--accent); border-radius: 10px; padding: 0.8rem 1rem; text-decoration: none; cursor: pointer; min-height: 44px; } .nav-button:hover, .nav-button:active { background: var(--accent); color: var(--on-accent); } .share-button { border-color: var(--accent2); color: var(--accent2); } .share-button:hover, .share-button:active { background: var(--accent2); color: var(--on-accent); } /* ---------------------------------------------------------------------------- Auth pages: login and invitation ---------------------------------------------------------------------------- */ .auth-container { padding-top: 3rem; } .auth-lead { font-family: var(--font-mono); font-size: 0.95rem; line-height: 1.7; color: var(--text); margin-bottom: 1.75rem; } .auth-form { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.25rem; } .auth-form label { font-family: var(--font-ui); font-size: 0.95rem; font-weight: 600; color: var(--text); margin-top: 0.75rem; } .field-help { font-family: var(--font-ui); font-size: 0.85rem; color: var(--text-dim); margin: 0 0 0.25rem; } .auth-form input[type="email"], .auth-form input[type="text"], input.code-input, textarea, select { font-family: var(--font-mono); font-size: 1.05rem; color: var(--text); background: var(--bg-inset); border: 1px solid var(--border); border-radius: 10px; padding: 0.8rem 0.9rem; width: 100%; } input.code-input { font-size: 1.6rem; letter-spacing: 0.35em; text-transform: uppercase; text-align: center; } .btn { display: inline-block; font-family: var(--font-ui); font-size: 1.05rem; font-weight: 600; border-radius: 10px; padding: 0.85rem 1.25rem; cursor: pointer; text-decoration: none; text-align: center; min-height: 44px; margin-top: 0.9rem; } .btn-filled { background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); } .btn-filled:hover, .btn-filled:active { filter: brightness(1.12); } .btn-outline { background: transparent; color: var(--accent2); border: 1px solid var(--accent2); } .btn-outline:hover, .btn-outline:active { background: var(--accent2); color: var(--on-accent); } .auth-form-secondary { margin-top: 0.25rem; } .auth-switch { font-family: var(--font-ui); font-size: 0.9rem; color: var(--text-dim); } .form-notice { font-family: var(--font-ui); background: var(--bg-raised); border: 1px solid var(--accent2); border-left: 4px solid var(--accent2); border-radius: 10px; padding: 0.8rem 1rem; color: var(--text); } .form-error { font-family: var(--font-ui); background: var(--bg-raised); border: 1px solid var(--accent); border-left: 4px solid var(--accent); border-radius: 10px; padding: 0.8rem 1rem; color: var(--text); font-weight: 600; } .invite-url { font-family: var(--font-mono); font-size: 0.85rem; background: var(--bg-inset); border: 1px dashed var(--accent); border-radius: 10px; padding: 0.9rem; word-break: break-all; user-select: all; -webkit-user-select: all; } /* ---------------------------------------------------------------------------- Small screens ---------------------------------------------------------------------------- */ @media (max-width: 480px) { body { font-size: 16px; } .site-title { font-size: 1.35rem; } .blog-title { font-size: 1.3rem; } .profile-image { width: 108px; height: 108px; } }