From 75e59fce207c3a31416a2baf2e7b088fc6a587f7 Mon Sep 17 00:00:00 2001
From: jakubmanczak <jakub@manczak.net>
Date: Wed, 21 Dec 2022 21:50:55 +0100
Subject: [PATCH] simplify admin json by mutating name string for link, add
 hover state to admin card links

---
 data/administracja.json      |  3 +-
 pages/o-gractwie.tsx         |  4 ++-
 styles/oGractwie.module.scss | 70 +++++++++++++++++++-----------------
 3 files changed, 41 insertions(+), 36 deletions(-)

diff --git a/data/administracja.json b/data/administracja.json
index 81abdfa..50ccfcb 100644
--- a/data/administracja.json
+++ b/data/administracja.json
@@ -2,8 +2,7 @@
 	{
 		"name": "jamesen",
 		"desc": "Frontendowiec nie jebany.",
-		"img": "https://pbs.twimg.com/profile_images/1605591811921149953/Ogr8ALPa_400x400.jpg",
-		"profilehref": "jamesen"
+		"img": "https://pbs.twimg.com/profile_images/1605591811921149953/Ogr8ALPa_400x400.jpg"
 	},
 	{
 		"name": "Mollin",
diff --git a/pages/o-gractwie.tsx b/pages/o-gractwie.tsx
index cf524cd..4d80c65 100644
--- a/pages/o-gractwie.tsx
+++ b/pages/o-gractwie.tsx
@@ -51,7 +51,9 @@ const PageInfo = () => {
 						return (
 							<Link
 								key={el.name}
-								href={el.profilehref ? `/profile/${el.profilehref}` : ""}
+								href={`/profile/${el.name
+									.replaceAll(" ", "-")
+									.toLocaleLowerCase()}`}
 							>
 								<article>
 									<img src={el.img} alt={`zdjęcie profilowe ${el.name}`} />
diff --git a/styles/oGractwie.module.scss b/styles/oGractwie.module.scss
index 076392a..34132e1 100644
--- a/styles/oGractwie.module.scss
+++ b/styles/oGractwie.module.scss
@@ -50,43 +50,47 @@
 	a {
 		color: inherit;
 		text-decoration: inherit;
-	}
-	article {
-		--radius: 6px;
-		flex: 1;
-		display: flex;
-		flex-direction: row;
-		background: var(--black1);
-		border-radius: var(--radius);
-		box-shadow: var(--shadow0);
-		img {
-			width: 128px;
-			max-width: 156px;
-			flex: 1;
-			border-top-left-radius: var(--radius);
-			border-bottom-left-radius: var(--radius);
-			// for alt text
-			color: var(--grey);
-			// for mollin's vertical picture to display well
-			aspect-ratio: 1 / 1;
-			object-fit: cover;
-			object-position: 50% 35%;
-		}
-		div {
-			min-width: 14rem;
-			padding: 0 1rem;
-		}
-	}
-	@media screen and (max-width: 400px) {
 		article {
-			flex-direction: column;
-			width: 100%;
+			--radius: 6px;
+			flex: 1;
+			display: flex;
+			flex-direction: row;
+			background: var(--black1);
+			border-radius: var(--radius);
+			box-shadow: var(--shadow0);
+			transition-duration: 100ms;
 			img {
-				margin: 1rem auto;
-				border-radius: 8px;
+				width: 128px;
+				max-width: 156px;
+				flex: 1;
+				border-top-left-radius: var(--radius);
+				border-bottom-left-radius: var(--radius);
+				// for alt text
+				color: var(--grey);
+				// for mollin's vertical picture to display well
+				aspect-ratio: 1 / 1;
+				object-fit: cover;
+				object-position: 50% 35%;
 			}
 			div {
-				padding-bottom: 1rem;
+				min-width: 14rem;
+				padding: 0 1rem;
+			}
+			&:hover {
+				background: var(--black2);
+			}
+		}
+		@media screen and (max-width: 400px) {
+			article {
+				flex-direction: column;
+				width: 100%;
+				img {
+					margin: 1rem auto;
+					border-radius: 8px;
+				}
+				div {
+					padding-bottom: 1rem;
+				}
 			}
 		}
 	}