Skip to content

Commit

Permalink
Upgrade tailwind and bits-ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@adriandelgado
adriandelgado committed Feb 17, 2025
1 parent 88aaa7b commit 5695d29
Show file tree
Hide file tree
Showing 17 changed files with 542 additions and 774 deletions.
43 changes: 21 additions & 22 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,37 +13,36 @@
"format": "prettier --write ."
},
"devDependencies": {
"@eslint/compat": "^1.2.4",
"@sveltejs/adapter-cloudflare": "^5.0.0",
"@sveltejs/kit": "^2.15.2",
"@eslint/compat": "^1.2.6",
"@sveltejs/adapter-cloudflare": "^5.0.3",
"@sveltejs/kit": "^2.17.2",
"@sveltejs/vite-plugin-svelte": "^5.0.3",
"@tailwindcss/forms": "^0.5.10",
"@tailwindcss/typography": "^0.5.16",
"autoprefixer": "^10.4.20",
"eslint": "^9.17.0",
"eslint-config-prettier": "^9.1.0",
"@tailwindcss/vite": "^4.0.6",
"eslint": "^9.20.1",
"eslint-config-prettier": "^10.0.1",
"eslint-plugin-svelte": "^2.46.1",
"globals": "^15.14.0",
"postcss": "^8.4.49",
"prettier": "^3.4.2",
"prettier-plugin-svelte": "^3.3.2",
"prettier-plugin-tailwindcss": "^0.6.9",
"svelte": "^5.16.5",
"svelte-check": "^4.1.1",
"sveltekit-superforms": "^2.22.1",
"tailwindcss": "^3.4.17",
"typescript": "^5.7.2",
"typescript-eslint": "^8.19.1",
"vite": "^6.0.7"
"globals": "^15.15.0",
"prettier": "^3.5.1",
"prettier-plugin-svelte": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.11",
"svelte": "^5.20.1",
"svelte-check": "^4.1.4",
"sveltekit-superforms": "^2.23.1",
"tailwindcss": "^4.0.6",
"typescript": "^5.7.3",
"typescript-eslint": "^8.24.1",
"vite": "^6.1.0"
},
"dependencies": {
"@fontsource-variable/fira-code": "^5.1.1",
"bits-ui": "^0.22.0",
"bits-ui": "^1.2.1",
"date-fns": "^4.1.0",
"formsnap": "^2.0.0",
"lucide-svelte": "^0.469.0",
"tailwind-merge": "^2.6.0",
"valibot": "1.0.0-beta.11"
"lucide-svelte": "^0.475.0",
"tailwind-merge": "^3.0.1",
"valibot": "1.0.0-rc.1"
},
"packageManager": "[email protected]"
}
1,083 changes: 428 additions & 655 deletions pnpm-lock.yaml
View file

Large diffs are not rendered by default.

6 changes: 0 additions & 6 deletions postcss.config.js
View file

This file was deleted.

15 changes: 12 additions & 3 deletions src/app.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "tailwindcss";

@plugin '@tailwindcss/forms' {
strategy: "class";
}
@plugin '@tailwindcss/typography';

@theme {
--font-fira:
Fira Code Variable, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
}

