mirror of
https://github.com/tiennm99/noitu.git
synced 2026-10-11 03:13:45 +00:00
style(web): collapse the type ramp, add accent hover tokens, and lift the page background
Nine font-size steps down to seven, mapped so no component reads smaller or larger than it did before except the two the review named on purpose: the syllable grows into the room a hero glyph deserves, and the ring's resting value moves onto the ramp. Hover and pressed accent tokens replace the grey --surface-alt every primary button used to borrow, and the light page background lifts a step so a card reads as a card again rather than the same paper as the page under it.
This commit is contained in:
1 parent
8c5bb8bef4
commit
18170aad15
1 file changed
+26
-12
+26
-12
@@ -7,7 +7,10 @@
|
||||
/* Paper and ink with a faint green cast: a word game reads as a page, and
|
||||
the cast ties the neutrals to the accent instead of leaving them beside
|
||||
it. */
|
||||
--bg: #f4f7f4;
|
||||
/* Lifted a step above the cards it sits under: at the old #f4f7f4 the page
|
||||
and a card on --surface were 1.08 apart, close enough that a card read
|
||||
as the same paper as the page behind it rather than as a card on it. */
|
||||
--bg: #eef3ef;
|
||||
--surface: #ffffff;
|
||||
--surface-alt: #e9f0ea;
|
||||
--border: #c2d1c8;
|
||||
@@ -26,6 +29,12 @@
|
||||
--accent: #12692f;
|
||||
--accent-text: #ffffff;
|
||||
--accent-soft: #dff2e5;
|
||||
/* Hover and press need their own step: the background a button already
|
||||
borrows for its off states (--surface-alt) is grey, so without these the
|
||||
accent never visibly darkens under the pointer. Both keep the white ink
|
||||
above ≥7:1. */
|
||||
--accent-hover: #0e5626;
|
||||
--accent-pressed: #0a4520;
|
||||
--danger: #a3231c;
|
||||
--danger-soft: #fbe4e2;
|
||||
--warn: #8a5a08;
|
||||
@@ -57,17 +66,18 @@
|
||||
|
||||
/* The type ramp, numbered rather than t-shirt sized: the steps are close
|
||||
together and "medium" versus "large" would say nothing useful about
|
||||
0.85rem against 0.9rem. Step 6 is body text and every input, which is
|
||||
1rem because anything smaller makes iOS Safari zoom the page on focus. */
|
||||
--text-1: 0.7rem;
|
||||
--text-2: 0.75rem;
|
||||
--text-3: 0.8rem;
|
||||
--text-4: 0.85rem;
|
||||
--text-5: 0.9rem;
|
||||
--text-6: 1rem;
|
||||
--text-7: 1.1rem;
|
||||
--text-8: 1.4rem;
|
||||
--text-9: 2rem;
|
||||
1rem against 1.125rem. Collapsed from nine steps to seven — the old
|
||||
0.7-0.9rem band was five steps in 0.2rem, too fine to read as a scale,
|
||||
and 0.7rem (11.2px) was the smallest text in the app, at the edge of
|
||||
legible on a phone. Step 3 is body text and every input, which is 1rem
|
||||
because anything smaller makes iOS Safari zoom the page on focus. */
|
||||
--text-1: 0.75rem; /* badges, series, timestamps */
|
||||
--text-2: 0.875rem; /* meta, hints, labels */
|
||||
--text-3: 1rem; /* body, inputs */
|
||||
--text-4: 1.125rem; /* scoreboard score, h2 */
|
||||
--text-5: 1.5rem; /* the clock, standings rows */
|
||||
--text-6: 2rem; /* the room code */
|
||||
--text-7: 2.25rem; /* the syllable — the one glyph read every turn */
|
||||
|
||||
color-scheme: light;
|
||||
}
|
||||
@@ -85,6 +95,10 @@
|
||||
--accent: #5ddc8b;
|
||||
--accent-text: #0c1410;
|
||||
--accent-soft: #1e3a2a;
|
||||
/* Lightened further rather than darkened: a dark accent already reads as
|
||||
"pressed" on a dark surface, so the pointer states go the other way. */
|
||||
--accent-hover: #7ae6a1;
|
||||
--accent-pressed: #93edb3;
|
||||
--danger: #f2867d;
|
||||
--danger-soft: #3a201e;
|
||||
--warn: #e9b949;
|
||||
|
||||
Reference in new issue
Block a user