Project Card Size (#198)

Author: saiteja13427

src/components/githubRepoCard/GithubRepoCard.css

@@ -1,9 +1,9 @@
 .repo-card-div {
   color: rgb(88, 96, 105);
-  background-color: rgb(255, 255, 255);
   box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 30px -15px;
   padding: 2rem;
   cursor: pointer;
+  flex: 1 1 25%;
 }
 .repo-card-div:hover {
   box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px -10px;
@@ -49,8 +49,7 @@
 }
 
 .repo-name {
-  white-space: nowrap;
-  text-overflow: ellipsis;
+  text-align: left;
   color: rgb(36, 41, 46);
   font-family: "Google Sans Regular";
   margin-bottom: 0.75rem;
@@ -94,7 +93,17 @@
   margin-right: 0px;
 }
 
+@media (max-width: 1200px) {
+  .repo-card-div {
+    flex: 1 1 40%;
+  }
+}
+
 @media (max-width: 768px) {
+  .repo-card-div {
+    flex: 1 1 100%;
+  }
+
   .repo-name {
     font-size: 16px;
   }

src/components/githubRepoCard/GithubRepoCard.js

@@ -10,14 +10,9 @@ export default function GithubRepoCard({ repo, theme }) {
   }
 
   return (
-    <div>
+    <div className="repo-card-div" style={{ backgroundColor: theme.highlight }}>
       <Fade bottom duration={2000} distance="40px">
-        <div
-          className="repo-card-div"
-          key={repo.id}
-          onClick={() => openRepoinNewTab(repo.url)}
-          style={{ backgroundColor: theme.highlight }}
-        >
+        <div key={repo.id} onClick={() => openRepoinNewTab(repo.url)}>
           <div className="repo-name-div">
             <svg
               aria-hidden="true"

src/components/publicationsCard/PublicationCard.css

@@ -4,6 +4,7 @@
   box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 30px -15px;
   padding: 2rem;
   cursor: pointer;
+  flex: 1 1 25%;
 }
 .publication-card-div:hover {
   box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px -10px;
@@ -15,8 +16,7 @@
 }
 
 .publication-name {
-  white-space: nowrap;
-  text-overflow: ellipsis;
+  text-align: left;
   color: rgb(36, 41, 46);
   font-family: "Google Sans Regular";
   margin-bottom: 0.75rem;
@@ -51,7 +51,17 @@
   margin-right: auto;
 }
 
+@media (max-width: 1200px) {
+  .publication-card-div {
+    flex: 1 1 40%;
+  }
+}
+
 @media (max-width: 768px) {
+  .publication-card-div {
+    flex: 1 1 100%;
+  }
+
   .publication-name {
     font-size: 16px;
   }

src/components/publicationsCard/PublicationCard.js

@@ -9,14 +9,12 @@ export default function GithubRepoCard({ repo, theme }) {
   }
 
   return (
-    <div>
+    <div
+      className="publication-card-div"
+      style={{ backgroundColor: theme.highlight }}
+    >
       <Fade bottom duration={2000} distance="40px">
-        <div
-          className="publication-card-div"
-          key={repo.id}
-          onClick={() => openRepoinNewTab(repo.url)}
-          style={{ backgroundColor: theme.highlight }}
-        >
+        <div key={repo.id} onClick={() => openRepoinNewTab(repo.url)}>
           <div className="publication-name-div">
             <p className="publication-name" style={{ color: theme.text }}>
               {repo.name}

src/pages/projects/Projects.css

@@ -65,8 +65,9 @@
   font-weight: 600;
 }
 .repo-cards-div-main {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
   gap: 1rem 1rem;
   margin-left: 40px;
   margin-right: 40px;