move cards, enlarge cards, botcard tests

src/components/BotCard.vue

@@ -1,24 +1,39 @@
 <template>
-	<div class="card">
-		<h3>bot card</h3>
-		<p v-if="status">
-			Bot Name:
-			{{ status.info.username + '#' + status.info.discriminator }} <br />
-			Bot ID: {{ status.info.id }} <br />
-			Bot Avatar:
-			<img
-				:src="
-					`https://cdn.discordapp.com/avatars/${status.info.id}/${
-						status.info.avatar
-					}.png?size=64`
-				"
-				alt=""
-				v-if="status"
-			/>
-			<br />
-			Bot Status: {{ status.status }} <br />
-			Bot Info: {{ status.info }}
-		</p>
+	<div v-if="status">
+		<div class="card">
+			<h3>bot card</h3>
+			<p>
+				Bot Name:
+				{{ status.info.username + '#' + status.info.discriminator }} <br />
+				Bot ID: {{ status.info.id }} <br />
+				Bot Avatar:
+				<img
+					:src="
+						`https://cdn.discordapp.com/avatars/${status.info.id}/${
+							status.info.avatar
+						}.png?size=64`
+					"
+					alt=""
+					v-if="status"
+				/>
+				<br />
+				Bot Status: {{ status.status }} <br />
+				Bot Info: {{ status.info }}
+			</p>
+		</div>
+		<div class="card">
+			<div class="titleCard">
+				<img
+					:src="
+						`https://cdn.discordapp.com/avatars/${status.info.id}/${
+							status.info.avatar
+						}.png?size=64`
+					"
+					alt="Gractwo bot current avatar"
+				/>
+				<h3>{{ status.info.username + '#' + status.info.discriminator }}</h3>
+			</div>
+		</div>
 	</div>
 </template>
 
@@ -58,6 +73,11 @@ export default {
 	margin: 1rem 0.2rem;
 	width: 100%;
 	transition-duration: var(--trandur);
+	.titleCard {
+		display: flex;
+		flex-direction: row;
+		justify-content: baseline;
+	}
 	&:hover,
 	&:focus {
 		border: 1px solid transparent;

src/components/Card.vue

@@ -25,7 +25,7 @@ export default {
 	border-radius: 4px;
 	padding: 1rem;
 	margin: 1rem 0.2rem;
-	width: 8rem;
+	width: 45%;
 	transition-duration: var(--trandur);
 	&:hover,
 	&:focus {

src/pages/Index.vue

@@ -37,13 +37,6 @@
 				spotkań. Strona internetowa funkcjonuje głównie jako skracacz linków.
 			</p>
 		</section>
-		<section>
-			<h2>Status Bota Discordowego</h2>
-			<p>
-				Sprawdź jak się ma nasz bot discordowy - in progress!
-			</p>
-			<BotCard />
-		</section>
 		<section>
 			<h2>Spis Moderacji</h2>
 			<p>
@@ -57,6 +50,13 @@
 				<Card id="franek" name="Franek Cała" />
 			</div>
 		</section>
+		<section>
+			<h2>Status Bota Discordowego</h2>
+			<p>
+				Sprawdź jak się ma nasz bot discordowy - in progress!
+			</p>
+			<BotCard />
+		</section>
 		<section>
 			<h3>Gractwo 2020-2021</h3>
 			<p>