Update global styles and layout

Sebstep · Oct 10, 2023 · 31e1f84 · 31e1f84
1 parent 2f6467d
commit 31e1f84
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 8 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -2,6 +2,21 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  h1 {
+    @apply text-5xl font-semibold mb-8;
+  }
+  h2 {
+    @apply text-3xl font-semibold mb-4 text-center;
+  }
+  h3 {
+    @apply text-2xl font-semibold mb-4 text-left;
+  }
+  p {
+    @apply text-lg;
+  }
+}
+
 /* :root {
   --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 214, 219, 220;

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -27,7 +27,7 @@ export default function RootLayout({
       </head>
       <body className={inter.className}>
         <Navigation />
-        <main className="mx-auto mt-14 sm:mt-16 mb-32">{children}</main>
+        <main className="mx-auto mb-32">{children}</main>
         <Footer />
       </body>
     </html>

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -3,11 +3,11 @@ import Link from "next/link";
 
 export default function Footer() {
   return (
-    <footer className="fixed bottom-0 w-full bg-gray-800 py-4">
+    <footer className="bottom-0 w-full bg-gray-800 py-4">
       <div className="container mx-auto px-4">
         <div className="flex flex-wrap justify-between items-center">
-          <div className="w-full md:w-auto text-center md:text-left mb-4 md:mb-0">
-            <p className="text-white">&copy; 2021 My Website</p>
+          <div className="w-full md:w-auto text-center md:text-left mb-4 md:mb-0 text-white">
+            <p className="text-base">&copy; 2021 Pathfinder Project</p>
           </div>
           <div className="w-full md:w-auto text-center md:text-right">
             <Link href="#" className="text-white hover:text-gray-400 mx-2">

diff --git a/components/Institutionlogos.tsx b/components/Institutionlogos.tsx
@@ -4,8 +4,7 @@ import Image from "next/image";
 
 export default function InstitutionLogos() {
   return (
-    <section className="">
-      <h2 className="text-3xl font-semibold text-center mb-6">Participating Institutions</h2>
+    <div className="mx-auto py-8">
       <div className="flex flex-wrap justify-center items-center">
         {/* Replace the paths with the actual paths to your institution logos */}
         <div className="w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/6 p-4 bg-yellow-400">
@@ -21,6 +20,6 @@ export default function InstitutionLogos() {
           {/* <Image src="/institution4.png" alt="Institution 4" className="mx-auto" /> */}
         </div>
       </div>
-    </section>
+    </div>
   );
 }
diff --git a/components/Navigation.tsx b/components/Navigation.tsx
@@ -39,7 +39,7 @@ function ResponsiveAppBar() {
   };
 
   return (
-    <AppBar position="fixed">
+    <AppBar className="sticky">
       <Container maxWidth="xl">
         <Toolbar disableGutters>
           <AdbIcon sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} />