Add skip to main content link

Fixes #1

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": {

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>

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')(),
   ],
 
 

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"