Change viewport and update packages.

This commit is contained in:
Bradley Shellnut 2023-04-30 23:01:24 -07:00
parent fe0b128eb4
commit adf79b7528
3 changed files with 989 additions and 692 deletions

View file

@ -13,39 +13,39 @@
"format": "prettier --write --plugin-search-dir=. ." "format": "prettier --write --plugin-search-dir=. ."
}, },
"devDependencies": { "devDependencies": {
"@playwright/test": "^1.29.2", "@playwright/test": "^1.33.0",
"@rgossiaux/svelte-headlessui": "1.0.2", "@rgossiaux/svelte-headlessui": "1.0.2",
"@rgossiaux/svelte-heroicons": "^0.1.2", "@rgossiaux/svelte-heroicons": "^0.1.2",
"@sveltejs/adapter-auto": "^1.0.0", "@sveltejs/adapter-auto": "^1.0.3",
"@sveltejs/adapter-vercel": "^1.0.1", "@sveltejs/adapter-vercel": "^1.0.6",
"@sveltejs/kit": "^1.0.7", "@sveltejs/kit": "^1.15.9",
"@types/cookie": "^0.5.1", "@types/cookie": "^0.5.1",
"@types/node": "^18.11.18", "@types/node": "^18.16.3",
"@typescript-eslint/eslint-plugin": "^5.48.0", "@typescript-eslint/eslint-plugin": "^5.59.1",
"@typescript-eslint/parser": "^5.48.0", "@typescript-eslint/parser": "^5.59.1",
"autoprefixer": "^10.4.13", "autoprefixer": "^10.4.14",
"eslint": "^8.31.0", "eslint": "^8.39.0",
"eslint-config-prettier": "^8.6.0", "eslint-config-prettier": "^8.8.0",
"eslint-plugin-svelte3": "^4.0.0", "eslint-plugin-svelte3": "^4.0.0",
"just-clone": "^6.2.0", "just-clone": "^6.2.0",
"just-debounce-it": "^3.2.0", "just-debounce-it": "^3.2.0",
"postcss": "^8.4.21", "postcss": "^8.4.23",
"postcss-color-functional-notation": "^4.2.4", "postcss-color-functional-notation": "^4.2.4",
"postcss-custom-media": "^9.0.1", "postcss-custom-media": "^9.1.3",
"postcss-env-function": "^4.0.6", "postcss-env-function": "^4.0.6",
"postcss-import": "^15.1.0", "postcss-import": "^15.1.0",
"postcss-load-config": "^4.0.1", "postcss-load-config": "^4.0.1",
"postcss-media-minmax": "^5.0.0", "postcss-media-minmax": "^5.0.0",
"postcss-nested": "^6.0.0", "postcss-nested": "^6.0.1",
"prettier": "^2.8.2", "prettier": "^2.8.8",
"prettier-plugin-svelte": "^2.9.0", "prettier-plugin-svelte": "^2.10.0",
"sass": "^1.57.1", "sass": "^1.62.1",
"svelte": "^3.55.0", "svelte": "^3.58.0",
"svelte-check": "^2.10.3", "svelte-check": "^2.10.3",
"svelte-preprocess": "^4.10.7", "svelte-preprocess": "^4.10.7",
"tslib": "^2.4.1", "tslib": "^2.5.0",
"typescript": "^4.9.4", "typescript": "^4.9.5",
"vite": "^4.0.4", "vite": "^4.3.3",
"vitest": "^0.25.3" "vitest": "^0.25.3"
}, },
"type": "module", "type": "module",
@ -53,12 +53,12 @@
"@fontsource/fira-mono": "^4.5.10", "@fontsource/fira-mono": "^4.5.10",
"@leveluptuts/svelte-side-menu": "^1.0.5", "@leveluptuts/svelte-side-menu": "^1.0.5",
"@leveluptuts/svelte-toy": "^2.0.3", "@leveluptuts/svelte-toy": "^2.0.3",
"@lukeed/uuid": "^2.0.0", "@lukeed/uuid": "^2.0.1",
"@types/feather-icons": "^4.29.1", "@types/feather-icons": "^4.29.1",
"cookie": "^0.5.0", "cookie": "^0.5.0",
"feather-icons": "^4.29.0", "feather-icons": "^4.29.0",
"svelte-lazy-loader": "^1.0.0", "svelte-lazy-loader": "^1.0.0",
"zod": "^3.20.2", "zod": "^3.21.4",
"zod-to-json-schema": "^3.20.1" "zod-to-json-schema": "^3.21.0"
} }
} }

File diff suppressed because it is too large Load diff

View file

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