feat: make all screens responsive

src/components/Footer.astro

@@ -39,7 +39,7 @@ const socialMediaIcons = [
 <footer
   class="bg-dark-blue mt-10 border-solid border-t-2 border-highlight-blue"
 >
-  <div class="mx-auto w-full max-w-screen-xl p-4 py-6 lg:py-8">
+  <div class="mx-auto w-full max-w-screen-xl p-4">
     <div class="md:flex md:justify-between">
       <div class="mb-6 md:mb-0">
         <a href="/" class="flex items-center" target="_blank">
@@ -54,9 +54,12 @@ const socialMediaIcons = [
     <div class="pt-2">
       <p class="text-white text-lg font-subHeader">
         This is an OpenSource project developed by the students at IIT BHU. If
-        this project helped you, we would greatly appreciate a <i
-          class="fa fa-star"></i>
-         on GitHub.
+        this project helped you, we would greatly appreciate a <a
+          href="https://github.com/EshaanAgg/LFXMM-Frontend"
+          class="hover:opacity-80 duration-200 underline underline-offset-8"
+          ><i class="fa fa-star underline underline-offset-8"></i>
+           on GitHub.</a
+        >
       </p>
     </div>
 
@@ -83,7 +86,7 @@ const socialMediaIcons = [
         </a>
       </span>
 
-      <span class="text-5xl text-gray-500 text-center dark:text-gray-400">
+      <span class="text-3xl text-gray-500 text-center dark:text-gray-400">
         <a href="https://sdg.copsiitbhu.co.in/" class="glitch" target="_blank">
           <span class="mainText skew"
             >COPS SDG

src/components/Header.astro

@@ -9,14 +9,14 @@ const navItems = [
 <div
   class="backdrop-blur-md sticky top-0 flex flex-col lg:flex-row justify-between items-center px-10 mb-10 border-solid border-b-2 border-highlight-blue hover:shadow-highlight-blue hover:shadow-lg duration-200 z-30"
 >
-  <div class="px-10 py-5">
+  <div class="px-10 py-2">
     <div>
       <span
         class="self-center text-3xl font-semibold whitespace-nowrap text-white sm:text-5xl"
       >
         <a
           href="/"
-          class="line1 animTypewriter font-header flex items-center text-center hover:text-highlight-blue duration-200"
+          class="line1 animTypewriter font-header flex items-center text-center hover:text-highlight-blue duration-200 md:py-3"
           title="LFX Mentorship"
         >
           LFX Mentorship
@@ -25,11 +25,9 @@ const navItems = [
     </div>
   </div>
 
-  <div
-    class="text-2xl text-white mb-5 sm:mb-0 px-10 py-2 h-36 sm:h-20 sm:py-8 flex pb-4"
-  >
+  <div class="text-xl text-white mb-2 px-10 flex md:text-2xl">
     <ul
-      class="linkUl flex flex-col sm:flex-row sm:justify-between items-center gap-2 sm:gap-20 lg:gap-8 xl:gap-16"
+      class="linkUl flex flex-row justify-between items-center gap-2 md:gap-5 lg:gap-16"
     >
       {
         navItems.map((item) => (

src/components/home/FilteredOrganizations.tsx

@@ -18,7 +18,7 @@ export const FilteredOrganizations = ({ allOrgs }: PropType) => {
   return (
     <ul
       role="list"
-      className="flex flex-wrap justify-center gap-[5px] ml-80px] mr-[80px] md-4 w-full"
+      className="flex flex-wrap justify-center gap-[10px] px-4 md-4 w-full"
     >
       {filteredOrgs.map((org: Organization) => (
         <OrganizationCard {...org} key={org.id} />

src/components/organization/PastProjectCard.tsx

@@ -41,11 +41,11 @@ export const PastProjectCard = (props: ProjectThumbnail) => {
         )}
 
         {/* Project Details button */}
-        <div className="flex flex-col md:flex-row gap-2 md:gap-6 md:items-center md:justify-center">
+        <div className="flex flex-col md:flex-row gap-2 md:gap-6 items-center justify-center">
           <a href={`/project/${id}`} target="_blank">
             <button
               type="button"
-              className="btnStyle inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-dark-blue hover:bg-white hover:text-dark-blue "
+              className="btnStyle inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-dark-blue hover:bg-white hover:text-dark-blue"
             >
               Project Details
             </button>
@@ -55,7 +55,7 @@ export const PastProjectCard = (props: ProjectThumbnail) => {
           <a href={projectUrl} target="_blank">
             <button
               type="button"
-              className="btnStyle inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-dark-blue hover:bg-white hover:text-dark-blue  "
+              className="btnStyle inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-dark-blue hover:bg-white hover:text-dark-blue"
             >
               View project on LFX
             </button>

src/pages/org/[orgID].astro

@@ -30,10 +30,12 @@ const projectData = (await projectResponse.json()).projects;
 ---
 
 <Layout title={orgData.org}>
-  <div class="flex items-center justify-center gap-2 m-2">
+  <div
+    class="flex flex-col lg:flex-row items-center justify-center gap-2 mx-auto p-2"
+  >
     <!-- Vertical column 1 containing the image and organization description-->
     <div
-      class="text-white w-1/2 flex flex-col items-center justify-center gap-4"
+      class="text-white flex flex-col items-center justify-center gap-4 lg:w-1/2"
     >
       <div class="border border-white p-2 rounded-3xl bg-white">
         <img
@@ -43,13 +45,13 @@ const projectData = (await projectResponse.json()).projects;
         />
       </div>
       <h1 class="text-3xl font-semibold">{orgData.org}</h1>
-      <p class="text-white text-md max-w-xl opacity-80">
+      <p class="text-white text-md opacity-80 m-4 p-4">
         {orgData.desc}
       </p>
     </div>
 
     <!-- Column 2 contains the graph -->
-    <div class="w-1/2">
+    <div class="lg:w-1/2 w-full mx-auto py-4 px-8 items-center">
       <Graph projects={projectData} />
     </div>
   </div>

src/pages/project/[projID].astro

@@ -32,7 +32,7 @@ const descriptionHTMLContent = marked.parse(projData.description);
 <Layout title={projData.name}>
   <div class="flex flex-col justify-center">
     <h1
-      class="text-white text-center text-5xl font-semibold pt-8 pb-6 max-w-5xl mx-auto"
+      class="text-white text-center text-4xl lg:text-5xl font-semibold pt-8 pb-6 max-w-5xl mx-auto p-6"
     >
       {projData.name}
     </h1>
@@ -42,7 +42,7 @@ const descriptionHTMLContent = marked.parse(projData.description);
         Description
       </h4>
       <div
-        class="text-white text-md max-w-5xl mx-auto opacity-90"
+        class="text-white text-md max-w-5xl mx-auto opacity-90 p-8"
         set:html={descriptionHTMLContent}
       />
     </div>