assets/styles/globals.scss

@@ -5,3 +5,17 @@ body {
 	font-family: 'Ubuntu', sans-serif !important;
     background-color: colours.$bg-colour-light;
 }
+
+.container {
+	min-height: 100vh;
+	padding: 0 0.5rem;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	height: 100vh;
+}
+
+.title {
+	font-size: 3rem;
+}

assets/styles/index.scss

@@ -1,15 +1,5 @@
 @use 'colours';
 
-.container {
-	min-height: 100vh;
-	padding: 0 0.5rem;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	height: 100vh;
-}
-
 .footer {
 	width: 100%;
 	height: 100px;
@@ -31,43 +21,6 @@
 	color: #eaeaea;
 }
 
-.title a {
-	color: #0070f3;
-	text-decoration: none;
-}
-
-.title a:hover,
-.title a:focus,
-.title a:active {
-	text-decoration: underline;
-}
-
-.title {
-	margin: 0;
-	line-height: 1.15;
-	font-size: 4rem;
-}
-
-.title,
-.description {
-	text-align: center;
-	color: #eaeaea;
-}
-
-.description {
-	line-height: 1.5;
-	font-size: 1.5rem;
-}
-
-.code {
-	background: #fafafa;
-	border-radius: 5px;
-	padding: 0.75rem;
-	font-size: 1.1rem;
-	font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
-		DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
-}
-
 .grid {
 	display: grid;
 	align-items: center;
@@ -75,22 +28,6 @@
 	grid-template-columns: 1fr 1fr 1fr;
 }
 
-.card h2 {
-	margin: 0 0 1rem 0;
-	font-size: 1.5rem;
-}
-
-.card p {
-	margin: 0;
-	font-size: 1.25rem;
-	line-height: 1.5;
-}
-
-.logo {
-	height: 1em;
-	margin-left: 0.5rem;
-}
-
 @media (max-width: 600px) {
 	.grid {
 		width: 90%;

components/LinkCard.vue

@@ -1,6 +1,6 @@
 <template>
 	<a class="card" :href="link">
-		<p>{{ title }}</p>
+		<p>{{ title }} →</p>
 	</a>
 </template>
 
@@ -21,6 +21,11 @@ export default {
 	border-radius: 20px;
 	transition: color 0.15s ease, border-color 0.15s ease;
 }
+.card p {
+	margin: 0;
+	font-size: 1.25rem;
+	line-height: 1.5;
+}
 
 .card:link,
 .card:visited {
@@ -40,5 +45,6 @@ export default {
 		padding: 1.25rem;
 		width: 9rem;
 	}
+	
 }
 </style>

pages/index.vue

@@ -4,32 +4,34 @@ import '@/assets/styles/index.scss';
 
 <template>
 	<div class="container">
-		<h1>Vanner Basta</h1>
+		<h1 class="title">Vänner Bästa</h1>
 		<p>
 			A Young Royals fan website with links to different discussion
 			spaces.
 		</p>
+		<strong>It's official! There is going to be another season!</strong>
 		<div class="grid">
 			<LinkCard
-				title="Watch →"
+				title="Watch"
 				link="https://www.netflix.com/title/81210762"
 			/>
+			<LinkCard title="Discord" link="https://discord.gg/hyKVDeRJ8Y" />
 			<LinkCard
-				title="Discord →"
-				link="https://discord.gg/hyKVDeRJ8Y"
-			/>
-			<LinkCard
-				title="Reddit →"
+				title="Reddit"
 				link="https://www.reddit.com/r/YoungRoyals/"
 			/>
 			<LinkCard
-				title="Babbel (ref) →"
+				title="Babbel (ref)"
 				link="https://www.talkable.com/x/IchxFl"
 			/>
 			<LinkCard
 				title="Matrix →"
 				link="https://matrix.to/#/#young-royals:matrix.org"
 			/>
+			<LinkCard
+				title="Discord Utilities"
+				link="/utilities"
+			/>
 		</div>
 	</div>
 </template>

pages/utilities/birthdays.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="container">
-        <h1>Birthdays</h1>
+        <h1 class="title">Birthdays</h1>
         <p>Discord bots are changing. <br> This means that we can no longer provide you with the command to set your birthday. <br> Instead, this page now gives you your timezone for use with Discord bots.</p>
         <h2>Your timezone: {{ Intl.DateTimeFormat().resolvedOptions().timeZone }}</h2>
     </div>

pages/utilities/index.vue

@@ -0,0 +1,9 @@
+<template>
+	<div class="container">
+		<h1 class="title">Utilities for the Discord Server</h1>
+        <LinkCard
+            title="Birthdays"
+            link="/utilities/birthdays"
+         />
+	</div>
+</template>