From 5f153f65751112d2974916fed1a787e96788de1c Mon Sep 17 00:00:00 2001
From: Jesse Gerbrandt <jgerbrandt@live.com>
Date: Tue, 4 Jun 2024 20:26:28 -0600
Subject: [PATCH] adding scalling to sponsors page

---
 bio-rocket/src/routes/+layout.svelte        |  2 +-
 bio-rocket/src/routes/sponsors/+page.svelte | 35 +++++++++++++--------
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/bio-rocket/src/routes/+layout.svelte b/bio-rocket/src/routes/+layout.svelte
index da0981c..231cd09 100644
--- a/bio-rocket/src/routes/+layout.svelte
+++ b/bio-rocket/src/routes/+layout.svelte
@@ -138,7 +138,7 @@
 						height="40"
 					/>
 				</a>
-				<a href="https://www.linkedin.com/in/biorocket/" target="_blank" rel="noreferrer">
+				<a href="https://www.linkedin.com/company/biorocket/" target="_blank" rel="noreferrer">
 					<img
 						src={Linkedin}
 						alt="Linkedin Logo"
diff --git a/bio-rocket/src/routes/sponsors/+page.svelte b/bio-rocket/src/routes/sponsors/+page.svelte
index cc579ed..80550bb 100644
--- a/bio-rocket/src/routes/sponsors/+page.svelte
+++ b/bio-rocket/src/routes/sponsors/+page.svelte
@@ -7,29 +7,31 @@
 </script>
 
 <div class="container h-screen mx-auto flex flex-col justify-center items-center">
-    <h1 class="text-center text-5xl mt-8 mb-8 text-primary-500">Our Sponsors</h1>
-    <h2 class="text-center text-4xl mt-8 mb-8 text-primary-500">Tier 1 Sponsors</h2>
-    <div class="w-full text-token flex justify-center items-center gap-16 mb-8">
-        <svelte:component this={Tier1Logo} width={200} />
+    <h1 class="text-center text-3xl sm:text-5xl mt-[0%] sm:mt-8 mb-8 text-primary-500">Our Sponsors</h1>
+    <h2 class="text-center text-2xl sm:text-4xl mt-8 mb-8 text-primary-500">Tier 1 Sponsors</h2>
+    <div class="w-full text-token flex justify-center items-center gap-8 sm:gap-16 mb-0 sm:mb-8">
+        <div class="w-[30%]">
+            <svelte:component this={Tier1Logo} />
+        </div>
         <div class="sponsor-placeholder"></div>
     </div>
-    <h2 class="text-center text-4xl mt-8 mb-8 text-primary-500">Tier 2 Sponsors</h2>
-    <div class="w-full text-token flex justify-center items-center gap-16 mb-8">
+    <h2 class="text-center text-2xl sm:text-4xl mt-8 mb-8 text-primary-500">Tier 2 Sponsors</h2>
+    <div class="w-full text-token flex justify-center items-center gap-8 sm:gap-16 mb-0 sm:mb-8">
         <div class="sponsor-placeholder"></div>
         <div class="sponsor-placeholder"></div>
         <div class="sponsor-placeholder"></div>
     </div>
-    <h2 class="text-center text-4xl mt-8 mb-8 text-primary-500">Tier 3 Sponsors</h2>
-    <div class="w-full text-token flex justify-center items-center gap-16 mb-8">
+    <h2 class="text-center text-2xl sm:text-4xl mt-8 mb-8 text-primary-500">Tier 3 Sponsors</h2>
+    <div class="w-full text-token flex justify-center items-center gap-8 sm:gap-16 mb-0 sm:mb-8">
         <div class="sponsor-placeholder"></div>
         <div class="sponsor-placeholder"></div>
         <div class="sponsor-placeholder"></div>
     </div>
 </div>
 
-<div class="container h-screen mx-auto flex flex-col justify-top items-center">
-    <h1 class="text-center text-5xl mt-0 mb-8 text-primary-500">Sponsor Us</h1>
-    <div class="w-full text-token grid grid-cols-3 md:grid-cols-3 gap-4">
+<div class="container mx-auto flex flex-col justify-top items-center">
+    <h1 class="text-center text-3xl sm:text-5xl mt-0 mb-8 text-primary-500">Sponsor Us</h1>
+    <div class="w-full text-token grid grid-cols-1 sm:grid-cols-3 md:grid-cols-3 gap-4">
         <div class="card bg-initial card-hover overflow-hidden">
             <header>
                 <img class="logo" src={Book} alt="branding logo" />
@@ -81,8 +83,8 @@
             <hr class="opacity-50" />
         </div>
     </div>
-    <h2 class="text-center text-4xl mt-8 mb-0">Help us realize our vision today!</h2>
-    <h3 class="text-center text-3xl mt-4 mb-8">
+    <h2 class="text-center text-2xl sm:text-4xl mt-8 mb-0">Help us realize our vision today!</h2>
+    <h3 class="text-center text-xl sm:text-3xl mt-4 mb-[20%] sm:mb-8">
         <a href="mailto:biorocketuofc@gmail.com" class="email-link">biorocketuofc@gmail.com</a>
     </h3>
 </div>
@@ -101,6 +103,13 @@
         height: 150px;
         background-color: #ddd; /* light gray */
     }
+
+    @media (max-width: 640px) {
+        .sponsor-placeholder {
+            width: 100px;
+            height: 100px;
+        }
+    }
     .email-link {
         display: inline-block;
         padding: 10px 20px;