Revision 13 of 16
Spells out the Bulma choice: no second framework, Font Awesome placeholder and not-found icons, an inline SVG hero in Bulma colors, and Bulma's own dark mode.
+7 −7 lines of text vs revision 12 (this site's diff)
This revision also changed the line endings (LF → CRLF); GitHub counts that as every line changed, which is why it reports +268 −268.
| Old | New | Change | Line |
|---|---|---|---|
| @@ -39,7 +39,7 @@ | |||
| 39 | 39 | ||
| 40 | 40 | Use the Node.js runtime, not Edge, for SQLite, sessions, file access, and metadata fetching. | |
| 41 | 41 | ||
| 42 | − | Design system: use Bulma CSS for every screen and fontawesome for icons. | |
| 42 | + | Design system: use Bulma CSS for every screen (layout, navbar, cards, buttons, modals, forms, tags, dropdowns) and Font Awesome for all icons. Do not add a custom design system or a second CSS framework. | |
| 43 | 43 | ||
| 44 | 44 | ## Product | |
| 45 | 45 | ||
| @@ -91,7 +91,7 @@ | |||
| 91 | 91 | 1. H1 (large, **medium weight — not bold**): **Group links, Save & Share them with the world** — the single words "Group", "Save", and "Share" rendered in the primary teal color at the same weight as the rest of the sentence. | |
| 92 | 92 | 2. Paragraph (regular body text): **Add links to a list and share it with one simple URL.** | |
| 93 | 93 | 3. Paragraph (regular body text): **Create a list anonymously or login to save, manage, and edit your lists.** | |
| 94 | − | - Right column: a Postrboard-native hero illustration (lazy loaded, roughly 500×500; in place of the reference app's `banner-logo-large.svg`). Its subject is **three cascading browser-window frames**, each offset down and to the right of the one behind it, alternating light / dark / light window chrome, each with a tab strip and an address bar reading `theurlist.com` and an otherwise empty page — it evokes a shared list opening in any browser. Draw it from Postrboard tokens (surface, border, text, accent colors and radii), keep it quiet, and do not copy the source SVG. | |
| 94 | + | - Right column: an original hero illustration (lazy loaded, roughly 500×500; in place of the reference app's `banner-logo-large.svg`). Its subject is **three cascading browser-window frames**, each offset down and to the right of the one behind it, alternating light / dark / light window chrome, each with a tab strip and an address bar reading `theurlist.com` and an otherwise empty page — it evokes a shared list opening in any browser. Draw it as an inline SVG using Bulma's color palette (background, border, text, and primary colors) with Bulma's default radii, keep it quiet, and do not copy the source SVG. | |
| 95 | 95 | ||
| 96 | 96 | **Bottom section ("Get Started")** — a full-bleed band on a distinct background (the reference renders it as a very wide sheet with a gently rounded top edge rising from the bottom of the page; a full-width band with a subtle rounded or straight top edge is fine). It runs to the bottom of the page, filling the remaining viewport height when the page is shorter than the window. Inside, on the normal content width: | |
| 97 | 97 | ||
| @@ -133,7 +133,7 @@ | |||
| 133 | 133 | - A drag grip icon at the far left, **outside** the card, vertically centered on it. It is the only drag handle. | |
| 134 | 134 | - A delete icon (an "×") at the far right, **outside** the card, vertically centered on it. Clicking it removes the row immediately with **no confirmation**. | |
| 135 | 135 | - Between them, a card (surface with a soft shadow) of uniform height (about 120px in the reference) containing, left to right: | |
| 136 | − | - the 64px link image, vertically centered, or a Postrboard-native placeholder when there is no image. On mobile the 64px image is replaced by a 24px thumbnail sitting inline to the left of the title; | |
| 136 | + | - the 64px link image, vertically centered, or a Font Awesome "link" icon placeholder (centered in a 64px Bulma `image` box) when there is no image. On mobile the 64px image is replaced by a 24px thumbnail sitting inline to the left of the title; | |
| 137 | 137 | - a text column: the **Title** (bold, one line, truncated with an ellipsis), the **Description** (regular, smaller, muted, clamped to about two lines with an ellipsis), and at the bottom the destination **URL** (small text in the link color, one line, truncated with an ellipsis). | |
| 138 | 138 | - While the row's metadata fetch is in flight, a thin progress bar spans the top edge of the card; when the fetch settles it disappears. | |
| 139 | 139 | ||
| @@ -167,7 +167,7 @@ | |||
| 167 | 167 | ||
| 168 | 168 | ## Login and ownership | |
| 169 | 169 | ||
| 170 | − | Show a login modal following the reference app's structure: a heading "Sign in to" with the logo, then three full-width provider buttons styled with Postrboard's components, in this order, each with its provider's icon: | |
| 170 | + | Show a login modal following the reference app's structure: a heading "Sign in to" with the logo, then three full-width Bulma buttons (`button is-fullwidth`), in this order, each with its provider's icon: | |
| 171 | 171 | ||
| 172 | 172 | 1. **"with Twitter/X"** | |
| 173 | 173 | 2. **"with GitHub"** | |
| @@ -184,7 +184,7 @@ | |||
| 184 | 184 | Login required. H2 (large, medium weight, primary color): **"My Lists"**. Then a responsive grid of uniform-height tiles (about 195px in the reference): 1 column on mobile, 2 on tablet, 3 on desktop, 4 on widescreen. | |
| 185 | 185 | ||
| 186 | 186 | - First tile: a dashed-border placeholder tile of the same size as the others, containing a large **+** centered above the text **"Create new list"**; clicking it starts a fresh draft and goes to `/s/new`. | |
| 187 | − | - Per-list tile: a card (surface with a soft shadow) with a primary-colored pill tag reading **"{N} Links"** (e.g. "4 Links") positioned over the tile's top-left edge, straddling the card's top border; a Postrboard-native subtle texture at the tile's top-right corner (in place of the reference app's `bg.png` dots); inside the card, left-aligned, the vanity URL as the title (medium weight, larger) and the description below it in regular text (omitted when empty). The whole tile is clickable (pointer cursor) and loads that list into the editor state, then goes to `/s/edit`. | |
| 187 | + | - Per-list tile: a card (surface with a soft shadow) with a primary-colored pill tag reading **"{N} Links"** (e.g. "4 Links") positioned over the tile's top-left edge, straddling the card's top border; a subtle CSS dot-pattern texture at the tile's top-right corner (in place of the reference app's `bg.png` dots); inside the card, left-aligned, the vanity URL as the title (medium weight, larger) and the description below it in regular text (omitted when empty). The whole tile is clickable (pointer cursor) and loads that list into the editor state, then goes to `/s/edit`. | |
| 188 | 188 | - While loading: 3 skeleton tiles. If the request fails, show an empty grid without error text. | |
| 189 | 189 | ||
| 190 | 190 | There is **no Deleted section and no Restore action**. | |
| @@ -209,11 +209,11 @@ | |||
| 209 | 209 | - List view: link cards in stored order, with the same card anatomy as the editor rows (64px image or placeholder on the left, bold title, description, small destination URL) but read-only — no grip, no delete, no editing. Each card is itself a link opening the destination in a new tab (`rel="noopener noreferrer"`); the title falls back to the destination URL; the description is omitted when empty. | |
| 210 | 210 | - Below the cards, a link **"Report this list"** that opens a mailto to `support@theurlist.com` with subject "LinkBundle Flagged" and the list URL in the body. | |
| 211 | 211 | ||
| 212 | − | When the alias does not resolve to an active list, show the not-found state instead: a Postrboard-native "not found" illustration or icon (in place of the reference app's mascot image), H2 **"We couldn't find that Urlist"**, and H3 **"But don't be sad! That means {vanity} is still available."** where the alias is a link. Clicking that alias starts a fresh draft pre-filled with it and goes to `/s/new`. There is no tombstone or "deleted" state. | |
| 212 | + | When the alias does not resolve to an active list, show the not-found state instead: a large Font Awesome "sad face" or "search" icon (in place of the reference app's mascot image), H2 **"We couldn't find that Urlist"**, and H3 **"But don't be sad! That means {vanity} is still available."** where the alias is a link. Clicking that alias starts a fresh draft pre-filled with it and goes to `/s/new`. There is no tombstone or "deleted" state. | |
| 213 | 213 | ||
| 214 | 214 | ## Theme, responsive UI, and accessibility | |
| 215 | 215 | ||
| 216 | − | Provide a theme control in the navbar: a hoverable dropdown whose button shows the currently active theme's icon, with items (icon + label, checkmark on the active one): **Light**, **Dark**, **System**. Persist the choice (e.g. `localStorage["preferredTheme"]`, default `"system"`), apply it via a `data-theme` attribute on `<html>`, and set it with an inline script before first paint to avoid a wrong-theme flash. System follows the OS preference. Use Postrboard's own light/dark logo or brand-mark variants (not the reference app's `logo-dark.svg`). | |
| 216 | + | Provide a theme control in the navbar: a hoverable dropdown whose button shows the currently active theme's icon, with items (icon + label, checkmark on the active one): **Light**, **Dark**, **System**. Persist the choice (e.g. `localStorage["preferredTheme"]`, default `"system"`), apply it via a `data-theme` attribute on `<html>`, and set it with an inline script before first paint to avoid a wrong-theme flash. System follows the OS preference. Use Bulma's built-in dark mode (`data-theme="dark"` / `data-theme="light"`) rather than hand-rolled theme CSS, and provide light and dark logo variants of your own (not the reference app's `logo-dark.svg`). | |
| 217 | 217 | ||
| 218 | 218 | Support current Chromium from desktop down to 320 CSS pixels with no page-level horizontal scrolling; the editor, modals, and public page must remain usable. | |
| 219 | 219 | ||