From 86cd0987bd7713658b92dc4477b338ecbe029972 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Ma=C5=84czak?=
 <56172798+jakubmanczak@users.noreply.github.com>
Date: Sat, 31 Jul 2021 18:16:52 +0200
Subject: [PATCH] add descriptions and update card component

---
 src/components/Card.vue | 20 ++++++++++++++++----
 src/pages/Index.vue     | 40 +++++++++++++++++++++++++++++++++++-----
 2 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/src/components/Card.vue b/src/components/Card.vue
index f08a94b..dc7e875 100644
--- a/src/components/Card.vue
+++ b/src/components/Card.vue
@@ -10,9 +10,12 @@
 					<h3>{{ name }}</h3>
 					<p>{{ nickname }}</p>
 				</div>
-				<p style="text-align: justify">
-					{{ description }}
-				</p>
+				<div class="cardInnerInfoDescription">
+					<p style="text-align: left">
+						{{ description }}
+					</p>
+				</div>
+				<div class="cardInnerInfoMeta"></div>
 			</div>
 		</div>
 	</div>
@@ -43,7 +46,7 @@ export default {
 		display: flex;
 		flex-direction: row;
 		.cardInnerPhoto {
-			width: 8rem;
+			min-width: 8rem;
 			height: 8rem;
 			background-color: black;
 			border-top-left-radius: 3px;
@@ -62,12 +65,21 @@ export default {
 					color: var(--graytext);
 				}
 			}
+			.cardInnerInfoDescription {
+				// font-size: 0.8rem;
+			}
+			.cardInnerInfoMeta {
+				display: flex;
+				flex-direction: row;
+			}
 		}
 	}
 	&:hover,
 	&:focus {
+		// background-color: var(--gray);
 		border: 1px solid transparent;
 		box-shadow: 0 0 10px black;
+		outline: none;
 	}
 }
 </style>
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index 708e561..5946ff6 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -38,20 +38,50 @@
 			</p>
 		</section>
 		<section>
-			<h2>Spis Moderacji + Bot</h2>
+			<h2>Spis Moderacji</h2>
 			<p>
 				Ludzie stojący za Gractwem - in progress!
 			</p>
 			<div class="cards">
-				<Card id="jamesen" name="Jakub Mańczak" nickname="j4mesen" photo="-" />
-				<Card id="kuolek" name="Olek Kulka" nickname="KuOlek" photo="-" />
-				<Card id="adam" name="Adam Cała" nickname="Be Elephant" photo="-" />
-				<Card id="mollin" name="Jakub Mollin" nickname="Mollin" photo="-" />
+				<Card
+					id="jamesen"
+					tabindex="0"
+					name="Jakub Mańczak"
+					nickname="j4mesen"
+					photo="-"
+					description="Odpowiedzialny za software podtrzymujący Gractwo."
+				/>
+				<Card
+					id="kuolek"
+					tabindex="0"
+					name="Olek Kulka"
+					nickname="KuOlek"
+					photo="-"
+					description="Reprezentant medialny."
+				/>
+				<Card
+					id="adam"
+					tabindex="0"
+					name="Adam Cała"
+					nickname="Be Elephant"
+					photo="-"
+					description=""
+				/>
+				<Card
+					id="mollin"
+					tabindex="0"
+					name="Jakub Mollin"
+					nickname="Mollin"
+					photo="-"
+					description=""
+				/>
 				<Card
 					id="franek"
+					tabindex="0"
 					name="Franek Cała"
 					nickname="Bavil Gravlax"
 					photo="-"
+					description="Pełnoprawny członek tajemnego społeczeństwa kocyków."
 				/>
 				<Card name="... ?" />
 			</div>