ROFL Design System sections
03 / LAYOUTS
Page layouts with screenshots, live examples, and reuse guidance.
Agent Instructions / layouts
You are choosing or extending a kirupa.com page layout. Read /design/layouts.json and the relevant record in /design/sections/layouts.md. Reuse its real source page, regions, navigation, shared includes, and responsive rules; subject or color changes do not create a new layout family. Current articles use the native tutorial shell. Specialized tools and spatial applications have separate requirements. Archived content may use the current shell; legacy shells and the Discourse/Substack companion sites are explicitly labeled and are not new-page templates. Screenshots are fixed captures with recorded appearance, viewport, date, URL, and scroll state. Never pretend to restyle them with CSS filters. Keep capture selection local and preserve full-size image access. Update design/layouts.source.json, run tools/capture_design_layouts.mjs for changed capture definitions, then build the design system. Do not submit forms, quiz answers, chat messages, subscriptions, or plot claims during capture, and never capture private account or visitor data. Deployment requires separate authorization. Follow WCAG 2.2 AA for new or changed content: semantic HTML, keyboard access, visible focus, readable contrast in every theme, text alternatives, labeled controls, and explicit errors. Support zoom/reflow, respect reduced motion, and keep sound optional. Read /design/sections/accessibility.md for acceptance checks. Report unresolved barriers; automated checks alone do not establish conformance.
26 layout references / 9 families / 61 captures
Layout records / Capture metadata
Find a layout
Home and learning
Directories and reference
Tools and applications
Archive content and legacy shells
Companion sites
Homepage
Current shell / home
The main entry point, with a welcome feature and the latest articles, newsletter issues, and interviews.
The screenshot could not load. Open the live example or the full-size image below.
- Regions
- Shared site header and theme controls; Centered welcome feature; Latest-content groups; Shared newsletter and footer.
- Reuse
- Use for the site front door. Section indexes should use the topic or reference-directory layout instead of copying the welcome feature.
- Responsive
- The content groups reflow into a narrow column. The desktop capture is 1600px wide; narrower intermediate widths can reserve space for the shared rail even when this page has no topic links.
Sources and capture links
index.htmlssi/newDesign/src/kirupa.cssssi/newDesign/src/footer.shtml- Desktop / Captured page / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / 2026-10-21
- Phone / Captured page / Pixel / Blue / Light / 390 x 844 CSS px / page top / 2026-10-21
- Shared footer / Captured page / Pixel / Blue / Light / 1600 x 1200 CSS px / scrolled 1892px / 2026-10-21
Tutorial landing
Current shell / directory
The cross-topic learning hub, with category links followed by recent content.
The screenshot could not load. Open the live example or the full-size image below.
- Regions
- Shared header; Section title and introduction; Two-column Learning Categories list; Latest-content section; Optional wide-screen forum rail.
- Reuse
- Use for a broad entry point spanning several subjects. Keep individual lessons in their topic index.
- Responsive
- The shared .row/.column lists stack below 800px. The right-hand forum rail is omitted at narrower widths; the header uses its compact navigation.
Sources and capture links
learn/index.htmssi/newDesign/src/kirupa.cssssi/newDesign/latest.shtml- Desktop / Captured page / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / 2026-10-21
- Phone / Captured page / Pixel / Blue / Light / 390 x 844 CSS px / page top / 2026-10-21
Topic index
Current shell / directory
A subject's lessons grouped by learning stage or topic.
The screenshot could not load. Open the live example or the full-size image below.
- Regions
- Section title and introduction; Named topic groups; Icon-led article links; Shared shell and optional forum rail.
- Reuse
- Use for subject indexes such as data structures, JavaScript, or the modernized Lab landing. Preserve the existing articleList links and group hierarchy.
- Responsive
- The reading region narrows with the shared shell. Lists remain in document order; optional desktop rails disappear instead of becoming additional content columns.
Sources and capture links
data_structures_algorithms/index.htmjavascript_basics/index.htmssi/newDesign/src/kirupa.csshttps://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/index.htm- Desktop / Captured page / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / 2026-10-21
- Phone / Captured page / Pixel / Blue / Light / 390 x 844 CSS px / scrolled 734px / 2026-10-21
Tutorial article
Current shell / article
The standard reading layout for explanations, code, diagrams, and embedded examples.
The screenshot could not load. Open the live example or the full-size image below.
- Regions
- Scrollable topic rail; Article title, byline, and Filed under metadata; Reading column with media and code; Article navigation and footer; Optional wide-screen forum rail.
- Reuse
- Start from an adjacent current tutorial. Keep the SSI head/header/footer, tutorialInformation, authorText, tutorialInfo, and topic navigation. About pages and MCP documentation also use this reading structure.
- Responsive
- The native rail hides at 1420px and the reading region becomes one column at 1200px. Images shrink within the column and previous/next links stack. Preserve contained code scrolling.
Sources and capture links
html5/building_your_first_web_page.htmssi/newDesign/left_js.shtmlssi/newDesign/src/kirupa.cssssi/kirupa_sig.shtmlmcp/index.php- Desktop / Captured page / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / 2026-10-21
- Phone / Captured page / Pixel / Blue / Light / 390 x 844 CSS px / page top / 2026-10-21
Reference directory
Current shell / directory
A section directory with descriptive rows and direct links to agent-readable documentation.
The screenshot could not load. Open the live example or the full-size image below.
- Regions
- Section rail; Native title and metadata; Agent entry links; Icon/title and description rows; Previous/next navigation.
- Reuse
- Use for a documentation index whose entries need short explanations. Keep section links and Markdown/JSON discovery generated from the same source.
- Responsive
- At 600px the title/icon and description in each row stack. The Design section adds a collapsed section list when its native rail is unavailable.
Sources and capture links
design/system.source.jsondesign/template.htmdesign/design.csstools/build_design_system.mjs- Desktop / Captured page / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / 2026-10-21
- Directory rows / Captured page / Pixel / Blue / Light / 1600 x 1200 CSS px / scrolled 1085px / 2026-10-21
- Phone / Captured page / Pixel / Blue / Light / 390 x 844 CSS px / scrolled 1374px / 2026-10-21
Reference catalog
Current shell / article
A reference article containing indexed specimens, local controls, and source or markup disclosures.
The screenshot could not load. Open the live example or the full-size image below.
- Regions
- Documentation rail; Native title and reference copy; Independently controlled specimens; Catalog index; Source and usage disclosures.
- Reuse
- Use the Design generator and catalog data. This is an article-body variant; do not replace the shared shell with an application dashboard.
- Responsive
- Controls wrap and preview frames fit the reading column. Long code stays in its own scroll container; the narrow page exposes the section list above the article.
Sources and capture links
design/components.source.jsondesign/design.jsdesign/design.csstools/build_design_system.mjs- Desktop / Captured page / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / 2026-10-21
- Local specimen / Captured page / Pixel / Blue / Light / 1600 x 1200 CSS px / scrolled 1450px / 2026-10-21
- Phone / Captured page / Pixel / Blue / Light / 390 x 844 CSS px / scrolled 1956px / 2026-10-21
Interview catalog
Current shell / directory
A visual interview library with current episodes and an older interview archive.
The screenshot could not load. Open the live example or the full-size image below.
- Regions
- Interview rail; Section introduction; Episode thumbnail grid; Classic interview archive; Shared footer.
- Reuse
- Use for an episode collection. Keep the cards linked to full episode pages and retain the archive as a separate group.
- Responsive
- The card grid reduces its columns as the content region narrows. The topic rail is removed by the shared shell's smaller-screen rules.
Sources and capture links
podcast/index.htmssi/newDesign/left_podcast.shtmlinterviews/interviews.cssssi/newDesign/src/kirupa.css- Desktop / Captured page / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / 2026-10-21
- Phone / Captured page / Pixel / Blue / Light / 390 x 844 CSS px / scrolled 908px / 2026-10-21
Interview episode
Current shell / article
A media-led article with a conversation summary, text-only chapter bands, and a speaker-labeled transcript.
The screenshot could not load. Open the live example or the full-size image below.
- Regions
- Interview rail and article title; Guest introduction and media; Chapter bands and playback links; Speaker portraits, timestamp pills, and transcript turns; Related navigation.
- Reuse
- Use the podcast renderer and episode data. Keep chapter times linked to the recording and distinguish the transcript from editorial summary.
- Responsive
- Media follows the reading-column width. Chapter bands are text only and span the transcript column at every width. Speaker headers wrap; the shared interview rail disappears on narrow screens.
Sources and capture links
podcast/amit_chopra_life_after_nine_to_five.htmssi/newDesign/src/kirupa.cssssi/newDesign/left_podcast.shtml- Desktop / Captured page / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / 2026-11-06
- Media and summary / Captured page / Pixel / Blue / Light / 1600 x 1200 CSS px / scrolled 1341px / 2026-11-06
- Chapter band / Captured page / Pixel / Blue / Light / 1600 x 1200 CSS px / scrolled 6462px / 2026-11-06
- Transcript / Captured page / Pixel / Blue / Light / 1600 x 1200 CSS px / scrolled 6721px / 2026-11-06
- Phone / Captured page / Pixel / Blue / Light / 390 x 844 CSS px / scrolled 10090px / 2026-11-06
Video library
Current shell / directory
A featured video followed by a thumbnail-led list of earlier videos.
The screenshot could not load. Open the live example or the full-size image below.
- Regions
- Section introduction; Featured media container; More Videos list; Optional forum rail; Shared footer.
- Reuse
- Use for the site's video index. Keep a featured item distinct from the rest of the list; a player alone does not require a new shell.
- Responsive
- The featured media fits the content column. The list remains below it and the shared side regions disappear on small screens.
Sources and capture links
learn/videos.htmssi/newDesign/src/kirupa.css- Desktop / Captured page / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / 2026-10-21
- Phone / Captured page / Pixel / Blue / Light / 390 x 844 CSS px / scrolled 596px / 2026-10-21
Book catalog
Current shell / directory
A product collection organized into current releases and older books.
The screenshot could not load. Open the live example or the full-size image below.
- Regions
- Section introduction; Book-cover and description rows; Purchase/source actions; Archive section; Shared shell.
- Reuse
- Use for a book collection. Keep each cover beside its own summary and actions, with links to the appropriate detail page or retailer.
- Responsive
- Rows fit the narrow content region and actions wrap. Preserve the association between a cover, title, description, and its links.
Sources and capture links
book/index.htmssi/newDesign/src/kirupa.css- Desktop / Captured page / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / 2026-10-21
- Phone / Captured page / Pixel / Blue / Light / 390 x 844 CSS px / scrolled 849px / 2026-10-21
Book detail
Current shell / product
A single book's cover, description, purchase action, contents, and FAQs.
The screenshot could not load. Open the live example or the full-size image below.
- Regions
- Cover and title feature; Purchase link; Book description and contents; Questions and author information; Shared footer.
- Reuse
- Use as the existing product-detail reference. Its page-local cover positioning and fixed colors are specific to this book, not new site-wide tokens.
- Responsive
- At 1024px the cover moves above the title and description. The two contents columns become a single flow.
Sources and capture links
book/html5_canvas_noob_to_ninja.htmssi/newDesign/src/kirupa.css- Desktop / Captured page / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / 2026-10-21
- Phone / Captured page / Pixel / Blue / Light / 390 x 844 CSS px / page top / 2026-10-21
Quiz catalog
Current shell / directory
A subject- and topic-grouped directory of mastery quizzes with links to lessons and saved results.
The screenshot could not load. Open the live example or the full-size image below.
- Regions
- Collapsible subject navigation rail; Catalog introduction and result links; Subject cards and topic anchors; Quiz-card grids with question counts; Shared footer.
- Reuse
- Extend the quiz catalog generator and data rather than writing a second quiz directory. Keep lesson and result navigation beside the catalog.
- Responsive
- The auto-fit grid reduces to one column when cards no longer fit. Navigation actions wrap and the shared rail is removed.
Sources and capture links
quizzes/index.htmquizzes/catalog.shtmlquizzes/navigation.shtmlquizzes/quiz.css- Desktop / Captured page / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / 2026-10-21
- Phone / Captured page / Pixel / Blue / Light / 390 x 844 CSS px / scrolled 1468px / 2026-10-21
Quiz question
Current shell / application
A focused question stage with progress, question context, answer controls, and feedback.
The screenshot could not load. Open the live example or the full-size image below.
- Regions
- Quiz rail and title; Lesson/catalog/results links; Question progress; Question and answer stage; Working and error messages.
- Reuse
- Use the quiz runtime and question-bank schema. Keep one active question stage and preserve native answer labels, status, and error behavior.
- Responsive
- The stage stays single-column. Code is contained within the question; navigation and answer controls fit the narrow stage.
Sources and capture links
quizzes/arrays_data_structure.htmquizzes/quiz.jsquizzes/quiz.cssquizzes/navigation.shtml- Desktop / Captured page / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / 2026-10-21
- Phone / Captured page / Pixel / Blue / Light / 390 x 844 CSS px / scrolled 604px / 2026-10-21
Saved results
Current shell / application
An account-oriented history page with a forum-connection boundary.
The screenshot could not load. Open the live example or the full-size image below.
- Regions
- Quiz navigation; Results title and return links; Connection status/action; Saved-attempt region.
- Reuse
- Reuse the history view in quiz.js. Show a clear guest state before requesting access to private scores.
- Responsive
- Status and history occupy one reading column. Actions wrap inside the page and the desktop rail is hidden.
Sources and capture links
quizzes/results.htmquizzes/quiz.jsquizzes/quiz.css- Desktop / Captured page / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / 2026-10-21
- Phone / Captured page / Pixel / Blue / Light / 390 x 844 CSS px / page top / 2026-10-21
Asset browser
Specialized current surface / application
A standalone search-and-filter workspace for a large visual asset collection.
The screenshot could not load. Open the live example or the full-size image below.
- Regions
- Tool header; Search field; Category and format controls; Result count and asset grid; Per-asset actions.
- Reuse
- Use the existing Icon Gallery browser for emoji and icon discovery. Its style tabs, search panel, and per-icon downloads are separate from the standard article layout.
- Responsive
- Filters wrap and the asset grid reduces its columns. Preserve the per-asset labels and actions instead of shrinking a desktop grid to fit.
Sources and capture links
tools/icon_gallery_template.htmtools/icon_gallery_pixel.htmtools/cleanedUpTwemoji.js- Desktop / Captured page / Icon Gallery default / Light / 1600 x 1200 CSS px / page top / 2026-11-05
- Phone / Captured page / Icon Gallery default / Light / 390 x 844 CSS px / scrolled 991px / 2026-11-05
Visitor globe
Specialized current surface / application
A visualization-led page pairing a large globe with an activity table.
The screenshot could not load. Open the live example or the full-size image below.
- Regions
- Native title and explanation; Globe stage; Online/recent-arrivals table; Status announcements and privacy information.
- Reuse
- Reuse the globe page's visualization and table regions for this experience. A dashboard needs explicit loading, empty, and failure states.
- Responsive
- The globe scales with its stage and the table follows below it. Keep any necessary table scrolling local to the table region.
Sources and capture links
whos-online/index.phpwhos-online/clay-globe.csswhos-online/clay-globe.js- Desktop / Captured page / Pixel / Blue / Light / 1600 x 1500 CSS px / page top / 2026-10-21
- Phone / Captured page / Pixel / Blue / Light / 390 x 844 CSS px / scrolled 672px / 2026-10-21
Spatial application
Specialized current surface / application
A full-viewport community map with its own exploration and editing controls.
The screenshot could not load. Open the live example or the full-size image below.
- Regions
- Shared site header; Pannable city viewport; Dock toolbar; Minimap and zoom controls; Drawers, inspector, and dialogs.
- Reuse
- Use this structure only for a spatial workspace. Keep navigation, viewport gestures, selection, and editor state separate from article scrolling.
- Responsive
- The world remains pannable rather than collapsing into a content list. The dock and overlays adapt to the available screen; inspect both desktop and touch-sized captures.
Sources and capture links
lab/kville/main.htm- Desktop / Captured page / Pixel site chrome / kirupaVille default / 1600 x 1200 CSS px / page top / 2026-10-21
- Phone / Captured page / Pixel site chrome / kirupaVille default / 390 x 844 CSS px / page top / 2026-10-21
Live ranked list
Specialized current surface / directory
A time-windowed content ranking with an update timestamp and explicit empty state.
The screenshot could not load. Open the live example or the full-size image below.
- Regions
- Shared shell; Ranking explanation; Time-window/update metadata; Ranked results or empty state.
- Reuse
- Treat this as the existing dynamic-list reference. Preserve its time-window label and empty state; do not infer its server implementation from the screenshot.
- Responsive
- The public page keeps the ranking in one narrow content column while the shared header and side regions adapt.
Sources and capture links
Evidence is the public rendered page. popular.php's server source was not present in the reviewed checkout.
- Desktop / Captured page / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / 2026-10-21
- Phone / Captured page / Pixel / Blue / Light / 390 x 844 CSS px / page top / 2026-10-21
Anchored archive
Archive content / current shell / directory
A long categorized link archive with an in-page table of contents.
The screenshot could not load. Open the live example or the full-size image below.
- Regions
- Anchor-based section rail; Native archive title; Category headings and link lists; Links back to current sections.
- Reuse
- Use for retained content that still needs an organized entry point. The content is historical; this page's shell is current.
- Responsive
- The archive lists remain one reading column. The desktop anchor rail is hidden on small screens, while the same section headings remain in the document.
Sources and capture links
design/archive.htmssi/newDesign/src/kirupa.css- Desktop / Captured page / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / 2026-10-21
- Phone / Captured page / Pixel / Blue / Light / 390 x 844 CSS px / page top / 2026-10-21
Embedded experiment
Archive content / current shell / article
An archived interactive experiment presented inside the current article shell.
The screenshot could not load. Open the live example or the full-size image below.
- Regions
- Lab navigation rail; Article title and author; Archive notice; Aspect-ratio player; Instructions and source/download context.
- Reuse
- Use the published Lab wrapper for preserved SWF experiments. Keep the Ruffle player, fallback, attribution, and archive notice together.
- Responsive
- The player fits its container while retaining the source aspect ratio. The article follows the shared rail and reading-column breakpoints.
Sources and capture links
Published Lab release 87b8d16c, not the older Lab files in the inventory baseline.
https://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/comet.htmhttps://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/lab.csshttps://github.com/kirupa/kirupaWWW/blob/87b8d16c/ssi/newDesign/left_lab.shtml- Desktop / Captured page / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / 2026-10-21
- Phone / Captured page / Pixel / Blue / Light / 390 x 844 CSS px / page top / 2026-10-21
Artwork gallery
Archive content / current shell / gallery
A responsive collection of community images with creator credits.
The screenshot could not load. Open the live example or the full-size image below.
- Regions
- Lab rail and article introduction; Image grid; Per-entry captions and credits; Shared footer.
- Reuse
- Reuse labGrid and its small, wide, or banner variants. Preserve original aspect ratios, creator attribution, and pixelArt treatment for pixel artwork. Stamps and other Lab image collections share this family.
- Responsive
- The grid uses auto-fill/minmax rather than fixed column counts. Small pixel entries use a 110px minimum; wide and banner variants use their own source rules.
Sources and capture links
Published Lab release 87b8d16c. These are archived contributions in the current shell.
https://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/pixelPeople.htmhttps://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/kirupaStamps.htmhttps://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/lab.css- Desktop / Captured page / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / 2026-10-21
- Phone / Captured page / Pixel / Blue / Light / 390 x 844 CSS px / scrolled 637px / 2026-10-21
Contest entries
Archive content / current shell / gallery
A competition archive combining rules, attribution, and a collection of interactive entries.
The screenshot could not load. Open the live example or the full-size image below.
- Regions
- Lab rail and contest introduction; Contest details and rules; Stacked player entries; Entry attribution and result context.
- Reuse
- Keep competition context above its entries. Reuse labGridPlayers for the player collection; image-based battles use the same current shell with inline entry images and winner badges.
- Responsive
- The source defines a centered single-column player grid. The 390px capture exposes horizontal overflow in some entries despite the source sizing rules. This is a live limitation, not a recommended phone treatment.
Sources and capture links
Published Lab release 87b8d16c. The image-based battle variant is included as a separate capture.
https://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/fxpression.htmhttps://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/battles.htmhttps://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/lab.css- Desktop / Captured page / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / 2026-10-21
- Player entries / Captured page / Pixel / Blue / Light / 1600 x 1200 CSS px / scrolled 1230px / 2026-10-21
- Phone / Captured page / Pixel / Blue / Light / 390 x 844 CSS px / scrolled 1540px / 2026-10-21
- Image battle variant / Captured page / Pixel / Blue / Light / 1600 x 1200 CSS px / scrolled 553px / 2026-10-21
Legacy multi-column shell
Legacy shell / legacy
A retained older section index with compact navigation, a narrow link column, and a promotional sidebar.
The screenshot could not load. Open the live example or the full-size image below.
- Regions
- Older header/search module; Left navigation module; Compact subject list; Right promotion column; Older footer modules.
- Reuse
- Historical reference only. For a new index, use the current topic layout; do not import this shell's spacing or module CSS.
- Responsive
- This layout predates the current responsive shell. The phone capture documents its actual scaled or constrained presentation, not a recommended mobile pattern.
Sources and capture links
blend_wpf/index.htmssi/header_module.shtml- Desktop / Captured page / Legacy shell / default appearance / 1600 x 1200 CSS px / page top / 2026-10-21
- Phone / Captured page / Legacy shell / default appearance / 390 x 844 CSS px / page top / 2026-10-21
Forum topic list
Companion site / community
The public Discourse community's topic browser.
The screenshot could not load. Open the live example or the full-size image below.
- Regions
- Forum header and account actions; Category sidebar; Search and list tabs; Topic rows with activity metadata.
- Reuse
- Change this through the forum's Discourse theme and components. Its layout and account controls are not kirupa.com SSI templates.
- Responsive
- The mobile forum uses compact navigation and rearranged topic metadata. The separately captured phone view is the evidence for this platform behavior.
Sources and capture links
Public Discourse rendering. The deployed forum theme configuration is outside this repository.
- Desktop / Captured page / Forum default / Light / 1600 x 1200 CSS px / page top / 2026-10-21
- Phone / Captured page / Forum default / Light / 390 x 844 CSS px / page top / 2026-10-21
Forum conversation
Companion site / community
A threaded public discussion with author identity, posts, actions, and timeline navigation.
The screenshot could not load. Open the live example or the full-size image below.
- Regions
- Forum header and sidebar; Topic title and category; Post stream; Author and post actions; Topic timeline.
- Reuse
- Use Discourse's topic view for discussions. Do not reproduce a forum thread as a native article or initialize a posting action inside a design preview.
- Responsive
- The post stream takes the narrow viewport while desktop sidebar/timeline controls change position or collapse. Code remains within each post.
Sources and capture links
Public Discourse rendering. Only anonymous, read-only topic access was used.
- Desktop / Captured page / Forum default / Light / 1600 x 1200 CSS px / page top / 2026-10-21
- Phone / Captured page / Forum default / Light / 390 x 844 CSS px / page top / 2026-10-21
Newsletter publication
Companion site / publication
The separately hosted newsletter's public article archive.
The screenshot could not load. Open the live example or the full-size image below.
- Regions
- Publication header and subscription controls; Latest/Top/Discussions tabs; Article rows with thumbnails and metadata; Publication navigation.
- Reuse
- Use Substack's publication interface for the newsletter archive. The kirupa.com newsletter promotion links to this experience; it does not share the site's article shell.
- Responsive
- The publication header becomes compact and archive rows fit the phone viewport. Substack controls this behavior independently of kirupa.com styles.
Sources and capture links
Public Substack rendering at kirupa.chat. Its template is not stored in this repository.
- Desktop / Captured page / Substack publication default / Light / 1600 x 1200 CSS px / page top / 2026-10-21
- Phone / Captured page / Substack publication default / Light / 390 x 844 CSS px / page top / 2026-10-21
- First-visit subscribe page / Captured page / Substack publication default / Light / 1600 x 1200 CSS px / page top / 2026-10-21
Inventory scope and capture method
Page-layout families and structural variants found through the site's navigation, section indexes, source templates, and public pages. Content-only differences share a record. This is a maintained family inventory, not a census of every historical HTML file or tutorial demo.
Review the shared header/footer and Learn destinations, compare the representative pages and their SSI/CSS regions, and capture the public result. Check specialized catalogs, applications, archive indexes, and the forum/newsletter separately. A different subject, title, illustration, or color does not create a new layout.
Source baseline: 98c81538.
Modernized Lab pages and left_lab.shtml: 87b8d16c. Published and verified by the Lab owner before capture, but not merged into the source baseline. Lab source links are pinned to this release rather than the older files on main.
Anonymous Chromium captures in isolated contexts. No form submissions, quiz answers, subscriptions, chat messages, or plot claims. Presence and tracking requests are blocked. Screenshots retain their captured appearance; local selectors only switch actual images. Public member artwork and third-party screenshots retain their owners' rights.
- Tutorial exercises, downloadable projects, isolated embedded demos, and old shell backups are not separate site-layout recommendations.
- Redirects such as tutorials.htm, apps/index.htm, and Lab example.htm/experiments.htm are destinations to resolve, not layouts to capture.
- Private account history, administration, authentication flows, visitor records, and error/redirect endpoints are outside the public capture inventory.
- External retail and social-network pages are not cataloged. The forum and newsletter are included as explicitly separate companion experiences.
- Legacy coverage is representative. An old article's subject or directory does not prove that its current page still uses a legacy shell.
Grouped examples
- /lab/index.htm: The published Lab landing uses the same grouped, icon-led topic-list structure. See Topic index.
- /mcp/: A current reading column with endpoint/copy controls; those are content components, not a new outer layout. See Tutorial article.
- /developer/mx2004/motion_tween.htm: Archived Flash content now uses the current article shell and a legacy-content notice. See Tutorial article.
To add or refresh a layout, follow the Markdown extension recipe. Update the source record and captures before rebuilding.

























