Skip to content

docs: add skip navigation link #2550

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zeroedin merged 2 commits into from
Jul 12, 2023
Merged

docs: add skip navigation link #2550

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6a6fb6b
docs: add skip navigation link
zeroedin Jul 12, 2023
2fcc2bf
docs: reduce transform offset
zeroedin Jul 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/_includes/_skip-link.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<a href="#main" class="skip-to-content-link">Skip to content</a>
3 changes: 2 additions & 1 deletion docs/_includes/layout-basic.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
---
layout: layout-base.njk
---
{% include '_skip-link.njk' %}
{% include '_nav.njk' %}
<main class="basic">
<main id="main" class="basic">
{{ content | safe }}
</main>
{% include '_foot.njk' %}
4 changes: 2 additions & 2 deletions docs/_includes/layout-blog-index.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
---
layout: layout-base.njk
---
{% include '_skip-link.njk' %}
{% include '_nav.njk' %}


<main class="basic">
<main id="main"class="basic">
{{ content | safe }}

<div class="posts">
Expand Down
3 changes: 2 additions & 1 deletion docs/_includes/layout-blog.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
---
layout: layout-base.njk
---
{% include '_skip-link.njk' %}
{% include '_nav.njk' %}

<main class="blog">
<main id="main" class="blog">
<header class="band header">
<h1>{{ title }}</h1>
{% if tagline %}<p class="tagline">{{ tagline }}</p>{% endif %}
Expand Down
1 change: 1 addition & 0 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
<link rel="stylesheet" href="home.css">

<body>
<a href="#home-header" class="skip-to-content-link">Skip to content</a>
{% renderFile "./docs/_snippets/pf-bar-html.md" %}
<header class="band accent" id="home-header">
<h1>
Expand Down
22 changes: 22 additions & 0 deletions docs/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,28 @@ p:empty {
display: none;
}

.skip-to-content-link {
background: var(--pf-global--BackgroundColor--100, #fff);
border: 0px;
border-bottom-left-radius: var(--pf-global--BorderRadius--sm, 0.25rem);
border-bottom-right-radius: var(--pf-global--BorderRadius--sm, 0.25rem);
display: flex;
padding-inline: var(--pf-global--spacer--md, 1rem);
padding-block: var(--pf-global--spacer--xs, 0.25rem);
position: absolute;
transform: translateY(-101%);
transition: transform 0.2s;
width: max-content;
/* Header bar is set to z-index: 300 */
z-index: 301;
}

.skip-to-content-link:focus {
transform: translateY(0%);
position: fixed;
top: 0;
}

.sr-only {
position: absolute;
width: 1px;
Expand Down