diff --git a/src/app.css b/src/app.css index 55ed15e..34a745b 100644 --- a/src/app.css +++ b/src/app.css @@ -2,22 +2,39 @@ @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); } + +.inactive { + outline-color: var(--color-black); + font-style: italic; +} 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% +
Loading...
+ {:then result} + {#if result && result.data} + + {:else} + + {/if} + {:catch error} +Error Getting Actions: {error.message}
+ {/await} + + {#await queryQuestions} +Loading...
+ {:then result} + {#if result.data} + {#each getCategories(result.data) as category} + + {/each} + {:else} +No categories found
+ {/if} + {:catch error} +Error Getting Questions: {error.message}
+ {/await} +- Visit svelte.dev/docs/kit to read the documentation -
+ + +