/* * Plain CSS stylesheet for TidyPub. * Light/dark mode follows the system preference by default and can be * overridden per-post via a data-theme attribute on the element. */ /* Light mode is the default */ :root { --color-text: #3a4055; --color-bg: #f9f7f3; --color-bg-secondary: #e6e1dc; --color-bg-input: #e6e1dc; --color-border: #999999; --color-border-input: #777777; --color-muted: #555555; --color-muted-text: #444444; --color-primary: #222222; --color-primary-text: #f0f0f0; --color-link-hover: #000000; --color-danger: #d32f2f; --color-danger-bg: rgba(211, 47, 47, 0.1); --color-danger-text: #b71c1c; --color-success: #2e7d32; --color-success-bg: rgba(46, 125, 50, 0.12); --color-success-text: #1b5e20; --color-warning: #f57c00; --color-badge-border: #2e7d32; --color-badge-text: #2e7d32; --font-sans: "Charter", "Bitstream Charter", "Sitka Text", Cambria, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --radius: 0.375rem; --radius-lg: 0.5rem; --container: 48rem; --container-form: 28rem; --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --color-link: #004e8c; } /* Dark mode when the system prefers it */ @media (prefers-color-scheme: dark) { :root { --color-text: #e6e1dc; --color-bg: #2b2b2b; --color-bg-secondary: #1f1f1f; --color-bg-input: #1a1a1a; --color-border: #333333; --color-border-input: #444444; --color-muted: #bbbbbb; --color-muted-text: #b0b0b0; --color-primary: #e0e0e0; --color-primary-text: #222222; --color-link-hover: #ffffff; --color-danger: #f87171; --color-danger-bg: rgba(248, 113, 113, 0.15); --color-danger-text: #fca5a5; --color-success: #34d399; --color-success-bg: rgba(52, 211, 153, 0.12); --color-success-text: #6ee7b7; --color-warning: #fbbf24; --color-badge-border: #34d399; --color-badge-text: #34d399; --color-heading: #ffffff; --color-link: #66d9ef; } } /* Explicit theme overrides (chosen per-post) */ html[data-theme="light"] { --color-text: #3a4055; --color-bg: #f9f7f3; --color-bg-secondary: #e6e1dc; --color-bg-input: #e6e1dc; --color-border: #999999; --color-border-input: #777777; --color-muted: #555555; --color-muted-text: #444444; --color-primary: #222222; --color-primary-text: #f0f0f0; --color-link-hover: #000000; --color-danger: #d32f2f; --color-danger-bg: rgba(211, 47, 47, 0.1); --color-danger-text: #b71c1c; --color-success: #2e7d32; --color-success-bg: rgba(46, 125, 50, 0.12); --color-success-text: #1b5e20; --color-warning: #f57c00; --color-badge-border: #2e7d32; --color-badge-text: #2e7d32; --color-heading: var(--color-text); --color-link: #004e8c; } html[data-theme="dark"] { --color-text: #e6e1dc; --color-bg: #2b2b2b; --color-bg-secondary: #1f1f1f; --color-bg-input: #1a1a1a; --color-border: #333333; --color-border-input: #444444; --color-muted: #bbbbbb; --color-muted-text: #b0b0b0; --color-primary: #e0e0e0; --color-primary-text: #222222; --color-link-hover: #ffffff; --color-danger: #f87171; --color-danger-bg: rgba(248, 113, 113, 0.15); --color-danger-text: #fca5a5; --color-success: #34d399; --color-success-bg: rgba(52, 211, 153, 0.12); --color-success-text: #6ee7b7; --color-warning: #fbbf24; --color-badge-border: #34d399; --color-badge-text: #34d399; } /* Subtle table row stripe — a faint ink wash, kept barely perceptible so it aids scanning without competing with the data. Follows the theme cascade. */ :root { --color-table-stripe: rgba(0, 0, 0, 0.035); } @media (prefers-color-scheme: dark) { :root { --color-table-stripe: rgba(255, 255, 255, 0.04); } } html[data-theme="light"] { --color-table-stripe: rgba(0, 0, 0, 0.035); } html[data-theme="dark"] { --color-table-stripe: rgba(255, 255, 255, 0.04); } /* Minimal reset */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: 14pt; line-height: 1.5; color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } a:hover { color: var(--color-link-hover); } img { max-width: 100%; height: auto; display: block; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } /* Layout */ .container { width: 100%; max-width: var(--container); margin-left: auto; margin-right: auto; padding-left: var(--space-md); padding-right: var(--space-md); } .container-form { max-width: var(--container-form); } /* Navigation */ .site-nav { border-bottom: 1px solid var(--color-border); background-color: var(--color-bg); } .site-nav__inner { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-sm); padding-bottom: var(--space-sm); gap: var(--space-md); } .site-nav__brand { font-weight: 600; letter-spacing: -0.025em; white-space: nowrap; } .site-nav__links { display: flex; align-items: center; gap: var(--space-md); font-size: 0.875rem; flex-wrap: wrap; justify-content: flex-end; } .site-nav__links form, .site-nav__links button { display: inline; font-size: inherit; } .site-nav__links a, .site-nav__links button { color: var(--color-text); } .site-nav__links a:hover, .site-nav__links button:hover { color: var(--color-link-hover); } .site-nav__email { color: var(--color-muted); white-space: nowrap; } @media (max-width: 640px) { .site-nav__inner { flex-direction: column; align-items: flex-start; gap: var(--space-sm); } .site-nav__links { justify-content: flex-start; width: 100%; } } /* Main content */ .site-main { padding-top: var(--space-xl); padding-bottom: var(--space-xl); } /* Typography utilities */ .page-title { font-size: 2.0em; font-weight: 600; margin-bottom: var(--space-lg); line-height: 1.2; color: var(--color-heading); } .section-title { font-size: 1.8em; font-weight: 600; margin-bottom: var(--space-md); line-height: 1.4; } .text-sm { font-size: 0.875rem; } .text-xs { font-size: 0.75rem; } .font-medium { font-weight: 500; } .text-muted { color: var(--color-muted); } .text-muted-text { color: var(--color-muted-text); } /* Forms */ .form-group { margin-bottom: var(--space-md); } .form-label, .form-group label { display: block; font-size: 0.875rem; margin-bottom: var(--space-xs); } .form-hint { font-size: 0.75rem; color: var(--color-muted); margin-top: var(--space-xs); } .form-input, .form-select, .form-textarea { width: 100%; background-color: var(--color-bg-input); border: 1px solid var(--color-border-input); border-radius: var(--radius); padding: 0.5rem 0.75rem; color: var(--color-text); } .form-input::placeholder, .form-textarea::placeholder { color: var(--color-muted); } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--color-muted); } .form-textarea { resize: vertical; min-height: 6rem; } .form-textarea--mono { font-family: var(--font-mono); } .form-check { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); } .form-check input[type="checkbox"] { accent-color: var(--color-primary); } .form-actions { display: flex; flex-direction: column; gap: var(--space-md); } @media (min-width: 640px) { .form-actions { flex-direction: row; } } /* Buttons */ .btn { display: inline-block; padding: 0.5rem 1rem; border-radius: var(--radius); font-size: 0.875rem; font-weight: 500; text-align: center; text-decoration: none; cursor: pointer; border: 1px solid transparent; } .btn--primary { background-color: var(--color-primary); color: var(--color-primary-text); border-color: var(--color-primary); } .btn--primary:hover { filter: brightness(1.15); color: var(--color-primary-text); } .btn--secondary { background-color: transparent; color: var(--color-text); border-color: var(--color-border-input); } .btn--secondary:hover { background-color: var(--color-bg-input); color: var(--color-text); } .btn--danger { background-color: transparent; color: var(--color-danger); border-color: var(--color-danger); } .btn--danger:hover { background-color: var(--color-danger-bg); color: var(--color-danger); } .btn--link { padding: 0; background: none; border: none; color: var(--color-danger); text-decoration: underline; } .btn--link:hover { color: var(--color-danger-text); } /* Alerts */ .alert { margin-bottom: var(--space-md); padding: 0.75rem; border-radius: var(--radius); border: 1px solid; } .alert--success { background-color: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success-text); } .alert--error { background-color: var(--color-danger-bg); border-color: var(--color-danger); color: var(--color-danger-text); } /* Posts list */ .posts-header { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); flex-wrap: wrap; } .posts-list { display: grid; gap: var(--space-md); } .post-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-md); background-color: var(--color-bg-secondary); } .post-card__header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-md); } .post-card__title { font-weight: 500; } .post-card__title:hover { text-decoration: underline; } .post-card__meta { font-size: 0.75rem; color: var(--color-muted); margin-top: 0.125rem; } .post-card__template { font-size: 0.75rem; color: var(--color-muted); white-space: nowrap; } .post-card__excerpt { margin-top: var(--space-md); font-size: 0.875rem; color: var(--color-muted-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .post-private-label { color: var(--color-warning); } /* Post detail */ .post-detail__header { display: flex; flex-direction: column; gap: var(--space-md); margin-bottom: var(--space-md); } @media (min-width: 640px) { .post-detail__header { flex-direction: row; align-items: center; justify-content: space-between; } } .post-detail__actions { display: flex; align-items: center; gap: var(--space-md); font-size: 0.875rem; flex-wrap: wrap; } .theme-toggle .form-select { width: auto; min-width: 6rem; padding: 0.25rem 0.5rem; font-size: 0.875rem; } .post-detail__meta { font-size: 0.75rem; color: var(--color-muted); margin-bottom: var(--space-xl); } .post-detail__image { margin-bottom: var(--space-xl); } .post-detail__image img { max-height: 24rem; border-radius: var(--radius-lg); border: 1px solid var(--color-border); } .post-content { font-family: var(--font-sans); max-width: none; line-height: 1.5; } .post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 { margin-top: 0.5em; margin-bottom: 0.5em; font-weight: 600; line-height: 1.3; color: var(--color-heading); } .post-content p { margin-bottom: 1em; } .post-content a { text-decoration: underline; color: var(--color-link); } .post-content a:hover { color: var(--color-link-hover); } .post-content ul, .post-content ol { margin-bottom: 1em; padding-left: 1.5em; } .post-content li { margin-bottom: 0.25em; } .post-content code { font-family: var(--font-mono); font-size: 0.95rem; background-color: var(--color-bg-input); padding: 0.125rem 0.25rem; border-radius: 0.25rem; } .post-content pre { background-color: var(--color-bg-input); padding: var(--space-md); border-radius: var(--radius); overflow-x: auto; margin-bottom: 1em; } .post-content pre code { background: none; padding: 0; } .post-content pre.highlight { padding: var(--space-md); } .post-content pre.highlight code { font-size: 0.875rem; line-height: 1.5; } /* Rouge syntax highlighting — light theme (github) */ .post-content pre.highlight, .post-content pre.highlight .w { color: #24292f; background-color: #f6f8fa; } .post-content pre.highlight .k, .post-content pre.highlight .kd, .post-content pre.highlight .kn, .post-content pre.highlight .kp, .post-content pre.highlight .kr, .post-content pre.highlight .kt, .post-content pre.highlight .kv { color: #cf222e; } .post-content pre.highlight .gr { color: #f6f8fa; } .post-content pre.highlight .gd { color: #82071e; background-color: #ffebe9; } .post-content pre.highlight .nb { color: #953800; } .post-content pre.highlight .nc { color: #953800; } .post-content pre.highlight .no { color: #953800; } .post-content pre.highlight .nn { color: #953800; } .post-content pre.highlight .sr { color: #116329; } .post-content pre.highlight .na { color: #116329; } .post-content pre.highlight .nt { color: #116329; } .post-content pre.highlight .gi { color: #116329; background-color: #dafbe1; } .post-content pre.highlight .ges { font-weight: bold; font-style: italic; } .post-content pre.highlight .kc { color: #0550ae; } .post-content pre.highlight .l, .post-content pre.highlight .ld, .post-content pre.highlight .m, .post-content pre.highlight .mb, .post-content pre.highlight .mf, .post-content pre.highlight .mh, .post-content pre.highlight .mi, .post-content pre.highlight .il, .post-content pre.highlight .mo, .post-content pre.highlight .mx { color: #0550ae; } .post-content pre.highlight .sb { color: #0550ae; } .post-content pre.highlight .bp { color: #0550ae; } .post-content pre.highlight .ne { color: #0550ae; } .post-content pre.highlight .nl { color: #0550ae; } .post-content pre.highlight .py { color: #0550ae; } .post-content pre.highlight .nv, .post-content pre.highlight .vc, .post-content pre.highlight .vg, .post-content pre.highlight .vi, .post-content pre.highlight .vm { color: #0550ae; } .post-content pre.highlight .o, .post-content pre.highlight .ow { color: #0550ae; } .post-content pre.highlight .gh { color: #0550ae; font-weight: bold; } .post-content pre.highlight .gu { color: #0550ae; font-weight: bold; } .post-content pre.highlight .s, .post-content pre.highlight .sa, .post-content pre.highlight .sc, .post-content pre.highlight .dl, .post-content pre.highlight .sd, .post-content pre.highlight .s2, .post-content pre.highlight .se, .post-content pre.highlight .sh, .post-content pre.highlight .sx, .post-content pre.highlight .s1, .post-content pre.highlight .ss { color: #0a3069; } .post-content pre.highlight .nd { color: #8250df; } .post-content pre.highlight .nf, .post-content pre.highlight .fm { color: #8250df; } .post-content pre.highlight .err { color: #f6f8fa; background-color: #82071e; } .post-content pre.highlight .c, .post-content pre.highlight .ch, .post-content pre.highlight .cd, .post-content pre.highlight .cm, .post-content pre.highlight .cp, .post-content pre.highlight .cpf, .post-content pre.highlight .c1, .post-content pre.highlight .cs { color: #6e7781; } .post-content pre.highlight .gl { color: #6e7781; } .post-content pre.highlight .gt { color: #6e7781; } .post-content pre.highlight .ni { color: #24292f; } .post-content pre.highlight .si { color: #24292f; } .post-content pre.highlight .ge { color: #24292f; font-style: italic; } .post-content pre.highlight .gs { color: #24292f; font-weight: bold; } /* Rouge syntax highlighting — dark theme (base16.dark) */ @media (prefers-color-scheme: dark) { .post-content pre.highlight, .post-content pre.highlight .w { color: #d8d8d8; background-color: #181818; } .post-content pre.highlight .err { color: #181818; background-color: #ab4642; } .post-content pre.highlight .c, .post-content pre.highlight .ch, .post-content pre.highlight .cd, .post-content pre.highlight .cm, .post-content pre.highlight .cpf, .post-content pre.highlight .c1, .post-content pre.highlight .cs { color: #585858; } .post-content pre.highlight .cp { color: #f7ca88; } .post-content pre.highlight .nt { color: #f7ca88; } .post-content pre.highlight .o, .post-content pre.highlight .ow { color: #d8d8d8; } .post-content pre.highlight .p, .post-content pre.highlight .pi { color: #d8d8d8; } .post-content pre.highlight .gi { color: #a1b56c; } .post-content pre.highlight .gd { color: #ab4642; } .post-content pre.highlight .gh { color: #7cafc2; background-color: #181818; font-weight: bold; } .post-content pre.highlight .ge { font-style: italic; } .post-content pre.highlight .ges { font-weight: bold; font-style: italic; } .post-content pre.highlight .gs { font-weight: bold; } .post-content pre.highlight .k, .post-content pre.highlight .kn, .post-content pre.highlight .kp, .post-content pre.highlight .kr, .post-content pre.highlight .kv { color: #ba8baf; } .post-content pre.highlight .kc { color: #dc9656; } .post-content pre.highlight .kt { color: #dc9656; } .post-content pre.highlight .kd { color: #dc9656; } .post-content pre.highlight .s, .post-content pre.highlight .sb, .post-content pre.highlight .sc, .post-content pre.highlight .dl, .post-content pre.highlight .sd, .post-content pre.highlight .s2, .post-content pre.highlight .sh, .post-content pre.highlight .sx, .post-content pre.highlight .s1 { color: #a1b56c; } .post-content pre.highlight .sa { color: #ba8baf; } .post-content pre.highlight .sr { color: #86c1b9; } .post-content pre.highlight .si { color: #a16946; } .post-content pre.highlight .se { color: #a16946; } .post-content pre.highlight .nn { color: #f7ca88; } .post-content pre.highlight .nc { color: #f7ca88; } .post-content pre.highlight .no { color: #f7ca88; } .post-content pre.highlight .na { color: #7cafc2; } .post-content pre.highlight .m, .post-content pre.highlight .mb, .post-content pre.highlight .mf, .post-content pre.highlight .mh, .post-content pre.highlight .mi, .post-content pre.highlight .il, .post-content pre.highlight .mo, .post-content pre.highlight .mx { color: #a1b56c; } .post-content pre.highlight .ss { color: #a1b56c; } } html[data-theme="dark"] .post-content pre.highlight, html[data-theme="dark"] .post-content pre.highlight .w { color: #d8d8d8; background-color: #181818; } html[data-theme="dark"] .post-content pre.highlight .err { color: #181818; background-color: #ab4642; } html[data-theme="dark"] .post-content pre.highlight .c, html[data-theme="dark"] .post-content pre.highlight .ch, html[data-theme="dark"] .post-content pre.highlight .cd, html[data-theme="dark"] .post-content pre.highlight .cm, html[data-theme="dark"] .post-content pre.highlight .cpf, html[data-theme="dark"] .post-content pre.highlight .c1, html[data-theme="dark"] .post-content pre.highlight .cs { color: #585858; } html[data-theme="dark"] .post-content pre.highlight .cp { color: #f7ca88; } html[data-theme="dark"] .post-content pre.highlight .nt { color: #f7ca88; } html[data-theme="dark"] .post-content pre.highlight .o, html[data-theme="dark"] .post-content pre.highlight .ow { color: #d8d8d8; } html[data-theme="dark"] .post-content pre.highlight .p, html[data-theme="dark"] .post-content pre.highlight .pi { color: #d8d8d8; } html[data-theme="dark"] .post-content pre.highlight .gi { color: #a1b56c; } html[data-theme="dark"] .post-content pre.highlight .gd { color: #ab4642; } html[data-theme="dark"] .post-content pre.highlight .gh { color: #7cafc2; background-color: #181818; font-weight: bold; } html[data-theme="dark"] .post-content pre.highlight .ge { font-style: italic; } html[data-theme="dark"] .post-content pre.highlight .ges { font-weight: bold; font-style: italic; } html[data-theme="dark"] .post-content pre.highlight .gs { font-weight: bold; } html[data-theme="dark"] .post-content pre.highlight .k, html[data-theme="dark"] .post-content pre.highlight .kn, html[data-theme="dark"] .post-content pre.highlight .kp, html[data-theme="dark"] .post-content pre.highlight .kr, html[data-theme="dark"] .post-content pre.highlight .kv { color: #ba8baf; } html[data-theme="dark"] .post-content pre.highlight .kc { color: #dc9656; } html[data-theme="dark"] .post-content pre.highlight .kt { color: #dc9656; } html[data-theme="dark"] .post-content pre.highlight .kd { color: #dc9656; } html[data-theme="dark"] .post-content pre.highlight .s, html[data-theme="dark"] .post-content pre.highlight .sb, html[data-theme="dark"] .post-content pre.highlight .sc, html[data-theme="dark"] .post-content pre.highlight .dl, html[data-theme="dark"] .post-content pre.highlight .sd, html[data-theme="dark"] .post-content pre.highlight .s2, html[data-theme="dark"] .post-content pre.highlight .sh, html[data-theme="dark"] .post-content pre.highlight .sx, html[data-theme="dark"] .post-content pre.highlight .s1 { color: #a1b56c; } html[data-theme="dark"] .post-content pre.highlight .sa { color: #ba8baf; } html[data-theme="dark"] .post-content pre.highlight .sr { color: #86c1b9; } html[data-theme="dark"] .post-content pre.highlight .si { color: #a16946; } html[data-theme="dark"] .post-content pre.highlight .se { color: #a16946; } html[data-theme="dark"] .post-content pre.highlight .nn { color: #f7ca88; } html[data-theme="dark"] .post-content pre.highlight .nc { color: #f7ca88; } html[data-theme="dark"] .post-content pre.highlight .no { color: #f7ca88; } html[data-theme="dark"] .post-content pre.highlight .na { color: #7cafc2; } html[data-theme="dark"] .post-content pre.highlight .m, html[data-theme="dark"] .post-content pre.highlight .mb, html[data-theme="dark"] .post-content pre.highlight .mf, html[data-theme="dark"] .post-content pre.highlight .mh, html[data-theme="dark"] .post-content pre.highlight .mi, html[data-theme="dark"] .post-content pre.highlight .il, html[data-theme="dark"] .post-content pre.highlight .mo, html[data-theme="dark"] .post-content pre.highlight .mx { color: #a1b56c; } html[data-theme="dark"] .post-content pre.highlight .ss { color: #a1b56c; } /* Tables — Tuftian: minimal horizontal rules, no grid, tabular figures. The renderer right-aligns purely numeric columns and wraps tables in a .table-scroll container so wide tables scroll instead of overflowing. Use markdown's colon syntax (|:--|, |:-:|, |--:|) to override alignment. */ .post-content .table-scroll { overflow-x: auto; margin: 1.5em 0; } .post-content table { border-collapse: collapse; border-top: 2px solid var(--color-text); border-bottom: 2px solid var(--color-text); width: auto; max-width: 100%; font-size: 0.9em; line-height: 1.45; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .post-content th, .post-content td { padding: 0.5em 1em; text-align: left; vertical-align: top; border: 0; } /* Generous gutter between columns; outer edges keep a 1em margin of their own. */ .post-content th:not(:first-child), .post-content td:not(:first-child) { padding-left: 1.5em; } .post-content thead th { font-weight: 600; vertical-align: bottom; border-bottom: 1px solid var(--color-text); } /* Barely-there zebra striping on body rows to guide the eye across wide tables. Kept as a faint tint so it never outranks the data. */ .post-content tbody tr:nth-child(even) { background-color: var(--color-table-stripe); } .post-content table caption { caption-side: bottom; font-size: 0.8em; color: var(--color-muted); text-align: left; padding-top: 0.6em; font-style: italic; } /* On narrow portrait screens the 1em / 1.5em cell gutters eat a disproportionate share of the column width — a 3-column table can lose a third of the viewport to padding alone. Tighten only the horizontal padding so the data has room; vertical rhythm and the wider desktop defaults above are left untouched. */ @media (max-width: 640px) { .post-content th, .post-content td { padding-left: 0.5em; padding-right: 0.5em; } .post-content th:not(:first-child), .post-content td:not(:first-child) { padding-left: 0.75em; } } /* Footnote references. Redcarpet emits each reference as its own . When two citations sit side by side (e.g. [^1][^2]) they would otherwise read as a single run ("12"), so add a hair of space before any footnote ref that directly follows another. */ .post-content sup[id^="fnref"] + sup[id^="fnref"]::before { content: ""; margin-left: 0.25em; } .post-content blockquote { border-left: 3px solid var(--color-border-input); padding-left: var(--space-md); margin-bottom: 1em; color: var(--color-muted-text); } .post-content img { max-width: 100%; border-radius: var(--radius); margin-bottom: 1em; } .post-content hr { border: 0; border-top: 1px solid var(--color-border); margin: 2em 0; } .post-content--slate a, .post-content--slate a:hover { color: var(--color-text); } .post-content--stone a, .post-content--stone a:hover { color: var(--color-text); } .post-content--zinc a, .post-content--zinc a:hover { color: var(--color-text); } .post-content--rose a, .post-content--rose a:hover { color: var(--color-text); } .post-content--cyan a, .post-content--cyan a:hover { color: var(--color-text); } .post-content--cyan { letter-spacing: -0.025em; } .post-content--violet a, .post-content--violet a:hover { color: var(--color-text); } /* Version history */ .version-history { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--color-border); font-size: 0.875rem; } .version-history summary { cursor: pointer; color: var(--color-muted); } .version-history ul { margin-top: var(--space-md); list-style: none; display: grid; gap: var(--space-md); font-size: 0.75rem; color: var(--color-muted-text); } .version-history__date { color: var(--color-muted); } .version-history__body { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } /* Subscriber badge */ .badge { display: inline-block; font-size: 0.75rem; padding: 0.125rem 0.375rem; border: 1px solid var(--color-badge-border); color: var(--color-badge-text); border-radius: var(--radius); line-height: 1; } /* Devise shared links */ .auth-links { margin-top: var(--space-lg); display: grid; gap: var(--space-sm); font-size: 0.875rem; color: var(--color-muted); } .auth-links a { color: var(--color-muted); } .auth-links a:hover { color: var(--color-link-hover); } .auth-links button { margin-top: var(--space-sm); } /* Settings */ .settings-section { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-border); font-size: 0.875rem; } .settings-section p { color: var(--color-muted-text); } .settings-section__value { font-weight: 500; color: var(--color-text); } .form-errors { list-style: disc; padding-left: 1.25em; } .form-errors li { margin-bottom: 0.125rem; } /* Error explanation */ #error_explanation h2 { font-size: 0.875rem; font-weight: 600; margin-bottom: var(--space-sm); } #error_explanation ul { list-style: disc; padding-left: 1.25em; font-size: 0.875rem; } #error_explanation li { margin-bottom: 0.125rem; } /* Empty state */ .empty-state { color: var(--color-muted); } /* Landing page (logged-out visitors) */ .landing-hero { padding-top: var(--space-lg); padding-bottom: var(--space-xl); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-xl); } .landing-hero__title { font-size: 2.6em; font-weight: 600; letter-spacing: -0.04em; line-height: 1.1; margin-bottom: var(--space-sm); color: var(--color-heading); } .landing-hero__tagline { font-size: 1.2em; color: var(--color-muted-text); margin-bottom: var(--space-md); max-width: 36rem; } .landing-hero__body { color: var(--color-muted-text); margin-bottom: var(--space-xl); max-width: 36rem; } .landing-hero__cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); } @media (min-width: 640px) { .landing-hero__cta { flex-direction: row; align-items: center; } } .btn--lg { padding: 0.75rem 1.5rem; font-size: 1rem; } .landing-features { margin-bottom: var(--space-xl); } .landing-features__list { list-style: none; display: grid; gap: var(--space-md); } .landing-features__list li { padding-left: 1.25em; position: relative; color: var(--color-muted-text); } .landing-features__list li::before { content: "·"; position: absolute; left: 0; color: var(--color-muted); font-weight: 700; } .landing-features__list code { font-family: var(--font-mono); font-size: 0.85em; background-color: var(--color-bg-input); padding: 0.05rem 0.25rem; border-radius: 0.25rem; } .landing-signin { padding-top: var(--space-lg); border-top: 1px solid var(--color-border); } /* Utilities */ .line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }