styleguide issueshttps://gitlab.torproject.org/tpo/web/styleguide/-/issues2020-12-11T15:35:13Zhttps://gitlab.torproject.org/tpo/web/styleguide/-/issues/13Put a banner when detecting old versions of the Tor Browser on the website ad...2020-12-11T15:35:13ZcypherpunksPut a banner when detecting old versions of the Tor Browser on the website advising to updateThis is in the same spirit that Mozilla does, for example: https://www.mozilla.org/en-US/security/advisories/mfsa2017-22/
```
Your Firefox is out-of-date.
Get the most recent version to keep browsing securely.
Update Firefox
```This is in the same spirit that Mozilla does, for example: https://www.mozilla.org/en-US/security/advisories/mfsa2017-22/
```
Your Firefox is out-of-date.
Get the most recent version to keep browsing securely.
Update Firefox
```donutsdonutshttps://gitlab.torproject.org/tpo/web/styleguide/-/issues/12Differentiate between internal and external links2022-03-01T18:42:03ZirlDifferentiate between internal and external linksCurrently Tor Metrics opens external links in a new tab. This is bad for two reasons:
1) It gives external pages access to window.opener.location which could be used to redirect Tor Metrics users discreetly to a non-Tor Metrics site tha...Currently Tor Metrics opens external links in a new tab. This is bad for two reasons:
1) It gives external pages access to window.opener.location which could be used to redirect Tor Metrics users discreetly to a non-Tor Metrics site that does malicious things but looks like Tor Metrics
2) It is bad for accessibility where users may use assistive technology that is upset when new tabs appear
3) It is bad for users that might not want new tabs all over the place and are perfectly capable of using the back button
It would still be good to be able to distinguish visually where there are external vs. internal links. I will leave the actual design/implementation up to UX people as I have no suggestions that I think are great.
The following StackOverflow post talks about a CSS selector that can be used for external links:
https://stackoverflow.com/questions/5379752/css-style-external-linkshttps://gitlab.torproject.org/tpo/web/styleguide/-/issues/9Add a new icon for "Obsolete"2023-04-13T16:27:22ZirlAdd a new icon for "Obsolete"The only concept I can think of is a garbage can? There's probably something that can better represent this, and that is less offensive to obsolete software.
This would be used for an additional flag on Relay Search, see the parent ticket.The only concept I can think of is a garbage can? There's probably something that can better represent this, and that is less offensive to obsolete software.
This would be used for an additional flag on Relay Search, see the parent ticket.https://gitlab.torproject.org/tpo/web/styleguide/-/issues/8Give clear guidelines for the page footer2022-01-31T18:56:40ZcypherpunksGive clear guidelines for the page footerI guess we want consistency with page footers across all the portals. There is currently no guidance on how to construct footers. Maybe an HTML template (similar to the templates included with Bootstrap) would help here.
Note that some ...I guess we want consistency with page footers across all the portals. There is currently no guidance on how to construct footers. Maybe an HTML template (similar to the templates included with Bootstrap) would help here.
Note that some projects may have additional text that they may have to add to footers, e.g. metrics adds text about supporting grants.https://gitlab.torproject.org/tpo/web/styleguide/-/issues/7Add an example for navigation within the site2021-10-06T19:27:03ZcypherpunksAdd an example for navigation within the siteSome of this is based on the presentation at the dev meeting and it may be that I've misunderstood it.
The top navigation in line with the brand and download button is to be used for inter-portal navigation, which makes sense, but I als...Some of this is based on the presentation at the dev meeting and it may be that I've misunderstood it.
The top navigation in line with the brand and download button is to be used for inter-portal navigation, which makes sense, but I also saw a design for the dev portal that underneath the purple block at the top of the page had navigation to move between sections of the portal. Can an example for this be added to the styleguide? It doesn't seem to be implemented in any of the nav CSS classes in the CSS.
This would be used for metrics to move between "Analysis, News, Sources, etc.".https://gitlab.torproject.org/tpo/web/styleguide/-/issues/6Add an example for cards that are also links2022-05-04T22:00:37ZcypherpunksAdd an example for cards that are also linksThe [[Metrics homepage](https://metrics.torproject.org/|current)] 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 look...The [[Metrics homepage](https://metrics.torproject.org/|current)] 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.