Rename everything to skippy and center skippy (#27420)

Author: MartijnCuppens

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>

site/docs/4.1/assets/scss/_skiplink.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;
+}

site/docs/4.1/assets/scss/_skippy.scss

@@ -34,7 +34,7 @@
 @import "masthead";
 @import "ads";
 @import "content";
-@import "skiplink";
+@import "skippy";
 @import "sidebar";
 @import "footer";
 @import "component-examples";