trotFunky/FabulaVotes
1
0
Fork 0
Code Releases Packages Activity

tempaltes/truth: Add an anchor and link to each truth

Browse source 
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.
This commit is contained in:
trotFunky 2024-07-29 22:34:43 +01:00
parent 1b4a934398
commit 4e1e9facc6
2 changed files with 13 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
static_files/style.css
View file

@ -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;

2
templates/weeks/truth.html.tera
View file

@ -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/>