Block Demo
Claude Conversation Log — Block Demo
A reusable code-block style that renders like a Claude conversation / agent log.
(01)Claude log block
How to use it
Add a CodeBlock section, set language: claude, and paste a transcript into code. The card adopts a warm Claude-clay palette and wraps long prose like a real conversation. Start lines with literal glyphs for structure: • for a turn, ☐/☑ for todos, ▸ for a tool or section.
Thought for 29s
• I have the complete source. Now I'll execute the parity port — starting
with the highest-impact piece: porting all 7 CSS partials into the
Tailwind v4 globals.css.
▸ Update Todos
☑ Port 7 CSS partials into Tailwind v4 globals.css (typography, .section,
.btn, gradients, banner, posts, contact-form)
☐ Update data files (footer address/links, banner, our-work + contact
intros, submitted text)
☐ Layout offset wrapper + SiteHeader (exact markup + hamburger) +
Footer / ContactBlock / FooterBlock
☐ Home blocks: HomepageBanner (animated), TextBlock, ServiceBlock,
ProjectCard, FeaturedProjects
☐ Case study: CaseStudyArticle header (brandColor), MainSection,
ImageBlock, QuoteBlock, Markdown
☐ Pages: our-work, contact-us, contact-submitted, [slug] wp-page, 404
☐ Build + screenshot verify against old site
▸ Write globals.css · 311 lines
@import 'tailwindcss';
@plugin '@tailwindcss/typography';
A CodeBlock with language set to "claude". Glyphs at line starts (•, ▸, ☐, ☑) carry the structure.
