Redesign the homepage

[domenic]

Closes #90 by subsuming the work there. Helps with #59 as at least the homepage is now mobile-friendly. Helps with some of the items noted in #149.

Substantive changes:

• "Join" renamed to "GitHub" (see Update links and layouts to harmonize with revised structure #149)
• "News" renamed to "Blog"
• "Working Mode" replaced with "Policies" (see Update links and layouts to harmonize with revised structure #149)
• "Twitter" added

---

Thank you @o-t-w for your original design in #90! This is all-new code, but based on your visual ideas.

[domenic]

I forgot the most important part: a preview! Most of the links will not work (because I haven't set up a full nginx server to handle our extension-less files), but you can see the result at https://whatwgorg-wjjgptrgid.now.sh

[domenic]

I guess this isn't quite mergeable as-is because /images currently is an alias for images.whatwg.org. I'm not sure what our plan is there; thoughts appreciated.

[annevk]

I don't think we should make images/ an alias for images.whatwg.org if we need whatwg.org-specific images. We should just dedupe the resources and that's that.

[annevk]

Couple design points:

• Heading could use more space at the top.
• Grey looks rather plain.
• Should experiment a bit more with font weights and different fonts if you haven't already. Also looks rather plain at the moment.
• I wonder if we should give the footer have a normal font size to make it a bit more readable.

[o-t-w]

Sorry for going AWOL. I was moving house and changing jobs at the same time and feeling very stressed!

• I agree the top definitely needs slightly more padding.
• I like the grey - its undistracting.
• I always value the speed/performance of a website over visual flourishes, which is why I didn't use a font that the users browser will need to download. The majority of free fonts in the world are utter garbage, and licensing a decent one can be prohibitively expensive. But I agree the current font is slightly bland. Using system fonts can prevent the extra HTTP request while still looking more stylish: html {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif }
• Font-sizing is important to establishing a visual hierarchy. The small size of the type in the footer denotes that it is of less importance - its less likely to be information that visitors would be looking for. It might be good to change the font-sizing of the footer to use em units instead of pixels so that user browser-settings for font-size are respected. That way it is accessible for people with bad eyesite, while still respecting the design.

[domenic]

I don't think we should make images/ an alias for images.whatwg.org if we need whatwg.org-specific images. We should just dedupe the resources and that's that.

The issue is that it's already at 301 redirect, so I'm not sure how to proceed.

Heading could use more space at the top.

Should experiment a bit more with font weights and different fonts if you haven't already. Also looks rather plain at the moment.

In general with this and other design points, I'd rather land then iterate, or at least get very specific suggestions; I don't feel equipped to respond to feedback like this myself.

It might be good to change the font-sizing of the footer to use em units instead of pixels so that user browser-settings for font-size are respected.

My understanding is that these days pixels vs. ems make no difference in this regard.

[foolip]

The issue is that it's already at 301 redirect, so I'm not sure how to proceed.

How about make it a 302 and wait for at least a week, or as long as it takes for this PR to be done?

[foolip]

Actually, per https://stackoverflow.com/a/21396547 that might not work. Maybe we should just stop using permanent redirects entirely, except for HTTP->HTTPS?

[domenic]

It's also unclear to me how often people might hit those URLs. E.g. I imagine a lot of the old specs include /images URLs.

Maybe we should create a new directory, e.g. /img?

[foolip]

Yes, /images is linked a lot from specs/, but also demos/, news/ and https://whatwg.org/style/tabbed-pages.

If we did ram through the redirect caching we'd still end up with a bunch of old cruft in the directory, so I don't have a strong opinion, whatever works.

[annevk]

Yeah I'm not sure why we made it a redirect. We should revert that. Too many old links.

[foolip]

Yeah I'm not sure why we made it a redirect.

That was me in commit 9595990, now it's clear the other way around would have been better.

I've sent whatwg/misc-server#66 to make this less painful if we change it.

[domenic]

Updated based on feedback; new preview at https://whatwgorg-ymcoicnlew.now.sh

[domenic]

Oops, typoed the extra spacing, see https://whatwgorg-llsduqszfy.now.sh. (It now matches @o-t-w's original.)

[foolip]

I think this looks pretty good!

The amount of padding above/below the logo/title looks a bit uneven to me, can we try a bit more on top?

In the dark grey boxes starting with "Participate", a bit more horizontal padding would be nice, maybe not as much as the vertical, but a tad. At least the width of the lower case "y" or "s" that the strings end with.

The green gradients aren't bad, certainly better than solid WHATWG green, but a solid #00981B would also look OK. What do others think?

[domenic]

I'd prefer concrete CSS suggestions to "how about maybe changing this a bit?" :). I don't feel qualified to translate such things.

[annevk]

Here is some CSS that makes it look a little better and gives the links hover/focus effects. Not entirely sure we also need visited styling here. Probably okay without...

* {
 box-sizing: border-box;
}

:link {
 color: #00F;
}
:visited {
 color: #0E388C;
}

html {
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 background-color: rgb(235, 235, 235);
 --whatwg-green: #3A7908;
}

body {
 max-width: 900px;
 margin: 0 auto;
 padding: 0;
 display: flex;
 flex-direction: column;
 min-height: 100vh;
}

body > *:not(footer):not(script) {
 margin-bottom: 40px;
}

header {
 margin:2em 0;
 display: flex;
 align-items: center;
}

header > hgroup {
 margin-left: 20px;
}

header > hgroup > h1 {
 margin: 0;
 font-weight: normal;
}

@media (max-width: 600px) {
 header > hgroup > h1 {
  font-size: 19px;
 }
}

header > hgroup > h2 {
 font-size: 17px;
 margin: 0;
 color: rgb(40, 40, 40);
 font-weight: normal;
 margin: 5px 0;
}

#the-standards > ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
}

#the-standards li {
 border: solid var(--whatwg-green) 2px;
 border-radius: 7px;
 letter-spacing: 0.25px;
 font-weight: bold;
 background-color: white;
}

#the-standards li:not(:last-of-type) {
 margin-bottom: 15px;
}

