From 31e1f8486d3a17965145f71f8e7be82b4c2b226e Mon Sep 17 00:00:00 2001
From: Sebastian Moder <moder.sebastian@gmail.com>
Date: Tue, 10 Oct 2023 18:48:16 +0200
Subject: [PATCH] Update global styles and layout

---
 app/globals.css                 | 15 +++++++++++++++
 app/layout.tsx                  |  2 +-
 components/Footer.tsx           |  6 +++---
 components/Institutionlogos.tsx |  5 ++---
 components/Navigation.tsx       |  2 +-
 5 files changed, 22 insertions(+), 8 deletions(-)
diff --git a/app/globals.css b/app/globals.css
index 2574518..aba3ba0 100644
--- 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
index 205108c..f49969f 100644
--- 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
index 37cd60f..1dd3357 100644
--- 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
index 6795843..09f2dcc 100644
--- 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
index 446fc1a..21547b0 100644
--- 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 }} />
