mirror of
https://github.com/BradNut/boredgame
synced 2025-09-08 17:40:22 +00:00
More testing with other's themes.
This commit is contained in:
Bradley Shellnut
parent
4f03b02082
commit
756adf502c
6 changed files with 1829 additions and 5992 deletions
6184
package-lock.json
generated
6184
package-lock.json
generated
File diff suppressed because it is too large
Load diff
26
package.json
26
package.json
|
|
@ -12,33 +12,33 @@
|
|||
"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.22.0",
|
||||
"@playwright/test": "^1.22.2",
|
||||
"@rgossiaux/svelte-headlessui": "1.0.0-beta.12",
|
||||
"@sveltejs/adapter-auto": "1.0.0-next.42",
|
||||
"@sveltejs/kit": "1.0.0-next.326",
|
||||
"@sveltejs/adapter-auto": "next",
|
||||
"@sveltejs/kit": "next",
|
||||
"@types/cookie": "^0.5.1",
|
||||
"@types/node": "^17.0.34",
|
||||
"@typescript-eslint/eslint-plugin": "^5.24.0",
|
||||
"@typescript-eslint/parser": "^5.24.0",
|
||||
"@types/node": "^17.0.41",
|
||||
"@typescript-eslint/eslint-plugin": "^5.27.1",
|
||||
"@typescript-eslint/parser": "^5.27.1",
|
||||
"carbon-components-svelte": "^0.63.8",
|
||||
"carbon-icons-svelte": "^11.0.1",
|
||||
"eslint": "^8.15.0",
|
||||
"carbon-icons-svelte": "^11.1.0",
|
||||
"eslint": "^8.17.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-svelte3": "^3.4.1",
|
||||
"prettier": "^2.6.2",
|
||||
"prettier-plugin-svelte": "^2.7.0",
|
||||
"sass": "^1.51.0",
|
||||
"sass": "^1.52.3",
|
||||
"svelte": "^3.48.0",
|
||||
"svelte-check": "^2.7.1",
|
||||
"svelte-preprocess": "^4.10.6",
|
||||
"svelte-check": "^2.7.2",
|
||||
"svelte-preprocess": "^4.10.7",
|
||||
"tslib": "^2.4.0",
|
||||
"typescript": "^4.6.4"
|
||||
"typescript": "^4.7.3"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@fontsource/fira-mono": "^4.5.8",
|
||||
"@lukeed/uuid": "^2.0.0",
|
||||
"cookie": "^0.5.0",
|
||||
"zod": "^3.16.0"
|
||||
"zod": "^3.17.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
1256
pnpm-lock.yaml
1256
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
|
|
@ -11,9 +11,10 @@
|
|||
const themes = {
|
||||
'🌛 Night': { name: '🌛 Night' },
|
||||
'☀️ Daylight': { name: '☀️ Daylight' },
|
||||
'😎 Synthwave': { name: '😎 Synthwave' }
|
||||
};
|
||||
|
||||
'🐺 Night Howl': { name: '🐺 Night Howl' },
|
||||
'🧠 Night Mind': { name: '🧠 Night Mind' },
|
||||
}
|
||||
|
||||
let selectedTheme = getTheme() ?? themes['🌛 Night'];
|
||||
|
||||
function getTheme() {
|
||||
|
|
@ -59,8 +60,6 @@
|
|||
</script>
|
||||
|
||||
<div class="theme">
|
||||
<span>Theme</span>
|
||||
|
||||
<div class="listbox">
|
||||
<Listbox value={selectedTheme} on:change={handleChange} let:open>
|
||||
<ListboxButton class="button">
|
||||
|
|
|
|||
|
|
@ -36,12 +36,12 @@
|
|||
<Toggle />
|
||||
</div>
|
||||
<div><Themes /></div>
|
||||
<ul>
|
||||
<!-- <ul>
|
||||
<li class:active={$page.url.pathname === '/'}><a sveltekit:prefetch href="/">Home</a></li>
|
||||
<li class:active={$page.url.pathname === '/about'}>
|
||||
<a sveltekit:prefetch href="/about">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
</ul> -->
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,67 +1,283 @@
|
|||
html[data-theme='🌛 Night'] {
|
||||
/* Global */
|
||||
--clr-primary: hsl(173 100% 66%);
|
||||
--clr-txt: hsl(0 0% 98%);
|
||||
--clr-bg: hsl(210 7% 11%);
|
||||
|
||||
--bg: radial-gradient(hsl(173 100% 4%), var(--clr-bg));
|
||||
--bg-opacity: 0.7;
|
||||
|
||||
/* Menu */
|
||||
--clr-menu-text: hsl(0 0% 78%);
|
||||
--clr-menu-bg: linear-gradient(180deg,
|
||||
/* Global */
|
||||
--clr-primary: hsl(173 100% 66%);
|
||||
--clr-txt: hsl(0 0% 98%);
|
||||
--clr-bg: hsl(210 7% 11%);
|
||||
|
||||
--bg: radial-gradient(hsl(173 100% 4%), var(--clr-bg));
|
||||
--bg-opacity: 0.7;
|
||||
|
||||
/* Menu */
|
||||
--clr-menu-text: hsl(0 0% 78%);
|
||||
--clr-menu-bg: linear-gradient(
|
||||
180deg,
|
||||
hsl(180 7% 14%) 0%,
|
||||
hsl(216 7% 14%) 100%);
|
||||
--clr-menu-arrow-bg: hsl(180 7% 14%);
|
||||
--clr-menu-border: hsl(0 0% 19%);
|
||||
|
||||
--clr-theme-txt: hsl(177 100% 15%);
|
||||
--clr-theme-active: hsl(177 100% 80%);
|
||||
--clr-switch-on-bg: hsl(0 0% 24%);
|
||||
--clr-switch-off-bg: hsl(0 0% 10%);
|
||||
|
||||
/* Hero */
|
||||
--clr-hero-txt: hsl(174 27% 73%);
|
||||
--clr-hero-bg: linear-gradient(270deg,
|
||||
hsl(216 7% 14%) 100%
|
||||
);
|
||||
--clr-menu-arrow-bg: hsl(180 7% 14%);
|
||||
--clr-menu-border: hsl(0 0% 19%);
|
||||
|
||||
--clr-theme-txt: hsl(177 100% 15%);
|
||||
--clr-theme-active: hsl(177 100% 80%);
|
||||
--clr-switch-on-bg: hsl(0 0% 24%);
|
||||
--clr-switch-off-bg: hsl(0 0% 10%);
|
||||
|
||||
/* Hero */
|
||||
--clr-hero-txt: hsl(174 27% 73%);
|
||||
--clr-hero-bg: linear-gradient(
|
||||
270deg,
|
||||
hsl(210 15% 13%) 43%,
|
||||
hsl(176 19% 15%) 66%);
|
||||
--clr-hero-divider-bg: hsl(0 0% 21%);
|
||||
--clr-input-txt: hsl(177 100% 15%);
|
||||
--clr-input-bg: hsl(210 13% 24%);
|
||||
--clr-input-placeholder-txt: hsl(210 13% 50%);
|
||||
--clr-input-border: hsl(0 0% 21%);
|
||||
|
||||
/* Card */
|
||||
--clr-card-bg: linear-gradient(180deg,
|
||||
hsl(176 19% 15%) 66%
|
||||
);
|
||||
--clr-hero-divider-bg: hsl(0 0% 21%);
|
||||
--clr-input-txt: hsl(177 100% 15%);
|
||||
--clr-input-bg: hsl(210 13% 24%);
|
||||
--clr-input-placeholder-txt: hsl(210 13% 50%);
|
||||
--clr-input-border: hsl(0 0% 21%);
|
||||
|
||||
/* Card */
|
||||
--clr-card-bg: linear-gradient(
|
||||
180deg,
|
||||
hsl(180 7% 14%) 0%,
|
||||
hsl(216 7% 14%) 100%);
|
||||
--clr-card-txt: hsl(0 0% 78%);
|
||||
|
||||
/* Link */
|
||||
--clr-link-txt: hsl(0 100% 98%);
|
||||
--clr-link-background: hsl(0 0% 4%);
|
||||
|
||||
/* Footer */
|
||||
--clr-footer-txt: hsl(0 0% 78%);
|
||||
--clr-footer-bg: hsl(210 5% 7%);
|
||||
|
||||
/* Post */
|
||||
--post-overlay-bg: radial-gradient(hsl(173 100% 4% / 80%), var(--clr-bg));
|
||||
--post-blockquote-txt: hsl(173 100% 94%);
|
||||
--post-blockquote-bg: hsl(173 60% 4%);
|
||||
--post-blockquote-border: hsl(173 10% 10%);
|
||||
|
||||
--clr-code-bg: hsl(173 60% 4%);
|
||||
--clr-code-title: hsl(173 100% 94%);
|
||||
--clr-code-border: hsl(173 10% 10%);
|
||||
--clr-code-line-number: hsl(173 20% 20%);
|
||||
--clr-code-line-highlight: hsl(173 40% 8%);
|
||||
--clr-code-inline-txt: hsl(173 100% 94%);
|
||||
--clr-code-inline-bg: hsl(173 60% 4%);
|
||||
|
||||
--clr-token-1: hsl(173 100% 66%);
|
||||
--clr-token-2: hsl(180 60% 80%);
|
||||
--clr-token-3: hsl(173 100% 66%);
|
||||
--clr-token-4: hsl(0 0% 98%);
|
||||
--clr-token-5: hsl(173 10% 60%);
|
||||
}
|
||||
hsl(216 7% 14%) 100%
|
||||
);
|
||||
--clr-card-txt: hsl(0 0% 78%);
|
||||
|
||||
/* Link */
|
||||
--clr-link-txt: hsl(0 100% 98%);
|
||||
--clr-link-background: hsl(0 0% 4%);
|
||||
|
||||
/* Footer */
|
||||
--clr-footer-txt: hsl(0 0% 78%);
|
||||
--clr-footer-bg: hsl(210 5% 7%);
|
||||
|
||||
/* Post */
|
||||
--post-overlay-bg: radial-gradient(hsl(173 100% 4% / 80%), var(--clr-bg));
|
||||
--post-blockquote-txt: hsl(173 100% 94%);
|
||||
--post-blockquote-bg: hsl(173 60% 4%);
|
||||
--post-blockquote-border: hsl(173 10% 10%);
|
||||
|
||||
--clr-code-bg: hsl(173 60% 4%);
|
||||
--clr-code-title: hsl(173 100% 94%);
|
||||
--clr-code-border: hsl(173 10% 10%);
|
||||
--clr-code-line-number: hsl(173 20% 20%);
|
||||
--clr-code-line-highlight: hsl(173 40% 8%);
|
||||
--clr-code-inline-txt: hsl(173 100% 94%);
|
||||
--clr-code-inline-bg: hsl(173 60% 4%);
|
||||
|
||||
--clr-token-1: hsl(173 100% 66%);
|
||||
--clr-token-2: hsl(180 60% 80%);
|
||||
--clr-token-3: hsl(173 100% 66%);
|
||||
--clr-token-4: hsl(0 0% 98%);
|
||||
--clr-token-5: hsl(173 10% 60%);
|
||||
}
|
||||
|
||||
html[data-theme='☀️ Daylight'] {
|
||||
/* Global */
|
||||
--clr-primary: hsl(220 100% 50%);
|
||||
--clr-txt: hsl(220 10% 10%);
|
||||
--clr-bg: hsl(0 0% 98%);
|
||||
|
||||
--bg: radial-gradient(hsl(0 0% 98%), var(--clr-bg));
|
||||
--bg-opacity: 0.7;
|
||||
|
||||
/* Menu */
|
||||
--clr-menu-text: hsl(220 10% 10%);
|
||||
--clr-menu-bg: linear-gradient(180deg, hsl(0 0% 98%) 0%, hsl(0 0% 94%) 100%);
|
||||
--clr-menu-arrow-bg: hsl(0 0% 98%);
|
||||
--clr-menu-border: hsl(0 0% 80%);
|
||||
|
||||
--clr-theme-txt: hsl(0 0% 98%);
|
||||
--clr-theme-active: hsl(220 100% 60%);
|
||||
--clr-switch-on-bg: hsl(220 40% 90%);
|
||||
--clr-switch-off-bg: hsl(220 40% 80%);
|
||||
|
||||
/* Hero */
|
||||
--clr-hero-txt: hsl(220 10% 40%);
|
||||
--clr-hero-bg: linear-gradient(270deg, hsl(0 0% 94%) 43%, hsl(0 0% 98%) 66%);
|
||||
--clr-hero-divider-bg: hsl(0 0% 80%);
|
||||
--clr-input-txt: hsl(220 10% 98%);
|
||||
--clr-input-bg: hsl(0 0% 98%);
|
||||
--clr-input-placeholder-txt: hsl(220 10% 60%);
|
||||
--clr-input-border: hsl(0 0% 80%);
|
||||
|
||||
/* Card */
|
||||
--clr-card-bg: linear-gradient(180deg, hsl(0 0% 98%) 0%, hsl(0 0% 94%) 100%);
|
||||
--clr-card-txt: hsl(220 10% 40%);
|
||||
|
||||
/* Link */
|
||||
--clr-link-txt: hsl(220 10% 10%);
|
||||
--clr-link-background: hsl(0 0% 100%);
|
||||
|
||||
/* Footer */
|
||||
--clr-footer-txt: hsl(220 10% 10%);
|
||||
--clr-footer-bg: hsl(0 0% 98%);
|
||||
|
||||
/* Post */
|
||||
--post-overlay-bg: radial-gradient(hsl(0 0% 100% / 60%), var(--clr-bg));
|
||||
--post-blockquote-txt: hsl(0 0% 40%);
|
||||
--post-blockquote-bg: hsl(0 0% 98%);
|
||||
--post-blockquote-border: hsl(0 0% 84%);
|
||||
|
||||
--clr-code-bg: hsl(0 0% 98%);
|
||||
--clr-code-title: hsl(0 0% 40%);
|
||||
--clr-code-border: hsl(0 0% 84%);
|
||||
--clr-code-line-number: hsl(0 0% 60%);
|
||||
--clr-code-line-highlight: hsl(0 0% 94%);
|
||||
--clr-code-inline-txt: hsl(0 0% 98%);
|
||||
--clr-code-inline-bg: hsl(0 0% 20%);
|
||||
|
||||
--clr-token-1: hsl(220 100% 50%);
|
||||
--clr-token-2: hsl(220 60% 50%);
|
||||
--clr-token-3: hsl(220 100% 50%);
|
||||
--clr-token-4: hsl(0 0% 20%);
|
||||
--clr-token-5: hsl(0 0% 60%);
|
||||
}
|
||||
|
||||
html[data-theme='🐺 Night Howl'] {
|
||||
/* Global */
|
||||
--clr-primary: hsl(207 100% 94%);
|
||||
--clr-txt: hsl(210 40% 80%);
|
||||
--clr-bg: hsl(210 47% 12%);
|
||||
|
||||
--bg: radial-gradient(hsl(206 50% 11%), var(--clr-bg));
|
||||
--bg-opacity: 0.7;
|
||||
|
||||
/* Menu */
|
||||
--clr-menu-text: hsl(210 40% 80%);
|
||||
--clr-menu-bg: linear-gradient(
|
||||
180deg,
|
||||
hsl(210 47% 14%) 0%,
|
||||
hsl(210 47% 12%) 100%
|
||||
);
|
||||
--clr-menu-arrow-bg: hsl(210 47% 14%);
|
||||
--clr-menu-border: hsl(210 40% 20%);
|
||||
|
||||
--clr-theme-txt: hsl(210 40% 20%);
|
||||
--clr-theme-active: hsl(210 40% 80%);
|
||||
--clr-switch-on-bg: hsl(210 40% 60%);
|
||||
--clr-switch-off-bg: hsl(210 40% 20%);
|
||||
|
||||
/* Hero */
|
||||
--clr-hero-txt: hsl(210 40% 60%);
|
||||
--clr-hero-bg: linear-gradient(
|
||||
270deg,
|
||||
hsl(210 47% 12%) 43%,
|
||||
hsl(210 47% 14%) 66%
|
||||
);
|
||||
--clr-hero-divider-bg: hsl(210 40% 20%);
|
||||
--clr-input-txt: hsl(210 40% 20%);
|
||||
--clr-input-bg: hsl(210 40% 16%);
|
||||
--clr-input-placeholder-txt: hsl(210 40% 60%);
|
||||
--clr-input-border: hsl(210 40% 20%);
|
||||
|
||||
/* Card */
|
||||
--clr-card-bg: linear-gradient(
|
||||
180deg,
|
||||
hsl(210 47% 14%) 0%,
|
||||
hsl(210 47% 12%) 100%
|
||||
);
|
||||
--clr-card-txt: hsl(210 40% 60%);
|
||||
|
||||
/* Link */
|
||||
--clr-link-txt: hsl(210 40% 80%);
|
||||
--clr-link-background: hsl(210 40% 4%);
|
||||
|
||||
/* Footer */
|
||||
--clr-footer-txt: hsl(210 40% 80%);
|
||||
--clr-footer-bg: hsl(210 47% 12%);
|
||||
|
||||
/* Post */
|
||||
--post-overlay-bg: radial-gradient(hsl(206 50% 11% / 60%), var(--clr-bg));
|
||||
--post-blockquote-txt: hsl(210 47% 80%);
|
||||
--post-blockquote-bg: hsl(210 47% 14%);
|
||||
--post-blockquote-border: hsl(210 40% 20%);
|
||||
|
||||
--clr-code-bg: hsl(210 47% 14%);
|
||||
--clr-code-title: hsl(210 40% 60%);
|
||||
--clr-code-border: hsl(210 40% 20%);
|
||||
--clr-code-line-number: hsl(210 40% 40%);
|
||||
--clr-code-line-highlight: hsl(210 40% 16%);
|
||||
--clr-code-inline-txt: hsl(210 47% 98%);
|
||||
--clr-code-inline-bg: hsl(210 47% 10%);
|
||||
|
||||
--clr-token-1: hsl(180 100% 43%);
|
||||
--clr-token-2: hsl(197 100% 49%);
|
||||
--clr-token-3: hsl(180 100% 43%);
|
||||
--clr-token-4: hsl(206 50% 98%);
|
||||
--clr-token-5: hsl(217 10% 64%);
|
||||
}
|
||||
|
||||
html[data-theme='🧠 Night Mind'] {
|
||||
/* Global */
|
||||
--clr-primary: hsl(9 100% 84%);
|
||||
--clr-txt: hsl(265 28% 98%);
|
||||
--clr-bg: hsl(265 28% 10%);
|
||||
|
||||
--bg: radial-gradient(hsl(265 28% 20%), var(--clr-bg));
|
||||
--bg-opacity: 0.7;
|
||||
|
||||
/* Menu */
|
||||
--clr-menu-text: hsl(265 28% 98%);
|
||||
--clr-menu-bg: linear-gradient(
|
||||
180deg,
|
||||
hsl(265 28% 20%) 0%,
|
||||
hsl(265 28% 18%) 100%
|
||||
);
|
||||
--clr-menu-arrow-bg: hsl(265 28% 20%);
|
||||
--clr-menu-border: hsl(265 28% 24%);
|
||||
|
||||
--clr-theme-txt: hsl(265 28% 20%);
|
||||
--clr-theme-active: hsl(9 100% 90%);
|
||||
--clr-switch-on-bg: hsl(265 28% 30%);
|
||||
--clr-switch-off-bg: hsl(265 28% 24%);
|
||||
|
||||
/* Hero */
|
||||
--clr-hero-txt: hsl(265 28% 80%);
|
||||
--clr-hero-bg: linear-gradient(
|
||||
270deg,
|
||||
hsl(265 28% 20%) 43%,
|
||||
hsl(265 28% 24%) 66%
|
||||
);
|
||||
--clr-hero-divider-bg: hsl(265 28% 24%);
|
||||
--clr-input-txt: hsl(265 28% 20%);
|
||||
--clr-input-bg: hsl(265 28% 24%);
|
||||
--clr-input-placeholder-txt: hsl(265 28% 80%);
|
||||
--clr-input-border: hsl(265 28% 26%);
|
||||
|
||||
/* Card */
|
||||
--clr-card-bg: linear-gradient(
|
||||
180deg,
|
||||
hsl(265 28% 22%) 0%,
|
||||
hsl(265 28% 20%) 100%
|
||||
);
|
||||
--clr-card-txt: hsl(265 28% 80%);
|
||||
|
||||
/* Link */
|
||||
--clr-link-txt: hsl(265 28% 98%);
|
||||
--clr-link-background: hsl(210 40% 4%);
|
||||
|
||||
/* Footer */
|
||||
--clr-footer-txt: hsl(265 28% 98%);
|
||||
--clr-footer-bg: hsl(265 28% 10%);
|
||||
|
||||
/* Post */
|
||||
--post-overlay-bg: radial-gradient(hsl(265 28% 20% / 60%), var(--clr-bg));
|
||||
--post-blockquote-txt: hsl(265 28% 90%);
|
||||
--post-blockquote-bg: hsl(265 28% 10%);
|
||||
--post-blockquote-border: hsl(265 28% 18%);
|
||||
|
||||
--clr-code-bg: hsl(265 28% 10%);
|
||||
--clr-code-title: hsl(265 28% 80%);
|
||||
--clr-code-border: hsl(265 28% 18%);
|
||||
--clr-code-line-number: hsl(265 20% 34%);
|
||||
--clr-code-line-highlight: hsl(265 28% 14%);
|
||||
--clr-code-inline-txt: hsl(265 28% 98%);
|
||||
--clr-code-inline-bg: hsl(265 28% 10%);
|
||||
|
||||
--clr-token-1: hsl(238 80% 80%);
|
||||
--clr-token-2: hsl(205 80% 80%);
|
||||
--clr-token-3: hsl(358 80% 80%);
|
||||
--clr-token-4: hsl(256 80% 98%);
|
||||
--clr-token-5: hsl(265 10% 60%);
|
||||
}
|
||||
Loading…
Reference in a new issue