Introduce mobile and tablet design for the page.

Author: HaudinFlorence

src/components/fundable/index.tsx

@@ -13,36 +13,44 @@ export function getCategoryFromProjectPageName(pageName: string) {
   return null;
 }
 
-export default function FundableProjects() {
+export function MainAreaFundableProjects() {
   return (
     <div>
-      <div className="container upper-container-with-margin-top">
-        
-        <div className="row">
-           <div className="col col--2">
-            <MenuSidebar />
-           </div>
-          <div className="col col--9 col--offset-1
-          ">
-            <h1 style={{ padding: "0" }}>Check out our projects available for funding!</h1>
- 
-            <section id="jupyter-ecosystem">
-              <ProjectCategory
-                projectCategoryName={"Jupyter Ecosystem"}
-                projectCategory={fundableProjectsDetails.jupyterEcosystem}
-              />
-            </section>
-            <section id="project-management">
-              <ProjectCategory
-                projectCategoryName={"Package Management"}
-                projectCategory={fundableProjectsDetails.packageManagement}
-              />
-            </section>
-          </div>
+      <h1 style={{ padding: "0" }}>Check out our projects available for funding!</h1>
+
+      <section id="jupyter-ecosystem">
+        <ProjectCategory
+          projectCategoryName={"Jupyter Ecosystem"}
+          projectCategory={fundableProjectsDetails.jupyterEcosystem}
+        />
+      </section>
+      <section id="project-management">
+        <ProjectCategory
+          projectCategoryName={"Package Management"}
+          projectCategory={fundableProjectsDetails.packageManagement}
+        />
+      </section>
+    </div>
+
+  )
+}
+
+export default function FundableProjects() {
+  return (
+
+    <div className="container upper-container-with-margin-top">
+      <div className="row">
+        <div className={"col col--2" + " " + styles.menu_sidebar}>
+          <MenuSidebar />
+        </div>
+        <div className={"col col--9 col--offset-1" + " " + styles.main_area_desktop} >
+          <MainAreaFundableProjects />
+        </div >
+        <div className={"col col--12" + " " + styles.main_area_mobile} >
+          <MainAreaFundableProjects />
         </div>
       </div>
     </div >
 
-
   );
 }

src/components/fundable/styles.module.css

@@ -1,11 +1,4 @@
-.small_project_card {
-  width: 1020px;
-  /*margin: var(--ifm-spacing-xl) 0;*/
-  /*padding: 30px 60px ;*/
-  margin: var(--ifm-spacing-2xl) 0;
-  border: 1px solid #ccc;
-  cursor: pointer;
-}
+
 
 .small_project_card:hover {
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
@@ -68,13 +61,7 @@
   z-index: 4000;
 }
 
-.large_project_card {
-  width: 1000px;
-  height: 900px;
-  padding: 40px;
-  overflow-y: auto;
-  border-radius: 8px;
-}
+
 
 .large_project_card_title {
   font-family: var(--ifm-font-family-roboto);
@@ -305,11 +292,39 @@
     text-align: center;
   }
 
-@media only screen and (max-width: 996px) {
+@media only screen and (max-width: 500px) {
   /*Mobile*/
   .category_header {
     font-size: 20px;
 }
+ul {
+  display: flex;
+  justify-content: center;
+}
+.main_area_desktop {
+display: none
+}
+
+.menu_sidebar {
+  display: none
+}
+
+.small_project_card {
+  width: 90vw;
+  margin: var(--ifm-spacing-2xl) 0;
+  border: 1px solid #ccc;
+  cursor: pointer;
+  padding: 18px;
+}
+
+.large_project_card {
+  width: 90vw;
+  padding: 40px;
+  overflow-y: auto;
+  border-radius: 8px;
+  padding: var(--ifm-spacing-xl) var(--ifm-spacing-xl);
+}
+
 
 .small_input {
     width: 300px;
@@ -322,16 +337,56 @@
     height: 160px;
     border-radius: 4px;
   }
+}
 
+@media (min-width: 500px) and (max-width: 996px) {
+  /*Tablet*/
 
+  .small_project_card {
+  width: 80vw;
+  margin: var(--ifm-spacing-2xl) 0;
+  border: 1px solid #ccc;
+  cursor: pointer;
+}
+  .large_project_card {
+  width: 80vw;
+  padding: 40px;
+  overflow-y: auto;
+  border-radius: 8px;
+  padding: var(--ifm-spacing-xl) var(--ifm-spacing-xl);
+}
+.main_area_desktop {
+display: none
+}
+
+.menu_sidebar {
+  display: none
+}
+  
 }
 
 @media only screen and (min-width: 996px) {
   /*Desktop*/
    .category_header {
-  /*font-size: var(--ifm-font-size-secondary-title);*/
   font-size: 28px;
 }
+.small_project_card {
+  width: 920px;
+  margin: var(--ifm-spacing-2xl) 0;
+  border: 1px solid #ccc;
+  cursor: pointer;
+}
+
+.large_project_card {
+  width: 1000px;
+  height: 900px;
+  padding: 40px;
+  overflow-y: auto;
+  border-radius: 8px;
+}
+.main_area_mobile {
+  display: none;
+}
 .small_input {
       width: 508px;
       height: 56px;