Qihan/MyBlog-Next
1
0
Fork 0
mirror of https://github.com/ChenQihan666/MyBlog-Next.git synced 2026-08-14 11:29:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(a11y): make nav links and buttons bigger on mobile devices

Browse Source 
The navigation links/buttons can be a struggle for mobile devices where users use their finger.
Thus, nav links/buttons are made to be bigger to meet touch size guidelines.
This commit is contained in:
satnaing
2022-11-28 15:43:17 +06:30
parent c9f796f4e6
commit 3442232c35
1 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Header.astro
+10 -6
View File
@@ -58,13 +58,13 @@ const { activeNav } = Astro.props;
<div class="button-wrapper"> <div class="button-wrapper">
<LinkButton <LinkButton
href="/search" href="/search"
className={`focus-outline p-1 ${ className={`focus-outline p-3 sm:p-1 ${
activeNav === "search" ? "active" : "" activeNav === "search" ? "active" : ""
}`} }`}
ariaLabel="search" ariaLabel="search"
title="Search" title="Search"
> >
<svg xmlns="http://www.w3.org/2000/svg" <svg xmlns="http://www.w3.org/2000/svg" class="scale-125 sm:scale-100"
><path ><path
d="M19.023 16.977a35.13 35.13 0 0 1-1.367-1.384c-.372-.378-.596-.653-.596-.653l-2.8-1.337A6.962 6.962 0 0 0 16 9c0-3.859-3.14-7-7-7S2 5.141 2 9s3.14 7 7 7c1.763 0 3.37-.66 4.603-1.739l1.337 2.8s.275.224.653.596c.387.363.896.854 1.384 1.367l1.358 1.392.604.646 2.121-2.121-.646-.604c-.379-.372-.885-.866-1.391-1.36zM9 14c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5z" d="M19.023 16.977a35.13 35.13 0 0 1-1.367-1.384c-.372-.378-.596-.653-.596-.653l-2.8-1.337A6.962 6.962 0 0 0 16 9c0-3.859-3.14-7-7-7S2 5.141 2 9s3.14 7 7 7c1.763 0 3.37-.66 4.603-1.739l1.337 2.8s.275.224.653.596c.387.363.896.854 1.384 1.367l1.358 1.392.604.646 2.121-2.121-.646-.604c-.379-.372-.885-.866-1.391-1.36zM9 14c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5z"
></path> ></path>
@@ -119,16 +119,16 @@ const { activeNav } = Astro.props;
@apply fill-skin-base w-6 h-6 scale-125; @apply fill-skin-base w-6 h-6 scale-125;
} }
nav { nav {
@apply w-full py-2 sm:py-0 flex flex-col items-center sm:justify-end sm:flex-row sm:space-x-4 bg-skin-fill; @apply w-full py-2 sm:py-0 sm:pr-4 flex flex-col items-center sm:justify-end sm:flex-row sm:space-x-4 bg-skin-fill;
} }
nav ul { nav ul {
@apply flex flex-col sm:flex-row sm:space-x-4; @apply flex flex-col sm:flex-row sm:space-x-4;
} }
nav li { nav li {
@apply py-2 text-center my-2 sm:my-0; @apply py-3 sm:py-2 text-center my-1 sm:my-0;
} }
nav a { nav a {
@apply py-2 px-3 font-medium hover:text-skin-accent; @apply px-6 py-3 sm:py-2 sm:px-3 font-medium hover:text-skin-accent;
} }
nav a.active { nav a.active {
@apply underline underline-offset-4 decoration-wavy decoration-2; @apply underline underline-offset-4 decoration-wavy decoration-2;
@@ -145,8 +145,12 @@ const { activeNav } = Astro.props;
nav button svg { nav button svg {
@apply w-6 h-6 fill-skin-base hover:fill-skin-accent; @apply w-6 h-6 fill-skin-base hover:fill-skin-accent;
} }
#theme-btn {
/* @apply w-12 h-12 sm:w-9 sm:h-9 flex justify-center items-center sm:inline-block; */
@apply p-3 sm:p-1;
}
#theme-btn svg { #theme-btn svg {
@apply hover:rotate-12; @apply hover:rotate-12 scale-125 sm:scale-100;
} }
.icon-container { .icon-container {