From ba55668bcb8cf529c5c2a25fb54e5097553ffb2b Mon Sep 17 00:00:00 2001
From: Brandon Egger <brandonegger64@gmail.com>
Date: Mon, 10 Apr 2023 22:46:06 -0500
Subject: [PATCH] improve readability on small screens
---
src/pages/index.tsx | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 543bbb2..901198d 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -30,7 +30,7 @@ const Home: NextPage = () => {
}} className="h-full w-full grid place-items-center">
<div className="space-y-8">
<h1 className="mx-auto text-center font-extrabold text-4xl max-w-lg text-yellow-200">Welcome to the Resource Center for Auditory Training!</h1>
- <div className="flex flex-col w-[400px] mx-auto p-4 bg-neutral-900 border space-y-4 border-neutral-500 rounded-md shadow-lg shadow-neutral-800/50">
+ <div className="flex flex-col w-[300px] sm:w-[400px] mx-auto p-4 bg-neutral-900 border space-y-4 border-neutral-500 rounded-md shadow-lg shadow-neutral-800/50">
<p className="text-center text-lg text-neutral-100 text-xl">Looking for resource recommendations?</p>
<Link href="/resources/survey" className="flex flex-inline font-bold border border-neutral-300 mx-auto bg-yellow-400 hover:bg-yellow-100 p-2 rounded-md animate-expand_in_out">
Start Survey
@@ -59,7 +59,7 @@ const Home: NextPage = () => {
<div className="max-w-5xl mx-auto pt-12">
<h1 className="font-extrabold text-4xl text-center">Want to learn more?</h1>
<div className="flex flex-col pt-8 space-y-6">
- <section className="mx-auto space-x-4">
+ <section className="text-center mx-auto space-x-4">
<h2 className="align-middle inline-block text-lg">
Learn more about the project and team
</h2>
@@ -68,7 +68,7 @@ const Home: NextPage = () => {
<ArrowUpRightIcon className="inline-block align-middle w-5" />
</Link>
</section>
- <section className="mx-auto space-x-4">
+ <section className="text-center mx-auto space-x-4">
<h2 className="align-middle inline-block text-lg">
Request changes or get in touch
</h2>