/* * The shared look for every page on nodoplan.web.app. * * There are only three of them and no build step, so this is a plain * stylesheet rather than anything compiled. It follows the app: system font, * one narrow column, and a palette that answers to the reader's appearance * rather than picking one. */ :root { color-scheme: light dark; --bg: #f7f7f8; --surface: #ffffff; --text: #111318; --muted: #6b6f76; --line: #e4e5e9; --accent: #0b6e2f; } @media (prefers-color-scheme: dark) { :root { --bg: #000000; --surface: #14171c; --text: #ffffff; --muted: #9aa0a8; --line: #2c2f36; --accent: #30d158; } } * { box-sizing: border-box; } body { margin: 0; padding: 40px 20px 72px; background: var(--bg); color: var(--text); font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; display: flex; justify-content: center; } main { max-width: 620px; width: 100%; } h1 { font-size: 30px; margin: 0 0 4px; letter-spacing: -0.02em; } h2 { font-size: 20px; margin: 34px 0 8px; letter-spacing: -0.01em; } h3 { font-size: 17px; margin: 22px 0 6px; } p, li { color: var(--muted); } li { margin-bottom: 6px; } ul { padding-left: 20px; } strong { color: var(--text); font-weight: 600; } a { color: var(--accent); } code { font-size: 15px; } .updated { font-size: 14px; color: var(--muted); margin: 0 0 28px; } hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0 20px; } .callout { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin: 20px 0; } .callout p:last-child, .callout ol:last-child, .callout ul:last-child { margin-bottom: 0; } .callout p:first-child { margin-top: 0; } .steps { padding-left: 22px; } .steps li { margin-bottom: 8px; } .foot { font-size: 14px; } /* * The language switch. Both languages are in the document; one is hidden. * `lang.js` sets `data-lang` on , and the rule below is what actually * shows a section — so with scripting off the page still renders, in Turkish, * because that is the default stamped into the markup. */ [data-page-lang] { display: none; } html[data-lang="tr"] [data-page-lang="tr"], html[data-lang="en"] [data-page-lang="en"] { display: block; } .switch { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 24px; font-size: 14px; } .switch a { color: var(--muted); text-decoration: none; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; } html[data-lang="tr"] .switch a[href$="tr"], html[data-lang="en"] .switch a[href$="en"] { color: var(--text); border-color: var(--text); }