From 3c8f3635372b8c62453d38eb9bb4211cc51a09af Mon Sep 17 00:00:00 2001
From: Ben Sturmfels <ben@sturm.com.au>
Date: Sat, 23 Oct 2021 09:10:46 +1100
Subject: [PATCH] Add selected highlight to top feature menu.

---
 www/conservancy/static/css/conservancy.css     |  8 ++++++++
 .../templates/base_conservancy.html            | 18 +++++++++---------
 www/conservancy/templates/base_vizio.html      |  2 +-
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/www/conservancy/static/css/conservancy.css b/www/conservancy/static/css/conservancy.css
index f65932aa..3ec3722c 100644
--- a/www/conservancy/static/css/conservancy.css
+++ b/www/conservancy/static/css/conservancy.css
@@ -23,6 +23,7 @@ html {
   --navy: #224c57;
   --orange: #ec6343;
   --orange-dim: #e05340;
+  --orange-dimmer: #ce3520;
 }
 
 /* Some Tachyons-like classes to apply those standard colors. */
@@ -685,3 +686,10 @@ details summary {
   font-weight: bold;
   padding: 0.5rem 0;
 }
+
+.conservancy-sustainer #feature-menu li.sustainer a,
+.conservancy-donate #feature-menu li.donate a,
+.conservancy-vizio #feature-menu li.donate a
+{
+  background-color: var(--orange-dimmer);
+}
diff --git a/www/conservancy/templates/base_conservancy.html b/www/conservancy/templates/base_conservancy.html
index c009d875..c82b0144 100644
--- a/www/conservancy/templates/base_conservancy.html
+++ b/www/conservancy/templates/base_conservancy.html
@@ -33,17 +33,17 @@
           </h1>
         </div>
 
-        <div class="w-40-ns mt2 mt4-ns mb2 mb2-ns mh2 pt1 flex flex-wrap justify-center items-center">
-          <span id="menu-icon" class="dn-ns ph2 pointer">
+        <ul id="feature-menu" class="w-40-ns mt2 mt4-ns mb2 mb2-ns mh2 pt1 flex flex-wrap justify-center items-center list">
+            <li><span id="menu-icon" class="dn-ns ph2 pointer">
             <svg style="color: var(--orange); width: 30px; height: 30px;"><use href="{% static 'img/font_awesome.svg' %}#bars"></use></svg>
-          </span>
-          <a href="/donate/" class="f5 mh1 mv1 ph2 pv1 ttu b btn-orange">Donate</a>
-          <a href="/sustainer/" class="f5 mh1 mv1 ph2 pv1 ttu b btn-orange">Join</a>
-          <a href="/vizio/" class="f5 mh1 mv1 ph2 pv1 ttu b btn-orange">Vizio</a>
-          <span id="search-icon" class="dib ph2 pointer">
+            </span></li>
+            <li class="donate"><a href="/donate/" class="f5 mh1 mv1 ph2 pv1 ttu b btn-orange">Donate</a></li>
+            <li class="sustainer"><a href="/sustainer/" class="f5 mh1 mv1 ph2 pv1 ttu b btn-orange">Join</a></li>
+            <li class="vizio"><a href="/vizio/" class="f5 mh1 mv1 ph2 pv1 ttu b btn-orange">Vizio</a></li>
+            <li><span id="search-icon" class="dib ph2 pointer">
             <svg style="color: var(--orange); width: 30px; height: 30px;"><use href="{% static 'img/font_awesome.svg' %}#search"></use></svg>
-          </span>
-        </div>
+            </span></li>
+        </ul>
       </div>
     </header>
 
diff --git a/www/conservancy/templates/base_vizio.html b/www/conservancy/templates/base_vizio.html
index c5600a31..10508e0a 100644
--- a/www/conservancy/templates/base_vizio.html
+++ b/www/conservancy/templates/base_vizio.html
@@ -1,7 +1,7 @@
 {% extends "base_conservancy.html" %}
 {% load cache %}
 {% load humanize %}
-{% block category %}WhatWeDo{% endblock %}
+{% block category %}Vizio{% endblock %}
 {% block head %}
 <link href="/jquery-ui.css" rel="stylesheet" type="text/css"/>
 <link href="/forms.css" rel="stylesheet" type="text/css"/>