feat: more accessible styles for mobile

serhez · Apr 15, 2024 · a8cb419 · a8cb419
1 parent 9b2d7d1
commit a8cb419
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 12 deletions.
diff --git a/app.vue b/app.vue
@@ -36,6 +36,6 @@ h2 {
 }
 
 p {
-    text-align: justify;
+    @apply lg:text-justify text-left;
 }
 </style>
diff --git a/components/navigation.vue b/components/navigation.vue
@@ -21,20 +21,19 @@ function isCurrent(href: string) {
             <ul class="flex gap-10 text-sm tracking-wide backdrop-blur">
                 <li v-for="route in routes" :key="route.name">
                     <nuxt-link :class="[
-            'relative block transition group hover:before:scale-x-100 hover:before:origin-left before:w-full before:h-0.5 before:origin-right before:transition-transform before:duration-500 before:scale-x-0 before:bg-zinc-800 before:absolute before:left-0 before:bottom-0',
-            isCurrent(route.href)
-                ? 'relative block transition group before:scale-x-100 hover:before:origin-left before:w-full before:h-0.5 before:origin-right before:transition-transform before:duration-500 before:bg-zinc-800 before:absolute before:left-0 before:bottom-0'
-                : ''
-        ]" :href="route.href" :aria-label="route.name" :external="route.external" rel="prefetch">
+                        'relative block transition group hover:before:scale-x-100 hover:before:origin-left before:w-full before:h-0.5 before:origin-right before:transition-transform before:duration-500 before:scale-x-0 before:bg-zinc-800 before:absolute before:left-0 before:bottom-0',
+                        isCurrent(route.href)
+                            ? 'relative block transition group before:scale-x-100 hover:before:origin-left before:w-full before:h-0.5 before:origin-right before:transition-transform before:duration-500 before:bg-zinc-800 before:absolute before:left-0 before:bottom-0'
+                            : ''
+                    ]" :href="route.href" :aria-label="route.name" :external="route.external" rel="prefetch">
                         <span v-text="route.name" />
                     </nuxt-link>
                 </li>
             </ul>
         </nav>
 
         <popover v-slot="{ open }" class="pointer-events-auto relative md:hidden">
-            <popover-button
-                class="group flex items-center px-5 py-2 text-sm font-medium text-zinc-500 focus:outline-none">
+            <popover-button class="group flex items-center text-md font-medium focus:outline-none">
                 Menu
                 <icon name="heroicons-solid:chevron-down" class="ml-2 h-4 w-4 transition duration-300"
                     :class="{ 'rotate-180': open }" />
@@ -65,8 +64,8 @@ function isCurrent(href: string) {
                             <template v-for="route in routes" :key="route.name">
                                 <li v-if="!route.hidden">
                                     <nuxt-link class="block py-2" :href="route.href" :class="{
-            'text-zinc-200': isCurrent(route.href)
-        }" :external="route.external" @click="close" v-text="route.name" />
+                                        'text-zinc-200': isCurrent(route.href)
+                                    }" :external="route.external" @click="close" v-text="route.name" />
                                 </li>
                             </template>
                         </ul>

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -12,7 +12,7 @@ useHead({
 </script>
 
 <template>
-    <main class="container mx-auto my-16 flex gap-16 max-w-6xl flex-1 flex-col px-6 sm:px-12">
+    <main class="container mx-auto my-16 flex md:gap-16 gap-8 max-w-6xl flex-1 flex-col px-8 sm:px-12">
         <navigation />
         <section class="flex flex-1 flex-col">
             <slot />

diff --git a/pages/index.vue b/pages/index.vue
@@ -78,6 +78,6 @@ h2 {
 }
 
 p {
-    @apply text-xl text-zinc-700;
+    @apply text-base sm:text-lg md:text-xl text-zinc-700;
 }
 </style>