From: Paul Morris Date: Tue, 6 Jan 2015 22:58:38 +0000 (-0500) Subject: Web: use CSS gradient backgrounds for headings X-Git-Tag: release/2.19.16-1~2^2~38^2~10 X-Git-Url: https://git.donarmstrong.com/?a=commitdiff_plain;ds=sidebyside;h=64efd90c42747ecb731b6d1710635f384a46a237;p=lilypond.git 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 index 274f7fdc0d..0000000000 --- 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 index 0000000000..517f77b11b --- /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 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) {