Merge pull request #28 from technikhil314/develop

Author: technikhil314

components/Toast.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="toast" class="fixed right-[20px] top-24 z-2">
+  <div id="toast" class="fixed right-[20px] top-24 z-11">
     <div
       class="
         absolute

components/skipToNavButton.vue

@@ -0,0 +1,28 @@
+<template>
+  <button
+    class="fixed p-4 text-gray-800 bg-gray-300 border border-gray-500 rounded-md  w-52 z-11 top-6 left-6 dark:bg-gray-700 dark:text-gray-50"
+    @click="focusOnMain"
+  >
+    Skip to main content
+  </button>
+</template>
+<script>
+export default {
+  methods: {
+    focusOnMain() {
+      document.getElementsByTagName('main')[0].focus()
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+button {
+  opacity: 0;
+  pointer-events: none;
+}
+button:focus {
+  opacity: 1;
+  pointer-events: all;
+}
+</style>

layouts/main.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="page-root">
+    <SkipToNavButton />
     <Toast />
     <Nuxt />
     <Footer />

package-lock.json

@@ -48,7 +48,7 @@
         </button>
       </template>
     </Navbar>
-    <main>
+    <main class="outline-none" tabindex="0">
       <div
         class="flex items-stretch w-full gap-4 font-mono text-gray-800  dark:text-gray-50"
       >

pages/diff.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="page-contents">
     <Navbar />
-    <main class="text-gray-800 dark:text-gray-50">
+    <main class="text-gray-800 outline-none dark:text-gray-50" tabindex="0">
       <section>
         <header>
           <h1 class="w-full mb-2 text-xl text-center">

pages/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="page-contents">
     <Navbar :show-back-button="true" />
-    <main>
+    <main class="outline-none" tabindex="0">
       <section
         class="
           flex
@@ -18,7 +18,8 @@
           bg-opacity-50
           backdrop-blur-sm
           rounded-md
-          shadow-sm
+          shadow-lg
+          border border-gray-500
           w-full
           z-10
         "
@@ -30,7 +31,7 @@
           >
             <label
               for="toggleScrollInSync"
-              class="text-gray-800 select-none dark:text-gray-50"
+              class="text-sm text-gray-800 select-none dark:text-gray-50"
             >
               Scroll in sync
             </label>

pages/v1/diff.vue

@@ -16,7 +16,8 @@ module.exports = {
     zIndex: {
       '1': 1,
       '2': 2,
-      '10': 10
+      '10': 10,
+      '11': 11
     },
     minHeight: {
       '80': '20rem'