rident
Joined 9 years ago
Joined 9 years ago
Might be fun to take all the w3 core styles rebuild them with modern CSS features. Maybe add some HTML5 elements to the test docs as well.
Granted that is still not much but here I've augmented the 546 byte example to render nearly the same results with only 155 bytes. [2]
I've removed rem units as it's easier for all to understand without them. Pixel units scale just fine across the browsers available these days so there's no need for the mental hurdles and explained calculations. I've left them in the source HTML all the same for the sake of testing. The real feature making sites look good across a ever widening array of pixel densities today is this meta tag that was also used in the example HTML: <meta name="viewport" content="width=device-width"> [3]
Setting a font-family generically on the body tag gives the shortest path to consistent, doesn't-look-like-times-new-roman, font styling possible.
I left the unmentioned line-height in because it's a good default. It adds a little basic spacing between wrapping lines of text.
Styling elements that are children of the article to only have bottom margins gives consistent spacing to all content, and since top margins collapse [4] we can avoid dealing with them all together.
[1]: https://jrl.ninja/etc/post.css
[2]: https://jsfiddle.net/gb0ojdsL/8/
[3]: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/View...
[4]: https://css-tricks.com/what-you-should-know-about-collapsing...
The menu is marginally better but the extra density there makes the options run together, especially as counts increase, and lacks room for feature expansion. The grey background is useful also as it gives the page sections depth and context without having to label it. A all white background with various text sizes and lengths is not optimal for supporting more than the example design and projects using more text or with longer titles will suffer.
This design doesn't take into consideration how the homepage of a repo relates to the subpages of a repo. The article mentions showing more files yet the in the current design, file view one click away from the current homepage removes most of the account meta data and shows more files already.
This design also doesn't consider the logged out view which has a large call to action banner to get an account strategically embedded at the top of the code tab. This focal point is somewhat lost in the presented redesign and would likely require rounds of A/B testing to decide on a new content breakpoint for this business need.
5/10 - needs work
You can implement this feature yourself too: https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefe...
Ice age trail - https://www.iceagetrail.org
Superior hiking trail - https://superiorhiking.org/
John Muir trail - https://www.johnmuirtrail.org/
Long trail - https://www.greenmountainclub.org/the-long-trail/
Pacific Crest trail - https://www.pcta.org/
Hayduke trail - http://www.hayduketrail.org/
Arizona trail - https://aztrail.org/