Add an example for cards that are also links

[cypherpunks]

The ​current Metrics homepage has some custom CSS for the links to the different analysis pages. I've attempted to recreate this with cards instead of completely custom CSS.

The HTML for the card looks like:

<a href="userstats-relay-country.html">
      <div class="card mb-2" style="min-height: 150px;">
        <div class="card-body">
          <h4 class="card-title"><i class="fa fa-users fa-fw" aria-hidden="true"></i> Users</h4>
          <p class="card-text text-muted">Where Tor users are from and how they connect to Tor.</p>
        </div>
      </div>
      </a>

The extra CSS looks like:

<style type="text/css">
/* external links */
a[target="_blank"]:before {
    content: " \f08e";
    font-family: 'FontAwesome';
    font-size:14px;
    position:relative;
    top:1px;
    margin-right:3px;
}

a.btn[target="_blank"]:before {
    content: "";
}

a .card:hover { background-color: #ccc; }

a { text-decoration: none!important; }
</style>

This CSS would need to be modified as currently it touches components that are unrelated, maybe a new class would need to be introduced.

[traumschule]

This is how it looks here with TBB "7.5.6 (based on Mozilla Firefox 52.9.0) (32-bit)". With ff nightly it looked fine. From the source it is impossible to know what is supposed to be shown in the squares. Inspector claimed some of the css values are invalid, for example -webkit-text-size-adjust.

[traumschule]

.. meant the metrics page. Also with ff 61 the icons are shown. Did not try TBB 8. The cause could however also be an unclean TBB dir, will make a fresh one later.

[irl]

Right. I think what we want to do is use PNGs here instead of the icon fonts. The reason that it doesn't work in TBB in high security mode is that the font loading is blocked. This is a problem for Metrics specifically, and a generalised version of the problem exists also for the styleguide, but it shouldn't be a problem in the example. The example probably just has a heading and some text to keep it simple.