@layer base {
@font-face {
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/card.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
</div>
<a
href={route}
class="inline-block w-fit justify-self-end rounded-full bg-lime-500 px-3 py-1 text-sm font-semibold text-gray-900 shadow-sm hover:bg-lime-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-lime-500"
class="inline-block w-fit justify-self-end rounded-full bg-lime-500 px-3 py-1 text-sm font-semibold text-gray-900 shadow-xs hover:bg-lime-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-lime-500"
>
Ver más
</a>
Expand Down
8 changes: 4 additions & 4 deletions src/lib/components/layout/footer.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,13 +45,13 @@
id="email-address"
autocomplete="email"
required
class="form-input w-full min-w-0 rounded-md bg-white/5 py-1.5 outline outline-1 -outline-offset-1 outline-white/10 placeholder:text-gray-500 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-lime-600 sm:w-64 sm:text-sm/6 xl:w-full"
class="form-input w-full min-w-0 rounded-md bg-white/5 py-1.5 outline-1 -outline-offset-1 outline-white/10 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-lime-600 sm:w-64 sm:text-sm/6 xl:w-full"
placeholder="Enter your email"
/>
<div class="mt-4 sm:ml-4 sm:mt-0 sm:shrink-0">
<div class="mt-4 sm:mt-0 sm:ml-4 sm:shrink-0">
<button
type="submit"
class="flex w-full items-center justify-center rounded-md bg-lime-600 px-3 py-2 text-sm font-semibold shadow-sm hover:bg-lime-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-lime-600"
class="flex w-full items-center justify-center rounded-md bg-lime-600 px-3 py-2 text-sm font-semibold shadow-xs hover:bg-lime-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-lime-600"
>
Subscribe
</button>
Expand All @@ -60,7 +60,7 @@
</div>
</div>
<div
class="lg:mt-18 mt-12 border-t border-white/10 pt-8 sm:mt-14 sm:flex sm:items-center sm:justify-between"
class="mt-12 border-t border-white/10 pt-8 sm:mt-14 sm:flex sm:items-center sm:justify-between lg:mt-18"
>
<div class="flex gap-x-6 sm:order-2">
<a
Expand Down
93 changes: 51 additions & 42 deletions src/lib/components/layout/navbar.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
</script>

<header>
<Dialog.Root preventScroll={false} bind:open={menu_open}>
<Dialog.Root bind:open={menu_open}>
<CenterContainer tag="nav" class="flex items-center justify-between py-6">
<a href="/" class="-m-1.5 p-1.5">
<img src={gecko_code} alt="Logo de Kokoa" width="69.84" height="32" class="h-8 w-auto" />
Expand All @@ -47,51 +47,60 @@
{/each}
</div>
</CenterContainer>
<Dialog.Portal class="lg:hidden">
<Dialog.Overlay
transition={fade}
transitionConfig={{ duration: 150 }}
class="fixed inset-0 z-10 bg-gray-900/80"
/>
<!-- class="lg:hidden" -->
<Dialog.Portal>
<Dialog.Overlay forceMount class="fixed inset-0 z-10 bg-gray-900/80">
{#snippet child({ props, open })}
{#if open}
<div {...props} transition:fade={{ duration: 150 }}></div>
{/if}
{/snippet}
</Dialog.Overlay>

<Dialog.Content
transition={fly}
transitionConfig={{ x: 100, duration: 150 }}
preventScroll={false}
forceMount
class="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-black px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10"
>
<div class="flex items-center justify-between">
<a href="/" class="-m-1.5 p-1.5" onclick={() => (menu_open = false)}>
<img
src={gecko_code}
alt="Logo de Kokoa"
width="69.84"
height="32"
class="h-8 w-auto"
/>
</a>
<Dialog.Close class="-m-2.5 rounded-md p-2.5 text-gray-50">
<span class="sr-only">Cerrar menú</span>
<X />
</Dialog.Close>
</div>
<div class="mt-6 flow-root">
<div class="-my-6 space-y-2 py-6">
{#each LINKS as link}
<a
href={link.href}
class={[
"-mx-3 block rounded-lg px-3 py-2 font-fira text-base/7 font-semibold text-gray-100 before:content-['{'] after:content-['}'] hover:bg-gray-900",
current_path === link.href
? "before:text-lime-500 after:text-lime-500"
: "before:text-transparent after:text-transparent",
]}
onclick={() => (menu_open = false)}
>
{link.text}
</a>
{/each}
</div>
</div>
{#snippet child({ props, open })}
{#if open}
<div {...props} transition:fly={{ x: 100, duration: 150 }}>
<div class="flex items-center justify-between">
<a href="/" class="-m-1.5 p-1.5" onclick={() => (menu_open = false)}>
<img
src={gecko_code}
alt="Logo de Kokoa"
width="69.84"
height="32"
class="h-8 w-auto"
/>
</a>
<Dialog.Close class="-m-2.5 rounded-md p-2.5 text-gray-50">
<span class="sr-only">Cerrar menú</span>
<X />
</Dialog.Close>
</div>
<div class="mt-6 flow-root">
<div class="-my-6 space-y-2 py-6">
{#each LINKS as link}
<a
href={link.href}
class={[
"font-fira -mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-100 before:content-['{'] after:content-['}'] hover:bg-gray-900",
current_path === link.href
? "before:text-lime-500 after:text-lime-500"
: "before:text-transparent after:text-transparent",
]}
onclick={() => (menu_open = false)}
>
{link.text}
</a>
{/each}
</div>
</div>
</div>
{/if}
{/snippet}
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/tag.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
</script>

<span
class="rounded-full border border-lime-500 bg-neutral-800 px-6 font-fira text-xs font-bold text-gray-50"
class="font-fira rounded-full border border-lime-500 bg-neutral-800 px-6 text-xs font-bold text-gray-50"
>
{category}
</span>
4 changes: 2 additions & 2 deletions src/routes/(heading)/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
let { children } = $props();
</script>

<div class="bg-gradient-to-r from-lime-600 to-lime-400">
<div class="bg-linear-to-r/oklch from-lime-600 to-lime-400">
<CenterContainer class="relative py-10 sm:py-12">
<h1 class="flex text-3xl font-bold uppercase text-gray-950 sm:px-10 sm:text-4xl">
<h1 class="flex text-3xl font-bold text-gray-950 uppercase sm:px-10 sm:text-4xl">
{page.data.title}
<span class="ml-auto w-24 sm:w-56"></span>
</h1>
Expand Down
2 changes: 1 addition & 1 deletion src/routes/(heading)/contact/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<p class="font-fira font-medium">
Mantente al día con todas nuestras novedades, proyectos y eventos especiales. Síguenos en:
</p>
<ul class="mt-7 flex flex-col gap-y-3 font-fira">
<ul class="font-fira mt-7 flex flex-col gap-y-3">
<li>
<a
class="grid grid-cols-[36px_minmax(0px,1fr)] items-center gap-x-3"
Expand Down
4 changes: 2 additions & 2 deletions src/routes/(heading)/members/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

<CenterContainer class="flex flex-col gap-y-16 py-12">
<section>
<h2 class="text-center font-fira text-3xl font-medium">Directiva</h2>
<h2 class="font-fira text-center text-3xl font-medium">Directiva</h2>
<ul
role="list"
class="mx-auto mt-10 grid grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3"
Expand All @@ -18,7 +18,7 @@
</ul>
</section>
<section>
<h2 class="text-center font-fira text-3xl font-medium">Miembros</h2>
<h2 class="font-fira text-center text-3xl font-medium">Miembros</h2>
<ul
role="list"
class="mx-auto mt-10 grid grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3"
Expand Down
10 changes: 5 additions & 5 deletions src/routes/(heading)/projects/[id=number]/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

{#snippet subtitle(text: string)}
<h2 class="mt-4 flex items-center gap-1 text-3xl font-bold">
<span aria-hidden="true" class="italic text-lime-400">#</span>
<span aria-hidden="true" class="text-lime-400 italic">#</span>
{text}
</h2>
{/snippet}
Expand All @@ -33,7 +33,7 @@
</ul>
</section>
<section class="mt-8 rounded-2xl bg-gray-800 p-8">
<div class="flex flex-wrap items-center gap-1 font-fira">
<div class="font-fira flex flex-wrap items-center gap-1">
<span class="text-lime-400">{data.project.term}</span>
<Dot />
{#each data.project.categories as category}
Expand All @@ -42,17 +42,17 @@
</div>

{@render subtitle("¿Qué es?")}
<p class="mt-2 font-fira">
<p class="font-fira mt-2">
{data.project.description}
</p>

{@render subtitle("¿Para qué sirve?")}
<p class="mt-2 font-fira">
<p class="font-fira mt-2">
{data.project.purpose}
</p>

{@render subtitle("¿Cómo lo hicimos?")}
<p class="mt-2 font-fira">
<p class="font-fira mt-2">
{data.project.how}
</p>

Expand Down
14 changes: 7 additions & 7 deletions src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
</script>

{#snippet subtitle(text: string)}
<h2 class="flex-1 text-left font-fira text-2xl font-semibold">
<h2 class="font-fira flex-1 text-left text-2xl font-semibold">
<span class="text-lime-500">&gt;&nbsp;</span>{text}
</h2>
{/snippet}
Expand Down Expand Up @@ -48,19 +48,19 @@
>
<li class="flex items-center gap-3">
<Cpu class="size-12 text-lime-500 md:size-16" aria-hidden="true" />
<span class="flex-1 font-fira text-lg">Electrónica</span>
<span class="font-fira flex-1 text-lg">Electrónica</span>
</li>
<li class="flex items-center gap-3">
<Bot class="size-12 text-lime-500 md:size-16" aria-hidden="true" />
<span class="flex-1 font-fira text-lg">Hacking ético</span>
<span class="font-fira flex-1 text-lg">Hacking ético</span>
</li>
<li class="flex items-center gap-3">
<SquareCode class="size-12 text-lime-500 md:size-16" aria-hidden="true" />
<span class="flex-1 font-fira text-lg">Desarrollo web y móvil</span>
<span class="font-fira flex-1 text-lg">Desarrollo web y móvil</span>
</li>
<li class="flex items-center gap-3">
<SquareTerminal class="size-12 text-lime-500 md:size-16" aria-hidden="true" />
<span class="flex-1 font-fira text-lg">Programación de sistemas</span>
<span class="font-fira flex-1 text-lg">Programación de sistemas</span>
</li>
</ul>
</div>
Expand All @@ -78,7 +78,7 @@
<div class="mt-6 flex justify-center">
<a
href="/events"
class="inline-block rounded-full bg-lime-500 px-14 py-2 font-fira text-base font-semibold text-gray-900 shadow-sm hover:bg-lime-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-lime-500"
class="font-fira inline-block rounded-full bg-lime-500 px-14 py-2 text-base font-semibold text-gray-900 shadow-xs hover:bg-lime-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-lime-500"
>
Ver más
</a>
Expand All @@ -100,7 +100,7 @@
<div class="mt-16 flex justify-center">
<a
href="/members"
class="inline-block rounded-full bg-lime-500 px-14 py-2 font-fira text-base font-semibold text-gray-900 shadow-sm hover:bg-lime-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-lime-500"
class="font-fira inline-block rounded-full bg-lime-500 px-14 py-2 text-base font-semibold text-gray-900 shadow-xs hover:bg-lime-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-lime-500"
>
Ver más
</a>
Expand Down
2 changes: 1 addition & 1 deletion src/routes/chocoevento.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
</div>
</dl>
</div>
<div class="flex justify-end bg-lime-500 px-6 py-2 font-fira font-semibold text-gray-950">
<div class="font-fira flex justify-end bg-lime-500 px-6 py-2 font-semibold text-gray-950">
<!-- TODO: change to anchor tag -->
<button class="flex items-center gap-2 gap-x-3">
<span>Registrarse</span>
Expand Down
Loading

0 comments on commit 5695d29

Please sign in to comment.