diff --git a/docs/_includes/_skip-link.njk b/docs/_includes/_skip-link.njk new file mode 100644 index 0000000000..3c0216630e --- /dev/null +++ b/docs/_includes/_skip-link.njk @@ -0,0 +1 @@ +Skip to content \ No newline at end of file diff --git a/docs/_includes/layout-basic.njk b/docs/_includes/layout-basic.njk index 8d44c3d89a..37861a5f64 100644 --- a/docs/_includes/layout-basic.njk +++ b/docs/_includes/layout-basic.njk @@ -1,8 +1,9 @@ --- layout: layout-base.njk --- +{% include '_skip-link.njk' %} {% include '_nav.njk' %} -
+
{{ content | safe }}
{% include '_foot.njk' %} diff --git a/docs/_includes/layout-blog-index.njk b/docs/_includes/layout-blog-index.njk index 0346707ef1..7070b36d5b 100644 --- a/docs/_includes/layout-blog-index.njk +++ b/docs/_includes/layout-blog-index.njk @@ -1,10 +1,10 @@ --- layout: layout-base.njk --- +{% include '_skip-link.njk' %} {% include '_nav.njk' %} - -
+
{{ content | safe }}
diff --git a/docs/_includes/layout-blog.njk b/docs/_includes/layout-blog.njk index 018d5ac5a2..30b10eb0ea 100644 --- a/docs/_includes/layout-blog.njk +++ b/docs/_includes/layout-blog.njk @@ -1,9 +1,10 @@ --- layout: layout-base.njk --- +{% include '_skip-link.njk' %} {% include '_nav.njk' %} -
+

{{ title }}

{% if tagline %}

{{ tagline }}

{% endif %} diff --git a/docs/index.html b/docs/index.html index 681965ba84..1d6ba8c8ce 100644 --- a/docs/index.html +++ b/docs/index.html @@ -8,6 +8,7 @@ + Skip to content {% renderFile "./docs/_snippets/pf-bar-html.md" %}

diff --git a/docs/main.css b/docs/main.css index 6c5f464344..b5a99c77de 100644 --- a/docs/main.css +++ b/docs/main.css @@ -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;