the big red bar

[aG0aep6G]

Includes #867.

See the second commit, the big red bar, for a detailed summary of what's changing exactly, and some rationale.

This changes/adapts the logo. But it should be trivial to use the current one instead, if the logo change is not acceptable.

Live version: http://ag0aep6g-dlang.rhcloud.com/ (If you've visited this before, you may have to clear your cache to see the proper logo color.)

Going to make a forum thread about this PR.

Changes since the last incarnation of this (which was discussed in the forum):

• Other bits and pieces I had in there that were independent of the big red bar have since been merged or rejected.
• I darkened the red a bit, because people hinted it was too bright. I can't speak with authority about the exact color. I'd happily follow suggestions here.
• The mobile header changed a little.
• Other very minor things, probably. Haven't been keeping record.

Screenshots

wide:

narrow:

narrow with menu:

[aG0aep6G]

Forum thread: http://forum.dlang.org/post/zycoewkuhbcqtuleeida@forum.dlang.org

[CyberShadow]

Walter is determined to keep the current logo, completely as-is:

#853

So I think any design which touches the logo will not be accepted.

[veelo]

This looks professional. The logo fits the page design very well, both wide and narrow. But the red is very dominant (viewed wide) and D seems married to its current logo; although its button-like styling makes it difficult to use harmoniously on a website (constraints on style and layout).

How does this look when the red is replaced with the same background as the tweets, and the old logo is used?

The "Improve this page" and "Page wiki" buttons cause words to break when viewed narrow, maybe these should vanish when viewed this narrow.

[p0nce]

Looks great!

[aG0aep6G]

How does this look when the red is replaced with the same background as the tweets, and the old logo is used?

Looks like this:
Live: http://ag0aep6g-dlang.rhcloud.com/variants/grey-oldlogo/
Screenshot:

I'm not sure if I like the color, but it's certainly workable.

The "Improve this page" and "Page wiki" buttons cause words to break when viewed narrow, maybe these should vanish when viewed this narrow.

That's the way it's on the current website, too. I didn't touch that. So if that needs fixing, it can be done independently.

[aG0aep6G]

Pull request for the grey version: #876

[JinShil]

I don't think the D Logo in this PR deviates much from the current logo, and I suspect Walter might be ok with it. However, the red menu is a little too much. I suggest combining elements of the gray version and this red version to find a better equilibrium.

Mobile. Keep the "{D Logo} The D Programming Language" and red bar across the top, but make the menu gray.

Desktop. Keep the "{D Logo} The D Programming Language" in the corner, but make the menu gray.

Something along these lines:

[schveiguy]

I like @JinShil's version. I like the red more, but I seem to be in the minority :)

IMO, the new logo is way way better.

[aG0aep6G]

I took @JinShil's suggestion and ended up here:
http://ag0aep6g-dlang.rhcloud.com/variants/grey-newlogo/

I didn't include the search box in the red, because I think it's conceptually closer to the navigation than to the logo/title. This way, the whole red is clickable as one. Also, the search function isn't all that great (it's just a glorified link to google), and I don't feel like putting even more focus on it.

Also colored the border of the logo.

And updated the header of the narrow layout:

[veelo]

I like grey-newlogo best. There is a 1px error in the red border above and below the logo when rendered by Safari on OS-X:

[aG0aep6G]

There is a 1px error in the red border above and below the logo when rendered by Safari on OS-X:

I set some more widths. Can't test. May be fixed now?

[veelo]

I set some more widths. Can't test. May be fixed now?

Did not help. It is the same on iPad.

[schveiguy]

Did some playing on safari. It appears the oddity is the width of the logo overflowing by 1 px into the border.

For example, without the logo enabled as the background:

I'm not well-versed enough with how to fix this. I noted that if I change the width like so:

div#top, div#navigation, div#header, span#d-language-mobilehelper, a#d-language
{
    display: block;
    width: 224.5px;
}

It seems to look right. 224px is what was calculated for 16em. I added a .5 and it seems to fix the issue, but I have no idea how finicky it is.

[aG0aep6G]

There was a similar issue with the header of the narrow layout that also showed here on Ubuntu:

The height of both elements was set to 3.2em, but the right one has display: table and apparently Chrome calculates the height a tiny bit differently then. Solved it by setting the height in em once for the common root, and then going with 100% for the children.

Did the same with the logo width in the wide layout. Did it help?

[schveiguy]

Hm... seems to have caused a different problem (this doesn't look as noticeable to me):

On the right edge, there is a 1 pixel red line outside the border now.

Note that this screenshot was taken on my retina screen, which is why it's bigger than the others. I'm not at work, so my secondary non-retina monitor is not available to test with.

[schveiguy]

To be honest, I think these slight 1 pixel errors on one browser are not worth holding back this change to me.

[MartinNowak]

This looks really good, I'm fine with the gray-oldlogo or the gray-newlogo variant.

[CyberShadow]

I really like grey-oldlogo.

grey-newlogo seems a bit abrupt to me.

We should probably go forward with grey-oldlogo, since everyone (incl. Andrei) seems to like it, and it doesn't go against Walter's veto.

[MartinNowak]

Agreed, let's go on with #876.