feat(ui): update layout sizes

mateusfg7 · Aug 5, 2023 · a029e22 · a029e22
1 parent e68cffe
commit a029e22
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -16,9 +16,9 @@ export default function Home() {
   return (
     <div className={container({ background })}>
       <Header />
-      <div className="h-[90vh] overflow-y-scroll md:h-[85vh]">
-        <div className="flex min-h-[85vh] items-center justify-center p-14">
-          <div className="grid grid-cols-1 gap-12 xs:grid-cols-2 2xs:grid-cols-3 sm:grid-cols-4 lg:grid-cols-5 2xl:grid-cols-6">
+      <div className="h-[90vh] overflow-y-scroll md:h-[87vh]">
+        <div className="m-auto flex w-full items-center justify-center pb-24 pt-16">
+          <div className="grid h-fit w-fit grid-cols-1 gap-12 xs:grid-cols-2 2xs:grid-cols-3 sm:grid-cols-4 lg:grid-cols-5 2xl:grid-cols-6">
             {soundList.map(sound => (
               <Sound key={sound.id} soundData={sound} />
             ))}

diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -22,7 +22,7 @@ export function Footer() {
   )
 
   return (
-    <footer className="mt-28 flex flex-col flex-wrap items-center justify-center gap-10 p-5 sm:flex-row md:gap-14">
+    <footer className="flex flex-col flex-wrap items-center justify-center gap-10 p-5 sm:flex-row md:gap-14">
       <div className="w-14 overflow-hidden rounded-2xl shadow-lg">
         <Link href="/">
           <Image

diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -6,11 +6,12 @@ import { BackgroundMenu } from '@/components/background-menu'
 
 export const Header: React.FC = () => {
   return (
-    <header className="relative flex h-[10vh] items-center justify-between gap-5 px-6 shadow-header md:h-[15vh] md:justify-center">
+    <header className="left-0 right-0 top-0 flex h-[10vh] items-center justify-between gap-5 px-6 shadow-header transition-all md:h-[13vh]">
+      <div className="hidden md:block" />
       <h1 className="text-2xl font-semibold text-white/90">
         <Link href="/">Noisekun</Link>
       </h1>
-      <div className="flex items-center gap-3 md:absolute md:right-10">
+      <div className="flex items-center gap-3">
         <GlobalVolumeController />
         <BackgroundMenu />
       </div>