Favicon and Header

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

Hide file tree

Showing 10 changed files with 74 additions and 27 deletions.
diff --git a/public/media/squid.png b/public/media/squid.png
diff --git a/src/app/Header.tsx b/src/app/Header.tsx
@@ -1,5 +1,5 @@
-import Image from 'next/image'
-import Link from 'next/link'
+import Image from "next/image";
+import Link from "next/link";
 
 export default function Header() {
   return (
@@ -20,24 +20,72 @@ export default function Header() {
             <div className="md:hidden pr-4">
               <button
                 type="button"
-                className="hs-collapse-toggle p-2 inline-flex justify-center items-center gap-x-2 rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none" data-hs-collapse="#navbar-collapse-with-animation" aria-controls="navbar-collapse-with-animation"
+                id="navbar-collapse-button"
+                className="hs-collapse-toggle p-2 inline-flex justify-center items-center gap-x-2 rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none"
+                data-hs-collapse="#navbar-collapse-with-animation"
+                aria-controls="navbar-collapse-with-animation"
               >
-                <svg className="hs-collapse-open:hidden flex-shrink-0 size-6" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="3" x2="21" y1="6" y2="6" /><line x1="3" x2="21" y1="12" y2="12" /><line x1="3" x2="21" y1="18" y2="18" /></svg>
-                <svg className="hs-collapse-open:block hidden flex-shrink-0 size-6" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg>
+                <svg
+                  className="hs-collapse-open:hidden flex-shrink-0 size-6"
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <line x1="3" x2="21" y1="6" y2="6" />
+                  <line x1="3" x2="21" y1="12" y2="12" />
+                  <line x1="3" x2="21" y1="18" y2="18" />
+                </svg>
+                <svg
+                  className="hs-collapse-open:block hidden flex-shrink-0 size-6"
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M18 6 6 18" />
+                  <path d="m6 6 12 12" />
+                </svg>
               </button>
             </div>
           </div>
-          <div id="navbar-collapse-with-animation" className="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow md:block md:mt-10 bg-white px-4 shadow-lg md:shadow-none">
+          <div
+            id="navbar-collapse-with-animation"
+            className="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow md:block md:mt-10 bg-white px-4 shadow-lg md:shadow-none"
+          >
             <div className="flex flex-col gap-4 md:gap-10 mt-5 md:mt-0 md:ps-5 pb-4 md:pb-0 md:flex-row md:items-center md:justify-end font-title text-3xl text-primary">
-              <Link className="hover:text-primary-dark" href="/">Home</Link>
-              <Link className="hover:text-primary-dark" href="/about">About</Link>
-              <Link className="hover:text-primary-dark" href="/calendar">Calendar</Link>
-              <Link className="hover:text-primary-dark" href="mailto:[email protected]">Contact</Link>
-              <Link className="hover:text-primary-dark" href="/join">Join</Link>
+              <Link className="hover:text-primary-dark" href="/">
+                Home
+              </Link>
+              <Link className="hover:text-primary-dark" href="/about">
+                About
+              </Link>
+              <Link className="hover:text-primary-dark" href="/calendar">
+                Calendar
+              </Link>
+              <Link
+                className="hover:text-primary-dark"
+                href="mailto:[email protected]"
+              >
+                Contact
+              </Link>
+              <Link className="hover:text-primary-dark" href="/join">
+                Join
+              </Link>
             </div>
           </div>
         </div>
       </nav>
     </header>
-  )
+  );
 }
diff --git a/src/app/PrelineScript.tsx b/src/app/PrelineScript.tsx
@@ -2,8 +2,8 @@
 
 import { usePathname } from "next/navigation";
 import { useEffect } from "react";
-
 import { IStaticMethods } from "preline/preline";
+
 declare global {
   interface Window {
     HSStaticMethods: IStaticMethods;
@@ -16,12 +16,11 @@ export default function PrelineScript() {
   useEffect(() => {
     const loadPreline = async () => {
       await import("preline/preline");
-
       window.HSStaticMethods.autoInit();
     };
 
     loadPreline();
   }, [path]);
 
   return null;
-}
+}
diff --git a/src/app/about/Mentors.tsx b/src/app/about/Mentors.tsx
@@ -8,7 +8,7 @@ export const Mentors = ({ content }: any) => {
       className="flex flex-col items-center text-center w-full max-w-screen-xl p-12 md:p-20 gap-8 md:gap-12"
     >
       <p className="title">{content.title}</p>
-      <div className="grid grid-cols-2 md:grid-cols-6 gap-8">
+      <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8">
         {content.mentors.map((mentor: any) => (
           <div key={mentor.name}>
             <div className="flex flex-col items-center gap-2">

diff --git a/src/app/about/Subteams.tsx b/src/app/about/Subteams.tsx
@@ -20,9 +20,9 @@ const Subteams = ({ content }: any) => {
   return (
     <section
       id="subteams"
-      className="w-full h-full md:px-20 py-12 bg-primary flex justify-center"
+      className="w-full h-full lg:px-20 py-12 bg-primary flex justify-center"
     >
-      <div className="relative w-full overflow-hidden">
+      <div className="relative w-full overflow-hidden max-w-screen-2xl">
         <div
           className="flex transition-transform duration-500"
           style={{ transform: `translateX(-${currentIndex * 100}%)` }}

diff --git a/src/app/calendar/page.tsx b/src/app/calendar/page.tsx
@@ -2,7 +2,7 @@ export default function Calendar() {
   return (
     <section
       id="calendar"
-      className="w-full max-w-screen-2xl h-[88vh] pt-20 px-4 md:px-20 pb-16 flex justify-center"
+      className="w-full max-w-screen-2xl h-[85vh] pt-4 md:pt-16 px-4 md:px-20 pb-16 flex justify-center"
     >
       <iframe
         src="https://calendar.google.com/calendar/embed?src=frc294%40gmail.com&ctz=America%2FLos_Angeles"

diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -4,16 +4,16 @@
 
 @layer base {
   @font-face {
-    font-family: 'Bebas Neue';
+    font-family: "Bebas Neue";
     font-style: normal;
     font-weight: 400;
-    src: url('/fonts/BebasNeue-Regular.ttf') format('woff2');
+    src: url("/fonts/BebasNeue-Regular.ttf") format("woff2");
   }
   @font-face {
-    font-family: 'Montserrat';
+    font-family: "Montserrat";
     font-style: normal;
     font-weight: 400;
-    src: url('/fonts/Montserrat-VariableFont_wght.ttf') format('woff2');
+    src: url("/fonts/Montserrat-VariableFont_wght.ttf") format("woff2");
   }
 }
 
@@ -42,7 +42,7 @@
   0% {
     opacity: 0;
   }
-  100% { 
+  100% {
     opacity: 1;
   }
 }
@@ -75,4 +75,4 @@
   100% {
     transform: rotate(-1deg);
   }
-}
+}
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-8 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-4 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/layout.tsx b/src/app/layout.tsx
@@ -23,7 +23,7 @@ export default function RootLayout({
 
         <Header />
         <div className="lg:h-28" />
-        <div className="flex justify-center">
+        <div className="flex justify-center overflow-x-clip">
           {children}
         </div>
       </body>