From b5ba3959c356bdb27ac2925e566025d924e238b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= <gael.poupard@orange.com>
Date: Tue, 26 May 2020 10:35:43 +0200
Subject: [PATCH] docs(skippy): prevent skip links from overlapping header

---
 site/assets/scss/_skippy.scss     | 21 ++++++++++++++-------
 site/layouts/partials/skippy.html | 12 ++++++++----
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/site/assets/scss/_skippy.scss b/site/assets/scss/_skippy.scss
index c573e45484ef..894db70db4e7 100644
--- a/site/assets/scss/_skippy.scss
+++ b/site/assets/scss/_skippy.scss
@@ -1,13 +1,20 @@
+// stylelint-disable declaration-no-important
+
 .skippy {
-  position: fixed;
-  top: .5rem;
-  left: .5rem;
-  z-index: $zindex-fixed;
-  padding: .5rem;
-  color: $white;
   background-color: $bd-purple;
 
-  &:hover {
+  a {
     color: $white;
   }
+
+  &:focus-within a {
+    position: static !important;
+    width: auto !important;
+    height: auto !important;
+    padding: $spacer / 2 !important;
+    margin: $spacer / 4 !important;
+    overflow: visible !important;
+    clip: auto !important;
+    white-space: normal !important;
+  }
 }
diff --git a/site/layouts/partials/skippy.html b/site/layouts/partials/skippy.html
index 8dce2bc4955a..e6bf901a9c94 100644
--- a/site/layouts/partials/skippy.html
+++ b/site/layouts/partials/skippy.html
@@ -1,5 +1,9 @@
-<a class="skippy visually-hidden-focusable" href="#content">Skip to main content</a>
+<div class="skippy overflow-hidden">
+  <div class="container-xl">
+    <a class="visually-hidden-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
 
-{{ if (eq .Page.Layout "docs") }}
-  <a class="skippy visually-hidden-focusable d-none d-md-block" href="#bd-docs-nav">Skip to docs navigation</a>
-{{- end }}
+    {{ if (eq .Page.Layout "docs") }}
+      <a class="visually-hidden-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
+    {{- end }}
+  </div>
+</div>