Because itβs moving to Hugo from WordPress, I need to create a shortcode to display legends under some of the images illustrating a site that were previously displayed in a page with just html
and css
. A typical example would be this:
The code to do this is:
1. html
<ul class="legend">
<li class="blue"> National recognition of animal sentience</li>
<li class="green"> Partial recognition of animal sentience<sup>1</sup></li>
<li class="yellow"> National recognition of animal suffering</li>
<li class="orange"> Partial recognition of animal suffering<sup>2</sup></li>
<li class="red"> No recognition of animal sentience or suffering</li>
<li class="grey"> Unknown</li>
<li class="none"><sup>1</sup> certain animals are excluded, only mental health is acknowledged, and/or the laws vary internally</li>
<li class="none"><sup>2</sup> only includes domestic animals</li>
</ul>
2. css
.legend {
list-style: none;
text-align: left;
width: 20em;
margin: 0 auto
}
.legend li {
line-height: 1;
margin: 0
}
.legend li::before {
font-size: 1.5em;
content: "\25A0"
}
.legend .blue::before {
color: #000cff
}
.legend .green::before {
color: #74d218
}
.legend .yellow::before {
color: #eed402
}
.legend .orange::before {
color: #f57900
}
.legend .red::before {
color: #cd0001
}
.legend .grey::before {
color: #e0e0e0
}
.legend .none {
font-size: .83em;
margin: .75em 0 .75em -1.5em
}
.legend .none::before {
color: #fff;
content: ""
}
The above is just one example: needs might vary compared with this and, in particular, one wouldnβt know in advance how many items one would need to set for each legend created using the shortcode, although one would have to choose between the available colours (blue, green, yellow, orange, grey). A further refinement would be to allow the user to set his own colours, but I think it makes more sense to set those using the :root
.
One would also need to include a separate list for explanatory items, that are included in the ul
as individual li
elements, but are rendered differently by the css.
Any suggestions would be most welcome.