Update to work with dynamic types on iOS (#406)

Author: EmmaDawsonDev

components/Header/Header.tsx

@@ -14,7 +14,7 @@ export const Header = ({ handleNavClick, showNavMobile }: IHeaderProps) => {
 		<>
 			<header>
 				<div className={styles.topBanner}>
-					<Link href="/">Accessible Web Dev</Link>
+					<Link href="/">AWD</Link>
 					<div className={styles.buttonsContainer}>
 						<ThemeSwitcher />
 						<button

components/SkipLink/SkipLink.module.css

@@ -11,7 +11,7 @@
   padding: 0.3rem;
   border: 1px solid var(--primary);
   z-index: 100;
-  transform: translateY(-100px); 
+  transform: translateY(-500px); 
   transition: all .4s ease-in-out;
 }
 

styles/globals.css

@@ -29,6 +29,12 @@
 	--headerHeight: 3rem;
 }
 
+@supports (font: -apple-system-body) {
+  html {
+    font: -apple-system-body;
+  }
+}
+
 html,
 body {
 	padding: 0;