Improving contrasts on the homepage #a11y

umap/static/umap/content.css

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

umap/static/umap/nav.css

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

umap/templates/umap/about_summary.html

@@ -30,7 +30,7 @@
     <div class="col half center mwide">
     {% spaceless %}
     <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 %}
         <a href="{{ demo_map.get_absolute_url }}" class="button half neutral">{% trans "Play with the demo" %}</a>
       {% endif %}

umap/templates/umap/map_list.html

@@ -8,5 +8,5 @@
 </div>
 {% endfor %}
 {% 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 %}

umap/templates/umap/navigation.html

@@ -24,6 +24,6 @@
   </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>
 </nav>