/* Plain, early-web aesthetic. No fancy fonts, no JS, narrow column. */ /* color-scheme drives which side of every light-dark() call wins. By default the page follows the OS preference; an explicit data-theme attribute on (set server-side from the reads_theme cookie) pins it. */ :root { color-scheme: light dark; } html[data-theme="light"] { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } html { background: light-dark(#fff, #111); /* Foreground is intentionally not pure black / pure white — pure-on-pure hits ~21:1 contrast which is fatiguing for body copy. We aim for the ~12:1 range used by GitHub / Medium / Material's "87% opacity" guideline. */ color: light-dark(#1f1f1f, #d4d4d4); } body { font-family: "Times New Roman", Times, serif; font-size: 16px; line-height: 1.5; max-width: 38rem; margin: 2rem auto; padding: 0 1rem; } h1, h2, h3, h4 { font-family: Helvetica, Arial, sans-serif; font-weight: bold; } h1 { font-size: 1.6rem; margin: 0; } h1 a { color: light-dark(#1f1f1f, #d4d4d4); text-decoration: none; } h2 { font-size: 1.3rem; margin-top: 1.5rem; } h3 { font-size: 1.1rem; margin-top: 1.25rem; } /* Softer link blues than the default #0000ee. Visited links drop to a slate gray (no violet) so "I've already read this" reads as muted rather than purple. */ a { color: light-dark(#1d4ed8, #8ab4f8); } a:visited { color: light-dark(#4b5563, #9ca3af); } a:hover { text-decoration: underline; } header .tagline { color: light-dark(#555, #aaa); font-style: italic; margin: 0.25rem 0; } header nav { font-size: 0.95rem; color: light-dark(#555, #aaa); } hr { border: none; border-top: 1px solid light-dark(#999, #444); margin: 1rem 0; } ul.article-list { list-style: square; padding-left: 1.25rem; } ul.article-list li { margin: 0.4rem 0; } ul.article-list .meta { color: light-dark(#555, #aaa); font-size: 0.9rem; } ul.pending { list-style: none; padding-left: 0; } .pending-item { border: 1px solid light-dark(#999, #555); padding: 0.75rem 1rem; margin: 1rem 0; } .pending-item h3 { margin-top: 0; } .pending-item .preview { background: light-dark(#f4f4f4, #1a1a1a); border: 1px solid light-dark(#ccc, #444); padding: 0.75rem 1rem; margin: 0.75rem 0; max-height: 70vh; overflow: auto; font-size: 1rem; line-height: 1.5; } .pending-item .actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; margin-top: 1rem; } .pending-item .actions button { padding: 0.55rem 1rem; font-size: 0.95rem; border: 1px solid light-dark(#999, #666); background: light-dark(#fff, #1a1a1a); color: light-dark(inherit, #e8e8e8); cursor: pointer; } .pending-item .actions button.accept { border-color: light-dark(#2c7a2c, #5cb85c); color: light-dark(#1f5a1f, #8fdc8f); } .pending-item .actions button.accept-allow { border-color: light-dark(#2c7a2c, #5cb85c); background: light-dark(#2c7a2c, #2e6b2e); color: #fff; } .pending-item .actions button.reject { border-color: light-dark(#a33, #d9534f); color: light-dark(#a33, #ff8a87); } .pending-item .actions button.reject-block { border-color: light-dark(#a33, #d9534f); background: light-dark(#a33, #7a2725); color: #fff; } .meta { color: light-dark(#555, #aaa); font-size: 0.9rem; } article .content img { max-width: 100%; height: auto; } article .content pre { background: light-dark(#f4f4f4, #1a1a1a); border: 1px solid light-dark(#ccc, #444); padding: 0.5rem 0.75rem; overflow: auto; } article .content code { font-family: "Courier New", Courier, monospace; } article .content blockquote { border-left: 3px solid light-dark(#999, #666); margin: 0.75rem 0; padding-left: 0.75rem; color: light-dark(#444, #bcbcbc); } ul.email-list { list-style: none; padding-left: 0; } ul.email-list li { padding: 0.2rem 0; } form.row { margin: 0.5rem 0; } form.row input[type=email] { padding: 0.35rem; min-width: 18rem; } form.row button, form.inline button { padding: 0.4rem 0.8rem; } form.inline { display: inline; margin-left: 0.5rem; } aside { color: light-dark(#555, #aaa); font-size: 0.95rem; } footer { color: light-dark(#555, #aaa); } .msg { background: light-dark(#ffd, #1a1a1a); border: 1px solid light-dark(#cc9, #444); color: light-dark(inherit, #ffd966); padding: 0.5rem 0.75rem; } /* Install-as-app prompt. Only visible on small screens in a regular browser tab — hidden on desktop and when reads is already running as an installed PWA (display-mode: standalone). */ .install-banner { display: none; } @media (max-width: 700px) and (display-mode: browser) { .install-banner { display: block; background: light-dark(#ffd, #1a1a1a); border: 1px solid light-dark(#cc9, #444); color: light-dark(inherit, #ffd966); padding: 0.75rem 1rem; margin: 1rem 0; font-size: 0.95rem; } .install-banner p { margin: 0 0 0.4rem 0; } .install-banner ul { margin: 0; padding-left: 1.25rem; } } form.submit-form label { display: block; font-size: 0.95rem; color: light-dark(#444, #bcbcbc); margin-bottom: 0.25rem; } form.submit-form input[type=email], form.submit-form textarea { width: 100%; box-sizing: border-box; padding: 0.5rem; font-family: inherit; font-size: 1rem; background: light-dark(#fff, #1a1a1a); color: light-dark(inherit, #e8e8e8); border: 1px solid light-dark(#999, #666); } form.submit-form textarea { font-family: "Courier New", Courier, monospace; font-size: 0.95rem; min-height: 40vh; resize: vertical; } form.submit-form button { padding: 0.6rem 1.4rem; font-size: 1rem; background: light-dark(#1f1f1f, #d4d4d4); color: light-dark(#fafafa, #111); border: 1px solid light-dark(#1f1f1f, #d4d4d4); cursor: pointer; } /* Theme toggle in the footer. */ .theme-toggle { margin-top: 0.5rem; font-size: 0.85rem; } .theme-toggle a { margin: 0 0.15rem; } .theme-toggle .current { font-weight: bold; text-decoration: none; color: inherit; }