Scratch – post header
- Posted
28 November 2025
Continuing my incremental NetNewsWire theme build. Version 10 (Scratch – version 10) added a responsive line-height, styled <aside>, post external link, and made a start on unordered lists. This version styles the post header, post title link, tones down the styling of links, and makes horizontal rules dotty.
Post header
Starting from the top, is the post header styling.
I’ve kept it boring and minimal. Applying a grid layout layout to cluster the icon, feed title and byline – reducing the space they were occupying.
When the author line is present I’m reducing the size of the feed title and capitalising it. Shifting the emphasis towards the author’s name. As both the feed title and byline may have distinct links, some fat finger space between them is essential.
The header is set in the sans-serif font in keeping with it’s role as furniture.
Links
I found the underlined, contrasted, links a little too prominent. I knocked back their emphasis by dimming the text decoration colour a shade. Taking care to ensure the underlines remained sufficiently clear. With only a relatively subtle colour difference the underlines remain critical to them being recognised as such.
Pushing the underline away from the text enhanced the legibility of the underlined text.
a {
text-underline-offset: var(--underline-offset, 15%);
}
The custom property here provided an easy means to tighten this value on headings which are either a different font or larger size. Mostly for the condensed font.
h2,h3,h4,h5,h6 {
--underline-offset: 10.5%;
}
Maybe a different unit here would make it possible to set one value that would work for both – responding to the x height appropriately. I didn’t spend enough time testing to say for sure.
The post title link
H1 is obviously missing from the above heading selector. I have special cased the post title. Removing the underline to make it a more headline like.
The post title for a feed item is almost always linked, there is only one in a post, and it’s in the same place. Removing the underline allowed me to reduce the visual noise. The expectation that the title is linked is strong enough that the indicator for it could afford to be somewhat subtle.
As unlinked posts are not unheard of, I wanted some kind of indicator that the title went somewhere. Looking through the arrows available I chose the Medium Right-Pointing Angle Bracket ❭ – placing it like an icon on the end of the title link.
Preventing orphans
Adding an icon to the end makes it the first candidate to wrap onto the next line if the title length is just so. To avoid it doing so without the company of some text, I added a Zero Width No-break Space alongside the arrow character. Applying white-space: nowrap; to their wrapper has the desired effect – providing there is no regular spaces between the title text and the “icon”.
Now if the arrow must wrap to fit, it takes the last word with it.
As an odd side note, I found when I applied text-wrap: balance to the heading with this arrangement, it had the perverse effect of often forcing the arrow onto the second line, but only when the heading was a single short word. Weird!
Horizontal rules
Even as I write this I’m continuing to make changes to the <hr> styling. Currently I’m treating it a little like a greeked heading (apologies to anyone to whom Greek is perfectly comprehensible!). To make it a little closer to the texture of text I’ve given it some weight and dotted it. To help keep the emphasis on the breath of space above it, it is coloured a noticeable step below the text contrast.
Speaking of rules; border-style: dotted; in Safari (for anyone not looking at it) creates alternating squares, not “dots” which to my mind ought to be round. Shrugs.
Install
To enable a quick switch between different versions of this theme I’ve generated a zip of each version – incorporating the version number in the name:
Get the latest version on the Scratch project page.
Next up
I don’t have a roadmap. Consider the Next up sub heading deprecated.