adding scalling to sponsors page

Bio-Rocket · Jun 5, 2024 · 5f153f6 · 5f153f6
1 parent 94ea389
commit 5f153f6
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 14 deletions.
diff --git 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
@@ -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:[email protected]" class="email-link">[email protected]</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;