Web: use CSS gradient backgrounds for headings (issue 192190043 by address@hidden)

[paulwmorris]

Reviewers: ,

Message:
Just a first step in some work on website CSS.

Description:
Web: use CSS gradient backgrounds for headings

Provide image fallbacks for IE9 and lower via
separate, conditionally included CSS file.

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

Affected files (+67, -10 lines):
  A + Documentation/css/lilypond-manuals-ie-fixes.css
  M Documentation/css/lilypond-website.css
  A Documentation/css/lilypond-website-ie-fixes.css
  M Documentation/lilypond-texi2html.init


Index: Documentation/css/lilypond-manuals-ie-fixes.css
diff --git a/Documentation/css/lilypond-ie-fixes.css  
b/Documentation/css/lilypond-manuals-ie-fixes.css
similarity index 100%
rename from Documentation/css/lilypond-ie-fixes.css
rename to Documentation/css/lilypond-manuals-ie-fixes.css
Index: Documentation/css/lilypond-website-ie-fixes.css
diff --git a/Documentation/css/lilypond-website-ie-fixes.css  
b/Documentation/css/lilypond-website-ie-fixes.css
new file mode 100644
index  
0000000000000000000000000000000000000000..6af69155cbada0c621f904bdd1f3341d56d0bbea
--- /dev/null
+++ b/Documentation/css/lilypond-website-ie-fixes.css
@@ -0,0 +1,32 @@
+/* IE9 and IE8 lack support for CSS gradients so this file */
+/* supplies background images for them instead. */
+
+#quickSummary .subheading {
+  background: #fff url(../pictures/summary-gradient.png) repeat-y 0 0;
+}
+
+a[name="Stable"] + h4 {
+  background: #bdee9d url(../pictures/color1-bg.png) repeat-x top left;
+}
+
+a[name="Unstable"] + h4 {
+  background: #fad58c url(../pictures/color3-bg.png) repeat-x top left;
+}
+
+.column-center-top h3 {
+  background: #9ccc7c url(../pictures/color1-bg.png) repeat-x top left;
+}
+
+.column-left-top h3,
+.column-left-bottom h3 {
+  background: #adce82 url(../pictures/color2-bg.png) repeat-x top left;
+}
+
+.column-right-top h3,
+.column-right-bottom h3 {
+  background: #bdd088 url(../pictures/color3-bg.png) repeat-x top left;
+}
+
+.column-center-bottom h3 {
+  background: #ccd38f url(../pictures/color4-bg.png) repeat-x top left;
+}
Index: Documentation/css/lilypond-website.css
diff --git a/Documentation/css/lilypond-website.css  
b/Documentation/css/lilypond-website.css
index  
820cd5c5bfea663ecd82d71b286766452da85df2..3086844851610d25e4918d05be51e901ff9977a0  
100644
--- a/Documentation/css/lilypond-website.css
+++ b/Documentation/css/lilypond-website.css
@@ -419,7 +419,11 @@ div#quickSummary {
 }

 #quickSummary .subheading {
-  background: #fff url(../pictures/summary-gradient.png) repeat-y 0 0;
+  background: linear-gradient(to right,
+    rgb(79, 130, 99),
+    rgb(79, 130, 99) 10%,
+    rgb(255, 255, 255) 75%,
+    rgb(255, 255, 255));
   color: #fff;
   padding: 0 0.5em;
   margin: 0;
@@ -516,12 +520,18 @@ div#wildCardBox {

 /* this might not work in certain browsers */
 a[name="Stable"] + h4 {
-  background: #bdee9d url(../pictures/color1-bg.png) repeat-x top left;
+  background-color: #bdee9d;
+  background: linear-gradient(to top,
+    rgb(140, 210, 118),
+    rgb(212, 243, 201));
 }

 /* this might not work in certain browsers */
 a[name="Unstable"] + h4 {
-  background: #fad58c url(../pictures/color3-bg.png) repeat-x top left;
+  background-color: #fad58c;
+  background: linear-gradient(to top,
+    rgb(183, 213, 131),
+    rgb(231, 243, 207));
 }

 #latestVersion .subsubheading {
