fix(docs): consistent hover styling for inline-code links#2213
Conversation
…provider, context, hooks, and query utilities are now exported from `@namehash/namehash-ui`.
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (4)
📝 WalkthroughWalkthroughThis PR refines link hover and underline animation behavior across the ENSNode documentation site. Component back-navigation and hosted links remove hover color changes and narrow transitions to text-underline-offset. Global Starlight CSS updates align markdown link hover colors and refine underline animation mechanics. ChangesLink hover and underline animation refinement
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Pull request overview
Small CSS-only tweak in the docs site to make link hover styling consistent, particularly for inline-code links inside markdown paragraphs and lists, plus minor trailing-whitespace cleanups in comments.
Changes:
- Add underline-offset hover transition for
a:has(code)links in markdown paragraphs/list items. - Switch hover color tokens from
--sl-color-accent/--sl-color-accent-highto--sl-color-text-accent, and add a heading-link hover color rule. - Clean up trailing whitespace in several CSS comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Greptile SummaryThis PR standardises hover styling across inline-code links and plain-text links in the ENSNode docs site. It removes per-element hover colour overrides (previously using
Confidence Score: 5/5Pure CSS and markup styling changes scoped to the docs site; no logic, data, or API surface is touched. All changes are presentational — hover colour tokens, transition properties, and Tailwind utility classes on docs components. The new docs/ensnode.io/src/styles/starlight.css — the two identical underline-animation blocks could be consolidated, but this is a minor maintainability point and does not affect correctness. Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[Link hovered] --> B{Is it inside .sl-markdown-content?}
B -- Yes --> C[a:hover rule sets color to --sl-color-text-accent]
B -- No --> D[No color change - stays at default]
C --> E{Link type}
E -- Plain-text link in p / li --> F[transition: text-underline-offset 0.2s\nunderline-offset 4px to 2px]
E -- Inline-code link in p / li --> G[transition: text-underline-offset 0.2s\nunderline-offset 4px to 2px]
E -- Link in aside --> H[transition: text-underline-offset 0.2s\nunderline-offset 4px to 2px]
E -- Tab role link --> I[No underline animation]
D --> J{Back-link button?}
J -- Yes --> K[Tailwind group-hover: underline-offset 4px to 2px]
J -- No --> L[No hover effect]
Reviews (4): Last reviewed commit: "updates" | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
…ode-link-styling Brings in PR #2208 component-level hover cleanups (HostedEnsNodeInstance, OmnigraphStaticExampleSet, enskit/example.mdx, enssdk/example.mdx) and the broader `a:hover` override in starlight.css. Conflict in starlight.css resolved by: - Keeping #2208's broader `.sl-markdown-content a:hover` override. - Dropping our narrower `> p a` / `li a` hover rule (redundant under #2208's selector). - Keeping the code-link underline-offset rule from this branch.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
docs/ensnode.io/src/styles/starlight.css (1)
218-241:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winRemove empty lines before declarations to satisfy stylelint.
The stylelint rule
declaration-empty-line-beforeflags the empty lines at lines 224 and 236. Remove them for consistency with the project's CSS formatting rules.🧹 Proposed fix
.sl-markdown-content > p a:not(:has(code), [role="tab"]), .sl-markdown-content :is(ul, ol) > li a:not(:has(code), [role="tab"]), .starlight-aside__content a { text-decoration: underline; text-underline-offset: 4px; - transition: text-underline-offset 0.2s ease-in-out; - &:hover { text-underline-offset: 2px; } } .sl-markdown-content > p a:has(code):not([role="tab"]), .sl-markdown-content :is(ul, ol) > li a:has(code):not([role="tab"]) { text-decoration: underline; text-underline-offset: 4px; - transition: text-underline-offset 0.2s ease-in-out; &:hover { text-underline-offset: 2px; } }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@docs/ensnode.io/src/styles/starlight.css` around lines 218 - 241, Remove the blank lines that precede declarations inside the rule blocks for the selectors ".sl-markdown-content > p a:not(:has(code), [role="tab"]), .sl-markdown-content :is(ul, ol) > li a:not(:has(code), [role="tab"]), .starlight-aside__content a" and ".sl-markdown-content > p a:has(code):not([role="tab"]), .sl-markdown-content :is(ul, ol) > li a:has(code):not([role="tab"])" so there are no empty lines immediately before properties like "text-decoration" and "text-underline-offset" (remove the blank lines currently above those declarations to satisfy the declaration-empty-line-before stylelint rule).
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@docs/ensnode.io/src/styles/starlight.css`:
- Around line 218-241: Remove the blank lines that precede declarations inside
the rule blocks for the selectors ".sl-markdown-content > p a:not(:has(code),
[role="tab"]), .sl-markdown-content :is(ul, ol) > li a:not(:has(code),
[role="tab"]), .starlight-aside__content a" and ".sl-markdown-content > p
a:has(code):not([role="tab"]), .sl-markdown-content :is(ul, ol) > li
a:has(code):not([role="tab"])" so there are no empty lines immediately before
properties like "text-decoration" and "text-underline-offset" (remove the blank
lines currently above those declarations to satisfy the
declaration-empty-line-before stylelint rule).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: d6d887eb-1be4-4c5f-a317-6d99d7ec7f7e
📒 Files selected for processing (5)
docs/ensnode.io/src/components/molecules/HostedEnsNodeInstance.astrodocs/ensnode.io/src/components/organisms/OmnigraphStaticExampleSet.astrodocs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/example.mdxdocs/ensnode.io/src/content/docs/docs/integrate/integration-options/enssdk/example.mdxdocs/ensnode.io/src/styles/starlight.css
Y3drk
left a comment
Y3drk
left a comment
There was a problem hiding this comment.
Looks good to me.
Left two minor comments that would be cool to address before merging.
|
Actionable comments posted: 0 |
Lite PR
Tip: Review docs on the ENSNode PR process
Summary
Why
Testing
Notes for Reviewer (Optional)
Pre-Review Checklist (Blocking)