From 90042156c8538cf02efe77a09d0fe671c50e4ab2 Mon Sep 17 00:00:00 2001
From: dax <me@dax.ist>
Date: Tue, 4 Aug 2026 05:21:18 +0000
Subject: pathways: photo viewer over the PhotoPrism library

Groups photos into paths by shared label, keyword, camera, lens and
dominant colour. Node server.mjs (no build) reads the MariaDB
photoprism database read-only; public/ is a zero-dependency front end
with progressive reveal, a lightbox with connection chips, and a
dominant-colour swatch under every thumbnail.
---
 public/app.css | 150 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 150 insertions(+)
 create mode 100644 public/app.css

(limited to 'public/app.css')

diff --git a/public/app.css b/public/app.css
new file mode 100644
index 0000000..b72761c
--- /dev/null
+++ b/public/app.css
@@ -0,0 +1,150 @@
+:root {
+  --ink: #111;
+  --paper: #faf8f5;
+  --line: #ddd6cc;
+  --accent: #b3000a;
+  --mono: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
+  --serif: Georgia, "Times New Roman", serif;
+}
+* { box-sizing: border-box; }
+html { background: var(--paper); }
+body {
+  margin: 0;
+  color: var(--ink);
+  font-family: var(--mono);
+  font-size: 14px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+.mast {
+  max-width: 980px;
+  margin: 0 auto;
+  padding: 48px 24px 8px;
+}
+.mast h1 {
+  font-family: var(--serif);
+  font-weight: 400;
+  font-size: 44px;
+  letter-spacing: -0.02em;
+  margin: 0 0 4px;
+}
+.mast h1 .dot { color: var(--accent); }
+.tag { margin: 0 0 22px; color: #555; font-size: 13px; }
+.modes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
+.modes button {
+  font: inherit;
+  background: none;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 5px 14px;
+  color: var(--ink);
+  cursor: pointer;
+}
+.modes button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
+.status { margin: 0; color: #888; font-size: 12px; min-height: 18px; }
+
+.stream { max-width: 980px; margin: 0 auto; padding: 12px 24px 40px; }
+
+.thread { margin: 34px 0 0; }
+.thread-head {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+.thread-head h2 {
+  font-family: var(--serif);
+  font-weight: 400;
+  font-size: 22px;
+  margin: 0;
+}
+.thread-head .count { color: var(--accent); font-size: 12px; }
+.strip {
+  display: flex;
+  gap: 6px;
+  overflow-x: auto;
+  padding-bottom: 8px;
+  scrollbar-width: thin;
+}
+.strip a { flex: 0 0 auto; display: block; }
+.strip img {
+  display: block;
+  width: 140px;
+  height: 140px;
+  object-fit: cover;
+  border-radius: 3px;
+  background: #eee;
+  transition: transform 120ms ease;
+}
+.strip a:hover img { transform: scale(1.03); }
+.swatch {
+  display: block;
+  height: 3px;
+  background: #ccc;
+  border-radius: 0 0 3px 3px;
+  margin-top: 2px;
+}
+
+.lightbox {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.82);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 50;
+}
+.lightbox[hidden] { display: none; }
+.lightbox-inner {
+  display: flex;
+  gap: 24px;
+  max-width: 1180px;
+  width: calc(100% - 40px);
+  background: var(--paper);
+  border-radius: 4px;
+  padding: 18px;
+  position: relative;
+  align-items: flex-start;
+}
+.lightbox-inner img {
+  max-width: min(760px, 72%);
+  max-height: 82vh;
+  object-fit: contain;
+  border-radius: 2px;
+  background: #000;
+}
+.lightbox-side { flex: 1; min-width: 220px; padding-right: 30px; }
+.lightbox-side h2 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 0 0 4px; }
+.dim { color: #666; }
+.conns { margin-top: 16px; }
+.conns h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: #888; margin: 0 0 8px; }
+.conns .chip {
+  display: inline-block;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 4px 12px;
+  margin: 0 6px 6px 0;
+  font-size: 12px;
+  cursor: pointer;
+}
+.conns .chip:hover { border-color: var(--accent); color: var(--accent); }
+.conns .chip b { color: var(--accent); font-weight: 600; }
+.close {
+  position: absolute;
+  top: 8px;
+  right: 12px;
+  border: none;
+  background: none;
+  font-size: 26px;
+  cursor: pointer;
+  color: #555;
+}
+.close:hover { color: var(--ink); }
+
+.foot {
+  max-width: 980px;
+  margin: 0 auto;
+  padding: 10px 24px 40px;
+  color: #aaa;
+  font-size: 11px;
+}
-- 
cgit v1.3.1