From b230abc48b3e2494b9548f9bd1efaf72dee8cc4b Mon Sep 17 00:00:00 2001
From: Ludoviko <me@ludoviko.ch>
Date: Sat, 21 May 2022 22:10:00 +0100
Subject: [PATCH] Added LinkCard

LinkCard is the component that deals with links on the homepage.
---
 assets/styles/index.scss | 24 ------------------------
 components/LinkCard.vue  | 37 +++++++++++++++++++++++++++++++++++++
 nuxt.config.ts           |  3 +--
 pages/index.vue          | 11 +++++++++++
 4 files changed, 49 insertions(+), 26 deletions(-)
 create mode 100644 components/LinkCard.vue

diff --git a/assets/styles/index.scss b/assets/styles/index.scss
index a584ff0..5715305 100644
--- a/assets/styles/index.scss
+++ b/assets/styles/index.scss
@@ -77,30 +77,6 @@
   margin-top: 3rem;
 }
 
-.card {
-  margin: 1rem;
-  padding: 1.5rem;
-  text-align: left;
-  color: inherit;
-  text-decoration: none;
-  border: 1px solid #eaeaea;
-  border-radius: 10px;
-  transition: color 0.15s ease, border-color 0.15s ease;
-  width: 45%;
-}
-
-.card:link,
-.card:visited {
-  color: #eaeaea
-}
-
-.card:hover,
-.card:focus,
-.card:active {
-  color: #0070f3 !important;
-  border-color: #0070f3;
-}
-
 .card h2 {
   margin: 0 0 1rem 0;
   font-size: 1.5rem;
diff --git a/components/LinkCard.vue b/components/LinkCard.vue
new file mode 100644
index 0000000..8fe3ba9
--- /dev/null
+++ b/components/LinkCard.vue
@@ -0,0 +1,37 @@
+<template>
+	<a class="card" :href="link">
+		<p>{{ title }}</p>
+		<p>{{ description }}</p>
+	</a>
+</template>
+
+<script>
+export default {
+	props: ['title', 'description', 'link'],
+};
+</script>
+
+<style lang="scss" scoped>
+.card {
+	margin: 1rem;
+	padding: 1.5rem;
+	text-align: left;
+	color: inherit;
+	text-decoration: none;
+	border: 2px solid #000;
+	border-radius: 10px;
+	transition: color 0.15s ease, border-color 0.15s ease;
+}
+
+.card:link,
+.card:visited {
+	color: #000;
+}
+
+.card:hover,
+.card:focus,
+.card:active {
+	color: #0070f3 !important;
+	border-color: #0070f3;
+}
+</style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index a5245b0..51aec91 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -3,7 +3,6 @@ import { defineNuxtConfig } from 'nuxt';
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
 	css: [
-		'@/assets/styles/globals.scss',
-		'@/assets/styles/index.scss',
+		'@/assets/styles/globals.scss'
 	]
 });
diff --git a/pages/index.vue b/pages/index.vue
index f0ec38c..c8aabb9 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,5 +1,16 @@
+<script>
+import '@/assets/styles/index.scss';
+</script>
+
 <template>
 	<div class="container">
 		<h1>Vanner Basta</h1>
+		<p>
+			A Young Royals fan website with links to different discussion
+			spaces.
+		</p>
+		<div class="grid">
+			<LinkCard title="Watch" description="Watch the series on Netflix" link="https://www.netflix.com/title/81210762" />
+		</div>
 	</div>
 </template>