Finished Reponsive Retouching

asusoda · Sep 1, 2024 · c68ae4c · c68ae4c
1 parent fa533ff
commit c68ae4c
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 26 deletions.
diff --git a/src/components/AboutUs.tsx b/src/components/AboutUs.tsx
@@ -25,21 +25,21 @@ const perks = [
 export default function AboutUs() {
   return (
     <main
-      className="flex flex-col  w-[70vw] max-md:w-[95vw] justify-center items-center mx-auto mb-20 max-md:mb-5"
+      className="flex flex-col w-[70vw] max-md:w-[90vw] justify-center items-center mx-auto mb-20 max-md:mb-10"
       id="info"
     >
       <section className="text-center max-md:text-left">
         <h1 className="section-header-text">About SoDA</h1>
-        <p className="hero-small-text px-24 max-lg:px-4 mx-auto max-md:hidden">
-          The Software Developers Association (SoDA) at Arizona State
-          University, is a student run, free organization dedicated to serving
-          ASU’s computer science students. SoDA is one of the largest
-          communities of students on campus, and is the largest engineering
-          organization. We provide opportunities to collaborate on projects
-          outside of the classroom, learn from university and industry
-          professionals, and prepare for a career as a software developer.
+        <p className="hero-small-text px-24 max-lg:px-6 mx-auto max-md:hidden">
+          The Software Developers Association (SoDA) at Arizona State University
+          is a student-run, free organization dedicated to serving ASU’s
+          computer science students. SoDA is one of the largest communities of
+          students on campus, and is the largest engineering organization. We
+          provide opportunities to collaborate on projects outside of the
+          classroom, learn from university and industry professionals, and
+          prepare for a career as a software developer.
         </p>
-        <p className="hero-small-text px-24 max-lg:px-4 mx-auto sm:hidden">
+        <p className="hero-small-text px-24 max-lg:px-6 mx-auto sm:hidden">
           SoDA is one of the largest communities of students on campus, and is
           the largest engineering organization. We provide opportunities to
           collaborate on projects outside of the classroom, learn from
@@ -48,17 +48,20 @@ export default function AboutUs() {
         </p>
       </section>
 
-      <section className="grid grid-cols-3 max-lg:grid-cols-1 my-10 max-md:gap-4 gap-14">
+      <section className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 my-10">
         {perks.map((perk) => (
-          <div className="bg-white rounded-2xl flex flex-col min-h-[300px] max-w-[300px]">
+          <div className="bg-white rounded-2xl flex flex-col min-h-[300px] max-w-[300px] w-full">
             <img
               src={perk.imgURL}
               className="rounded-t-xl object-cover w-full h-48"
+              alt={perk.header}
             />
-            <div className="text-soda-black px-5 py-4 text-left flex-1">
-              <h4 className="font-semibold text-2xl">{perk.header}</h4>
+            <div className="text-soda-black px-4 py-3 text-left flex-1">
+              <h4 className="font-semibold text-xl max-md:text-lg">
+                {perk.header}
+              </h4>
               <hr className="border-soda-gray opacity-75 my-2 w-[60%]" />
-              <p className="text-[16px] max-md:text-sm">{perk.description}</p>
+              <p className="text-[14px] max-md:text-sm">{perk.description}</p>
             </div>
           </div>
         ))}

diff --git a/src/components/Sponsors/Sponsors.tsx b/src/components/Sponsors/Sponsors.tsx
@@ -46,7 +46,7 @@ function SponsorsMarquee() {
   };
 
   return (
-    <main id="sponsors">
+    <main id="sponsors" className="mb-20">
       <h1 className="section-header-text">Our Sponsors</h1>
       <section className="sponsor-container">
         <div className="marquee-effect-container">
@@ -55,23 +55,23 @@ function SponsorsMarquee() {
               key={index}
               src={logoMap[element.name as SponsorLogo]} // Casting element.name to SponsorLogo
               alt={element.name}
-              className="w-[10vw] max-md:w-[16vw] object-contain"
+              className="w-[10vw] max-md:w-[18vw] object-contain"
             />
           ))}
           {sponsors.map((element, index) => (
             <img
               key={index}
               src={logoMap[element.name as SponsorLogo]} // Casting element.name to SponsorLogo
               alt={element.name}
-              className="w-[10vw] max-md:w-[16vw]  object-contain"
+              className="w-[10vw] max-md:w-[18vw]  object-contain"
             />
           ))}
           {sponsors.map((element, index) => (
             <img
               key={index}
               src={logoMap[element.name as SponsorLogo]} // Casting element.name to SponsorLogo
               alt={element.name}
-              className="w-[10vw] max-md:w-[16vw] object-contain"
+              className="w-[10vw] max-md:w-[18vw] object-contain"
             />
           ))}
         </div>

diff --git a/src/components/Team/TeamCards.css b/src/components/Team/TeamCards.css
@@ -30,7 +30,6 @@
   font-family: "Apfel-Fett";
   font-size: 2.2em;
   text-align: center;
-  padding-top: 6rem;
   border-bottom: 1px solid #fff;
   width: 80%;
   margin: auto;
@@ -162,3 +161,73 @@
   align-items: center;
   justify-content: center;
 }
+
+/* Responsive styling for smaller screens */
+@media (max-width: 768px) {
+  .team #cards .Card {
+    height: 250px; /* Reduced height for smaller screens */
+    width: 250px; /* Reduced width for smaller screens */
+  }
+
+  .card-header {
+    font-size: 1.4em; /* Smaller header font size */
+  }
+
+  .card-meta {
+    font-size: 0.9em; /* Smaller meta text size */
+  }
+
+  .card-content {
+    padding: 12px; /* Reduced padding */
+  }
+
+  .team #title {
+    font-size: 1.8em; /* Smaller title font size */
+    padding: 5vw; /* Adjusted padding */
+  }
+
+  .subteam-divider {
+    font-size: 1.8em; /* Smaller subteam divider font size */
+  }
+
+  .card-image-wrapper {
+    margin-top: 8px; /* Reduced top margin */
+  }
+
+  .card-image {
+    width: 80px; /* Smaller image width */
+    height: auto;
+  }
+}
+
+@media (max-width: 480px) {
+  .team #cards .Card {
+    height: 200px; /* Further reduced height for very small screens */
+    width: 200px; /* Further reduced width */
+  }
+
+  .card-header {
+    font-size: 1.2em; /* Even smaller header font size */
+  }
+
+  .card-meta {
+    font-size: 0.8em; /* Smaller meta text size */
+  }
+
+  .card-content {
+    padding: 10px; /* Further reduced padding */
+  }
+
+  .team #title {
+    font-size: 1.6em; /* Smaller title font size */
+    padding: 3vw; /* Further adjusted padding */
+  }
+
+  .subteam-divider {
+    font-size: 1.6em; /* Even smaller subteam divider font size */
+  }
+
+  .card-image {
+    width: 60px; /* Even smaller image width */
+  }
+}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -16,8 +16,8 @@ function Home() {
       <SponsorsMarquee />
       <MemberCards contacts={contactsData as Contacts} />
       <InfoCards />
-      {/* <ShootingStars minDelay={1000} maxSpeed={20} starWidth={20} />
-      <StarsBackground starDensity={0.0003} /> */}
+      <ShootingStars minDelay={1000} maxSpeed={20} starWidth={40} />
+      <StarsBackground starDensity={0.0009} />
     </main>
   );
 }

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -205,11 +205,11 @@ body {
 /* --------- HERO --------- */
 
 .hero {
-  @apply mx-[3vw] mt-[16vh] mb-[8vh] max-md:mt-[14vh] max-md:mb-[4vh];
+  @apply mx-[3vw] mt-[16vh] mb-[8vh] max-md:mt-[14vh] max-md:mb-[4vh] h-full;
 }
 
 .hero-container {
-  @apply mx-auto flex flex-col md:flex-row items-center justify-between;
+  @apply mx-auto sm:ml-16 flex flex-col md:flex-row items-center justify-between;
 }
 
 .left-hero {
@@ -234,12 +234,12 @@ body {
 }
 
 .marquee-effect-container {
-  @apply py-4 pl-20 flex flex-row animate-marquee whitespace-nowrap gap-8;
+  @apply py-6  max-md:px-4 pl-20 flex flex-row animate-marquee whitespace-nowrap gap-8;
 }
 
 /* --------- NAVIGATION  --------- */
 .navigation {
-  @apply w-full fixed bg-soda-black z-20 py-1;
+  @apply w-full fixed bg-soda-black z-20 max-md:py-0 py-1;
 }
 
 @layer utilities {