improve readability on small screens

This commit is contained in:
Brandon Egger 2023-04-10 22:46:06 -05:00
parent 9944157950
commit ba55668bcb

View File

@ -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>