lucxjo/friends-best
1
0
Fork 0
Code Issues 2 Pull requests Packages Projects Releases Wiki Activity

Updated styling

Browse source 
Signed-off-by: Louis Hollingworth <louis@hollingworth.nl>
This commit is contained in:
Louis Hollingworth 2023-09-21 10:45:11 +01:00
parent 20f681aa3c
commit 7ba84dd020
Signed by: lucxjo
GPG key ID: A11415CB3DC7809B
14 changed files with 2497 additions and 2316 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
astro.config.mjs
View file

@ -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
View 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
View file

@ -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
View file

File diff suppressed because it is too large Load diff

1
src/assets/styles/_colours.scss
View file

@ -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-link-colour-dark: invert(99%) sepia(52%) saturate(532%) hue-rotate(308deg) brightness(100%) contrast(95%);

2
src/assets/styles/globals.scss
View file

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

4
src/components/LinkCard.astro
View file

@ -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>
)

9
src/components/NavBar.astro
View file

@ -54,4 +54,13 @@ p {
margin: 0 1rem;
padding: 0.5rem;
}
@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>

10
src/layouts/Layout.astro
View file

@ -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>

20
src/pages/index.astro
View file

@ -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"

28
src/pages/utilities/birthdays.astro
View file

@ -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>

4
src/pages/utilities/index.astro
View file

@ -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>

9
src/pages/utilities/time.astro
View file

@ -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',

12
tailwind.config.cjs Normal file
View 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: [],
}