diff options
| author | realtradam <[email protected]> | 2024-06-20 11:53:13 -0400 |
|---|---|---|
| committer | realtradam <[email protected]> | 2024-06-20 11:53:13 -0400 |
| commit | e77c879f488cdc267c85438d54eb88e805efdc0b (patch) | |
| tree | 911b2f3e3d482674fa84a757ac823dea28a3cd98 | |
| parent | 62904be825a84ecac6b43c09ad00173955328555 (diff) | |
| download | malcz.com-e77c879f488cdc267c85438d54eb88e805efdc0b.tar.gz malcz.com-e77c879f488cdc267c85438d54eb88e805efdc0b.zip | |
start adding mobile breakpoints
| -rw-r--r-- | src/components/Layout.tsx | 4 | ||||
| -rw-r--r-- | tailwind.config.js | 7 |
2 files changed, 9 insertions, 2 deletions
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 3d3747d..6daf865 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -12,7 +12,7 @@ export default function Layout ({userData}: userData) return ( <> <div id="page" className="star flex flex-row min-h-screen max-h-screen bg-amber-400 text-stone-950 text-xl bg-star bg-repeat bg-[length:170px_170px]"> - <div id="sidebar" className="flex flex-row shrink-0 grow-0 h-vh w-64 items-top bg-stone-800"> + <div id="sidebar" className="dsm:hidden flex flex-row shrink-0 grow-0 h-vh w-64 items-top bg-stone-800"> <nav id="sidebar-content" dir="rtl" className="text-stone-50 p-6 w-full h-screen overflow-y-auto overflow-x-hidden"> <div dir='ltr'> { userData.name ? <div className="flex items-end gap-2 pb-2"> <div className="text-xs"> Logged in as: </div> <div>{userData.name}</div> </div> : <a href="" onClick={loginLink} className="pb-2"> Login with Github </a> } @@ -45,7 +45,7 @@ export default function Layout ({userData}: userData) </div> </div> <div id="radial-wrap" className="shrink w-full max-h-vh h-vh overflow-auto overflow-x-hidden"> - <div id="content" className="flex justify-center items-center w-full p-20"> <Outlet /> </div> + <div id="content" className="flex justify-center items-center w-full p-20 dsm:px-4"> <Outlet /> </div> </div> </div> </> diff --git a/tailwind.config.js b/tailwind.config.js index 1e61280..74d0251 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -5,6 +5,13 @@ export default { './src/**/*.{js,ts,jsx,tsx}', ], theme: { + screens: { + 'dsm': {'max':'640px'}, + 'dmd': {'max':'768px'}, + 'dlg': {'max':'1024px'}, + 'dxl': {'max':'1280px'}, + 'd2xl': {'max':'1536px'} + }, extend: { backgroundImage: { 'star': "url('/star.png')", |