qwertyasdfgh
/
Makking
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix elements almost overflowing on smaller screens

This commit is contained in:
Joonas 2023-01-18 21:56:36 +02:00
parent 7df3c61f08
commit 4fc8a4036d
1 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/routes/index.jsx
View File

@ -95,7 +95,11 @@ export default function Index() {
return (
<div className="container mx-auto flex min-h-screen flex-col">
<header className="flex w-full flex-col items-center justify-between space-y-4 rounded-b-2xl border-x border-b border-ctp-surface0 bg-gradient-to-r from-ctp-crust to-ctp-mantle px-12 py-4 text-center shadow-lg md:flex-row md:space-y-0">
<header
className="flex w-full flex-col items-center justify-between space-y-4 rounded-b-2xl
border-x border-b border-ctp-surface0 bg-gradient-to-r from-ctp-crust to-ctp-mantle px-12 py-4
text-center shadow-lg md:flex-row md:space-y-0"
>
<h1 className="text-2xl tracking-tighter">Maakunta ranking</h1>
{data.me ? (
<div className="flex flex-col items-center justify-center">
@ -116,7 +120,8 @@ export default function Index() {
<a
href="https://osu.ppy.sh/oauth/authorize?client_id=20031&redirect_uri=http://localhost:3000/auth&response_type=code"
referrerPolicy="noreferrer"
className="rounded-full border border-ctp-surface0 bg-ctp-surface0 px-4 py-2 shadow-md shadow-ctp-overlay0 hover:bg-ctp-surface1 hover:shadow-ctp-overlay2"
className="rounded-full border border-ctp-surface0 bg-ctp-surface0 px-4 py-2 shadow-md
shadow-ctp-overlay0 hover:bg-ctp-surface1 hover:shadow-ctp-overlay2"
>
Authenticate with osu! account
</a>
@ -166,10 +171,11 @@ export default function Index() {
""
)}
{data.countyData.length > 0 ? (
<ul className="flex flex-grow flex-col items-center justify-center p-4 md:flex-row">
<ul className="flex flex-grow flex-col flex-wrap 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-4 rounded border border-ctp-surface0 bg-gradient-to-t from-ctp-crust to-ctp-mantle p-6 shadow-lg shadow-ctp-surface0"
className="mx-0 my-4 flex w-full max-w-md flex-col space-y-4 rounded border border-ctp-surface0
bg-gradient-to-t from-ctp-crust to-ctp-mantle p-6 shadow-lg shadow-ctp-surface0 sm:mx-4"
key={county.id}
>
<h1 className="text-center text-4xl tracking-tighter text-ctp-subtext0">