[PR #1699] [MERGED] style(website): kbd, install-node width and nested collapsible indentation #4761

Closed
opened 2026-10-31 00:54:48 +00:00 by bsakaguchi · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/morluto/rea/pull/1699
Author: @kaoru0822-kitauji
Created: 10/11/2026
Status: ✅ Merged
Merged: 10/11/2026
Merged by: @kaoru0822-kitauji

Base: main ← Head: style/website-help-sections


📝 Commits (1)

  • 82b0585 style(website): kbd, install-node width and nested collapsible indentation

📊 Changes

1 file changed (+21 additions, -0 deletions)

View changed files

📝 website/public/assets/styles.css (+21 -0)

📄 Description

Summary

Adds the styles for the help sections merged in #1684, #1688 and #1689. Only website/public/assets/styles.css changes:

  • <kbd>: key styling using the site's line, soft-background and monospace tokens. Used by the Get started key combos.
  • Node.js help width: .page-heading .evidence-details { max-width: 730px; } keeps the Get started #install-node collapsible at the lede's width. It is currently the only collapsible in a page heading.
  • Collapsible indentation: .evidence-details[open]::details-content indents open content by 1rem with a 1px left border (0.65rem at ≤640px), so nested levels step in at any depth without per-instance classes. Browsers without ::details-content support (before Chrome 131, Safari 18.4 and Firefox 143) show the content unindented.

The indentation also applies to the one-level .evidence-details collapsibles on first-investigation/, guides/javascript/ and the showcase/ pages for Aegis, CTF, DX-Ball, Notion and TH04. The home page uses .home-evidence-details and is unaffected.

Validation

  • python3 scripts/website.py check: site verification passed. Four maintenance regression tests failed locally, and they fail the same way on unmodified main.
  • oxfmt --check passes.
  • Not previewed in a browser: rendering, mobile widths and the affected showcase pages are unverified.

🤖 Generated with Claude Code


🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/morluto/rea/pull/1699 **Author:** [@kaoru0822-kitauji](https://github.com/kaoru0822-kitauji) **Created:** 10/11/2026 **Status:** ✅ Merged **Merged:** 10/11/2026 **Merged by:** [@kaoru0822-kitauji](https://github.com/kaoru0822-kitauji) **Base:** `main` ← **Head:** `style/website-help-sections` --- ### 📝 Commits (1) - [`82b0585`](https://github.com/morluto/rea/commit/82b058509315254f26d1dec5b6157848bfe3d4df) style(website): kbd, install-node width and nested collapsible indentation ### 📊 Changes **1 file changed** (+21 additions, -0 deletions) <details> <summary>View changed files</summary> 📝 `website/public/assets/styles.css` (+21 -0) </details> ### 📄 Description ## Summary Adds the styles for the help sections merged in #1684, #1688 and #1689. Only `website/public/assets/styles.css` changes: - **`<kbd>`**: key styling using the site's line, soft-background and monospace tokens. Used by the Get started key combos. - **Node.js help width**: `.page-heading .evidence-details { max-width: 730px; }` keeps the Get started `#install-node` collapsible at the lede's width. It is currently the only collapsible in a page heading. - **Collapsible indentation**: `.evidence-details[open]::details-content` indents open content by 1rem with a 1px left border (0.65rem at ≤640px), so nested levels step in at any depth without per-instance classes. Browsers without `::details-content` support (before Chrome 131, Safari 18.4 and Firefox 143) show the content unindented. The indentation also applies to the one-level `.evidence-details` collapsibles on `first-investigation/`, `guides/javascript/` and the `showcase/` pages for Aegis, CTF, DX-Ball, Notion and TH04. The home page uses `.home-evidence-details` and is unaffected. ## Validation - `python3 scripts/website.py check`: site verification passed. Four maintenance regression tests failed locally, and they fail the same way on unmodified `main`. - `oxfmt --check` passes. - Not previewed in a browser: rendering, mobile widths and the affected showcase pages are unverified. 🤖 Generated with [Claude Code](https://claude.com/claude-code) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
bsakaguchi 2026-10-31 00:54:48 +00:00
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
morluto/rea#4761
No description provided.