Improving contrasts on the homepage #a11y

This commit is contained in:
David Larlet 2023-05-23 10:37:40 -04:00
parent b41a8cd39a
commit a2261f6949
5 changed files with 35 additions and 14 deletions

View file

@ -139,6 +139,9 @@ h2.section {
.highlights { .highlights {
text-align: center; text-align: center;
} }
.highlights a {
text-decoration: underline;
}
.highlights img.colophon { .highlights img.colophon {
display: inline-block; display: inline-block;
height: 128px; height: 128px;
@ -167,15 +170,23 @@ body.content #umap-ui-container {
input[type="submit"], input[type="submit"],
.button { .button {
background-color: #79c1c0; border: 3px solid #79c1c0;
color: #eeeeec; color: black;
} }
.wrapper input[type="submit"]:hover { .wrapper input[type="submit"]:hover {
background-color: #689191; background-color: #689191;
} }
.wrapper .neutral, .wrapper input[type="submit"].neutral { .wrapper .neutral,
background-color: #ddd; .wrapper input[type="submit"].neutral {
color: #666; border-color: #ddd;
background-color: white;
color: black;
}
.wrapper .neutral:hover,
.wrapper input[type="submit"].neutral:hover {
border-color: #ddd;
background-color: dimgrey;
color: white;
} }
.wrapper.somber { .wrapper.somber {
background-color: #2E3641; background-color: #2E3641;
@ -189,7 +200,13 @@ input[type="submit"],
.wrapper .button, .wrapper .button,
.wrapper input { .wrapper input {
height: 56px; height: 56px;
line-height: 43px; line-height: 36px;
font-weight: bold;
margin-top: 1rem;
}
.wrapper .button:hover {
background: #3A4259;
color: white;
} }
/* **************************** */ /* **************************** */

View file

@ -8,7 +8,7 @@ footer {
background-color: #2E3641; background-color: #2E3641;
text-align: center; text-align: center;
line-height: 140px; line-height: 140px;
color: #8F96A3; color: white;
} }
footer a.branding { footer a.branding {
background-image: url("./img/logo_filigree.png"); background-image: url("./img/logo_filigree.png");
@ -19,7 +19,7 @@ footer a.branding {
font-weight: bold; font-weight: bold;
height: 140px; height: 140px;
padding-left: 70px; padding-left: 70px;
color: #8F96A3; color: white;
display: inline-block; display: inline-block;
} }
@ -58,11 +58,15 @@ footer .i18n_switch {
.umap-nav ul li { .umap-nav ul li {
line-height: 2.5rem; line-height: 2.5rem;
} }
.umap-nav .button, .umap-nav .button {
.umap-nav .button:hover { color: black;
color: #fff;
text-decoration: none; text-decoration: none;
min-width: 150px; min-width: 150px;
font-weight: bold;
}
.umap-nav .button:hover {
background: #3A4259;
color: white;
} }
@media only screen and (min-width: 500px) { @media only screen and (min-width: 500px) {

View file

@ -30,7 +30,7 @@
<div class="col half center mwide"> <div class="col half center mwide">
{% spaceless %} {% spaceless %}
<div class="button-bar {% if demo_map %}half{% endif %}"> <div class="button-bar {% if demo_map %}half{% endif %}">
<a href="{% url 'map_new' %}" class="button half">{% trans "Create a map" %}</a> <a href="{% url 'map_new' %}" class="button half">{% trans "Create a map" %}</a>
{% if demo_map %} {% if demo_map %}
<a href="{{ demo_map.get_absolute_url }}" class="button half neutral">{% trans "Play with the demo" %}</a> <a href="{{ demo_map.get_absolute_url }}" class="button half neutral">{% trans "Play with the demo" %}</a>
{% endif %} {% endif %}

View file

@ -8,5 +8,5 @@
</div> </div>
{% endfor %} {% endfor %}
{% if maps.has_next %} {% if maps.has_next %}
<div class="col wide"><a href="?{% paginate_querystring maps.next_page_number %}" class="button more_button neutral">{% trans "More" %}</a></div> <div class="col wide"><a href="?{% paginate_querystring maps.next_page_number %}" class="button more_button neutral">{% trans "More" %}</a></div>
{% endif %} {% endif %}

View file

@ -24,6 +24,6 @@
</section> </section>
<section> <section>
<a href="{% url 'map_new' %}" class="button">{% trans "Create a map" %}</a> <a href="{% url 'map_new' %}" class="button">{% trans "Create a map" %}</a>
</section> </section>
</nav> </nav>