From a425c7769074f1708ae2873dc826bd92cf250484 Mon Sep 17 00:00:00 2001
From: Dad134 <dad134@Dad134s-MacBook-Pro.local>
Date: Mon, 1 Dec 2025 16:01:55 -0800
Subject: [PATCH 1/2] responsified events page

---
 package-lock.json                    | 14 +-------------
 src/components/events/Card.tsx       | 18 +++++++++---------
 src/components/events/EventBoard.tsx |  4 ++--
 3 files changed, 12 insertions(+), 24 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3d085f0..4582465 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1806,7 +1806,6 @@
       "integrity": "sha512-MoFsEJKkAtZCrC1r6CM8U22GzhG7u2Wir8ons/aCKH6MBdD1ibV24zOSSkdZVUKqN5i396zG5VKLYZ3yaUZdLA==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -1817,7 +1816,6 @@
       "integrity": "sha512-0Knk+HJiMP/qOZgMyNFamlIjw9OFCsyC2ZbigmEEyXXixgre6IQpm/4V+r3qH4GC1JPvRJKInw+on2rV6YZLeA==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.0.0"
       }
@@ -1882,7 +1880,6 @@
       "integrity": "sha512-LPcw1yHD3ToaDEoljFEfQ9j2xShY367h7FZ1sq5NJT9I3yj4LHer1Xd1yRSOdYy9BpsrxU7R+eoDokChYM53lQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.28.0",
         "@typescript-eslint/types": "8.28.0",
@@ -2215,7 +2212,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2890,8 +2886,7 @@
       "version": "8.6.0",
       "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
       "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/embla-carousel-react": {
       "version": "8.6.0",
@@ -3125,7 +3120,6 @@
       "integrity": "sha512-jV7AbNoFPAY1EkFYpLq5bslU9NLNO8xnEeQXwErNibVryjk67wHVmddTBilc5srIttJDBrB0eMHKZBFbSIABCw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3187,7 +3181,6 @@
       "integrity": "sha512-4EQQr6wXwS+ZJSzaR5ZCrYgLxqvUjdXctaEtBqHcbkW944B1NQyO4qpdHQbXBONfwxXdkAY81HH4+LUfrg+zPw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "eslint-config-prettier": "bin/cli.js"
       },
@@ -5293,7 +5286,6 @@
       "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -5444,7 +5436,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
       "integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5475,7 +5466,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz",
       "integrity": "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.25.0"
       },
@@ -6335,7 +6325,6 @@
       "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -6408,7 +6397,6 @@
       "integrity": "sha512-pS1hdZ+vnrpDIxuFXYQpLTILglTjSYJ9MbetZctrUawogUsPdz31DIIRZ9+rab0LhYNTsk88w4fIzVheiTbWOQ==",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.0.0",
         "@typescript-eslint/types": "8.0.0",
