styling improvement

This commit is contained in:
Joonas 2023-01-18 18:54:41 +02:00
parent 2b7fe2015c
commit 51efe04caa
1 changed files with 4 additions and 4 deletions

View File

@ -94,8 +94,8 @@ export default function Index() {
const data = useLoaderData();
return (
<div className="container mx-auto">
<header className="flex w-full items-center justify-between border-b p-4">
<div className="container mx-auto flex min-h-screen flex-col">
<header className="flex w-full flex-col items-center justify-between rounded-b-2xl border-b bg-slate-50 px-12 py-4 text-center md:flex-row">
<h1 className="text-2xl tracking-tighter">Maakunta ranking</h1>
{data.me ? (
<div className="flex flex-col items-center justify-center">
@ -166,7 +166,7 @@ export default function Index() {
""
)}
{data.countyData.length > 0 ? (
<ul className="flex items-center justify-center p-4">
<ul className="flex flex-grow flex-col items-center justify-center p-4 md:flex-row">
{data.countyData.map((county) => (
<li
className="m-4 flex w-full max-w-md flex-col space-y-2 rounded border p-4 text-black shadow-lg"
@ -198,7 +198,7 @@ export default function Index() {
))}
</ul>
) : (
<h1 className="p-6 text-center text-4xl">No data yet</h1>
<h1 className="flex-grow p-6 text-center text-4xl">No data yet</h1>
)}
</div>
);