estel/playtool-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor with new styling convention

Browse Source
This commit is contained in:
Nicola Spadari
2025-01-02 21:58:06 +01:00
parent dfb48cf7ee
commit c1752c0701
19 changed files with 108 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/Btn.vue
View File

@@ -1,5 +1,5 @@
<template>
<button class="disabled:(cursor-not-allowed opacity-60)" gap-1 rounded-md bg-emerald-500 px-3.5 py-2.5 text-sm text-white font-semibold shadow-sm transition-colors hover="bg-emerald-600" focus-visible="outline-2 outline-emerald-600 outline-offset-2 outline">
<button class="disabled:(cursor-not-allowed opacity-60) gap-1 rounded-md bg-emerald-500 px-3.5 py-2.5 text-sm text-white font-semibold shadow-sm transition-colors" hover="bg-emerald-600" focus-visible="outline-2 outline-emerald-600 outline-offset-2 outline">
<slot />
</button>
</template>

4
app/components/Design/BottomBlob.vue
View File

@@ -1,6 +1,6 @@
<template>
<div pointer-events-none absolute inset-x-0 top="1/5" transform-gpu blur-3xl z="-10" aria-hidden="true">
<div class="blob" relative left="[calc(50%+36rem)]" aspect="[1155/678]" w="[72.1875rem]" from-emerald-500 to-amber-400 bg-gradient-to-tr opacity-30 translate-x="-1/2" />
<div class="pointer-events-none absolute inset-x-0 top=1/5 transform-gpu blur-3xl -z-10" aria-hidden="true">
<div class="blob relative left-[calc(50%+36rem)] aspect-[1155/678] w-[72.1875rem] from-emerald-500 to-amber-400 bg-gradient-to-tr opacity-30 -translate-x-1/2" />
</div>
</template>

4
app/components/Design/TopBlob.vue
View File

@@ -1,6 +1,6 @@
<template>
<div pointer-events-none absolute inset-x-0 transform-gpu blur-3xl top="-1/4" z="-10" aria-hidden="true">
<div class="blob" relative left="[calc(50%-30rem)]" aspect="[1155/678]" w="[72.1875rem]" rotate-30 from-amber-400 to-emerald-500 bg-gradient-to-tr opacity-30 translate-x="-1/2" />
<div class="pointer-events-none absolute inset-x-0 transform-gpu blur-3xl -top-1/4 -z-10" aria-hidden="true">
<div class="blob relative left-[calc(50%-30rem)] aspect-[1155/678] w-[72.1875rem] rotate-30 from-amber-400 to-emerald-500 bg-gradient-to-tr opacity-30 -translate-x-1/2" />
</div>
</template>

2
app/components/Hyperlink.vue
View File

@@ -1,5 +1,5 @@
<template>
<NuxtLink gap-1 rounded-md bg-emerald-500 px-3.5 py-2.5 text-sm text-white font-semibold shadow-sm transition-colors hover="bg-emerald-600" focus-visible="outline-2 outline-emerald-600 outline-offset-2 outline">
<NuxtLink class="gap-1 rounded-md bg-emerald-500 px-3.5 py-2.5 text-sm text-white font-semibold shadow-sm transition-colors" hover="bg-emerald-600" focus-visible="outline-2 outline-emerald-600 outline-offset-2 outline">
<slot />
</NuxtLink>
</template>

12
app/components/Layout/Tile.vue
View File

@@ -1,16 +1,16 @@
<template>
<div grid grid-cols-1 lg="grid-cols-2">
<div px-6 pb-10 pt-12 lg="px-8 pt-22" sm="pt-16">
<div mx-auto max-w-xl lg="mx-0 max-w-lg">
<h2 text-3xl text-white font-bold tracking-tight>
<div class="grid grid-cols-1" lg="grid-cols-2">
<div clas="px-6 pb-10 pt-12" sm="pt-16" lg="px-8 pt-22">
<div class="mx-auto max-w-xl" lg="mx-0 max-w-lg">
<h2 class="text-3xl text-white font-bold tracking-tight">
{{ props.title }}
</h2>
<p mt-6 text-lg text-gray-300 leading-8>
<p class="mt-6 text-lg text-gray-300 leading-8">
{{ props.description }}
</p>
</div>
</div>
<div px-6 pb-10 pt-12 lg="px-8 pt-22" sm="pt-16">
<div class="px-6 pb-10 pt-12" sm="pt-16" lg="px-8 pt-22">
<slot />
</div>
</div>

2
app/components/NavLink.vue
View File

@@ -1,5 +1,5 @@
<template>
<NuxtLink lg="inline text-sm py-0" block py-2 text-white font-semibold leading-6>
<NuxtLink class="block py-2 text-white font-semibold leading-6" lg="inline text-sm py-0">
<slot />
</NuxtLink>
</template>

