From 64efd90c42747ecb731b6d1710635f384a46a237 Mon Sep 17 00:00:00 2001 From: Paul Morris Date: Tue, 6 Jan 2015 17:58:38 -0500 Subject: [PATCH] Web: use CSS gradient backgrounds for headings Provide image fallbacks for IE9 and lower via separate, conditionally included CSS file. --- ...ixes.css => lilypond-manuals-ie-fixes.css} | 1 - .../css/lilypond-website-ie-fixes.css | 32 +++++++++++++++++ Documentation/css/lilypond-website.css | 36 +++++++++++++++---- Documentation/lilypond-texi2html.init | 11 +++--- 4 files changed, 68 insertions(+), 12 deletions(-) rename Documentation/css/{lilypond-ie-fixes.css => lilypond-manuals-ie-fixes.css} (99%) create mode 100644 Documentation/css/lilypond-website-ie-fixes.css diff --git a/Documentation/css/lilypond-ie-fixes.css b/Documentation/css/lilypond-manuals-ie-fixes.css similarity index 99% rename from Documentation/css/lilypond-ie-fixes.css rename to Documentation/css/lilypond-manuals-ie-fixes.css index 274f7fdc0d..517f77b11b 100644 --- a/Documentation/css/lilypond-ie-fixes.css +++ b/Documentation/css/lilypond-manuals-ie-fixes.css @@ -68,4 +68,3 @@ p, h1, h2, ul, .footer, #languages { 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 index 0000000000..6af69155cb --- /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 820cd5c5bf..5f04b39b6f 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; } diff --git a/Documentation/lilypond-texi2html.init b/Documentation/lilypond-texi2html.init index 1ae43523cf..7b8613145c 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 ($$) "{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'} .= + "\n"; + } else { $Texi2HTML::THISDOC{'CSS_LINES'} .= - "\n"; + "\n"; } if ($ENV{'AJAX_SEARCH'} == 1) { -- 2.39.2