Rename everything to skippy and center skippy (#27420)

4 files changed, 20 insertions, 19 deletions

diff --git a/site/_includes/skippy.html b/site/_includes/skippy.html
index 2c73089bc..ec7507d53 100644
--- a/site/_includes/skippy.html
+++ b/site/_includes/skippy.html
@@ -1,5 +1,3 @@
-<a id="skippy" class="sr-only sr-only-focusable" href="#content">
-  <div class="container">
-    <span class="skiplink-text">Skip to main content</span>
-  </div>
+<a class="skippy sr-only sr-only-focusable" href="#content">
+  <span class="skippy-text">Skip to main content</span>
 </a>
diff --git a/site/docs/4.1/assets/scss/_skiplink.scss b/site/docs/4.1/assets/scss/_skiplink.scss
deleted file mode 100644
index 7ca3074a8..000000000
--- a/site/docs/4.1/assets/scss/_skiplink.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-// stylelint-disable selector-max-id
-
-#skippy {
-  display: block;
-  padding: 1em;
-  color: #fff;
-  background-color: $bd-purple;
-  outline: 0;
-
-  .skiplink-text {
-    padding: .5em;
-    outline: 1px dotted;
-  }
-}
diff --git a/site/docs/4.1/assets/scss/_skippy.scss b/site/docs/4.1/assets/scss/_skippy.scss
new file mode 100644
index 000000000..db971d114
--- /dev/null
+++ b/site/docs/4.1/assets/scss/_skippy.scss
@@ -0,0 +1,17 @@
+.skippy {
+  display: block;
+  padding: 1em;
+  color: $white;
+  text-align: center;
+  background-color: $bd-purple;
+  outline: 0;
+
+  @include hover {
+    color: $white;
+  }
+}
+
+.skippy-text {
+  padding: .5em;
+  outline: 1px dotted;
+}
diff --git a/site/docs/4.1/assets/scss/docs.scss b/site/docs/4.1/assets/scss/docs.scss
index 706bde44e..0f7797103 100644
--- a/site/docs/4.1/assets/scss/docs.scss
+++ b/site/docs/4.1/assets/scss/docs.scss
@@ -34,7 +34,7 @@
 @import "masthead";
 @import "ads";
 @import "content";
-@import "skiplink";
+@import "skippy";
 @import "sidebar";
 @import "footer";
 @import "component-examples";