Neat idea. Small HTML oops: the semantic link was trying, but missed, so not middle-clickable:

    <div class="box ingredient-box clickable nounderline"
         onclick="location.href='/recipe/refried-beans';">
      <h3>
        <span class="display-block">
          <a href='/recipe/refried-beans'></a>
          Refried Beans
        </span>
      </h3>
    </div>

A more structural HTML, plus modern CSS styling, would work a little better in modern browsers, and degrade better in lightweight and older browsers.