The Core Trick: image-rendering: pixelated

This CSS property tells the browser to scale images (and the element) without anti-aliasing:

img {
  image-rendering: pixelated;
  image-rendering: crisp-edges; /* Firefox */
}

Pair this with small SVGs or emoji and you get crisp scaled sprites.

Tiled Background Grid

The pixel grid background is a pure CSS double repeating-gradient:

.pixel-bg {
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 7px,
      rgba(48,98,48, 0.3) 7px,
      rgba(48,98,48, 0.3) 8px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 7px,
      rgba(48,98,48, 0.3) 7px,
      rgba(48,98,48, 0.3) 8px
    );
}

Two perpendicular repeating-linear-gradient layers create a 8×8 grid. The grid line is 1px wide, the cell is 7px wide.

Pixel Button with Depth

The “inset pixel shadow” effect:

.btn-pixel {
  box-shadow: 4px 4px 0 rgba(0,0,0,0.8);
  transition: box-shadow 0.08s, transform 0.08s;
}

.btn-pixel:hover {
  box-shadow: 2px 2px 0 rgba(0,0,0,0.8);
  transform: translate(2px, 2px);
}

.btn-pixel:active {
  box-shadow: 0 0 0 rgba(0,0,0,0.8);
  transform: translate(4px, 4px);
}

The button moves toward the shadow as you click — it feels physically pressed.

CRT Scanlines

.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none; /* critical — don't block clicks */
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.08) 3px,
    rgba(0,0,0,0.08) 4px
  );
  animation: flicker 8s infinite;
}

@keyframes flicker {
  0%, 95%, 100% { opacity: 1; }
  96%, 98%      { opacity: 0.97; }
  97%           { opacity: 0.92; }
}

The flicker keyframe is subtle — a barely-perceptible opacity dip every 8 seconds. Your eye catches it peripherally, adding analog authenticity without being distracting.

Pixel Card Inset Shadow

.post-card {
  box-shadow:
    inset -2px -2px 0 rgba(0,0,0,0.5),   /* bottom-right darkens */
    inset  2px  2px 0 rgba(255,255,255,0.1); /* top-left highlights */
}

Two inset shadows on opposite corners simulate a beveled 3D edge without any border-image tricks.

Floating Sprite Animation

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

The key is using exactly 8px — matching the pixel grid. Floating on a non-pixel boundary feels wrong; 8px feels intentional.

What You’re Looking At

• The font is Press Start 2P — a pixel-perfect bitmap-style Google Font
• Those horizontal lines across the page are CSS scanlines (a repeating-linear-gradient overlay)
• The boot sequence you saw on first load? Pure CSS @keyframes — no JavaScript until the sequence ends
• The ❤️ in the top bar tracks your reading progress

The Palette System

Change your entire color scheme with one config value:

pixel:
  palette: "gameboy"   # try: nes | cga | amber | synthwave

gameboy → classic green-on-black Game Boy LCD
nes → warm cream/blue NES palette
cga → hardcore cyan/magenta CGA monitor
amber → orange amber CRT terminal
synthwave → purple/pink retrowave

Writing Posts

Create files in _posts/ with the format YYYY-MM-DD-title.md:

---
layout: post
title: "My Pixel Post"
date: 2024-01-15
tags: [javascript, tutorial]
description: "Short excerpt shown on the post card."
---

Content here...

Easter Egg 🕹️

There’s a hidden easter egg in the theme. Try typing A, B, ↑, ↑, ↓, A, B using your keyboard…

(hint: it’s related to the color of everything)