finalise profile card design

src/components/Card.vue

@@ -4,6 +4,12 @@
 		<div class="cardInnerFlex">
 			<div class="cardInnerPhoto">
 				<!-- <img alt="" :src="require(`~/assets/cards/${photo}`)" /> -->
+				<g-image
+					:src="require(`~/assets/cards/${photo}.png`)"
+					:alt="`Zdjęcie ${name}`"
+					v-if="photo"
+					width="128"
+				/>
 			</div>
 			<div class="cardInnerInfo">
 				<div class="cardInnerInfoTitle">
@@ -15,7 +21,24 @@
 						{{ description }}
 					</p>
 				</div>
-				<div class="cardInnerInfoMeta"></div>
+				<div class="cardInnerInfoButtons">
+					<g-link to="/" v-if="external">
+						<i class="fas fa-link" />
+					</g-link>
+					<g-link to="/" v-if="steam">
+						<i class="fab fa-steam" />
+					</g-link>
+					<g-link to="/" v-if="github">
+						<i class="fab fa-github"></i>
+					</g-link>
+					<g-link to="/" v-if="facebook">
+						<i class="fab fa-facebook"></i>
+					</g-link>
+					<g-link to="/" v-if="discord">
+						<i class="fab fa-discord" />
+						{{ discord }}
+					</g-link>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -29,6 +52,11 @@ export default {
 		nickname: String,
 		photo: String,
 		description: String,
+		external: String,
+		steam: String,
+		github: String,
+		facebook: String,
+		discord: String,
 	},
 };
 </script>
@@ -41,6 +69,7 @@ export default {
 	// padding: 1rem;
 	margin: 1rem 0.2rem;
 	width: 49%;
+	height: 8rem;
 	transition-duration: var(--trandur);
 	.cardInnerFlex {
 		display: flex;
@@ -51,13 +80,20 @@ export default {
 			background-color: black;
 			border-top-left-radius: 3px;
 			border-bottom-left-radius: 3px;
+			img {
+				width: 8rem;
+				border-top-left-radius: 3px;
+				border-bottom-left-radius: 3px;
+			}
 		}
 		.cardInnerInfo {
-			padding: 1rem;
+			padding: 0.8rem;
+			padding-top: 0.6rem;
 			.cardInnerInfoTitle {
 				display: flex;
 				flex-direction: row;
 				align-items: baseline;
+				padding-bottom: 0.3rem;
 				h3 {
 					margin-right: 1rem;
 				}
@@ -66,11 +102,36 @@ export default {
 				}
 			}
 			.cardInnerInfoDescription {
-				// font-size: 0.8rem;
+				font-size: 1rem;
 			}
 			.cardInnerInfoMeta {
 				display: flex;
 				flex-direction: row;
+				align-items: baseline;
+				color: var(--graytext);
+				margin-top: 0.4rem;
+				i {
+					margin-right: 0.3rem;
+				}
+			}
+			.cardInnerInfoButtons {
+				display: flex;
+				flex-direction: row;
+				justify-content: right;
+				align-items: baseline;
+				margin-top: 0.6rem;
+				a {
+					color: var(--graytext);
+					text-decoration: inherit;
+					padding: 0.2rem;
+					margin: 0 0.2rem;
+					border-radius: 3px;
+					&:hover,
+					&:focus {
+						background-color: var(--red);
+						color: var(--black);
+					}
+				}
 			}
 		}
 	}

src/layouts/Default.vue

@@ -40,6 +40,7 @@ html {
 		&:hover,
 		&:focus {
 			background-color: var(--light-red);
+			outline: none;
 		}
 	}
 }

src/main.js

@@ -1,9 +1,14 @@
 // This is the main.js file. Import global CSS and scripts here.
 // The Client API can be used here. Learn more: gridsome.org/docs/client-api
 
-import DefaultLayout from '~/layouts/Default.vue'
+import DefaultLayout from '~/layouts/Default.vue';
 
-export default function (Vue, { router, head, isClient }) {
+export default function(Vue, { router, head, isClient }) {
-  // Set default layout as a global component
+	head.script.push({
-  Vue.component('Layout', DefaultLayout)
+		src: 'https://kit.fontawesome.com/0b1492a165.js',
+		crossorigin: 'anonymous',
+		body: true,
+	});
+	// Set default layout as a global component
+	Vue.component('Layout', DefaultLayout);
 }

src/pages/Index.vue

@@ -13,6 +13,10 @@
 			<p style="text-align: center">
 				Strona w trakcie rewrite-u! Zapraszamy później.
 			</p>
+			<div class="header-buttons">
+				<g-link to="/discord">Discord</g-link>
+				<g-link to="/facebook">Facebook</g-link>
+			</div>
 		</header>
 		<section>
 			<h2>
@@ -20,6 +24,7 @@
 			</h2>
 			<p>
 				Jesteśmy społecznością - grupą ludzi - których kręcą gry. Proste, nie?
+				🎮💖
 			</p>
 		</section>
 		<section>
@@ -47,16 +52,20 @@
 					id="jamesen"
 					tabindex="0"
 					name="Jakub Mańczak"
-					nickname="j4mesen"
+					nickname="jamesen"
-					photo="-"
+					photo="01"
-					description="Odpowiedzialny za software podtrzymujący Gractwo."
+					description="Wykonywacz zadań, pisacz kodu, rysownik grafik, zarządca."
+					external="true"
+					steam="true"
+					facebook="true"
+					github="true"
+					discord="j4mesen#1429"
 				/>
 				<Card
 					id="kuolek"
 					tabindex="0"
 					name="Olek Kulka"
 					nickname="KuOlek"
-					photo="-"
 					description="Reprezentant medialny."
 				/>
 				<Card
@@ -64,7 +73,6 @@
 					tabindex="0"
 					name="Adam Cała"
 					nickname="Be Elephant"
-					photo="-"
 					description=""
 				/>
 				<Card
@@ -72,7 +80,6 @@
 					tabindex="0"
 					name="Jakub Mollin"
 					nickname="Mollin"
-					photo="-"
 					description=""
 				/>
 				<Card
@@ -80,7 +87,6 @@
 					tabindex="0"
 					name="Franek Cała"
 					nickname="Bavil Gravlax"
-					photo="-"
 					description="Pełnoprawny członek tajemnego społeczeństwa kocyków."
 				/>
 				<Card name="... ?" />
@@ -96,8 +102,8 @@
 		<section>
 			<h3>Gractwo 2020-2021</h3>
 			<p>
-				Kod dostępny na
+				Napisane i hostowane przez <a href="#jamesen">Jakuba Mańczaka</a>. Kod
-				<a href="/github" target="_blank">GitHubie</a>.
+				dostępny na <a href="/github" target="_blank">GitHubie</a>.
 			</p>
 		</section>
 	</main>
@@ -136,6 +142,15 @@ main {
 			margin-right: 0.5rem;
 		}
 	}
+	.header-buttons {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		a {
+			margin: 0 2rem;
+		}
+	}
 	section {
 		padding: 2rem 0 4rem;
 		.cards {