Style Guide

The living style guide for this site: every content component, exercised.

This page is not a build log. It is a checklist wearing a build log’s clothes, meant to prove every prose element and content component the migration relies on still renders the way the handoff describes.

Section Heading

A run-of-the-mill h2, sitting above a shorter h3 and an even shorter h4, the same nesting order a normal post would use for a multi-day build.

Subsection Heading

Text under the h3, just enough to keep the heading from looking orphaned.

Detail Heading

An h4 label, the kind used for a small aside inside a subsection.

Build Log Checklist

The parts bin sort turned into three levels of sublists once I started separating leftover fasteners from anything that still needed testing.

  • Chassis bin
    • Fasteners
      • M3 socket head, 20 count, mostly matched
      • M3 nylon lock nuts, loose in the tray
    • Standoffs
      • 10mm aluminum, six pulled from the old triclops build
  • Electronics bin
    • Sensors
      • IR receiver, untested
    • Boards
      • Spare driver board, needs a reflow on one pad

The reassembly order ended up mattering enough to write down as a numbered list, three levels deep once the sub-steps for wiring got specific.

  1. Strip the chassis
    1. Pull the driver board
      1. Confirm the reflow held before reinstalling
      2. Reseat the ribbon cable
    2. Pull the sensor mast
  2. Reassemble
    1. Seat the chassis screws finger tight, then a quarter turn more
    2. Reconnect the battery lead last

Half of this project was remembering which drawer the good standoffs were in.

An attributed quote carries its provenance in the lower right, for passages pulled from an older era of the blog.

Past me was confident the wiring harness would never need to come off. Past me was wrong.

~ Curt, circa 2019

IR Command Table

The remote’s command set, logged here mostly so I stop guessing at hex codes from memory.

FunctionCommandHex
Power togglePOWER0x40BF
ForwardCH_UP0x48B7
ReverseCH_DOWN0xC837
StopMUTE0x22DD
Sample media, left side

Media on the left, text on the right, stacking to a single column on narrow screens.

Sample media, right side

Same layout, mirrored, media on the right.

Fig. 1, bench setup
Fig. 2, sensor mount
Fig. 3, wiring detail
Fig. 4, finished reassembly
  1. Sample step, tall photo

    A step is one row: photo on the left at 200px, the text beside it at body size. Numbering is opt-in per walkthrough.

  2. Sample step, tall photo Sample step, wide photo

    A step can carry more than one photo; the photo cell grows 200px per photo.

  3. Sample step, wide photo

    Every photo in a walkthrough opens the lightbox as one set. Below 600px the row stacks, photo centered above the text.

Image formats and the pipeline

The SVG figures above pass through the image pipeline untouched (vector stays vector, and GIFs keep their animation the same way). Raster images come out the other side as responsive WebP sized to the column:

Spinbot drift trajectory diagram
Fig. 5, a raster image served as responsive WebP.

Prose images can also be authored in plain markdown with a relative path; they ride the same pipeline:

Spinbot drift trajectory, markdown-authored

A bare fenced block, no filename wrapper, just the language tag:

function readIr(code) {
  return code === 0x40bf ? "power" : "unknown";
}

The same idea in Python, this time wrapped in the filename island:

def read_ir(code):
    return "power" if code == 0x40BF else "unknown"

A paragraph wrapped in a Group, used when a bit of prose needs its own boxed container instead of flowing with the rest of the section.

Palette Chips

Color documentation uses the Palette component; the real palette lives in the Brand Guide.

Swatch Role Hex Used for
Accent amber #ffaa3c demo row
Ink #404040 demo row

Site Furniture

The newsletter panel is the amber block shared across my projects. The post variant renders between a post’s end and its prev/next navigation:

Browse Categories

Early Robotics Home Automation