mobile response fix

skylab-kulubu · Nov 17, 2024 · 1c7e744 · 1c7e744
1 parent 62fc38e
commit 1c7e744
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 38 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -3,6 +3,9 @@
 @tailwind utilities;
 body {
   font-family: var(--font-open-sans);
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
 }
 .bebas {
   font-family: var(--font-bebas-neue);

diff --git a/components/Header.jsx b/components/Header.jsx
@@ -21,31 +21,31 @@ const Header = () => {
         </div>
       </div>
       {/* Mobile Devices */}
-      <div className='flex flex-row justify-center pt-[150px] md:hidden'>
-        <div className='flex h-[250px]  w-[250px] flex-col items-center justify-center rounded-full bg-primary-light'>
+      <div className='flex flex-col items-center pt-[150px] md:hidden'>
+        <div className='flex h-[250px] w-[250px] flex-col items-center justify-center rounded-full bg-primary-light'>
           <h1
-            className={`text-8xl	font-bold tracking-[20px]	text-primary-light	mix-blend-exclusion ${bebas.className}`}
+            className={`text-7xl font-bold tracking-[10px] text-primary-light mix-blend-exclusion ${bebas.className}`}
           >
             ARTLAB
           </h1>
           <p
-            className={`text-4xl font-bold text-[#B74B4B] ${koulen.className}`}
+            className={`text-3xl font-bold text-[#B74B4B] ${koulen.className}`}
           >
-            ‘23
+            ‘24
           </p>
         </div>
+        <p className='py-6 text-center text-lg font-semibold text-primary-light'>
+          Yapay Zeka Zirvesi
+        </p>
+        <Image
+          src='/assets/header-dots.svg'
+          alt='header-dots'
+          width={0}
+          height={0}
+          sizes='100vw'
+          style={{ width: '100%', height: 'auto' }}
+        />
       </div>
-      <p className='py-10 text-center font-semibold text-primary-light'>
-        Yapay Zeka Zirvesi
-      </p>
-      <Image
-        src='/assets/header-dots.svg'
-        alt='header-dots'
-        width={0}
-        height={0}
-        sizes='100vw'
-        style={{ width: '100%', height: 'auto' }}
-      />
     </div>
   );
 };

diff --git a/components/Navbar.jsx b/components/Navbar.jsx
@@ -2,24 +2,38 @@ import React from 'react';
 
 export default function Navbar() {
   return (
-    <div className='fixed z-10 flex w-full items-center justify-between border-b-[1px] border-solid border-black bg-primary-dark p-8 text-primary-light'>
-      <p className='hidden w-1/5 text-left text-lg md:block whitespace-normal break-words'>
-        Yıldız Teknik Üniversitesi
-      </p>
-      <a
-        href='https://skyl.app/artlab-katilimci-formu'
-        className='ease flex-shrink-0 flex justify-center rounded-full border-[1px] border-primary-light px-10 py-2 text-lg transition-all hover:scale-[1.1] hover:bg-primary-light hover:text-primary-dark active:scale-[0.8]'
-        target='_blank'
-      >
-        Kayıt Ol
-      </a>
-      <a
-        href='https://maps.app.goo.gl/rfNDFw7kpkF6syJU8'
-        className='ease hidden w-1/5 text-right text-lg transition-all hover:scale-[1.1] active:scale-[0.8] md:block whitespace-normal break-words'
-        target='_blank'
-      >
-        Davutpaşa Kampüsü <br/> Tarihi Hamam
-      </a>
-    </div>
+    <>
+      {/* Desktop Navbar */}
+      <div className='fixed z-10 hidden w-full items-center justify-between border-b-[1px] border-solid border-black bg-primary-dark p-8 text-primary-light md:flex'>
+        <p className='w-1/5 whitespace-normal break-words text-left text-lg'>
+          Yıldız Teknik Üniversitesi
+        </p>
+        <a
+          href='https://skyl.app/artlab-katilimci-formu'
+          className='ease flex flex-shrink-0 justify-center rounded-full border-[1px] border-primary-light px-10 py-2 text-lg transition-all hover:scale-[1.1] hover:bg-primary-light hover:text-primary-dark active:scale-[0.8]'
+          target='_blank'
+        >
+          Kayıt Ol
+        </a>
+        <a
+          href='https://maps.app.goo.gl/rfNDFw7kpkF6syJU8'
+          className='ease w-1/5 whitespace-normal break-words text-right text-lg transition-all hover:scale-[1.1] active:scale-[0.8]'
+          target='_blank'
+        >
+          Davutpaşa Kampüsü <br /> Tarihi Hamam
+        </a>
+      </div>
+
+      {/* Mobile Navbar */}
+      <div className='fixed left-0 top-0 z-10 flex w-full items-center justify-center overflow-hidden border-b-[1px] border-solid border-black bg-primary-dark p-4 text-primary-light md:hidden'>
+        <a
+          href='https://skyl.app/artlab-katilimci-formu'
+          className='ease flex flex-shrink-0 justify-center rounded-full border-[1px] border-primary-light px-8 py-2 text-lg transition-all hover:scale-[1.1] hover:bg-primary-light hover:text-primary-dark active:scale-[0.8]'
+          target='_blank'
+        >
+          Kayıt Ol
+        </a>
+      </div>
+    </>
   );
 }
diff --git a/components/Speakers.jsx b/components/Speakers.jsx
@@ -6,10 +6,11 @@ export default function Speakers() {
   return (
     <div className='wrapper mb-40 p-10 text-primary-light '>
       <h2
-        className={`header-text text-primary-light ${bebas.className} tracking-[0.5rem]`}
+        className={`header-text text-primary-light ${bebas.className} text-4xl tracking-normal md:tracking-[0.5rem] md:text-5xl lg:text-6xl`}
       >
         KONUŞMACILARIMIZ
       </h2>
+
       <div className='grid h-auto grid-cols-1 gap-1 md:grid-cols-2 lg:grid-cols-3'>
         {speakers.map((speaker) => (
           <Speaker

diff --git a/components/Sponsors.jsx b/components/Sponsors.jsx
@@ -6,7 +6,7 @@ const Sponsors = () => {
     <div className=' mt-[100px]  bg-primary-light py-10'>
       <div className='z-50 mx-auto -mt-[150px] h-[300px] w-[300px] rounded-full bg-primary-light'>
         <h2
-          className={`header-text !pt-28 text-primary-dark ${bebas.className} tracking-[0.5rem]`}
+          className={`header-text !pt-28 text-primary-dark ${bebas.className} tracking-normal md:tracking-[0.5rem]`}
         >
           Sponsorlarimiz
         </h2>
@@ -78,7 +78,7 @@ const Sponsors = () => {
 
       <div className='flex items-center gap-5 pt-20 md:gap-10'>
         <div className='h-[2px] w-full bg-primary-dark'></div>
-        <div className='whitespace-nowrap text-center text-3xl font-bold text-primary-dark'>
+        <div className='text-center text-2xl font-bold text-primary-dark sm:text-2xl md:text-3xl'>
           Ürün ve Fuaye Sponsorlarımız
         </div>
         <div className='h-[2px] w-full bg-primary-dark'></div>