---------- Forwarded message ----------
From: <lilyp...@googlecode.com>
Date: Thu, Dec 19, 2013 at 5:33 AM
Subject: Re: Issue 3714 in lilypond: website: use colors to
distinguish each manual and stable vs. development
To: carlopeter...@gmail.com
Updates:
Labels: -Patch-countdown Patch-push
Comment #15 on issue 3714 by pkx166h: website: use colors to
distinguish each manual and stable vs. development
http://code.google.com/p/lilypond/issues/detail?id=3714
Path counted down - please push. Carlo, I don't know if you have push
access, if not can you make a git formatted patch based on current
master and someone can push it for you.
Patches attached. Can someone push?
Thanks,
Carl P.
From a3c461efca539350e3da4f25423895bbf6f78519 Mon Sep 17 00:00:00 2001
From: Carl Peterson <carlopeter...@gmail.com>
Date: Sun, 8 Dec 2013 11:44:08 -0500
Subject: [PATCH 1/5] Add classes to <body> tag of documentation files
To facilitate request from lilypond-user to facilitate differentiating among the various manuals, appending CSS classes to the <body> tag of the documentation files so that the main CSS stylesheet can be modified to look for those classes to specifically style each manual and development status.
The present solution for indicating development status is a hardcoded line in Documentation/lilypond-texi2html.init.
---
Documentation/lilypond-texi2html.init | 7 +++++++
1 file changed, 7 insertions(+)
diff --git a/Documentation/lilypond-texi2html.init b/Documentation/lilypond-texi2html.init
index 0f0a94c..fbd7f14 100644
--- a/Documentation/lilypond-texi2html.init
+++ b/Documentation/lilypond-texi2html.init
@@ -1094,6 +1094,13 @@ sub lilypond_css_lines ($$)
$Texi2HTML::THISDOC{'CSS_LINES'} .= "<script language=\"JavaScript\" src=\"${reldir}lily_search.js\"></script>\n";
}
}
+
+my ($docu_dir, $docu_name) = split_texi_filename ($Texi2HTML::THISDOC{'input_file_name'});
+
+$documentstatus = 'devStatus';
+
+$Texi2HTML::Config::BODYTEXT = 'lang="' . $Texi2HTML::THISDOC{current_lang} . '" class="' . $docu_name . ' ' . $documentstatus . '"';
+
}
--
1.7.10.4
From 95ce350d867750d8dd4fea95f72ed96da3e7cd28 Mon Sep 17 00:00:00 2001
From: Carl Peterson <carlopeter...@gmail.com>
Date: Sun, 8 Dec 2013 19:20:03 -0500
Subject: [PATCH 2/5] CSS changes to color-code major manuals
Added styling to use a manual-specific class in the <body> tag to color code each of the major manuals.
Now:
* Learning Manual: Green book
* Notation Reference: Blue book
* Usage Manual: Yellow book
* Extending: Red book
* Internals Reference: Purple book
* Contributor's Guide: Black book
---
Documentation/css/lilypond-manuals.css | 100 +++++++++++++++++++++++++++++---
1 file changed, 93 insertions(+), 7 deletions(-)
diff --git a/Documentation/css/lilypond-manuals.css b/Documentation/css/lilypond-manuals.css
index 995c217..16dbbb3 100644
--- a/Documentation/css/lilypond-manuals.css
+++ b/Documentation/css/lilypond-manuals.css
@@ -1,4 +1,28 @@
/**********************************************************/
+/* GENERAL INFORMATION */
+/**********************************************************/
+
+/* It has been requested that each web manual be styled using a
+ different color. To faciliate that, each manual is being
+ assigned a hue value on the HSB color chart. All specific
+ colors for a manual will be shades and tints of that hue.
+
+ Manual Color Hue
+ learning green 120
+ music-glossary
+ essay
+
+ notation blue 205
+ usage yellow 50
+ snippets
+
+ changes orange 30
+ extending red 0
+ internals purple 280
+
+ contributor black doesn't matter - desat
+
+/**********************************************************/
/* PAGE-WIDE SETTINGS */
/**********************************************************/
@@ -16,6 +40,15 @@ body {
background-color: #fff;
}
+/* Documentation-specific page-wide settings */
+
+body.learning { background-color: #ccffcc; }
+body.notation { background-color: #cceeff; }
+body.usage { background-color: #fff6cc; }
+body.extending { background-color: #ffcccc; }
+body.internals { background-color: #eeccff; }
+body.contributor { background-color: #cccccc; }
+
/***********************************************************/
/* HEADERS */
/***********************************************************/
@@ -24,7 +57,7 @@ body {
.appendix, .appendixsec, .appendixsubsec,
.unnumbered, .unnumberedsec, .unnumberedsubsec, .unnumberedsubsubsec,
.subheading, .subsubheading {
- color: #204a87;
+ color: #black;
border-bottom: 1px dashed black;
padding-bottom: 0.15em;
margin-top: 0.6em;
@@ -33,14 +66,22 @@ body {
.settitle {
background: #b1d281;
+ color: white;
font-size: 2em;
text-align: center;
padding: 0.4em 0.5em;
- border: solid #7b925a;
+ border: solid black;
border-width: 1px 0;
- margin: 0;
+ margin: 0 0 10px 0;
}
+body.learning .settitle { background-color: #00bf00; }
+body.notation .settitle { background-color: #0070bf; }
+body.usage .settitle { background-color: #bf9f00; }
+body.extending .settitle { background-color: #bf0000; }
+body.internals .settitle { background-color: #7f00bf; }
+body.contributor .settitle { background-color: #000000; }
+
.chapter, .appendix, .unnumbered {
font-size: 1.8em;
}
@@ -99,8 +140,16 @@ blockquote, .smallexample {
border: solid #b1d281;
border-width: 1px 1px 1px 5px;
margin: 1em auto;
+ background-color: white;
}
+body.learning blockquote, body.learning .smallexample { border-color: #00ff00; }
+body.notation blockquote, body.notation .smallexample { border-color: #0095ff; }
+body.usage blockquote, body.usage .smallexample { border-color: #ffd400; }
+body.extending blockquote, body.extending .smallexample { border-color: #ff0000; }
+body.internals blockquote, body.internals .smallexample { border-color: #aa00ff; }
+body.contributor blockquote, body.contributor .smallexample { border-color: #000000; }
+
blockquote p, pre.smallexample {
padding: 1em;
margin: 0;
@@ -133,6 +182,13 @@ table.cartouche {
margin: 0 auto 1em;
}
+body.learning table.cartouche { background-color: #7fff7f; border: 2px solid #00bf00; }
+body.notation table.cartouche { background-color: #7fcaff; border: 2px solid #0070bf; }
+body.usage table.cartouche { background-color: #ffea7f; border: 2px solid #bf9f00; }
+body.extending table.cartouche { background-color: #ff7f7f; border: 2px solid #bf0000; }
+body.internals table.cartouche { background-color: #d47fff; border: 2px solid #7f00bf; }
+body.contributor table.cartouche { background-color: #aaaaaa; border: 2px solid #000000; }
+
table.cartouche p {
padding: 1em;
margin: 0;
@@ -215,6 +271,13 @@ div#tocframe {
line-height: 1.3;
}
+body.learning div#tocframe { background-color: #00bf00; }
+body.notation div#tocframe { background-color: #0070bf; }
+body.usage div#tocframe { background-color: #bf9f00; }
+body.extending div#tocframe { background-color: #bf0000; }
+body.internals div#tocframe { background-color: #7f00bf; }
+body.contributor div#tocframe { background-color: #000000; }
+
@media screen {
body > div#tocframe {
position: fixed
@@ -222,12 +285,12 @@ div#tocframe {
}
div#tocframe a:link, div#tocframe a:visited {
- color: #454532;
+ color: white;
text-decoration: none;
}
div#tocframe a:hover {
- color: #232b16;
+ color: silver;
text-decoration: underline;
}
@@ -385,13 +448,28 @@ table .title {
background: #e5f5ce;
font-size: 0.8em;
padding: 0.2em 0;
- border: solid #b1d281;
+ border: solid white;
border-width: 0 0 5px 0;
margin: 0;
}
+body.learning { background-color: #ccffcc; }
+body.notation { background-color: #cceeff; }
+body.usage { background-color: #fff6cc; }
+body.extending { background-color: #ffcccc; }
+body.internals { background-color: #eeccff; }
+body.contributor { background-color: #cccccc; }
+
+
+body.learning .footer { background-color: #00bf00; color: #ccffcc; }
+body.notation .footer { background-color: #0070bf; color: #cceeff; }
+body.usage .footer { background-color: #bf9f00; color: #fff6cc; }
+body.extending .footer { background-color: #bf0000; color: #ffcccc; }
+body.internals .footer { background-color: #7f00bf; color: #eeccff; }
+body.contributor .footer { background-color: #000000; color: #cccccc; }
+
.footer a:link {
- color: #0308fc;
+ color: white;
}
.footer p {
@@ -456,6 +534,14 @@ div#search p, div#search form {
margin: 1em;
}
+body.learning .warning { border-color: #00ff00; }
+body.notation .warning { border-color: #0095ff; }
+body.usage .warning { border-color: #ffd400; }
+body.extending .warning { border-color: #ff0000; }
+body.internals .warning { border-color: #aa00ff; }
+body.contributor .warning { border-color: #000000; }
+
+
.advanced {
background: #eeffcc;
text-align: left;
--
1.7.10.4
From d5458ae1f73dee7f1d3b91ed0ddffb8094a9bb91 Mon Sep 17 00:00:00 2001
From: Carl Peterson <carlopeter...@gmail.com>
Date: Thu, 12 Dec 2013 01:08:57 -0500
Subject: [PATCH 3/5] Add comments to lilypond-texi2html.init
Adding inline comments to lilypond-texi2html.init to explain the added lines of code in the file to enable the manual-specific CSS styling.
Also cleaned up the code indentation levels.
---
Documentation/lilypond-texi2html.init | 22 +++++++++++++++++-----
1 file changed, 17 insertions(+), 5 deletions(-)
diff --git a/Documentation/lilypond-texi2html.init b/Documentation/lilypond-texi2html.init
index fbd7f14..b8b1f51 100644
--- a/Documentation/lilypond-texi2html.init
+++ b/Documentation/lilypond-texi2html.init
@@ -1095,11 +1095,23 @@ sub lilypond_css_lines ($$)
}
}
-my ($docu_dir, $docu_name) = split_texi_filename ($Texi2HTML::THISDOC{'input_file_name'});
-
-$documentstatus = 'devStatus';
-
-$Texi2HTML::Config::BODYTEXT = 'lang="' . $Texi2HTML::THISDOC{current_lang} . '" class="' . $docu_name . ' ' . $documentstatus . '"';
+ ## This section makes the manual name visible to CSS through the body tag
+ ## so that styles can be applied per manual. It will add the manual
+ ## directory name (e.g., 'notation' or 'learning') as a CSS class, as well
+ ## as a development status.
+
+ # Parse the input file name to determine the manual we're dealing with.
+ my ($docu_dir, $docu_name) = split_texi_filename ($Texi2HTML::THISDOC{'input_file_name'});
+
+ # Hard-coded value to indicate if this is a development version
+ # ('devStatus') or stable version ('stableStatus')
+ # TODO: Figure out how to automatically set this value based on the even/odd minor revision number or some other mechanism.
+ $documentstatus = 'devStatus';
+
+ # Create the extra information for the <body> tag.
+ # For example, the development Notation reference in English
+ # will output in HTML as <body lang='en' class='notation devStatus'>
+ $Texi2HTML::Config::BODYTEXT = 'lang="' . $Texi2HTML::THISDOC{current_lang} . '" class="' . $docu_name . ' ' . $documentstatus . '"';
}
--
1.7.10.4
From bbd2131a18558415503d68038d1158164453dd8f Mon Sep 17 00:00:00 2001
From: Carl Peterson <carlopeter...@gmail.com>
Date: Thu, 12 Dec 2013 17:37:20 -0500
Subject: [PATCH 4/5] Remove duplicate CSS definitions in manual file
Remove second definition of background color from lilypond-manuals.css.
Also remove color spec for changes documentation since its color is not being defined at this time.
---
Documentation/css/lilypond-manuals.css | 10 +---------
1 file changed, 1 insertion(+), 9 deletions(-)
diff --git a/Documentation/css/lilypond-manuals.css b/Documentation/css/lilypond-manuals.css
index 16dbbb3..af3f822 100644
--- a/Documentation/css/lilypond-manuals.css
+++ b/Documentation/css/lilypond-manuals.css
@@ -16,7 +16,7 @@
usage yellow 50
snippets
- changes orange 30
+ changes
extending red 0
internals purple 280
@@ -453,14 +453,6 @@ table .title {
margin: 0;
}
-body.learning { background-color: #ccffcc; }
-body.notation { background-color: #cceeff; }
-body.usage { background-color: #fff6cc; }
-body.extending { background-color: #ffcccc; }
-body.internals { background-color: #eeccff; }
-body.contributor { background-color: #cccccc; }
-
-
body.learning .footer { background-color: #00bf00; color: #ccffcc; }
body.notation .footer { background-color: #0070bf; color: #cceeff; }
body.usage .footer { background-color: #bf9f00; color: #fff6cc; }
--
1.7.10.4
From de2fd0b4ffc192f6f30590bda9cd988779827534 Mon Sep 17 00:00:00 2001
From: Carl Peterson <carlopeter...@gmail.com>
Date: Thu, 12 Dec 2013 18:05:11 -0500
Subject: [PATCH 5/5] fix sidebar colors in html documentation
Change the default color of the TOC sidebar when no manual-specific color has been specified. Because the text color was changed to white, the TOC was not legible in manuals like the glossary, which is not assigned a color currently.
Also, darkened most of the manual TOC sidebars to separate from header and footer colors. Lightened the header and footer for the Contributor's Guide since it is the "black book."
---
Documentation/css/lilypond-manuals.css | 72 ++++++++++++++------------------
1 file changed, 32 insertions(+), 40 deletions(-)
diff --git a/Documentation/css/lilypond-manuals.css b/Documentation/css/lilypond-manuals.css
index af3f822..8950b84 100644
--- a/Documentation/css/lilypond-manuals.css
+++ b/Documentation/css/lilypond-manuals.css
@@ -40,15 +40,6 @@ body {
background-color: #fff;
}
-/* Documentation-specific page-wide settings */
-
-body.learning { background-color: #ccffcc; }
-body.notation { background-color: #cceeff; }
-body.usage { background-color: #fff6cc; }
-body.extending { background-color: #ffcccc; }
-body.internals { background-color: #eeccff; }
-body.contributor { background-color: #cccccc; }
-
/***********************************************************/
/* HEADERS */
/***********************************************************/
@@ -65,7 +56,7 @@ body.contributor { background-color: #cccccc; }
}
.settitle {
- background: #b1d281;
+ background: #657f40;
color: white;
font-size: 2em;
text-align: center;
@@ -75,11 +66,11 @@ body.contributor { background-color: #cccccc; }
margin: 0 0 10px 0;
}
-body.learning .settitle { background-color: #00bf00; }
-body.notation .settitle { background-color: #0070bf; }
-body.usage .settitle { background-color: #bf9f00; }
-body.extending .settitle { background-color: #bf0000; }
-body.internals .settitle { background-color: #7f00bf; }
+body.learning .settitle { background-color: #407f40; }
+body.notation .settitle { background-color: #40657f; }
+body.usage .settitle { background-color: #7f7f33; }
+body.extending .settitle { background-color: #7f4040; }
+body.internals .settitle { background-color: #6a407f; }
body.contributor .settitle { background-color: #000000; }
.chapter, .appendix, .unnumbered {
@@ -145,7 +136,7 @@ blockquote, .smallexample {
body.learning blockquote, body.learning .smallexample { border-color: #00ff00; }
body.notation blockquote, body.notation .smallexample { border-color: #0095ff; }
-body.usage blockquote, body.usage .smallexample { border-color: #ffd400; }
+body.usage blockquote, body.usage .smallexample { border-color: #ffff00; }
body.extending blockquote, body.extending .smallexample { border-color: #ff0000; }
body.internals blockquote, body.internals .smallexample { border-color: #aa00ff; }
body.contributor blockquote, body.contributor .smallexample { border-color: #000000; }
@@ -182,12 +173,12 @@ table.cartouche {
margin: 0 auto 1em;
}
-body.learning table.cartouche { background-color: #7fff7f; border: 2px solid #00bf00; }
-body.notation table.cartouche { background-color: #7fcaff; border: 2px solid #0070bf; }
-body.usage table.cartouche { background-color: #ffea7f; border: 2px solid #bf9f00; }
-body.extending table.cartouche { background-color: #ff7f7f; border: 2px solid #bf0000; }
-body.internals table.cartouche { background-color: #d47fff; border: 2px solid #7f00bf; }
-body.contributor table.cartouche { background-color: #aaaaaa; border: 2px solid #000000; }
+body.learning table.cartouche { background-color: #cfe5cf; border: 2px solid #7db27d; }
+body.notation table.cartouche { background-color: #cfdce5; border: 2px solid #7d9cb2; }
+body.usage table.cartouche { background-color: #e5e2b8; border: 2px solid #b2b27d; }
+body.extending table.cartouche { background-color: #e5cfcf; border: 2px solid #b27d7d; }
+body.internals table.cartouche { background-color: #decfe5; border: 2px solid #a17db2; }
+body.contributor table.cartouche { background-color: #e5e5e5; border: 2px solid #b2b2b2; }
table.cartouche p {
padding: 1em;
@@ -264,19 +255,19 @@ div#tocframe {
padding: 0;
margin: 0;
overflow: auto;
- background: #f5f5dc;
+ background: #dce35cf;
z-index: 100;
list-style-type: none;
font-size: 0.83em;
line-height: 1.3;
}
-body.learning div#tocframe { background-color: #00bf00; }
-body.notation div#tocframe { background-color: #0070bf; }
-body.usage div#tocframe { background-color: #bf9f00; }
-body.extending div#tocframe { background-color: #bf0000; }
-body.internals div#tocframe { background-color: #7f00bf; }
-body.contributor div#tocframe { background-color: #000000; }
+body.learning div#tocframe { background-color: #cfe5cf; }
+body.notation div#tocframe { background-color: #cfdce5; }
+body.usage div#tocframe { background-color: #e5e5b8; }
+body.extending div#tocframe { background-color: #e5cfcf; }
+body.internals div#tocframe { background-color: #decfe5; }
+body.contributor div#tocframe { background-color: #e5e5e5; }
@media screen {
body > div#tocframe {
@@ -285,12 +276,12 @@ body.contributor div#tocframe { background-color: #000000; }
}
div#tocframe a:link, div#tocframe a:visited {
- color: white;
+ color: black;
text-decoration: none;
}
div#tocframe a:hover {
- color: silver;
+ color: #666666;
text-decoration: underline;
}
@@ -299,7 +290,7 @@ div#tocframe p.toc_uplink {
line-height: 1.125;
background: #c9ccc4;
padding: 0.25em 1em 0.25em 0.5em;
- border-bottom: 1px solid #a0a087;
+ border-bottom: 1px solid black;
margin: 0;
}
@@ -445,20 +436,21 @@ table .title {
}
.footer {
- background: #e5f5ce;
+ background: #657f40;
font-size: 0.8em;
padding: 0.2em 0;
border: solid white;
border-width: 0 0 5px 0;
margin: 0;
+ color: white;
}
-body.learning .footer { background-color: #00bf00; color: #ccffcc; }
-body.notation .footer { background-color: #0070bf; color: #cceeff; }
-body.usage .footer { background-color: #bf9f00; color: #fff6cc; }
-body.extending .footer { background-color: #bf0000; color: #ffcccc; }
-body.internals .footer { background-color: #7f00bf; color: #eeccff; }
-body.contributor .footer { background-color: #000000; color: #cccccc; }
+body.learning .footer { background-color: #407f40; }
+body.notation .footer { background-color: #40657f; }
+body.usage .footer { background-color: #7f7f33; }
+body.extending .footer { background-color: #7f4040; }
+body.internals .footer { background-color: #6a407f; }
+body.contributor .footer { background-color: #000000; }
.footer a:link {
color: white;
@@ -528,7 +520,7 @@ div#search p, div#search form {
body.learning .warning { border-color: #00ff00; }
body.notation .warning { border-color: #0095ff; }
-body.usage .warning { border-color: #ffd400; }
+body.usage .warning { border-color: #ffff00; }
body.extending .warning { border-color: #ff0000; }
body.internals .warning { border-color: #aa00ff; }
body.contributor .warning { border-color: #000000; }
--
1.7.10.4
_______________________________________________
lilypond-devel mailing list
lilypond-devel@gnu.org
https://lists.gnu.org/mailman/listinfo/lilypond-devel
