Refactor hero section layout and update footer privacy notice for clarity

base/static/css/main.css

@@ -77,11 +77,6 @@ article.message {
 }
 
 #hero {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
     background: radial-gradient(
         circle 50vh at calc(100vw - 4rem) 50%,
         var(--pico-primary-background),
@@ -90,19 +85,41 @@ article.message {
         color-mix(in hsl, var(--pico-primary-background) 30%, var(--pico-background-color)) 60%,
         color-mix(in hsl, var(--pico-primary-background) 10%, var(--pico-background-color)) 80%,
         var(--pico-background-color));
-    display: grid;
-    grid-template-rows: 1fr min-content;
-    align-items: center;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+    overflow-y: auto;
     padding: 4rem;
 
-    .big-logo {
-        font-size: 8rem;
+    main {
+        display: contents;
     }
-
-    h1 {
-        font-size: 4rem;
+    section {
+        max-width: 20rem;
     }
 }
+.full-page {
+    height: 100%;
+        display: grid;
+        grid-template-rows: 1fr;
+        align-items: center;
+        margin-bottom: 4rem;
+
+        &.r {
+            -ms-grid-column-align: end;
+        }
+        .big-logo {
+            font-size: 8rem;
+        }
+
+        h1 {
+            font-size: 4rem;
+        }
+}
+
 
 h1,
 h2,
@@ -201,3 +218,7 @@ table.results, table.musics {
         }
     }
 }
+
+.brand-name {
+    color: var(--pico-primary);
+}

base/templates/footer.html

@@ -1 +1 @@
-Musik {{ VERSION }} – © <a href="https://code.edgarpierre.fr/edpibu/musik">Edgar P. Burkhart</a> – <a href="{% url "legal" %}">Mentions légales</a>
+Musik {{ VERSION }} – © <a href="https://code.edgarpierre.fr/edpibu/musik">Edgar P. Burkhart</a> – <a href="{% url "legal" %}">Mentions légales et confidentialité</a>

base/templates/hero.html

@@ -1,11 +1,25 @@
 {% load static %}
 <div id="hero">
     <main>
-        <i class="ri-music-ai-fill big-logo"></i>
-        <h1>Musik</h1>
-        <p>
-            <a href="{% url "home" %}" role="button"><i class="ri-play-fill"></i> Jouer</a>
-        </p>
+        <div class="full-page">
+            <div>
+                <i class="ri-music-ai-fill big-logo"></i>
+                <h1>Musik</h1>
+                <p>
+                    <a href="{% url "home" %}" role="button"><i class="ri-play-fill"></i> Jouer</a>
+                </p>
+            </div>
+        </div>
+        <div class="full-page r">
+            <section>
+                <h2>
+                    <span class="brand-name"><i class="ri-music-ai-fill"></i> Musik</span> Le jeu où ta playlist devient ton arme secrète !
+                </h2>
+                <p>
+                    Invite ta bande, ajoute tes sons fétiches, et c’est parti ! Une playlist Youtube apparaît, mélangeant les coups de cœur de tout le monde. Le jeu ? Écoute, devine qui a choisi quoi, et découvre les secrets musicaux de tes potes. Entre pièges, révélations et fous rires, Musik c’est le jeu parfait pour tester vos oreilles… et vos amitiés. Prêt à jouer le DJ incognito ?
+                </p>
+            </section>
+        </div>
     </main>
     <footer>
         {% include "footer.html" %}

base/templates/privacy.html

@@ -16,6 +16,7 @@
         Youtube est une marque de Google LLC.
     </p>
     <p>
-        La suppression des données stockée par le service Musik pour son utilisation peut être demandée par email à  <a href="mailto:contact@edgarpierre.fr">Edgar P. Burkhart</a>.
+        Les données saisies dans Musik (groupes créés, listes de musiques) sont conservées jusqu'à demande de suppression. La suppression du compte entraîne la suppression de l'ensemble des données qui y sont liées.
+        La suppression du compte peut être demandée dans les paramètres du compte. La suppression des données est immédiate et définitive.
     </p>
 {% endblock content %}