add descriptions and update card component

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>

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>