Made changes to CSS Files

src/pages/Community.jsx

@@ -1,9 +1,10 @@
+// community.jsx
 import React, { useState, useEffect } from 'react'
 import Header from '../components/Navbar'
 import '../styles/Community.css'
 import Loader from '../components/Loader'
-import { useContext } from 'react';
-import { ToolContext } from '../App';
+import { useContext } from 'react'
+import { ToolContext } from '../App'
 
 function Community() {
   const { darkMode } = useContext(ToolContext);
@@ -31,8 +32,11 @@ function Community() {
 
   return (
     <div className={`all ${darkMode ? 'dark-mode' : ''}`}>
+      {' '}
       <Header />
-      <h2 className={`contributor-heading ${darkMode ? 'dark-mode' : ''}`}>Meet Our Contributors</h2>
+      <div className={`contributor-heading ${darkMode ? 'dark-mode' : ''}`}>
+        <h2>Meet Our Contributors</h2>
+      </div>
       {initialLoading ? (
         <Loader />
       ) : (
@@ -41,20 +45,29 @@ function Community() {
             (contributor) =>
               contributor &&
               contributor.type !== 'Bot' && ( //to remove bot from the contributors list
-                <li className="contributor" key={contributor.id}>
-                  <a
-                    className="contributor-anchor"
-                    href={contributor.html_url}
-                    target="_blank"
-                    title={`${contributor.login}`}
-                  >
-                    <img
-                      alt={contributor.login}
-                      className={`contributor-image ${darkMode ? 'dark-mode' : ''}`}
-                      loading="lazy"
-                      src={contributor.avatar_url}
-                    />
-                  </a>
+                <li className={`contributor ${darkMode ? 'dark-mode' : ''}`} key={contributor.id}>
+                  <div className={`contributor-card ${darkMode ? 'dark-mode' : ''}`}>
+                    <a
+                      rel="noopener noreferrer"
+                      className={`contributor-anchor ${darkMode ? 'dark-mode' : ''}`}
+                      href={contributor.html_url}
+                      target="_blank"
+                      title={`${contributor.login}`}
+                    >
+                      <img
+                        alt={contributor.login}
+                        className={`contributor-image ${darkMode ? 'dark-mode' : ''}`}
+                        loading="lazy"
+                        src={contributor.avatar_url}
+                      />
+                    </a>
+                  </div>
+                  <div className={`username ${darkMode ? 'dark-mode' : ''}`}>
+                    <p>{contributor.login}</p>
+                  </div>
+                  <p className={`contributions ${darkMode ? 'dark-mode' : ''}`}>
+                    {contributor.contributions} commits
+                  </p>
                 </li>
               )
           )}
@@ -64,4 +77,4 @@ function Community() {
   )
 }
 
-export default Community
+export default Community

src/styles/Community.css

@@ -1,9 +1,29 @@
 /*styles/Community.css*/
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&family=Roboto&display=swap');
+:root {
+  --primary-white: #f1f1ef;
+  --primary-black: #373530;
+}
+
+.all .dark-mode{
+  background-color: var(--primary-white);
+  color: var(--primary-black);
+}
+
+.contributors-list .dark-mode{
+  background-color: var(--primary-white);
+}
+
+.contributor-heading .dark-mode{
+  background-color: var(--primary-white);
+}
+
 .contributor-heading {
-  text-align: center;
-  margin: 20px;
+  display: flex;
+  justify-content: center;
+  width: 100vw;
   font-size: 3rem;
+  text-align: center;
   font-weight: 500;
 }
 
@@ -13,22 +33,20 @@
   align-items: center;
   height: 100%;
   font-size: 2rem;
-  margin: 20px 20px;
 }
 
-.contributors-list {
+.all .contributors-list{
+  position: relative;
   list-style: none;
-  padding: 5px;
+  margin: 0 auto;
+  padding: 15px;
   width: 100%;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   grid-gap: 3rem;
-  margin-bottom: 4rem;
-  margin-top: 3rem;
 }
-
 .contributors-list .contributor-anchor {
   display: flex;
   width: 100px;
@@ -39,13 +57,14 @@
   justify-content: center;
 }
 .contributor {
-  border: 3px solid #191e2d;
+  border: 3px solid;
   transition: 0.3s;
   border-radius: 10px;
   padding: 4px;
   background-color: #f1f1ef;
   cursor: pointer;
 }
+
 .contributor-card {
   display: flex;
   justify-content: center;
@@ -56,7 +75,7 @@
   box-shadow: 0px -1px 26px 0px rgba(0.59);
   -webkit-box-shadow: 0px -1px 26px 0px rgba(0.59);
   -moz-box-shadow: 0px -1px 26px 0px rgba(0.59);
-  transform: scale(1.2);
+  transform: scale(1.08);
 }
 
 .contributors-list .contributor-anchor .contributor-image {
@@ -74,18 +93,23 @@
 
 .username {
   text-align: center;
-  font-size: 15px;
-  margin-top: 8px;
+  font-size: 14px;
+  margin-top: 6px;
+  font-weight: 600;
   font-family: 'Poppins', sans-serif;
+  width: 10vw;
 }
 .contributions {
   text-align: center;
   font-size: 15px;
   font-weight: 400;
 }
+.all .contributor-image.dark-mode{
+  border-radius: 50px;
+}
 
-@media screen and (max-width: 1024px) {
-  .contributors-list {
+@media screen and (min-width: 569px) and (max-width: 1024px) {
+  .all .contributors-list {
     grid-gap: 2rem;
   }
 
@@ -100,19 +124,46 @@
     width: 90px;
   }
   .username {
-    font-size: 10px;
+    font-size: 14px;
+    width: 17.7vw;
+    font-weight: 600;
+    text-align: center;
   }
 }
 
-@media screen and (max-width: 568px) {
-  .contributors-list {
+@media screen and (min-width: 360px) and (max-width: 539px) {
+  .all .contributors-list {
     width: 100%;
     grid-gap: 1rem;
   }
 
   .contributors-list .contributor-anchor {
+    width: 70px;
+    height: 70px;
+    border-radius: 80px;
+  }
+
+  .contributors-list .contributor-anchor .contributor-image {
     width: 80px;
-    height: 80px;
+  }
+  .username {
+    text-align: center;
+    font-size: 13px;
+    font-weight: 600;
+    font-family: 'Poppins', sans-serif;
+    width: 38vw;
+  }
+}
+
+@media screen and (min-width: 540px) and (max-width: 568px) {
+  .all .contributors-list {
+    width: 100%;
+    grid-gap: 1rem;
+  }
+
+  .contributors-list .contributor-anchor {
+    width: 70px;
+    height: 70px;
     border-radius: 80px;
   }
 
@@ -122,6 +173,22 @@
   .username {
     text-align: center;
     font-size: 15px;
+    font-weight: 600;
+    font-family: 'Poppins', sans-serif;
+    width: 26.7vw;
+  }
+}
+
+@media screen and (max-width: 359px) {
+  .username {
+    font-size: 13px;
+    font-weight: 600;
     font-family: 'Poppins', sans-serif;
+    width: 50vw;
+    text-align: center;
+  }
+  .all .contributors-list {
+    width: 100%;
+    grid-gap: 1rem;
   }
 }