Open ocefpaf opened 8 years ago
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:
:+1: @rsignell-usgs
@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.
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.
And I promise to provide timely input this time. :blush:
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.
@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
@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?
It's too big.
Can't the regular text just be the same as regular web pages?
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...
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:
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.
@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?
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.
@rsignell-usgs , @ocefpaf , @kwilcox , please check the http://ioos.github.io/ now. Is that better?
@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:
@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/
@abirger, much better. But I agree the text is a bit too small now.
@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.
@kwilcox , @rsignell-usgs , what about now? Still too small?
I like the size now
@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.
@kwilcox , then I will propagate the style change to the rest of IOOS pages.
@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 , 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.
Alexander Birger mentioned:
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.