<%
  styles = Styler.new do
    style :container, %w(bg-white black-80 tc pv4 avenir)
    style :logo, %w(bg-black-80 ba b--black dib pa3 w2 h2 br-100)
    style :title, %w(mt2 mb0 baskerville i fw1 f1)
    style :subtitle, %w(mt2 mb0 f6 fw4 ttu tracked)
    style :links, %w(bt bb tc mw7 center mt4)
    style :link do |opts|
      hover_bgs = { 
        "lightest_blue" => "hover-bg-lightest-blue",
        "light_green" => "hover-bg-light-green",
        "light_blue" => "hover-bg-light-blue",
        "light_pink" => "hover-bg-light-pink",
        "light_yellow" => "hover-bg-light-yellow"
      }
      hover_bg_class = hover_bgs.fetch(opts[:hover_bg].to_s) { hover_bgs.first }
      %W(f6 f5-l link bg-animate black-80 #{hover_bg_class} dib pa3 ph4-l)
    end
  end
%>

<header class="<%= styles.container %>">
  <a class="<%= styles.logo %>">
    <svg class="white" data-icon="skull" viewBox="0 0 32 32" style="fill:currentcolor">
      <title>skull icon</title>
      <path d="M16 0 C6 0 2 4 2 14 L2 22 L6 24 L6 30 L26 30 L26 24 L30 22 L30 14 C30 4 26 0 16 0 M9 12 A4.5 4.5 0 0 1 9 21 A4.5 4.5 0 0 1 9 12 M23 12 A4.5 4.5 0 0 1 23 21 A4.5 4.5 0 0 1 23 12"></path>
    </svg>
  </a>
  <h1 class="<%= styles.title %>">Title</h1>
  <h2 class="<%= styles.subtitle %>">Your amazing subtitle</h2>
  <nav class="<%= styles.links %>">
    <a class="<%= styles.link(hover_bg: :lightest_blue) %>" href="/">Home</a>
    <a class="<%= styles.link(hover_bg: :light_green) %>" href="/portfolio">Portfolio</a>
    <a class="<%= styles.link(hover_bg: :light_blue) %>" href="/shop">Shop</a>
    <a class="<%= styles.link(hover_bg: :light_pink) %>" href="/about">About</a>
    <a class="<%= styles.link(hover_bg: :light_yellow) %>" href="/contact">Contact</a>
  </nav>
</header>