lfg2025/archy

Dorian 0abce929ba feat: QEMU headless boot test in CI, updated skills + references

CI now runs a headless QEMU boot test after the smoke test:
- Boots ISO with -nographic, captures serial output
- Watches for "Press Enter to start installation" (pass)
- Detects kernel panic or initramfs shell (fail)
- 120 second timeout, runs as continue-on-error

Also: updated iso-debug reference with embedded vs appended EFI
findings from real hardware testing.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

2026-03-28 11:34:29 +00:00

3.1 KiB

Raw Blame History

name, description, metadata

name

description

metadata

design-pixel-retro

Pixel Art Retro design system — ChonkyPixels font, neon glow CTAs, pixel dot animations, and dark foundation theme. Use when building retro/pixel art UIs, foundation sites, when user says "pixel art", "retro design", "8-bit aesthetic", "neon glow buttons", "pixel font", or "retro foundation style".

author

version

Pixel Art Retro Design System

Extracted from Archipelago Foundation. Pixel-perfect aesthetics with modern web technology, neon glow accents, and playful retro energy.

Design Identity

Name: Pixel Art Retro Mood: Playful retro, 8-bit nostalgia with modern polish Background: Dark (#0A0A0A) with pixel texture overlays Accent: Bitcoin orange (#F7931A) with radial neon glow

Typography

--font-pixel: 'ChonkyPixels', monospace; /* Display/headings — CRITICAL */
--font-body: 'Avenir Next', system-ui, sans-serif;
--font-mono: 'Courier New', monospace;

Rule: ChonkyPixels must be loaded with font-synthesis: none and !important on headings to prevent browser synthesis of bold/italic.

Color Palette

Same dark base as Glassmorphism, but with neon glow effects:

--bg-primary: #0A0A0A;
--accent: #F7931A;
--accent-glow: radial-gradient(circle, rgba(247,147,26,0.4) 0%, transparent 70%);
--neon-green: #39ff14;
--neon-pink: #ff6ec7;
--neon-blue: #04d9ff;

Key Components

Neon Glow CTA

.neon-cta {
  background: linear-gradient(135deg, #f7931a, #e68a00);
  border: 2px solid rgba(247, 147, 26, 0.5);
  border-radius: 4px; /* Sharp corners — pixel aesthetic */
  padding: 12px 32px;
  font-family: var(--font-pixel);
  text-transform: uppercase;
  position: relative;
}
.neon-cta::after {
  content: '';
  position: absolute;
  inset: -8px;
  background: var(--accent-glow);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: -1;
}
.neon-cta:hover::after { opacity: 1; }

Pixel Dot Animation

@keyframes pixel-dot-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.pixel-dot { animation: pixel-dot-bounce 0.6s steps(2) infinite; }

Intro Sequence

.intro-container { animation: intro-container 0.6s ease-out; transform-origin: center; }
.intro-corners { animation: intro-corners 0.5s ease-out 0.35s both; }
.intro-logo { animation: fadeIn 0.5s ease-out 0.7s both; }

@keyframes intro-container { from { transform: scale(0.97); opacity: 0; } }
@keyframes intro-corners { from { transform: scale(0.8); opacity: 0; } }

UI Approach

Sharp corners (2-4px radius) — pixel aesthetic, not rounded
Stepped animations (steps(N)) where possible for pixel feel
Monospace alignment for data displays
Donation modal: max-width 480px, QR code on white background
Theme toggle: smooth dark/light with inverted logo filter

Modular Architecture

Pixel font loaded via @font-face with subset for performance
Glow effects via CSS pseudo-elements (no extra DOM)
Animation keyframes in global stylesheet
Component-scoped overrides only

3.1 KiB Raw Blame History