BradNut/boredgame
1
0
Fork 0
mirror of https://github.com/BradNut/boredgame synced 2025-09-08 17:40:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Format with built in prettier format rules.

Browse source
This commit is contained in:
Bradley Shellnut 2022-07-07 12:32:55 -07:00
parent ff536be706
commit 18e7cb1992
31 changed files with 870 additions and 890 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.vscode/settings.json vendored
View file

@ -1,6 +1,3 @@
{ {
"cSpell.words": [ "cSpell.words": ["kickstarter", "msrp"]
"kickstarter",
"msrp"
]
} }

12
src/app.css
View file

@ -20,10 +20,12 @@ body {
min-height: 100vh; min-height: 100vh;
margin: 0; margin: 0;
background-color: var(--primary-color); background-color: var(--primary-color);
background: linear-gradient(180deg, background: linear-gradient(
180deg,
var(--primary-color) 0%, var(--primary-color) 0%,
var(--secondary-color) 10.45%, var(--secondary-color) 10.45%,
var(--tertiary-color) 41.35%); var(--tertiary-color) 41.35%
);
} }
body::before { body::before {
@ -34,9 +36,11 @@ body::before {
top: 0; top: 0;
left: 10vw; left: 10vw;
z-index: -1; z-index: -1;
background: radial-gradient(50% 50% at 50% 50%, background: radial-gradient(
50% 50% at 50% 50%,
var(--pure-white) 0%, var(--pure-white) 0%,
rgba(255, 255, 255, 0) 100%); rgba(255, 255, 255, 0) 100%
);
opacity: 0.05; opacity: 0.05;
} }

30
src/app.html
View file

@ -1,43 +1,41 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="description" content="Bored? Find a game! Bored Game!" /> <meta name="description" content="Bored? Find a game! Bored Game!" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<script> <script>
const htmlElement = document.documentElement const htmlElement = document.documentElement;
const userTheme = localStorage.theme const userTheme = localStorage.theme;
const userFont = localStorage.font const userFont = localStorage.font;
// check if the user set a theme // check if the user set a theme
if (userTheme) { if (userTheme) {
htmlElement.dataset.theme = userTheme htmlElement.dataset.theme = userTheme;
} }
// otherwise check for user preference // otherwise check for user preference
if (!userTheme && prefersDarkMode) { if (!userTheme && prefersDarkMode) {
htmlElement.dataset.theme = '🌛 Night' htmlElement.dataset.theme = '🌛 Night';
localStorage.theme = '🌛 Night' localStorage.theme = '🌛 Night';
} }
if (!userTheme && prefersLightMode) { if (!userTheme && prefersLightMode) {
htmlElement.dataset.theme = '☀️ Daylight' htmlElement.dataset.theme = '☀️ Daylight';
localStorage.theme = '☀️ Daylight' localStorage.theme = '☀️ Daylight';
} }
// if nothing is set default to dark mode // if nothing is set default to dark mode
if (!userTheme && !prefersDarkMode && !prefersLightMode) { if (!userTheme && !prefersDarkMode && !prefersLightMode) {
htmlElement.dataset.theme = '🌛 Night' htmlElement.dataset.theme = '🌛 Night';
localStorage.theme = '🌛 Night' localStorage.theme = '🌛 Night';
} }
</script> </script>
%sveltekit.head% %sveltekit.head%
</head> </head>
<body> <body>
<div id="svelte">%sveltekit.body%</div> <div id="svelte">%sveltekit.body%</div>
</body> </body>
</html> </html>

4
src/lib/components/preferences/themes.svelte
View file

@ -12,8 +12,8 @@
'🌛 Night': { name: '🌛 Night' }, '🌛 Night': { name: '🌛 Night' },
'☀️ Daylight': { name: '☀️ Daylight' }, '☀️ Daylight': { name: '☀️ Daylight' },
'🐺 Night Howl': { name: '🐺 Night Howl' }, '🐺 Night Howl': { name: '🐺 Night Howl' },
'🧠 Night Mind': { name: '🧠 Night Mind' }, '🧠 Night Mind': { name: '🧠 Night Mind' }
} };
let selectedTheme = getTheme() ?? themes['🌛 Night']; let selectedTheme = getTheme() ?? themes['🌛 Night'];

8
src/lib/types.ts
View file

