Responsive tachyons header

header.html

    <header class="w-100 z-max h3 bg-purple fixed top-0">
  <div class="dt ph3 w-100 center h-100">
    <div class="dtc v-mid tl w-50">
      <a href="/" class="f5 f4-ns fw6 link white-70" title="Home">EC1 WEB</a>
<small class="white-70 fw2">tagline goes here</small>
 </div>
    
    <nav class="dn dtc-ns v-mid w-50 tr">
      <a title="home" href="index.html"
          class="f6 fw6 glow link white o-70 mr2 mr3-m mr4-l">
        home
      </a>
      <a title="style" href="style.html"
          class="f6 fw6 glow link white o-70 mr2 mr3-m mr4-l">
        style
      </a>
      <a title="layout" href="layout"
          class="f6 fw6 glow link white o-70 mr2 mr3-m mr4-l">
        layout
      </a>
      <a title="about" href="about"
          class="f6 fw6 glow link white o-70 mr2 mr3-m mr4-l">
        about
      </a>
      <a title="contact" href="contact.html"
          class="f6 fw6 glow link white o-70">
        contact
      </a>
    </nav>
    <div class="dn-ns dtc v-mid w-50 tr"><i class="material-icons white-70">menu</i></div>
  </div>
</header>