lilypond-manuals.css: edit color scheme and some spacing (issue 322070043 by paulwmorris@gmail.com)

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

lilypond-manuals.css: edit color scheme and some spacing (issue 322070043 by paulwmorris@gmail.com)

paulwmorris
Reviewers: ,

Message:
Please review these css edits for the manuals.  Here is a demo site for
easier review (remove spaces after the domain to reassemble the url):

http://clairnote.org   /lilypond-web-demo/Documentation/web/manuals.html

The biggest difference is the color scheme. There are a few minor
spacing and border edits as well.

I realize this is more changes in one review than is preferred, but I
wanted to expedite things given the release plans for 2.20.

Things to look at:

Table of contents sidebars
- color scheme, colors are same as the previous 2.19 footers, except for
usage (now brown) and the CG is a dark grey rather than full black.
- a little vertical space between top level sections

Code blocks
- more subtle border color to avoid distracting from their content
- see Notation 1.1.1, for example

"Note" boxes
- color scheme, borders, see Notation 1.1.1 under accidentals

"Advanced" boxes
- color scheme, borders, see CG 1.2

Main/top page for a manual
- simpler color scheme, some vertical spacing around the title

Grey navigation bars/rows/strips
- color scheme is more subtle and spacing

Footers
- simplify color scheme, no need to draw attention to footers with color
- language text size matches rest of footer (I'll provide a screenshot
for language section which isn't in the demo site)

I think that covers it.

-Paul


Description:
lilypond-manuals.css: edit color scheme and some spacing

This patch simplifies and (IMHO) improves the color scheme
and spacing of the manuals on the web. I will include a link to
screenshots and a demo site, with more details on what's
different.

Please review this at https://codereview.appspot.com/322070043/

Affected files (+56, -98 lines):
   M Documentation/css/lilypond-manuals.css



_______________________________________________
lilypond-devel mailing list
[hidden email]
https://lists.gnu.org/mailman/listinfo/lilypond-devel
Reply | Threaded
Open this post in threaded view
|

Re: lilypond-manuals.css: edit color scheme and some spacing (issue 322070043 by paulwmorris@gmail.com)

paulwmorris
On 2017/06/10 17:58:43, pwm wrote:
> Footers
> - simplify color scheme, no need to draw attention to footers with
color
> - language text size matches rest of footer (I'll provide a screenshot
for
> language section which isn't in the demo site)

Languages / footer screenshot posted to the sourceforge issue:
https://sourceforge.net/p/testlilyissues/issues/5144/

-Paul

https://codereview.appspot.com/322070043/

_______________________________________________
lilypond-devel mailing list
[hidden email]
https://lists.gnu.org/mailman/listinfo/lilypond-devel
Reply | Threaded
Open this post in threaded view
|

Re: lilypond-manuals.css: edit color scheme and some spacing (issue 322070043 by paulwmorris@gmail.com)

Carl Sorensen
In reply to this post by paulwmorris

I don't feel strongly about the old design being bad.

The new design looks mostly fine to me.

I feel like the table of contents bar at the left is too wide.

But I would be fine with it being like this.

Carl


https://codereview.appspot.com/322070043/

_______________________________________________
lilypond-devel mailing list
[hidden email]
https://lists.gnu.org/mailman/listinfo/lilypond-devel
Reply | Threaded
Open this post in threaded view
|

Re: lilypond-manuals.css: edit color scheme and some spacing (issue 322070043 by paulwmorris@gmail.com)

fedelogy
In reply to this post by paulwmorris
I like a lot the new color scheme! More elegant and easier for the eyes.



https://codereview.appspot.com/322070043/

_______________________________________________
lilypond-devel mailing list
[hidden email]
https://lists.gnu.org/mailman/listinfo/lilypond-devel
Reply | Threaded
Open this post in threaded view
|

Re: lilypond-manuals.css: edit color scheme and some spacing (issue 322070043 by paulwmorris@gmail.com)

Paul Morris
In reply to this post by Carl Sorensen
On 06/10/2017 07:30 PM, [hidden email] wrote:

> I don't feel strongly about the old design being bad.

What got me motivated to work on it was the bright (fully saturated)
colored borders around the code blocks, which I found distracting.

> The new design looks mostly fine to me.

Glad to hear it.

> I feel like the table of contents bar at the left is too wide.

I agree; it can get a bit wide especially on wider monitors/windows.  
(Note I have not changed its width in this patch.)  Currently the size
is a percentage of the window width.  We could make that smaller, but at
the risk that it gets too narrow on smaller screens/windows.

Another way would involve a different approach in the css, allowing us
to set a maximum and minimum width to it.  But this would entail more
work/changes to the css and maybe the html.  (e.g. to use floats,
flexbox, or grid positioning rather than the current "position: fixed;"
approach.)

Or... we could keep the "position: fixed;" approach and set the width to
a constant amount rather than a percentage.  And/or we could also set
media query break points to change that constant for different window
widths.  This could even be combined with the percentages so it could
effectively have a max and min width and be set by percent in between.

In any case this would warrant its own issue.

> But I would be fine with it being like this.

Glad to hear, and thanks for the feedback.

-Paul

_______________________________________________
lilypond-devel mailing list
[hidden email]
https://lists.gnu.org/mailman/listinfo/lilypond-devel
Reply | Threaded
Open this post in threaded view
|

Re: lilypond-manuals.css: edit color scheme and some spacing (issue 322070043 by paulwmorris@gmail.com)

Paul Morris
In reply to this post by fedelogy
On 06/12/2017 06:24 AM, [hidden email] wrote:

> I like a lot the new color scheme! More elegant and easier for the eyes.

Thanks, glad you like it!

_______________________________________________
lilypond-devel mailing list
[hidden email]
https://lists.gnu.org/mailman/listinfo/lilypond-devel