Want to take part in these discussions? Sign in if you have an account, or apply for one below
Vanilla 1.1.10 is a product of Lussumo. More Information: Documentation, Community Support.
We are in a position where we need to make some style changes to the nLab, and I have made a pull request on the nLab GitHub repo to implement these are a basic level.
I will be updating the logo that appears at the top of the nLab page (the one that looks like a part of a gerbe), at least to something temporary for now, and then we can consider designs etc afterwards for something more permanent.
I add that in the private Steering Committee discussion that lead to this, Mike, Todd and Urs are all supporting these changes. David C and Toby haven’t yet had a chance to respond to these, but I offer apologies instead of asking permission. Colours and fonts can always be changed to other values.
Hi David, I guess you saw my comments at the pull request, but I think they were misunderstood, so I’ll reply here. What I was trying to say was that the code change in the pull request will not implement what you have in mind (to double check I actually made your change live temporarily; nothing changed, as expected). This should be done through CSS for the actual web in question where possible. Anyone with the password for the main nLab can do it, by clicking on ’Edit web’ at the HomePage. Or I can do it if preferred.
Yes, it should be done through CSS for the main lab (please do) and also in the code base. There are Reasons. More later.
And I’m not saying they are Good Reasons, but they are Reasons :-/
Hmm, I see a colour change. Are the changes now live? Thanks for doing this, Richard.
Yes, I have tried to make them live now.
I suppose it is not hard to guess the reasons, but it will be good to enlighten the entire community.
Regarding the pull request David, if you could tidy it up a bit that would be great before merging. A quick way to do it in this case should be to do git rebase -i 301b8d on your local branch. This will bring up something which lists your commits at the top. Just change pick to drop for the three commits that you wish to get rid of, and then do a git push --force once the rebase is carried out. Alternatively, you could squash all the commits into one.
(One thing to note is that the colour chosen now is not available in the ’Edit web’ pane, it was necessary to do it directly in the database. We should not in fact use ’Edit web’ from now on, because this will reset the colour to something different).
I was editing the files on GitHub itself, not in a local copy. As far as I can tell you cannot squash commits online. I don’t want to download the repo at this time.
Ah! I will see if I can tidy up the branch myself later.
Thanks!
Did you get to change the fonts in the CSS? I used my browser’s style inspector and we are still on the old font style (yes, it won’t make a difference for everyone, but that is beside the point. No one can claim ownership of generic sans serif fonts, but specific font choices, maybe)
Not yet, that one I think is correct to do in code, so I thought I’d do it after merging.
OK, cool. I think I caught all the instances of the sans family for body text and the serif family for page titles/various levels of headings.
Have you looked into the mathematics support in those fonts by the way (i.e. to what extent they include unicode mathematics symbols)?
Why would we be using body text for Unicode math symbols? Aren’t these covered by the STIX (etc) fonts that we currently use? We are not changing those.
Jacques points out we can edit this line to make ’Green’ point to our new chosen, darker green.
I think that if we’re changing this, I’ll just get rid of the list. :-) Apologies, not had time to merge the pull request yet.
No worries. I’ve also made a temporary logo—not a good one—and have an svg file that may or may not fit right in the place of the current one. I will wait until the first update is done, then get the logo sorted.
OK, here is a more general thread for discussing the visual changes, this thread can stay as the place to discuss the GitHub and technical side of the change.
I have now merged the pull request, deployed it, and tidied up the git history.
Re #17: for example we have done some experiments with our own rendering of mathematics. Ideally, it would be great if the same font were used for mathematics and non-mathematics where possible. Some fonts do have quite extensive mathematics unicode support.
Thanks!
OK, so I had some advice back from our local person who is knowledgeable about copyright. The painting is apparently in the public domain in Australia, but not in the USA or EU (or UK). However, there is a case for fair use, if not a watertight one. It’s the kind of thing that probably only a court could give a watertight judgement on, which is a pain.
I for one, though, am now comfortable in using the new logo I designed, and if the Matisse Estate wish to send us a DCMA, then we will deal with it as appropriate. I will record the factors which are in our favour as far as fair use goes.
I’m not so sure about merchandising, since that involves selling stuff, so I won’t be rushing to that, to avoid issues of profit/not-for-profit. I don’t mind producing stickers that are a give-away, though.
Sounds good. So you know how to proceed? Installing the picture? Or whatever it takes.
I think so.
I need to make a pull request to put my SVG code in place of the existing image (here). The only thing I’m wondering about, which might need Richard to fiddle with, is making sure the colours survive, and are not overwritten to be the theme colour, at least on the nLab. Then we can think about what to do with the colours for the other webs. As mentioned above, I’m in favour of the logo becoming monochromatic, to distinguish them from the main site, but that’s extra effort for Richard as I don’t know how to do that.
More precisely, line 101 here is what imports the image, and my svg will probably need some work, as Jacques’ image has attributes
width="100%" height="100%" viewBox='0 -1 180 198'
whereas mine has
height="757.12" width="794.62"
Simply changing the code does not scale my image! Here is a resource I found, so I can come back to it.
Back to the colour issue: looking at the Instiki logo, the outline path uses this attribute:
fill="#<%= @web ? @web.color : "262" %>"
and so I think it may be possible to change the three paths I have to have the analogous attributes, but using my colours. The @web ? @web.color stuff looks like it will take the web colour and use it, but otherwise default to the given colour (here rgb#226622). One caveat, though: I’m not sure this will work out of the box on the main nLab. Richard has done some tweaking to get the colour we now have (the darker green) to work.
Hi David, if you can send me the picture in the correct size, I will do what is needed to deploy it.
@Richard
OK, here is the cleaned and resized version. For some reason I don’t know about, the software uses the odd extension .html.erb (some kind of Ruby thing?) rather than svg, so that would have to be changed.
Thanks!
Hi David,
just looking at it again makes me wonder if the green and possibly also the blue should be a bit lighter. Cause in small size, it now tends to looks like two darkish blobs plus a red one. At least here on my phone.
Hi Urs,
let’s wait and see it in place. I can do tweaks then, since the hard part is getting the logo in.
Also, here is the public domain declaration for the logo itself, and the argument for Fair Use for sampling from La Gerbe under US law. By a fluke, it turns out the artwork is in the public domain here in Australia! We don’t have as strong fair use/dealing provisions here, so that helps.
I see the new logo is in!
Also, don’t forget to change the little icon that appears in the browser tab. I don’t know where this is in the code.
Hi Urs, I think you were right, the colour of the green got mixed up when I was setting it. In the SVG code it’s set using hexadecimal, but I used Inkscape’s colour tool, which uses decimal. I’ve fixed up the version in my GitHub Sandbox repo
@Richard sorry! Can you substitute the fixed version! The first path should have colour #226622, not #164216.
Yes, I have now switched to the new logo and new icon, incorporating the change in #34. See github.
A couple of notes:
The SVG that you linked to was not of the correct size, David. One way to see this is just to save the graphic in a file locally and open that file in a browser. I added width and height attributes to get it to be the right size.
I now just embed the SVG file directly, rather than using a .html.erb file. The .html.erb files are something special to Rails, they are kind of like templates for HTML pages, but where one can mix in some (Ruby) programming. Similar things exist in other frameworks.
For the icon to show, one will probably need to delete one’s browser history/cache. Chromium on Linux seems to manage without that.
Let me know if the logo should be a single colour on the other webs.
@Alitzer yes. I set when it should have been , which is what the nLab theme is.
I think setting the logo to the single theme colour on the other webs would be good, so as to make a clear visual distinction, while keeping the branding. Looking at Todd’s personal web, for instance, the colours now clash (Todd has the “old nLab/Instiki green” theme). Thanks!
The logo is not positioned so well on a mobile yet, I will try to improve when I get the chance.
Further in the vein of adopting a more independent style of the nLab:
Recall that, recently, Jake Bian wrote a plugin that changes the Lab layout to something he finds more pleasing (sites.google.com/keplr.io/kan).
I find it more pleasing, too. It looks more like professional maths textbook layout.
How about we take this as a basis for a new layout? For starters we could just adopt it as the default (if that’s possible) and then tweak it to the extent we find desireable.
I definitely would like to improve the styling. We invited Jake to work on it, but I guess he has not found the time. With regard specifically to Jake’s style, I think some people, Mike for instance if I recall correctly, were fairly firmly against it being the default.
Just checked with Jake. He says he is very busy with some other tasks, but could offer to implement the style change by end of April.
I’d say we go for that.
Sounds very nice! I am mainly working currently, as time allows, on a big backend change: removal of Maruku, and ’local’ rendering; so would be great if somebody else could focus on frontend stuff.
I’d say we go for that.
I think it’s worth a go, modulo the concerns as in #41.
Glancing at it again now, I think there is also too much whitespace everywhere. The whole thing looks double-spaced like a PhD thesis. But, again, we should be able to fix that.
Looks like Jake has already implemented it and sent a pull request here.
Hi Jake, fantastic! Thanks very much for this! I completely agree that it is better to merge and tweak afterwards. I will check and merge this evening European time hopefully.
As you will already know unless you’re reading this before having checked the nLab, it’s live now!
It’s a big change, and will take some getting used to for most I guess! But my first impressions are very positive! So much cleaner, aesthetically pleasing, and more modern. One thing I especially like is use of a web version of computer modern as font. This would work very well with one long term project to replace MathJax with some custom HTML/CSS for mathematics displaying when MathML cannot be used, because the body text and mathematics will be the same font.
Let’s discuss here tweaks that people would like (or if people would like to revert to the old design, or whatever).
One small issue I see is that MathJax in some cases seems now to use too large a font. See for example the diagram in Definition 2.2 at comma category in a browser such as Chromium where MathJax is used.
Ah, but of course, Chromium will get getting proper MathML at some point in the not-too-distant future. Though until then it would be nice to look consistent.
Thanks, Jake! (and Richard :-)
Yes, but there are plenty of browsers other than Chromium that may not get MathML support so quickly, for example my default browser (qutebrowser)!
Another possible tweak for me might be that the menu items might be slightly too light. Things like ’Discuss this page’ are quite important parts of the nLab functionality. But I’m happy to hear what others think, it might only be me.
Thanks very much Jake! It is a real pleasure to have someone as good as you contributing! You’ve already been very generous with your time, but just in case you’re willing to spend slightly more, something that has been asked for for a while has been to change the behaviour of the floating context menus on the right, basically so that they expand when clicked on and stay expanded (presumably contracting if one clicks on it again), without any hover functionality. See here and the other thread that is linked to in that one. I don’t suppose you would be able to make that tweak as well for us now?
Perfect!
By the way, another really nice consequence of the new styling is that the nLab is much easier to read on a mobile phone now!
Can we have the option of switching back to the old one?
@Alitzer
I was just thinking that someone needs to write a browser plugin that recreates the old style :-)
It would be fairly trivial to add a little item to a menu which allows one to switch to the old UI. But we would need to consider whether we wish to allow that. My inclination is not to allow it.
Does anybody else also find the spacing too much? I feel like if it was reduced slightly it would look much better.
For me it’s good like it is now.
No, I don’t think it should be part of the functionality of the nLab. But people are of course free to make their own stylesheet out of the Instiki stylesheet and apply it locally.
It looks very nice, but I’d like it if the links are always underlined, so they’re easier to see. This is a matter of usability, not aesthetics. Either that, or make the link color much more distinct from the body text color than it currently is.
I was surprised at first but I really like it!
With much respect and gratitude to the effort that was put into the new design, I feel that it can be improved by being more compact (for instance, decreasing spacing slightly, etc).
I should repeat what I said over on GH: the wide spacing between lines makes me think of draft essays and unpublished manuscripts (in those areas that don’t use LaTeX). It would be nice if this looked less like a draft and more like published mathematics. I also have a small laptop, so lots of spacing doesn’t help (as Mike has also pointed out).
Thanks Jake, Richard!
How to decide the issue with the spacing? Maybe we could implement slightly smaller spacing now, keep it for a day or two, then have a vote on whether to go back to how it’s now.
But I find that Jake has been showing us what actual style is, catapulting us out of the stylistic stone ages. We should tweak to make most of us happy, but maybe we should let it sink in first.
Guys, I have problem with eyes seeing the new style of the page. The letters are very thin, it prints thin and I have hard time finding the stuff in the pages. The new visual look of the pages is putting me off.
P.S. already on the laptop, not to say on the mobile.
P.S.2 I second David’s opinion, the more compact the view (i mean less vertical spacing between the lines), easier to work with.
P.S.3 The spacing on the left is also too big, like the propaganda/ads, not like the working versions. Especially in the print versions, most of us do not want to scroll too much. (Print version, once put into pdf by firefox has OK left side spacing though).
I should also say that in classroom I sometimes project the nLab screen on the board and even with thicker letters before it was often hard for students beyond the first row to read. And now with superthin letters shade is definitely too weak to be read on the classroom screen with projector.
Definitely, the superthin line of the fonts (and links) is my major obstacle to the change. The letters look like washed, when I put the old and new one next to another, the new looks like bleached.
I am OK with the new style for the section header fonts (I do not find it neither better, nor worse, so it is OK with me).
Yes, the spacing is still too large. Is it so hard to just reset the spacing to what it was before?
I also agree that the letters are a bit thin.
I’m sorry to have only criticisms. I am happy that people have the time and energy to work on improving the nLab code-wise (welcome Jake!). But newer and trendier isn’t always better. I don’t mind the new style, or at least I wouldn’t if the spacing and other issues were fixed; but I also never saw anything wrong with the old style. I have always been happy that the nLab is much more focused on content than on looking “pretty” (or, even worse, keeping up to date with the prevailing winds of “what a modern web site looks like”, which IMHO generally means getting uglier every year), and I wouldn’t want that to change.
On the positive side I do like that we have the new logo and the overall (top) title style looks pretty. I am also OK with the name of the lab being smaller in the corner. Having navigation buttons in lighter fonts is also OK.
I think changing line-height from 1.6em to 1.2em is a big improvement.
Mike, you know well that the incentive is not to look trendy. We needed a new style generally, and we had one offer, and we had agreed to go for it.
Changing the spacing now, that the work has been done by somebody, is a triviality, just changing a number, that we can do any time. Let’s not get worked up on trivialities in the face of a substantial improvement.
I agree with Urs here. The nLab definitely needed style improvements, for example the display was poor on a mobile before. I would have eventually tried something myself, but happily Jake has come along with something. There will always be resistance to a big change like this, in time people get used to it. Of course we need to tweak things which a majority of people feel is problematic, though.
Regarding spacing being set to what it was before, I think it is important to keep in mind that this is a spacier design overall. Jake is trying to get something that is aesthetically pleasing. For my part, I don’t really see what’s wrong with it (and I use a small laptop screen), but I can respect that others see differently; I’m sure Jake will do his best to accomodate the viewpoints. But bear in mind that the whole point is to have a pleasing overall design.
To be very honest, while I do not have a serious problem with the new design except for the line spacing and a few other tweaks (which I have enacted by hand using custom css in the “stylish” firefox extension), I felt that the intermediate change of fonts and logo that was made a few weeks go was such a big step forward, that it was surprising to me that people still felt there was a need to bring the nlab’s design out of the “dark ages”. I do believe that the previous version of the design (i.e. the one which switched to the Noto fonts) was the most usable iteration of the nlab.
How can you have your own stylesheet?
It seems the problem with superthin fonts disappears when working in a browser mode with much enlarged sizes for everything! In enlarged version the thickness is more reasonable.
Then also the left margin becomes smaller. The cost is to have just a fraction of the previous content on the screen (what will be less pronounced if the line spacing is smaller), but I am ready to pay this (rather than faint in front of ever dancing bleached letters).
I disagree that the point is to have a “pleasing design”. The main point should be to have a usable design. Looking nice is a secondary consideration.
Thanks everyone.
Since the line spacing is clearly the main issue of concern, I suggest we see the reduced line spacing go live and then just let a week or so pass, to see how we all get to feel about the new layout.
(And then in two weeks I might raise the issue of getting rid of the old nForum design, too! :-)
Thanks very much, Jake! Live now. Looks great to me, the slightly darker menu colour is perfect for me now. The MathJax thing still needs addressing I guess, I can try to do that when I get the chance if you do not have the time.
I agree with Urs’ plan in #85. Most of the comments so far, though people will not like to hear it, seem like a standard reaction to a big design change to me! There was a slightly similar reaction on a smaller scale when nForum announcements were first introduced as well. Thus waiting for a week or two to get used to it before drawing any dramatic conclusions sounds excellent. Of course there are always small things which might be able to improved. Zoran’s objections may be more substantial; I can try using the old fonts if several people would prefer this.
Re #83: I think it goes without saying that usability is a major part of what it means to have a pleasant design!
In general, rather than complain, I’d suggest that people try to offer constructive, concrete suggestions to try out. Everybody can get the HTML and CSS source, e.g. by right clicking on the page in their browser, and can tweak values to find something they like, like Harry did.
I like the current design, especially the massive improvement on a mobile and in the menu/logo layouts, but I am not set on it if there is a consensus otherwise, I will follow what people wish. I do feel a need to stick up a bit for Jake though; I think comments like #74 could easily leave a bitter taste in the mouth. He has done a great job with this design; one may disagree with aspects of it, but he has produced a consistent, well thought-out design in a way that needed aesthetic taste and technical proficiency. We are lucky that he took the time to do so.
On my monitor, the displayed equations are too large relative to the text size. Are other people seeing that too?
Yes, this is what I referred to as the ’MathJax issue’, but I see now that it is also present on Firefox, so must be something else. I’ll let Jake look into that if he wishes, since he is more familiar with exactly what has changed; if he doesn’t have time, I’ll investigate. Just seems like \[ ... \] blocks have too large a font.
Actually I think I have fixed it now after all, no need to bother, Jake.
Yes, that did it, thanks. Here are some more concrete suggestions:
I am warming up to the use of computer modern font, but I agree with Zoran that the letters are too thin. I don’t know how this is possible, but they’re definitely thinner than the computer modern font displayed in LaTeX output on my monitor. Maybe this is an issue with whoever turned computer modern into a web font (whatever that means – I’m not a font person)? Increasing the zoom level on Firefox to 110% does make it better, but so does increasing the css font-size from 18px to 19px. Why don’t we just do the latter?
I think the h4 headers (####) need to stand out more; right now they are nearly indistinguishable from the body text. Maybe something like font-weight 700 (bold) and font-size 130%?
The green internal links I find are not too bad, although I wouldn’t mind if they stand out more. But the external links [...](...) are essentially invisible; maybe change their color to something like 2222AA?
I agree with Ali that line height 1.2em would be just about perfect (the current is 1.4). Headers also have too much space around them; I would probably set the h2 margin-top to 35px and the h3 margin-top to 30px, and the h1 margin-top and margin-bottom both to 10px. And I would also like to decrease the spacing between ordered and unordered list items (particularly including the table of contents), but I can’t figure out how to do that with css; I tried reducing the margin-bottom to 0px but there is still a lot of extra space.
The text in the right-hand sidebars seems too large, shouldn’t the font size be reduced there?
I admit that comment #74 betrayed a bit of frustration, because I felt like many of us had already asked several times for the line spacing to be reduced back to what it used to be, and instead we got it reduced by a tiny bit again and again and had to keep asking for it to be reduced more.
But the rest of it was a response mainly to comments such as #69 which I felt were unjustifiably critical of the old style. There was nothing “stone age” about the old style, it looked just fine and was perfectly usable. I did not intend to be criticizing Jake at all, after all what he did at first was (I presume) on his own initiative, for his own use, because he liked the way his new style looked (of course everyone is entitled to their own taste), and we then asked him to bring it over to the main lab and he was graciously willing to do so, and even to make some changes that we requested. So I have nothing but gratitude for that.
I would like to second Mike’s gratitude in #92. I know how frustrating design by committee is.
Thanks very much Mike for these suggestions, that’s just what I was looking for! Since these are only small tweaks, I will implement them as soon as I get the chance, maybe this evening European time.
Mike, sorry for putting you off with calling the previous design “stone age”. I felt this was self-evident and didn’t think of it as controversial, so I did’t say it to stir things up. But I take it back.
Some of the links now appear, at least in my lab, absolutely the same as if they were not the links, just the text. I put the examples on Sandbox (zoranskoda). I use firefox.
P.S. these are external links.
That sounds like the same as what I mentioned in #91 about the external links?
Hi all, the updates (especially decreased line height) are big improvements! I noted that with a couple more changes, I was pretty happy:
Here’s what I added to my own version of the stylesheet to achieve this:
p {
text-align: justify;
}
math, mtext {
font-family: 'computer modern serif' !important;
}