Changeset 5b6f93b in Klonkt for src

Timestamp:

08/12/2026 09:54:01 PM (3 months ago)

Author:

Robin <roboburr@…>

Children:

3866994

Parents:

5e0fea7

Message:

Ward-PWA: licht thema en kaarten zonder tussenruimtes

Twee wensen van Robin (12-8).

LICHT, NIET DONKER. De basis is omgedraaid: lichte achtergrond, donkere
tekst, witte kaarten. De themakleur kleurt nog steeds het accent, maar
de achtergrondtint mengt nu naar WIT in plaats van naar zwart, zodat de
gekozen kleur een vleugje geeft zonder de leesbaarheid te kosten. Alle
losse donkere kleuren (inputvelden, secundaire knoppen, de glasplaat van
het gesprek) zijn meegegaan.

KAARTEN ZONDER TUSSENRUIMTES, zoals de Shaer-apps. Was een grid met
gaten; nu CSS multi-column masonry: de kaarten raken elkaar, gepakt in
kolommen die naar breedte meer worden (net als het staggered grid van de
app). Een dunne lijn onder elke kaart en tussen de kolommen houdt ze
leesbaar zonder ruimte ertussen.

Changed files:
src/assets/css/ward.css

• :root naar een licht palet; alle donkere resten omgezet
• .cards als column-masonry, gap 0, hairlines

src/assets/js/ward-theme.js

• achtergrondtint mengt naar wit ipv zwart

remarks: 906 tests groen. Kleur en dichtheid zijn oogdingen; even kijken
op dev of het licht genoeg oogt en de kolommen goed pakken.

-robo
Co-Authored-By: Claude Opus 4.8 <noreply@…>

Location:

src/assets

Files:

• css/ward.css (modified) (11 diffs)
• js/ward-theme.js (modified) (2 diffs)

src/assets/css/ward.css

@@ -1 @@
-/* De Ward PWA: rustig, groot genoeg voor een kind, donker als de rest. */
+/* De Ward PWA: rustig, groot genoeg voor een kind, LICHT (Robins wens 12-8). */
 :root {
-  --bg: #141a24;
-  --card: #1c2431;
-  --ink: #eef2f8;
-  --dim: #9aa7bb;
+  --bg: #f4f5f9;
+  --card: #ffffff;
+  --ink: #1b2230;
+  --dim: #5b6472;
+  --line: #e3e6ee;         /* dunne scheiding tussen aanrakende kaarten */
   --accent: #5a32e6;
   --on-accent: #ffffff;
-  --bg-top: #1a2233;
-  --bg-bottom: #0d1017;
-  --alarm: #ef9f27;
-  --ok: #46c26a;
+  --bg-top: #eef0f7;
+  --bg-bottom: #f7f8fb;
+  --alarm: #c47a00;
+  --ok: #2f9e52;
 }
 * { box-sizing: border-box; }
@@ -33 +34 @@
   background: var(--accent); color: var(--on-accent); font-size: 1.1rem; font-weight: 600;
 }
