Blogpost 26 block design & features
Blogpost26 is a centered article with a floating contents control, built with shadcn/ui Avatar and Popover components. The header stacks the date and read time, headline, summary, and author byline above a wide landscape image, then the prose article runs in a single column. A rounded pill floats at the bottom of the screen while the article is in view, showing a circular reading progress ring, the current section number out of the total, and the section title.
The pill has a soft shadow, a translucent background, and a thin border, so it stays readable over any part of the article without covering much of it. The ring fills in the primary color as the reader scrolls, and the section label updates as each heading passes. Opening the pill shows a numbered list of sections above it with the current one highlighted.
Most article layouts put contents in a sidebar that disappears on phones. This one keeps navigation and progress available at every screen size, which makes it a practical choice for long posts. Complexity is moderate and mostly code-driven, with one feature image and section ids that match the article headings.
The pill stays inside the article area and settles at the end of the post, so it never overlaps the sections that follow on a page.