Blog 111 block design & features
Blog111 is a table of contents for a blog series, written with Shadcn UI conventions and plain markup. A centered header holds an uppercase label, a large heading, a description, and the author's avatar, name, and total reading time. Below it, every chapter is one full-width row with a large serif roman numeral, a square thumbnail, a small chapter label, a linked title, a one-line summary, a dotted leader, and the month of publication with read time aligned to the right.
The serif numerals and dotted leaders borrow directly from printed books, set against otherwise sans-serif type. Chapters already read fade back, with a faint numeral, desaturated thumbnail, and muted title, while unread and upcoming chapters stay at full contrast. Upcoming chapters drop their links. Rows are divided by hairlines with rules above and below the list.
The look is literary and calm, a distinctive choice for long-form writing published on a schedule. It is moderately complex and content-driven, needing a square image, title, short summary, publish month, and read time for each chapter.
On small screens the numerals, leaders, and dates are hidden so each row is a thumbnail with its chapter label, title, and summary.