Webpage layout

[ocefpaf]

Alexander Birger mentioned:

Also, would you consider switching to a different theme/color scheme to match the other IOOS pages?

That is something we must do. I am guessing that right now the layout is something like this:

http://ioos.github.io/

White background, red headings, etc.

[rsignell-usgs]

I like the styling here better than on http://ioos.github.io. The lettering is too big, and the big red text should be either green, grey, black, blue, but not red:

[kwilcox]

👍 @rsignell-usgs

[abirger]

@rsignell-usgs , @ocefpaf , @kwilcox , it is quite interesting, that about a year ago, when I started that series of IOOS GitHub Pages, and asked for comments on styling, colors, and layout, it was just Shane who provided some. Naturally, I assumed that everyone else was OK with the style. Since then, we have dressed around 10 GitHub Pages in that style; however, it's never too late to mend, and I guess that now is as good as any other time to agree on some particular theme/color palette/etc.
Basically, it's not too big of a deal to adjust css config, but the use of different styling for IOOS Pages is unacceptable in my opinion.

[ocefpaf]

but the use of different styling for IOOS Pages is unacceptable in my opinion.

Indeed. We must strive for a common style. Right now the system-test page is the standard pelican-octopress theme. This theme is used in so many places, my personal blog included, that makes it hard to associate the system-test with the IOOS identity. I will make this a priority and we can work a new style out together.

[rsignell-usgs]

And I promise to provide timely input this time. 😊

[abirger]

Apart from the font size and color, I believe that the current layout of the IOOS Pages is better for one big reason - it has a sliding sidebar that allows the content to use all page space. It may not seem important for a blog but it is very important for a documentation with images and large XML inclusions.
That layout is a part of the Lanyon theme, which was first designed for Jekyll, and later ported to Hugo, Pelican, and other website generators.

[rsignell-usgs]

@abirger, I agree that is nice. I think my main problem is with the colors and the number of different size fonts. I think Tufte had a rule that no more than 3 different combinations of font type/font size should be showing at any time.

So with some minor tune up, I think this would be fine:

1. reduce the number of different fonts
2. change the red to black or dark blue or dark green

[abirger]

@rsignell-usgs , Thanks for pointing to the variety of fonts, it is definitely a mistake: while I've set the header font type to Helvetica, I've just overlooked that the paragraph font remained Times New Roman. I will fix that along with the header color.
And what about the size of the basic paragraph text? Should it be smaller/larger/same?

[rsignell-usgs]

It's too big.
Can't the regular text just be the same as regular web pages?

[abirger]

It sure can, although "regular web pages" may be quite different. Even the message you've referred to has different sizes for writing and publishing.
Anyway, I believe that the base font size is 12pt now. I can go down to, say, 9pt for starters...

[ocefpaf]

This is a first test with the pelican lanyon mentioned by @abirger above. It looks like an IOOS page now. The main issue is the one-page layout. I like the summary+click-to-read better for navigation.

We are missing:

• syntax highlight for notebook code cell;
• search bar;
• disqus integration.

I am clueless which will be less painful: (a) tweak the pelican-octopress layout to look like this, or (b) implement those missing features in the pelicanyan theme.

[rsignell-usgs]

@ocefpaf, where do we see this new one?
https://ioos.github.io/system-test/
looks the same as before. Or do I need to clear something?