diff --git a/src/app.postcss b/src/app.postcss
index a6183327a592dfb2c5972e9552150a4ff0d5f607..bf988a059996d48a0dc6218bbba0d313a15b66b4 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -17,11 +17,17 @@
@tailwind utilities;
@layer components {
- .link {
- @apply underline hover:text-le-bleu;
+ .link-text {
+ @apply underline hover:decoration-2 underline-offset-4;
}
- .link2 {
- @apply underline hover:text-gray-800;
+ .link-text-le-bleu {
+ @apply underline hover:decoration-2 underline-offset-4 hover:text-le-bleu;
+ }
+ .link-uppercase {
+ @apply gap-2 uppercase font-semibold tracking-widest hover:underline decoration-2 underline-offset-4 hover:text-black text-nowrap text-neutral-700;
+ }
+ .link-uppercase-le-bleu {
+ @apply gap-2 text-le-bleu uppercase font-semibold tracking-widest hover:underline decoration-2 underline-offset-4 text-nowrap;
}
.opacity-0-unclickable {
@apply pointer-events-none opacity-0;
diff --git a/src/routes/welcome/+page.svelte b/src/routes/welcome/+page.svelte
index 48ea238cb7e002c3b7c265bdce585b21eb320f86..3d60da935734154564f75b53b6c2776e1c849b51 100644
--- a/src/routes/welcome/+page.svelte
+++ b/src/routes/welcome/+page.svelte
@@ -287,7 +287,7 @@
</WelcomeSearch>
</div>
- <div class="flex-auto items-center mb-20 text-sm md:text-base">
+ <div class="flex-auto items-center mb-20 text-sm md:text-base mt-5">
{#each suggestions.slice(0, 3) as suggestion}
<a
class="mx-1 px-3 py-1 bg-[#E3DFA9] hover:bg-opacity-80 active:bg-opacity-70 rounded-full"
@@ -301,11 +301,14 @@
</a>
{/each}
<a
- class="underline text-neutral-600 hover:text-black block mt-2 mx-1"
+ class="link-text text-neutral-600 hover:text-black block mt-2 mx-1"
href="#dispositif-couverts"
>
- Voir les {withLinkedVariableNames.length} dispositifs couverts
- </a>
+ Voir les {withLinkedVariableNames.length} dispositifs couverts<iconify-icon
+ class=" align-[-0.3rem] text-xl"
+ icon="ri-arrow-down-line"
+ /></a
+ >
</div>
</div>
</div>
@@ -382,7 +385,7 @@
<span>
Le simulateur socio-fiscal LexImpact de l’Assemblée nationale permet de
voir les impacts de la loi sur des <b>ménages types</b> pour
- <a class="underline" href="#dispositif-couverts"
+ <a class="link-text" href="#dispositif-couverts"
>tous les dispositifs disponibles</a
>.
</span>
@@ -394,10 +397,10 @@
L'<b>impact budgétaire</b> est calculable pour :
</span>
<ul class="list-disc pl-8">
- <li><a class="underline" href="#">impôt sur le revenu (IR)</a> ;</li>
- <li><a class="underline" href="#">CSG sur les salaires</a> ;</li>
- <li><a class="underline" href="#">CSG sur les retraites</a> ;</li>
- <li><a class="underline" href="#">Allocations familiales</a>.</li>
+ <li><a class="link-text" href="#">impôt sur le revenu (IR)</a> ;</li>
+ <li><a class="link-text" href="#">CSG sur les salaires</a> ;</li>
+ <li><a class="link-text" href="#">CSG sur les retraites</a> ;</li>
+ <li><a class="link-text" href="#">Allocations familiales</a>.</li>
</ul>
</div>
@@ -455,18 +458,12 @@
</div>
<div class="col-span-4 flex flex-col items-center gap-1 font-sans">
- <a
- class="inline-flex items-center gap-2 text-[#343bff] uppercase font-semibold tracking-widest hover:underline decoration-2 underline-offset-4"
- href="#"
- >
+ <a class="inline-flex items-center gap-2 link-uppercase-le-bleu" href="#">
Choisir un cas type
<iconify-icon class="text-xl" icon="ri-arrow-right-line" />
</a>
- <a
- class="inline-flex items-center gap-2 text-[#343bff] uppercase font-semibold tracking-widest hover:underline underline-offset-4 decoration-2"
- href="#"
- >
+ <a class="inline-flex items-center gap-2 link-uppercase-le-bleu" href="#">
Simulateur budgétaire
<iconify-icon class="text-xl" icon="ri-arrow-right-line" />
</a>
@@ -709,10 +706,10 @@
>
POTE - millésime 2021</a
>.
- <a class="link font-sans" href="/comment-fonctionnent-les-simulateurs">
+ <a class="link-text font-sans" href="/fonctionnement">
En savoir plus sur le fonctionnement du simulateur
<iconify-icon
- class="text-base align-[-0.1rem]"
+ class="text-lg align-[-0.2rem]"
icon="ri-arrow-right-line"
/>
</a>
@@ -846,8 +843,8 @@
</span>
</h4>
<p class="font-serif text-base text-center">
- Rendez-vous sur le <a href="#" class="link text-le-bleu">simulateur</a
- >, sélectionnez un cas type.
+ Rendez-vous sur le <a class="link-text" href="#">simulateur</a>,
+ sélectionnez un cas type.
</p>
</div>
<div
@@ -974,10 +971,10 @@
>
POTE - millésime 2021</a
>.
- <a class="link font-sans" href="/comment-fonctionnent-les-simulateurs">
+ <a class="link-text font-sans" href="/fonctionnement">
En savoir plus sur le fonctionnement du simulateur
<iconify-icon
- class="text-base align-[-0.1rem]"
+ class="text-lg align-[-0.2rem]"
icon="ri-arrow-right-line"
/>
</a>
@@ -1047,15 +1044,16 @@
class="border-t-4 grid gap-10 border-le-vert-500 px-8 py-6 md:grid-cols-3 md:px-16 md:py-2 bg-neutral-50"
>
<div
- class="my-0 md:my-10 border-b-2 pb-10 md:border-b-0 md:border-r-2 md:pr-5 md:col-span-1 col-span-3"
+ class="my-0 md:my-10 border-b-2 pb-10 md:border-b-0 md:border-r-2 md:pr-5 md:col-span-1 col-span-3 text-neutral-700"
>
- <h2 class="mb-5 text-2xl font-bold">À propos de LexImpact</h2>
- <p class="pb-3 font-serif text-base leading-relaxed">
+ <h2 class="text-2xl font-light mb-5">À propos de LexImpact</h2>
+ <p class="font-serif text-base leading-relaxed tracking-wider">
LexImpact est une cellule de l'Assemblée nationale rattachée à la
direction du Contrôle et de l'évaluation. Elle propose différents outils
d'évaluation des politiques publiques passées ou imaginées. <a
- class="underline hover:text-le-bleu font-sans"
+ class="font-sans link-text"
href="https://leximpact.an.fr/"
+ target="_blank"
>Accueil Leximpact <iconify-icon
class="mr-1 align-[-0.2rem] text-lg"
icon="ri-external-link-line"
@@ -1075,41 +1073,42 @@
<div
class="flex md:flex-row flex-col justify-between items-center gap-y-4 mb-10 md:mb-0"
>
- <h3 class="block text-lg uppercase tracking-widest">
- Simulateur socio-fiscal
- </h3>
- <button
- class="font-sans flex items-center gap-2 py-2 px-5 shadow-lg bg-le-jaune-dark hover:bg-le-vert-600 active:bg-le-vert-800 rounded-md text-white text-sm font-bold tracking-[0.085em] uppercase"
- title="Vers le simulateur budgétaire de l'impôt sur le revenu"
- on:click={() => goto("/")}
- >
- Commencer<iconify-icon
- class="ml-2 align-[-0.4rem] text-2xl"
- icon="ri-arrow-right-line"
- />
- </button>
+ <h2 class="block text-2xl font-bold mb-5">
+ À propos du simulateur socio-fiscal
+ </h2>
</div>
- <p class="pb-3 text-base leading-relaxed max-w-prose my-3">
+ <p
+ class="pb-3 text-lg leading-relaxed max-w-prose tracking-wider font-serif"
+ >
Le simulateur socio-fiscal LexImpact permet de mesurer les impacts du
droit en vigueur ou d’une réforme du système socio-fiscal.
</p>
+
+ <button
+ class="justify-self-end font-sans flex items-center gap-2 py-2 px-5 shadow-lg bg-le-jaune-dark hover:bg-le-vert-600 active:bg-le-vert-800 rounded-md text-white text-sm font-bold tracking-[0.085em] uppercase"
+ title="Vers le simulateur budgétaire de l'impôt sur le revenu"
+ on:click={() => goto("/")}
+ >
+ Commencer<iconify-icon
+ class="ml-2 align-[-0.4rem] text-2xl"
+ icon="ri-arrow-right-line"
+ />
+ </button>
+
<div class="md:flex-row flex-col flex md:items-end mt-6 gap-10">
<div class="flex flex-col md:w-1/2">
- <a
- class="block pb-3 text-base hover:underline"
- href="/comment-fonctionnent-les-simulateurs"
+ <!-- <a
+ class="block pb-3 text-base hover:text-le-bleu"
+ href="TODO"
>
Tutoriels
<iconify-icon
class="mr-1 align-[-0.3rem] text-xl"
icon="ri-arrow-right-line"
/>
- </a>
- <a
- class="block pb-3 text-base hover:underline"
- href="/comment-fonctionnent-les-simulateurs"
- >
- Documentation technique
+ </a> -->
+ <a class="block pb-3 text-base link-uppercase" href="/fonctionnement">
+ Fonctionnement du simulateur
<iconify-icon
class="mr-1 align-[-0.3rem] text-xl"
icon="ri-arrow-right-line"
@@ -1118,30 +1117,33 @@
<p class=" text-base leading-relaxed">
Actualités sur
<a
- class="underline hover:text-le-bleu"
+ class="text-nowrap link-text font-sans"
href="https://chat.whatsapp.com/JLqiO8nuitlHRqry4FK2Cm"
+ target="_blank"
>
- <iconify-icon
- class="mr-1 align-[-0.3rem] text-xl"
+ WhatsApp<iconify-icon
+ class="ml-1 align-[-0.3rem] text-xl"
icon="ri-whatsapp-line"
- />WhatsApp</a
- >
- |
+ />
+ </a>
+ et
<a
- class="underline hover:text-le-bleu"
+ class="text-nowrap link-text font-sans"
href="https://t.me/joinchat/UI8LKl2iDlZhNDU8"
+ target="_blank"
>
- <iconify-icon
- class="mr-1 align-[-0.3rem] text-xl"
+ Telegram<iconify-icon
+ class="ml-1 align-[-0.3rem] text-xl"
icon="ri-telegram-fill"
- />Telegram</a
+ /></a
>.
</p>
</div>
- <div class="flex flex-col md:w-1/2 md:text-right text-neutral-700">
+ <div class="flex flex-col md:w-1/2 md:text-right text-base gap-y-3">
<a
- class="pb-3 text-base hover:underline"
+ class="link-text"
href="https://leximpact.an.fr/cgu"
+ target="_blank"
>
Conditions d'utilisation
<iconify-icon
@@ -1150,8 +1152,9 @@
/>
</a>
<a
- class="pb-3 text-base hover:underline"
+ class="link-text"
href="https://leximpact.an.fr/statistiques"
+ target="_blank"
>
Statistiques d'usage
<iconify-icon
@@ -1160,8 +1163,9 @@
/>
</a>
<a
- class=" text-base hover:underline"
+ class="link-text"
href="https://leximpact.an.fr/mentions-legales"
+ target="_blank"
>
Mentions légales
<iconify-icon