diff options
| author | realtradam <[email protected]> | 2024-06-20 15:27:54 -0400 |
|---|---|---|
| committer | realtradam <[email protected]> | 2024-06-20 15:27:54 -0400 |
| commit | 204f862917e9a9014e47a475d6c49cc33d5a6d5e (patch) | |
| tree | 44d55955774ca348f19dfc1b1386f6b5e48b7cb8 /src | |
| parent | d8784ecd03be1cc90887242ae340a0bbf069da18 (diff) | |
| download | malcz.com-204f862917e9a9014e47a475d6c49cc33d5a6d5e.tar.gz malcz.com-204f862917e9a9014e47a475d6c49cc33d5a6d5e.zip | |
fix layout for desktop
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Layout.tsx | 2 | ||||
| -rw-r--r-- | src/index.css | 31 |
2 files changed, 18 insertions, 15 deletions
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 9abfdf0..83aa172 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -27,7 +27,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 onClick={handleSidebarOpen} className="fixed shadow-xl right-4 m-4 p-1 w-min h-min text-stone-50 bg-stone-800 rounded-[5px] z-[5]"> + <div onClick={handleSidebarOpen} className="md:hidden fixed shadow-xl right-4 m-4 p-1 w-min h-min text-stone-50 bg-stone-800 rounded-[5px] z-[5]"> <div className="rounded-[5px] border-2 border-stone-50 border-amber-500"> <Button width={12} height={12} link={ <i className="fa-solid fa-bars"></i> }/> </div> diff --git a/src/index.css b/src/index.css index 153686f..1a84e98 100644 --- a/src/index.css +++ b/src/index.css @@ -29,23 +29,26 @@ } } -.sidebarInit { - left: -16rem; -} +@media (max-width: 768px) +{ + .sidebarInit { + left: -16rem; + } -.sidebarOpen { - animation-name: sidebar-enter; - left: 0; -} + .sidebarOpen { + animation-name: sidebar-enter; + left: 0; + } -.sidebarClosed { - animation-name: sidebar-exit; - left: -16rem; -} + .sidebarClosed { + animation-name: sidebar-exit; + left: -16rem; + } -#sidebar { - animation-duration: 0.5s; - animation-iteration-count: 1; + #sidebar { + animation-duration: 0.5s; + animation-iteration-count: 1; + } } .gameCard { |