Skip to content

fix(content): use native details for stable callouts - #86

Merged
hakula139 merged 2 commits into
mainfrom
fix/callout-initial-layout
Sep 30, 2026
Merged

fix(content): use native details for stable callouts#86
hakula139 merged 2 commits into
mainfrom
fix/callout-initial-layout

Conversation

@hakula139

@hakula139 hakula139 commented Sep 29, 2026 •
edited
Loading

Copy link
Copy Markdown
Owner

Summary

Use native <details> and <summary> for callout state, keyboard interaction, and hidden content. Kiln renders the inner layout wrapper, so callouts keep their layout from first paint. CSS progressively enhances disclosure motion, and reduced-motion preferences disable both the body and chevron transitions. Group callout rules by container, title, body, motion, and variant, removing redundant declarations and comments.

Verification

  • pnpm build, pnpm format, pnpm lint, pnpm spellcheck, nix flake check, and git diff --check passed. The committed CSS matches the source.
  • The earlier paired minified site build indexed 75 pages. On the LR2 article at 390px, the first callout's content inset stayed 16px from first paint through DOM ready.
  • Headless Chromium 147, Firefox 148, and WebKit 26.4 checked unchanged expanded layout, Enter / Space toggling, Tab skipping closed content, nested callouts, and toggling with JavaScript disabled. Reduced motion disables body and chevron transitions in all three engines.
  • Frame sampling confirms smooth opening and closing in Chromium. Firefox hides the text immediately during closing. WebKit starts a closing transition but collapses the visible content faster than the declared 300ms, especially with nested content. Native Safari 27.0, tested through its MCP interface with the tab visible and focused, reproduces the shortened closing motion: a 128px fixture is about 60px tall at 80ms and reaches its 36px closed height around 160ms. Declared transition duration alone does not establish visible closing animation.
  • A CSS-only alternative that forces content-visibility: visible lets Tab enter closed content in Chromium and Firefox. Adding visibility: hidden restores keyboard hiding but makes previously searchable closed text unfindable in Chromium, so neither alternative was adopted.

Related PRs

