From 4e1e9facc65a827f74d5678e5960df5e08bd72f9 Mon Sep 17 00:00:00 2001
From: trotFunky <trotfunky.perso+git@gmail.com>
Date: Mon, 29 Jul 2024 22:34:43 +0100
Subject: [PATCH] tempaltes/truth: Add an anchor and link to each truth

Users might want to share specific truths, or it might be useful to link to them in the future.
Set the id of the h3 element for each truth to its number in the week and add an anchor link to
the full h3 element, to be able to click anywhere.

Update the stylesheet to hide the link color and decorations, add animation an hover color as
with the week navigation arrows.
---
 static_files/style.css          | 13 ++++++++++++-
 templates/weeks/truth.html.tera |  2 +-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/static_files/style.css b/static_files/style.css
index ddb3d5c..3e802a5 100644
--- a/static_files/style.css
+++ b/static_files/style.css
@@ -23,12 +23,23 @@
     padding-bottom: 2em;
 }
 
-.individual_truth > h3 {
+.individual_truth h3 {
     text-align: center;
     padding-bottom: 4px;
     border-bottom: slategray solid 0.15em;
 }
 
+.individual_truth > a, .individual_truth > a:link, .individual_truth > a:visited {
+    color: black;
+    text-decoration: none;
+    transition: all .2s ease-in-out;
+}
+
+.individual_truth > a:hover, .individual_truth > a:focus {
+    color: mediumpurple;
+    text-shadow: 0 2px 2px slategray;
+}
+
 .editor {
     width: calc(100% - 1.25em); /* The width is calculated *inside* the padding, so adjust for it. */
     height: 6eM;
diff --git a/templates/weeks/truth.html.tera b/templates/weeks/truth.html.tera
index fdc1b5e..266a82b 100644
--- a/templates/weeks/truth.html.tera
+++ b/templates/weeks/truth.html.tera
@@ -5,7 +5,7 @@
 {%- endif -%}
 
 <div class="individual_truth">
-    <h3>Vérité {{ truth.number }}</h3>
+    <a href="#{{ truth.number }}"><h3 id="{{ truth.number }}">Vérité {{ truth.number }}</h3></a>
     <p>{{ truth.rendered_text | safe }}</p>
     {% if user.logged_in %}
     <hr/>