Make website more mobile friendly

src/components/ButtonSecondary.astro

@@ -7,7 +7,7 @@ export interface Props {
 }
 const { link, icon, external } = Astro.props
 
-const buttonPaddingX = 'px-[.75rem]'
+const buttonPaddingX = 'md:px-[.75rem] px-[.5rem]'
 const buttonPaddingY = 'py-[.5rem]'
 ---
 

src/components/content/global/Navbar.astro

@@ -36,6 +36,7 @@ const mainButtonPaddingY = 'py-[.5rem]'
                 class=`mr-auto text-[1.25rem] font-bold hover:underline focus-visible:underline focus-visible:outline-none ${mainButtonPaddingX} ${mainButtonPaddingY}`
                 >{homeText}</a
             >
+            <div class={`sm:flex items-center hidden ${spacing}`}>
                 {
                     links.map((link) => (
                         <ButtonSecondary link={link.link}>
@@ -43,6 +44,7 @@ const mainButtonPaddingY = 'py-[.5rem]'
                         </ButtonSecondary>
                     ))
                 }
+            </div>
         </nav>
     </div>
 </section>

src/components/content/index/Hero.astro

@@ -2,11 +2,11 @@
 // @ts-ignore
 import { Picture } from 'astro-imagetools/components'
 
-const viewHeight = 'h-[30rem]'
-const padding = 'p-[2rem]'
+const viewHeight = 'md:h-[30rem] sm:h-[15rem] h-[17rem]'
+const padding = 'p-[1rem] pb-[3.5rem] md:p-[2rem] sm:pb-[2rem]'
 
 const textMainSize = 'text-[2rem]'
-const textEmphasisSize = 'text-[4rem]'
+const textEmphasisSize = 'md:text-[4rem] text-[3rem]'
 const textEmphasisLineHeight = 'leading-[3.5rem]'
 
 const text = ['Hello', ', I am', 'Ethan Reece', 'and I do ', 'web stuff', '.']
@@ -15,8 +15,10 @@ const imageAlt = 'black and white portrait of myself'
 ---
 
 <section class={`w-full ${viewHeight} ${padding}`}>
-    <header class="mx-auto flex h-full max-w-page-w items-center">
-        <h1 class={`font-medium ${textMainSize}`}>
+    <header
+        class="mx-auto flex h-full max-w-page-w items-center text-center sm:max-w-[32rem] sm:text-left md:max-w-page-w"
+    >
+        <h1 class={`font-medium ${textMainSize} w-full sm:w-auto`}>
             <i
                 ><b><u>{text[0]}</u></b><span class="text-font-light"
                     >{text[1]}</span
@@ -33,7 +35,7 @@ const imageAlt = 'black and white portrait of myself'
                 <b class="font-extrabold"><u>{text[4]}</u></b></i
             ><span class="text-font-light">{text[5]}</span>
         </h1>
-        <div class="ml-auto h-full">
+        <div class="ml-auto hidden h-full sm:flex">
             <Picture
                 src={image}
                 alt={imageAlt}

src/components/content/index/Subsection.astro

@@ -19,12 +19,12 @@ const background = 'bg-[#00000020]'
     href={url}
     target="_blank"
     rel="noopener noreferrer"
-    class={`block rounded ${
+    class={`block md:rounded ${
         url &&
         `hover:bg-background-hover hover:text-font-hover focus-visible:bg-background-hover focus-visible:text-font-hover focus-visible:outline-none`
     } ${fontSize} ${margin} ${background}`}
 >
-    <div class={`mx-auto max-w-page-w space-y-paragraph`}>
+    <div class={`mx-auto w-full md:w-auto max-w-page-w space-y-paragraph`}>
         <span class={`flex flex-col`}>
             <h3 class={`font-bold ${fontSizeH3}`}>{title}</h3>
             {

tailwind.config.cjs

@@ -39,6 +39,10 @@ module.exports = {
         zIndex: {
             navbar: '100',
         },
+        screens: {
+            sm: '640px',
+            md: '768px',
+        },
     },
     plugins: [require('tailwindcss-hero-patterns')],
 }