New skin layout update and template migration

[guoyunhe]

Here are two major changes:

1. Three column layout. Table of content is in right side column.
2. Old templates using bento CSS now work with this skin. No need to modify template or edit pages.

[hellcp]

This looks way better than current demo ;)

I have two issues:

Navigation heading has a little too little space to breathe as seen here:

I would say that it would be nice to add marginal margin to body below the title to not have issues with stuff appearing before the title. I know in this case this is because font has that particular spacing but it looks misaligned with some letters due to bigger size of font (bigger size = more space before and between letters) and should probably be fixed (it actually is a problem for wider spectrum of headings and not just title one, but other ones are less visible):

Here is example of how it should be done: http://www.modularscale.com/?1&em&1.2

Also I think previous sidebar with white background looked a little bit better (a little bit more readable with clearer division of contents of the page), but I'm glad it's not so centered anymore ;)

Apart from that I don't have anything else to nitpick, at least not from what I see here

[guoyunhe]

Some update for the two problems you have pointed out. If you can deploy it on https://en-test.opensuse.org , we can check its compatibility to old bento templates. Hope we can deploy new skin some day before spring is coming. :upside_down_face:

[cboltz]

Sorry for the delay!

The new version looks great! I also like that you decided to make the new skin compatible with the existing wiki templates - that's much easier than updating the templates in all wikis ;-)

Minor nitpicking: README.md might need some more content - but what you added is already better than nothing ;-)

This nitpicking didn't stop me from merging your changes. I'm just working on packaging the latest version, and will give them a quick test locally. If everything works as planned, I'll probably deploy the latest version tonight or tomorrow.

[cboltz]

Deployed on en-test.opensuse.org, and it looks as good as the screenshots promised :-)

I noticed a small issue in the TOC - if a headline is long enough to cause a linebreak, the second half doesn't get indented. For example the TOC on https://en-test.opensuse.org/SDB:How_to_migrate_to_a_new_openSUSE_version looks like this if the window isn't too wide:

4    See also
5    Links to other 
openSUSE sites
6    External links

[cboltz]

Another bug - compare https://en-test.opensuse.org/Portal:Wiki and https://en.opensuse.org/Portal:Wiki and you'll notice that the first image in each column appears with 100% of the colum's width.

[guoyunhe]

@cboltz Thanks for the feedback! I will fix these problems and make another pull request. It should be easy to fix.

[hellcp]

I would also mention #siteNotice should be more visible than it is right now, maybe with bootstraps "alert" element. Otherwise .knowledge has some padding issues, where it's simply non-existent. And I don't think dotted line fits as border there, but if you believe it's fine, make it rounded so it will fit other elements on the page more. I also don't know how I feel about green titles. They are def. still with style from old openSUSE wiki featuring the same green as before (and green doesn't really fit there).

https://en-test.opensuse.org/Portal:Project Searchbox on this page likes to expand to out of boundaries on Firefox due to "width: auto;" on lower resolutions.

Also I would like to mention that opensuse.org hosts more than one favicon and the one you are using right now depicts SUSE's and not openSUSE's logo. To be more exact it's the same favicon that is present on all SUSE sites.It's one line fix and it would be a great change for sake of representing proper thing instead. https://github.com/openSUSE/wiki/blob/master/LocalSettings.php

I would go as far as to say that Chameleon should host its own favicon for the sake of consistency with bento. I have been working on renewing search-o-o so I made one already, maybe you will like it ;) https://lelcp.github.io/search-o-o/ https://github.com/LelCP/search-o-o/blob/master/images/favico.png

[guoyunhe]

@LelCP

I would also mention #siteNotice should be more visible than it is right now, maybe with bootstraps "alert" element.

The alert element should be added in wiki text, not skin, because they may have multiple notice at the same time, some are information, some are warnings, some are invitation. Here is the result:

Otherwise .knowledge has some padding issues, where it's simply non-existent. And I don't think dotted line fits as border there, but if you believe it's fine, make it rounded so it will fit other elements on the page more. I also don't know how I feel about green titles. They are def. still with style from old openSUSE wiki featuring the same green as before (and green doesn't really fit there).

I cannot get this comment. Can you give some screenshot?

Searchbox on this page likes to expand to out of boundaries on Firefox due to "width: auto;" on lower resolutions.

I will fix this in next pull request.

Also I would like to mention that opensuse.org hosts more than one favicon and the one you are using right now depicts SUSE's and not openSUSE's logo. To be more exact it's the same favicon that is present on all SUSE sites.It's one line fix and it would be a great change for sake of representing proper thing instead.

openSUSE has a branding and visual design guideline. Here is the official logo without text: https://github.com/openSUSE/artwork/blob/master/Logo/official-logo-geeko-color.png

However, I can't fix that (I am not a server administrator). Maybe @cboltz knows who can fix that?

[hellcp]

Favicon is in config in root directory that I linked. I am very well aware of visual guidelines as I am contributing to branding for new release and that is the reason most likely why it angers me every time when I see SUSE logo used instead of openSUSE logo (difference is substantially different shade of green). I proposed new icon because all previous attempts frankly look terrible ;( (o-o, news-o-o, en-test-o-o, lists-o-o, build-o-o, my proposal)

With .knowledge part I meant class "knowledge" class on https://en-test.opensuse.org/SDB:How_to_migrate_to_a_new_openSUSE_version and some other sites. It looks out of place.

[guoyunhe]

With .knowledge part I meant class "knowledge" class on https://en-test.opensuse.org/SDB:How_to_migrate_to_a_new_openSUSE_version and some other sites. It looks out of place.

I will write a new CSS rule to change its appearance. Will be in next pull request.