From 3d60cb13ddd79049165a6da3cc6c4e71062c7e2e Mon Sep 17 00:00:00 2001
From: Sboonny <muhammed@freecodecamp.org>
Date: Tue, 21 Feb 2023 11:18:35 +0000
Subject: [PATCH] turn the link into a button

Co-authored-by: sembauke <semboot699@gmail.com>
---
 .../profile/components/portfolio.css          | 30 ++++++++++++-------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/client/src/components/profile/components/portfolio.css b/client/src/components/profile/components/portfolio.css
index 1836dd71f8f..3cabe228aa7 100644
--- a/client/src/components/profile/components/portfolio.css
+++ b/client/src/components/profile/components/portfolio.css
@@ -18,17 +18,28 @@
 }
 
 .portfolio-container h3 {
-  font-size: 1.5rem;
   margin-top: 0.5em;
-  margin-inline-start: 0.5em;
+  margin-inline: 0.5rem;
   grid-column: 1/ -1;
-  grid-row: 2;
+  grid-row: 3;
+  font-size: unset;
+}
+
+.portfolio-container a {
+  background-color: var(--primary-color);
+  color: var(--primary-background);
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  padding-inline: 0.75rem;
+  padding-block: 0.5rem;
+  border-radius: 15px;
 }
 
 .portfolio-container p {
   grid-column: 1/ -1;
   margin-inline-start: 0.5em;
-  grid-row: 3;
+  grid-row: 2;
 }
 
 @media (max-width: 990px) {
@@ -39,7 +50,7 @@
 
 @media (min-width: 995px) {
   .portfolio-container {
-    grid-template-rows: 0.1fr 1fr;
+    grid-template-rows: 1fr 0.1fr;
     grid-template-columns: 300px 1fr;
   }
 
@@ -50,12 +61,12 @@
 
   .portfolio-container h3 {
     grid-column: 2;
-    grid-row: 1;
+    grid-row: 2;
   }
 
   .portfolio-container p {
     grid-column: 2;
-    grid-row: 2;
+    grid-row: 1;
   }
 }
 
@@ -73,9 +84,8 @@
 }
 
 .portfolio-container a:is(:hover, :focus, :focus-visible) {
-  background-color: revert;
-  text-decoration: underline;
-  text-decoration-color: var(--blue-mid);
+  outline: 2px solid var(--blue-mid);
+  outline-offset: 2px;
 }
 
 /* Timeline pagination */