Update header layout in layout.tsx

walnuts1018 · Jan 18, 2024 · b77fa09 · b77fa09
1 parent e333c29
commit b77fa09
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 24 deletions.
diff --git a/public/lower-decoration.svg b/public/lower-decoration.svg
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -69,14 +69,14 @@ function Header() {
   return (
     <header>
       <div className='flex justify-center w-full '>
-        <div className='w-10/12 flex items-center justify-left h-12 md:h-16 text-black font-bold font-Nunito text-xl sm:text-2xl px-1'>
+        <div className='w-10/12 flex items-center justify-left h-12 md:h-16 text-black font-bold font-Nunito text-xl sm:text-2xl px-1 relative'>
           <div className='h-full '>
-            <UpperDecoration className='h-2/3' />
+            <UpperDecoration className='h-3/4 sm:h-2/3 pr-2 sm:pr-0' />
           </div>
           <a className='logo' href='#'>
             Walnuts.dev
           </a>
-          <div className='h-full items-end flex'>
+          <div className='h-full items-end flex absolute right-0 sm:static'>
             <LowerDecoration className='pl-1 h-3/4' />
           </div>
         </div>