NaNoWriMo 2010 theme

[cheyinka]

I'm working on a theme for Practicality: it's Layer 165849 (preview) and uses nanowrimo_participant_03_120x90.png from the NaNoWriMo site. (Image rehosted in my own webspace - it's from http://www.nanowrimo.org/eng/webbadges.)

I've gotten permission to use the image as long as the image itself isn't being altered. (I emailed the Office of Letters and Light to ask - should I forward these emails somewhere?) I still need to send in a CLA, but I figured I could get comments on what I have so far while that's on its way.

Comments

[holyschist]

What kind of comments are you looking for? Are you concerned about readability/accessibility?

[cheyinka]

Readability, yeah - it looks okay to me, and I tried to just match the colors from the icon, but if other people think it's unreadable I want to fix that :)

[holyschist]

The blue, yellow, and green are all really hard for me to read on the pink background. I'm also not entirely sure about the readability of the yellow on orange for the titles. (The orange on pink is fine for me.) Of course this is somewhat subjective, but there are mathematical ways to test luminosity contrast between colors as well, which can be helpful.

Because trying to guess readability by eye is so subjective, I find this tool useful for checking if luminosity contrast is sufficient for readability:

http://juicystudio.com/services/luminositycontrastratio.php

For example, if I put in yellow (#fdb713) and pink (#f4e7d9), I get

The contrast ratio is: 1.44:1

Fail: The luminosity contrast ratio is insufficient for the chosen colours (#f4e7d9 and #fdb713).

The NaNoWriMo logo is not a great combination of colors for readability, which makes things tough. I think my personal preference would be to use them more as design accents and use neutral or complimentary, higher-contrast colors for text. It's a tricky one with that logo.

[ninetydegrees]

The NaNoWriMo logo is not a great combination of colors for readability, which makes things tough. I think my personal preference would be to use them more as design accents and use neutral or complimentary, higher-contrast colors for text. It's a tricky one with that logo.

*nods* Black on all their colors but red works very well so you could use them as background colors.

[cheyinka]

Does it look better now? I switched to having the subjects and module titles have backgrounds from the logo, with black text, rather than using those colors for text. (I'm not sold on the link/visited colors, I just was trying to find something dark and blue or green.)

[holyschist]

Definitely a lot easier to read! I like the link/visited colors, although I'm not as big a fan of the green for the post titles. That's a personal preference thing, though.

Over on the lefthand side, right above my user icon in the preview, there's a link to "PROFILE" and above that in orange (not linked) but overlapping the blue box containing "PROFILE", it says "RECENT ENTRIES". I think it might be displaying in the wrong part of the layout? I'm using Firefox 3.6.10 on a Mac.

[cheyinka]

It's doing that for me, too - I think it's something to do with my centering the title and subtitle. (I was hoping it was just me.)

I centered it because it looked strange with the title/subtitle being right-aligned but pushed over 120px by the NaNoWriMo image - this is the CSS I used:

h1#title,
h2#subtitle
{ 
  text-align: center; 
  margin-right: 120px;
  margin-left: 120px;
}

I'm not sure how to fix it.

[holyschist]

Hmmmm. I think it may have something to do with the height of the div (?) containing the header, or possibly something not clearing, but I'm not enough of a CSS whiz to diagnose it by looking at it. Hopefully someone else will have a better idea.

[cheyinka]

As evidence that it's something to do with that, the Recent Entries bit looks fine on my journal, where I don't have a subtitle set.

[holyschist]

Is it supposed to be all the way over to the left or under the title?

[cheyinka]

For two-columns-sidebar-on-left, it should be on the left, I'm pretty sure. (I could be wrong! Someone more familiar with Practicality may know.)

[holyschist]

Okay, yes, it does have something to do with the subtitle, then. I bet it's about the height of the title box, or something not clearing correctly due to the image..

[cheyinka]

Aha! By adding
div.module-wrapper { margin-top: 1em; }
to the CSS, it now pushes the top of the modules down far enough that it looks right - is the red readable on the reddish-gray, though? (It looks weird if I add
h2#pagetitle { background-color: #f4e7d9; }
even if I have padding on the left and right.)

[cheyinka]

hmm. Is it readable if I do
h2#pagetitle { color: #f4e7d9 }? (that's the pinkish color instead of the reddish-orange color)

[holyschist]

Hmm, it looks kind of odd on my screen--staggered. IDK.

[cheyinka]

I agree that it looks pretty odd! Is there a way to have special CSS if there's a subtitle? (That is, I'd leave it as it was if there wasn't a subtitle, and if there was a subtitle, bump the module-wrapper down 1em and put a background on the pagetitle.)

[holyschist]

I think there might be, but I'm really rusty on my CSS so I can't think of what it is. What DW needs is a css_help community or something like that!

There may be a more effective fix than bumping it down 1em, which I suspect is going to display somewhat inconsistently and unpredictably.

[cheyinka]

I think there probably is, but messing around with margins didn't seem to be it.

(I'm somewhat afraid that the answer is going to be "do something in S2 to make the pagetitle display differently"...)

[ninetydegrees]

The fact that the profile module (or any other module put in the first position) is higher than in the default version of the style is caused by this:

div.module-wrapper { margin-top: 2em; }

In the default style, having this module right below the journal header isn't an issue because journal header and module always have different colors.

[cheyinka]

Right, I put that in there so that the pagetitle didn't overlap the first module's title. Otherwise, if there's a subtitle present, the pagetitle seems to be too low.

[ninetydegrees]

Hmm. This didn,t come up during testing. Would you tell me which browser, screen resolution and font size you're using please? I'd'like to file abug for this.

[cheyinka]

I think it's only because I have a background image in the header (and thus moved the h1#title and h1#subtitle over 120px) - I'm not sure it's actually a bug!

Just in case, though, I'm using Firefox 3.6.9 on a 1024x768 screen (but I keep my browser window 940x710 most of the time), and the base font size for non-fixedwidth fonts is set to 16.

[cheyinka]

I appear to have solved it by copying Page::print_global_title() into my theme layer and just adding the image there. Does it look better to you now too?

[holyschist]

Provided there is not meant to be gray between the title bar and the PROFILE / PREVIOUS 20, yes.

[cheyinka]

I don't believe there is meant to be gray there, no.

[holyschist]

I think you got it, then, at least in my browser.

[cheyinka]

I put in a bottom border on the header so that there'd be gray between the title bar and the sidebar / previous 20 / etc. I think it looks a little better with that separation there.

[ninetydegrees]

If your concern is readibility then is a great tool to tell you if there is enough contrast between colors, which most (but not all) people prefer.

I have to say the blue on beige, yellow on red and yellow on beige are hardly readable to me.