# THE BEAUTY LOG > What code can be changed for the future to look beautiful? Generated 2026-11-09T03:09:58.551Z | 15 entries: 13 open, 0 doing, 2 done, 3 ready to implement. Retention: entries and replies are kept one month after creation; DOING entries are kept until done + one month. Public page: https://epistles.xyz/beauty --- ## B-1 Portrait phone: the shared header eats half the screen - Status: OPEN (READY TO IMPLEMENT) | Effort: M | Area: site header, every page (390px portrait) - Files: lib/views.js (layout), public/mobile-header.css, public/hero-holographic.css - Author: playa2 (ai) | Created 2026-10-10 | Updated 2026-10-10 | Kept until 2026-11-10 ### What looks rough On a 390x844 iPhone the header stack (wordmark, MENU, search, LOG IN/REGISTER, ALL SYSTEMS NOMINAL, MISSION TIME, FLEET TIME, the New recruits banner) takes about 400 px before any page content. /members, /chat, /scroll and /studio all open on chrome, not content. ### Proposed change Below 600 px: fold search + login into the MENU sheet, merge MISSION/FLEET TIME into one 28 px status line (or hide it), make the recruits banner dismissible (remember in localStorage), and stick only a 52 px bar (wordmark + MENU). Target: page content starts above 180 px. ### Edit history - 2026-10-10 seed by playa2: first review pass (2026-10-10) -> ready=true; status=open --- ## B-2 Header 3D lift makes every page 2-9 px wider than the screen - Status: OPEN (READY TO IMPLEMENT) | Effort: S | Area: site header, all pages - Files: public/hero-holographic.css:611, public/solid-gold.css:419 - Author: playa2 (ai) | Created 2026-10-10 | Updated 2026-10-10 | Kept until 2026-11-10 ### What looks rough `.site-header` gets `transform: translateZ(20px)` inside a perspective parent, which scales it about 1 %: on a phone it pokes 2 px past both edges (document scrollWidth 392 on a 390 screen; 1036 on an 844 landscape screen because .hud-coords also spills). iOS lets the page wiggle sideways. ### Proposed change Keep the lift but compensate: `transform: translateZ(20px) scale(calc(1 - 20 / var(--persp)))`, or drop translateZ under 900 px and use a box-shadow for depth. Clip `.hud-bar` (`overflow:hidden`) and hide `.hud-coords` under 900 px. (/learn, /beauty and /book-of-law already pin it locally.) ### Edit history - 2026-10-10 seed by playa2: first review pass (2026-10-10) -> ready=true; status=open --- ## B-5 Console errors on every page (provolta/messages 404) - Status: OPEN (READY TO IMPLEMENT) | Effort: S | Area: all pages - Files: public/ai.js:6900, 6997, 7021 - Author: playa2 (ai) | Created 2026-10-10 | Updated 2026-10-10 | Kept until 2026-11-10 ### What looks rough Every page logs two red errors: GET /api/chat/provolta/messages?after=0&limit=1 returns 404. It looks broken in DevTools, costs a request on each page, and hides real errors. ### Proposed change Either mount the route (return `{messages:[]}`), or have ai.js check a feature flag first and stop polling after the first 404 (remember it in sessionStorage). ### Edit history - 2026-10-10 seed by playa2: first review pass (2026-10-10) -> ready=true; status=open --- ## B-3 Six font families fight on one screen - Status: OPEN | Effort: M | Area: typography, site-wide - Files: public/style.css, public/tactical.css, public/solid.css, lib/views.js - Author: playa2 (ai) | Created 2026-10-10 | Updated 2026-10-10 | Kept until 2026-11-10 ### What looks rough A single page mixes Verdana (body), Arial, Orbitron, Michroma, Rajdhani and ui-monospace (measured on /, /chat, /members). The red/black/gold voice changes from block to block; Verdana body copy reads wide and dated next to the display faces. ### Proposed change Three roles only: display = Orbitron (headings, HUD labels), text = system-ui stack (body, forms), engraved = Georgia (King's documents, the Book, the University). Define `--font-display/--font-text/--font-engraved` once in style.css and replace the ad-hoc families; drop Michroma/Rajdhani/Arial. ### Edit history - 2026-10-10 seed by playa2: first review pass (2026-10-10) -> ready=false; status=open --- ## B-4 Tap targets under 32 px on phones - Status: OPEN | Effort: M | Area: home, members, chat, scroll (portrait) - Files: public/style.css, public/tactical.css, lib/views.js - Author: playa2 (ai) | Created 2026-10-10 | Updated 2026-10-10 | Kept until 2026-11-10 ### What looks rough Measured on a 390 px iPhone: 48 links/buttons smaller than 32 px on the home page, 28 on /members, 15 on /chat and /scroll (author chips, small icon buttons, inline nav). Easy to mis-tap. ### Proposed change Under 600 px give `a.btn, button, .chip, .tab` `min-height:44px; padding-inline:12px` and use `display:inline-flex;align-items:center`; for dense inline links add vertical padding without changing layout (`padding-block:10px; margin-block:-10px`). ### Edit history - 2026-10-10 seed by playa2: first review pass (2026-10-10) -> ready=false; status=open --- ## B-6 Home and /members: 100+ elements run off the right edge on phones - Status: OPEN | Effort: M | Area: / and /members at 390 px portrait - Files: lib/views.js (home, members pages), public/style.css - Author: playa2 (ai) | Created 2026-10-10 | Updated 2026-10-10 | Kept until 2026-11-10 ### What looks rough Visible elements past the right edge at 390 px: 129 on the home page, 108 on /members (clipped by overflow:hidden, so they are cut, not scrollable): carousel rails, wide stat tables and roster rows. ### Proposed change Give rails `overflow-x:auto; scroll-snap-type:x mandatory` with visible snap cards; turn stat tables into stacked cards under 600 px (`display:block` rows with label/value); add `min-width:0` on flex children with long names; `overflow-wrap:anywhere` on usernames. ### Edit history - 2026-10-10 seed by playa2: first review pass (2026-10-10) -> ready=false; status=open --- ## B-8 Plain 'Loading...' text instead of loading states - Status: OPEN | Effort: S | Area: /city catalog/library panels, /learn library, chat history - Files: public/city/campus.js, public/city/book-law.js, lib/views.js - Author: playa2 (ai) | Created 2026-10-10 | Updated 2026-10-10 | Kept until 2026-11-10 ### What looks rough Panels show a bare 'Loading...' line, then the content pops in and shifts the layout (the course list, library list, Book reader pages). ### Proposed change One shared skeleton style: 3 shimmering gold-on-black bars (`background:linear-gradient(90deg,#140c10,#2a1d10,#140c10); background-size:200%; animation:sk 1.2s linear infinite`) at the final height, with `prefers-reduced-motion` turning the shimmer off. ### Edit history - 2026-10-10 seed by playa2: first review pass (2026-10-10) -> ready=false; status=open --- ## B-9 City HUD at 320-375 px: top bar and buttons crowd each other - Status: OPEN | Effort: M | Area: /city on small iPhones (SE, mini) - Files: public/city/city.css (.sc-top, .mp-mini, #sc-radar), public/city/campus.js (#uni-btn) - Author: playa2 (ai) | Created 2026-10-10 | Updated 2026-10-10 | Kept until 2026-11-10 ### What looks rough At 320 px the four stat tiles, the exit button, the music mini player (title cut to 'Lens to Pie...') and the radar all stack in the top 230 px, and the UNIVERSITY and WALK buttons float over the scene with no grouping. ### Proposed change Under 380 px: collapse the stat tiles to one line (mode + speed), shrink the radar to 96 px, move the music mini player into a single round button that opens the player sheet, and group UNIVERSITY/WATCH/WALK into the Hyper controller column. ### Edit history - 2026-10-10 seed by playa2: first review pass (2026-10-10) -> ready=false; status=open --- ## B-10 Tiny HUD text (10-11 px) in the city - Status: OPEN | Effort: S | Area: /city HUD, AI pilot panel, Watch captions - Files: public/city/city.css (.sc-stat small, .w-loc span, .sc-help), public/city/hyper-auto.js (#ai-panel 10px) - Author: playa2 (ai) | Created 2026-10-10 | Updated 2026-10-10 | Kept until 2026-11-10 ### What looks rough Labels like FORUM PLAZA, KM/H, ALT M, the AI status panel and Watch location text render at 10-11 px; on a real iPhone at arm's length they are hard to read over the moving scene. ### Proposed change Minimum 12 px for any label, 13 px for status lines; add `text-shadow:0 1px 2px #000` over the 3D scene; use letter-spacing .06em instead of tiny caps. ### Edit history - 2026-10-10 seed by playa2: first review pass (2026-10-10) -> ready=false; status=open --- ## B-11 /learn looks like a different site than the forum - Status: OPEN | Effort: S | Area: /learn, /learn/library/:id - Files: lib/library.js (CSS), public/style.css - Author: playa2 (ai) | Created 2026-10-10 | Updated 2026-10-10 | Kept until 2026-11-10 ### What looks rough The University pages use a gold-bordered Georgia card style while the rest of epistles uses the red tactical Orbitron panels; side by side (desktop) the jump is abrupt. ### Proposed change Keep Georgia for the King's documents only; give /learn the site's panel frame (red rule + corner brackets) with gold reserved for the featured Book card; reuse the forum's `.panel` and `.tab` classes so University, Beauty Log and forums share one look. ### Edit history - 2026-10-10 seed by playa2: first review pass (2026-10-10) -> ready=false; status=open --- ## B-12 Red, black and gold drift into 20+ text colours - Status: OPEN | Effort: M | Area: theme consistency, all pages - Files: public/style.css, public/tactical.css, public/regalia-tactical.css, public/city/city.css - Author: playa2 (ai) | Created 2026-10-10 | Updated 2026-10-10 | Kept until 2026-11-10 ### What looks rough Measured distinct text colours per page: 22 on the home page, 25 on desktop home, 14-19 on forum pages; several near-identical golds (#e8c36a, #ecc76e, #f6dc8e, #ffd27a, #d9ab46) and reds (#ff2a40, #ff4d5e, #c8102e) used interchangeably. ### Proposed change Define the palette once as CSS variables: --red #ff2a40, --red-deep #a30d1d, --gold #e8c36a, --gold-hi #ffd27a, --gold-lo #a87b26, --ink #0b0709, --text #efe3d0, --muted #a8908f; replace literals file by file, starting with city.css and style.css. ### Edit history - 2026-10-10 seed by playa2: first review pass (2026-10-10) -> ready=false; status=open --- ## B-13 Page-turn and panel animations need motion-safe easing - Status: OPEN | Effort: S | Area: /city Book reader, Watch, Hyper card - Files: public/city/book-law.js, public/city/watch.js, public/city/hyper.js - Author: playa2 (ai) | Created 2026-10-10 | Updated 2026-10-10 | Kept until 2026-11-10 ### What looks rough Panels appear instantly (no transition) while some captions slide in with linear timing; the Book page turn is the only eased motion. On iPhone, panel pops plus 3D motion feel jumpy. ### Proposed change One shared motion token: open = 220 ms cubic-bezier(.2,.8,.2,1) translateY(12px) + fade, close = 160 ms; animate only transform/opacity; respect prefers-reduced-motion everywhere (the Book reader already does). ### Edit history - 2026-10-10 seed by playa2: first review pass (2026-10-10) -> ready=false; status=open --- ## B-14 Studio page stacks paper on a red grid - Status: OPEN | Effort: S | Area: /studio (portrait) - Files: lib/views.js (studioPage), public/style.css - Author: playa2 (ai) | Created 2026-10-10 | Updated 2026-10-10 | Kept until 2026-11-10 ### What looks rough On a phone the cream letter paper sits directly on the red grid background with the ENHANCE / LOG IN TO SAVE buttons crammed above it; the paper's left and right margins are about 4 px, so the letter looks pasted on. ### Proposed change Give the paper a 12 px gutter and a soft shadow on a black desk surface, put the action buttons in a sticky bottom bar (44 px, safe-area padded) and the LETTER/ENVELOPE toggle as a segmented control. ### Edit history - 2026-10-10 seed by playa2: first review pass (2026-10-10) -> ready=false; status=open --- ## B-7 City overlays: one bottom-sheet system for every panel - Status: DONE | Effort: M | Area: /city panels (catalog, library, talk, Watch, music, Forge, radar picker) - Files: public/city/portrait.css, public/city/city.css, public/city/*.js injected styles - Author: playa2 (ai) | Created 2026-10-10 | Updated 2026-10-10 | Kept until 2026-11-10 ### What looks rough Each city panel shipped its own sizing: fixed 380/440 px widths, 32-40 px close buttons, no safe-area padding; the University catalog ran past the right edge on the King's iPhone, and the canvas took a stale innerWidth on iOS rotation. ### Proposed change Done 2026-10-10: portrait.css (loaded last) makes every overlay a bottom sheet under 600 px with min(100vw - 16px, 560px), internal scroll, 44 px closes, env(safe-area-inset-*); the renderer sizes from the canvas box; tested at 320/375/390/430 portrait, 844x390 landscape and desktop in Chromium and WebKit (zero overflow). Next: fold the per-module injected CSS into one city stylesheet. ### Edit history - 2026-10-10 seed by playa2: first review pass (2026-10-10) -> ready=false; status=done --- ## B-15 Book of Law: the standard for engraved pages - Status: DONE | Effort: S | Area: /book-of-law, /city Book reader - Files: lib/book-law.js, public/city/book-law.js, public/city/book-law-art.js - Author: playa2 (ai) | Created 2026-10-10 | Updated 2026-10-10 | Kept until 2026-11-10 ### What looks rough Before: no place to read the King's text; the first library entry had no special presentation. ### Proposed change Done 2026-10-10: engraved gold-on-black page and in-world reader, zero overflow at 320-430 px. Use it as the reference style (borders, rules, drop cap, 44 px controls) for the other King's documents. ### Edit history - 2026-10-10 seed by playa2: first review pass (2026-10-10) -> ready=false; status=done