mirror of
https://github.com/BradNut/boredgame
synced 2025-09-08 17:40:22 +00:00
Manipulating logo on auth screen for different sizes.
This commit is contained in:
parent
229d84df40
commit
3997e4e49b
7 changed files with 351 additions and 278 deletions
26
package.json
26
package.json
|
|
@ -26,20 +26,20 @@
|
|||
"seed": "node --loader ts-node/esm prisma/seed.ts"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@melt-ui/pp": "^0.1.2",
|
||||
"@melt-ui/pp": "^0.1.4",
|
||||
"@playwright/test": "^1.37.0",
|
||||
"@resvg/resvg-js": "^2.4.1",
|
||||
"@sveltejs/adapter-auto": "^2.1.1",
|
||||
"@sveltejs/adapter-vercel": "^3.0.3",
|
||||
"@sveltejs/kit": "^1.27.2",
|
||||
"@sveltejs/kit": "^1.27.5",
|
||||
"@types/cookie": "^0.5.1",
|
||||
"@types/node": "^18.17.5",
|
||||
"@typescript-eslint/eslint-plugin": "^6.7.5",
|
||||
"@typescript-eslint/parser": "^6.7.5",
|
||||
"@typescript-eslint/eslint-plugin": "^6.10.0",
|
||||
"@typescript-eslint/parser": "^6.10.0",
|
||||
"autoprefixer": "^10.4.15",
|
||||
"eslint": "^8.47.0",
|
||||
"eslint-config-prettier": "^9.0.0",
|
||||
"eslint-plugin-svelte": "^2.32.4",
|
||||
"eslint-plugin-svelte": "^2.35.0",
|
||||
"just-clone": "^6.2.0",
|
||||
"just-debounce-it": "^3.2.0",
|
||||
"postcss": "^8.4.31",
|
||||
|
|
@ -47,18 +47,18 @@
|
|||
"postcss-load-config": "^4.0.1",
|
||||
"postcss-preset-env": "^9.3.0",
|
||||
"prettier": "^3.0.3",
|
||||
"prettier-plugin-svelte": "^3.0.3",
|
||||
"prettier-plugin-svelte": "^3.1.0",
|
||||
"prisma": "^5.3.1",
|
||||
"sass": "^1.65.1",
|
||||
"satori": "^0.10.4",
|
||||
"satori-html": "^0.3.2",
|
||||
"svelte": "^4.2.2",
|
||||
"svelte-check": "^3.5.2",
|
||||
"svelte-meta-tags": "^3.0.4",
|
||||
"svelte-preprocess": "^5.0.4",
|
||||
"svelte": "^4.2.3",
|
||||
"svelte-check": "^3.6.0",
|
||||
"svelte-meta-tags": "^3.1.0",
|
||||
"svelte-preprocess": "^5.1.0",
|
||||
"svelte-sequential-preprocessor": "^2.0.1",
|
||||
"sveltekit-flash-message": "^2.2.1",
|
||||
"sveltekit-superforms": "^1.9.0",
|
||||
"sveltekit-superforms": "^1.10.1",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"ts-node": "^10.9.1",
|
||||
"tslib": "^2.6.1",
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
"@melt-ui/svelte": "^0.57.3",
|
||||
"@paralleldrive/cuid2": "^2.2.2",
|
||||
"@prisma/client": "^5.3.1",
|
||||
"@sentry/sveltekit": "^7.77.0",
|
||||
"@sentry/sveltekit": "^7.80.0",
|
||||
"@types/feather-icons": "^4.29.1",
|
||||
"@vercel/og": "^0.5.13",
|
||||
"bits-ui": "^0.0.27",
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
"iconify-icon": "^1.0.8",
|
||||
"just-kebab-case": "^4.2.0",
|
||||
"loader": "^2.1.1",
|
||||
"lucia": "^2.7.2",
|
||||
"lucia": "^2.7.4",
|
||||
"lucide-svelte": "^0.256.1",
|
||||
"open-props": "^1.5.13",
|
||||
"radix-svelte": "^0.9.0",
|
||||
|
|
|
|||
471
pnpm-lock.yaml
471
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
|
|
@ -10,7 +10,7 @@ const config = {
|
|||
tailwindNesting(),
|
||||
tailwindcss(),
|
||||
postcssPresetEnv({
|
||||
stage: 2,
|
||||
stage: 3,
|
||||
features: {
|
||||
'nesting-rules': false,
|
||||
'custom-media-queries': true,
|
||||
|
|
|
|||
|
|
@ -16,8 +16,10 @@
|
|||
|
||||
<header>
|
||||
<div class="corner">
|
||||
<a href="/" title="Home">
|
||||
<a href="/" class="logo" title="Home">
|
||||
<div class="logo-image">
|
||||
<Logo />
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- <TextSearch /> -->
|
||||
|
|
@ -128,9 +130,9 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.corner img {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
.logo-image {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,12 @@
|
|||
</script>
|
||||
|
||||
<div class="container">
|
||||
<a href="/" class="auth-logo">
|
||||
<div class="logo-image">
|
||||
<Logo />
|
||||
</div>
|
||||
Bored Game
|
||||
</a>
|
||||
<Button
|
||||
href={$page.url.pathname === "/sign-up" ? "/login" : "/sign-up"}
|
||||
variant="ghost"
|
||||
|
|
@ -26,12 +32,6 @@
|
|||
background-image:
|
||||
url(https://images.unsplash.com/photo-1588591795084-1770cb3be374?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
|
||||
/>
|
||||
<a href="/" class="logo">
|
||||
<div class="logo-image">
|
||||
<Logo />
|
||||
</div>
|
||||
Bored Game
|
||||
</a>
|
||||
<div class="quote-wrapper">
|
||||
<blockquote class="quote">
|
||||
<p>
|
||||
|
|
@ -90,29 +90,6 @@
|
|||
background-size: cover;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
font-weight: 500;
|
||||
transition-property: color, background-color, border-color,text-decoration-color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
|
||||
&:hover {
|
||||
color: hsl(var(--muted-foreground));
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.quote-wrapper {
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
|
|
@ -151,4 +128,43 @@
|
|||
right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.auth-logo) {
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
font-weight: 500;
|
||||
transition-property: color, background-color, border-color,text-decoration-color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
|
||||
&:hover {
|
||||
color: hsl(var(--muted-foreground));
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
left: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -13,6 +13,7 @@
|
|||
import * as Collapsible from '$lib/components/ui/collapsible';
|
||||
import * as Alert from '$lib/components/ui/alert';
|
||||
import { boredState } from '$lib/stores/boredState.js';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let data;
|
||||
|
||||
|
|
@ -31,6 +32,8 @@
|
|||
delayMs: 0,
|
||||
});
|
||||
|
||||
let collapsibleOpen = true;
|
||||
|
||||
// const flash = flashModule.getFlash(page);
|
||||
|
||||
// $: {
|
||||
|
|
@ -40,6 +43,9 @@
|
|||
// });
|
||||
// }
|
||||
// }
|
||||
onMount(() => {
|
||||
collapsibleOpen = false;
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
|
@ -64,7 +70,7 @@
|
|||
{#if $errors.confirm_password}
|
||||
<p class="text-sm text-destructive">{$errors.confirm_password}</p>
|
||||
{/if}
|
||||
<Collapsible.Root class="grid w-full max-w-sm items-center gap-2.5">
|
||||
<Collapsible.Root bind:open={collapsibleOpen} class="grid w-full max-w-sm items-center gap-2.5">
|
||||
<div>
|
||||
Optional Fields:
|
||||
<Collapsible.Trigger asChild let:builder>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,11 @@ const config = {
|
|||
// for more information about preprocessors
|
||||
preprocess: sequence([vitePreprocess({}), preprocessMeltUI()]),
|
||||
vitePlugin: {
|
||||
inspector: true
|
||||
inspector: {
|
||||
toggleKeyCombo: 'control-alt-shift',
|
||||
showToggleButton: 'always',
|
||||
toggleButtonPos: 'bottom-right'
|
||||
}
|
||||
},
|
||||
kit: {
|
||||
adapter: adapter(),
|
||||
|
|
|
|||
Loading…
Reference in a new issue