diff --git a/src/components/events/Card.tsx b/src/components/events/Card.tsx
index 42cf4c3..50a204c 100644
--- a/src/components/events/Card.tsx
+++ b/src/components/events/Card.tsx
@@ -16,16 +16,16 @@ const Card = ({
   time,
 }: CardProps) => {
   return (
-    <div className="flex w-full flex-row">
-      <div className="border-vsa-green-400 bg-vsa-green-300 flex w-1/4 flex-col justify-center rounded-l-md border-2 p-1 text-center text-white">
-        <p className="text-3xl font-bold">{month}</p>
-        <p className="text-3xl font-bold">{day}</p>
-        <p className="font-vsa-alt pt-3 text-lg">{time}</p>
+    <div className="flex w-full flex-col md:flex-row">
+      <div className="border-vsa-green-400 bg-vsa-green-300 flex w-full flex-row justify-around rounded-t-md border-2 p-3 text-center text-white md:w-1/4 md:flex-col md:justify-center md:rounded-l-md md:rounded-tr-none md:p-1">
+        <p className="text-2xl font-bold md:text-3xl">{month}</p>
+        <p className="text-2xl font-bold md:text-3xl">{day}</p>
+        <p className="font-vsa-alt pt-0 text-base md:pt-3 md:text-lg">{time}</p>
       </div>
-      <div className="border-vsa-green-400 bg-vsa-yellow-100 w-full rounded-r-md border-2 border-l-0 p-4 text-left">
-        <p className="text-vsa-pink-300 text-2xl font-bold">{title}</p>
-        <p className="text-lg font-bold text-black">{location}</p>
-        <p className="font-vsa-alt text-vsa-brown pt-3 text-sm">
+      <div className="border-vsa-green-400 bg-vsa-yellow-100 w-full rounded-b-md border-2 border-t-0 p-4 text-left md:rounded-r-md md:rounded-bl-none md:border-l-0 md:border-t-2">
+        <p className="text-vsa-pink-300 text-xl font-bold md:text-2xl">{title}</p>
+        <p className="text-base font-bold text-black md:text-lg">{location}</p>
+        <p className="font-vsa-alt text-vsa-brown pt-2 text-sm md:pt-3">
           {description}
         </p>
       </div>
diff --git a/src/components/events/EventBoard.tsx b/src/components/events/EventBoard.tsx
index cc3df62..46ff26b 100644
--- a/src/components/events/EventBoard.tsx
+++ b/src/components/events/EventBoard.tsx
@@ -7,8 +7,8 @@ interface BoardProps {
 
 const EventsBoard = ({ title, text, children }: BoardProps) => {
   return (
-    <div className="mb-14 w-full max-w-2xl text-center text-2xl">
-      <p className={` ${text} p-5 text-4xl`}>{title}</p>
+    <div className="mb-14 w-full max-w-2xl px-4 text-center text-2xl md:px-0">
+      <p className={` ${text} p-5 text-3xl md:text-4xl`}>{title}</p>
       <div className="grid grid-cols-1 place-items-center gap-5">
         {children}
       </div>

From c90d26cfdb243c6daaeaf1ffdb63abc698fc3b66 Mon Sep 17 00:00:00 2001
From: Dad134 <dad134@macbookpro.lan>
Date: Sun, 14 Dec 2025 14:22:47 -0800
Subject: [PATCH 2/2] Modified Responsified Events Card Page

---
 src/components/events/Card.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/events/Card.tsx b/src/components/events/Card.tsx
index 50a204c..549ea2d 100644
--- a/src/components/events/Card.tsx
+++ b/src/components/events/Card.tsx
@@ -16,14 +16,16 @@ const Card = ({
   time,
 }: CardProps) => {
   return (
-    <div className="flex w-full flex-col md:flex-row">
-      <div className="border-vsa-green-400 bg-vsa-green-300 flex w-full flex-row justify-around rounded-t-md border-2 p-3 text-center text-white md:w-1/4 md:flex-col md:justify-center md:rounded-l-md md:rounded-tr-none md:p-1">
+    <div className="flex w-[95%] flex-col md:w-full md:flex-row">
+      <div className="border-vsa-green-400 bg-vsa-green-300 flex w-full flex-row items-center justify-around rounded-t-md border-2 p-3 text-center text-white md:w-1/4 md:flex-col md:justify-center md:rounded-l-md md:rounded-tr-none md:p-1">
         <p className="text-2xl font-bold md:text-3xl">{month}</p>
         <p className="text-2xl font-bold md:text-3xl">{day}</p>
         <p className="font-vsa-alt pt-0 text-base md:pt-3 md:text-lg">{time}</p>
       </div>
-      <div className="border-vsa-green-400 bg-vsa-yellow-100 w-full rounded-b-md border-2 border-t-0 p-4 text-left md:rounded-r-md md:rounded-bl-none md:border-l-0 md:border-t-2">
-        <p className="text-vsa-pink-300 text-xl font-bold md:text-2xl">{title}</p>
+      <div className="border-vsa-green-400 bg-vsa-yellow-100 w-full rounded-b-md border-2 border-t-0 p-4 text-left md:rounded-r-md md:rounded-bl-none md:border-t-2 md:border-l-0">
+        <p className="text-vsa-pink-300 text-xl font-bold md:text-2xl">
+          {title}
+        </p>
         <p className="text-base font-bold text-black md:text-lg">{location}</p>
         <p className="font-vsa-alt text-vsa-brown pt-2 text-sm md:pt-3">
           {description}