"Mention Légale" page

src/lib/comp/ModuleManager.svelte

@@ -14,31 +14,23 @@
   });
 </script>
 
-<main class="rounded">
-  <ModuleControls></ModuleControls>
-  <section aria-label="Available Modules">
-    {#await promise}
-      <p>Loading...</p>
-    {:then}
-      <ul>
-        {#each $modules.values() as module}
-          <li><ModuleTile {module}></ModuleTile></li>
-        {/each}
-      </ul>
-    {:catch}
-      <p>Something went wrong when trying to fetch modules.</p>
-    {/await}
-  </section>
-</main>
+<ModuleControls></ModuleControls>
+<section aria-label="Available Modules">
+  {#await promise}
+    <p>Loading...</p>
+  {:then}
+    <ul>
+      {#each $modules.values() as module}
+        <li><ModuleTile {module}></ModuleTile></li>
+      {/each}
+    </ul>
+  {:catch}
+    <p>Something went wrong when trying to fetch modules.</p>
+  {/await}
+</section>
+
 
 <style>
-  main {
-    display: flex;
-    background: var(--background-color);
-    flex-direction: column;
-    margin-top: 2.75rem;
-    overflow: hidden;
-  }
   section {
     flex-grow: 1;
     overflow: auto;
@@ -76,10 +68,6 @@
     }
   }
   @media screen and (max-width: 820px) {
-    main {
-      margin-top: 0;
-      border-radius: 0;
-    }
     ul {
       position: relative;
     }

src/routes/+layout.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+  import Contributors from "$lib/comp/Contributors.svelte";
+  import NavMenu from "$lib/comp/NavMenu.svelte";
+  import Sponsors from "$lib/comp/Sponsors.svelte";
+</script>
+
+<header>
+  <a href="/">
+    <img src="favicon.png" alt="" role="presentation" />
+    <h1>Bookshelf Manager</h1>
+  </a>
+  <p>Highly accessible multi-purpose Minecraft library datapack</p>
+  <NavMenu></NavMenu>
+</header>
+<aside>
+  <Contributors></Contributors>
+  <Sponsors></Sponsors>
+</aside>
+<main class="rounded">
+  <slot />
+</main>
+<footer>&copy;&nbsp;Gunivers {new Date().getFullYear()} - <a href="/mentions-legales">Mentions légales</a></footer>
+
+<style>
+  main {
+    display: flex;
+    background: var(--background-color);
+    flex-direction: column;
+    margin-top: 2.75rem;
+    overflow: hidden;
+  }
+  header {
+    display: flex;
+    flex-direction: column;
+    margin: 1rem 0 0.5rem;
+    gap: 0.5rem;
+  }
+  header a {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+    text-decoration: none;
+  }
+  header h1 {
+    flex: 1 0;
+    color: var(--text-color-logo);
+    line-height: 1.2em;
+  }
+  header img {
+    filter: drop-shadow(0.15rem 0.35rem 0.15rem #00000033);
+    width: 100px;
+  }
+  header p {
+    flex-basis: 100%;
+    margin: 0.5rem;
+    opacity: 0.8;
+  }
+  aside {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 2rem;
+    padding: 0.5rem;
+    gap: 2rem;
+  }
+  footer {
+    display: flex;
+    align-items: end;
+  }
+  @media screen and (max-width: 1024px) {
+    aside {
+      gap: 1.5rem;
+    }
+    header img {
+      width: 64px;
+    }
+  }
+  @media screen and (max-width: 820px) {
+    main {
+      margin-top: 0;
+      border-radius: 0;
+    }
+    header {
+      position: sticky;
+      background: var(--background-color-darker);
+      border-bottom: 1px solid #99999955;
+      margin: 0;
+      top: 0;
+      z-index: 1;
+      gap: 0;
+    }
+    header h1 {
+      line-height: 1;
+      font-size: 1.3em;
+      margin: .5rem 2rem .5rem 0;
+    }
+    header img {
+      width: 2.75em;
+      margin: .75rem 1rem;
+    }
+    header p {
+      display: none;
+    }
+  }
+</style>

src/routes/+page.svelte

@@ -1,85 +1,5 @@
 <script lang="ts">
-  import Contributors from "$lib/comp/Contributors.svelte";
   import ModuleManager from "$lib/comp/ModuleManager.svelte";
-  import NavMenu from "$lib/comp/NavMenu.svelte";
-  import Sponsors from "$lib/comp/Sponsors.svelte";
 </script>
 
-<header>
-  <img src="favicon.png" alt="" role="presentation" />
-  <h1>Bookshelf Manager</h1>
-  <p>Highly accessible multi-purpose Minecraft library datapack</p>
-  <NavMenu></NavMenu>
-</header>
-<aside>
-  <Contributors></Contributors>
-  <Sponsors></Sponsors>
-</aside>
 <ModuleManager></ModuleManager>
-<footer>&copy;Gunivers {new Date().getFullYear()} - Mentions légales</footer>
-
-<style>
-  header {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    margin: 1rem 0 0.5rem;
-  }
-  header h1 {
-    flex: 1 0;
-    color: var(--text-color-logo);
-    line-height: 1.2em;
-  }
-  header img {
-    filter: drop-shadow(0.15rem 0.35rem 0.15rem #00000033);
-    width: 100px;
-  }
-  header p {
-    flex-basis: 100%;
-    margin: 0.5rem;
-    opacity: 0.8;
-  }
-  aside {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 2rem;
-    padding: 0.5rem;
-    gap: 2rem;
-  }
-  footer {
-    display: flex;
-    align-items: end;
-  }
-  @media screen and (max-width: 1024px) {
-    aside {
-      gap: 1.5rem;
-    }
-    header img {
-      width: 64px;
-    }
-  }
-  @media screen and (max-width: 820px) {
-    header {
-      position: sticky;
-      background: var(--background-color-darker);
-      border-bottom: 1px solid #99999955;
-      margin: 0;
-      top: 0;
-      z-index: 1;
-      gap: 0;
-    }
-    header h1 {
-      line-height: 1;
-      font-size: 1.3em;
-      margin: .5rem 2rem .5rem 0;
-    }
-    header img {
-      width: 2.75em;
-      margin: .75rem 1rem;
-    }
-    header p {
-      display: none;
-    }
-  }
-</style>

src/routes/mentions-legales/+page.svelte

@@ -0,0 +1,38 @@
+<main class="rounded">
+    <h1>Mentions Légales</h1>
+
+    <p>Conformément aux dispositions de la loi n° 2004-575 du 21 juin 2004 pour la confiance en l'économie numérique, il est précisé aux utilisateurs du site mcbookshelf l'identité des différents intervenants dans le cadre de sa réalisation et de son suivi.</p>
+
+    <h2>Edition du site</h2>
+
+    <p>Le présent site, accessible à l’URL mcbookshelf.dev (le « Site »), est édité par :</p>
+    <p>L’association Altearn, enregistrée auprès de la préfecture de police de Paris au répertoire national des associations sous le numéro W061014075, ayant son siège situé à Appartement 561, 16 rue Curial, 75019 PARIS, et représentée par Vincent Foriel, président.</p>
+
+    <h2>Hébergement</h2>
+
+    <p>Le Site est hébergé par la société O2Switch, situé 222 Boulevard Gustave Flaubert, 63000 Clermont-Ferrand, (contact téléphonique : (+33) 4 44 44 60 40).</p>
+
+    <h2>Directeur de publication</h2>
+
+    <p>La direction de publication du Site est assurée par le·a président·e de l'association Altearn.</p>
+
+    <h2>Nous contacter</h2>
+
+    <p>Par téléphone : +33699274663</p>
+    <p>Par email : contact@altearn.xyz</p>
+    <p>Par courrier : Appartement 561, 16 rue Curial, 75019 Paris</p>
+
+    <h2>Données personnelles</h2>
+    <p>Nous traitons certaines données personnelles, telles que votre adresse IP, votre user-agent et d'autres informations techniques similaires, dans le but de faire fonctionner correctement notre site. Le traitement de ces données étant strictement nécessaire pour le fonctionnement du site, celui-ci est licite conformément à l'article 6.1(b) du RGPD (base légale "le traitement est nécessaire à l'exécution d'un contrat"). Nous ne traitons aucune autre donnée personnelle vous concernant.</p>
+</main>
+
+<style>
+    main {
+        padding: 1em;
+        background-color: var(--background-color);
+    }
+    h1 {
+        padding-bottom: 1rem;
+        border-bottom: 1px solid var(--divider-color);
+    }
+</style>