22
app/components/Site/Navbar.vue
View File

@@ -1,17 +1,17 @@
<template>
<header top-0 z-10>
<nav flex items-center justify-between py-6 crate>
<div flex lg="flex-1">
<NuxtLink to="/" class="home" p-1.5 m="-1.5">
<SvgoLogo :font-controlled="false" size-8 />
<header class="top-0 z-10">
<nav crate class="flex items-center justify-between py-6">
<div class="flex" lg="flex-1">
<NuxtLink to="/" class="home p-1.5 -m-1.5">
<SvgoLogo :font-controlled="false" class="size-8" />
</NuxtLink>
</div>
<div flex lg="hidden">
<button type="button" inline-flex items-center justify-center rounded-md p-2.5 text-neutral-300 m="-2.5" @click="showSidebar = true">
<Icon name="heroicons-solid:bars-3" size-6 />
<div class="flex" lg="hidden">
<button type="button" class="inline-flex items-center justify-center rounded-md p-2.5 text-neutral-300 -m-2.5" @click="showSidebar = true">
<Icon name="heroicons-solid:bars-3" class="size-6" />
</button>
</div>
<div hidden lg="flex gap-x-12">
<div class="hidden" lg="flex gap-x-12">
<NavLink to="/commands">
Commands
</NavLink>
@@ -28,8 +28,8 @@
Store
</NavLink>
</div>
<div hidden lg="flex flex-1 justify-end">
<p text-sm text-white font-semibold leading-6>
<div class="hidden" lg="flex flex-1 justify-end">
<p class="text-sm text-white font-semibold leading-6">
v{{ tauriVersion }}
</p>
</div>

26
app/components/Site/Sidebar.vue
View File

@@ -3,20 +3,20 @@
enter-from-class="opacity-0" enter-active-class="ease-in-out duration-500" enter-to-class="opacity-100"
leave-from-class="opacity-100" leave-active-class="ease-in-out duration-500" leave-to-class="opacity-0"
>
<div v-if="showSidebar" relative z-20 lg="hidden" role="dialog" aria-modal="true">
<div fixed inset-0 overflow-hidden>
<div bg="neutral-800/70" h-full flex flex-col overflow-y-auto py-6 backdrop-blur-md crate>
<div flex items-center justify-between>
<NuxtLink to="/" p-1.5 m="-1.5">
<SvgoLogo :filled="true" :font-controlled="false" size-8 />
<div v-if="showSidebar" class="relative z-20" lg="hidden" role="dialog" aria-modal="true">
<div class="fixed inset-0 overflow-hidden">
<div crate class="bg-neutral-800/70 h-full flex flex-col overflow-y-auto py-6 backdrop-blur-md">
<div class="flex items-center justify-between">
<NuxtLink to="/" class="p-1.5 -m-1.5">
<SvgoLogo :filled="true" :font-controlled="false" class="size-8" />
</NuxtLink>
<button type="button" rounded-md p-2.5 text-neutral-300 m="2.5" @click="showSidebar = false">
<Icon name="heroicons-solid:x-mark" size-6 />
<button type="button" class="rounded-md p-2.5 text-neutral-300 m-2.5" @click="showSidebar = false">
<Icon name="heroicons-solid:x-mark" class="size-6" />
</button>
</div>
<div mt-6 flow-root>
<div my="-6" divide-y divide="gray-500/25">
<div py-6 space-y-2>
<div class="mt-6 flow-root">
<div class="-my-6 divide-y divide-gray-500/25">
<div class="py-6 space-y-2">
<NavLink to="/commands">
Commands
</NavLink>
@@ -30,8 +30,8 @@
404
</NavLink>
</div>
<div py-6>
<p px-3 text-base text-white font-semibold leading-7 mx="-3">
<div class="py-6">
<p class="px-3 text-base text-white font-semibold leading-7 -mx-3">
v{{ tauriVersion }}
</p>
</div>

6
app/components/Tab/Row.vue
View File

@@ -1,9 +1,9 @@
<template>
<div px-4 py-6 sm="grid grid-cols-3 gap-4 px-6">
<dt flex items-center text-sm text-light-200 font-medium>
<div class="px-4 py-6" sm="grid grid-cols-3 gap-4 px-6">
<dt class="flex items-center text-sm text-light-200 font-medium">
{{ props.heading }}
</dt>
<dd flex items-center text-sm text-neutral-300 leading-6 sm="col-span-2 mt-0">
<dd class="flex items-center text-sm text-neutral-300 leading-6" sm="col-span-2 mt-0">
{{ props.body }}
</dd>
</div>