From a2261f6949836bddffe930c5e90651f3c4842a1f Mon Sep 17 00:00:00 2001
From: David Larlet <david@larlet.fr>
Date: Tue, 23 May 2023 10:37:40 -0400
Subject: [PATCH] Improving contrasts on the homepage #a11y

---
 umap/static/umap/content.css           | 29 ++++++++++++++++++++------
 umap/static/umap/nav.css               | 14 ++++++++-----
 umap/templates/umap/about_summary.html |  2 +-
 umap/templates/umap/map_list.html      |  2 +-
 umap/templates/umap/navigation.html    |  2 +-
 5 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/umap/static/umap/content.css b/umap/static/umap/content.css
index 41734935..9a6d83f6 100644
--- a/umap/static/umap/content.css
+++ b/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;
 }
 
 /* **************************** */
diff --git a/umap/static/umap/nav.css b/umap/static/umap/nav.css
index 48efa3c8..5b4d8d26 100644
--- a/umap/static/umap/nav.css
+++ b/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) {
diff --git a/umap/templates/umap/about_summary.html b/umap/templates/umap/about_summary.html
index c580cf83..701447ff 100644
--- a/umap/templates/umap/about_summary.html
+++ b/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 %}
diff --git a/umap/templates/umap/map_list.html b/umap/templates/umap/map_list.html
index 672aa6a8..314db6a5 100644
--- a/umap/templates/umap/map_list.html
+++ b/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 %}
diff --git a/umap/templates/umap/navigation.html b/umap/templates/umap/navigation.html
index acde349a..9c17f91d 100644
--- a/umap/templates/umap/navigation.html
+++ b/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>