Change colour for active links

This commit is contained in:
Oliver Davies 2017-09-10 20:47:42 +01:00
parent 275e59a780
commit 3fa3c70e51

View file

@ -1,33 +1,33 @@
<header class="w-100 pa3 ph4-ns bg-white"> <header class="w-100 pa3 ph4-ns bg-white">
<div class="db dt-ns mw9 center w-100"> <div class="db dt-ns mw9 center w-100">
<div class="db dtc-ns v-mid tl w-50"> <div class="db dtc-ns v-mid tl w-50">
<a href="/" class="dib f5 f4-ns mt0 mb1 link black-70" title="Home"> <a href="/" class="dib f5 f4-ns mt0 mb1 link" title="Home">
{{ site.title }} {{ site.title }}
</a> </a>
</div> </div>
<nav class="db dtc-ns v-mid w-100 tl tr-ns mt2 mt0-ns"> <nav class="db dtc-ns v-mid w-100 tl tr-ns mt2 mt0-ns">
<a href="/" class="f6 hover-blue link black-70 ml2 ml-m ml4-l dib"> <a href="/" class="f6 hover-blue link ml2 ml-m ml4-l dib {{ page.url == '/.' ? 'black' : 'black-70' }}">
About About
</a> </a>
<a href="/experience" class="f6 hover-blue link black-70 ml2 ml-m ml4-l dib"> <a href="/experience" class="f6 hover-blue link ml2 ml-m ml4-l dib {{ page.url == '/experience' ? 'black' : 'black-70' }}">
Experience Experience
</a> </a>
<a href="/testimonials" class="f6 hover-blue link black-70 ml2 ml-m ml4-l dib"> <a href="/testimonials" class="f6 hover-blue link ml2 ml-m ml4-l dib {{ page.url == '/testimonials' ? 'black' : 'black-70' }}">
Testimonials Testimonials
</a> </a>
<a href="/talks" class="f6 hover-blue link black-70 ml2 ml-m ml4-l dib"> <a href="/talks" class="f6 hover-blue link ml2 ml-m ml4-l dib {{ page.url matches '#^/talks/?#' ? 'black' : 'black-70' }}">
Talks Talks
</a> </a>
<a href="/blog" class="f6 hover-blue link black-70 ml2 ml-m ml4-l dib"> <a href="/blog" class="f6 hover-blue link ml2 ml-m ml4-l dib {{ page.url matches '#^/blog/?#' ? 'black' : 'black-70' }}">
Blog Blog
</a> </a>
<a href="/contact" class="f6 hover-blue link black-70 ml2 ml-m ml4-l dn dib-l"> <a href="/contact" class="f6 hover-blue link ml2 ml-m ml4-l dn dib-l {{ page.url matches '#^/contact/?#' ? 'black' : 'black-70' }}">
Contact Contact
</a> </a>
</nav> </nav>