diff options
| -rw-r--r-- | xorg.css | 283 |
1 files changed, 241 insertions, 42 deletions
@@ -1,4 +1,5 @@ /* + * Copyright (c) 2011 Gaetan Nadon * Copyright (c) 2010, Oracle and/or its affiliates. All rights reserved. * * Permission is hereby granted, free of charge, to any person obtaining a @@ -21,78 +22,276 @@ * DEALINGS IN THE SOFTWARE. */ -/* Shared stylesheet for X.Org documentation translated to HTML format */ +/* + * Shared stylesheet for X.Org documentation translated to HTML format + * http://www.sagehill.net/docbookxsl/UsingCSS.html + * http://www.w3schools.com/css/default.asp + * https://addons.mozilla.org/en-US/firefox/addon/web-developer/developers + * https://addons.mozilla.org/en-US/firefox/addon/font-finder/ + */ +/* + * The sans-serif fonts are considered more legible on a computer screen + * http://dry.sailingissues.com/linux-equivalents-verdana-arial.html + * + */ body { - font-family: sans-serif; - background: white; - color: black; + font-family: "Bitstream Vera Sans", "DejaVu Sans", Tahoma, Geneva, Arial, Sans-serif; + /* In support of using "em" font size unit, the w3c recommended method */ + font-size: 100%; } -div.sect1 { - border-top: 1px solid #2b5e82; +/* + * Selection: all elements requiring mono spaced fonts. + * + * The family names attempt to match the proportionally spaced font + * family names such that the same font name is used for both. + * We'd like to use Bitstream, for example, in both proportionally and + * mono spaced font text. + */ +.command, +.errorcode, +.errorname, +.errortype, +.filename, +.funcsynopsis, +.function, +.parameter, +.programlisting, +.property, +.screen, +.structname, +.symbol, +.synopsis, +.type +{ + font-family: "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Courier, "Liberation Mono", Monospace; } -.structname, .property, .errorname, .function, .parameter, .filename, -.type, .symbol, .funcsynopsis, .synopsis, .screen { - font-family: monospace; +/* + * <!DOCTYPE book PUBLIC ... > + * + * Books have a title page, a preface, some chapters and appendices, + * a glossary, an index and a bibliography, in that order. + * + * <!DOCTYPE article PUBLIC ... > + * + * An Article has no preface and no chapters. It has sections, appendices, + * a glossary, an index and a bibliography. + */ + +/* + * Selection: book main title and subtitle + */ +div.book>div.titlepage h1.title, +div.book>div.titlepage h2.subtitle { + text-align: center; } -.funcsynopsis, .synopsis { - background: #e6e6fa; - border: 1px solid #aaaaaa; - padding: 0.5em; - clear: both; +/* + * Selection: article main title and subtitle + */ +div.article>div.titlepage h2.title, +div.article>div.titlepage h3.subtitle, +div.article>div.sect1>div.titlepage h2.title, +div.article>div.section>div.titlepage h2.title { + text-align: center; } -.programlisting { - background: #ffefd5; - margin: 0 1.0em; - padding-top: 0.5em; +/* + * Selection: various types of authors and collaborators, individuals or corporate + * + * These authors are not always contained inside an authorgroup. + * They can be contained inside a lot of different parent types where they might + * not be centered. + * We specify here the ones on the title page, others may be added based on merit. + */ +div.titlepage .authorgroup, +div.titlepage .author, +div.titlepage .collab, +div.titlepage .corpauthor, +div.titlepage .corpcredit, +div.titlepage .editor, +div.titlepage .othercredit { + text-align: center; +} + +/* + * Selection: the affiliation of various types of authors and collaborators, + * individuals or corporate. + * + * The affiliation should be closer to the author such that it visually + * groups the affiliation with the author. + */ +div.titlepage .affiliation { + margin-top: -0.8em; + text-align: center; } +/* + * Selection: product release information (X Version 11, Release 7) + * + * The releaseinfo element can be contained inside a lot of different parent + * types where it might not be centered. + * We specify here the one on the title page, others may be added based on merit. + */ +div.titlepage p.releaseinfo { + font-weight: bold; + text-align: center; +} + +/* + * Selection: publishing date + */ +div.titlepage .pubdate { + text-align: center; +} + +/* + * The legal notices are displayed in smaller sized fonts + * Justification is only supported in IE and therefore not requested. + * + */ +.legalnotice { + font-size: small; + font-style: italic; +} + +/* + * Selection: book or article main ToC title + * A paragraph is generated for the title rather than a level 2 heading. + * We do not want to select chapters sub table of contents, only the main one + */ +div.book>div.toc>p, +div.article>div.toc>p { + font-size: 1.5em; + text-align: center; +} + +/* + * Selection: major sections of a book or an article + * + * Unlike books, articles do not have a titlepage element for appendix. + * Using the selector "div.titlepage h2.title" would be too general. + */ +div.book>div.preface>div.titlepage h2.title, +div.book>div.chapter>div.titlepage h2.title, +div.article>div.sect1>div.titlepage h2.title, +div.article>div.section>div.titlepage h2.title, +div.book>div.appendix>div.titlepage h2.title, +div.article>div.appendix h2.title, +div.glossary>div.titlepage h2.title, +div.index>div.titlepage h2.title, +div.bibliography>div.titlepage h2.title { + /* Add a border top over the major parts, just like printed books */ + /* The Gray color is already used for the ruler over the main ToC. */ + border-top-style: solid; + border-top-width: 2px; + border-top-color: Gray; + /* Put some space between the border and the title */ + padding-top: 0.2em; + text-align: center; +} + +/* + * A Screen is a verbatim environment for displaying text that the user might + * see on a computer terminal. It is often used to display the results of a command. + * + * http://www.css3.info/preview/rounded-border/ + */ .screen { background: #e0ffff; - margin: 0 1.0em; - padding: 0.5em; - border: 1px solid #B0C4DE; + border-width: 1px; + border-style: solid; + border-color: #B0C4DE; + border-radius: 1.0em; + /* Browser's vendor properties prior to CSS 3 */ -moz-border-radius: 1.0em; -webkit-border-radius: 1.0em; -khtml-border-radius: 1.0em; - border-radius: 1.0em; + margin-left: 1.0em; + margin-right: 1.0em; + padding: 0.5em; } -.funcsynopsis p, table p, .synopsis p, .figure p { - margin: 0; +/* + * Emphasis program listings with a light shade of gray similar to what + * DocBook XSL guide does: http://www.sagehill.net/docbookxsl/ProgramListings.html + * Found many C API docs on the web using like shades of gray. + */ +.programlisting { + background: #F4F4F4; + border-width: 1px; + border-style: solid; + border-color: Gray; + padding: 0.5em; } -.variablelist { - padding-left: 0.5em; +/* + * Emphasis functions synopsis using a darker shade of gray. + * Add a border such that it stands out more. + * Set the padding so the text does not touch the border. + */ +.funcsynopsis, .synopsis { + background: #e6e6fa; + border-width: 1px; + border-style: solid; + border-color: Gray; + clear: both; + margin: 0.5em; + padding: 0.25em; } -td { - padding-left: 0.5em; +/* + * Selection: paragraphs inside synopsis + * + * Removes the default browser margin, let the container set the padding. + * Paragraphs are not always used in synopsis + */ +.funcsynopsis p, +.synopsis p { + margin: 0; + padding: 0; } -h1, .author, .pubdate, .abstract, .subtitle, .releaseinfo, .authorgroup, -.othercredit { - text-align: center; +/* + * Selection: variable lists, informal tables and tables + * + * Note the <xsl:param name="variablelist.as.table" select="1"/> in xorg-xhtml.xsl + * A table with rows and columns is constructed inside div.variablelist + * + * Set the left margin so it is indented to the right + * Display informal tables with single line borders + */ +table { + margin-left: 0.5em; + border-collapse: collapse; } -.legalnotice { - text-align: justify; - font-size: small; - font-style: italic; +/* + * Selection: paragraphs inside tables + * + * Removes the default browser margin, let the container set the padding. + * Paragraphs are not always used in tables + */ +td p { + margin: 0; + padding: 0; +} + +/* + * Add some space between the left and right column. + * The vertical alignment helps the reader associate a term + * with a multi-line definition. + */ +td, th { + padding-left: 1.0em; + padding-right: 1.0em; + vertical-align: top; } .warning { border: 1px solid red; - background: yellow; + background: #FFFF66; padding-left: 0.5em; } - -.figure-float { - float: right; - margin-left: 0.5em; -} - |