Fix unequal spacing in simple untitled callouts #13934
Conversation
Simple callouts have a -0.4em bottom margin on .callout-body for collapsed/contentless callouts. For untitled simple callouts, this creates asymmetric spacing since only 0.2rem compensation exists. Add scoped rule for simple untitled callouts to set 0.5em bottom margin on last-child, matching the top margin compensation.
Document the three-tier callout styling system (Bootstrap, RevealJS, Standalone/EPUB) for LLM reference when working on callout-related issues. Add a CLAUDE.md to help claude code write these docs Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Test symmetric spacing in simple untitled callouts and verify titled/default callouts use padding compensation correctly. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
cscheid
left a comment
cscheid
left a comment
There was a problem hiding this comment.
Small typo on the analysis date, but I like putting these in the PR and keeping them in the repo.
There was a problem hiding this comment.
I really like this idea, but could we add the dates to the filename somehow? And note that Claude thinks it's 2025 :D
We could say 2026/01/22/callout-styling-html.md or 2026-01/2026-01-22-callout-styling-html or something like that. I just think that if we don't put date on the files and start accumulating them, it will get overwhelming quite quickly. And my experience with the kyoto repository makes me want to have at least monthly subdirectories, because you end up with a lot of them!
There was a problem hiding this comment.
I think there are two types of doc:
(1) The design doc for some problem which makes sense to have date in filename. Usually you write them once, and then you don't update them I would say. Only consult them for history.
(2) Generic doc about the codebase to explain part of if, some features, concepts or design. And I would say that we need to keep updated those ones.
I have seen the kyoto ones, and I think there of type (1) right ?
Or type (2) ?
For llm-docs/ folder I thought this was type 2 and I wanted to store knowledge about callout design for HTML for next time we need to work on it. I was thinking we would need to update it, hence the YAML header to keep track of it.
If we were to have date in file, then we would have a lot outdated one right ? or do you update them if needed ?
Address review feedback from PR #13934: - Fix 2025 → 2026 date typo in callout-styling-html.md - Add guidance to verify dates from system environment Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
I fixed the year, and told claude to add a way to remember to check date. |
Simple callouts without a title have asymmetric top/bottom spacing. The bottom appears compressed compared to the top.
Root Cause
Simple callouts have
margin-bottom: -0.4emon.callout-body(added for collapsed/contentless callouts). For untitled simple callouts, the existing compensation (margin-bottom: 0.2remon last-child) is insufficient to offset this negative margin.Titled callouts are unaffected because they have
padding-bottom: 0.5remwhich compensates correctly.Fix
Add a scoped rule for
.callout-style-simple:not(.callout-titled)that setsmargin-bottom: 0.5emon the last child, matching the top margin compensation.Fixes #13883