add sass & card component

src/components/Card.vue

@@ -0,0 +1,16 @@
+<template>
+	<p>This is a card.</p>
+</template>
+
+<script>
+export default {
+	name: 'Card',
+	props: {
+		name: String,
+		photo: String,
+		desc: String,
+		link: String,
+		discord: String,
+	},
+};
+</script>

src/layouts/Default.vue

@@ -4,6 +4,47 @@
 	</div>
 </template>
 
+<style lang="scss">
+@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@600&display=swap');
+:root {
+	--black: hsl(0, 0%, 10%);
+	--white: hsl(0, 0%, 90%);
+	--gray: hsl(0, 0%, 20%);
+	--graytext: hsl(0, 0%, 55%);
+	--red: #fb636b;
+	--light-red: rgba(251, 99, 107, 0.25);
+	--blue: #61f2ea;
+	--radius: 6px;
+	--trandur: 0.1s;
+}
+* {
+	margin: 0;
+	padding: 0;
+}
+html {
+	background-color: var(--black);
+	color: var(--white);
+	font-family: 'Quicksand', sans-serif;
+	font-size: 16px;
+	h1,
+	h2,
+	h3 {
+		font-family: 'Lexend', sans-serif;
+	}
+	a {
+		color: var(--red);
+		border-top-left-radius: 3px;
+		border-top-right-radius: 3px;
+		transition-duration: var(--trandur);
+		&:hover,
+		&:focus {
+			background-color: var(--light-red);
+		}
+	}
+}
+</style>
+
 <static-query>
 query {
   metadata {

src/pages/About.vue

@@ -1,11 +0,0 @@
-<template>
-	<p>/about</p>
-</template>
-
-<script>
-export default {
-	metaInfo: {
-		title: 'about',
-	},
-};
-</script>

src/pages/Index.vue

@@ -1,17 +1,97 @@
 <template>
-	<div>
-		<p>
-			Strona w procesie przepisywania! 🎮❤ <br />
-			Linki /discord i /facebook nadal działają.
+	<main>
+		<p style="text-align: center">
+			Strona w trakcie rewrite-u! Zapraszamy później.
 		</p>
-		<p>/</p>
-	</div>
+		<header>
+			<g-image src="~/assets/main-logo-x512.png" width="64"></g-image>
+			<h1>Gractwo</h1>
+		</header>
+		<section>
+			<h2>
+				Witajcie w Gractwie!
+			</h2>
+			<p>
+				Jesteśmy społecznością - grupą ludzi - których kręcą gry. Proste, nie?
+			</p>
+		</section>
+		<section>
+			<h2>Geneza i opis Gractwa</h2>
+			<p style="text-align: justify">
+				Gractwo zostało założone w 2020 roku w odpowiedzi na rozłam PGTF i na
+				<a href="/pgtf-theme">sytuację z PGTF</a> powiązaną. Serwer discordowy
+				PGTF, pozostający nadal pod kontrolą naszej administracji został
+				przeniesiony w stan przejściowy do czasu podjęcia decyzji o powstaniu
+				Gractwa, po czym został w serwer dla Gractwa przekształcony. Została
+				utworzona grupa facebookowa, oraz strona internetowa. Aktywność na
+				grupie facebookowej nigdy nie rozwinęła się wystarczająco by
+				przekształcić się w pełnoprawną społeczność, ale serwer discord cały
+				czas funkcjonuje jako nasze małe, ciasne i własne miejsce 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>
+		</section>
+		<section>
+			<h2>Spis Moderacji</h2>
+			<p>
+				Ludzie stojący za Gractwem - in progress!
+			</p>
+			<div class="cards">
+				<!-- <Card id="jamesen" /> -->
+			</div>
+		</section>
+		<section>
+			<h3>Gractwo 2020-2021</h3>
+			<p>
+				Strona napisana i hostowana przez <a href="#jamesen">jamesena</a>. Kod
+				dostępny na
+				<a href="https://github.com/Gractwo" target="_blank">GitHubie</a>.
+			</p>
+		</section>
+	</main>
 </template>
 
 <script>
+import Card from '~/components/Card.vue';
+
 export default {
 	metaInfo: {
 		title: 'główna',
 	},
+	components: {
+		Card,
+	},
 };
 </script>
+
+<style lang="scss">
+main {
+	max-width: 850px;
+	margin: 0 auto;
+	padding-left: 24px;
+	padding-right: 24px;
+	header {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		text-align: center;
+		padding: 2rem;
+		img {
+			margin-top: 0.25rem;
+			margin-right: 0.5rem;
+		}
+	}
+	section {
+		padding: 2rem 0 4rem;
+	}
+	h1 {
+		font-size: 3rem;
+	}
+}
+</style>