diff --git a/src/app.css b/src/app.css index 55ed15e..897a8f1 100644 --- a/src/app.css +++ b/src/app.css @@ -2,22 +2,34 @@ @import '@fontsource/metropolis'; @theme { - --pink: #d600a8; - --black: #000000; - --white: #ffffff; - --light-pink: #ff2ed2; - --teal: #00a7a8; - --yellow: #ffcb00; - --orange: #ec5d2a; - --green: #29e2a3; - --purple: #7900d6; - --bright-blue: #2235e2; - --dark-purple: #4d1b9b; + --color-black: #000000; + --color-blue-bright: #2235e2; + --color-green: #29e2a3; + --color-orange: #ec5d2a; + --color-pink: #d600a8; + --color-pink-light: #ff2ed2; + --color-purple: #7900d6; + --color-purple-dark: #4d1b9b; + --color-teal: #00a7a8; + --color-white: #ffffff; + --color-yellow: #ffcb00; --font-family-sans: Metropolis, Arial; } body { - background-color: var(--white); - color: var(--black); + background-color: var(--color-white); + color: var(--color-black); font-family: var(--font-family-sans); } + +.dev { + margin: 1rem; + outline: 2px dashed var(--color-teal); + padding: 1rem; +} + +.tile { outline-color: var(--color-blue-bright); } + +.list { outline-color: var(--color-purple); } + +.button { outline-color: var(--color-pink); } diff --git a/src/app.html b/src/app.html index 77a5ff5..ae678f9 100644 --- a/src/app.html +++ b/src/app.html @@ -6,6 +6,7 @@ %sveltekit.head% +
%sveltekit.body%
diff --git a/src/lib/components/header.svelte b/src/lib/components/header.svelte new file mode 100644 index 0000000..3203585 --- /dev/null +++ b/src/lib/components/header.svelte @@ -0,0 +1,6 @@ + + +
+

header

+
\ No newline at end of file diff --git a/src/lib/components/logic/dev.svelte.ts b/src/lib/components/logic/dev.svelte.ts new file mode 100644 index 0000000..073d7d0 --- /dev/null +++ b/src/lib/components/logic/dev.svelte.ts @@ -0,0 +1,19 @@ +let tileNum = $state(0); + +export function setTileNum(num: number) { + tileNum = num; +} + +export function getTileNum(): number { + return tileNum; +} + +let listNum = $state(0); + +export function setListNum(num: number) { + listNum = num; +} + +export function getListNum(): number { + return listNum; +} \ No newline at end of file diff --git a/src/lib/components/logic/view.svelte.ts b/src/lib/components/logic/view.svelte.ts new file mode 100644 index 0000000..c66ae19 --- /dev/null +++ b/src/lib/components/logic/view.svelte.ts @@ -0,0 +1,11 @@ +import type { View } from "$lib/types/ui"; + +let view = $state("dash"); + +export function setView(newView: View) { + view = newView; +}; + +export function getView(): View { + return view; +} \ No newline at end of file diff --git a/src/lib/components/main.svelte b/src/lib/components/main.svelte new file mode 100644 index 0000000..0132e90 --- /dev/null +++ b/src/lib/components/main.svelte @@ -0,0 +1,19 @@ + + +
+

main

+ + {#if getView() === "dash"} + + {:else if getView() === "list"} + + {:else if getView() === "detail"} + + {/if} +
\ No newline at end of file diff --git a/src/lib/components/view/dash.svelte b/src/lib/components/view/dash.svelte new file mode 100644 index 0000000..ec64363 --- /dev/null +++ b/src/lib/components/view/dash.svelte @@ -0,0 +1,29 @@ + + +
+

view/dash

+ +

There should be {tileCountNum} {tileCountText}

+ + {#each [...Array(tileCountNum)] as _, i} + {@const thisList = randomNum()} + + {/each} +
\ No newline at end of file diff --git a/src/lib/components/view/detail.svelte b/src/lib/components/view/detail.svelte new file mode 100644 index 0000000..9d11a98 --- /dev/null +++ b/src/lib/components/view/detail.svelte @@ -0,0 +1,15 @@ + + +
+

view/detail

+ + +
\ No newline at end of file diff --git a/src/lib/components/view/list.svelte b/src/lib/components/view/list.svelte new file mode 100644 index 0000000..f341f14 --- /dev/null +++ b/src/lib/components/view/list.svelte @@ -0,0 +1,30 @@ + + +
+

view/list

+ + + +

There should be {entries} List Items

+ + {#each [...Array(entries)] as _, i} + + {/each} +
\ No newline at end of file diff --git a/src/lib/types/ui.ts b/src/lib/types/ui.ts new file mode 100644 index 0000000..7b55944 --- /dev/null +++ b/src/lib/types/ui.ts @@ -0,0 +1 @@ +export type View = "dash" | "list" | "detail"; \ No newline at end of file diff --git a/src/lib/utils/random.ts b/src/lib/utils/random.ts new file mode 100644 index 0000000..29d745c --- /dev/null +++ b/src/lib/utils/random.ts @@ -0,0 +1,3 @@ +export function randomNum() { + return Math.ceil(Math.random() * 10); +} \ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index b93e9ba..edb4470 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,7 +1,10 @@ +
+ {@render children()} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index c65b0ee..6796c77 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,4 +1,5 @@ -

Welcome to SvelteKit

-

- Visit svelte.dev/docs/kit to read the documentation -

+ + +
\ No newline at end of file diff --git a/vite.config.ts b/vite.config.ts index d2258dd..05c4998 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -4,7 +4,10 @@ import { sveltekit } from '@sveltejs/kit/vite'; import { defineConfig } from 'vite'; export default defineConfig({ - plugins: [tailwindcss(), sveltekit()], + plugins: [ + tailwindcss(), + sveltekit() + ], test: { workspace: [ {