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

@@ -7,13 +7,12 @@ body {
 }
 
 .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">
+				<NuxtLink :to="link.to">
 					<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 {
+	margin: 0 auto;
+	position: -webkit-sticky;
+	position: sticky;
 	display: flex;
 	justify-content: center;
 	align-items: center;
-    margin-bottom: 1rem;
 }
+
+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 {
-			navLinks: [
 	{
 		img: {
 			name: '/icons/arrow-left.svg',
 			alt: 'Back to Utilities',
 		},
 		to: '/utilities',
+        name: "Utilities",
 	},
 	{
 		img: {
 			name: '/icons/home.svg',
-						alt: 'Home',
+			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>
+		<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 {
-			navLinks: [
 	{
 		img: {
 			name: '/icons/home.svg',
-                        alt: 'Home',
+			alt: 'Go Home',
 		},
 		to: '/',
+        name: "Home",
 	},
-			],
+];
-		};
-	},
-};
 </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>