Merge pull request #51 from kristianwind/notes-mobile-detail

Notes on a phone: show the note (master-detail layout)
fix(notes): show the note on a phone — one pane at a time
2026-09-03 19:15:05 +02:00 · 2026-09-03 19:07:02 +02:00 · 2026-09-03 17:51:16 +02:00 · 2026-09-03 17:42:55 +02:00
3 changed files with 98 additions and 28 deletions
@@ -210,27 +210,38 @@
 	--shadow-lg: 0 8px 32px rgb(0 0 0 / 0.4);
 }

-/* Kul — a neutral dark grey, the greys of Apple Notes rather than the default's
-   faint green cast. The same green accent, so it still reads as verdande; only the
-   grounds, surfaces and inks turn to plain grey. */
+/* Kul — the greys of Apple Notes' dark mode, to Kristian's own sampled values.
+   Three panel greys, lightest sidebar to darkest editor — the reverse of the usual
+   sunken-is-darkest order, which is why the editor gets its own --editor-bg rather
+   than sharing --surface-raised with the list. The accent turns amber, and the
+   selected menu item, selected note and section headings each get a fallback token
+   so this theme can hit its colours without touching any other. */
 [data-theme='charcoal'] {
-	--ground: #1c1c1c;
-	--surface: #232323;
-	--surface-raised: #2b2b2b;
-	--surface-sunken: #171717;
-	--line: #363636;
-	--line-strong: #474747;
+	--ground: #1e1e1e;
+	--surface: #2a3033;
+	--surface-raised: #242b2e; /* the note list */
+	--surface-sunken: #2d3133; /* the menu / sidebar — lightest here */
+	--line: #34393b;
+	--line-strong: #414749;

-	--ink: #ededed;
-	--ink-muted: #a4a4a4;
-	/* Light enough to clear 4.5:1 against the ground — the quiet tier of dates and
-	   counts is the first to disappear if it is too dim. */
-	--ink-faint: #8e8e8e;
+	--ink: #ffffff;
+	--ink-muted: #dcdcdc;
+	--ink-faint: #9ba0a2;

-	--accent: #5fbf8f;
-	--accent-hover: #6fcf9f;
-	--accent-sunken: #23332b80;
-	--accent-ink: #0d1411;
+	/* Amber, Apple's Notes accent. The bright value is the selected menu item; the
+	   dark text rides on top of it. */
+	--accent: #ffce35;
+	--accent-hover: #ffd75a;
+	--accent-sunken: #ffce35;
+	--accent-ink: #1e1e1e;
+
+	/* Per-element, and only here — every other theme falls back to the shared token
+	   in the var() calls that read these. */
+	--editor-bg: #1e1e1e; /* the text field, a shade below the list */
+	--note-on-bg: #a78c26; /* a selected note in the list — gold */
+	--note-on-ink: #1e1e1e; /* dark text on the gold */
+	--nav-active-ink: #1e1e1e; /* dark text on the amber menu item */
+	--heading-ink: #8a8e90; /* PROJEKTER and the group names — quiet grey */

 	--p1: #cf6b6b;
 	--p2: #d69f5c;
@@ -1336,7 +1336,9 @@
 	h2 {
 		font-size: var(--menu-size);
 		font-weight: 600;
-		color: var(--ink);
+		/* Kul sets these headings to a quiet grey (--heading-ink); every other theme
+		   falls back to the reading ink and keeps them bold and bright. */
+		color: var(--heading-ink, var(--ink));
 	}

 	/* The heading's mark, in the muted ink so the bold name still leads. Sized and
@@ -1591,7 +1593,10 @@
 	   in both themes. */
 	a.active {
 		background: var(--accent-sunken);
-		color: var(--ink);
+		/* On a solid accent (Kul's amber menu item) the label goes dark via
+		   --nav-active-ink; on the tinted accent-sunken every other theme uses, it
+		   falls back to the reading ink. */
+		color: var(--nav-active-ink, var(--ink));
 		font-weight: 600;
 	}

@@ -707,7 +707,10 @@
 	}}
 />

-<div class="notes">
+<!-- `has-note` drives the phone layout: one column, showing the list until a note
+     is opened and the editor once one is. On a wide screen both are always up and
+     the class does nothing. -->
+<div class="notes" class:has-note={selected}>
 	<aside>
 		<div class="head">
 			<h1>{t('notes.title')}</h1>
