Here's my initial design submission for the docs - it's just a gentle
modification of the CSS file:
- use "Century Schoolbook L" if available to match the LilyPond output
(Georgia is also a good option)
- links are only underlined when hovered upon
- the colors are taken from the Monet "Waterlilies" on the LilyPond homepage

I didn't change the color of the box at the bottom ("This page is for
LilyPond-2.11.58") because it was styled right in the HTML file.

Hope you get lots of good ideas from the list!

Andrew


On Mon, Aug 11, 2008 at 1:55 PM, Reinhold Kainhofer
<[EMAIL PROTECTED]> wrote:
> -----BEGIN PGP SIGNED MESSAGE-----
> Hash: SHA1
>
> Dear all,
> I suppose my last mail sounded too technical (thanks Valentin for pointing
> this out), so here I'm again with some clarifications:
>
> For the new Lilypond documentation we are looking for a good screen design
> (i.e. a mockup image of how the page should look like. You don't need to
> implement it!).
>
> The current, unpolished docs are e.g. at:
> http://kainhofer.com/~lilypond/texi2html-out/Documentation/user/lilypond/index.html
>
> It works fine (should also work with IE now), but doesn't look very good yet.
>
>
> All we need from you is a mockup image of how the pages should look like. I
> will do the actual implementation in HTML / CSS etc., so you don't need to
> know anything technical, all you need to do is to create a good design (in
> whatever format you like best: You can send images, html pages, etc.).
>
>
> Since after the release, we'll probably also tackle the general lilypond
> homepage, it would be a plus if the design could also be re-used (with some
> adaptions, of course) for the lilypond.org homepage.
>
>
> Cheers,
> Reinhold
>
> PS: The complete documentation index to all different parts of our
> documentation is at http://kainhofer.com/~lilypond/texi2html-out/
> Please notice that this page does not use the documentation style, but
> rather the homepage style and thus won't be affected by any design changes
> to the docs yet.
>
>
> - --
> - ------------------------------------------------------------------
> Reinhold Kainhofer, Vienna University of Technology, Austria
> email: [EMAIL PROTECTED], http://reinhold.kainhofer.com/
>  * Financial and Actuarial Mathematics, TU Wien, http://www.fam.tuwien.ac.at/
>  * K Desktop Environment, http://www.kde.org, KOrganizer maintainer
>  * Chorvereinigung "Jung-Wien", http://www.jung-wien.at/
> -----BEGIN PGP SIGNATURE-----
> Version: GnuPG v1.4.6 (GNU/Linux)
>
> iD8DBQFIoJkiTqjEwhXvPN0RAkEMAKCGNpsDkJJfxSVUWlzofnnJUITUGgCfVEeh
> yqdmvJ3zrjBZli9qIKriEoo=
> =HyaP
> -----END PGP SIGNATURE-----
>
>
> _______________________________________________
> lilypond-devel mailing list
> [EMAIL PROTECTED]
> http://lists.gnu.org/mailman/listinfo/lilypond-devel
>
/***********************************************************/
/*                  PAGE-WIDE SETTINGS                     */
/**********************************************************/

html {
  height:100%;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-size: 100%;
  font-family: "Century Schoolbook L", Georgia, serif;
  margin-right: auto;
  margin-left: auto;
}

/***********************************************************/
/*                      HEADERS                            */
/***********************************************************/
h4 {
  color: #151959;
}

h3 {
    color: #151959;
}

h2 {
  font-size: x-large;
  color: #151959;
}
.unnumberedsubsubsec, .subsubheading {
  font-size: large;
  color: #151959;
}

/***********************************************************/
/*                       LINKS                             */
/***********************************************************/
a:link, a:visited, a:hover, a:active {color:#2E5479; text-decoration: none;}
a:hover {text-decoration: underline;}
a:active {color:#CCF;}

/***********************************************************/
/*                  BLOCK FORMATTING                       */
/***********************************************************/
blockquote {
  border: 1px solid #cccccc;
  padding: 3px;
  width: 40em;
}
.verbatim, .example {
  font-family: "Courier New",Courier,monospace;
}
hr {
  border:  none;
  height: 1px;
  color: #666666;
  background-color: #666666;
}
table.cartouche {
  border: 2px dotted #cccccc;
  margin-left: auto;
  margin-right: auto;
  width: 85%;
}
table.cartouche td {
  border: none;
}

/***********************************************************/
/*                    MAIN CONTENT                         */
/***********************************************************/

div#main {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 27%;
  padding: 0 1em;
  margin: 0;
  overflow: auto;
}

#languages {
  padding-bottom: 1em;
}

/***********************************************************/
/*                    TOC SIDEBAR                          */
/***********************************************************/

div#tocframe {
  position:      absolute;
  top:           0;
  right: 73%;
  bottom: 0;
  left:          0;
  padding:       5px;
  padding-bottom: 0;
  margin: 0;
  overflow:      auto;
  background-color: #E7EFE3;
  z-index:100;
  list-style-type: none;
}

@media screen {
  body>div#tocframe {
    position: fixed
    }
  }

#tocframe .contents {
  width: 100%;
  padding-bottom: 0.25em;
  border: none;
  margin: 0em;
  background-color: transparent;
  list-style-type: none;
}

#tocframe a, #tocframe a:visited, #tocframe a:active {
  color: #1B3313;
  text-decoration: none;
}

#tocframe a:hover {
  color: #2E5479;
  text-decoration:underline;
}

#tocframe ul.toc {
  padding-left: 0px;
  margin-left: 0px;
}
#tocframe ul.toc li {
 padding-left: 0px;
  margin-left: 0px;
  list-style-type: none;
}
#tocframe ul.toc > li {
  font-size: 12px;
}
#tocframe ul.toc li li {
  padding-left: 15px;
}
li.toc_current {
  font-weight: bold;
  font-style: italic;
}

li.toc_current ul {
  font-weight: normal;
  font-style: normal;
  background: transparent;
}




/***********************************************************/
/*                     NAVIGATION                          */
/***********************************************************/

.nav_table {
  width: 100%;
  background-color: #CCD3CC;
  border: 0;
  margin-top: 4px;
  left: auto;
  right: auto;
  font-size: 0.8em;
}






/***********************************************************/
/*               OVERRIDES FOR PRINTING...                 */
/***********************************************************/
@media print {
  /* Hide the sidebar: */
  body { padding-left: 0; }
  #tocframe { display: none; }
  .nav_table { display: none; }
}
_______________________________________________
lilypond-user mailing list
lilypond-user@gnu.org
http://lists.gnu.org/mailman/listinfo/lilypond-user

Reply via email to