feat(overview): add GitHub icon link to nav on every page#589
Merged
Conversation
The github wordmark SVG is inlined (rather than referenced as an <img>) so its fill="currentColor" inherits from the .page-nav green color and follows the same hover transition / touch-target padding as the existing prev / index / next anchors. Implementation: * For pages 01-17 (which already have <nav class="page-nav">), the link is inserted as the FIRST child of the nav so it sits to the left of the arrow controls. * For index.html (which previously had no .page-nav — eyebrow held just the title + logo), a minimal <nav class="page-nav"> is added containing only the GitHub link. The aria-label is 'External links' rather than 'Page navigation' since it doesn't navigate within the deck. * The SVG is sized at 0.85em (width and height) so it tracks the nav font-size while matching the visual weight of the arrow glyphs, which leave intrinsic side bearings inside their font box. fill="currentColor" keeps the icon green on default and picks up the hover --text color automatically. * The link uses target="_blank" rel="noopener" so the source repo opens in a new tab — readers stay on the deck after viewing source.
The <a> tag wrapping the GitHub SVG now carries:
title='Taskplane repository' desktop browser tooltip on hover.
aria-label='Taskplane repository' accessible name announced by
screen readers (replaces the
earlier 'GitHub repository').
<a> has no 'alt' attribute (that's an <img>-only thing), but
aria-label is the same accessibility primitive — it overrides any
descendant text or graphic and gives assistive tech a single
authoritative label. 'Taskplane repository' is more specific than
'GitHub repository' since the link goes to one particular repo.
All 18 pages updated via sed since the pattern was identical.
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.
Adds a GitHub icon to the right side of the eyebrow on every page of the Taskplane Overview microsite, linking to the source repository. Positioned to the left of the existing prev / index / next nav arrows so the deck-navigation controls stay grouped on the right edge.
Implementation
<img>) sofill="currentColor"picks up the green from.page-navand follows the same hover-to---texttransition as the arrow glyphs.<nav class="page-nav">so the icon sits left of the arrows.index.html— previously had no.page-nav(eyebrow held only title + logo). Added a minimal<nav class="page-nav" aria-label="External links">containing just the GitHub link, so the icon still appears in the same screen position. The aria-label intentionally says 'External links' rather than 'Page navigation' since it doesn't navigate within the deck.0.85em— tracks the nav font-size while compensating for the fact that the SVG fills its full viewBox whereas arrow glyphs leave intrinsic side bearings, so the visual weight matches.target="_blank" rel="noopener"— repo opens in a new tab.To check before merging
.page-nav a svg { width / height }inshared.cssNo release. Pure microsite UI enhancement.