PLANET-7981: Implement Skip to content link (#69)

* PLANET-7981: Implement Skip to content link

Ref: https://greenpeace-planet4.atlassian.net/browse/PLANET-7981

- Apply anchor to countries list selector
- Include new styles

Author: GP-Dan-Tovbein

index.html

@@ -47,6 +47,10 @@
   height="0" width="0" style="display:none;visibility:hidden;"></iframe></noscript>
   <!-- End GPI Google Tag Manager (noscript) -->
 
+  <ul class="skip-links">
+    <li><a href="#country-list-wrapper">Skip to Content</a></li>
+  </ul>
+
   <header>
     <div class="page-header-background">
       <img alt="Greenpeace" src="/static/img/image.jpg" srcset="/static/img/image.jpg 1200w, /static/img/image-992w.jpg 992w, /static/img/image-768w.jpg 768w, /static/img/image-575w.jpg 575w, /static/img/image-320w.jpg 320w" class="page-header-image">

static/scss/base/_body.scss

@@ -16,6 +16,29 @@ body {
   overflow-y: hidden;
 }
 
+.skip-links {
+  margin: 0 !important;
+  padding: 0 !important;
+  list-style-type: none;
+  font-family: var(--font-family-tertiary);
+
+  a {
+    font-size: var(--font-size-m--font-family-tertiary);
+    position: absolute;
+    color: var(--link--color);
+    top: -50px;
+    left: 15px;
+    z-index: 100;
+
+    &:focus {
+      top: 60px;
+      background-color: white;
+      border-radius: 4px;
+      padding: 5px 10px;
+    }
+  }
+}
+
 :root {
   --header-height: 552px;