diff --git a/src/app.postcss b/src/app.postcss
index 4dccc2d7e50e628fcb3525f43a674220afb3752b..6b7fe121396f63e9d5a4fa8483ec865433b76204 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -17,35 +17,45 @@
@tailwind utilities;
@layer components {
- /* --- LIENS --- */
+ /* *******--- LIENS ---******* */
+
+ /* LIEN TEXTE: lien basique à l'intérieur d'un corps de texte, souligné sans changement de couleur*/
.lx-link-text {
@apply underline hover:decoration-2 underline-offset-4;
}
+
+ /* lien texte, bleu au survol : si besoin de plus de visibilité */
.lx-link-text-le-bleu {
@apply underline hover:decoration-2 underline-offset-4 hover:text-le-bleu;
}
+
+ /* LIEN SIMPLE : lien solo (en dehors d'un corps de texte), se caractérise par un écard entre les lettres plus grand*/
+ .lx-link-simple {
+ @apply underline hover:decoration-2 underline-offset-4 tracking-wider;
+ }
+ /* lien simple, sans soulignement : si besoin de plus de discretion */
.lx-link-simple-no-underline {
@apply hover:underline hover:decoration-2 underline-offset-4 tracking-wider;
}
- .link-simple {
- @apply underline hover:decoration-2 underline-offset-4 tracking-wider;
- }
- .link-uppercase {
+
+ /* LIEN UPPERCASE : lien solo à la frontière avec un bouton, se caractérise par une casse en majuscule et un écard entre les lettres plus grand*/
+
+ .lx-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 {
+ /* lien uppercase, bleu au survol : si besoin de plus de visibilité */
+ .lx-link-uppercase-le-bleu {
@apply gap-2 text-le-bleu uppercase font-semibold tracking-widest hover:underline decoration-2 underline-offset-4 text-nowrap;
}
- .titreh1 {
- @apply mb-3 mt-7 font-serif text-3xl font-bold text-black;
- }
- .titreh2 {
+ /* *******--- TITRES ---******* */
+ .lx-titreh2 {
@apply mb-3 mt-5 inline-flex bg-le-vert-100 px-1 font-sans text-2xl font-bold text-black;
}
- .titreh3 {
+ .lx-titreh3 {
@apply mb-3 mt-5 flex font-sans text-xl font-bold text-black;
}
- .opacity-0-unclickable {
+ /* *******--- ANIMATION ---******* */
+ .lx-opacity-0-unclickable {
@apply pointer-events-none opacity-0;
}
}
diff --git a/src/lib/components/NavBar.svelte b/src/lib/components/NavBar.svelte
index 711a54df0d3c75e76d11405cb5af7231eeb157f4..60ff03e9ea0b916fed3b923aff95ceb83fb809df 100644
--- a/src/lib/components/NavBar.svelte
+++ b/src/lib/components/NavBar.svelte
@@ -260,7 +260,7 @@
icon="ri:drag-drop-line"
/>Tutoriel interactif
<br /><span
- class="link-uppercase group-hover:flex hidden group-hover:underline"
+ class="lx-link-uppercase group-hover:flex hidden group-hover:underline"
>commencer<iconify-icon
class="align-[-0.25rem] text-xl mr-1"
icon="ri:arrow-right-line"
diff --git a/src/lib/components/ReformsChanges.svelte b/src/lib/components/ReformsChanges.svelte
index 947dbd636a1b134c8b34b2b320e39e115503c9b6..f7b0113f9de882065b93a6633e081ed0941f244f 100644
--- a/src/lib/components/ReformsChanges.svelte
+++ b/src/lib/components/ReformsChanges.svelte
@@ -157,7 +157,7 @@
initialPlacement="right"
>
<a
- class="link-simple"
+ class="lx-link-simple"
href={newSimulationUrl({
...displayMode,
//budget: undefined, // TODO tgb: It depends!
@@ -215,7 +215,7 @@
/>
<a
id={tooltipId}
- class="link-simple"
+ class="lx-link-simple"
href={newSimulationUrl({
...displayMode,
//budget: undefined, // TODO tgb: It depends!
diff --git a/src/lib/components/test_cases/TestCaseSummary.svelte b/src/lib/components/test_cases/TestCaseSummary.svelte
index 29561d3adaf5f178cb721232eab487f9c3d32fff..2fd80970fe4b8dcd0bc5efd61ed6edc5a45f0757 100644
--- a/src/lib/components/test_cases/TestCaseSummary.svelte
+++ b/src/lib/components/test_cases/TestCaseSummary.svelte
@@ -638,7 +638,7 @@
{#if mode === "view"}
<button
class="ease flex text-sm uppercase text-gray-600 transition-opacity duration-500 hover:text-black"
- class:opacity-0-unclickable={displayMode.edit !== undefined}
+ class:lx-opacity-0-unclickable={displayMode.edit !== undefined}
on:click={() => (isTestCaseCompareModalOpen = true)}
title="Comparer ce cas type avec un autre"
id="situation_{situationIndex}_compare"
@@ -657,7 +657,7 @@
{/if}
<button
class="ease flex text-sm uppercase text-gray-600 transition-opacity duration-500 hover:text-black"
- class:opacity-0-unclickable={displayMode.edit !== undefined}
+ class:lx-opacity-0-unclickable={displayMode.edit !== undefined}
on:click={() => dispatch("changeTestCaseToEditIndex", situationIndex)}
title="Modifier ce cas type"
id="situation_{situationIndex}_edit"
diff --git a/src/lib/components/transverse_pages/Footer.svelte b/src/lib/components/transverse_pages/Footer.svelte
index db5a980ffed200338586a9e4b7d8643b83d69e9b..ba8d8c827a37b8d87624e3c9c2e940e769773919 100644
--- a/src/lib/components/transverse_pages/Footer.svelte
+++ b/src/lib/components/transverse_pages/Footer.svelte
@@ -75,7 +75,7 @@
icon="ri-arrow-right-line"
/>
</a> -->
- <a class="block pb-3 link-uppercase" href="/fonctionnement">
+ <a class="block pb-3 lx-link-uppercase" href="/fonctionnement">
Fonctionnement du simulateur
<iconify-icon
class="mr-1 align-[-0.3rem] text-xl"
diff --git a/src/lib/components/variables/VariableReferredInputs.svelte b/src/lib/components/variables/VariableReferredInputs.svelte
index 067f8e86dbb71f6f46f0e2afccaedb0f8a6c2693..1ebc9097c68ab473dc316eabee435c1ca6833e1f 100644
--- a/src/lib/components/variables/VariableReferredInputs.svelte
+++ b/src/lib/components/variables/VariableReferredInputs.svelte
@@ -41,7 +41,10 @@
<span class="font-serif text-lg font-bold"
>{variable.short_label ?? variable.label ?? variable.name}</span
>
- <a class="link-simple mr-3 text-gray-500" href="/variables/{variable.name}">
+ <a
+ class="lx-link-simple mr-3 text-gray-500"
+ href="/variables/{variable.name}"
+ >
<iconify-icon class="align-[-0.3rem] text-xl" icon="ri-more-2-fill" /></a
>
</div>
diff --git a/src/lib/components/variables/VariableReferredScaleParameter.svelte b/src/lib/components/variables/VariableReferredScaleParameter.svelte
index d7e71af1206dcecd344d8d017bb2636aa2d2cac7..423699048cd34a68661f0bc04740acbbc739ec2e 100644
--- a/src/lib/components/variables/VariableReferredScaleParameter.svelte
+++ b/src/lib/components/variables/VariableReferredScaleParameter.svelte
@@ -270,7 +270,7 @@
/>
{/if}
<a
- class="link-simple ml-2 flex text-sm items-center text-gray-600"
+ class="lx-link-simple ml-2 flex text-sm items-center text-gray-600"
rel="noreferrer"
href="/parameters/{billParameter.name}"
on:click={() => {
diff --git a/src/lib/components/variables/VariableReferredValueParameter.svelte b/src/lib/components/variables/VariableReferredValueParameter.svelte
index 60aa3095b37e871cb648fd92b7df005bcc920c0f..c63f932f0be198bee2b709230be8306053bcde6d 100644
--- a/src/lib/components/variables/VariableReferredValueParameter.svelte
+++ b/src/lib/components/variables/VariableReferredValueParameter.svelte
@@ -265,7 +265,7 @@
</div>
<a
- class="link-simple mx-1 flex items-center text-sm text-gray-600"
+ class="lx-link-simple mx-1 flex items-center text-sm text-gray-600"
rel="noreferrer"
href="/parameters/{billParameter.name}"
on:click={() => {
diff --git a/src/routes/accueil/+page.svelte b/src/routes/accueil/+page.svelte
index 51a61e59358d62da253d611e00b12dde1fe72a19..cd52f4d83d280fc459b8753751928564b0756ea8 100644
--- a/src/routes/accueil/+page.svelte
+++ b/src/routes/accueil/+page.svelte
@@ -327,7 +327,7 @@
</div>
<a
- class="self-center inline-flex items-center text-sm md:text-base link-uppercase"
+ class="self-center inline-flex items-center text-sm md:text-base lx-link-uppercase"
href="#"
>
<PictoFemme />
@@ -483,18 +483,24 @@
<div class="col-span-4 flex flex-col items-center gap-1 font-sans">
<a
- class="inline-flex items-center gap-2 link-uppercase mb-4"
+ class="inline-flex items-center gap-2 lx-link-uppercase mb-4"
href="/fonctionnement"
>
Fonctionnement du simulateur
<iconify-icon class="text-xl" icon="ri-arrow-right-line" />
</a>
- <a class="inline-flex items-center gap-2 link-uppercase-le-bleu" href="#">
+ <a
+ class="inline-flex items-center gap-2 lx-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 link-uppercase-le-bleu" href="#">
+ <a
+ class="inline-flex items-center gap-2 lx-link-uppercase-le-bleu"
+ href="#"
+ >
Simulateur budgétaire
<iconify-icon class="text-xl" icon="ri-arrow-right-line" />
</a>
diff --git a/src/routes/fonctionnement/+page.svelte b/src/routes/fonctionnement/+page.svelte
index 4b4a450264f5340dc58cc6542186bc62a3a69d4c..71d6461465834498f50cd13db0e3f8bc174c991b 100644
--- a/src/routes/fonctionnement/+page.svelte
+++ b/src/routes/fonctionnement/+page.svelte
@@ -31,7 +31,7 @@
<section class="w-full bg-white max-w-screen-lg pt-8 px-20">
<div class="flex justify-between mb-5">
<a
- class="link-uppercase text-neutral-500 font-sans text-sm"
+ class="lx-link-uppercase text-neutral-500 font-sans text-sm"
href="/accueil"
>
<iconify-icon
@@ -98,7 +98,11 @@
</div>
</section>
<section class="bg-white max-w-screen-lg py-10 px-20">
- <AnchorTitle id="a-quoi-sert-le-simulateur" class="titreh2 mb-10" tag="h2">
+ <AnchorTitle
+ id="a-quoi-sert-le-simulateur"
+ class="lx-titreh2 mb-10"
+ tag="h2"
+ >
À quoi sert le simulateur ?
</AnchorTitle>
<p class="pb-3 text-justify leading-normal">
@@ -127,7 +131,7 @@
</li>
</ul>
- <AnchorTitle id="impacts-cas-types" class="titreh3 my-10" tag="h3">
+ <AnchorTitle id="impacts-cas-types" class="lx-titreh3 my-10" tag="h3">
Des impacts sur cas-types <PictoFemme />
<PictoEntreprise />
</AnchorTitle>
@@ -203,7 +207,7 @@
</li>
</ul>
</div>
- <AnchorTitle id="impacts-globaux" class="titreh3 my-10" tag="h3">
+ <AnchorTitle id="impacts-globaux" class="lx-titreh3 my-10" tag="h3">
Des impacts globaux <PictoEtat />
</AnchorTitle>
@@ -253,7 +257,7 @@
</p>
</section>
<section class="bg-white max-w-screen-lg py-10 px-20 w-full">
- <AnchorTitle id="mecanique-du-simulateur" class="titreh2 mb-10" tag="h2">
+ <AnchorTitle id="mecanique-du-simulateur" class="lx-titreh2 mb-10" tag="h2">
2. Mécanique du simulateur
</AnchorTitle>
<p class="pb-5 text-justify leading-normal">
@@ -291,7 +295,7 @@
</section>
<section class="bg-white max-w-screen-lg py-10 px-20">
- <AnchorTitle id="ecosysteme" class="titreh3 mb-10" tag="h3">
+ <AnchorTitle id="ecosysteme" class="lx-titreh3 mb-10" tag="h3">
Un fonctionnement possible grâce à plusieurs acteurs
</AnchorTitle>
<p class="pb-5 text-justify leading-normal">
@@ -343,7 +347,7 @@
</ul>
</section>
<section class="bg-white max-w-screen-lg pb-10 px-20">
- <AnchorTitle id="traitement-des-donnees" class="titreh3 mb-10" tag="h3">
+ <AnchorTitle id="traitement-des-donnees" class="lx-titreh3 mb-10" tag="h3">
Le traitement des données
</AnchorTitle>
@@ -441,7 +445,7 @@
L'ensemble de ces étapes est détaillé dans notre documentation
technique :<br /><br />
<a
- class="link-uppercase-le-bleu font-sans"
+ class="lx-link-uppercase-le-bleu font-sans"
href="https://documentation.leximpact.dev/leximpact_prepare_data/index"
>
Documentation technique
@@ -453,7 +457,7 @@
</p>
</section>
<section class="bg-white max-w-screen-lg pb-10 px-20">
- <AnchorTitle id="moteur-de-calcul" class="titreh3 mb-10" tag="h3">
+ <AnchorTitle id="moteur-de-calcul" class="lx-titreh3 mb-10" tag="h3">
Le moteur de calcul
</AnchorTitle>
<p class="pb-5 text-justify leading-normal">
@@ -484,10 +488,14 @@
</section>
<section class="bg-white max-w-screen-lg pb-10 px-20">
- <AnchorTitle id="fiabilite-des-resultats" class="titreh2 mb-10" tag="h2">
+ <AnchorTitle id="fiabilite-des-resultats" class="lx-titreh2 mb-10" tag="h2">
3. Fiabilité des résultats
</AnchorTitle>
- <AnchorTitle id="methodologie-verification" class="titreh3 mb-10" tag="h3">
+ <AnchorTitle
+ id="methodologie-verification"
+ class="lx-titreh3 mb-10"
+ tag="h3"
+ >
Méthodologie de vérification des résultats
</AnchorTitle>
@@ -553,7 +561,7 @@
</li>
</ul>
- <AnchorTitle id="marge-erreur" class="titreh3 mb-10" tag="h3">
+ <AnchorTitle id="marge-erreur" class="lx-titreh3 mb-10" tag="h3">
Une marge d'erreur incompressible
</AnchorTitle>
<p class="pb-5 text-justify leading-normal">