✦ StealThis .dev
Pages Easy

DIY — Hardware Writeup Article

A brutalist hardware-blog article page for a fictional hacking zine called Solder and Smoke. Sticky reading-progress bar, slab uppercase headline, byline with share and save controls, duotone CSS figures, acid-green pull quotes, two syntax-coloured code blocks with line numbers and copy buttons, a mono bill-of-materials table, related-post cards, a tag row, a six-comment thread with nesting, votes and collapse controls, a character-counting composer, and a table of contents that tracks scroll position.

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

Code

Hardware Writeup Article

A full-length technical article page for a fictional hardware-hacking blog, built on a pure-black canvas with bone-white text, an acid-green accent and hard 2px borders — no rounded corners anywhere. The piece is a teardown writeup (“Reverse engineering a $6 thermal printer”) laid out as category tag, slab uppercase headline, dek, byline row and share controls, then long prose broken up by pull quotes, CSS-drawn duotone figures with mono captions, a findings list and a boxed bill of materials.

Two code blocks carry hand-rolled syntax colouring, CSS-counter line numbers and copy buttons that strip the gutter before writing to the clipboard. The share row copies the page link or a formatted citation, and the save button is a real toggle with aria-pressed. A sticky progress bar under the masthead reports scroll depth through the article and exposes it as a progressbar with a live aria-valuenow.

The comment section holds six fictional comments nested one level deep, with vote controls that track up/down/none state, an OP badge and a staff badge, per-thread collapse buttons that keep their label in sync with the reply count, and a global collapse control. The composer counts characters toward a 480 limit, warns near the cap, escapes input, and prepends new comments to the top of the list with a short entrance animation. On wide screens a sticky right rail shows a table of contents that highlights the current section.

How this look is built

The information architecture follows the spirit of long-form hardware-blog writeups like Hackaday article pages, but every name, byline and part is invented. The layout is a single CSS grid that gains its right rail only above 1040px, so the rail needs no JS and no duplicate markup; position: sticky handles both the masthead and the rail, replacing the old scroll-listener “stick the header” hack. Scroll spying uses an IntersectionObserver with a -100px 0px -60% root margin instead of measuring offsetTop on every scroll event — it fires only on crossings, so it stays smooth without throttling, and only the progress bar needs a passive scroll listener (rAF-batched). Line numbers come from a CSS counter on .ln rather than a second column of markup, the figures are pure gradient/repeating-conic-gradient compositions so there are zero image requests, and scroll-padding-top keeps anchor jumps clear of the sticky masthead.

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