pidgin/nest

WCAG 2 fixes for contrast and empty header

2021-06-27, Jonathan Champ
c1fbb1f6b8e5
WCAG 2 fixes for contrast and empty header

Testing Done:
Ran WAVE tool browser extension. They have a no-install, web version at https://wave.webaim.org/

As an example, improvement goes from 3+24 errors to 2+0 errors on https://pidgin.im/contact/

The colors are directly-scaled, viable suggestions, but it would be possible to make the green more green by exchanging red/blue for green while maintaining the same level of contrast. As an example #0c8a0c might be a bit more vibrant green. Please let me know if you would like me to suggest other slight color variations.

Bugs closed: NEST-45

Reviewed at https://reviews.imfreedom.org/r/777/
<div class="download-now">
<a class="download-btn" href="/install/">
<span style="vertical-align: middle;">
<i class="fas fa-download dl-icon"></i> {{ T "Download" }} {{ .Site.Params.currentVersion | safeHTML }}
</span>
</a>
<b>Platforms:</b>
<a href="/install/#windows"><i class="fab fa-windows"></i></a>
<a href="/install/#macos"><i class="fab fa-apple"></i></a>
<a href="/install/#linux"><i class="fab fa-linux"></i></a>
<a href="/install/#freebsd"><i class="fab fa-freebsd"></i></a>
<a href="/install/#source"><i class="fas fa-code"></i></a>
</div>
<style>
.download-now {
display: block;
text-align: center;
width: 250px;
border-radius: 6px;
background-color: lightgrey;
margin: 0 auto;
}
.download-now .download-btn {
border-radius: 6px;
background-color: #8451a1;
color: white;
width: 100%;
padding: 15px;
font-size: large;
text-align: center;
display: block;
}
.download-now .download-btn:hover {
background-color: #322a38;
text-decoration: none !important;
}
.download-now .download-btn::after {
content: none !important;
}
.download-now .download-thing {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.download-now .dl-icon {
display: inline-block;
vertical-align: middle;
}
.download-now .dl-text {
display: inline-block;
vertical-align: middle;
}
.download-now ul {
display: block;
list-style-type: disc;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 0;
}
.download-now a {
color: #8451a1;
}
</style>