Styling

team294 · Sep 17, 2024 · 745fb7a · 745fb7a
1 parent 25d43c7
commit 745fb7a
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 15 deletions.
diff --git a/src/app/Header.tsx b/src/app/Header.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link'
 
 export default function Header() {
   return (
-    <header className="flex flex-wrap md:justify-start md:flex-nowrap w-full h-28 bg-white text-sm pt-4">
+    <header className="flex flex-wrap md:justify-start md:flex-nowrap w-full h-28 bg-white text-sm pt-4 lg:fixed z-50">
       <nav className="w-full h-full z-10 shadow-lg">
         <div className="w-full h-full max-w-screen-xl mx-auto md:flex md:items-center md:justify-between">
           <div className="flex items-center justify-between h-full min-w-fit pl-4 pb-4">

diff --git a/src/app/about/First.tsx b/src/app/about/First.tsx
@@ -8,14 +8,21 @@ export const First = ({ content }: any) => {
       className="flex flex-col items-center justify-center w-full max-w-screen-xl p-12 md:p-20 gap-12 md:gap-20"
     >
       <div className="w-full flex flex-col md:flex-row items-center gap-12">
-        <Image
-          src={mediaUrl(content.image)}
-          alt="FIRST"
-          width="1000"
-          height="1000"
+        <a
+          href="https://www.firstinspires.org/robotics/frc"
+          target="_blank"
+          rel="noopener noreferrer"
           className="object-contain w-60 md:w-1/3 h-auto"
-          priority
-        />
+        >
+          <Image
+            src={mediaUrl(content.image)}
+            alt="FIRST"
+            width="1000"
+            height="1000"
+            className="w-full h-full"
+            priority
+          />
+        </a>
         <p className="body text-center md:text-left md:w-2/3">{content.body}</p>
       </div>
     </section>

diff --git a/src/app/about/ParentVolunteers.tsx b/src/app/about/ParentVolunteers.tsx
@@ -4,7 +4,7 @@ export const ParentVolunteers = ({ content }: any) => {
       id="parent-volunteers"
       className="flex flex-col items-center justify-center w-full max-w-screen-xl p-12 md:p-20 gap-8 md:gap-12"
     >
-      <p className="title">{content.title}</p>
+      <p className="title text-center">{content.title}</p>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-y-4 gap-x-12 justify-items-center">
         {content.volunteers?.map((volunteer: any) => (
           <p key={volunteer.name} className="body text-primary">

diff --git a/src/app/about/StudentLeads.tsx b/src/app/about/StudentLeads.tsx
@@ -4,7 +4,7 @@ export const StudentLeads = ({ content }: any) => {
       id="student-leads"
       className="flex flex-col items-center justify-center w-full max-w-screen-xl p-12 md:p-20 gap-8 md:gap-12"
     >
-      <p className="title">{content.title}</p>
+      <p className="title text-center">{content.title}</p>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-y-4 gap-x-12 justify-items-center">
         {content.leads?.map((lead: any) => (
           <div key={lead.role} className="flex flex-row justify-start">

diff --git a/src/app/home/Countdown.tsx b/src/app/home/Countdown.tsx
@@ -28,7 +28,7 @@ export const Countdown = ({ content }: any) => {
       className="flex flex-col items-center p-12 md:p-20 gap-6"
     >
       <p className="title text-center">Countdown to {content.title}</p>
-      <div className="flex flex-row items-center gap-2 md:gap-4">
+      <div className="flex flex-row items-center gap-1 md:gap-4">
         <div className="flex flex-col items-center bg-primary text-white p-3 md:p-6 rounded-2xl md:rounded-3xl">
           <p className="title text-white">{days}</p>
           <p className="body text-white">Days</p>

diff --git a/src/app/home/Intro.tsx b/src/app/home/Intro.tsx
@@ -5,7 +5,7 @@ export const Intro = ({ content }: any) => {
   return (
     <section
       id="intro"
-      className="flex flex-col items-center justify-center text-center gap-8 w-full h-96 md:h-[90vh] px-10 bg-black bg-opacity-70 bg-blend-multiply bg-[url('/media/team.jpg')] bg-cover bg-center"
+      className="flex flex-col items-center justify-center text-center gap-8 w-full h-96 md:h-[90vh] px-8 bg-black bg-opacity-70 bg-blend-multiply bg-[url('/media/team.jpg')] bg-cover bg-center"
     >
       <div className="flex flex-col gap-4 animate-fade-in">
         <p className="text-white font-text text-lg md:text-2xl">

diff --git a/src/app/join/Faq.tsx b/src/app/join/Faq.tsx
@@ -1,4 +1,5 @@
 import Image from "next/image";
+import mediaUrl from "../MediaUrl";
 
 export const Faq = ({ content }: any) => {
   return (
@@ -15,15 +16,15 @@ export const Faq = ({ content }: any) => {
             </p>
             <p className="body text-justify mx-4">{question.answer}</p>
             {question.images ? (
-              <div className="flex flex-col md:flex-row gap-4 mx-4 max-w-3xl max-h-60">
+              <div className="flex flex-col md:flex-row gap-4 mx-4 max-w-3xl">
                 {question.images.map((image: any) => (
                   <Image
                     key={image.title}
                     alt={image.title}
-                    src={image.image}
+                    src={mediaUrl(image.image)}
                     width="1000"
                     height="1000"
-                    className="w-full md:w-1/2 h-auto object-cover rounded-xl"
+                    className="w-full md:w-1/2 h-auto object-cover rounded-xl max-h-60"
                   />
                 ))}
               </div>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -22,6 +22,7 @@ export default function RootLayout({
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />        
 
         <Header />
+        <div className="lg:h-28" />
         <div className="flex justify-center">
           {children}
         </div>