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.

[torlove]

Hi all,

It is suspected that Hiro has left the project, given that he never responds to tickets anymore.

Not having Font Awesome operable on the higher security setting is a problem.In another ticket on this subject I have asked:

• Can Font Awesome be supported by being packaged into Tor Browser itself? If not, due to licencing, should we aim to produce our own (minimal) version?
• Can we provide some support for popular webfonts in a similar manner?

[irl]

Replying to torlove:

It is suspected that Hiro has left the project, given that he never responds to tickets anymore.

hiro does lots of things, not just the styleguide. Right now I'm not working on this project as I have higher priorities so this ticket isn't that urgent. Still, if you wanted to come up with a patch to the styleguide then someone could look at it. I've not abandoned this project, we will do it eventually.

Not having Font Awesome operable on the higher security setting is a problem.In another ticket on this subject I have asked:

This is off-topic on this ticket. If you're already discussing it somewhere else then please keep the discussion there, or if it was also off-topic there then we need a new ticket for it.