Add selected highlight to top feature menu.

This commit is contained in:
Ben Sturmfels 2021-10-23 09:10:46 +11:00
parent 2a1e00eee2
commit 3c8f363537
Signed by: bsturmfels
GPG key ID: 023C05E2C9C068F0
3 changed files with 18 additions and 10 deletions

View file

@ -23,6 +23,7 @@ html {
--navy: #224c57; --navy: #224c57;
--orange: #ec6343; --orange: #ec6343;
--orange-dim: #e05340; --orange-dim: #e05340;
--orange-dimmer: #ce3520;
} }
/* Some Tachyons-like classes to apply those standard colors. */ /* Some Tachyons-like classes to apply those standard colors. */
@ -685,3 +686,10 @@ details summary {
font-weight: bold; font-weight: bold;
padding: 0.5rem 0; 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);
}

View file

@ -33,17 +33,17 @@
</h1> </h1>
</div> </div>
<div class="w-40-ns mt2 mt4-ns mb2 mb2-ns mh2 pt1 flex flex-wrap justify-center items-center"> <ul id="feature-menu" class="w-40-ns mt2 mt4-ns mb2 mb2-ns mh2 pt1 flex flex-wrap justify-center items-center list">
<span id="menu-icon" class="dn-ns ph2 pointer"> <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> <svg style="color: var(--orange); width: 30px; height: 30px;"><use href="{% static 'img/font_awesome.svg' %}#bars"></use></svg>
</span> </span></li>
<a href="/donate/" class="f5 mh1 mv1 ph2 pv1 ttu b btn-orange">Donate</a> <li class="donate"><a href="/donate/" class="f5 mh1 mv1 ph2 pv1 ttu b btn-orange">Donate</a></li>
<a href="/sustainer/" class="f5 mh1 mv1 ph2 pv1 ttu b btn-orange">Join</a> <li class="sustainer"><a href="/sustainer/" class="f5 mh1 mv1 ph2 pv1 ttu b btn-orange">Join</a></li>
<a href="/vizio/" class="f5 mh1 mv1 ph2 pv1 ttu b btn-orange">Vizio</a> <li class="vizio"><a href="/vizio/" class="f5 mh1 mv1 ph2 pv1 ttu b btn-orange">Vizio</a></li>
<span id="search-icon" class="dib ph2 pointer"> <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> <svg style="color: var(--orange); width: 30px; height: 30px;"><use href="{% static 'img/font_awesome.svg' %}#search"></use></svg>
</span> </span></li>
</div> </ul>
</div> </div>
</header> </header>

View file

@ -1,7 +1,7 @@
{% extends "base_conservancy.html" %} {% extends "base_conservancy.html" %}
{% load cache %} {% load cache %}
{% load humanize %} {% load humanize %}
{% block category %}WhatWeDo{% endblock %} {% block category %}Vizio{% endblock %}
{% block head %} {% block head %}
<link href="/jquery-ui.css" rel="stylesheet" type="text/css"/> <link href="/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link href="/forms.css" rel="stylesheet" type="text/css"/> <link href="/forms.css" rel="stylesheet" type="text/css"/>