Open foolip opened 2 years ago
Here's a mockup I made in devtools. It needs tweaks to work on mobile/narrow viewport.
Longdesc: At the top of the page there's a dark blue navigation bar. On the left, a white WPT logo. Then 3 links:
web-platform-tests.org
wpt.fyi
wpt.live
The current page is highlighted with a lighter background color.
The injected HTML on wpt.fyi is
<nav style="
background: #003C56;
min-height: 40px;
font: 16px Georgia, serif;
margin: 0 -16px;
"><img alt="WPT" src="https://raw.githubusercontent.com/web-platform-tests/wpt/master/images/wpt-logo/wpt-logo-white.svg" width="40" height="40" style="
vertical-align: middle;
padding: 5px 1em;
display: inline-block;
color: white;
"><a href="https://web-platform-tests.org/">Docs <code>web-platform-tests.org</code></a> <a href="https://wpt.fyi/" class="current">Test results <code>wpt.fyi</code></a> <a href="http://wpt.live">Live tests <code>wpt.live</code></a></nav>
Added CSS:
nav a:focus, nav a:hover {
color: black;
background: #eee;
}
nav a {
color: white;
padding: 1em;
text-decoration: underline;
}
nav a * {
color: inherit;
}
nav code {
font-family: 'Consolas', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
font-size: 0.9em;
font-weight: bold;
}
nav .current {
background: rgb(26.27% 44.04% 55.33%);
}
Actually removing the URL from the link text is probably better, as it is easier to read the links and it takes up less space (for narrow viewports).
Thanks @zcorpan, I like these mockups! For wpt.live, would you suggest showing this navigation only in directory listings, or how do we avoid it interfering with tests?
Yeah only directory listings, not in tests.
Feedback from @isaacdurazo (who designed the logo)
- Remove the underline and use that for the hover state along with the background color change you are using.
- Personal preference: Position the main nav items to the right
- Is it me or the font size is larger than what’s being use in the body text? if so I would reduce it
The body text is different on the different sites, but on web-platform-tests.org (which uses the same font-family), the body text is 17px. the nav bar font-size is 16px.
Suggested by @fantasai in https://twitter.com/fantasai/status/1438998571311841281:
I think this is a good idea. For wpt.live there is a challenge of not messing with reftests, but we could at least do it for all directories, including the root.
cc @KyleJu