Liner Notes
Some notes on how this site is put together.
The cover
The design comes from the November 1984 cover of A.N.A.L.O.G. Computing, issue 24. The cream paper, cyan grid, graph-paper room, red masthead and robot are all from that cover, and the colours are sampled from a scan of it.
The room behind each page is redrawn from that scan. A short script takes the vanishing point, back wall and row spacing measured off the cover, and draws the grid as two SVG masks: a heavier line every five cells, and thin lines in between. Light and dark mode colour them differently.
The cassette in the corner switches the theme. It’s pixel art, and the frames, shadows and stripes around the site use the same pixel size.
The fonts
| Font | Used for | Licence |
|---|---|---|
| Departure Mono, by Helena Zhang | Masthead, headings, track numbers | SIL Open Font Licence |
| JetBrains Mono, by JetBrains | Body text | SIL Open Font Licence |
The logo is not a font. It is drawn after the title lettering of A.N.A.L.O.G. Computing: heavy square letters, and each full stop a hole in the foot of its letter.
Vertical spacing is in multiples of an 18-pixel line, so the text lines up with the grid.
The build
- Astro turns Markdown into static HTML. No database, no server code.
- A small script handles the drag handle, the cassette and the tape counter. The pages still work without it.
- Hosted on Cloudflare Pages.
- No analytics, cookies, trackers or ads.
Page weight
The front page is about 170 KB in total, well under the 512 KB limit of the 512KB Club. Most of that is the robot and the body font, which is subset to only the characters the site uses. The footer of each page shows its weight, measured by your browser.
Link to this site
If you keep a wall of 88×31 buttons, here’s one for this site.
<a href="https://aljoke-blog.pages.dev/"><img src="https://aljoke-blog.pages.dev/button-88x31.png" width="88" height="31" alt="A.L.V.A.R.O."></a>