Updated styling

Signed-off-by: Louis Hollingworth <louis@hollingworth.nl>

astro.config.mjs

@@ -1,7 +1,9 @@
 import { defineConfig } from 'astro/config';
 import vue from "@astrojs/vue";
 
+import tailwind from "@astrojs/tailwind";
+
 // https://astro.build/config
 export default defineConfig({
-  integrations: [vue()]
+  integrations: [vue(), tailwind()]
 });

lib/getUser.ts

@@ -0,0 +1,11 @@
+import { prisma } from "~/server"
+
+export const getUserByDiscordId = async (discord_id: string) => {
+    const user = await prisma.user.findUnique({
+        where: {
+            discord_id
+        }
+    })
+
+    return user
+}

package.json

@@ -11,12 +11,14 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/deno": "1.1.0",
+    "@astrojs/tailwind": "^5.0.0",
-    "@astrojs/vue": "1.1.0",
+    "@astrojs/vue": "3.0.0",
-    "astro": "^1.4.2",
+    "astro": "^3.1.1",
-    "vue": "^3.2.30"
+    "tailwindcss": "^3.0.24",
+    "vue": "^3.3.4"
   },
   "devDependencies": {
-    "sass": "1.55.0"
+    "sass": "1.68.0",
+    "typescript": "^5.2.2"
   }
 }

src/assets/styles/_colours.scss

@@ -1,3 +1,4 @@
 $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%);
+$filter-accent-colour-light: invert(34%) sepia(96%) saturate(4970%) hue-rotate(216deg) brightness(95%) contrast(91%);
+$filter-link-colour-dark: invert(99%) sepia(52%) saturate(532%) hue-rotate(308deg) brightness(100%) contrast(95%);

src/assets/styles/globals.scss

@@ -3,7 +3,7 @@
 
 body {
 	font-family: 'Ubuntu', sans-serif !important;
-	background-color: colours.$bg-colour-light;
+	background-color: wheat !important;
 }
 
 .container {

src/components/LinkCard.astro

@@ -9,11 +9,11 @@ const { to, title } = Astro.props;
 const isExternal = to.startsWith('http');
 ---
 { isExternal == true ? (
-	<a href={to} target="_blank" rel="noopener noreferrer" class="card">
+	<a href={to} target="_blank" rel="noopener noreferrer" class="bg-gray-50 hover:bg-gray-100 dark:bg-slate-700 dark:hover:bg-slate-600 m-4 px-5 py-5 md:px-10 rounded-3xl shadow-lg hover:shadow-xl">
 		<p>{title} →</p>
 	</a>
 ) : (
-	<a href={to} class="card">
+	<a href={to} class="bg-gray-50 hover:bg-gray-100 dark:bg-slate-700 dark:hover:bg-slate-600 m-4 px-5 py-5 md:px-10 rounded-3xl shadow-lg hover:shadow-xl">
 		<p>{title} →</p>
 	</a>
 )

src/components/NavBar.astro

@@ -54,4 +54,13 @@ p {
 	margin: 0 1rem;
 	padding: 0.5rem;
 }
-</style>
+
+@media (prefers-color-scheme: dark) {
+    nav :not(:hover) {
+		filter: colours.$filter-link-colour-dark;
+	}
+	.nav-button :hover {
+		filter: invert(100%) sepia(25%) saturate(4030%) hue-rotate(177deg) brightness(98%) contrast(97%);
+	}
+}
+</style>

src/layouts/Layout.astro

@@ -38,8 +38,8 @@ const { title, navLinks } = Astro.props;
 @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');
 
 body {
-	font-family: 'Ubuntu', sans-serif !important;
 	background-color: colours.$bg-colour-light;
+	font-family: 'Ubuntu', sans-serif !important;
 }
 
 .container {
@@ -95,4 +95,12 @@ body {
 		grid-template-columns: 1fr 1fr;
 	}
 }
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #1E293B !important;
+        color: antiquewhite;
+    }
+}
 </style>