@@ -917,6 +920,9 @@

 	<section class="editor">
 		{#if selected}
+			<!-- Phone only (hidden on a wide screen by CSS): the way back to the list,
+			     since there the editor fills the screen and the list is not beside it. -->
+			<button class="back" onclick={() => open(null)}>‹ {t('notes.title')}</button>
 			<NoteEditor
 				note={selected}
 				notes={notes}
@@ -1480,8 +1486,20 @@
 	}

 	.row.on {
-		background: var(--surface-raised);
-		color: var(--ink);
+		background: var(--note-on-bg, var(--surface-raised));
+		color: var(--note-on-ink, var(--ink));
+	}
+
+	/* On a themed selection colour (Kul's gold), the row's own quieter tiers go dark
+	   too, or the date and the filed line vanish into it. Other themes have no
+	   --note-on-ink, so these fall back to their normal muted inks. */
+	.row.on .when,
+	.row.on .filed {
+		color: var(--note-on-ink, var(--ink-muted));
+	}
+
+	.row.on .filed-icon {
+		color: var(--note-on-ink, var(--ink-faint));
 	}

 	/* Samme størrelse som en opgavetitel. En note og en opgave er to ting af samme
@@ -1577,8 +1595,10 @@
 		min-height: 0;
 		min-width: 0;
 		/* A nuance lighter than the ground in dark, still white in light — matches
-		   the note list beside it so the two read as one writing surface. */
-		background: var(--surface-raised);
+		   the note list beside it so the two read as one writing surface. Kul gives
+		   the text field its own darker grey via --editor-bg; other themes fall back
+		   to the shared surface so the list and the editor stay the same colour. */
+		background: var(--editor-bg, var(--surface-raised));
 		border: 1px solid var(--line);
 		border-radius: var(--radius);
 		/* Luft nok til at teksten ikke rører kanten.
@@ -1897,14 +1917,48 @@
 		font-size: var(--text-sm);
 	}

+	/* The way back to the list on a phone — an iOS-style "‹ Noter" at the top of the
+	   editor. Hidden on a wide screen, where the list is always beside the editor. */
+	.back {
+		display: none;
+		align-self: flex-start;
+		align-items: center;
+		gap: var(--s1);
+		margin-bottom: var(--s2);
+		padding: var(--s1) 0;
+		font-size: var(--text-base);
+		color: var(--accent);
+	}
+
 	@media (max-width: 700px) {
 		.notes {
 			grid-template-columns: 1fr;
+			padding: 0;
+			gap: 0;
 		}

-		aside {
-			border-right: 0;
-			padding-right: 0;
+		/* One pane at a time. The two-column card layout has no room on a phone, so
+		   the list shows until a note is opened and the editor takes over once one is
+		   — the back button is the way between them. Without this the editor stacked
+		   below a full-height list, so a tapped note opened out of sight. */
+		.notes.has-note aside {
+			display: none;
+		}
+
+		.notes:not(.has-note) .editor {
+			display: none;
+		}
+
+		/* Full-bleed: the card border and rounded corners are for sitting beside
+		   another card, and on one column there is nothing beside it. */
+		aside,
+		.editor {
+			border: 0;
+			border-radius: 0;
+		}
+
+		.back {
+			display: inline-flex;
 		}
 	}
 </style>
Author	SHA1	Message	Date
Kristian Wind	a1b8cc6ddc	Merge pull request #51 from kristianwind/notes-mobile-detail CI / OpenAPI is valid (push) Successful in 10s Details CI / End-to-end (push) Successful in 8m51s Details CI / Docker image builds (push) Successful in 1m58s Details Release / Build and publish image (push) Failing after 5s Details CI / Go (push) Failing after 14m24s Details Notes on a phone: show the note (master-detail layout)	2026-09-03 19:15:05 +02:00
kristianwindandClaude Opus 4.8	8a2c46f5ea	fix(notes): show the note on a phone — one pane at a time On a phone the note list and the editor stacked in one column, so a tapped note opened below a full-height list, out of sight — "kan vælge en note men kan ikke se indholdet". Now it is master-detail: the list fills the screen until a note is opened, the editor takes over once one is, and an iOS-style "‹ Noter" at the top of the editor goes back. The cards drop their border and corners on one column, where there is nothing beside them. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-09-03 19:07:02 +02:00
Kristian Wind	8d42f34065	Merge pull request #50 from kristianwind/charcoal-apple-colors CI / OpenAPI is valid (push) Successful in 9s Details CI / End-to-end (push) Successful in 8m47s Details CI / Docker image builds (push) Successful in 1m48s Details Release / Build and publish image (push) Failing after 6s Details CI / Go (push) Failing after 14m30s Details Match Charcoal theme to Apple Notes' exact colours	2026-09-03 17:51:16 +02:00
kristianwindandClaude Opus 4.8	905ceebc06	fix(theme): match Charcoal to Apple Notes' sampled colours Kristian sent the exact values; the first Charcoal was a neutral grey guess and missed them. Now: three panel greys, lightest sidebar (#2d3133) to darkest editor (#1e1e1e) with the list (#242b2e) between — the reverse of the usual sunken-is-darkest order, so the editor takes its own --editor-bg rather than sharing the list's surface. The accent is amber: the selected menu item is solid #ffce35 with dark text, a selected note is gold #a78c26 with dark text, and the section headings drop to a quiet grey (#8a8e90). Each per-element colour is a fallback token only Charcoal sets, so every other theme reads through to the shared token unchanged. Verified the computed values land on Kristian's samples exactly. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-09-03 17:42:55 +02:00