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">
<LinkButton
href="/search"
className={`focus-outline p-1 ${
className={`focus-outline p-3 sm:p-1 ${
activeNav === "search" ? "active" : ""
}`}
ariaLabel="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
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>
@@ -119,16 +119,16 @@ const { activeNav } = Astro.props;
@apply fill-skin-base w-6 h-6 scale-125;
}
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 {
@apply flex flex-col sm:flex-row sm:space-x-4;
}
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 {
@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 {
@apply underline underline-offset-4 decoration-wavy decoration-2;
@@ -145,8 +145,12 @@ const { activeNav } = Astro.props;
nav button svg {
@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 {
@apply hover:rotate-12;
@apply hover:rotate-12 scale-125 sm:scale-100;
}
.icon-container {