The example image is the excerpt from Bach BWV 861 from the essay.
Anchor links are used to link to specific examples on the examples
page. The news entries on the home page are reduced to just a list
of headlines that link to specific entries on the 'Old News' page
(under 'Community'). And that page is renamed to just 'News'.
@macro exampleImage{IMAGE-FILE}
@html
-<div class="float-center">
+<div class="float-center example-image-wrapper">
<a class="clickable" href="ly-examples/\IMAGE-FILE\.png">
<img src="ly-examples/\IMAGE-FILE\-small.png" alt="\IMAGE-FILE\">
</a>
@node Notícies antigues
@unnumberedsec Notícies antigues
-@translationof Old news
+@translationof News
@divClass{heading-center}
@warning{Hi ha molts anuncis i registres de canvi antics a les
@macro exampleImage{IMAGE-FILE}
@html
-<div class="float-center">
+<div class="float-center example-image-wrapper">
<a class="clickable" href="ly-examples/\IMAGE-FILE\.png">
<img src="ly-examples/\IMAGE-FILE\-small.png" alt="\IMAGE-FILE\">
</a>
@include web/news-front.itexi
@divClass{float-right}
-(@ref{Old news,,,,Starší novinky})
+(@ref{News,,,,Starší novinky})
@divEnd
@divEnd
@node Starší novinky
@unnumberedsec Starší novinky
-@translationof Old news
+@translationof News
@include web/news-front.itexi
margin: 0;
}
-div#news {
+#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 {
padding: 0 0.5em;
}
-div#homePageSideBar {
+#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;
}
-#homePageSideBar .subheading {
+#homepage-sidebar .subheading {
font-size: 15.2px;
background: #5b7f64;
color: #fff;
- padding: 0.2em 0.5em 0em 0.7em;
- margin: 0;
+ padding: 0.2em 0.5em 0.1em 0.7em;
+ margin: 0.5em 0 0.7em;
border-radius: 5px;
}
-#homePageSideBar p,
+#homepage-sidebar p,
#pondingsText {
- padding: 0.7em 0.5em;
+ padding: 0em 0.5em 0.5em;
margin: 0;
}
-/* for better spacing between "download" and "manuals" links */
-#homePageSideBar p:nth-of-type(2n) {
- padding-top: 0;
- margin-top: -3px;
-}
-
div#footer {
clear: both;
width: 100%;
}
div.float-left a.clickable,
-div.float-center 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;
}
@macro exampleImage{IMAGE-FILE}
@html
-<div class="float-center">
+<div class="float-center example-image-wrapper">
<a class="clickable" href="ly-examples/\IMAGE-FILE\.png">
<img src="ly-examples/\IMAGE-FILE\-small.png" alt="\IMAGE-FILE\">
</a>
@node Ältere Neuigkeiten
@unnumberedsec Ältere Neuigkeiten
-@translationof Old news
+@translationof News
@divClass{heading-center}
@warning{Viele alte Ankündigungen und Listen der Änderungen finden sich in der
@macro exampleImage{IMAGE-FILE}
@html
-<div class="float-center">
+<div class="float-center example-image-wrapper">
<a class="clickable" href="ly-examples/\IMAGE-FILE\.png">
<img src="ly-examples/\IMAGE-FILE\-small.png" alt="\IMAGE-FILE\">
</a>
@node Noticias antiguas
@unnumberedsec Noticias antiguas
-@translationof Old news
+@translationof News
@divClass{heading-center}
@warning{Hay muchos anuncios y registros de cambio antiguos en el
@macro exampleImage{IMAGE-FILE}
@html
-<div class="float-center">
+<div class="float-center example-image-wrapper">
<a class="clickable" href="ly-examples/\IMAGE-FILE\.png">
<img src="ly-examples/\IMAGE-FILE\-small.png" alt="\IMAGE-FILE\">
</a>
@include web/news-front.itexi
@divClass{float-right}
-(@ref{Archives}) @c (@ref{Old news,,,,Actualités passées})
+(@ref{Archives}) @c (@ref{News,,,,Actualités passées})
@divEnd
@divEnd
@node Archives
@unnumberedsec Archives
-@translationof Old news
+@translationof News
@divClass{heading-center}
@warning{Les vieilles annonces et informations de version sont rangées au
@macro exampleImage{IMAGE-FILE}
@html
-<div class="float-center">
+<div class="float-center example-image-wrapper">
<a class="clickable" href="ly-examples/\IMAGE-FILE\.png">
<img src="ly-examples/\IMAGE-FILE\-small.png" alt="\IMAGE-FILE\">
</a>
@macro exampleImage{IMAGE-FILE}
@html
-<div class="float-center">
+<div class="float-center example-image-wrapper">
<a class="clickable" href="ly-examples/\IMAGE-FILE\.png">
<img src="ly-examples/\IMAGE-FILE\-small.png" alt="\IMAGE-FILE\">
</a>
@node Notizie vecchie
@unnumberedsec Notizie vecchie
-@translationof Old news
+@translationof News
@divClass{heading-center}
@warning{Molti dei vecchi annunci e changelog si possono trovare
@macro exampleImage{IMAGE-FILE}
@html
-<div class="float-center">
+<div class="float-center example-image-wrapper">
<a class="clickable" href="ly-examples/\IMAGE-FILE\.png">
<img src="ly-examples/\IMAGE-FILE\-small.png" alt="\IMAGE-FILE\">
</a>
@node 古いニュース
@unnumberedsec 古いニュース
-@translationof Old news
+@translationof News
@divClass{heading-center}
@warning{多くの古いアナウンスと変更履歴が @ref{物置} で見つかります。}
@macro exampleImage{IMAGE-FILE}
@html
-<div class="float-center">
+<div class="float-center example-image-wrapper">
<a class="clickable" href="ly-examples/\IMAGE-FILE\.png">
<img src="ly-examples/\IMAGE-FILE\-small.png" alt="\IMAGE-FILE\">
</a>
@macro exampleImage{IMAGE-FILE}
@html
-<div class="float-center">
+<div class="float-center example-image-wrapper">
<a class="clickable" href="ly-examples/\IMAGE-FILE\.png">
<img src="ly-examples/\IMAGE-FILE\-small.png" alt="\IMAGE-FILE\">
</a>
@include web/news-front.itexi
@divClass{float-right}
-(@ref{Old news}) @c (@ref{Old news,,,,Oud nieuws})
+(@ref{News}) @c (@ref{News,,,,Oud nieuws})
@divEnd
@divEnd
--- /dev/null
+\version "2.19.48"
+
+% Engrave to png with these options to create
+% the large version of image for home page:
+% -dno-point-and-click --png -dresolution=300
+
+% The small version you see on the home page
+% itself is simply the image from the essay manual,
+% downloaded from the website version of the
+% essay manual.
+
+\layout {
+ line-width = 15.9 \cm
+}
+
+\paper {
+ indent = 0
+ paper-height = 8 \cm
+ paper-width = 18 \cm
+}
+
+\header {
+ tagline = ##f
+}
+
+#(set-global-staff-size 14.3)
+
+
+global = { \key g \minor }
+
+partI = \relative {
+ \voiceOne
+ fis'8 d' ees g, fis4 g
+ r8 a16 bes c8 bes16 a d8 r r4
+ r2 r8 d16 ees f8 ees16 d
+ ees4 ~ 16 d c bes a4 r8 ees'16 d
+ c8 d16 ees d8 e16 fis g8 fis16 g a4 ~
+ 8 d, g f ees d c bes
+ a2 g \fermata \bar "|."
+}
+
+partII = \relative {
+ \voiceTwo
+ d'4 r4 r8 d'16 c bes8 c16 d
+ ees8 d c ees a, r r4
+ r8 fis16 g a8 g16 fis g2 ~
+ 2 r8 d' ees g,
+ fis4 g r8 a16 bes c8 bes16 a
+ bes4. <g b>8 <a c> r <d, g> r
+ <ees g>4 <d fis> d2
+}
+
+partIII = \relative {
+ \voiceOne
+ r2 r8 d' ees g, fis4 g r8 a16 bes c8 bes16 a
+ bes2 ~ 8 b16 a g8 a16 b
+ c4 r r2
+ R1
+ r8 d ees g, fis4 g
+ r8 a16 bes c8 bes16 a b2
+}
+
+partIV = \relative {
+ \voiceTwo
+ d4 r r2
+ r8 d ees g, fis4 a
+ d,8 d'16 c bes8 c16 d ees2 ~
+ 8 ees16 d c8 d16 ees fis,8 a16 g fis8 g16 a
+ d,8 d'16 c bes8 c16 d ees8 c a fis'
+ g f ees d c bes a g
+ c a d d, g2 \fermata
+}
+
+\score {
+ <<
+ % \set Score.barNumberVisibility = #all-bar-numbers-visible
+ % required in 2.13
+ \set Score.currentBarNumber = #28
+ \bar ""
+ \new PianoStaff <<
+ \new Staff = "RH" <<
+ \global
+ \new Voice = "voiceI" { \partI }
+ \new Voice = "voiceII" { \partII }
+ >>
+
+ \new Staff = "LH" <<
+ \clef "bass"
+ \global
+ \new Voice = "voiceIII" { \partIII }
+ \new Voice = "voiceIV" { \partIV }
+ >>
+ >>
+ >>
+ \layout {
+ \context {
+ \Staff
+ \remove "Time_signature_engraver"
+ }
+ \context {
+ \PianoStaff
+ \override StaffGrouper.staff-staff-spacing.padding = #1
+ }
+ }
+}
@divEnd
-@divId{news}
+@divId{homepage-main}
+
+@divClass{column-center-top}
+
+@subheading Beautiful Sheet Music
+
+@c This example image is the image from the website version of the essay
+@c manual, downloaded to the pictures directory for use on the home page.
+@c Large version is generated manually from ly file in pictures directory.
+@divId{homepage-example-image-wrapper}
+@imageClickable{bwv861-lilypond,png,,bwv861-lilypond-large,png,center}
+@divEnd
+
+@ifclear web_version
+ @c no anchor links, just text
+
+LilyPond is a powerful and flexible tool for engraving tasks of
+all kinds, for example classical music (like the example above by J.S.
+Bach), complex notation, early music, modern music, tablature,
+vocal music, lead sheets, educational materials, large
+orchestral projects, customized output, and even Schenker graphs.
+
+@end ifclear
+@ifset web_version
+ @c anchor links, link to individual examples by their <a> tag
+
+LilyPond is a powerful and flexible tool for engraving tasks of
+all kinds, for example
+@uref{http://lilypond.org/examples.html#Classical-Music, classical music}
+(like the example above by J.S. Bach),
+@uref{examples.html#Complex-Notation, complex notation},
+@uref{examples.html#Early-Music, early music},
+@uref{examples.html#Modern-Music, modern music},
+@uref{examples.html#Tablature, tablature},
+@uref{examples.html#Vocal-Music, vocal music},
+@uref{examples.html#Lead-Sheets, lead sheets},
+@uref{examples.html#Educational-Applications, educational materials},
+@uref{examples.html#Large-Projects, large orchestral projects},
+@uref{examples.html#Customized-Output, customized output},
+and even
+@uref{examples.html#Schenker-Graphs, Schenker graphs}.
+
+@end ifset
+
+Browse our gallery of @ref{Examples} and be inspired!
+
+@divEnd
+
+@divClass{column-center-middle-color2}
+@subheading News
@c TODO: generate this automatically, including RSS feed.
-@include web/news-front.itexi
+@include web/news-headlines.itexi
+
+@ref{News, More news...}
-@divClass{float-right}
-(@ref{Old news})
@divEnd
@divEnd
@end ifclear
@ifset web_version
@c make the side bar:
-@divId{homePageSideBar}
+@divId{homepage-sidebar}
@subheading Stable Release
@c TODO: javascript to detect OS and suggest download?
@ref{Publications}: what we wrote, and have had written about us.
@item
-@ref{Old news}: an archive.
+@ref{News}: news from the LilyPond project.
@item
@ref{Attic}: announcements and changelogs from past versions.
* Authors::
* Acknowledgements::
* Publications::
-* Old news::
+* News::
* Attic::
@end menu
@divEnd
@contactUsAbout{academic papers}
-@node Old news
-@unnumberedsec Old news
+@node News
+@unnumberedsec News
@divClass{heading-center}
@warning{Many old announcements and changelogs can be found in
@divClass{column-center-top}
-@subheading Beautiful examples
+@subheading Beautiful Examples
LilyPond is a powerful and flexible tool for engraving tasks of
all kinds. Please browse our gallery of examples and be inspired!
@divEnd
@divClass{column-center-middle-color2}
-@subheading Popular Music
+@subheading Lead Sheets
-It is simple to create pop lead sheets with melody, lyrics,
+It is simple to create lead sheets with melody, lyrics,
chord names, and fretboards. In this example you see some of the
predefined fretboard diagrams, but these can be heavily customized
to suit nearly any situation.
@c -*- coding: utf-8; mode: texinfo; -*-
-@c This file is part of lilypond-web.texi and community.itexi
+@c This file is part of community.itexi
@c when you add a new item, consider moving the lowest item(s)
@c into news.itexi.
@c keep two blank lines between news entries
-@c used for news about the upcoming release; see CG 10.2
+@c used for news about the upcoming release; see CG on Release Work
@newsItem
@subheading LilyPond 2.19.48 released @emph{September 13, 2016}
--- /dev/null
+@c -*- coding: utf-8; mode: texinfo; -*-
+@c This file is used in the web.texi file.
+
+@c when you add a new item, consider removing the lowest item(s)
+
+@c used for news about the upcoming release; see CG on Release Work
+
+@c We use @uref for the actual website to link to individual news items
+@c by their <a> tags. We use @ref for other output formats.
+
+@ifclear web_version
+ @c no anchor links, just link to News page
+
+@ref{News, LilyPond 2.19.47 released - @emph{August 13, 2016}}
+
+@ref{News, Two LilyPond projects in Google Summer of Code 2016 - @emph{April 23, 2016}}
+
+@ref{News, LilyPond 2.18.2 released! - @emph{March 23, 2014}}
+
+@ref{News, LilyPond 2.18.0 released! - @emph{December 29, 2013}}
+
+@end ifclear
+@ifset web_version
+ @c anchor links, link to individual news items by their <a> tag
+
+@uref{news.html#LilyPond-2_002e19_002e47-released-August-13_002c-2016,
+ LilyPond 2.19.47 released - @emph{August 13, 2016}}
+
+@uref{news.html#Two-LilyPond-projects-in-Google-Summer-of-Code-2016-April-23_002c-2016,
+ Two LilyPond projects in Google Summer of Code 2016 - @emph{April 23, 2016}}
+
+@uref{news.html#LilyPond-2_002e18_002e2-released_0021-March-23_002c-2014,
+ LilyPond 2.18.2 released! - @emph{March 23, 2014}}
+
+@uref{news.html#LilyPond-2_002e18_002e0-released_0021-December-29_002c-2013,
+ LilyPond 2.18.0 released! - @emph{December 29, 2013}}
+
+@end ifset
@macro exampleImage{IMAGE-FILE}
@html
-<div class="float-center">
+<div class="float-center example-image-wrapper">
<a class="clickable" href="ly-examples/\IMAGE-FILE\.png">
<img src="ly-examples/\IMAGE-FILE\-small.png" alt="\IMAGE-FILE\">
</a>
@ref{Publications}: what we wrote, and have had written about us.
@item
-@ref{Old news}: an archive.
+@ref{News}: an archive.
@item
@ref{Attic}: announcements and changelogs from past versions.
@node 旧闻
@unnumberedsec 旧闻
-@translationof Old news
+@translationof News
@divClass{heading-center}
@warning{Many old announcements and changelogs can be found in