fix: header anchor-icon spacing + API reference header link#980
Open
Iamfle4ka wants to merge 1 commit into
Open
fix: header anchor-icon spacing + API reference header link#980Iamfle4ka wants to merge 1 commit into
Iamfle4ka wants to merge 1 commit into
Conversation
Two small UI fixes: - Widen the heading anchor (chain) icon gap via Starlight's --sl-anchor-icon-gap (0.25em → 0.5em) so the icon sits clearly to the side of the heading instead of colliding with the last word. - Add a header link to the Keboola API reference (api.keboola.com) by overriding Starlight's SocialIcons component. Styled as a refined, secondary pill so it sits next to the KAI button without competing. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Two small header/UI fixes.
1. Heading anchor (chain) icon spacing
The chain icon next to
h2/h3headings was colliding with the last word of the heading. Widened Starlight's--sl-anchor-icon-gap(0.25em→0.5em) on.sl-heading-wrapperso the icon sits clearly to the side. Uses Starlight's intended customization point, so the icon still wraps with the last word rather than dropping onto its own line.2. API reference header link
Adds a link to api.keboola.com in the site header by overriding Starlight's
SocialIconscomponent (the natural, view-transition-safe slot in the header's right-group — no JS injection needed). Styled as a refined, secondary</> APIpill (.header-api-link) using existing design tokens, deliberately quieter than the KAI button so the two sit together without competing. Hover shifts border/icon/label to Keboola blue; dark mode handled via tokens.Files
astro.config.mjs— register theSocialIconsoverridesrc/components/SocialIcons.astro— new override rendering the API link + the defaultsrc/styles/custom.css— anchor-gap fix +.header-api-linkstylingVerify
npm run buildis clean (254 pages)..right-group > .social-icons, and verified light/dark/hover in a production preview.Note: like Starlight's social icons, the link lives in
.right-group, which is hidden below ~50rem (desktop-only for now). Can add it to the mobile menu as a follow-up if wanted.🤖 Generated with Claude Code