Scratch – version 10

Continuing my incremental NetNewsWire theme build. Version 9 (Scratch – figure and blockquote) styled figures, blockquotes, and figures in blockquotes.

Alongside some fixes, this version styles the external link, aside elements, unordered lists, and applies a dynamic line-height.

External link aside

The external link is not strictly part of a post. It is data associated with the post, like the date. It is generally a link to the subject of the post and therefore a natural place to go once we’ve read what our beloved blogger and had to say about it.

Relatively few bloggers I read make use of the external link field in their feed. To do so it is necessary to explicitly assign the link in question to a dedicated field in such a way that it will make it’s way to the appropriate place in the feed xml. Few folks are looking for those kind of extra steps when they blog.

It’s a shame it’s not more commonly used. “Blog” is short for “web log” in which external links are the whole point!

No shade from me, additional blog fields add blogging friction. Whack it in the content if you must. Please keep blogging!

Template aside

My initial take on the theme template placed the external link (on posts that provide one) at the end of the content after a horizontal rule (<hr>). For version 10 I started looking at ways to style this rule and link combination – to distinguish it from the post content.

Dissatisfaction with my efforts led me to reconsider this mark-up entirely. Placing the link in an <aside> (please excuse my punny foreshadowing) feels better to me. More semantic? Locating the aside element after the <main> in hope that it may make it a little more prominent to a savvy VoiceOver user somewhere.

I relegated the external link label “Link” to an aria-label for the aside. It is obviously a link. If my design succeeds it will obviously be the link.

Aside outline

Experimenting with outlining the aside I tried a bunch of different line styles. The url never looked comfortable in a box. I settled on applying an SVG filter that would outline the link snugly with rounded corners. This feels particularly magical when the links wraps across multiple lines.

Content aside

While working on the external link I was surprised to notice the odd styled <aside> appearing in the content of blog posts. I had overlooked it as a content element to style. So happy accident!

A strong separation from the surrounding content is the point of an aside. The dot pattern I used certainly has this effect. There was some trickiness involved to ensure the dot boundary was composed only of complete dots. Basing the dot size and spacing on a division of the text line height dealt with the vertical. While making use of the CSS round() function provided a means to lock the width to a whole division of the dot spacing horizontally.

inline-size: round(down, 100%, var(--my-lh) * 0.5);

That custom property, --my-lh is short for “my line-height”.

Line-height

It was while building a theme for an earlier version of NetNewsWire I had the idea of making line-height dynamically adjust. Far out! It’s been twenty years! Back then doing so required JavaScript. Now it’s a tiny bit of CSS:

html {
	--my-lh: round(nearest, calc(1em + 1.5vw), 2px);
	line-height: var(--my-lh);

Pff, who needs flying cars! We got CSS of the future.

Technically, it could be simpler. I found the rounding was necessary to avoid some rounding errors that made a mess of the aside dots. The vw contributes a scaling factor relative to the viewport width, while the em responds to the font size.

Why choose a CSS unit when you can mix them!

Unordered lists

I also applied some styling to unordered lists. Using outdented dots for the first level. I’m happy with how they look. I have doubts it is a good idea. Ordered lists can’t be aligned in the same manner. As a result the relative nesting depth becomes ambiguous when they are mixed.

Let’s mark this as work in progress. I’m looking forward to Safari supporting the :marker pseudo to provide a little more control.

Polish

• Some little spacing adjustments to blockquote and figure.
• Applied a grid layout to the page to anchor external links to the bottom of the viewport.

Version 10 and how it’s going

My initial concept for the process of building Scratch was to tackle one thing at a time. As it has taken shape and started to look a little nice I’ve found myself increasingly distracted by side polishing missions. I’m okay with that, design isn’t a straight line. And it’s my scratch I’m itching here!

Maybe I’ll come back and make another pass through these posts, and fix the things I subsequently changed. Maybe I’ll add some screenshots. For now I’m documenting as I progress. The benefit of hindsight can come later.

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:

• Install: Scratch v10
• Download: Scratch_v10.nnwtheme.zip

Get the latest version on the Scratch project page.

Next up

Likely some more miscellaneous polish. Maybe apply some layout to the header.