Add skip link styling (#2454)

With styles inspired by @glin. Fixes #2138
r-lib · Apr 17, 2024 · 627e8e5 · 627e8e5
1 parent 8d88d93
commit 627e8e5
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/NEWS.md b/NEWS.md
@@ -1,5 +1,6 @@
 # pkgdown (development version)
 
+* The skip link now becomes visible when focussed (#2138). Thanks to @glin for the styles!
 * `build_reference_index()` gives more informative errors if your `contents` field is malformed (#2323).
 * The left and right footers no longer contain an extra empty paragraph tag and the footer gains additional padding-top to keep the whitespace constant (#2381).
 * `build_article_index()` and `build_reference_index()` use an improved BS5 template that correctly wraps each section description in a `<div>`, rather than a `<p>`. This eliminates an empty pargraph tag that preceded each section description (#2352).

diff --git a/inst/BS5/assets/pkgdown.scss b/inst/BS5/assets/pkgdown.scss
@@ -312,6 +312,16 @@ img.logo {
   img {width: 40px;}
 }
 
+// Ensure skip link is visible if focussed
+a[href='#main'] {
+  position: absolute;
+  margin: 4px;
+  padding: 0.75rem;
+  background-color: $body-bg;
+  text-decoration: none;
+  z-index: 2000;
+}
+
 /* Footnotes ---------------------------------------------------------------- */
 
 a.footnote-ref {