lay card foundation

src/components/Card.vue

@@ -1,7 +1,20 @@
 <template>
 	<!-- <g-image alt="" :src="require(`../assets/spis/${photo}`)" /> -->
 	<div class="card">
+		<div class="cardInnerFlex">
+			<div class="cardInnerPhoto">
+				<!-- <img alt="" :src="require(`~/assets/cards/${photo}`)" /> -->
+			</div>
+			<div class="cardInnerInfo">
+				<div class="cardInnerInfoTitle">
 					<h3>{{ name }}</h3>
+					<p>{{ nickname }}</p>
+				</div>
+				<p style="text-align: justify">
+					{{ description }}
+				</p>
+			</div>
+		</div>
 	</div>
 </template>
 
@@ -10,10 +23,9 @@ export default {
 	name: 'Card',
 	props: {
 		name: String,
+		nickname: String,
 		photo: String,
-		desc: String,
-		link: String,
-		discord: String,
+		description: String,
 	},
 };
 </script>
@@ -23,10 +35,35 @@ export default {
 	display: inline-block;
 	border: 1px solid var(--gray);
 	border-radius: 4px;
-	padding: 1rem;
+	// padding: 1rem;
 	margin: 1rem 0.2rem;
-	width: 45%;
+	width: 49%;
 	transition-duration: var(--trandur);
+	.cardInnerFlex {
+		display: flex;
+		flex-direction: row;
+		.cardInnerPhoto {
+			width: 8rem;
+			height: 8rem;
+			background-color: black;
+			border-top-left-radius: 3px;
+			border-bottom-left-radius: 3px;
+		}
+		.cardInnerInfo {
+			padding: 1rem;
+			.cardInnerInfoTitle {
+				display: flex;
+				flex-direction: row;
+				align-items: baseline;
+				h3 {
+					margin-right: 1rem;
+				}
+				p {
+					color: var(--graytext);
+				}
+			}
+		}
+	}
 	&:hover,
 	&:focus {
 		border: 1px solid transparent;

src/pages/Index.vue

@@ -38,16 +38,22 @@
 			</p>
 		</section>
 		<section>
-			<h2>Spis Moderacji</h2>
+			<h2>Spis Moderacji + Bot</h2>
 			<p>
 				Ludzie stojący za Gractwem - in progress!
 			</p>
 			<div class="cards">
-				<Card id="jamesen" name="Jakub Mańczak" photo="~/assets/cards/.png" />
-				<Card id="kuolek" name="Olek Kulka" />
-				<Card id="mollin" name="Jakub Mollin" />
-				<Card id="adam" name="Adam Cała" />
-				<Card id="franek" name="Franek Cała" />
+				<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="franek"
+					name="Franek Cała"
+					nickname="Bavil Gravlax"
+					photo="-"
+				/>
+				<Card name="... ?" />
 			</div>
 		</section>
 		<section>