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
- more subtle border color to avoid distracting from their content
- see Notation 1.1.1, for example
- color scheme, borders, see Notation 1.1.1 under accidentals
- 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
- 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.
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
Re: lilypond-manuals.css: edit color scheme and some spacing (issue 322070043 by email@example.com)
On 2017/06/10 17:58:43, pwm wrote:
> - simplify color scheme, no need to draw attention to footers with
> - language text size matches rest of footer (I'll provide a screenshot
> language section which isn't in the demo site)
> 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;"
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.