@hakula139 hakula139 added the bug Something isn't working label Sep 29, 2026
@hakula139 hakula139 self-assigned this Sep 29, 2026
@hakula139
hakula139 force-pushed the fix/callout-initial-layout branch from 8e80eed to 4bf8175 Compare September 29, 2026 19:58
@hakula139 hakula139 changed the title fix(content): preserve server-rendered callout layout fix(content): use native details for stable callouts Sep 29, 2026
@hakula139
hakula139 force-pushed the fix/callout-initial-layout branch from 4bf8175 to 576a15a Compare September 29, 2026 20:13
@hakula139 hakula139 mentioned this pull request Sep 29, 2026
Merged
@hakula139
hakula139 force-pushed the fix/callout-initial-layout branch from 8b032fe to 33d7ced Compare September 30, 2026 17:59
@hakula139
hakula139 merged commit 8179b09 into main Sep 30, 2026
1 check passed
@hakula139
hakula139 deleted the fix/callout-initial-layout branch September 30, 2026 18:00
hakula139 added a commit to hakula139/hakula.xyz-kiln that referenced this pull request Sep 30, 2026
@hakula139
fix(template): adopt native callouts with kiln rc2 (#83)
0ebbd60 
## Summary

- Pin [kiln
v0.4.0-rc.2](https://github.com/hakula139/kiln/releases/tag/v0.4.0-rc.2),
which renders the callout body wrapper before first paint.
- Pin merged IgnIt #86 at `8179b09` and regenerate the committed CSS.
Native `<details>` controls callout state without a JavaScript DOM
rewrite, and reduced motion disables the body and chevron transitions.

## Verification

- `pnpm build`, `pnpm format`, `pnpm lint`, `pnpm spellcheck`, `nix
flake check`, push hooks, and `git diff --check` passed after rebasing
onto current main. The minified rc.2 build indexed 75 pages.
- Chromium, Firefox, and WebKit checks covered Enter / Space toggling,
closed-content tab order, nested callouts, and JavaScript-disabled
behavior. Earlier paired-site checks at 390px confirmed one inner
wrapper and a stable 16px content inset.
- Native Safari 27.0 frame sampling with the theme CSS confirms that
closing motion is shorter than the declared 300ms. Firefox hides text
immediately during closing. These browser limitations remain part of the
CSS progressive enhancement.

## Related PRs

- hakula139/kiln#79
- hakula139/IgnIt#86
This was referenced Sep 30, 2026
Merged
Merged
hakula139 added a commit that referenced this pull request Sep 30, 2026
@hakula139
fix(content): keep desktop markers and align narrow-screen headings (#89
72d378a 
)

## Summary

- Keep article heading text aligned with body text. Below 1280px, the
heading is a section link that turns blue on hover or keyboard focus. At
desktop widths, it keeps its normal color and reveals the original `#`
marker on hover or focus.
- Use one native section link with a desktop-only CSS marker. Remove
heading link underlines, preserve the h2 divider, and wrap long
headings. Preserve inline formatting and existing authored links, and
leave callout and blockquote headings unchanged.
- Retain merged floating controls from #85 and native callouts from #86.

## Verification

- `pnpm build`, `pnpm format`, `pnpm lint`, `pnpm spellcheck`, `nix
flake check`, commit hooks, `git diff --check`, and CSS sync passed for
the theme. The consuming site passed the same checks and its minified
build rendered and indexed 75 pages after CSS generation.
- Managed headless Chromium checked the generated LR2 / BMS and FFT
articles at 320px, 390px, 768px, 1279px, 1280px, and 1440px in light and
dark themes. Heading text aligned with body text, section links stayed
inside the cards, and pages had no horizontal overflow. Default
typography, responsive hover / focus colors, no link underlines, desktop
marker visibility and containment, focus outlines, and Enter fragment
navigation passed.
- Long Chinese and unbroken Latin heading probes wrapped within the
card. Inline emphasis and code were preserved, authored links remained
intact without nested anchors, and repeated initialization did not
duplicate heading links.
- Browser checks used generated assets with external resources excluded.
Local Nix validation covered aarch64-darwin. Other browser engines and
Nix systems were not tested locally.
hakula139 added a commit that referenced this pull request Sep 30, 2026
@hakula139
refactor(content): share native disclosures with mobile TOC (#90)
001060c 
## Summary

Use native `<details>` and `<summary>` for the mobile TOC, matching
callouts. Remove the TOC wrapper and JavaScript initializer, and share
summary markers, open-state chevrons, body transitions, and
reduced-motion behavior in `collapse.css`. Component files retain their
appearance rules. Closed TOC links are excluded from keyboard
navigation, and disclosure works without JavaScript.

## Verification

- `pnpm build`, `pnpm format`, `pnpm lint`, `pnpm spellcheck`, `nix
flake check`, and `git diff --check` passed. The compiled CSS matches
the source.
- An isolated site build with this theme rendered and indexed 75 pages.
The rendered LR2 article passed Chromium checks with JavaScript enabled
and disabled for native state, closed-content focus, open links,
padding, and desktop sidebar visibility.
- Chromium, Firefox, and WebKit checks covered Enter / Space toggling,
closed-content focus, open links, TOC fragment navigation and active
tracking, the 16px content inset, desktop hiding, no-JavaScript
interaction, and reduced motion.
- Native Safari 27.0 frame sampling confirms that callouts and the
mobile TOC share the same opening and shortened closing behavior.
Firefox's immediate text hiding and Safari's shortened closing motion
remain browser limitations of the CSS enhancement.

## Related PRs

- Follows merged #86.
@hakula139 hakula139 mentioned this pull request Oct 2, 2026
Merged
hakula139 added a commit that referenced this pull request Oct 3, 2026
@hakula139
refactor(content): share native disclosures with code blocks (#94)
ebe36f9 
## Summary

Use native code-block disclosures from kiln and share summary markers,
open-state chevrons, body transitions, and reduced-motion behavior with
callouts and the mobile TOC. Remove the custom JavaScript toggler,
keeping clipboard behavior. Require kiln `0.4.0-rc.3` so older renderers
fail the existing version check before producing incompatible code-block
markup. Cancel the copy click default before replacing its icon so
native summary activation cannot toggle the block after the original
click target is detached. Direct-child chevron selectors keep nested
disclosure states independent.

## Verification

- `pnpm build`, `pnpm format`, `pnpm lint`, `pnpm spellcheck`, `nix
flake check`, and `git diff --check` passed. Compiled CSS matches the
source.
- Headless Chromium, Firefox, and WebKit fixtures using the compiled CSS
and shipped JavaScript passed native Enter / Space toggling with
JavaScript enabled and disabled, initial collapsed state, nested
disclosure chevrons, line-limit scrolling, reduced motion, and
closed-content printing behavior.
- Copy-button click, Enter, and Space copied the exact code through a
mocked clipboard and left disclosure state unchanged in all three
engines. Explicit icon-target clicks covered open and closed blocks with
immediate, task-delayed, and rejected clipboard promises. The immediate
icon click reproduces the unwanted Chromium toggle before the default
cancellation.
- Integrated site checks in hakula139/hakula.xyz-kiln#92 passed in
Chromium, Firefox, and WebKit at mobile dark and desktop light viewports
for native toggling, copying, nested state, closed-body focus exclusion,
reduced motion, and page overflow. Native disclosure closing animation
retains the browser differences documented in #86 and #90.
- Runtime compatibility: kiln `0.4.0-rc.2` rejects this theme before
writing output, while the new `0.4.0-rc.3` binary builds it. Follow-up
review found no issues with the version requirement.

## Related PRs

- Follows merged #90.
- Requires hakula139/kiln#82 for native code-block markup.
- Draft site integration: hakula139/hakula.xyz-kiln#92.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@hakula139 hakula139

Labels

bug Something isn't working

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@hakula139