Minor tweaks (#30)

* changed some table styles and added some margin on talks * added that talks margin * A few styling changes in the Nav, a change to a minimum height (to keep the footer small), and I added Mariola's bio * Made past talks available on the mobile nav
bluegrass-devs · Oct 2, 2023 · f6cf830 · f6cf830
1 parent e11ac05
commit f6cf830
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 26 deletions.
diff --git a/public/images/Mariola.jpg b/public/images/Mariola.jpg
diff --git a/src/app/Nav.tsx b/src/app/Nav.tsx
@@ -17,7 +17,7 @@ export default function Nav() {
     <nav className="bg-accent z-20">
       <div className="h-24 flex flex-col lg:flex-row lg:items-center lg:justify-end text-3xl font-montserrat font-thin">
         {/* Left Side  */}
-        <div className="flex h-full items-center ml-8 w-3/4">
+        <div className="flex h-full items-center ml-8 w-fit">
           <FaBars className="lg:hidden" onClick={toggleMenu} />
           <Link href="/">
             <Image
@@ -51,47 +51,47 @@ export default function Nav() {
           <Link href="/team" className="my-4">
             Team
           </Link>
-          {/* <Link href="/past" className="my-4">
-            Past LexTalk
-          </Link> */}
+          <Link href="/past" className="my-4">
+            Past Talks
+          </Link>
         </div>
 
         {/* Desktop */}
-        <div className="lg:flex w-1/2 justify-evenly hidden">
+        <div className="lg:flex w-full justify-end gap-8 px-4 hidden">
           <Link
             href="/"
-            className="mx-4 border-b-2 border-transparent duration-150 hover:scale-110 hover:border-text hover:-translate-y-2"
+            className="border-b-2 border-transparent duration-150 hover:scale-110 hover:border-text hover:-translate-y-2"
           >
             Home
           </Link>
           {/* <Link
             href="/about"
-            className="mx-4 border-b-2 border-transparent duration-150 hover:scale-110 hover:border-text hover:-translate-y-2"
+            className="border-b-2 border-transparent duration-150 hover:scale-110 hover:border-text hover:-translate-y-2"
           >
             About
           </Link> */}
           <Link
             href="/talks"
-            className="mx-4 border-b-2 border-transparent duration-150 hover:scale-110 hover:border-text hover:-translate-y-2"
+            className="border-b-2 border-transparent duration-150 hover:scale-110 hover:border-text hover:-translate-y-2"
           >
             Talks
           </Link>
           <a
             href="https://www.eventbrite.com/e/lextalktech-oct-12-2023-tickets-716404403857"
-            className="mx-4 flex gap-2 border-b-2 border-transparent duration-150 hover:scale-110 hover:border-text hover:-translate-y-2"
+            className="flex gap-2 border-b-2 border-transparent duration-150 hover:scale-110 hover:border-text hover:-translate-y-2"
           >
             <FaArrowUpRightFromSquare className="text-xl" />
             Tickets
           </a>
           <Link
             href="/team"
-            className="mx-4 border-b-2 border-transparent duration-150 hover:scale-110 hover:border-text hover:-translate-y-2"
+            className="border-b-2 border-transparent duration-150 hover:scale-110 hover:border-text hover:-translate-y-2"
           >
             Team
           </Link>
           <Link
             href="/past"
-            className="mx-4 border-b-2 border-transparent duration-150 hover:scale-110 hover:border-text hover:-translate-y-2"
+            className="border-b-2 border-transparent duration-150 hover:scale-110 hover:border-text hover:-translate-y-2"
           >
             Past Talks
           </Link>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -35,7 +35,7 @@ export default function RootLayout({
       </head>
       <body className="bg-background flex flex-col">
         <Nav />
-        {children}
+        <main className="min-h-screen">{children}</main>
         <Footer />
       </body>
     </html>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -59,7 +59,7 @@ export default function Home() {
 
   return (
     <>
-      <main className="font-montserrat text-text">
+      <div className="font-montserrat text-text">
         <Landing date={data.date} />
         <div className="my-12 mx-auto max-w-screen-xl px-4">
           <div className="flex items-center w-1/3 justify-between my-8">
@@ -83,7 +83,7 @@ export default function Home() {
           />
         </div>
         <AddressMap date={data.date} />
-      </main>
+      </div>
     </>
   );
 }
diff --git a/src/app/talks/page.tsx b/src/app/talks/page.tsx
@@ -76,15 +76,13 @@ export default function Talks() {
 
   return (
     <>
-      <div className="mx-auto">
-        <div className="text-center my-10 bg-accent w-fit mx-4 p-5 ring ring-primary rounded-lg drop-shadow-2xl">
-          <h1 className="text-5xl font-bold font-montserrat text-center">
-            Talks
-          </h1>
-          <span className="text-xl">
-            This is the schedule for LexTalk on {formattedDate}
-          </span>
-        </div>
+      <div className="text-center my-10 bg-accent w-fit p-4 ring ring-primary rounded-lg drop-shadow-2xl mx-auto">
+        <h1 className="text-5xl font-bold font-montserrat text-center">
+          Talks
+        </h1>
+        <span className="text-xl">
+          This is the schedule for LexTalk on {formattedDate}
+        </span>
       </div>
 
       {talkData.schedule.map((talk, index) => (

diff --git a/src/app/team/page.tsx b/src/app/team/page.tsx
@@ -6,7 +6,7 @@ export default function Team() {
       {
         name: "Ember Borja",
         image: "/images/conferenceTalk.jpg",
-        alt: "placeholder image",
+        alt: "Ember presenting at LexTalk Tech",
         bio: "Hi! I'm Ember. I'm a developer in Lexington, Kentucky, a trans woman, and an organizer for several community groups in town. Please reach out and chat! :)",
       },
       {
@@ -15,6 +15,12 @@ export default function Team() {
         alt: "Neal over the Seattle skyline",
         bio: "My name is Neal Powers. I'm a freelance developer from Lexington, Kentucky looking for my first role at a company! I have a varied background in music and photography and love all things JavaScript!",
       },
+      {
+        name: "Mariola Hullings",
+        image: "/images/Mariola.jpg",
+        alt: "Professional headshot of Mariola",
+        bio: "I'm Mariola Hullings, I am a dedicated iOS developer, looking for my next role. Beyond the world of web and app development, I enjoy hiking and exploring new horizons.",
+      },
     ],
   };
 
@@ -23,8 +29,8 @@ export default function Team() {
   ));
 
   return (
-    <div className="font-montserrat mx-4">
-      <h1 className="text-3xl text-center my-8">
+    <div className="font-montserrat px-4 max-w-screen-lg mx-auto">
+      <h1 className="text-3xl text-center py-8">
         This website wouldn&apos;t be possible the work of the following
         developers:
       </h1>