Merge pull request #440 from krishna-Ra-na/design-modification

new-web-redesign

Author: Roshanjossey

src/App.css

@@ -1,6 +1,6 @@
 .App {
   /* height: 500px; */
-  background-color: #0054B5;
+  background-color: #0a0a0a;
   text-align: center;
   display: flex;
   justify-content: center;
@@ -13,6 +13,23 @@
 }
 
 .App-header > h1 {
-  padding-top: 10%;
-  font-size: 2.5em;
+  /* padding-top: 6%; */
+  font-size: 5.1rem;
+  letter-spacing: -0.05em;
+  font-weight: 700;
 }
+
+.App-header > h1 span{
+  background: linear-gradient(to right, #60a5fa, #1d4ed8);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+@media (max-width: 700px) {
+  .App-header > h1 {
+    font-size: 3.1rem;
+    letter-spacing: -0.05em;
+    font-weight: 700;
+  }
+
+}

src/App.jsx

@@ -11,7 +11,7 @@ const App = () => {
     <div className="App">
         <Navbar />
         <div className="App-header">
-            <h1>Make your first open source contribution in 5 minutes</h1>
+            <h1>Make your first <br/> open source <span>contribution</span> <br/> in 5 minutes</h1>
         </div>
         <ScrollUpButton />
         <LinkButton />

src/components/LinkButton/LinkButton.css

@@ -1,15 +1,15 @@
 .LinkButton {
-  padding: 10px 15px;
+  padding: 16px 20px;
   text-decoration: none;
   margin: 20px auto;
 
   overflow: hidden;
 
   border-width: 0;
-  border-radius: 2px;
+  border-radius: 8px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
 
-  background-color:  #0A680D;
+  background-color:  #2563eb;
   color: #fff;
 
   -webkit-transition: background-color 0.3s;
@@ -19,7 +19,7 @@
 }
 
 .LinkButton:hover {
-  background-color: #26a65b;
+  background-color: #3b82f6;
 }
 
 .LinkButton > span {

src/components/Navbar/Navbar.css

@@ -1,30 +1,40 @@
 .topnav {
-    background-color: #0054B5;
+    background-color: #1f293726;
     overflow: hidden;
     text-align: right;
+    backdrop-filter: blur(16px);
+    border: 1px solid #f9fafb1a;
+    padding: 1.1rem;
+    display: flex;
+    justify-content:flex-end;
+    gap: 16px;
 }
 @media (max-width: 700px) {
     .topnav {
         text-align: center;
+        overflow: auto;
+        justify-content: flex-start;
     }
 }
 
 .topnav a {
-    display: inline-block;
+    display: flex;
+    align-items: center;
+    gap: 8px;
     color: #f2f2f2;
     text-align: center;
-    padding: 20px 15px;
+    padding: 0px 15px;
     text-decoration: none;
-    font-size: 20px;
+    border: 1px solid transparent;
+    /* font-size: 20px; */
 }
 
 .topnav a:hover {
-    background-color: #72B1E4;
+    background-color: #2c2e2fb3;
     color: #f2f2f2;
-    border-radius: 25px;
-    border: #72B1E4;
-    block-size: auto;
-    display: inline;
+    border-radius: 12px;
+    border:1px solid #b6b6b94a;
+    /* display: inline; */
 }
 
 .topnav a.active {
@@ -34,8 +44,8 @@
 
 .logo{
     margin-top: 10px;
-    width: 70px;
+    width: 52px;
     vertical-align:middle;
-    height: 50px;
+    height: 42px;
     display: inline-block;
 }

src/components/ProjectList/css/project-cards.css

@@ -7,11 +7,19 @@
   background: white;
   padding: 2%;
   line-height: 18px;
+  height: 140px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
 }
 .Project-Logo {
-  width: 45%;
+  width: 60px;
   height: auto;
   margin-top: 5%;
+  border-radius: 8px;
+  display: block;
+  max-height: 100px;
 }
 .Card-Body {
   position: relative;
@@ -22,11 +30,14 @@
   width: 16%;
   min-width: 225px;
   display: flex;
-  margin: 1.5vw;
-  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
-  -webkit-transition: box-shadow 0.1s ease-in-out;
+  margin: .5vw;
+  /* box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
+  -webkit-transition: box-shadow 0.1s ease-in-out; */
   transition: box-shadow 0.1s ease-in-out;
   background-color: #fff;
+  border: 1px solid #1f293740;
+  border-radius: 8px;
+  padding: 8px;
 }
 @media (max-width: 700px) {
   .Card-Container {
@@ -38,7 +49,7 @@
 }
 
 .Card-Container:hover {
-  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 10px, rgba(0, 0, 0, 0.23) 0px 3px 10px;
+  box-shadow: rgba(0, 0, 0, 0.053) 0px 3px 10px, rgba(0, 0, 0, 0.066) 0px 3px 10px;
 }
 .Card-Real-Link:hover {
   text-decoration: none;
@@ -62,6 +73,26 @@
 .Card-Description {
   position: relative;
   padding: 5%;
+  max-height: 180px;
+  overflow: auto;
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+.Card-Description::-webkit-scrollbar {
+  width: 6px; 
+}
+
+.Card-Description::-webkit-scrollbar-thumb {
+  background-color: #888; 
+  border-radius: 10px; 
+}
+
+.Card-Description::-webkit-scrollbar-thumb:hover {
+  background-color: #555; 
+}
+
+.Card-Description::-webkit-scrollbar-track {
+  background-color: #f1f1f1;
 }
 .Card-Link {
   position: relative;
@@ -74,7 +105,8 @@
 }
 .Card-Link:hover {
   color: whitesmoke;
-  background: #0f3cef;
+  background: #3b82f6;
+  border-radius: 8px;
 }
 .Card-Title {
   margin-top: 6%;
@@ -85,12 +117,20 @@
   margin-left: 10%;
 }
 
+.Card-Tag{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
 .Card-Tag div {
   display: inline-block;
-  background-color: #c8e1f9;
-  padding: 5px;
-  border-radius: 12px;
-  margin: 10px 10px;
+  background-color: #0f3cef33;
+  padding: .3rem .65rem;
+  border-radius: 8px;
+  border: 1px solid #42404047;
   vertical-align: middle;
 }
 

src/components/SocialShare/SocialShare.css

@@ -3,7 +3,7 @@
   flex-direction: column;
   align-items: center;
   padding: 1em;
-  background: #4b4949;
+  background: #0a0a0a;
 }
 
 #social-share > h2 {
@@ -21,12 +21,12 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 90px;
-  height: 90px;
-  margin: 1.1em;
-  border-radius: 2px;
+  width: 52px;
+  height: 52px;
+  margin: .7em;
+  border-radius: 4px;
   background: #4b4949;
-  border: solid white 4px;
+  border: solid white 1px;
 }
 
 .icon-card:hover{