diff --git a/src/routes/quiz/+page.svelte b/src/routes/quiz/+page.svelte
index 17d47ae420a540274e7ac4015f4c6bc0ed05cd39..bb662e8e1f27b871325aa59050e3ac33fa8ef6ab 100644
--- a/src/routes/quiz/+page.svelte
+++ b/src/routes/quiz/+page.svelte
@@ -16,22 +16,22 @@
</script>
<form method="post" use:enhance>
- <div class="relative mx-auto my-[50px] w-full max-w-[400px]">
- <section class="relative m-auto flex max-w-[500px] flex-col items-center">
- <h1 class="absolute top-[-2rem] text-xl">Qui est-ce ?</h1>
- <div class="relative w-[250px]">
- <span class="absolute right-[calc(100%_+_0.5rem)] flex flex-col items-end">
- <span class="text-9xl leading-[0.4] text-[#fa9f9b]"> {data.step} </span>
+ <div class="relative mx-auto my-12 w-full">
+ <section class="relative m-auto flex flex-col items-center">
+ <h1 class="absolute -top-8 text-xl">Qui est-ce ?</h1>
+ <div class="relative">
+ <span class="absolute -left-14 flex flex-col items-end">
+ <span class="text-9xl leading-[0.4] text-red-300"> {data.step} </span>
<span> / {questionAmount} </span>
</span>
<span
- class="absolute right-[calc(100%_+_0.5rem)] top-24 whitespace-nowrap pt-4 text-xl text-[#333] before:absolute before:right-0 before:top-0 before:h-1.5 before:w-10 before:bg-[#333] before:content-['']"
+ class="absolute right-[calc(100%_+_0.5rem)] top-24 whitespace-nowrap pt-4 text-xl text-zinc-800 before:absolute before:right-0 before:top-0 before:h-1.5 before:w-10 before:bg-zinc-800"
>
{data.score}
<small>pts</small>
</span>
<div
- class="relative z-[2] flex h-[250px] w-[250px] items-center justify-center overflow-hidden rounded-2xl border-6 border-[#333] border-[solid] bg-white before:absolute before:z-[-1] before:h-[100px] before:w-[100px] before:rounded-[50%] before:bg-[#c5d5ee] before:opacity-100 before:transition-[0.65s] before:duration-[ease-in-out] before:content-[''] after:absolute after:z-[-1] after:h-[100px] after:w-[100px] after:scale-0 after:rounded-[50%] after:border-[#c5d5ee] after:border-[solid] after:transition-[0.4s] after:duration-[ease-in-out] after:content-['']"
+ class="relative z-10 flex h-64 w-64 items-center justify-center overflow-hidden rounded-2xl border-6 border-solid border-zinc-800 bg-white before:absolute before:-z-10 before:h-32 before:w-32 before:rounded-full before:bg-slate-300 before:opacity-100 before:transition-[0.65s] before:duration-[ease-in-out] after:absolute after:-z-10 after:h-32 after:w-32 after:scale-0 after:rounded-full after:border-solid after:border-slate-300 after:transition-[0.4s] after:duration-[ease-in-out]"
>
<img src={data.photo} alt="Chargement..." class="w-auto" />
</div>
@@ -39,10 +39,10 @@
<transition-group
tag="div"
name="animate-options"
- class="relative top-[-30px] z-[3] mx-auto my-0 flex w-[170px] flex-col items-center space-y-1 rounded-2xl bg-[#333] px-5 py-0"
+ class="relative -top-6 z-20 mx-auto my-0 flex w-44 flex-col items-center space-y-0.5 rounded-2xl bg-zinc-800 px-5 py-0"
>
{#each data.options as option}
- <div class="max-h-14 w-full min-w-[200px]">
+ <div class="max-h-14 w-full min-w-52">
<Control let:attrs>
<input
type="radio"
@@ -56,7 +56,7 @@
<Label
tabindex={0}
data-solution={form?.solution || null}
- class="relative block cursor-pointer select-none overflow-hidden rounded-2xl border-6 border-[#333] border-[solid] bg-[#c5d5ee] p-[0.5em] text-center text-lg transition-[0.45s] [font-family:'Londrina_Solid',monospace] before:absolute before:left-2/4 before:top-2/4 before:z-[-1] before:h-[200px] before:w-[200px] before:-translate-x-2/4 before:-translate-y-2/4 before:scale-0 before:rounded-[50%] before:bg-[#94acbd] before:transition-[0.2s] before:duration-[ease-in-out] before:content-[''] hover:translate-y-[-3px] hover:bg-[#a9c1e6] focus:border-[#888] focus:[outline:none] active:before:-translate-x-2/4 active:before:-translate-y-2/4 active:before:scale-100 peer-checked:bg-[#94acbd] data-[solution]:cursor-default data-[solution]:text-[#94acbd] peer-checked:data-[solution]:bg-[#ff8b62] peer-checked:data-[solution]:text-inherit peer-data-[valid]:!bg-[#7bd55a] peer-data-[valid]:text-inherit"
+ class="relative block cursor-pointer select-none overflow-hidden rounded-2xl border-6 border-solid border-zinc-800 bg-slate-300 p-2 text-center text-lg transition-[0.45s] before:absolute before:left-2/4 before:top-2/4 before:-z-10 before:h-[200px] before:w-[200px] before:-translate-x-2/4 before:-translate-y-2/4 before:scale-0 before:rounded-full before:bg-slate-400 before:transition-[0.2s] before:duration-[ease-in-out] focus:[outline:none] active:before:-translate-x-2/4 active:before:-translate-y-2/4 active:before:scale-100 peer-checked:bg-[#94acbd] peer-enabled:hover:translate-y-[-3px] peer-enabled:hover:bg-indigo-300 peer-enabled:focus:border-indigo-500 data-[solution]:cursor-default data-[solution]:text-[#94acbd] peer-checked:data-[solution]:bg-red-400 peer-checked:data-[solution]:text-inherit peer-data-[valid]:!bg-lime-400 peer-data-[valid]:text-inherit"
>
{option.label}
</Label>
@@ -70,7 +70,7 @@
type="submit"
formaction="?/results"
disabled={form?.solution !== undefined}
- class="h-[100px] w-[110px] cursor-pointer rounded-2xl border-transparent bg-[#f32c22] p-[1em] text-2xl text-white transition-[0.35s] duration-300 [font-family:'Londrina_Solid',monospace] focus:border focus:border-dotted focus:border-[#f87f79] focus:[outline:none] enabled:hover:translate-x-0 enabled:hover:bg-[#333] enabled:hover:text-[#f65a52] disabled:cursor-default disabled:text-[#fa9f9b] disabled:opacity-70 sm:-translate-x-2.5 sm:rounded-bl-none sm:rounded-tl-none"
+ class="h-[100px] w-[110px] cursor-pointer rounded-2xl border-transparent bg-red-600 p-4 text-2xl text-white transition-[0.35s] duration-300 focus:border focus:border-dotted focus:border-[#f87f79] focus:[outline:none] enabled:hover:translate-x-0 enabled:hover:bg-[#333] enabled:hover:text-[#f65a52] disabled:cursor-default disabled:text-[#fa9f9b] disabled:opacity-70 sm:-translate-x-2.5 sm:rounded-bl-none sm:rounded-tl-none"
>
OK
</button>
@@ -78,7 +78,7 @@
type="submit"
formaction="?/next"
disabled={form?.solution === undefined}
- class="h-[100px] w-[110px] cursor-pointer rounded-2xl border-transparent bg-[#f32c22] p-[1em] text-2xl text-white transition-[0.35s] duration-300 [font-family:'Londrina_Solid',monospace] focus:border focus:border-dotted focus:border-[#f87f79] focus:[outline:none] enabled:hover:translate-x-0 enabled:hover:bg-[#333] enabled:hover:text-[#f65a52] disabled:cursor-default disabled:text-[#fa9f9b] disabled:opacity-70 sm:-translate-x-2.5 sm:rounded-bl-none sm:rounded-tl-none"
+ class="h-[100px] w-[110px] cursor-pointer rounded-2xl border-transparent bg-red-600 p-4 text-2xl text-white transition-[0.35s] duration-300 focus:border focus:border-dotted focus:border-[#f87f79] focus:[outline:none] enabled:hover:translate-x-0 enabled:hover:bg-[#333] enabled:hover:text-[#f65a52] disabled:cursor-default disabled:text-[#fa9f9b] disabled:opacity-70 sm:-translate-x-2.5 sm:rounded-bl-none sm:rounded-tl-none"
>
Suivant
</button>