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]

:+1: @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. :blush:

[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?

[ocefpaf]

I did not publish it because it is not working 100%. (We need at least the syntax highlight.)

I just pushed this version to https://ocefpaf.github.io/system-test, if you want to inspect it, but it will take a while for GitHub to render it properly.

[abirger]

@rsignell-usgs , @ocefpaf , @kwilcox , please check the http://ioos.github.io/ now. Is that better?

[kwilcox]

@abirger Is there a way to get a Table of Contents on the right hand side (similar to a Wiki) or in the pop-out on the left?

The font-size appears to be 20px:

html {
    font-size: 20px;
}

f

14px looks much better IMO, but could also use some margin changes to clear some whitespace between the left side bar and the content:

[kwilcox]

@abirger you beat me to it! That looks good, but maybe a bit too small (see 14px above).

The CSS change didn't effect many other content pages like: http://ioos.github.io/sos-guidelines/template/SML-DescribeSensor-Network/

[rsignell-usgs]

@abirger, much better. But I agree the text is a bit too small now.

[abirger]

@kwilcox , I updated just one page for now. I will change the others as soon as this page looks good enough. Will make the font larger right now.

[abirger]

@kwilcox , @rsignell-usgs , what about now? Still too small?

[kwilcox]

I like the size now

[abirger]

@ocefpaf , I used Hugo site generator, which has a lot of interesting features (including syntax highlight) that I have not dug in too much. I know that Pelican has close ties with Python, which may be critical in this case, but take a look at Hugo as well.

[abirger]

@kwilcox , then I will propagate the style change to the rest of IOOS pages.

[abirger]

@kwilcox , @rsignell-usgs , @ocefpaf , all IOOS GitHub Pages have been brought to the updated style. Should there be any other issues that need to be fixed, please let me know.

[ocefpaf]

@ocefpaf , I used Hugo site generator, which has a lot of interesting features (including syntax highlight) that I have not dug in too much. I know that Pelican has close ties with Python, which may be critical in this case, but take a look at Hugo as well.

The choice for pelican is the close integration with the IPython notebook. We write only notebooks and they get converted to HTML posts automatically.

I will see what I can do to get the styles as close as possible. If not... re-invent the wheel using Hugo.