Something went wrong. Try again.
A little atproto app for organizing and posting meme images
Something went wrong. Try again.
5.5 kB · 218 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219:root { --paper: #f6f4ef; --paper-dim: #efece3; --ink: #201f1d; --ink-soft: #6b675d; --line: #d9d3c4; --accent: #7a2e2e; --accent-soft: #7a2e2e14; /* Separate from --accent (brand/selection color) because .error and other genuinely-wrong-state text needs to stay legible as "something's wrong" even in a theme where --accent carries no color at all — see the Modern override below. */ --danger: var(--accent); --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-label: "Iowan Old Style", "Palatino Linotype", Georgia, serif; --border-width: 1px; --radius-sm: 2px; --radius-pill: 999px; --radius-circle: 50%; --plate-padding: 0.6em; --gap-grid: 1rem;}
/* "Modern" — a second visual direction being compared against "Classic" above (see docs/plan.md's "Design system exploration" detour), in the International Typographic Style / Swiss design lineage. Sans-only, sharp corners, precise hairlines. Toggled via lib/settings.svelte.ts, not a settled decision. */:root[data-theme="modern"] { --paper: #ffffff; --paper-dim: #eeeeee; --ink: #111111; --ink-soft: #6e6e6e; --line: #111111; --accent: var(--ink); --accent-soft: #11111114; --danger: #9c3b3b; --font-body: Helvetica, Arial, sans-serif; --font-label: Helvetica, Arial, sans-serif; --border-width: 1px; --radius-sm: 0; --radius-pill: 0; --radius-circle: 0; --plate-padding: 0.35em; --gap-grid: 1.25rem;}
/* Labels lean on italics for contrast against body text in Classic's serif; Modern has no serif to contrast against, so it leans on tracked-out uppercase instead — the standard ITS caption treatment. */:root[data-theme="modern"] .wall-label { font-style: normal; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72em;}
:root[data-theme="modern"] .wall-label .title { font-style: normal;}
/* A modernist catalog page doesn't box every photo — alignment and whitespace carry the grid, not ruled frames around each cell. So Modern drops the matted box specifically on meme thumbnails (figure.plate in the grid views, .plate.pick in the picker) while leaving .plate.modal and .plate.card alone — those are bounded UI surfaces (a dialog, the sign-in card) that still need to read as distinct from what's behind them. */:root[data-theme="modern"] figure.plate,:root[data-theme="modern"] .plate.pick { background: none; border: none; padding: 0;}
*, *::before, *::after { box-sizing: border-box;}
html, body, #app { height: 100%; margin: 0;}
body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased;}
h1, h2, h3 { font-family: var(--font-label); font-weight: 500; letter-spacing: 0.01em; margin: 0 0 0.5em;}
button, input, textarea, select { font-family: inherit; font-size: inherit; /* Browsers give <button>/<input>/<select> their own default line-height ("normal") instead of inheriting the page's — without this, a button sits shorter than a same-padding <label> styled to look like one (see .file-btn in ComposeView), even with identical border/padding. */ line-height: inherit; color: inherit;}
button { background: var(--paper); border: var(--border-width) solid var(--ink); color: var(--ink); padding: 0.5em 1.1em; cursor: pointer; border-radius: var(--radius-sm); letter-spacing: 0.02em;}
button.accent { border-color: var(--accent); color: var(--accent);}
@media (hover: hover) { button:hover { background: var(--ink); color: var(--paper); }
button.accent:hover { background: var(--accent); color: var(--paper); }}
button:disabled { opacity: 0.4; cursor: default; background: var(--paper); color: var(--ink);}
input[type="text"],input[type="search"],textarea { background: var(--paper); border: var(--border-width) solid var(--line); padding: 0.5em 0.7em; border-radius: var(--radius-sm);}
input[type="text"]:focus,input[type="search"]:focus,textarea:focus { outline: none; border-color: var(--ink-soft);}
a { color: var(--accent);}
/* Wall-label: the small caption style used under every meme thumbnail. */.wall-label { font-family: var(--font-label); font-size: 0.8em; color: var(--ink-soft); letter-spacing: 0.02em;}
.wall-label .title { color: var(--ink); font-style: italic;}
/* Plate: the matted frame around a meme thumbnail in a grid. */.plate { background: var(--paper-dim); border: var(--border-width) solid var(--line); padding: var(--plate-padding);}
.plate img,.plate .meme-image { display: block; width: 100%; height: auto; background: var(--paper);}
/* Icon-btn: the small round dark control that floats on top of a meme — edit/delete in the library grid, "view full size" everywhere a meme is shown. Global rather than per-component because four views now place one and they have to read as the same control in all of them. */.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.1em; height: 2.1em; padding: 0; border: none; border-radius: var(--radius-circle); background: rgba(32, 31, 29, 0.65); color: var(--paper);}
.icon-btn:hover { background: rgba(32, 31, 29, 0.85); color: var(--paper);}
.icon-btn svg { width: 1.1em; height: 1.1em;}