-.help button:disabled { background: #3a3f4d; color: var(--dim); }
+.help button:disabled { background: #d8dce6; color: var(--dim); }
 .help .hint { margin: 8px 2px 0; color: var(--dim); font-size: .85rem; }
 
@@ -43 +44 @@
 .empty { color: var(--dim); }
 
-.chip { margin-left: auto; font-size: .75rem; padding: 3px 9px; border-radius: 999px; background: #2a3342; color: var(--dim); }
+.chip { margin-left: auto; font-size: .75rem; padding: 3px 9px; border-radius: 999px; background: #eef0f6; color: var(--dim); }
 .chip.ok { background: rgba(70,194,106,.16); color: var(--ok); }
 .chip.away { background: rgba(239,159,39,.16); color: var(--alarm); }
@@ -82 +83 @@
 dialog#help-dialog label { display: block; color: var(--dim); font-size: .85rem; margin-bottom: 4px; }
 dialog#help-dialog textarea {
-  width: 100%; border-radius: 10px; border: 1px solid #2a3342;
-  background: #131a25; color: var(--ink); padding: 8px; font: inherit;
+  width: 100%; border-radius: 10px; border: 1px solid var(--line);
+  background: #fbfbfe; color: var(--ink); padding: 8px; font: inherit;
 }
 dialog#help-dialog menu { display: flex; gap: 8px; justify-content: flex-end; margin: 14px 0 0; padding: 0; }
-dialog#help-dialog button { border: 0; border-radius: 10px; padding: 10px 14px; background: #2a3342; color: var(--ink); font: inherit; }
+dialog#help-dialog button { border: 0; border-radius: 10px; padding: 10px 14px; background: #eef0f6; color: var(--ink); font: inherit; }
 dialog#help-dialog button.primary { background: var(--accent); color: var(--on-accent); font-weight: 600; }
 
@@ -104 +105 @@
 .topbar #mode {
   margin-left: auto; border: 0; border-radius: 999px; padding: 8px 16px;
-  background: #2a3342; color: var(--ink); font: inherit;
+  background: #eef0f6; color: var(--ink); font: inherit;
 }
 /* De kaarten vallen weg, de hemel blijft: dezelfde beweging als in de app. */
@@ -125 +126 @@
   /* Doorschijnend: de hemel eronder blijft zichtbaar draaien, net als de
      glazen bubbels in de app. */
-  background: rgba(20, 26, 36, .72); backdrop-filter: blur(14px);
+  background: rgba(244, 245, 249, .78); backdrop-filter: blur(14px);
 }
 #thread header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
 #thread header h2 { margin: 0; font-size: 1.05rem; }
-#thread-close { border: 0; background: #2a3342; color: var(--ink); border-radius: 10px; padding: 8px 12px; font-size: 1rem; }
+#thread-close { border: 0; background: #eef0f6; color: var(--ink); border-radius: 10px; padding: 8px 12px; font-size: 1rem; }
 #thread-list { flex: 1; overflow-y: auto; padding: 8px 16px; display: flex; flex-direction: column; gap: 8px; }
 .bubble { max-width: 78%; padding: 10px 12px; border-radius: 14px; background: var(--card); }
-.bubble.out { align-self: flex-end; background: var(--accent); }
+.bubble.out { align-self: flex-end; background: var(--accent); color: var(--on-accent); }
+.bubble.out .when { color: rgba(255,255,255,.7); }
 .bubble.wave { font-size: 1.4rem; }
-.bubble .when { display: block; margin-top: 4px; font-size: .7rem; color: rgba(255,255,255,.55); }
+.bubble .when { display: block; margin-top: 4px; font-size: .7rem; color: var(--dim); }
 .bubble .body img { max-width: 100%; border-radius: 8px; }
 #thread-form { display: flex; gap: 8px; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); }
 #thread-form input {
-  flex: 1; border-radius: 999px; border: 1px solid #2a3342;
-  background: #131a25; color: var(--ink); padding: 10px 16px; font: inherit;
+  flex: 1; border-radius: 999px; border: 1px solid var(--line);
+  background: #fbfbfe; color: var(--ink); padding: 10px 16px; font: inherit;
 }
 #thread-form button { border: 0; border-radius: 999px; padding: 10px 18px; background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 600; }
@@ -181 +183 @@
 dialog#compose-dialog::backdrop { background: rgba(0,0,0,.5); }
 .compose-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
