Greetings LilyPond developers, Over the last few weeks I had some time and found myself experimenting with the appearance of the LilyPond website, especially the main navigation bars/menus at the top of each page. You can see a "sketch" of what I've come up with at the following URL: (Take out the two spaces, inserted here to help prevent web crawlers from finding and indexing these temporary pages. A robots.txt file is also in place to prevent this.)
http://clairnote.org / lilypond-web-demo/ No big redesign, just some fairly subtle tweaks to the current one. If those who make such decisions like what they see, I can submit the changes through the proper channels. Let me know what you think. Some notes follow. Cheers, -Paul Notes: - Almost all the changes are CSS changes (presentation rather than content). - I've used CSS gradients instead of background images wherever possible. This eliminates the need to download 23 background image files, providing some small benefit to page load times and server load. CSS gradients are now well supported by browsers, except for IE9 and earlier (which should just display a solid color fallback). See: http://caniuse.com/#feat=css-gradients https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient - The gradients of the main nav bar are more subtle, like the gradients in other places. - Active headings are a darker shade rather than being a reversed gradient. - The second nav bar is simplified to one consistent color, making it clearer which is the active heading. - The home page link/heading is "LilyPond" rather than the lily icon. Since LilyPond is not a big-budget commercial brand with a well known logo, having "LilyPond" here seemed like a good idea. Also the icon is a bit too tall to fit comfortably in the space, and if shrunk for a better fit it would be less clear what it is. The width of this link/heading now matches the others instead of being smaller. - The search box is slightly smaller and light green to give the main nav bar a more smooth and solid look. - The light-green-to-white fade in the background is in both top left and top right corners of the page. Since the site is a centered design this is more symmetrical. The white on green diagonal staff is removed for a simpler and less distracting look. (This is done with CSS gradients, but ultimately images may provide better results in some browsers (e.g. Chrome)). - The CSS file needs some clean up, since previous code has mostly been commented out for now. -- View this message in context: http://lilypond.1069038.n5.nabble.com/Possible-tweaks-to-the-appearance-of-the-website-tp170094.html Sent from the Dev mailing list archive at Nabble.com. _______________________________________________ lilypond-devel mailing list lilypond-devel@gnu.org https://lists.gnu.org/mailman/listinfo/lilypond-devel
