diff --git a/frontend/package.json b/frontend/package.json index 2ee69ea..1c15fe4 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -12,11 +12,17 @@ "devDependencies": { "@sveltejs/vite-plugin-svelte": "^1.0.1", "@tsconfig/svelte": "^3.0.0", + "autoprefixer": "^10.4.19", + "postcss": "^8.4.39", "svelte": "^3.49.0", "svelte-check": "^2.8.0", "svelte-preprocess": "^4.10.7", + "tailwindcss": "^3.4.6", "tslib": "^2.4.0", "typescript": "^4.6.4", "vite": "^3.0.7" + }, + "dependencies": { + "@tailwindcss/aspect-ratio": "^0.4.2" } -} \ No newline at end of file +} diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js new file mode 100644 index 0000000..2e7af2b --- /dev/null +++ b/frontend/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte index d688775..e11308f 100644 --- a/frontend/src/App.svelte +++ b/frontend/src/App.svelte @@ -1,125 +1,134 @@
- - - - - - +
+ + +
-
{aniListItem !== undefined ? aniListItem.data.Media.title.english : ""}
-
- - -
+ + {#if aniListLoggedIn} +
You are logged in {aniListWatchlist.data.Page.mediaList[0].user.name}!
+ {/if} - - {#if aniListLoggedIn} -
You are logged in!
- {/if} + {#if aniListLoggedIn} +
+

Your Watching List

-
- - -
- {#if aniListSearch !== undefined} - - {/if} + +
+ {/if}
diff --git a/frontend/src/style.css b/frontend/src/style.css index 3940d6c..1fc5c86 100644 --- a/frontend/src/style.css +++ b/frontend/src/style.css @@ -1,3 +1,7 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + html { background-color: rgba(27, 38, 54, 1); text-align: center; diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js new file mode 100644 index 0000000..6791225 --- /dev/null +++ b/frontend/tailwind.config.js @@ -0,0 +1,14 @@ +/** @type {import('tailwindcss').Config} */ +export default { + content: [ + "./index.html", + "./src/**/*.{svelte,js,ts,jsx,tsx}", + ], + theme: { + extend: {}, + }, + plugins: [ + require('@tailwindcss/aspect-ratio'), + ], +} +