#the-standards a {
 color: var(--whatwg-green);
 text-decoration: none;
 padding: 4px 30px;
 height: 64px;
 display: flex;
 align-items: center;
}

#the-standards a:hover, #the-standards a:focus {
  transition:.2s; 
  padding-left:50px;
}

#the-standards a::before {
 display: inline-block;
 width: 27px;
 height: 15.4px;
 background: url(/img/arrow.svg);
 content: "";
 margin-right: 21px;
 vertical-align: middle;
 background-repeat: no-repeat;
}

@media (min-width: 600px) {
 #self-explanatory-links {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
 }
}

#self-explanatory-links > a {
 padding: 10px;
 text-align: center;
 border: 8px solid rgba(58, 121, 8, 0.2);
 background: linear-gradient(var(--whatwg-green), #00981B);
 background-clip: padding-box;
 grid-column: span 3;
 text-decoration: none;
 color: white;
 font-size: 17px;
 letter-spacing: 0.3px;
}

#self-explanatory-links > a:hover, #self-explanatory-links > a:focus {
  transition:.2s;
  transform:scale(1.1);
}

@media (max-width: 600px) {
 #self-explanatory-links > a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 15px;
 }
}

#links-with-explanations {
 /* Grow into the extra space before the footer to make the footer stick to the bottom. */
 flex: 1;
}

#links-with-explanations a {
 padding:0 10px;
 display: flex;
 flex-wrap: wrap;
 margin-bottom: 15px;
 background-color: #333;
 align-items: center;
 justify-content: space-between;
 border-radius: 4px;
 color: white;
 min-height: 54px;      
 text-decoration: none;
}

#links-with-explanations a:hover, #links-with-explanations a:focus {
  transition:.2s;
  background-color: #000;
}

#links-with-explanations a::before {
 display: inline-block;
 width: 30px;
 height: 30px;
 content: "";
 margin: 12px 20px 12px 8px;
 vertical-align: middle;
 background-repeat: no-repeat;
}

#participate::before {
 background: url(/img/participate.svg);
}

#irc::before {
 background: url(/img/irc.svg);
}

#twitter::before {
 background: url(/img/twitter.svg);
}

#checker::before {
 background: url(/img/checker.svg);
}

#links-with-explanations a > strong {
 margin-right: auto;
}

#links-with-explanations a > p {
 margin-left: auto;
 padding-right: 8px;
}

@media (max-width: 600px) {
  #links-with-explanations a > p {
    width: 100%;
    padding-left: 12px;
  }
}

footer {
 border-top: 1px solid black;
 text-align: center;
 font-size: 12px;
}

footer small {
  /* Semantically it's small, but the footer is already small, so don't change the font size. */
  font-size: inherit;
}

footer > * {
 font-style: normal;
 margin: 12px 0;
}

[domenic]

Alrighty, applied those plus some further small tweaks for mobile. Thanks especially for the hover states; those were conspicuously missing.

Thoughts? I'll take a break from trying to work on this and #154 in tandem; let's land this first then I can work on that on top of it.

[foolip]

@domenic, is there a preview URL?

[domenic]

I made one but forgot to paste it: https://whatwgorg-ypuhyslfsp.now.sh

[annevk]

Note that I made a minor change to the color name to make it consistent with other color names.

[domenic]

I think of it more as a variable name than a color name, but shrug.

I'll give people some more time to check it out before merging. Woohoo!