@ -9,7 +9,7 @@ export type ToastData = {
duration: number; duration: number;
type: ToastType; type: ToastType;
message: string; message: string;
} };
export type GameType = { export type GameType = {
id: string; id: string;
@ -18,7 +18,7 @@ export type GameType = {
url: string; url: string;
edit_url: string; edit_url: string;
thumb_url: string; thumb_url: string;
image_url: string, image_url: string;
price: number; price: number;
price_ca: number; price_ca: number;
price_uk: number; price_uk: number;
@ -33,7 +33,7 @@ export type GameType = {
description: string; description: string;
players: string; players: string;
playtime: string; playtime: string;
} };
export type SearchQuery = { export type SearchQuery = {
client_id: string; client_id: string;
@ -84,4 +84,4 @@ export type SearchQuery = {
lt_reddit_week_count?: number; lt_reddit_week_count?: number;
lt_reddit_day_count?: number; lt_reddit_day_count?: number;
fields?: string; fields?: string;
} };

6
src/lib/zodValidation.ts
View file

@ -1,10 +1,10 @@
import { z } from "zod"; import { z } from 'zod';
export const BoardGameSearch = z.object({ export const BoardGameSearch = z.object({
minAge: z.number(), minAge: z.number(),
maxAge: z.number(), maxAge: z.number(),
minPlayers: z.number(), minPlayers: z.number(),
maxPlayers: z.number(), maxPlayers: z.number()
}); });
export const Game = z.object({ export const Game = z.object({
@ -26,5 +26,5 @@ export const Game = z.object({
min_age: z.number(), min_age: z.number(),
description: z.string(), description: z.string(),
players: z.string(), players: z.string(),
playtime: z.string(), playtime: z.string()
}); });

13
src/routes/_api.ts
View file

@ -9,14 +9,19 @@
guarantees are made. Don't use it to organize your life.) guarantees are made. Don't use it to organize your life.)
*/ */
import { URLSearchParams } from "url"; import { URLSearchParams } from 'url';
const base = 'https://api.boardgameatlas.com/api'; const base = 'https://api.boardgameatlas.com/api';
export function boardGameApi(method: string, resource: string, queryParams: Record<string, string>, data?: Record<string, unknown>) { export function boardGameApi(
method: string,
resource: string,
queryParams: Record<string, string>,
data?: Record<string, unknown>
) {
queryParams.client_id = import.meta.env.VITE_PUBLIC_CLIENT_ID; queryParams.client_id = import.meta.env.VITE_PUBLIC_CLIENT_ID;
const urlQueryParams = new URLSearchParams(queryParams) const urlQueryParams = new URLSearchParams(queryParams);
const url = `${base}/${resource}${urlQueryParams ? `?${urlQueryParams}` : ''}` const url = `${base}/${resource}${urlQueryParams ? `?${urlQueryParams}` : ''}`;
return fetch(url, { return fetch(url, {
method, method,
headers: { headers: {

20
src/routes/api/games/index.ts
View file

@ -1,5 +1,5 @@
import type { RequestHandler } from "@sveltejs/kit"; import type { RequestHandler } from '@sveltejs/kit';
import type { SearchQuery } from "$lib/types"; import type { SearchQuery } from '$lib/types';
export const post: RequestHandler = async ({ request }) => { export const post: RequestHandler = async ({ request }) => {
const form = await request.formData(); const form = await request.formData();
@ -8,8 +8,8 @@ export const post: RequestHandler = async ({ request }) => {
order_by: 'rank', order_by: 'rank',
ascending: false, ascending: false,
limit: 20, limit: 20,
client_id: import.meta.env.VITE_PUBLIC_CLIENT_ID, client_id: import.meta.env.VITE_PUBLIC_CLIENT_ID
} };
const minAge = form.get('minAge'); const minAge = form.get('minAge');
const minPlayers = form.get('minPlayers'); const minPlayers = form.get('minPlayers');
@ -47,7 +47,7 @@ export const post: RequestHandler = async ({ request }) => {
if (exactMinPlayers) { if (exactMinPlayers) {
queryParams.min_players = +minPlayers; queryParams.min_players = +minPlayers;
} else { } else {
queryParams.gt_min_players = (+minPlayers === 1 ? 0 : (+minPlayers - 1)); queryParams.gt_min_players = +minPlayers === 1 ? 0 : +minPlayers - 1;
} }
} }
@ -70,12 +70,14 @@ export const post: RequestHandler = async ({ request }) => {
const urlQueryParams = new URLSearchParams(newQueryParams); const urlQueryParams = new URLSearchParams(newQueryParams);
const url = `https://api.boardgameatlas.com/api/search${urlQueryParams ? `?${urlQueryParams}` : ''}` const url = `https://api.boardgameatlas.com/api/search${
urlQueryParams ? `?${urlQueryParams}` : ''
}`;
const response = await fetch(url, { const response = await fetch(url, {
method: 'get', method: 'get',
headers: { headers: {
'content-type': 'application/json' 'content-type': 'application/json'
}, }
}); });
console.log('response', response); console.log('response', response);
if (response.status === 404) { if (response.status === 404) {
@ -94,7 +96,7 @@ export const post: RequestHandler = async ({ request }) => {
console.log('games', games); console.log('games', games);
return { return {
body: { body: {
games: gameResponse?.games, games: gameResponse?.games
} }
}; };
} }
@ -102,4 +104,4 @@ export const post: RequestHandler = async ({ request }) => {
return { return {
status: response.status status: response.status
}; };
} };

26
src/routes/games/index.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import type { Game } from "$lib/types"; import type { Game } from '$lib/types';
import { Checkbox, NumberInput } from "carbon-components-svelte"; import { Checkbox, NumberInput } from 'carbon-components-svelte';
// import { enhance } from "$lib/form"; // import { enhance } from "$lib/form";
let games: Game[] = []; let games: Game[] = [];
@ -28,7 +28,6 @@ import { Checkbox, NumberInput } from "carbon-components-svelte";
let exactMaxPlayers = false; let exactMaxPlayers = false;
</script> </script>
<svelte:head> <svelte:head>
<title>Games</title> <title>Games</title>
</svelte:head> </svelte:head>
@ -50,7 +49,12 @@ import { Checkbox, NumberInput } from "carbon-components-svelte";
invalidText="Number must be between 0 and 120" invalidText="Number must be between 0 and 120"
label="Min Age" label="Min Age"
/> />
<Checkbox name="exactMinAge" bind:value={exactMinAge} labelText="Search exact?" bind:checked={exactMinAge} /> <Checkbox
name="exactMinAge"
bind:value={exactMinAge}
labelText="Search exact?"
bind:checked={exactMinAge}
/>
</div> </div>
<div> <div>
<NumberInput <NumberInput
@ -61,7 +65,12 @@ import { Checkbox, NumberInput } from "carbon-components-svelte";
invalidText="Number must be between 1 and 50" invalidText="Number must be between 1 and 50"
label="Min Players" label="Min Players"
/> />
<Checkbox name="exactMinPlayers" labelText="Search exact?" bind:value={exactMinPlayers} bind:checked={exactMinPlayers} /> <Checkbox
name="exactMinPlayers"
labelText="Search exact?"
bind:value={exactMinPlayers}
bind:checked={exactMinPlayers}
/>
</div> </div>
<div> <div>
<NumberInput <NumberInput
@ -72,7 +81,12 @@ import { Checkbox, NumberInput } from "carbon-components-svelte";
invalidText="Number must be between 1 and 50" invalidText="Number must be between 1 and 50"
label="Max Players" label="Max Players"
/> />
<Checkbox name="exactMaxPlayers" labelText="Search exact?" bind:value={exactMaxPlayers} bind:checked={exactMaxPlayers} /> <Checkbox
name="exactMaxPlayers"
labelText="Search exact?"
bind:value={exactMaxPlayers}
bind:checked={exactMaxPlayers}
/>
</div> </div>
</fieldset> </fieldset>
<button type="submit" disabled={submitting}>Submit</button> <button type="submit" disabled={submitting}>Submit</button>

6
src/routes/index.ts
View file

@ -19,8 +19,8 @@ export const post: RequestHandler = async ({ request, locals }) => {
gt_min_players: String(+minPlayers === 1 ? 0 : +minPlayers - 1), gt_min_players: String(+minPlayers === 1 ? 0 : +minPlayers - 1),
lt_max_players: String(+maxPlayers + 1), lt_max_players: String(+maxPlayers + 1),
gt_min_age: String(+minAge === 1 ? 0 : +minAge - 1), gt_min_age: String(+minAge === 1 ? 0 : +minAge - 1),
lt_max_age: String(+maxAge + 1), lt_max_age: String(+maxAge + 1)
} };
const response = await boardGameApi('get', `search`, queryParams); const response = await boardGameApi('get', `search`, queryParams);
console.log('response', response); console.log('response', response);
if (response.status === 404) { if (response.status === 404) {
@ -39,7 +39,7 @@ export const post: RequestHandler = async ({ request, locals }) => {
console.log('games', games); console.log('games', games);
return { return {
body: { body: {
games: gameResponse?.games, games: gameResponse?.games
} }
}; };
} }

16
src/styles/global.scss
View file

@ -28,7 +28,7 @@
--yellow: #ffc600; --yellow: #ffc600;
--light: #ffffff; --light: #ffffff;
--dark: #000000; --dark: #000000;
--lightGrey: #C5C5C5; --lightGrey: #c5c5c5;
--lightGray: var(--lightGrey); --lightGray: var(--lightGrey);
--imGoingToFaint: #fbfbfb; --imGoingToFaint: #fbfbfb;
--redBrown: #633539; --redBrown: #633539;
@ -45,7 +45,7 @@
--headerBackground: var(--greyBlue); --headerBackground: var(--greyBlue);
--footerBackground: var(--darkGrey); --footerBackground: var(--darkGrey);
--linkHover: var(--white); --linkHover: var(--white);
--lightHairLine: #C5C5C5; --lightHairLine: #c5c5c5;
--radius-base: 1rem; --radius-base: 1rem;
@ -79,12 +79,9 @@
/* Elevation */ /* Elevation */
--level-0: none; --level-0: none;
--level-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); --level-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--level-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), --level-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
0 2px 4px -1px rgba(0, 0, 0, 0.06); --level-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--level-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), --level-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
0 4px 6px -2px rgba(0, 0, 0, 0.05);
--level-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
/* Z Indexes */ /* Z Indexes */
--zBase: 1; --zBase: 1;
@ -150,7 +147,6 @@ body {
height: 100%; height: 100%;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 4px; width: 4px;
height: 4px; height: 4px;
@ -175,7 +171,7 @@ body {
font-size: var(--font-18); font-size: var(--font-18);
color: var(--color-text-primary); color: var(--color-text-primary);
// background-color: var(--color-bg-primary); // background-color: var(--color-bg-primary);
background-color: #2D3A3A; background-color: #2d3a3a;
// background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 60'%3E%3Cg %3E%3Crect fill='%23555555' width='11' height='11'/%3E%3Crect fill='%23565656' x='10' width='11' height='11'/%3E%3Crect fill='%23575757' y='10' width='11' height='11'/%3E%3Crect fill='%23575757' x='20' width='11' height='11'/%3E%3Crect fill='%23585858' x='10' y='10' width='11' height='11'/%3E%3Crect fill='%23595959' y='20' width='11' height='11'/%3E%3Crect fill='%235a5a5a' x='30' width='11' height='11'/%3E%3Crect fill='%235b5b5b' x='20' y='10' width='11' height='11'/%3E%3Crect fill='%235c5c5c' x='10' y='20' width='11' height='11'/%3E%3Crect fill='%235c5c5c' y='30' width='11' height='11'/%3E%3Crect fill='%235d5d5d' x='40' width='11' height='11'/%3E%3Crect fill='%235e5e5e' x='30' y='10' width='11' height='11'/%3E%3Crect fill='%235f5f5f' x='20' y='20' width='11' height='11'/%3E%3Crect fill='%23606060' x='10' y='30' width='11' height='11'/%3E%3Crect fill='%23616161' y='40' width='11' height='11'/%3E%3Crect fill='%23626262' x='50' width='11' height='11'/%3E%3Crect fill='%23626262' x='40' y='10' width='11' height='11'/%3E%3Crect fill='%23636363' x='30' y='20' width='11' height='11'/%3E%3Crect fill='%23646464' x='20' y='30' width='11' height='11'/%3E%3Crect fill='%23656565' x='10' y='40' width='11' height='11'/%3E%3Crect fill='%23666666' y='50' width='11' height='11'/%3E%3Crect fill='%23676767' x='60' width='11' height='11'/%3E%3Crect fill='%23686868' x='50' y='10' width='11' height='11'/%3E%3Crect fill='%23686868' x='40' y='20' width='11' height='11'/%3E%3Crect fill='%23696969' x='30' y='30' width='11' height='11'/%3E%3Crect fill='%236a6a6a' x='20' y='40' width='11' height='11'/%3E%3Crect fill='%236b6b6b' x='10' y='50' width='11' height='11'/%3E%3Crect fill='%236c6c6c' x='70' width='11' height='11'/%3E%3Crect fill='%236d6d6d' x='60' y='10' width='11' height='11'/%3E%3Crect fill='%236e6e6e' x='50' y='20' width='11' height='11'/%3E%3Crect fill='%236e6e6e' x='40' y='30' width='11' height='11'/%3E%3Crect fill='%236f6f6f' x='30' y='40' width='11' height='11'/%3E%3Crect fill='%23707070' x='20' y='50' width='11' height='11'/%3E%3Crect fill='%23717171' x='80' width='11' height='11'/%3E%3Crect fill='%23727272' x='70' y='10' width='11' height='11'/%3E%3Crect fill='%23737373' x='60' y='20' width='11' height='11'/%3E%3Crect fill='%23747474' x='50' y='30' width='11' height='11'/%3E%3Crect fill='%23747474' x='40' y='40' width='11' height='11'/%3E%3Crect fill='%23757575' x='30' y='50' width='11' height='11'/%3E%3Crect fill='%23767676' x='90' width='11' height='11'/%3E%3Crect fill='%23777777' x='80' y='10' width='11' height='11'/%3E%3Crect fill='%23787878' x='70' y='20' width='11' height='11'/%3E%3Crect fill='%23797979' x='60' y='30' width='11' height='11'/%3E%3Crect fill='%237a7a7a' x='50' y='40' width='11' height='11'/%3E%3Crect fill='%237b7b7b' x='40' y='50' width='11' height='11'/%3E%3Crect fill='%237c7c7c' x='90' y='10' width='11' height='11'/%3E%3Crect fill='%237c7c7c' x='80' y='20' width='11' height='11'/%3E%3Crect fill='%237d7d7d' x='70' y='30' width='11' height='11'/%3E%3Crect fill='%237e7e7e' x='60' y='40' width='11' height='11'/%3E%3Crect fill='%237f7f7f' x='50' y='50' width='11' height='11'/%3E%3Crect fill='%23808080' x='90' y='20' width='11' height='11'/%3E%3Crect fill='%23818181' x='80' y='30' width='11' height='11'/%3E%3Crect fill='%23828282' x='70' y='40' width='11' height='11'/%3E%3Crect fill='%23838383' x='60' y='50' width='11' height='11'/%3E%3Crect fill='%23848484' x='90' y='30' width='11' height='11'/%3E%3Crect fill='%23848484' x='80' y='40' width='11' height='11'/%3E%3Crect fill='%23858585' x='70' y='50' width='11' height='11'/%3E%3Crect fill='%23868686' x='90' y='40' width='11' height='11'/%3E%3Crect fill='%23878787' x='80' y='50' width='11' height='11'/%3E%3Crect fill='%23888888' x='90' y='50' width='11' height='11'/%3E%3C/g%3E%3C/svg%3E"); // background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 60'%3E%3Cg %3E%3Crect fill='%23555555' width='11' height='11'/%3E%3Crect fill='%23565656' x='10' width='11' height='11'/%3E%3Crect fill='%23575757' y='10' width='11' height='11'/%3E%3Crect fill='%23575757' x='20' width='11' height='11'/%3E%3Crect fill='%23585858' x='10' y='10' width='11' height='11'/%3E%3Crect fill='%23595959' y='20' width='11' height='11'/%3E%3Crect fill='%235a5a5a' x='30' width='11' height='11'/%3E%3Crect fill='%235b5b5b' x='20' y='10' width='11' height='11'/%3E%3Crect fill='%235c5c5c' x='10' y='20' width='11' height='11'/%3E%3Crect fill='%235c5c5c' y='30' width='11' height='11'/%3E%3Crect fill='%235d5d5d' x='40' width='11' height='11'/%3E%3Crect fill='%235e5e5e' x='30' y='10' width='11' height='11'/%3E%3Crect fill='%235f5f5f' x='20' y='20' width='11' height='11'/%3E%3Crect fill='%23606060' x='10' y='30' width='11' height='11'/%3E%3Crect fill='%23616161' y='40' width='11' height='11'/%3E%3Crect fill='%23626262' x='50' width='11' height='11'/%3E%3Crect fill='%23626262' x='40' y='10' width='11' height='11'/%3E%3Crect fill='%23636363' x='30' y='20' width='11' height='11'/%3E%3Crect fill='%23646464' x='20' y='30' width='11' height='11'/%3E%3Crect fill='%23656565' x='10' y='40' width='11' height='11'/%3E%3Crect fill='%23666666' y='50' width='11' height='11'/%3E%3Crect fill='%23676767' x='60' width='11' height='11'/%3E%3Crect fill='%23686868' x='50' y='10' width='11' height='11'/%3E%3Crect fill='%23686868' x='40' y='20' width='11' height='11'/%3E%3Crect fill='%23696969' x='30' y='30' width='11' height='11'/%3E%3Crect fill='%236a6a6a' x='20' y='40' width='11' height='11'/%3E%3Crect fill='%236b6b6b' x='10' y='50' width='11' height='11'/%3E%3Crect fill='%236c6c6c' x='70' width='11' height='11'/%3E%3Crect fill='%236d6d6d' x='60' y='10' width='11' height='11'/%3E%3Crect fill='%236e6e6e' x='50' y='20' width='11' height='11'/%3E%3Crect fill='%236e6e6e' x='40' y='30' width='11' height='11'/%3E%3Crect fill='%236f6f6f' x='30' y='40' width='11' height='11'/%3E%3Crect fill='%23707070' x='20' y='50' width='11' height='11'/%3E%3Crect fill='%23717171' x='80' width='11' height='11'/%3E%3Crect fill='%23727272' x='70' y='10' width='11' height='11'/%3E%3Crect fill='%23737373' x='60' y='20' width='11' height='11'/%3E%3Crect fill='%23747474' x='50' y='30' width='11' height='11'/%3E%3Crect fill='%23747474' x='40' y='40' width='11' height='11'/%3E%3Crect fill='%23757575' x='30' y='50' width='11' height='11'/%3E%3Crect fill='%23767676' x='90' width='11' height='11'/%3E%3Crect fill='%23777777' x='80' y='10' width='11' height='11'/%3E%3Crect fill='%23787878' x='70' y='20' width='11' height='11'/%3E%3Crect fill='%23797979' x='60' y='30' width='11' height='11'/%3E%3Crect fill='%237a7a7a' x='50' y='40' width='11' height='11'/%3E%3Crect fill='%237b7b7b' x='40' y='50' width='11' height='11'/%3E%3Crect fill='%237c7c7c' x='90' y='10' width='11' height='11'/%3E%3Crect fill='%237c7c7c' x='80' y='20' width='11' height='11'/%3E%3Crect fill='%237d7d7d' x='70' y='30' width='11' height='11'/%3E%3Crect fill='%237e7e7e' x='60' y='40' width='11' height='11'/%3E%3Crect fill='%237f7f7f' x='50' y='50' width='11' height='11'/%3E%3Crect fill='%23808080' x='90' y='20' width='11' height='11'/%3E%3Crect fill='%23818181' x='80' y='30' width='11' height='11'/%3E%3Crect fill='%23828282' x='70' y='40' width='11' height='11'/%3E%3Crect fill='%23838383' x='60' y='50' width='11' height='11'/%3E%3Crect fill='%23848484' x='90' y='30' width='11' height='11'/%3E%3Crect fill='%23848484' x='80' y='40' width='11' height='11'/%3E%3Crect fill='%23858585' x='70' y='50' width='11' height='11'/%3E%3Crect fill='%23868686' x='90' y='40' width='11' height='11'/%3E%3Crect fill='%23878787' x='80' y='50' width='11' height='11'/%3E%3Crect fill='%23888888' x='90' y='50' width='11' height='11'/%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed; background-attachment: fixed;
background-size: cover; background-size: cover;

68
src/styles/theme.scss
View file

@ -9,11 +9,7 @@ html[data-theme='🌛 Night'] {
/* Menu */ /* Menu */
--clr-menu-text: hsl(0 0% 78%); --clr-menu-text: hsl(0 0% 78%);
--clr-menu-bg: linear-gradient( --clr-menu-bg: linear-gradient(180deg, hsl(180 7% 14%) 0%, hsl(216 7% 14%) 100%);
180deg,
hsl(180 7% 14%) 0%,
hsl(216 7% 14%) 100%
);
--clr-menu-arrow-bg: hsl(180 7% 14%); --clr-menu-arrow-bg: hsl(180 7% 14%);
--clr-menu-border: hsl(0 0% 19%); --clr-menu-border: hsl(0 0% 19%);
@ -24,11 +20,7 @@ html[data-theme='🌛 Night'] {
/* Hero */ /* Hero */
--clr-hero-txt: hsl(174 27% 73%); --clr-hero-txt: hsl(174 27% 73%);
--clr-hero-bg: linear-gradient( --clr-hero-bg: linear-gradient(270deg, hsl(210 15% 13%) 43%, hsl(176 19% 15%) 66%);
270deg,
hsl(210 15% 13%) 43%,
hsl(176 19% 15%) 66%
);
--clr-hero-divider-bg: hsl(0 0% 21%); --clr-hero-divider-bg: hsl(0 0% 21%);
--clr-input-txt: hsl(177 100% 15%); --clr-input-txt: hsl(177 100% 15%);
--clr-input-bg: hsl(210 13% 24%); --clr-input-bg: hsl(210 13% 24%);
@ -36,11 +28,7 @@ html[data-theme='🌛 Night'] {
--clr-input-border: hsl(0 0% 21%); --clr-input-border: hsl(0 0% 21%);
/* Card */ /* Card */
--clr-card-bg: linear-gradient( --clr-card-bg: linear-gradient(180deg, hsl(180 7% 14%) 0%, hsl(216 7% 14%) 100%);
180deg,
hsl(180 7% 14%) 0%,
hsl(216 7% 14%) 100%
);
--clr-card-txt: hsl(0 0% 78%); --clr-card-txt: hsl(0 0% 78%);
/* Link */ /* Link */
@ -70,9 +58,9 @@ html[data-theme='🌛 Night'] {
--clr-token-3: hsl(173 100% 66%); --clr-token-3: hsl(173 100% 66%);
--clr-token-4: hsl(0 0% 98%); --clr-token-4: hsl(0 0% 98%);
--clr-token-5: hsl(173 10% 60%); --clr-token-5: hsl(173 10% 60%);
} }
html[data-theme='☀️ Daylight'] { html[data-theme='☀️ Daylight'] {
/* Global */ /* Global */
--clr-primary: hsl(220 100% 50%); --clr-primary: hsl(220 100% 50%);
--clr-txt: hsl(220 10% 10%); --clr-txt: hsl(220 10% 10%);
@ -132,9 +120,9 @@ html[data-theme='🌛 Night'] {
--clr-token-3: hsl(220 100% 50%); --clr-token-3: hsl(220 100% 50%);
--clr-token-4: hsl(0 0% 20%); --clr-token-4: hsl(0 0% 20%);
--clr-token-5: hsl(0 0% 60%); --clr-token-5: hsl(0 0% 60%);
} }
html[data-theme='🐺 Night Howl'] { html[data-theme='🐺 Night Howl'] {
/* Global */ /* Global */
--clr-primary: hsl(207 100% 94%); --clr-primary: hsl(207 100% 94%);
--clr-txt: hsl(210 40% 80%); --clr-txt: hsl(210 40% 80%);
@ -145,11 +133,7 @@ html[data-theme='🌛 Night'] {
/* Menu */ /* Menu */
--clr-menu-text: hsl(210 40% 80%); --clr-menu-text: hsl(210 40% 80%);
--clr-menu-bg: linear-gradient( --clr-menu-bg: linear-gradient(180deg, hsl(210 47% 14%) 0%, hsl(210 47% 12%) 100%);
180deg,
hsl(210 47% 14%) 0%,
hsl(210 47% 12%) 100%
);
--clr-menu-arrow-bg: hsl(210 47% 14%); --clr-menu-arrow-bg: hsl(210 47% 14%);
--clr-menu-border: hsl(210 40% 20%); --clr-menu-border: hsl(210 40% 20%);
@ -160,11 +144,7 @@ html[data-theme='🌛 Night'] {
/* Hero */ /* Hero */
--clr-hero-txt: hsl(210 40% 60%); --clr-hero-txt: hsl(210 40% 60%);
--clr-hero-bg: linear-gradient( --clr-hero-bg: linear-gradient(270deg, hsl(210 47% 12%) 43%, hsl(210 47% 14%) 66%);
270deg,
hsl(210 47% 12%) 43%,
hsl(210 47% 14%) 66%
);
--clr-hero-divider-bg: hsl(210 40% 20%); --clr-hero-divider-bg: hsl(210 40% 20%);
--clr-input-txt: hsl(210 40% 20%); --clr-input-txt: hsl(210 40% 20%);
--clr-input-bg: hsl(210 40% 16%); --clr-input-bg: hsl(210 40% 16%);
@ -172,11 +152,7 @@ html[data-theme='🌛 Night'] {
--clr-input-border: hsl(210 40% 20%); --clr-input-border: hsl(210 40% 20%);
/* Card */ /* Card */
--clr-card-bg: linear-gradient( --clr-card-bg: linear-gradient(180deg, hsl(210 47% 14%) 0%, hsl(210 47% 12%) 100%);
180deg,
hsl(210 47% 14%) 0%,
hsl(210 47% 12%) 100%
);
--clr-card-txt: hsl(210 40% 60%); --clr-card-txt: hsl(210 40% 60%);
/* Link */ /* Link */
@ -206,9 +182,9 @@ html[data-theme='🌛 Night'] {
--clr-token-3: hsl(180 100% 43%); --clr-token-3: hsl(180 100% 43%);
--clr-token-4: hsl(206 50% 98%); --clr-token-4: hsl(206 50% 98%);
--clr-token-5: hsl(217 10% 64%); --clr-token-5: hsl(217 10% 64%);
} }
html[data-theme='🧠 Night Mind'] { html[data-theme='🧠 Night Mind'] {
/* Global */ /* Global */
--clr-primary: hsl(9 100% 84%); --clr-primary: hsl(9 100% 84%);
--clr-txt: hsl(265 28% 98%); --clr-txt: hsl(265 28% 98%);
@ -219,11 +195,7 @@ html[data-theme='🌛 Night'] {
/* Menu */ /* Menu */
--clr-menu-text: hsl(265 28% 98%); --clr-menu-text: hsl(265 28% 98%);
--clr-menu-bg: linear-gradient( --clr-menu-bg: linear-gradient(180deg, hsl(265 28% 20%) 0%, hsl(265 28% 18%) 100%);
180deg,
hsl(265 28% 20%) 0%,
hsl(265 28% 18%) 100%
);
--clr-menu-arrow-bg: hsl(265 28% 20%); --clr-menu-arrow-bg: hsl(265 28% 20%);
--clr-menu-border: hsl(265 28% 24%); --clr-menu-border: hsl(265 28% 24%);
@ -234,11 +206,7 @@ html[data-theme='🌛 Night'] {
/* Hero */ /* Hero */
--clr-hero-txt: hsl(265 28% 80%); --clr-hero-txt: hsl(265 28% 80%);
--clr-hero-bg: linear-gradient( --clr-hero-bg: linear-gradient(270deg, hsl(265 28% 20%) 43%, hsl(265 28% 24%) 66%);
270deg,
hsl(265 28% 20%) 43%,
hsl(265 28% 24%) 66%
);
--clr-hero-divider-bg: hsl(265 28% 24%); --clr-hero-divider-bg: hsl(265 28% 24%);
--clr-input-txt: hsl(265 28% 20%); --clr-input-txt: hsl(265 28% 20%);
--clr-input-bg: hsl(265 28% 24%); --clr-input-bg: hsl(265 28% 24%);
@ -246,11 +214,7 @@ html[data-theme='🌛 Night'] {
--clr-input-border: hsl(265 28% 26%); --clr-input-border: hsl(265 28% 26%);
/* Card */ /* Card */
--clr-card-bg: linear-gradient( --clr-card-bg: linear-gradient(180deg, hsl(265 28% 22%) 0%, hsl(265 28% 20%) 100%);
180deg,
hsl(265 28% 22%) 0%,
hsl(265 28% 20%) 100%
);
--clr-card-txt: hsl(265 28% 80%); --clr-card-txt: hsl(265 28% 80%);
/* Link */ /* Link */
@ -280,4 +244,4 @@ html[data-theme='🌛 Night'] {
--clr-token-3: hsl(358 80% 80%); --clr-token-3: hsl(358 80% 80%);
--clr-token-4: hsl(256 80% 98%); --clr-token-4: hsl(256 80% 98%);
--clr-token-5: hsl(265 10% 60%); --clr-token-5: hsl(265 10% 60%);
} }

2
svelte.config.js
View file

@ -10,7 +10,7 @@ const config = {
adapter: adapter(), adapter: adapter(),
alias: { alias: {
$components: 'src/components', $components: 'src/components',
$root: './src', $root: './src'
}, },
// Override http methods in the Todo forms // Override http methods in the Todo forms
methodOverride: { methodOverride: {