SVG bullet list of supporters on sponsors page.
This CSS, which I discovered from extensive research online, should work to create a bulleted list with the bullets being the heart-shaped Conservancy logo.
This commit is contained in:
parent
ece5b2581b
commit
ba50cd0232
3 changed files with 497 additions and 2 deletions
|
@ -275,10 +275,35 @@ body.conservancy-supporter #navbar ul li.supporter a
|
|||
background: url(/img/nav-bg-campaign-up.png) bottom repeat-x;
|
||||
}
|
||||
|
||||
#supporters ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#supporters li:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 2em;
|
||||
width: 2em;
|
||||
background-image: url(/img/conservancy-supporter-heart.svg);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
padding: 0.25em 1.2em 0.25em 0.25em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#supporters li {
|
||||
padding: 0.5em 2em 1em 2em;
|
||||
margin-left: .25em;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#sponsor ul {
|
||||
clear: all;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#sponsor li {
|
||||
width: 100%;
|
||||
float: left;
|
||||
|
|
468
www/conservancy/static/img/conservancy-supporter-heart.svg
Normal file
468
www/conservancy/static/img/conservancy-supporter-heart.svg
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 34 KiB |
|
@ -47,9 +47,11 @@ any of its sponsors.</p>
|
|||
<p>Conservancy Supporters are individuals who give $120 or more annually as
|
||||
part of <a href="/supporter/">the Official Conservancy Supporter
|
||||
program</a>. Those who request public acknowledgment are listed here in
|
||||
alphabetical order:</p>
|
||||
alphabetical order by surname:</p>
|
||||
|
||||
<ul id="supporter">
|
||||
<a id="supporters"></a>
|
||||
|
||||
<ul id="supporters">
|
||||
</ul>
|
||||
|
||||
{% endblock %}
|
||||
|
|
Loading…
Reference in a new issue