[libvirt] [PATCH 0/7] docs: Some website tweaks
Basically, the navigation menu is *way* too big, and takes the focus away from the actual content. Plus it's very easy for longish words to overflow it (see "Authentication" in the screenshots below). The headers are probably bigger than needed as well, so I've scaled them down. Using Wikipedia for comparison, you can see the new size is more comparable to what they use. Some other minor cleanups have been included as well. Before[1] and after[2] screenshots for your convenience. Cheers. [1] http://i.imgur.com/MZchAWD.png [2] http://i.imgur.com/BXepLTh.png Andrea Bolognani (7): docs: Adjust vertical whitespace in CSS docs: Remove empty CSS rule docs: Don't use <strong> in headers docs: Make menu entries smaller docs: Don't use bold text for menu entries docs: Use bold text for all headers docs: Make most headers a bit smaller docs/apps.html.in | 2 +- docs/generic.css | 15 +++++++++------ docs/libvirt.css | 30 ++++++------------------------ 3 files changed, 16 insertions(+), 31 deletions(-) -- 2.5.5
Ensure all CSS rules are separated with a single blank line. --- docs/generic.css | 7 +++++-- docs/libvirt.css | 12 ++++++------ 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/docs/generic.css b/docs/generic.css index aeea17f..d98f612 100644 --- a/docs/generic.css +++ b/docs/generic.css @@ -16,7 +16,6 @@ div.body p:first-letter { font-weight: bold; } - p, ul, ol, dl { padding: 0px; margin: 0px; @@ -43,7 +42,6 @@ dl dd { margin-bottom: 0.5em; } - h1, h2, h3, h4, h5, h6 { font-weight: bold; margin: 0px; @@ -56,22 +54,27 @@ h1 { margin-top: 0em; font-size: 2em; } + h2 { margin-top: 1.0em; font-size: 1.6em; } + h3 { margin-top: 1.0em; font-size: 1.4em; } + h4 { margin-top: 1.0em; font-size: 1.2em; } + h5 { margin-top: 0.75em; font-size: 1em; } + h6 { margin-top: 0.75em; font-size: 0.8em; diff --git a/docs/libvirt.css b/docs/libvirt.css index 17ecbb4..4fffa18 100644 --- a/docs/libvirt.css +++ b/docs/libvirt.css @@ -2,6 +2,7 @@ h1 { font-weight: normal; color: #3c857c; } + h1 strong { font-weight: bold; } @@ -94,6 +95,7 @@ h2, h3, h4, h5, h6 { #menu ul.l1 li .inactive { border-left: 6px solid #dfebea; } + #menu ul.l1 li .active { border-left: 6px solid #a5c6c2; } @@ -109,7 +111,6 @@ h2, h3, h4, h5, h6 { padding-left: 3em; } - #headerLogo { position: absolute; top: 0px; @@ -118,6 +119,7 @@ h2, h3, h4, h5, h6 { width: 400px; background: url(libvirt-header-logo.png); } + #headerSearch { position: absolute; top: 0px; @@ -142,7 +144,6 @@ h2, h3, h4, h5, h6 { font-size: 1em; } - #sitemap ul li { list-style: none; } @@ -177,7 +178,6 @@ a { color: #566866; } - div.api { border: 1px solid #999999; background: #eeeeee; @@ -203,7 +203,6 @@ div.api table td, div.variablelist table td { padding-left: 1em; } - h1 a, h2 a, h3 a, h4 a, h5 a { color: inherit; text-decoration: inherit; @@ -252,7 +251,6 @@ p.image { width: 100%; } - #projects dl { margin: 0px; border: 0px solid white; @@ -285,9 +283,11 @@ p.image { #projects #p1 dt, #projects #p1 dd { width: 33%; } + #projects #p2 dt, #projects #p2 dd { width: 50%; } + #projects #p3 dt, #projects #p3 dd { width: 99%; } @@ -318,7 +318,6 @@ p.image { color: #ccc; } - #sponsor { color: #757575; text-decoration: inherit; @@ -370,6 +369,7 @@ table.data tr.head th { table.data tbody td { background: rgb(240,240,240); } + table.data tbody td.y { background: rgb(220,255,220); text-align: center; -- 2.5.5
--- docs/libvirt.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/docs/libvirt.css b/docs/libvirt.css index 4fffa18..d560070 100644 --- a/docs/libvirt.css +++ b/docs/libvirt.css @@ -292,9 +292,6 @@ p.image { width: 99%; } -#projects { -} - #projects span { font-size: 0.8em; display: block; -- 2.5.5
There's only one instance of that happening, and it looks kinda off. Get rid of it, along with the corresponding CSS rules. --- docs/apps.html.in | 2 +- docs/libvirt.css | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/docs/apps.html.in b/docs/apps.html.in index 39fb78d..b8337b9 100644 --- a/docs/apps.html.in +++ b/docs/apps.html.in @@ -2,7 +2,7 @@ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <body> - <h1>Applications using <strong>libvirt</strong></h1> + <h1>Applications using libvirt</h1> <p> This page provides an illustration of the wide variety of diff --git a/docs/libvirt.css b/docs/libvirt.css index d560070..637ed35 100644 --- a/docs/libvirt.css +++ b/docs/libvirt.css @@ -3,10 +3,6 @@ h1 { color: #3c857c; } -h1 strong { - font-weight: bold; -} - h2, h3, h4, h5, h6 { color: #3c857c; } -- 2.5.5
The menu should not take the focus away from the actual contents. --- docs/libvirt.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/docs/libvirt.css b/docs/libvirt.css index 637ed35..fdbd99e 100644 --- a/docs/libvirt.css +++ b/docs/libvirt.css @@ -53,11 +53,6 @@ h2, h3, h4, h5, h6 { margin: 0px; border: 0px; font-weight: bold; - font-size: 1.2em; -} - -#menu li ul li { - font-size: 1em; } #menu ul li a, #menu ul li span { -- 2.5.5
The menu should not take the focus away from the actual contents. --- docs/libvirt.css | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/libvirt.css b/docs/libvirt.css index fdbd99e..d7a4d95 100644 --- a/docs/libvirt.css +++ b/docs/libvirt.css @@ -52,7 +52,6 @@ h2, h3, h4, h5, h6 { padding: 0px; margin: 0px; border: 0px; - font-weight: bold; } #menu ul li a, #menu ul li span { -- 2.5.5
All headers except for <h1> were already bold: make it bold as well to increase visual consistency. --- docs/libvirt.css | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/docs/libvirt.css b/docs/libvirt.css index d7a4d95..c6f6d0d 100644 --- a/docs/libvirt.css +++ b/docs/libvirt.css @@ -1,9 +1,4 @@ -h1 { - font-weight: normal; - color: #3c857c; -} - -h2, h3, h4, h5, h6 { +h1, h2, h3, h4, h5, h6 { color: #3c857c; } -- 2.5.5
Headers are bold already, so the font doesn't need to be that big to draw attention. --- docs/generic.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/generic.css b/docs/generic.css index d98f612..c0c6215 100644 --- a/docs/generic.css +++ b/docs/generic.css @@ -52,22 +52,22 @@ h1, h2, h3, h4, h5, h6 { h1 { margin-top: 0em; - font-size: 2em; + font-size: 1.6em; } h2 { margin-top: 1.0em; - font-size: 1.6em; + font-size: 1.4em; } h3 { margin-top: 1.0em; - font-size: 1.4em; + font-size: 1.2em; } h4 { margin-top: 1.0em; - font-size: 1.2em; + font-size: 1.1em; } h5 { -- 2.5.5
On 03/30/2016 10:19 AM, Andrea Bolognani wrote:
Basically, the navigation menu is *way* too big, and takes the focus away from the actual content. Plus it's very easy for longish words to overflow it (see "Authentication" in the screenshots below).
The headers are probably bigger than needed as well, so I've scaled them down. Using Wikipedia for comparison, you can see the new size is more comparable to what they use.
Some other minor cleanups have been included as well.
Before[1] and after[2] screenshots for your convenience.
Cheers.
[1] http://i.imgur.com/MZchAWD.png [2] http://i.imgur.com/BXepLTh.png
Andrea Bolognani (7): docs: Adjust vertical whitespace in CSS docs: Remove empty CSS rule docs: Don't use <strong> in headers docs: Make menu entries smaller docs: Don't use bold text for menu entries docs: Use bold text for all headers docs: Make most headers a bit smaller
docs/apps.html.in | 2 +- docs/generic.css | 15 +++++++++------ docs/libvirt.css | 30 ++++++------------------------ 3 files changed, 16 insertions(+), 31 deletions(-)
Lot's of style churn here lately... Ironically the view I get from libvirt.org has always had slightly bolder and larger text as opposed the view I get when viewing changes in a local branch. Personally, I like the larger, bolder text since it's easier to read than some font style that's meant for a mobile phone. As long as we don't start adding graphics and flash, we're good ;-)! Anyway just a note that patch 3 removes the h1 font-weight bold, but patch 6 claims all headers except h1 were already bold... Not a big deal due to the end result, but I assume they should be together. My only other comment would be regarding <dt> elements - I would prefer to see them use a slightly bolder text so that they stand out from the rest of the text. If I read the tea leaves correctly that would be an adjustment to the <dt> to have "font-weight: bold;". Other than that you have an ACK from me... and it should be safe for freeze... John
On Thu, 2016-03-31 at 07:25 -0400, John Ferlan wrote:
Basically, the navigation menu is *way* too big, and takes the focus away from the actual content. Plus it's very easy for longish words to overflow it (see "Authentication" in the screenshots below). The headers are probably bigger than needed as well, so I've scaled them down. Using Wikipedia for comparison, you can see the new size is more comparable to what they use. Some other minor cleanups have been included as well. Before[1] and after[2] screenshots for your convenience. Cheers. [1] http://i.imgur.com/MZchAWD.png [2] http://i.imgur.com/BXepLTh.png Andrea Bolognani (7): docs: Adjust vertical whitespace in CSS docs: Remove empty CSS rule docs: Don't use <strong> in headers docs: Make menu entries smaller docs: Don't use bold text for menu entries docs: Use bold text for all headers docs: Make most headers a bit smaller docs/apps.html.in | 2 +- docs/generic.css | 15 +++++++++------ docs/libvirt.css | 30 ++++++------------------------ 3 files changed, 16 insertions(+), 31 deletions(-) Lot's of style churn here lately... Ironically the view I get from
On 03/30/2016 10:19 AM, Andrea Bolognani wrote: libvirt.org has always had slightly bolder and larger text as opposed the view I get when viewing changes in a local branch.
That... Shouldn't happen. I wonder if you increased the font size while viewing libvirt.org at some point, and your browser is remembering that as a per-website preference?
Personally, I like the larger, bolder text since it's easier to read than some font style that's meant for a mobile phone.
The idea behind Cole's initial changes, if I'm not mistaken, was to make the website more readable by using sites such as Wikipedia as reference. So better spacing etc. Big font sizes are good, but the text shouldn't be comically large.
As long as we don't start adding graphics and flash, we're good ;-)!
Don't even think about it!
Anyway just a note that patch 3 removes the h1 font-weight bold, but patch 6 claims all headers except h1 were already bold... Not a big deal due to the end result, but I assume they should be together.
All headers except for <h1> were already bold: what patch 3 does is removing the only instance in which bold text was used as part of a (non bold) <h1> header, and the CSS rules needed for that specific case. Patch 6 then goes ahead and makes <h1> bold like all other headers.
My only other comment would be regarding <dt> elements - I would prefer to see them use a slightly bolder text so that they stand out from the rest of the text. If I read the tea leaves correctly that would be an adjustment to the <dt> to have "font-weight: bold;".
I didn't notice that, but I'll look into changing it next.
Other than that you have an ACK from me... and it should be safe for freeze...
I've pushed the series. Thanks! -- Andrea Bolognani Software Engineer - Virtualization Team
participants (2)
-
Andrea Bolognani -
John Ferlan