Add a link to skip to the main content

While people using screen readers already have keyboard shortcuts to
jump to the <main> tag, there are people who navigate the page with the
keyboard using just the tab key, and for them, this link provides a way
to save time and start reading the main content instead of having to
manually go through all the navigation links every time a new page is
loaded.

Note that we had to add an additional `width: 0` rule because
Foundation's `element-invisible` would apply `1px` and the test checking
for `visible: :hidden` would faile.

app/assets/stylesheets/layout/skip_to_main_content.scss

@@ -0,0 +1,22 @@
+.skip-to-main-content {
+  @include grid-column-gutter;
+
+  a {
+    &:not(:focus) {
+      @include element-invisible;
+      width: 0 !important;
+    }
+
+    &:focus {
+      @include body-colors;
+
+      $outline-size: $focus-inner-width + $focus-middle-width + $focus-outer-width;
+
+      padding: 0.4rem;
+      position: absolute;
+      $global-left: $outline-size;
+      top: $outline-size;
+      z-index: 1000;
+    }
+  }
+}