#25487: Add an example for cards that are also links -------------------------------------+------------------ Reporter: cypherpunks | Owner: hiro Type: enhancement | Status: new Priority: Medium | Milestone: Component: Webpages/Styleguide | Version: Severity: Normal | Keywords: Actual Points: | Parent ID: Points: | Reviewer: Sponsor: | -------------------------------------+------------------ The [[https://metrics.torproject.org/|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. -- Ticket URL: <https://trac.torproject.org/projects/tor/ticket/25487> Tor Bug Tracker & Wiki <https://trac.torproject.org/> The Tor Project: anonymity online
_______________________________________________ tor-bugs mailing list tor-bugs@lists.torproject.org https://lists.torproject.org/cgi-bin/mailman/listinfo/tor-bugs