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:
Bradley M. Kuhn 2014-12-03 12:28:14 -05:00
parent ece5b2581b
commit ba50cd0232
3 changed files with 497 additions and 2 deletions

View file

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

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 34 KiB

View file

@ -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 %}