src/pages/index.astro

@@ -4,15 +4,17 @@ import LinkCard from '../components/LinkCard.astro';
 ---
 
 <Layout title="Vänner Bästa">
-	<main>
+	<main class="grid place-items-center h-screen">
-		<div class="container">
+		<div class="grid place-items-center">
-		<h1 class="title">Vänner Bästa</h1>
+		<h1 class="text-6xl font-bold underline">Vänner Bästa</h1>
-		<p>
+		<div class="mt-10 mx-4 place-items-center" >
-			A Young Royals fan website with links to different discussion
+			<p>
-			spaces.
+				A Young Royals fan website with links to different discussion
-		</p>
+				spaces.
-		<strong>Season 2 coming out 1st November 2022</strong>
+			</p>
-		<div class="grid-3">
+			<strong class="pt-5" >It's official! Series 3 is coming!</strong>
+		</div>
+		<div class="grid grid-cols-2 md:grid-cols-3 mt-10">
 			<LinkCard
 				title="Watch"
 				to="https://www.netflix.com/title/81210762"
@@ -34,4 +36,4 @@ import LinkCard from '../components/LinkCard.astro';
 		</div>
 	</div>
 	</main>
-</Layout>
+</Layout>

src/pages/utilities/birthdays.astro

@@ -23,18 +23,20 @@ const navLinks = [
 ---
 
 <Layout title="Vänner Bästa | Birthdays"  navLinks={navLinks}>
-    <div class="container">
+    <div class="container grid place-items-center">
-		<h1 class="title">Birthdays</h1>
+		<div class="grid place-items-center">
-		<p>
+			<h1 class="text-6xl font-bold underline p-4">Birthdays</h1>
-			Discord bots are changing. <br />
+			<p class="p-4">
-			This means that we can no longer provide you with the command to set
+				Discord bots are changing. <br />
-			your birthday. <br />
+				This means that we can no longer provide you with the command to set
-			Instead, this page now gives you your timezone for use with Discord
+				your birthday. <br />
-			bots.
+				Instead, this page now gives you your timezone for use with Discord
-		</p>
+				bots.
-		<h2>
+			</p>
-			Your timezone:
+			<h2 class="p-4 text-4xl">
-			<TimeZone client:load/>
+				Your timezone:
-		</h2>
+				<TimeZone class="underline" client:load/>
+			</h2>
+		</div>
 	</div>
-</Layout>
+</Layout>

src/pages/utilities/index.astro

@@ -15,11 +15,13 @@ const navLinks = [
 ];
 ---
 <Layout title="Vänner Bästa | Utilities" navLinks={navLinks}>
-    <div class="container">
+    <div class="container grid place-items-center">
+	<div class="">
 		<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>
     </div>
-</Layout>
+</Layout>

src/pages/utilities/time.astro

@@ -27,16 +27,17 @@ const navLinks = [
 ---
 
 <Layout title="VännerBästa | Time" navLinks={navLinks}>
-	<div class="container">
+	<div class="container grid place-items-center">
-		<h1 class="title">Time Utilities</h1>
+	<div class="grid place-items-center">
-		<p>
+		<h1 class="text-6xl font-bold underline p-4">Time Utilities</h1>
+		<p class="p-4">
 			Your current timezone:
 			<TimeZone client:load />
 		</p>
-		
+
 		<UnixTime client:load/>
 
-		<p>
+		<p class="p-4">
 			To format the time for Discord, you can use: <br />
 			<TimeFormat formats={[{
 							day: 'numeric',
@@ -75,4 +76,4 @@ const navLinks = [
 						}]} dFormat="D" client:only />
 		</p>
 	</div>
-</Layout>
+</Layout>

tailwind.config.cjs

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	theme: {
+		extend: {
+			colors: {
+				'wheat': "#F8EBD9"
+			}
+		},
+	},
+	plugins: [],
+}