notebook : update logo #1125

Closed
wants to merge 3 commits into
from

Projects

None yet

2 participants

@Carreau
IPython member
  • Add 'Notebook' to the "IP[y]: IPython [+Notebook+] Interactive Computing" logo
  • Add link to google webfont droid-sans-mono
  • Make it default for logo <h1>
  • Replace logo text by above image
  • Make it clickable to return to the dasboard
  • closes #607

With the logo as an image the font is not used ... do you want to make it default in some other place of the notebook ? remove it ? Are you against linking the font to google web-font ? We can redistribute it in the static folder.

@minrk
IPython member

Nice, though I would remove the 'interactive computing' subheading, which forces the text to be too small.

Also, I would remove the font-related changes, especially the unused webfont. There's no text in the header, so loading a webfont gets us nothing but extra traffic, and a failed request in offline mode, unless I am mistaken.

@Carreau
IPython member

Removing the subheading and scaling IPython Notebook to the size of IP[y] make the whole thing much to wide. About until third of the #save_widget.
It also have the advantages of beeing exactly the same as the website logo, except for the Notebook word.

@minrk
IPython member

Maybe it's the fact that Droid Sans is just bad at small font sizes. How does just 'Notebook' fit?

@Carreau
IPython member

There, Notebook, rendered by the browser with the correct font, served locally. We can easily change Notebook, to Dasboard or anything else.

Note that the previous one, with a bigger png, scaled with css properties is rendered better by the browser (chrome at least)
see here and zoomed here

@minrk
IPython member

Hm, Image + text may not be a good idea, despite the fact that it does make it nice and easy to change. I'm not particularly fond of shipping fonts, either as webfonts or in our source, just for logo reliability purposes. But maybe that's just because I'm not fond of the font we have chosen, and irrelevant at this point.

Also, the text/logo should be aligned either with either the center or baseline (not sure which) of other content in the header, and it looks right now like it's aligned with the top.

@Carreau
IPython member

Does this look better ? It should exactly match the height of the name input field, and no embeded font.
The font is indeed weird , with rounded letter like o,b,d going below the base line, same with top of some letter like kheigher than N

@minrk
IPython member

Still doesn't look lined up, and may not be the right size, after taking padding into account. Pay specific attention to the line drawn by extending the bottom of the name box. It shouldn't cut off a significant portion of the logo text.

@Carreau
IPython member

Either I don't quite understand what you mean (most probable), or we don't have the same rendering engin because, for me, it is perfectly aligned, the base line doesn't cut anything cf screenshot + guidelines, neither in Chrome, Firefox, or Safari.

@Carreau
IPython member

Maybe it's an optical effect, and after aligning the logo tens of time It doesn't looks unaligned to me, so I've reduced it more. I find it a little too small but maybe it's better.

@minrk
IPython member

Thanks for your patience - you do take your life into your hands, working on these things with nitpicky people like me. This is looking nice.

Try this base.css, and tell me what you think. It makes significantly fewer changes, which I think may account for some of the difference between your experience and mine.

All these issues are a consequence of all the elements in the header being text of moderately similar size, but in different containers. This would not be a problem if they were of sufficiently different size, or were separated by sufficient distance, or if our 'logo' were not plain text.

Now my only disappointment is with the fact that we have chosen a font that makes the 'logo' (IP[y]:) part look very nice, but is pretty poor for actual text. But I think that ship sailed long ago, and is not pertinent here.

Since we intend to ultimately redo most of the UI elements we have right now, I shouldn't be too picky. So I think this can go in as is with my minor adjustments if you think they are sensible, after you revert the bundling of the font, which isn't being used anymore.

Carreau added some commits Dec 7, 2011
@Carreau Carreau notebook : update logo
    Change Notebook logo to IP[y]:Notebook
    Make it clickable to return to the dasboard
    Thanks to @Minrk for the css.

    closes #607
bfa58f4
@Carreau Carreau use exact size logo.
    replace logo by the same but 24pix heightwhich is exactly the css size.
    Less to kb to load but less pretty if user zoom in.
736191b
@Carreau Carreau notebook logo source 59236d3
@Carreau
IPython member

I'm totally fine with your css. I've rebase the whole thing and force pushed.
The last thing i'm hesitating on is used a logo of just the right size (bad when zooming in)
Or use a bigger logo scaled with css (FF make a poor job of scaling-down on debian)

I've also added the logo source, not sure if it is very usefull. All in 3 commits so you can just cherry-pick or throw away when you'll be ok with merging.

@minrk minrk added a commit that referenced this pull request Dec 12, 2011
@minrk minrk Merge PR #1125
Adds IP[y]: Notebook header image and link, instead of plain text.

closes #1125
7384bb9
@minrk minrk added a commit that closed this pull request Dec 12, 2011
@minrk minrk Merge PR #1125
Adds IP[y]: Notebook header image and link, instead of plain text.

closes #1125
7384bb9
@minrk minrk closed this in 7384bb9 Dec 12, 2011
@mattvonrocketstein mattvonrocketstein pushed a commit to mattvonrocketstein/ipython that referenced this pull request Nov 3, 2014
@minrk minrk Merge PR #1125
Adds IP[y]: Notebook header image and link, instead of plain text.

closes #1125
9ad1e44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment