# One-Shot Prompt

**Style**: Tech Journal
**Generated**: 2026-04-14

## Prompt

Write complete HTML, CSS, and JavaScript in a single self-contained file for an immersive digital magazine in the style of a Tech Journal. 

The magazine must feel like a real editorial publication — articles with substance, layout decisions that serve readability, and typography that has the weight and precision of professional typesetting.

Name: Interrupt
Tagline: Dispatches from the stack

Technical Constraints (NON-NEGOTIABLE):
- Single file: All HTML, CSS, JS in one `.html` file.
- No external images: Use CSS gradients, SVG inline art, Canvas API, or unicode/emoji only. Simulate photography using CSS gradient compositions, SVG patterns, or geometric art.
- Static: Must work as a static file (no server-side logic).

Typography & Palette:
- Display font: Space Grotesk
- Body font: JetBrains Mono
- Accent font: Inter
- Palette: Dark background (#0d1117), bright text (#e6edf3), accent green (#3fb950), electric blue (#58a6ff), and warning amber (#d29922).
- Drop caps: First letter of first paragraph in each article.
- Pullquotes: Oversized text with borders. Break the column flow.
- Tracking & leading: Tight letter-spacing on display type, generous line-height on body (1.6-1.8).

Magazine Anatomy:

1. Cover / Hero: Large masthead ("Interrupt"). Volume and issue number ("Vol. IV, No. 2"), publication date. Cover story headline ("THE DEATH OF THE LOOP") with cinematic typography. Teaser of 2-3 article titles below the fold.
2. Table of Contents: Numbered items styled like a file tree or directory listing (e.g., using `├── `). Items link to article sections via smooth scroll.
3. Articles (3 total): 
   - Article 1: "The Death of the Loop" (declarative vs imperative programming). Layout: Two-column with uneven widths (70/30).
   - Article 2: "Memories of Rust" (borrow checking and systems programming). Layout: Full-width single column with generous margins.
   - Article 3: "Cache Misses" (hardware architecture and latency). Layout: Three-column newspaper-style using CSS column-count.
   Each article must have a distinct layout, a headline with drop cap, pullquotes, byline, and real editorial-quality prose.
4. Visual Interludes:
   - Interlude 1: An SVG data visualization (e.g., a glowing line chart depicting CPU cycles or Moore's Law over time) set against a dark grid.
   - Interlude 2: A horizontal scrolling marquee with binary or hex codes and editorial quotes.
5. Contributors / Masthead: Fictional tech contributors with roles like "Sysadmin", "Kernel Hacker", "Editor-in-Chief". Styled as a sidebar or metadata block.
6. Colophon / Footer: Version number, build date, hash, fake ISSN, typefaces used, and "MIT License" styled footer.

Visual Craft & Interaction:
- Subtle grid pattern background (dot grid). Terminal-style cursor blink on headlines.
- Fixed folio strip (running header/footer) that shows the current section.
- Thin progress bar fixed at the top of the viewport.
- Reading mode transitions: Sections slide in gently or use typewriter text reveals as they enter the viewport using IntersectionObserver.
- @media print stylesheet included.
- Responsive mobile layout (columns stack on narrow screens).
- Ensure `will-change: transform`, `prefers-reduced-motion` media queries, and `font-display: swap` for Google Fonts imports.

## Notes

- Uses CSS Grid for layout structuring and CSS column-count for text flow.
- The TOC mimics a UNIX directory tree.
- The visual interludes are purely SVG/CSS.
- Hosting: Vercel / Cloudflare Pages / CodePen.