diff --git a/postcss.config.cjs b/postcss.config.cjs index 7c8ddf0..aa050d5 100644 --- a/postcss.config.cjs +++ b/postcss.config.cjs @@ -1,3 +1,4 @@ +const tailwindcss = require('tailwindcss'); const autoprefixer = require('autoprefixer'); const postcssMediaMinmax = require('postcss-media-minmax'); const customMedia = require('postcss-custom-media'); @@ -7,6 +8,9 @@ const postcssEnvFunction = require('postcss-env-function'); const config = { plugins: [ + //Some plugins, like tailwindcss/nesting, need to run before Tailwind, + tailwindcss(), + //But others, like autoprefixer, need to run after autoprefixer(), postcssMediaMinmax, customMedia, @@ -14,7 +18,7 @@ const config = { postcssNested, postcssEnvFunction({ importFrom: './src/lib/util/environmentVariables.json' - }) + }), ] }; diff --git a/src/app.css b/src/app.css deleted file mode 100644 index cee552d..0000000 --- a/src/app.css +++ /dev/null @@ -1,109 +0,0 @@ -@import '@fontsource/fira-mono'; - -:root { - font-family: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, - Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - --font-mono: 'Fira Mono', monospace; - --pure-white: #ffffff; - --primary-color: #b9c6d2; - --secondary-color: #d0dde9; - --tertiary-color: #edf0f8; - --accent-color: #ff3e00; - --heading-color: rgba(0, 0, 0, 0.7); - --text-color: #444444; - --background-without-opacity: rgba(255, 255, 255, 0.7); - --column-width: 42rem; - --column-margin-top: 4rem; - --z-highest: 100; - --cardBorderRadius: 12px; -} - -body { - min-height: 100vh; - margin: 0; - background-color: var(--primary-color); - background: linear-gradient( - 180deg, - var(--primary-color) 0%, - var(--secondary-color) 10.45%, - var(--tertiary-color) 41.35% - ); -} - -body::before { - content: ''; - width: 80vw; - height: 100vh; - position: absolute; - top: 0; - left: 10vw; - z-index: -1; - background: radial-gradient( - 50% 50% at 50% 50%, - var(--pure-white) 0%, - rgba(255, 255, 255, 0) 100% - ); - opacity: 0.05; -} - -#svelte { - min-height: 100vh; - display: flex; - flex-direction: column; -} - -h1, -h2, -p { - font-weight: 400; - color: var(--heading-color); -} - -p { - line-height: 1.5; -} - -a { - color: var(--accent-color); - text-decoration: none; -} - -a:hover { - text-decoration: underline; -} - -h1 { - font-size: 2rem; - text-align: center; -} - -h2 { - font-size: 1rem; -} - -pre { - font-size: 16px; - font-family: var(--font-mono); - background-color: rgba(255, 255, 255, 0.45); - border-radius: 3px; - box-shadow: 2px 2px 6px rgb(255 255 255 / 25%); - padding: 0.5em; - overflow-x: auto; - color: var(--text-color); -} - -input, -button { - font-size: inherit; - font-family: inherit; -} - -button:focus:not(:focus-visible) { - outline: none; -} - -@media (min-width: 720px) { - h1 { - font-size: 2.4rem; - } -} diff --git a/src/app.postcss b/src/app.postcss new file mode 100644 index 0000000..1c562ab --- /dev/null +++ b/src/app.postcss @@ -0,0 +1,111 @@ +/* Write your global styles here, in PostCSS syntax */ + +@import '@fontsource/fira-mono'; + +:root { + font-family: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + --font-mono: 'Fira Mono', monospace; + --pure-white: #ffffff; + --primary-color: #b9c6d2; + --secondary-color: #d0dde9; + --tertiary-color: #edf0f8; + --accent-color: #ff3e00; + --heading-color: rgba(0, 0, 0, 0.7); + --text-color: #444444; + --background-without-opacity: rgba(255, 255, 255, 0.7); + --column-width: 42rem; + --column-margin-top: 4rem; + --z-highest: 100; + --cardBorderRadius: 12px; +} + +body { + min-height: 100vh; + margin: 0; + background-color: var(--primary-color); + background: linear-gradient( + 180deg, + var(--primary-color) 0%, + var(--secondary-color) 10.45%, + var(--tertiary-color) 41.35% + ); +} + +body::before { + content: ''; + width: 80vw; + height: 100vh; + position: absolute; + top: 0; + left: 10vw; + z-index: -1; + background: radial-gradient( + 50% 50% at 50% 50%, + var(--pure-white) 0%, + rgba(255, 255, 255, 0) 100% + ); + opacity: 0.05; +} + +#svelte { + min-height: 100vh; + display: flex; + flex-direction: column; +} + +h1, +h2, +p { + font-weight: 400; + color: var(--heading-color); +} + +p { + line-height: 1.5; +} + +a { + color: var(--accent-color); + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +h1 { + font-size: 2rem; + text-align: center; +} + +h2 { + font-size: 1rem; +} + +pre { + font-size: 16px; + font-family: var(--font-mono); + background-color: rgba(255, 255, 255, 0.45); + border-radius: 3px; + box-shadow: 2px 2px 6px rgb(255 255 255 / 25%); + padding: 0.5em; + overflow-x: auto; + color: var(--text-color); +} + +input, +button { + font-size: inherit; + font-family: inherit; +} + +button:focus:not(:focus-visible) { + outline: none; +} + +@media (min-width: 720px) { + h1 { + font-size: 2.4rem; + } +} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 7511bcf..b82b2cd 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -3,8 +3,11 @@ import { navigating } from '$app/stores'; import debounce from 'just-debounce-it'; import { Toy } from '@leveluptuts/svelte-toy'; + // import '@skeletonlabs/skeleton/themes/theme-crimson.css'; + // import '@skeletonlabs/skeleton/styles/skeleton.css'; + // import "../app.postcss"; import Analytics from '$lib/components/analytics.svelte'; - import Header from '$root/lib/components/header/index.svelte'; + import Header from '$lib/components/header/index.svelte'; import Footer from '$lib/components/footer.svelte'; import Loading from '$lib/components/loading.svelte'; import Transition from '$lib/components/transition/index.svelte'; @@ -15,11 +18,9 @@ import { gameStore } from '$lib/stores/gameSearchStore'; import { toast } from '$lib/components/toast/toast'; import Toast from '$lib/components/toast/Toast.svelte'; - import '$root/styles/styles.pcss'; + import '$styles/styles.pcss'; import 'iconify-icon'; - - import type { SavedGameType } from '$root/lib/types'; - + import type { SavedGameType } from '$lib/types'; $: { if ($navigating) { @@ -91,7 +92,7 @@
-
+
diff --git a/svelte.config.js b/svelte.config.js index 902a467..bbcb9b4 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -1,28 +1,33 @@ +import preprocess from 'svelte-preprocess'; import adapter from '@sveltejs/adapter-vercel'; import { vitePreprocess } from '@sveltejs/kit/vite'; /** @type {import('@sveltejs/kit').Config} */ const config = { - // Consult https://kit.svelte.dev/docs/integrations#preprocessors + // Consult https://kit.svelte.dev/docs/integrations#preprocessors // for more information about preprocessors - preprocess: [ - vitePreprocess({ - postcss: true, - }), - ], - kit: { - adapter: adapter(), - alias: { - $root: './src' - }, - }, - vitePlugin: { - experimental: { - inspector: { - toggleKeyCombo: 'control-alt-shift', - }, - }, - }, + preprocess: [ + vitePreprocess({ + postcss: true + }), + preprocess({ + postcss: true + }) + ], + kit: { + adapter: adapter(), + alias: { + $root: './src', + $styles: './src/styles', + } + }, + vitePlugin: { + experimental: { + inspector: { + toggleKeyCombo: 'control-alt-shift' + } + } + } }; export default config; diff --git a/tailwind.config.cjs b/tailwind.config.cjs new file mode 100644 index 0000000..84f617f --- /dev/null +++ b/tailwind.config.cjs @@ -0,0 +1,17 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + // 1. Apply the dark mode class setting: + darkMode: 'class', + content: [ + './src/**/*.{html,js,svelte,ts}', + // 2. Append the path for the Skeleton NPM package and files: + require('path').join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}') + ], + theme: { + extend: {} + }, + plugins: [ + // 3. Append the Skeleton plugin to the end of this list + ...require('@skeletonlabs/skeleton/tailwind/skeleton.cjs')() + ] +};