@@ -688,7 +698,10 @@ div.float-right a.clickable {

 /* color1 */
 .column-center-top h3 {
-  background: #9ccc7c url(../pictures/color1-bg.png) repeat-x top left;
+  background-color: #9ccc7c;
+  background: linear-gradient(to top,
+    rgb(140, 210, 118),
+    rgb(212, 242, 201));
   text-align: left;
   border-bottom: 1px solid #9ccc7c;
 }
@@ -714,7 +727,10 @@ div.float-right a.clickable {
 /* color2 */
 .column-left-top h3,
 .column-left-bottom h3 {
-  background: #adce82 url(../pictures/color2-bg.png) repeat-x top left;
+  background-color: #adce82;
+  background: linear-gradient(to top,
+    rgb(173, 206, 130),
+    rgb(221, 243, 204));
   border-bottom: 1px solid #adce82;
 }

@@ -738,7 +754,10 @@ div.float-right a.clickable {
 /* color3 */
 .column-right-top h3,
 .column-right-bottom h3 {
-  background: #bdd088 url(../pictures/color3-bg.png) repeat-x top left;
+  background-color: #bdd088;
+  background: linear-gradient(to top,
+    rgb(189, 208, 136),
+    rgb(231, 243, 207));
   border-bottom: 1px solid #bdd088;
 }

@@ -752,7 +771,10 @@ div.float-right a.clickable {

 /* color4 */
 .column-center-bottom h3 {
-  background: #ccd38f url(../pictures/color4-bg.png) repeat-x top left;
+  background-color: #ccd38f;
+  background: linear-gradient(to top,
+    rgb(204, 211, 143),
+    rgb(237, 244, 208));
   text-align: left;
   border-bottom: 1px solid #ccd38f;
 }
Index: Documentation/lilypond-texi2html.init
diff --git a/Documentation/lilypond-texi2html.init  
b/Documentation/lilypond-texi2html.init
index  
1ae43523cf9b7569facdee873e38018564fccf83..7b8613145c0fdd35d009e8090a78e90cf48b70f7  
100644
--- a/Documentation/lilypond-texi2html.init
+++ b/Documentation/lilypond-texi2html.init
@@ -1192,7 +1192,7 @@ sub split_texi_filename ($)
  
#############################################################################

 # Include our standard CSS file, not hard-coded CSS code directly in the  
HTML!
-# For IE, conditionally include the lilypond-ie-fixes.css style sheet
+# For IE, add a second conditionally included CSS file.
 sub lilypond_css_lines ($$)
 {
   my $import_lines = shift;
@@ -1216,10 +1216,13 @@ sub lilypond_css_lines ($$)
 	"<link rel=\"alternate stylesheet\" type=\"text/css\"  
href=\"css/$ref->{FILENAME}\" title=\"$ref->{TITLE}\">\n";
   }

-  # The ie-fixes stylesheet is needed for the docs, but not the website.
-  if (not ($web_manual)) {
+  # Add a conditionally included CSS file for IE, for either the docs or  
the website
+  if ($web_manual) {
+    $Texi2HTML::THISDOC{'CSS_LINES'} .=
+	"<!--[if lte IE 9]>\n<link href=\"css/lilypond-website-ie-fixes.css\"  
rel=\"stylesheet\" type=\"text/css\">\n<![endif]-->\n";
+  } else {
     $Texi2HTML::THISDOC{'CSS_LINES'} .=
-	"<!--[if lte IE 7]>\n<link href=\"css/lilypond-ie-fixes.css\"  
rel=\"stylesheet\" type=\"text/css\">\n<![endif]-->\n";
+	"<!--[if lte IE 7]>\n<link href=\"css/lilypond-manuals-ie-fixes.css\"  
rel=\"stylesheet\" type=\"text/css\">\n<![endif]-->\n";
   }

   if ($ENV{'AJAX_SEARCH'} == 1) {