From e037f01dc2cc37f77d5e72f7ddd340cb0e4cb19b Mon Sep 17 00:00:00 2001 From: marc Date: Wed, 12 Aug 2026 11:44:15 +0200 Subject: [PATCH] Let a notebook's design be its own MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two things were drawn on every cover regardless of what was chosen, and between them they are most of why a shelf of notebooks looked alike. A 45-degree stripe texture was baked into the cover at 1.5% white. It was meant to be imperceptible; on the darker gradients it bands visibly, and since covers gained patterns of their own it was a second pattern fighting the first. Removed. And the same pair of rings sat in the middle of every one. The mark belongs to the design now — a ring, a square, a diamond, a dot, a cross, an arc, three bars — and the designs whose pattern already fills the face wear nothing at all. Drawn with borders rather than an image, so each takes its cover's own accent and stays sharp at any size. Co-Authored-By: Claude Opus 5 --- frontend/src/ui/NotebookCover.jsx | 131 +++++++++++++++++++++++------- frontend/src/ui/constants.jsx | 23 +++++- 2 files changed, 125 insertions(+), 29 deletions(-) diff --git a/frontend/src/ui/NotebookCover.jsx b/frontend/src/ui/NotebookCover.jsx index 567e37a..d3abe59 100644 --- a/frontend/src/ui/NotebookCover.jsx +++ b/frontend/src/ui/NotebookCover.jsx @@ -1,5 +1,105 @@ import { useState } from "react"; -import { coverBackground, coverStyle } from "./constants.jsx"; +import { coverBackground, coverEmblem, coverStyle } from "./constants.jsx"; + +/** + * The mark in the middle of a cover. + * + * Every notebook used to wear the same pair of rings, whatever cover was + * chosen — which is most of why a shelf of them looked alike. It belongs to the + * design now, and the designs whose pattern already fills the face wear nothing. + * + * Drawn with borders rather than with an image, so it takes the cover's own + * accent colour and stays sharp at any size. + */ +function Emblem({ kind, accent }) { + if (kind === "none") return null; + + const box = { + position: "absolute", + top: 28, + left: "50%", + transform: "translateX(-50%)", + width: 50, + height: 50, + display: "flex", + alignItems: "center", + justifyContent: "center", + }; + const line = `${accent}55`; + const faint = `${accent}33`; + + if (kind === "ring") { + return ( +
+
+
+ ); + } + if (kind === "square") { + return ( +
+
+
+ ); + } + if (kind === "diamond") { + return ( +
+
+
+ ); + } + if (kind === "dot") { + return ( +
+
+
+ ); + } + if (kind === "cross") { + return ( +
+
+
+
+ ); + } + if (kind === "arc") { + return ( +
+
+
+ ); + } + if (kind === "bars") { + return ( +
+ {[18, 30, 22].map((h, i) => ( +
+ ))} +
+ ); + } + return null; +} /* ═══════ NOTEBOOK COVER ═══════ */ export function NotebookCover({ @@ -19,6 +119,7 @@ export function NotebookCover({ // colour, the face from both. const cover = coverStyle(notebook.cover, notebook.coverPattern); const face = coverBackground(notebook.cover, notebook.coverPattern); + const emblem = coverEmblem(notebook.cover, notebook.coverPattern); const [hovered, setHovered] = useState(false); return (