add skip link

Author: hmillersarah

web-components/nav-header/nav-header.css

@@ -206,6 +206,30 @@ form div > img {
     margin-left: 0.625em;
 }
 
-@media screen and (max-width: 768px) {
+.skip-link {
+    clip: rect(1px, 1px, 1px, 1px);
+    position: absolute !important;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+}
 
+.skip-link:focus {
+    background-color: #f1f1f1;
+    border-radius: 3px;
+    /* box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); */
+    clip: auto !important;
+    color: #21759b;
+    display: block;
+    font-size: 0.875rem;
+    font-weight: bold;
+    height: auto;
+    left: 0.3125em;
+    line-height: normal;
+    padding: 1em;
+    /* padding: 15px 23px 14px; */
+    text-decoration: none;
+    top: 0.3125em;
+    width: auto;
+    z-index: 3000;
 }

web-components/nav-header/nav-header.html

@@ -2,6 +2,7 @@
 <link href="jekyll-tipue-search/assets/tipuesearch/css/tipuesearch-component.css" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <header>
+    <a class="skip-link" href="#main">Skip to content</a>
     <nav aria-label="masthead">
         <section class="masthead">
             <a href="index.html" class="logo">