Gem: Floral Triptych — pink outset frame / CSS-tab porch / webring stack
Gem: Floral Triptych — pink outset frame / CSS-tab porch / webring stack
Section titled “Gem: Floral Triptych — pink outset frame / CSS-tab porch / webring stack”Why it fits the braid
Section titled “Why it fits the braid”Floral Triptych (floraltriptych.nekoweb.org, by ren) is a hand-coded Nekoweb porch, “v2 of my very first site made from scratch”: one fixed white frame floating on a painted plum-blossom branch wallpaper (plumbg10.png), under a matching sakura banner, pink outset pill nav, blinkies, a footer marquee of 88×31 buttons, a chibi mascot breaking the frame corner, shrines (Limbus Company’s Hohenheim, Stein), a diary, and a stacked column of webring widgets (Nekoweb ring, Vocaloid/UTAU vocaring, self-insert, Yume, transmasc, ADHD rings). Strong Nekoweb and plain HTML · Y2K · 88x31 fit, with a vocaloid/anime thread toward Nightcore packaging. It’s floral-sweet rather than sage, but the soft-garden temperament is close to Requiem Garden.
Morning dig: rotated off Neocities Frutiger Aero to Nekoweb Districts (Residential + Akiba lists).
Layout / craft patterns worth stealing
Section titled “Layout / craft patterns worth stealing”- Mascot breaks the frame: the chibi avatar overlaps the header and the frame’s top-left corner, so the character sits on the window instead of inside a box. It’s the same trick as GeoCities pagedolls, done with one positioned PNG.
- Painted nature ground: a soft ink-wash blossom branch behind the white card is the cheapest way to get garden calm. A sage or eucalyptus branch would carry the same move for Requiem Garden.
- One fixed “room” on wallpaper:
.containeris a 60rem × 45rem white card with3px outsetpink border + 10px radius, centered by flex over a fixed tiled background. The page never scrolls, only panels inside it do. It’s a postcard, not a feed. - CSS grid triptych:
grid-template-areas: header / leftbar article rightbar / footerat0.5fr 1.75fr 0.5fr. The name is literally the layout: three panels like a folding altar. - No-JS tabs via
section:target: home / webmaster / diary / shrines / links / joined / extra are#anchors, and only the targeted<section>shows. Single HTML file, deep-linkable, zero framework. - Bevelled gradient pills: nav
li=linear-gradient(#fff → #fad4db)+2px outset #ff8097+ 5px radius. That’s Win98 bevel logic repainted in candy, a cheap way to get the “physical button” feel. - Two-accent palette discipline: pinks (
#e88e9e,#f590a8,#ff85c0,#fce7ea) plus a single mint/teal accent#80beb9, with::selectionand custom scrollbars tinted to match. Swap pink→sage and it maps straight onto Requiem Garden tokens. - 88×31 footer marquee with hover scale: the footer row is a CSS keyframe
scroll-l2rstrip of buttons and stamps that grow on hover, instead of a deprecated<marquee>. The links tab adds a ‘neighbors’ wall (every follower who has a button) plus a copy-paste<a><img>snippet box for ren’s own button. - Webring column as identity: five-plus ring widgets stacked in the right bar read as “which neighborhoods I belong to”. Membership is the sidebar, not an afterthought footer.
- Live small-web toys: dimden moon widget, status.cafe mood, Nekoweb follow iframe, local-time clock, oneko cat chasing the cursor, custom
.curcursor, “cake cat” sticker. Each one is tiny, and together they make the porch feel inhabited. - Dated changelog as warmth: the updates box is honest and chatty (“fixed my site box… can’t believe i took so long”). Voice is the craft.
What not to copy (for product)
Section titled “What not to copy (for product)”- Fixed 60rem × 45rem frame with a hard-coded
height: 514pxrightbar. It breaks on small screens; steal the room metaphor, but let it reflow to a stacked column on mobile. - Six third-party webring scripts + iframes on one page means the mood depends on other people’s uptime (the author already lost a custom domain’s ring links). Self-host what you can and lazy-load the rest.
background-size: no-repeat(invalid value), assortedbackground: (#666666)typos. Hand-coded charm, but don’t inherit the bugs.- Fandom-specific shrine content and personal-life detail belong to ren. Take the structure, not the stickers.
Reference images
Section titled “Reference images”Home (plum-blossom wallpaper · sakura banner · mascot on the frame · pill nav · status + stats rail · 88×31 footer marquee):
Links tab (button link-code box · ‘my cool friends’ · ‘neighbors’ 88×31 wall from followers):
Shrines tab (portrait-card shrine index inside the same frame, scrolling panel only):
