Updated styling
Signed-off-by: Louis Hollingworth <louis@hollingworth.nl>
This commit is contained in:
parent
20f681aa3c
commit
7ba84dd020
GPG key ID:
A11415CB3DC7809B
|
|
@ -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()]
|
||||
});
|
||||
11
lib/getUser.ts
Normal file
11
lib/getUser.ts
Normal file
|
|
@ -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
|
||||
}
|
||||
12
package.json
12
package.json
|
|
@ -11,12 +11,14 @@
|
|||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/deno": "1.1.0",
|
||||
"@astrojs/vue": "1.1.0",
|
||||
"astro": "^1.4.2",
|
||||
"vue": "^3.2.30"
|
||||
"@astrojs/tailwind": "^5.0.0",
|
||||
"@astrojs/vue": "3.0.0",
|
||||
"astro": "^3.1.1",
|
||||
"tailwindcss": "^3.0.24",
|
||||
"vue": "^3.3.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"sass": "1.55.0"
|
||||
"sass": "1.68.0",
|
||||
"typescript": "^5.2.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
4673
pnpm-lock.yaml
4673
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
|
|
@ -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%);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
body {
|
||||
font-family: 'Ubuntu', sans-serif !important;
|
||||
background-color: colours.$bg-colour-light;
|
||||
background-color: wheat !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -4,15 +4,17 @@ import LinkCard from '../components/LinkCard.astro';
|
|||
---
|
||||
|
||||
<Layout title="Vänner Bästa">
|
||||
<main>
|
||||
<div class="container">
|
||||
<h1 class="title">Vänner Bästa</h1>
|
||||
<p>
|
||||
A Young Royals fan website with links to different discussion
|
||||
spaces.
|
||||
</p>
|
||||
<strong>Season 2 coming out 1st November 2022</strong>
|
||||
<div class="grid-3">
|
||||
<main class="grid place-items-center h-screen">
|
||||
<div class="grid place-items-center">
|
||||
<h1 class="text-6xl font-bold underline">Vänner Bästa</h1>
|
||||
<div class="mt-10 mx-4 place-items-center" >
|
||||
<p>
|
||||
A Young Royals fan website with links to different discussion
|
||||
spaces.
|
||||
</p>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -23,18 +23,20 @@ const navLinks = [
|
|||
---
|
||||
|
||||
<Layout title="Vänner Bästa | Birthdays" navLinks={navLinks}>
|
||||
<div class="container">
|
||||
<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:
|
||||
<TimeZone client:load/>
|
||||
</h2>
|
||||
<div class="container grid place-items-center">
|
||||
<div class="grid place-items-center">
|
||||
<h1 class="text-6xl font-bold underline p-4">Birthdays</h1>
|
||||
<p class="p-4">
|
||||
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 class="p-4 text-4xl">
|
||||
Your timezone:
|
||||
<TimeZone class="underline" client:load/>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -27,16 +27,17 @@ const navLinks = [
|
|||
---
|
||||
|
||||
<Layout title="VännerBästa | Time" navLinks={navLinks}>
|
||||
<div class="container">
|
||||
<h1 class="title">Time Utilities</h1>
|
||||
<p>
|
||||
<div class="container grid place-items-center">
|
||||
<div class="grid place-items-center">
|
||||
<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>
|
||||
|
|
|
|||
12
tailwind.config.cjs
Normal file
12
tailwind.config.cjs
Normal file
|
|
@ -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: [],
|
||||
}
|
||||
Loading…
Reference in a new issue