-.compose-head #compose-cancel { border: 0; background: #2a3342; color: var(--ink); border-radius: 10px; padding: 8px 12px; font-size: 1rem; }
-.compose-head #compose-vis { flex: 1; border-radius: 10px; border: 1px solid #2a3342; background: #131a25; color: var(--ink); padding: 8px; font: inherit; }
+.compose-head #compose-cancel { border: 0; background: #eef0f6; color: var(--ink); border-radius: 10px; padding: 8px 12px; font-size: 1rem; }
+.compose-head #compose-vis { flex: 1; border-radius: 10px; border: 1px solid var(--line); background: #fbfbfe; color: var(--ink); padding: 8px; font: inherit; }
 .compose-head .primary { border: 0; border-radius: 10px; padding: 8px 16px; background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 600; }
 .compose-head .primary:disabled { background: #3a3f4d; color: var(--dim); }
-#compose-text { width: 100%; border-radius: 12px; border: 1px solid #2a3342; background: #131a25; color: var(--ink); padding: 10px; font: inherit; resize: vertical; }
+#compose-text { width: 100%; border-radius: 12px; border: 1px solid var(--line); background: #fbfbfe; color: var(--ink); padding: 10px; font: inherit; resize: vertical; }
 .compose-media { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
-.media-chip { position: relative; display: flex; align-items: center; gap: 6px; background: #131a25; border-radius: 10px; padding: 6px 8px; }
+.media-chip { position: relative; display: flex; align-items: center; gap: 6px; background: #fbfbfe; border-radius: 10px; padding: 6px 8px; }
 .media-chip img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
 .media-chip .kind { font-size: 1.2rem; }
@@ -193 +195 @@
 .media-chip .drop { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: #000; color: #fff; font-size: .75rem; line-height: 1; }
 .compose-tools { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
-.compose-tools .tool { font-size: 1.4rem; cursor: pointer; padding: 4px 8px; border-radius: 10px; background: #131a25; }
+.compose-tools .tool { font-size: 1.4rem; cursor: pointer; padding: 4px 8px; border-radius: 10px; background: #fbfbfe; }
 .compose-tools .hint { margin-left: auto; }
 
@@ -200 +202 @@
    kolommen. auto-fill met een minimum vult zelf op: één kolom op een smalle
    telefoon, twee op een tablet, drie of meer op een breed scherm. */
+/* Masonry ZONDER tussenruimtes, zoals de Shaer-apps (Robins wens 12-8): de
+   kaarten raken elkaar, gepakt in kolommen die naar breedte meer worden. CSS
+   multi-column vult zelf van boven naar beneden; een dunne lijn scheidt twee
+   aanrakende kaarten zodat ze niet in elkaar overlopen. */
 .cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 12px;
-  align-items: start;
-}
+  column-width: 280px;
+  column-gap: 0;
+  column-rule: 1px solid var(--line);
+}
+.cards .post {
+  break-inside: avoid;
+  margin: 0;
+  border-radius: 0;
+  border-bottom: 1px solid var(--line);
+}
+/* De eerste kaart in elke kolom mag geen rand bovenlangs missen; de scheiding
+   zit onderaan, dus alleen de allerlaatste in beeld valt weg. Geen probleem:
+   de feed eindigt toch met de rand van de sectie. */
 
 /* ── De mini-speler ───────────────────────────────────────────────────── */
@@ -212 +226 @@
   z-index: 45; display: flex; align-items: center; gap: 10px;
   padding: 8px 12px; border-radius: 14px;
-  background: var(--card); box-shadow: 0 6px 24px rgba(0,0,0,.4);
+  background: var(--card); box-shadow: 0 6px 24px rgba(20,30,60,.18); border: 1px solid var(--line);
   max-width: 520px; margin: 0 auto;
 }
@@ -220 +234 @@
 
 /* ── De themakiezer ───────────────────────────────────────────────────── */
-.icon-btn { border: 0; background: #2a3342; border-radius: 999px; width: 38px; height: 38px; font-size: 1.1rem; }
+.icon-btn { border: 0; background: #eef0f6; border-radius: 999px; width: 38px; height: 38px; font-size: 1.1rem; }
 dialog#theme-dialog {
   border: 0; border-radius: 16px; padding: 18px; max-width: 320px; width: calc(100% - 48px);

src/assets/js/ward-theme.js

@@ -43 +43 @@
 /**
  * De kleur toepassen: het accent dat de knoppen, de bubbels en de (+) dragen,
- * plus een zachte tint over de donkere achtergrond zodat de hele hemel de
+ * plus een zachte tint over de LICHTE achtergrond zodat de hele hemel de
  * gekozen kleur ademt. De tekst-op-accent volgt de luminantie.
  */
@@ -50 +50 @@
   root.setProperty('--accent', hex(rgb));
   root.setProperty('--on-accent', onSky(rgb));
-  // De achtergrond blijft donker (leesbaar), maar krijgt een vleugje van de
-  // kleur: een verticale gradient van de getinte nacht naar bijna zwart.
+  // De achtergrond is LICHT (Robins wens 12-8) maar krijgt een vleugje van de
+  // kleur: een verticale gradient van een lichte tint naar bijna wit. De kleur
+  // wordt sterk richting wit gemengd, zodat de tekst leesbaar blijft.
   const r = (rgb >> 16) & 0xff, g = (rgb >> 8) & 0xff, b = rgb & 0xff;
-  const tint = (f) => `rgb(${Math.round(r * f + 20 * (1 - f))},${Math.round(g * f + 26 * (1 - f))},${Math.round(b * f + 36 * (1 - f))})`;
-  root.setProperty('--bg-top', tint(0.22));
-  root.setProperty('--bg-bottom', tint(0.06));
+  const tint = (f) => `rgb(${Math.round(r * f + 255 * (1 - f))},${Math.round(g * f + 255 * (1 - f))},${Math.round(b * f + 255 * (1 - f))})`;
+  root.setProperty('--bg-top', tint(0.10));
+  root.setProperty('--bg-bottom', tint(0.03));
 }