Skip to content

fix(content): keep desktop markers and align narrow-screen headings - #89

Merged
hakula139 merged 3 commits into
mainfrom
fix/mobile-heading-anchors
Sep 30, 2026
Merged

hakula139 merged 3 commits into
mainfrom
fix/mobile-heading-anchors

Conversation

@hakula139

@hakula139 hakula139 commented Sep 29, 2026 •

Copy link
Copy Markdown
Owner

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 fix(layout): group floating controls and clear the footer #85 and native callouts from fix(content): use native details for stable callouts #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 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/mobile-heading-anchors branch from 248bfac to 02cffbf Compare September 30, 2026 17:32
@hakula139 hakula139 changed the title fix(css): keep heading anchors inside mobile article cards fix(content): use heading text for section links Sep 30, 2026
@hakula139 hakula139 changed the title fix(content): use heading text for section links fix(content): keep desktop markers and align narrow-screen headings Sep 30, 2026
Match the mobile anchor gutter to the article card padding while retaining the wider-screen position. Align heading rules with the text, wrap long headings, and show keyboard-focused anchor links.
@hakula139
hakula139 force-pushed the fix/mobile-heading-anchors branch from d5a6f6a to a85d4bb Compare September 30, 2026 18:23
@hakula139
hakula139 merged commit 72d378a into main Sep 30, 2026
1 check passed
@hakula139
hakula139 deleted the fix/mobile-heading-anchors branch September 30, 2026 18:38
hakula139 added a commit to hakula139/hakula.xyz-kiln that referenced this pull request Sep 30, 2026
## Summary

- Pin merged IgnIt `72d378a` from [IgnIt
#89](hakula139/IgnIt#89) and regenerate the
committed stylesheet. Heading text stays aligned with body text. Below
1280px, it is a section link that turns blue on hover or keyboard focus.
At desktop widths, the heading keeps its normal color and reveals the
original `#` marker on hover or focus.
- Keep heading links free of underlines while preserving the h2 divider.
Use one native section link with a desktop-only CSS marker, without
shifting heading text or duplicating its content. Preserve heading
typography and inline formatting, wrap long headings, and keep authored
links inside headings intact. The theme retains merged floating controls
from IgnIt #85 and native callouts from IgnIt #86.

## Verification

- `pnpm build`, `pnpm format`, `pnpm lint`, `pnpm spellcheck`, `nix
flake check`, `nix develop -c kiln build --minify`, commit hooks, `git
diff --check`, and CSS sync passed. The minified build rendered and
indexed 75 pages after CSS generation. The IgnIt squash commit has the
same tree as the reviewed theme head, and CSS generation remained
unchanged after replacing the pin.
- 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, heading links stayed
inside the cards, and pages had no horizontal overflow. Default heading
typography, responsive hover / focus colors, no link underlines, desktop
marker visibility and containment, visible focus outlines, and Enter
fragment navigation passed.
- Long Chinese and unbroken Latin heading probes wrapped within the
card. Inline emphasis and code survived wrapping in the section link.
Authored links remained intact without nested anchors. Callout and
blockquote headings retained their existing behavior, and repeated
initialization did not duplicate heading links.
- Browser checks used generated assets with external resources excluded.
Local Nix checks covered aarch64-darwin. Other browser engines and Nix
systems were not tested locally.

## Related PR

hakula139/IgnIt#89
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant