laratheprotogen/sveltekit-bsky-handles
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

css is fucking boring man

Browse source
This commit is contained in:
Lara 2025-04-22 14:19:15 +03:00
parent 2d344ce95a
commit 56407d7ca0
Signed by: laratheprotogen
GPG key ID: 5C0296EB3165F98B
1 changed files with 46 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/routes/+page.svelte
View file

@ -6,19 +6,25 @@
let {data}: PageProps = $props();
</script>
<section class="w-80">
<section class="w-[22rem]">
<h1 class="text-2xl font-bold">Get your own {PUBLIC_URL} handle</h1>
<p class="mt-4">
Get your own {PUBLIC_URL} handle with {Math.max(0, data.count - 1)} other users
</p>
<form method="post" action="?/handle" use:enhance class="flex flex-col pt-8">
<label>
Current Username
<input name="username" />
<form method="post" action="?/handle" use:enhance class="flex flex-col pt-4">
<label class="flex flex-col items-start">
<span class="input-label">Username</span>
<div class="flex items-center w-full">
<input name="username-old" class="flex-grow"/>
<span class="static-text">.bsky.social</span>
</div>
</label>
<label>
New Username
<input type="password" name="password" />
<label class="flex flex-col items-start">
<span class="input-label">New Username</span>
<div class="flex items-center w-full">
<input name="username-new" class="flex-grow"/>
<span class="static-text">.{PUBLIC_URL}</span>
</div>
</label>
<button class="cursor-pointer">Submit</button>
</form>
@ -27,11 +33,21 @@
<style lang="postcss">
@reference "tailwindcss";
label {
@apply flex flex-col text-left text-xl;
@apply mb-4 flex flex-col text-left text-xl;
}
.input-label {
@apply mb-1 text-sm font-medium text-neutral-300;
}
input {
@apply my-4 rounded-lg bg-neutral-950/50 p-2 outline outline-zinc-700 transition hover:outline-2 hover:outline-sky-500;
@apply w-2/3 rounded-l-lg bg-neutral-950/50 p-2 outline outline-zinc-700 transition hover:outline-2 hover:outline-sky-500;
}
.static-text {
@apply rounded-r-lg border-l border-zinc-700 bg-neutral-950/50 p-2 text-left;
}
button {
@apply my-4 rounded-lg bg-neutral-950/50 p-2 outline outline-zinc-700 transition hover:outline-2 hover:outline-sky-500;
}