wip: 2024

sigpwny · Sep 10, 2024 · 36b05f9 · 36b05f9
1 parent adb1b0b
commit 36b05f9
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 40 deletions.
diff --git a/fallctf.com/src/components/FallCTFLogo.tsx b/fallctf.com/src/components/FallCTFLogo.tsx
@@ -1,15 +1,19 @@
+import { motion } from 'framer-motion';
+
 interface Props {
   year?: string;
   color?: string;
 }
 
 export default function FallCTFLogo({ year, color }: Props) {
   return (
-    <>
+    <motion.div
+      layoutId={"fallctf-logo"}
+    >
       <p className="font-bold text-8xl">
         <span>Fall CTF</span>
         {year ? <span>&nbsp;{year}</span> : null}
       </p>
-    </>
+    </motion.div>
   )
 }
diff --git a/fallctf.com/src/components/TabNav.tsx b/fallctf.com/src/components/TabNav.tsx
@@ -12,7 +12,7 @@ interface Props {
 
 export default function TabNav({ id, links }: Props) {
   return (
-    <nav className="rounded-full p-1 bg-surface-100/70 backdrop-blur-xl border border-surface-150/70">
+    <nav className="rounded-full p-1 bg-surface-100/80 backdrop-blur-xl border border-surface-150/70">
       <ul className="flex flex-row gap-1">
         {links.map((link) => (
           <li
@@ -21,7 +21,7 @@ export default function TabNav({ id, links }: Props) {
           >
             {link.active ? (
               <motion.span
-                className="absolute z-0 size-full rounded-full bg-surface-150/70 backdrop-blur-xl border border-surface-200/70"
+                className="absolute z-0 size-full rounded-full bg-surface-150/90 border border-surface-200"
                 transition={{
                   ease: "easeOut",
                   duration: 0.2,

diff --git a/fallctf.com/src/layouts/Event.astro b/fallctf.com/src/layouts/Event.astro
@@ -13,47 +13,13 @@ interface Props extends HeadProps {
 
 const props: Props = Astro.props;
 const event = props.event;
-
-// const rawMeetings = (await getMeetings()).sort(
-//   (a, b) => b.data.time_start.valueOf() - a.data.time_start.valueOf()
-// );
-
-// type MeetingType = typeof rawMeetings[0];
-
-// const meetingsBySemester = rawMeetings.reduce(
-//   (acc, meeting) => {
-//     const semester = meeting.data.semester;
-//     if (acc[semester]) {
-//       acc[semester].push(meeting);
-//     } else {
-//       acc[semester] = [meeting];
-//     }
-//     return acc;
-//   }, {} as {[semester: string]: MeetingType[]}
-// );
-
-// const meetingSidebarItems = Object.keys(meetingsBySemester).map((semester) => ({
-//   name: formatSemester(semester),
-//   items: meetingsBySemester[semester].map((meeting) => ({
-//     name: meeting.data.week_number != null ? `Week ${weekNumber(meeting.data.week_number)}: ${meeting.data.title}` : meeting.data.title,
-//     url: meeting.slug,
-//     active: meeting.slug === Astro.url.pathname,
-//   })),
-//   active: false
-// }));
-
-// // If a meeting is set as active, we also want to set the parent semester as active
-// meetingSidebarItems.forEach((semester) => {
-//   semester.active = semester.items.some((meeting) => meeting.active);
-// });
 ---
-
 <Layout {...props}>
   <section id="hero">
-    <slot name="hero" />
+    <slot name="hero">
       {/* Default hero element */}
       <div class="flex flex-col items-center">
-        <FallCTFLogo year={event.year} />
+        <FallCTFLogo year={event.year} transition:name="fall-ctf-logo" />
         <span class="flex flex-row gap-2">
           {event.links.map((link) => (
             <Link

diff --git a/fallctf.com/src/pages/2024.astro b/fallctf.com/src/pages/2024.astro
@@ -1,5 +1,7 @@
 ---
 import Layout from '@/layouts/Event.astro';
+import Link from '$/components/Link.astro';
+import FallCTFLogo from '@/components/FallCTFLogo';
 import { getFallCTFEvents } from '@/utils/fallctf-events';
 
 const events = (await getFallCTFEvents()).filter((event) => event.data.year === '2024');
@@ -13,6 +15,21 @@ const event = events[0].data;
   title={event.title}
   description={event.description}
 >
+  <div slot="hero">
+    <div class="flex flex-col items-center h-screen justify-center">
+      <FallCTFLogo year={event.year} transition:name="fall-ctf-logo" />
+      <span class="flex flex-row gap-2">
+        {event.links.map((link) => (
+          <Link
+            href={link.url}
+            class="btn-primary font-bold border-2 border-surface-250"
+          >
+            {link.name}
+          </Link>
+        ))}
+      </span>
+    </div>
+  </div>
   <div slot="body">
     <div class="flex flex-col gap-4">
       <details>