Monorepo for Aesthetic.Computer
aesthetic.computer
1# Keeps Page Redesign — kidlisp.com/keeps
2
3**Date:** 2026.02.06
4**Status:** In Progress
5
6## Overview
7
8Redesign `keeps.html` to replace the plain `| keeps` header with an illustrated SVG castle hero showing KidLisp `$codes` streaming out of it (like treasure from a keep/castle). Upgrade the prose section with colored-dot Aesthetic.Computer hyperlinks (from `give.aesthetic.computer` style), and add `/at` page design patterns: syntax-highlighted code previews with webp thumbnails, and improved modal popover behavior.
9
10---
11
12## 1. SVG Castle Illustration (Hero)
13
14Replace the current `.keeps-about` text block with a full-width illustrated header featuring:
15
16- **Inline SVG castle/keep** — a stylized pixel-art-meets-minimal castle in the AC pink palette
17- **$codes streaming out** — animated `$code` labels (`$39j`, `$a1b`, `$zyx` etc.) floating/rising from the castle turrets, color-coded per the KidLisp rainbow palette
18- Castle sits centered above the prose; the "keeps" metaphor is visual, not textual
19- Light/dark mode aware using CSS variables
20
21## 2. Colored-Dot Aesthetic Computer Links (from give)
22
23Every "Aesthetic.Computer" hyperlink in the prose gets the `.logo-dot` treatment from `give.aesthetic.computer/index.html`:
24
25```html
26<a href="https://aesthetic.computer">Aesthetic<span class="ac-dot">.</span>Computer</a>
27```
28
29With `.ac-dot { color: var(--ac-purple); }` — the pink/cyan dot between "Aesthetic" and "Computer".
30
31## 3. /at Page Design Patterns
32
33Borrow from `at/user-page.html`:
34
35- **Syntax-highlighted source previews** on cards — colored line numbers (6-color cycle), scrolling `source-preview` boxes
36- **WebP thumbnail previews** — each card gets an `<img>` from `oven.aesthetic.computer/grab/webp/` for visual preview of the $code
37- **Modal popover** — clicking a card opens a full modal with:
38 - Large iframe preview (from aesthetic.computer/$code)
39 - Syntax-highlighted source sidebar
40 - Action buttons (Edit, HTML, Keep)
41 - Close on Escape, backdrop click, or ✕ button
42 - Smooth fade/scale-in animation
43
44## 4. Card Enhancements
45
46- Add webp preview image to each card (thumbnail from oven)
47- Syntax highlight the source code snippet with the rainbow line-number palette
48- Modal click-through from card → full preview popover
49
50## 5. Implementation Checklist
51
52- [x] Write plan
53- [ ] Add inline SVG castle with animated $codes
54- [ ] Add `.ac-dot` colored-dot link style
55- [ ] Update prose with colored-dot links
56- [ ] Add webp preview images to cards
57- [ ] Add syntax-highlighted source with colored line numbers
58- [ ] Improve modal with fade/scale animation from /at pages
59- [ ] Test light/dark mode