Added new time utility

assets/styles/_colours.scss

@@ -1,2 +1,3 @@
-$primary-colour-light: rgb(127, 127, 127);
 $bg-colour-light: rgb(187, 187, 187);
+$accent-colour-light: rgb(24, 96, 231);
+$filter-accent-colour-light: invert(34%) sepia(96%) saturate(4970%) hue-rotate(216deg) brightness(95%) contrast(91%);

assets/styles/globals.scss

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

assets/styles/index.scss

@@ -21,7 +21,14 @@
 	color: #eaeaea;
 }
 
-.grid {
+.grid-2 {
+	display: grid;
+	align-items: center;
+	justify-content: center;
+	grid-template-columns: 1fr 1fr;
+}
+
+.grid-3 {
 	display: grid;
 	align-items: center;
 	justify-content: center;

build_number

@@ -1 +1 @@
-8
+9

components/LinkCard.vue

@@ -34,6 +34,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use '../assets/styles/colours';
 .card {
 	margin: 1rem;
 	padding: 1.5rem;
@@ -58,8 +59,8 @@ export default {
 .card:hover,
 .card:focus,
 .card:active {
-	color: #0070f3 !important;
+	color: colours.$accent-colour-light !important;
-	border-color: #0070f3;
+	border-color: colours.$accent-colour-light;
 }
 
 @media (max-width: 600px) {

components/NavBar.vue

@@ -1,23 +1,44 @@
 <template>
 	<nav>
 		<div v-for="link in links" :key="link">
-			<NuxtLink :to="link.to" class="nav-button">
+			<div class="nav-button">
-				<img :src="link.img.name" :alt="link.img.alt" />
+				<NuxtLink :to="link.to">
-			</NuxtLink>
+					<img :src="link.img.name" :alt="link.img.alt" />
+					<p>{{ link.name }}</p>
+				</NuxtLink>
+			</div>
 		</div>
 	</nav>
 </template>
 
 <style lang="scss" scoped>
+@use '../assets/styles/colours';
 nav {
-    display: flex;
+	margin: 0 auto;
-    justify-content: center;
+	position: -webkit-sticky;
-    align-items: center;
+	position: sticky;
-    margin-bottom: 1rem;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
+
+nav :hover {
+	filter: colours.$filter-accent-colour-light;
+}
+
+nav a {
+	text-decoration: none;
+	color: black;
+}
+
+p {
+	padding: 0;
+	margin: 0;
+}
+
 .nav-button {
-    padding: .25rem;
+	margin: 0 1rem;
-	margin: .25rem;
+	padding: 0.5rem;
 }
 </style>
 

pages/index.vue

@@ -6,7 +6,7 @@
 			spaces.
 		</p>
 		<strong>It's official! There is going to be another season!</strong>
-		<div class="grid">
+		<div class="grid-3">
 			<LinkCard
 				title="Watch"
 				to="https://www.netflix.com/title/81210762"

pages/utilities/birthdays.vue

@@ -16,27 +16,23 @@
 	</div>
 </template>
 
-<script>
+<script setup>
-export default {
+const navLinks = [
-	data() {
+	{
-		return {
+		img: {
-			navLinks: [
+			name: '/icons/arrow-left.svg',
-				{
+			alt: 'Back to Utilities',
-					img: {
+		},
-						name: '/icons/arrow-left.svg',
+		to: '/utilities',
-						alt: 'Back to Utilities',
+        name: "Utilities",
-					},
-					to: '/utilities',
-				},
-				{
-					img: {
-						name: '/icons/home.svg',
-						alt: 'Home',
-					},
-					to: '/',
-				},
-			],
-		};
 	},
-};
+	{
+		img: {
+			name: '/icons/home.svg',
+			alt: 'Go Home',
+		},
+		to: '/',
+        name: "Home",
+	},
+];
 </script>

pages/utilities/index.vue

@@ -2,24 +2,22 @@
 	<NavBar :links="navLinks" />
 	<div class="container">
 		<h1 class="title">Utilities for the Discord Server</h1>
-		<LinkCard title="Birthdays" to="/utilities/birthdays" />
+		<div class="grid-2">
+			<LinkCard title="Birthdays" to="/utilities/birthdays" />
+			<LinkCard title="Time" to="/utilities/time" />
+		</div>
 	</div>
 </template>
 
-<script>
+<script setup>
-export default {
+const navLinks = [
-	data() {
+	{
-		return {
+		img: {
-			navLinks: [
+			name: '/icons/home.svg',
-				{
+			alt: 'Go Home',
-					img: {
+		},
-						name: '/icons/home.svg',
+		to: '/',
-                        alt: 'Home',
+        name: "Home",
-					},
-					to: '/',
-				},
-			],
-		};
 	},
-};
+];
 </script>

pages/utilities/time.vue

@@ -0,0 +1,144 @@
+<template>
+	<NavBar :links="navLinks" />
+	<div class="container">
+		<h1 class="title">Time Utilities</h1>
+		<p>
+			Your current timezone:
+			{{ Intl.DateTimeFormat().resolvedOptions().timeZone }}
+		</p>
+		<p>The current time in Unix Epoch: <code>{{ Math.floor(crntTime / 1000) }}</code> <br /> or <code>{{crntTime}}</code> in Unix millis</p>
+
+		<p>
+			To format the time for Discord, you can use: <br />
+			<code>
+				{{ `<t:${Math.floor(crntTime / 1000)}:f>` }}
+			</code>
+			<span>
+				to get
+				<code
+					>{{
+						Intl.DateTimeFormat(Intl.Locale, {
+							day: 'numeric',
+							month: 'long',
+							year: 'numeric',
+						}).format(crntTime)
+					}}
+					{{
+						Intl.DateTimeFormat(Intl.Locale, {
+							hour: '2-digit',
+							minute: '2-digit',
+						}).format(crntTime)
+					}}</code
+				></span
+			>
+			<br />
+			<code>
+				{{ `<t:${Math.floor(crntTime / 1000)}:F>` }}
+			</code>
+			<span>
+				to get
+				<code
+					>{{
+						Intl.DateTimeFormat(Intl.Locale, {
+							weekday: 'long',
+							day: 'numeric',
+							month: 'long',
+							year: 'numeric',
+						}).format(crntTime)
+					}}
+					{{
+						Intl.DateTimeFormat(Intl.Locale, {
+							hour: '2-digit',
+							minute: '2-digit',
+						}).format(crntTime)
+					}}</code
+				></span
+			>
+			<br />
+			<code>
+				{{ `<t:${Math.floor(crntTime / 1000)}:t>` }}
+			</code>
+			<span>
+				to get
+				<code>
+					{{
+						Intl.DateTimeFormat(Intl.Locale, {
+							hour: '2-digit',
+							minute: '2-digit',
+						}).format(crntTime)
+					}}</code
+				></span
+			>
+			<br />
+			<code>
+				{{ `<t:${Math.floor(crntTime / 1000)}:T>` }}
+			</code>
+			<span>
+				to get
+				<code>
+					{{
+						Intl.DateTimeFormat(Intl.Locale, {
+							hour: '2-digit',
+							minute: '2-digit',
+							second: '2-digit',
+						}).format(crntTime)
+					}}</code
+				></span
+			>
+			<br />
+			<code>
+				{{ `<t:${Math.floor(crntTime / 1000)}:d>` }}
+			</code>
+			<span>
+				to get
+				<code>
+					{{
+						Intl.DateTimeFormat(Intl.Locale, {
+							day: '2-digit',
+                            month: '2-digit',
+                            year: 'numeric',
+						}).format(crntTime)
+					}}</code
+				></span
+			>
+			<br />
+			<code>
+				{{ `<t:${Math.floor(crntTime / 1000)}:D>` }}
+			</code>
+			<span>
+				to get
+				<code>
+					{{
+						Intl.DateTimeFormat(Intl.Locale, {
+							day: 'numeric',
+                            month: 'long',
+                            year: 'numeric',
+						}).format(crntTime)
+					}}</code
+				></span
+			>
+		</p>
+	</div>
+</template>
+
+<script setup>
+const crntTime = Date.now();
+const navLinks = [
+	{
+		img: {
+			name: '/icons/arrow-left.svg',
+			alt: 'Back to Utilities',
+		},
+		to: '/utilities',
+		name: 'Utilities',
+	},
+	{
+		img: {
+			name: '/icons/home.svg',
+			alt: 'Go Home',
+		},
+		to: '/',
+		name: 'Home',
+	},
+];
+</script>