brandon/uiowaATR
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

added unique in-out animation

Browse Source
This commit is contained in:
Brandon Egger 2023-04-10 21:53:43 -05:00
parent eb014254be
commit 9b926195a4
2 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/pages/index.tsx
View File

@ -30,13 +30,17 @@ const Home: NextPage = () => {
backgroundPosition: `center`, backgroundPosition: `center`,
}} className="h-96"> }} className="h-96">
<div style={{ <div style={{
WebkitBackdropFilter: `blur(15px) contrast(50%)`,
backdropFilter: `blur(15px) contrast(50%)`, backdropFilter: `blur(15px) contrast(50%)`,
}} className="h-full w-full grid place-items-center"> }} className="h-full w-full grid place-items-center">
<div className="space-y-8"> <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> <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-96 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-96 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">Looking for resource recommendations?</p> <p className="text-center text-lg text-neutral-100">Looking for resource recommendations?</p>
<Link href="/resources/survey" className="font-bold border border-neutral-300 mx-auto bg-yellow-400 hover:bg-yellow-100 p-2 rounded-md">start survey</Link> <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
<ArrowUpRightIcon className="inline w-5" />
</Link>
</div> </div>
</div> </div>
</div> </div>
@ -60,8 +64,9 @@ const Home: NextPage = () => {
<div className="max-w-5xl mx-auto pt-12"> <div className="max-w-5xl mx-auto pt-12">
<h1 className="font-extrabold text-4xl text-center">Want to learn more?</h1> <h1 className="font-extrabold text-4xl text-center">Want to learn more?</h1>
<div className="flex flex-col pt-8"> <div className="flex flex-col pt-8">
<Link href="/about" className="shadow-lg shadow-black/50 mx-auto px-4 py-2 bg-yellow-200 rounded-md border border-neutral-900"> <Link href="/about" className="flex flex-inline ease-out duration-200 hover:shadow-md hover:bg-yellow-300 shadow-lg shadow-black/50 mx-auto px-4 py-2 bg-yellow-200 rounded-md border border-neutral-900">
About About
<ArrowUpRightIcon className="inline w-5" />
</Link> </Link>
</div> </div>
</div> </div>

12
tailwind.config.cjs
View File

@ -2,7 +2,17 @@
const config = { const config = {
content: ["./src/**/*.{js,ts,jsx,tsx}"], content: ["./src/**/*.{js,ts,jsx,tsx}"],
theme: { theme: {
extend: {}, extend: {
keyframes: {
expand_in_out: {
'0%, 100%': { transform: 'scale(1)' },
'50%': { transform: 'scale(1.1)' },
},
},
animation: {
expand_in_out: 'expand_in_out 2s ease-in-out infinite',
}
},
}, },
plugins: [], plugins: [],
}; };