✦ StealThis .dev
Pages Easy

DIY — Hacker Blog Landing

A brutalist landing page for SOLDER & SMOKE, a fictional hardware-hacking blog. Pure black canvas, bone-white slab headlines and a single acid-green accent drive a dense reverse-chronological article river, a duotone featured teardown, and a sticky sidebar holding a project of the day, a live contest countdown, a weighted tag cloud and a most-commented list. Hover inverts each card to acid on black, a top progress bar tracks reading depth, and a load-more button appends staggered batches until the archive runs out.

Open in Lab
html css vanilla-js
Targets: JS HTML

Code

Hacker Blog Landing

SOLDER & SMOKE is a fictional hardware-hacking publication rendered as a fanzine printed on a broken laser printer. The masthead pairs a chunky uppercase wordmark with an original hand-drawn SVG mark — a boxy skull whose jaw is a pair of soldering tips — over a stark uppercase nav bar with 2px hard borders and no rounded corners anywhere. Below it a full-width featured teardown uses a CSS duotone illustration area: a green-to-black gradient wash, an inline SVG board schematic and a multiply-blended scanline overlay, stamped with an amber corner badge.

The article river runs 10 posts in a dense two-column grid, each with a CSS-drawn thumbnail block (chips, waveforms, halftones, conic laser sweeps — no image files anywhere), a category tag, a slab headline, a dek, a byline and a comment count. Hovering or focusing a card inverts it entirely to black-on-acid, flipping the tag and thumbnail colors with it. Cards are keyboard reachable and respond to Enter and Space.

The sidebar sticks alongside the river with a project-of-the-day card whose skull button toggles and recounts, a running contest block with a live day/hour/minute/second countdown, a weighted tag cloud whose five size classes double as multi-select filters, and a most-commented top five. A sticky progress bar at the very top tracks reading depth, and the load-more button pulls two more batches of six posts with a per-card stagger before declaring the archive exhausted.

How this look is built

The layout takes its information architecture from Hackaday-style hardware blogs — dense article river plus contest sidebar — but everything here is CSS grid rather than the float-and-clear tables that era of blog actually used. A single grid-template-columns: minmax(0,1fr) 320px drives the whole page and collapses at 1040px, while the river is its own two-up grid whose shared 2px borders come from border-left/top on the container plus right/bottom on each cell, so no double lines appear and no gap hacks are needed. The paper-noise and thumbnail art are all repeating linear, radial and conic gradients on currentColor, which means the hover inversion recolors every illustration for free with one color change instead of swapping assets. position: sticky handles both the masthead and the sidebar without a scroll listener, and an IntersectionObserver reveals appended cards on entry rather than firing a layout-thrashing scroll handler per frame.

Illustrative UI only — always follow real safety guidance when working with tools, electronics, or repairs.