add mobile support

src/components/BotCard.vue

@@ -1,5 +1,5 @@
 <template>
-	<div v-if="status">
+	<div class="cards" v-if="status">
 		<Card
 			tabindex="0"
 			:name="
@@ -60,37 +60,12 @@ export default {
 };
 </script>
 
-//
 <style lang="scss" scoped>
-// .card {
+.cards {
-// 	display: inline-block;
+	display: flex;
-// 	border: 1px solid var(--gray);
+	flex-wrap: wrap;
-// 	border-radius: 4px;
+	flex-direction: row;
-// 	padding: 1rem;
+	justify-content: center;
-// 	margin: 1rem 0.2rem;
+	align-items: center;
-// 	width: 100%;
+}
-// 	transition-duration: var(--trandur);
-// 	.cardInner {
-// 		display: flex;
-// 		flex-direction: row;
-// 		.cardTitle {
-// 			display: flex;
-// 			align-items: baseline;
-// 			.botOnlineStatus {
-// 				width: 0.5rem;
-// 				height: 0.5rem;
-// 				background-color: var(--gray);
-// 				margin-left: 0.5rem;
-// 				border-radius: 50%;
-// 				margin-bottom: 0.2rem;
-// 			}
-// 		}
-// 	}
-// 	&:hover,
-// 	&:focus {
-// 		border: 1px solid transparent;
-// 		box-shadow: 0 0 10px black;
-// 	}
-// }
-//
 </style>

src/components/Card.vue

@@ -203,4 +203,20 @@ export default {
 		outline: none;
 	}
 }
+@media only screen and (max-width: 850px) {
+	.card {
+		width: 200%;
+		h3 {
+			font-size: 1rem;
+		}
+	}
+}
+@media only screen and (max-width: 460px) {
+	.cardInnerPhoto {
+		display: none;
+	}
+	.cardInnerFlex {
+		min-height: 8rem;
+	}
+}
 </style>

src/pages/Index.vue

@@ -58,7 +58,6 @@
 					external="/jamesen-external"
 					externalTooltip="manczak.net"
 					steam="/jamesen-steam"
-					twitter="/jamesen-twitter"
 					github="/jamesen-github"
 					discord="j4mesen#1429"
 				/>
@@ -121,8 +120,8 @@
 			<h3>Gractwo 2020-2021</h3>
 			<p>
 				Napisane i hostowane przez
-				<g-link to="/jamesen-external" target="_blank">Jakuba Mańczaka</g-link>. Kod dostępny na
+				<g-link to="/jamesen-external" target="_blank">Jakuba Mańczaka</g-link>.
-				<a href="/github" target="_blank">GitHubie</a>.
+				Kod dostępny na <a href="/github" target="_blank">GitHubie</a>.
 			</p>
 		</section>
 	</main>