Web: use CSS gradient backgrounds for headings

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

diff --git a/Documentation/css/lilypond-ie-fixes.css b/Documentation/css/lilypond-ie-fixes.css
deleted file mode 100644 (file)
index 274f7fd..0000000
--- a/Documentation/css/lilypond-ie-fixes.css
+++ /dev/null
@@ -1,71 +0,0 @@
-/***********************************************************/
-/*                    BASE STYLES                          */
-/***********************************************************/
-
-body {
-  height: 100%;
-  font-size: 100%;
-  min-height: 0;
-  text-align: center;
-}
-
-/***********************************************************/
-/*                    MAIN CONTENT                         */
-/***********************************************************/
-
-div#main {
-  min-height: 0;
-  height: 100%;
-  width: 73%;
-  overflow-x: auto;
-}
-
-table.menu {
-  margin-left: 1em;
-}
-
-.nav_table {
-  width: 100%;
-}
-
-blockquote {
-  width: 100%;
-  margin: 1em 1%;
-}
-
-table.cartouche {
-  width: 85%;
-  margin: 1em 7.5%;
-}
-
-/***********************************************************/
-/*                    TOC SIDEBAR                          */
-/***********************************************************/
-
-div#tocframe {
-  height: 100%;
-  width: 27%;
-}
-
-/***********************************************************/
-/*                    NAVIGATION                           */
-/***********************************************************/
-
-table#navigation {
-  margin: 1em auto;
-}
-
-
-/***********************************************************/
-/*                IE CENTERING FIXES                       */
-/***********************************************************/
-
-table#navigation, div#tocframe, div#main,
-p, h1, h2, ul, .footer, #languages {
-  text-align: left;
-}
-
-div.header h1, div.subheader p {
-  text-align: center;
-}
-

diff --git a/Documentation/css/lilypond-manuals-ie-fixes.css b/Documentation/css/lilypond-manuals-ie-fixes.css
new file mode 100644 (file)
index 0000000..517f77b
--- /dev/null
+++ b/Documentation/css/lilypond-manuals-ie-fixes.css
@@ -0,0 +1,70 @@
+/***********************************************************/
+/*                    BASE STYLES                          */
+/***********************************************************/
+
+body {
+  height: 100%;
+  font-size: 100%;
+  min-height: 0;
+  text-align: center;
+}
+
+/***********************************************************/
+/*                    MAIN CONTENT                         */
+/***********************************************************/
+
+div#main {
+  min-height: 0;
+  height: 100%;
+  width: 73%;
+  overflow-x: auto;
+}
+
+table.menu {
+  margin-left: 1em;
+}
+
+.nav_table {
+  width: 100%;
+}
+
+blockquote {
+  width: 100%;
+  margin: 1em 1%;
+}
+
+table.cartouche {
+  width: 85%;
+  margin: 1em 7.5%;
+}
+
+/***********************************************************/
+/*                    TOC SIDEBAR                          */
+/***********************************************************/
+
+div#tocframe {
+  height: 100%;
+  width: 27%;
+}
+
+/***********************************************************/
+/*                    NAVIGATION                           */
+/***********************************************************/
+
+table#navigation {
+  margin: 1em auto;
+}
+
+
+/***********************************************************/
+/*                IE CENTERING FIXES                       */
+/***********************************************************/
+
+table#navigation, div#tocframe, div#main,
+p, h1, h2, ul, .footer, #languages {
+  text-align: left;
+}
+
+div.header h1, div.subheader p {
+  text-align: center;
+}

diff --git a/Documentation/css/lilypond-website-ie-fixes.css b/Documentation/css/lilypond-website-ie-fixes.css
new file mode 100644 (file)
index 0000000..6af6915
--- /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;
+}

diff --git a/Documentation/css/lilypond-website.css b/Documentation/css/lilypond-website.css
index 820cd5c5bfea663ecd82d71b286766452da85df2..5f04b39b6fbe10ca2c27200897617f837e48d9a3 100644 (file)
--- 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;
 }

diff --git a/Documentation/lilypond-texi2html.init b/Documentation/lilypond-texi2html.init
index 1ae43523cf9b7569facdee873e38018564fccf83..7b8613145c0fdd35d009e8090a78e90cf48b70f7 100644 (file)
--- 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) {