fix events + table + svg

components/Bubble.module.css

@@ -6,7 +6,6 @@
 
 .bubble {
   border-radius: calc(5000rem / 16);
-
   display: flex;
   flex-direction: row;
   position: absolute;

components/MiniEventCard.module.css

@@ -6,15 +6,12 @@
 }
 
 .darkBg {
-  box-sizing: border-box;
-  position: relative;
-  padding: calc(20rem / 16);
   background-color: var(--card-background);
 }
 
 .name {
   display: flex;
-  font-size: 18px;
+  font-size: calc(18rem / 16);
   margin: 0;
 }
 
@@ -53,26 +50,14 @@
   list-style: none;
 }
 
-.darkBg > summary {
-  list-style: none;
-}
-
 .card > summary::marker {
   display: none;
 }
 
-.darkBg > summary::marker {
-  display: none;
-}
-
 .card > summary::-webkit-details-marker {
   display: none;
 }
 
-.darkBg > summary::-webkit-details-marker {
-  display: none;
-}
-
 .dropDownIcon {
   fill: var(--primary-accent);
 }

components/MiniEventCard.tsx

@@ -30,7 +30,8 @@ export const MiniEventCard: React.FC<MiniEventCardProps> = ({
   term,
   slug,
 }) => {
-  const cardBackground = background === "dark-bg" ? styles.darkBg : styles.card;
+  const cardBackground =
+    background === "dark-bg" ? `${styles.darkBg} ${styles.card}` : styles.card;
   return (
     <details className={cardBackground}>
       <summary>

components/Navbar.tsx

@@ -120,44 +120,7 @@ export function Navbar() {
           className={styles.hamburger}
           onClick={() => dispatch({ type: "open", route: router.pathname })}
         >
-          <svg
-            width="30"
-            height="23"
-            viewBox="0 0 30 23"
-            className={styles.icon}
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <line
-              x1="28"
-              y1="2"
-              x2="2"
-              y2="2"
-              stroke="#2A2A62"
-              strokeWidth="4"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-            <line
-              x1="28"
-              y1="11.375"
-              x2="2"
-              y2="11.375"
-              stroke="#2A2A62"
-              strokeWidth="4"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-            <line
-              x1="28"
-              y1="20.75"
-              x2="2"
-              y2="20.75"
-              stroke="#2A2A62"
-              strokeWidth="4"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
+          <HamburgerSvg />
         </button>
         <div
           className={
@@ -300,19 +263,7 @@ function NavItem(props: NavItemProps) {
             }
             onClick={() => props.onToggle(props.route)}
           >
-            <svg
-              width="14"
-              height="9"
-              viewBox="0 0 14 9"
-              fill="none"
-              className={styles.icon}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M7.75593 8.12713C7.35716 8.58759 6.64284 8.58759 6.24407 8.12713L0.638743 1.65465C0.0778675 1.00701 0.537921 0 1.39467 0L12.6053 0C13.4621 0 13.9221 1.00701 13.3613 1.65465L7.75593 8.12713Z"
-                fill="#2A2A62"
-              />
-            </svg>
+            <DropdownSvg />
           </button>
           <ul
             className={
@@ -397,3 +348,64 @@ function getMainRoute(route: string) {
   }
   return "/" + route.split("/")[1];
 }
+
+function HamburgerSvg() {
+  return (
+    <svg
+      width="30"
+      height="23"
+      viewBox="0 0 30 23"
+      className={styles.icon}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <line
+        x1="28"
+        y1="2"
+        x2="2"
+        y2="2"
+        stroke="#2A2A62"
+        strokeWidth="4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <line
+        x1="28"
+        y1="11.375"
+        x2="2"
+        y2="11.375"
+        stroke="#2A2A62"
+        strokeWidth="4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <line
+        x1="28"
+        y1="20.75"
+        x2="2"
+        y2="20.75"
+        stroke="#2A2A62"
+        strokeWidth="4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function DropdownSvg() {
+  return (
+    <svg
+      width="14"
+      height="9"
+      viewBox="0 0 14 9"
+      fill="none"
+      className={styles.icon}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.75593 8.12713C7.35716 8.58759 6.64284 8.58759 6.24407 8.12713L0.638743 1.65465C0.0778675 1.00701 0.537921 0 1.39467 0L12.6053 0C13.4621 0 13.9221 1.00701 13.3613 1.65465L7.75593 8.12713Z"
+        fill="#2A2A62"
+      />
+    </svg>
+  );
+}

components/Table.module.css

@@ -15,7 +15,7 @@
   vertical-align: top;
 }
 
-.table tbody tr:nth-child(odd) {
+.table tbody tr:nth-child(even) {
   background: var(--table-section);
 }
 

pages/_app.css

@@ -47,8 +47,8 @@ body {
 
   --light--button-background: #1482e3;
   --light--footer-background: #2a2a62;
-  --light--card-background: #ffffff;
-  --light--table-header: #4ed4b2;
+  --light--card-background: #DCF6F0;
+  --light--table-header: #DCF6F0;
   --light--table-section: #f7fbff;
 
   --light--blue-gradient: #1481E3;

pages/events/[year]/[term]/index.tsx

@@ -96,13 +96,13 @@ export default function TermPage(props: Props) {
             </h1>
           )}
           <div className={styles.miniEventCards}>
-            {props.pastEvents.map((event, key) => (
+            {props.pastEvents.map((event, idx) => (
               <MiniEventCard
                 {...event.metadata}
                 date={new Date(event.metadata.date)}
                 description={<MDXRemote {...event.content} />}
                 key={event.metadata.name + event.metadata.date.toString()}
-                background={key % 2 === 0 ? "dark-bg" : "normal-bg"}
+                background={idx % 2 === 0 ? "dark-bg" : "normal-bg"}
               />
             ))}
           </div>