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

76
src/routes/+page.svelte
View file

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