Ok, here are my updates on the lilypond-website.css.
On Wed, Nov 30, 2016 at 8:53 PM, Paul <p...@paulwmorris.com> wrote:
> On 11/30/2016 08:01 PM, John Roper wrote:
>
>> Why is the website auto generated? What content is auto generated or
>> is it just setup that way so that it is always built to the latest
>> version for releases?
>
>
> Others can probably give better answers, as this is kind of second hand
> based on past discussions... but the website is basically an appendage to
> the (much larger) documentation, and, well let me quote
>
> https://www.gnu.org/software/texinfo/
>
> -------------------
> Texinfo is the official documentation format of the GNU project. It was
> invented by Richard Stallman and Bob Chassell many years ago, loosely based
> on Brian Reid's Scribe and other formatting languages of the time. It is
> used by many non-GNU projects as well.
>
> Texinfo uses a single source file to produce output in a number of formats,
> both online and printed (dvi, html, info, pdf, xml, etc.). This means that
> instead of writing different documents for online information and another
> for a printed manual, you need write only one document. And when the work is
> revised, you need revise only that one document. The Texinfo system is
> well-integrated with GNU Emacs.
> -------------------
>
> So using texinfo to produce the documentation in info, pdf, html formats
> etc. is then also used for the website. I think that's the main reason, but
> it's also tied up with supporting multiple translations of the docs/website
> and how building the docs runs LilyPond to generate all of the images for
> the examples, etc. Also the argument is that having one system for docs and
> website is simpler and makes maintenance easier, especially with fewer
> contributors, etc. That's the gist of past discussions.
>
> I think there's a case for decoupling the website from the documentation to
> a greater degree, e.g. as Federico argued earlier in the thread, but based
> on past discussions I am not optimistic that this would go as far as not
> using texinfo. (But I've often wondered how important is it for the content
> of the website to be available in pdf and info formats.)
>
> Upgrading to the latest version of texi2any[0] and/or using Haunt would
> help, but those are non-trivial endeavors. The current setup certainly
> introduces friction for website work, especially for those who are used to
> working directly with HTML.
>
> [0]
> https://www.gnu.org/software/texinfo/manual/texinfo/html_node/Generic-Translator-texi2any.html
>
> Cheers,
> -Paul
>
--
John Roper
Freelance Developer and Simulation Artist
Boston, MA USA
http://jmroper.com/
/* Generic elements */
html {
padding: 0;
margin: 0;
}
body {
position: absolute;
top: 0;
left: 0.5%;
right: 0.5%;
width: 99%;
min-width: 42em;
max-width: 70em;
line-height: 1.5;
text-align: justify;
padding: 0;
margin: 0 auto;
/* fallback for IE8 which doesn't support multiple backgrounds */
background: url(../pictures/background-top-left.png) no-repeat top left;
background-color: #f5fcf2;
background-image: url(../pictures/background-top-right.png),
url(../pictures/background-top-left.png);
background-position: top right, top left;
background-repeat: no-repeat, no-repeat;
@import url('https://fonts.googleapis.com/css?family=Cabin');
font-family: 'Cabin', sans-serif;
letter-spacing: 1px;
}
hr {
display: none;
}
p {
margin: 0.5em;
}
h1, h2, h3, h4, h5 {
margin: 1em 10px;
}
li {
margin-right: 1em;
}
a img {
border: 0;
}
/* Hyperlinks */
/* no dotted line around clicked tabs */
a:focus {
outline-style: none;
}
a:link {
color: #0c51ab;
}
a:visited {
color: #804f01;
}
a:hover {
color: #0105ad;
}
/* Table of Contents */
/* first level toc (unnumbered) */
div#tocframe {
position: absolute;
top: 0;
left: 0;
right: 0;
background: #239b50;
max-width: 70em;
font-size: 100%;
line-height: 1;
padding: 0;
margin-top: 15px;
border-radius: 2px !important;
}
#tocframe a {
color: #fff;
text-decoration: none;
}
#tocframe ul.toc {
list-style-type: none;
padding: 0;
margin: 0;
}
#tocframe > ul:first-child > li:first-child a span {
background: url(../pictures/lily-home-32x32.png) no-repeat scroll 0% 40% transparent;
padding: 16px 0px 16px 38px;
}
#tocframe li {
display: inline;
padding: 0;
margin: 0;
}
/* search box */
#tocframe li form {
float: left;
width: 16%;
font-size: 100%;
padding: 0.5em 0.8%;
margin: 0 0 0 1%;
}
#tocframe li form input {
display: block;
float: left;
width: 92%;
height: 20px;
font-size: 90%;
color: #555555;
background: #ebf2e8;
padding: 0.1em 0.1em 0.1em 0.6em;
border: 0;
margin: 0;
border-radius: 3px;
}
#tocframe li form input[type="hidden"] {
position: relative;
height: 0;
overflow: hidden;
padding: 0;
margin: 0;
}
#tocframe li a {
float: left;
width: 16%;
text-align: center;
font-weight: bold;
padding: 0.68em 0;
margin: 0;
}
#tocframe li a:hover {
background: #239b50;
}
#tocframe li.toc_current a,
#tocframe li.toc_current a:hover {
background: #239b50;
color: #fff;
border-radius: 2px;
}
/* second level toc (unnumberedsec) */
#tocframe .toc .toc {
position: absolute;
top: 3.8em;
left: 0.5%;
right: 0.5%;
font-size: 82%;
padding: 0;
margin: 0;
}
#tocframe .toc .toc li {
display: inline;
padding: 0;
margin: 0;
}
#tocframe .toc .toc li a {
float: left;
width: auto;
background: #239b50;
line-height: 2;
color: #000;
text-decoration: none;
text-indent: 0;
font-weight: normal;
padding: 0 0.5em;
margin: 0;
}
#tocframe .toc .toc li a:hover {
background: #239b50;
}
#tocframe .toc .toc li.toc_current a,
#tocframe .toc .toc li.toc_current a:hover {
background: #239b50;
}
/* third level toc (unnumberedsubsec) */
#tocframe .toc .toc .toc {
position: absolute;
top: 2em;
left: 5%;
font-size: 100%;
}
#tocframe .toc .toc .toc li {
display: inline;
padding: 0;
margin: 0;
}
#tocframe .toc .toc .toc li a {
float: left;
width: auto;
background: #239b50;
text-decoration: none;
text-indent: 0;
font-weight: normal;
padding: 0 0.75em;
margin: 0;
}
#tocframe .toc .toc .toc li a:hover {
background: #239b50;
}
#tocframe .toc .toc .toc li.toc_current a {
background: #239b50;
}
#tocframe .toc .toc .toc li.toc_current a:hover {
background: #239b50;
}
/* Divs */
div#main {
position: relative;
/* this value may need to be adjusted */
top: 7.7em;
left: 0;
right: 0;
width: 100%;
max-width: 70em;
margin: 0 auto 11.7em;
/* Necessary to stretch over floated content;
* will cause scrollbars to appear for content
* that is wider than the width of this div.
*
* FIXME: This breaks Konqueror 3 and 4.
*/
overflow: auto;
}
#main > a:first-child {
position: absolute;
top: -10em;
}
div#pageHeader {
width: 100%;
height: 10em;
padding-top: 2em;
border: solid #ddd;
border-width: 0;
margin: 0 0 1.4em 0;
}
#pageHeader .heading {
font-size: 4em;
text-align: left;
padding: 0;
margin: 0 0 0 340px;
}
#pageHeader p {
font-size: 1.2em;
font-style: italic;
text-align: left;
padding: 0;
margin: 0 0 0 340px;
}
div#lilylogo {
position: absolute;
top: 0;
left: 0;
}
div#cmws {
position: absolute;
top: 0;
left: 50%;
}
div#quickSummary {
text-align: left;
margin: 3em 14em 25px 0;
font-size: 19px;
}
#quickSummary p {
padding: 0.5em;
margin: 0;
}
#homepage-main {
padding: 0;
margin: 0 14em 1em 0;
}
#homepage-example-image-wrapper {
padding: 3em 0em 1.5em;
}
.example-image-wrapper {
padding: 2em 0em 0.5em;
}
.example-image-wrapper img {
padding: 0em 0em 1em;
}
/* .news-item is styled below with columns */
.testimonial-item {
/* Not sure how to style the testimonials */
clear: both;
margin: 2em 0;
}
.testimonial-item .subsubheading {
text-align: left;
padding: 0 0 0 0.5em;
}
.testimonial-item img.float-left,
.testimonial-item img.float-right {
margin: 1em 1em 2em;
}
.testimonial-item p {
padding: 0 0.5em;
}
#homepage-sidebar {
position: absolute;
top: 0;
right: 0;
width: 12em;
text-align: left;
/* negate the top-margin of the first .subheading */
margin-top: -0.5em;
}
#homepage-sidebar .subheading {
font-size: 18px;
background: #239b50;
color: #fff;
padding: 0.2em 0.5em 0.1em 0.7em;
margin: 0.5em 0 0.7em;
border-radius: 2px;
}
#homepage-sidebar p,
#pondingsText {
padding: 0em 0.5em 0.5em;
margin: 0;
}
div#footer {
clear: both;
width: 100%;
border-top: 10px solid #239b50;
}
div#language {
position: absolute;
top: 0;
left: 0;
right: 50%;
width: 50%;
text-indent: 0.5em;
padding: 0;
}
#language h3 {
padding: 0;
border-bottom: 10px solid #239b50;
margin: 0;
}
#language p {
padding: 0;
margin: 0.25em 0 0 0;
}
/* used on website; not certain about the above ones.
see Issue 1105 */
p#languages {
float: left;
width: 45%;
padding: 0.7em;
margin: 0;
text-align: left;
}
#verifier_texinfo {
font-size: 0.8em;
float: right;
width: 48%;
padding: 0.5em;
}
#verifier_texinfo h3 {
position: relative;
height: 0;
text-indent: -9999em;
padding: 0;
margin: 0;
}
#verifier_texinfo img {
vertical-align: middle;
padding: 0;
margin: 0 0 0 0.5em;
}
#verifier_texinfo p {
clear: right;
text-align: right;
padding: 0;
margin: 0;
}
h1.unnumbered, h2.unnumberedsec, h3.unnumberedsubsec {
position: relative;
height: 0;
text-indent: -999em;
padding: 0;
margin: 0;
overflow: hidden;
}
table {
text-align: left;
padding: 0 0 0 0.5em;
border-left: 3px solid #239b50;
margin: 1em 0 0 1em;
}
table td {
padding: 0.4em;
}
table a {
text-align: left;
}
.verbatim {
margin: 10px;
}
.float-left {
float: left;
}
.float-center {
text-align: center;
display: block;
margin: 0 auto;
}
.float-right {
float: right;
}
img.float-left,
img.float-right {
background: #fff;
padding: 1em;
border: 1px solid #bbb;
margin: 0.1em 0.5em;
}
div.float-left a.clickable,
div.float-right a.clickable {
text-decoration: overline;
margin-left: 1em;
}
div.float-center a.clickable {
text-decoration: overline;
}
.clear-both {
clear: both;
}
.align-right {
text-align: right;
}
.heading-center {
text-align: center;
width: 75%;
margin: 0 auto;
}
.heading-center h2 {
padding: 0.25em 0;
margin: 0;
}
/* Columns */
/* color1 */
.column-center-top {
float: left;
width: 99.5%;
text-align: left;
border: 1px solid #239b50;
margin: 1em auto;
}
.column-center-middle-color2,
.column-center-middle-color3,
.news-item {
clear: both;
float: left;
width: 99.5%;
text-align: left;
margin: 1em auto;
}
.column-left-top {
float: left;
width: 49%;
margin: 1em 0;
}
.column-left-bottom {
clear: both;
float: left;
width: 49%;
margin: 1em 0;
}
.column-right-top {
float: right;
width: 49%;
margin: 1em 0;
}
.column-right-bottom {
float: right;
width: 49%;
margin: 1em 0;
}
/* color2 */
.column-left-top,
.column-left-bottom,
.column-center-middle-color2,
.news-item {
border: 1px solid #239b50;
}
/* color3 */
.column-right-top,
.column-right-bottom,
.column-center-middle-color3 {
border: 1px solid #239b50;
}
/* color4 */
.column-center-bottom {
clear: both;
float: left;
width: 99.5%;
text-align: center;
border: 1px solid #239b50;
margin: 1em auto 0;
}
.column-center-top,
.column-center-middle-color2,
.column-center-middle-color3,
.column-center-bottom,
.column-left-top,
.column-left-bottom,
.column-right-top,
.column-right-bottom,
.news-item {
background: #fff;
border-radius: 5px;
}
/* color1 */
.column-center-top h3 {
background: #239b50;
text-align: left;
border-bottom: 1px solid #239b50;
}
/* color2 */
.column-left-top h3,
.column-left-bottom h3,
.column-center-middle-color2 h3,
.news-item h3 {
background: #239b50;
border-bottom: 1px solid #239b50;
}
.news-item h3 {
font-size: 15.2px;
}
/* color3 */
.column-right-top h3,
.column-right-bottom h3,
.column-center-middle-color3 h3 {
background: #239b50;
border-bottom: 1px solid #239b50;
}
/* color4 */
.column-center-bottom h3 {
background: #239b50;
text-align: left;
border-bottom: 1px solid #239b50;
}
.column-center-top h3,
.column-center-middle-color2 h3,
.column-center-middle-color3 h3,
.column-center-bottom h3,
.column-left-top h3,
.column-left-bottom h3,
.column-right-top h3,
.column-right-bottom h3,
.news-item h3 {
text-align: left;
padding: 3px 0.5em 0;
margin: 0;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.column-center-top h4,
.column-center-middle-color2 h4,
.column-center-middle-color3 h4,
.column-center-bottom h4,
.column-left-top h4,
.column-left-bottom h4,
.column-right-top h4,
.column-right-bottom h4 {
text-align: left;
padding: 0.5em 0.5em 0;
margin: 0 0 0.5em 0;
}
.column-center-top ul,
.column-center-middle-color2 ul,
.column-center-middle-color3 ul,
.column-center-bottom ul,
.column-left-top ul,
.column-left-bottom ul,
.column-right-top ul,
.column-right-bottom ul {
list-style-type: none;
padding: 0;
margin: 0.5em 0;
}
.column-center-top li,
.column-center-middle-color2 li,
.column-center-middle-color3 li,
.column-center-bottom li,
.column-left-top li,
.column-left-bottom li,
.column-right-top li,
.column-right-bottom li {
text-align: left;
padding: 0 0.5em 0;
margin: 0 0 0.5em 0;
}
.column-center-top p,
.column-center-middle-color2 p,
.column-center-middle-color3 p,
.column-center-bottom p,
.column-left-top p,
.column-left-bottom p,
.column-right-top p,
.column-right-bottom p {
text-align: left;
}
.column-center-top img.float-left,
.column-center-top img.float-right,
.column-center-middle-color2 img.float-left,
.column-center-middle-color2 img.float-right,
.column-center-middle-color3 img.float-left,
.column-center-middle-color3 img.float-right,
.column-center-bottom img.float-left,
.column-center-bottom img.float-right,
.column-left-top img.float-left,
.column-left-top img.float-right,
.column-left-bottom img.float-left,
.column-left-bottom img.float-right,
.column-right-top img.float-left,
.column-right-top img.float-right,
.column-right-bottom img.float-left,
.column-right-bottom img.float-right {
margin: 0.5em;
}
.keep-bullets ul {
list-style-type: disc;
padding: 0;
margin: 0.5em 1.5em;
}
.keep-bullets li {
padding: 0;
}
.normal-table table {
padding : 0em;
border-left: 2px;
margin: 0em;
width: 67%;
}
.normal-table table td {
padding: 0em;
}
.normal-table table a {
}
.normal-table p {
line-height: 0.8;
}
.example {
position: relative;
left: -2.5em;
text-align: left;
}
.h-scroll-auto {
position: relative;
left: 1em;
width: 250px;
overflow: auto;
}
.warning,
.contactBox {
background: #eef;
text-align: left;
margin: 1em;
padding: 0;
border: 1px solid rgb(160, 160, 175);
border-radius: 5px;
}
.contactBox {
float: left;
}
.warning p,
.contactBox p {
padding: 0.5em;
margin: 0;
}
.hide {
position: relative;
text-indent: -999em;
height: 0;
overflow: hidden;
}
.help {
background: #f77;
color: black;
text-align: center;
font-weight: bold;
width: 75%;
padding: 1em;
border: 10px dotted #239b50;
margin: 1em auto;
}
.legal {
font-size: 0.6em;
}
.link-headings a {
font-weight: bold;
}
.detail {
font-size: 0.8em;
}
.detail a {
font-weight: normal;
}
/* kill title, probably best done in the init file, though */
h1.settitle {
position: relative;
height: 0;
text-indent: -999em;
padding: 0;
margin: 0;
overflow: hidden;
}
_______________________________________________
lilypond-user mailing list
lilypond-user@gnu.org
https://lists.gnu.org/mailman/listinfo/lilypond-user
