From 82bcc8bb4c0cb01f3a52a2d8237043de9096789e Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 20 Dec 2018 00:32:16 +0000
Subject: [PATCH] Add skip to main content link

Fixes #1
---
 package.json | 1 +
 src/App.vue  | 7 +++++++
 tailwind.js  | 5 ++++-
 yarn.lock    | 4 ++++
 4 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 037e479..66f9aef 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "node-sass": "^4.10.0",
     "sass-loader": "^7.1.0",
     "tailwindcss": "^0.7.2",
+    "tailwindcss-skip-link": "^1.0.1",
     "vue": "^2.5.17"
   },
   "devDependencies": {
diff --git a/src/App.vue b/src/App.vue
index 78505ac..5669fd1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,7 @@
 <template>
   <div id="app">
+    <a href="#0" class="skip-link text-white bg-black-60 py-1 px-2 rounded-b-lg focus:no-underline focus:outline-none">Skip to main content</a>
+
     <Welcome title="Rebuilding Bartik"/>
   </div>
 </template>
@@ -18,5 +20,10 @@ export default {
 <style lang="sass">
 @tailwind preflight
 @tailwind components
+
+.skip-link:focus
+  left: 50%
+  transform: translateX(-50%)
+
 @tailwind utilities
 </style>
diff --git a/tailwind.js b/tailwind.js
index 001bd6b..7c6eb8c 100644
--- a/tailwind.js
+++ b/tailwind.js
@@ -55,6 +55,8 @@ let colors = {
   'grey-lightest': '#F6F6F2',
   'white': '#ffffff',
 
+  'black-60': 'rgba(0, 0, 0, .6)',
+
   'blue-dark': '#2779bd',
   'blue': '#3490dc',
   'blue-light': '#bcdefa',
@@ -825,7 +827,7 @@ module.exports = {
     overflow: ['responsive'],
     padding: ['responsive'],
     pointerEvents: ['responsive'],
-    position: ['responsive'],
+    position: ['responsive', 'focus'],
     resize: ['responsive'],
     shadows: ['responsive', 'hover', 'focus'],
     svgFill: [],
@@ -864,6 +866,7 @@ module.exports = {
       // center: true,
       // padding: '1rem',
     }),
+    require('tailwindcss-skip-link')(),
   ],
 
 
diff --git a/yarn.lock b/yarn.lock
index a186d5c..aaebac7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6542,6 +6542,10 @@ table@^5.0.2:
     slice-ansi "1.0.0"
     string-width "^2.1.1"
 
+tailwindcss-skip-link@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/tailwindcss-skip-link/-/tailwindcss-skip-link-1.0.1.tgz#b965624ed0b007ddd33f0326f2719d9a88b857c7"
+
 tailwindcss@^0.7.2:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-0.7.2.tgz#a81e0c532911ec665a749c03d821a17b49e30165"