Re: [Qemu-devel] [PATCH] docs: apply some qemu.org-like CSS style to HTML

["Daniel P. Berrangé" <berrange@redhat.com>]

On Thu, Nov 22, 2018 at 06:17:41PM +0400, Marc-André Lureau wrote:
> Style a bit the HTML documents, to make them look like qemu.org pages.
> 
> Signed-off-by: Marc-André Lureau <marcandre.lureau@redhat.com>
> ---
>  Makefile                     |   2 +
>  docs/texinfo-extra-head.html |   7 ++
>  docs/texinfo.css             | 226 +++++++++++++++++++++++++++++++++++
>  3 files changed, 235 insertions(+)
>  create mode 100644 docs/texinfo-extra-head.html
>  create mode 100644 docs/texinfo.css

IIUC the plain is to have the qemu-doc.html file hosted directly on
the qemu.org website. When we do that, all that is required is to
copy the existing plain qemu-doc.html file and prepend

  ---
  permalink: /qemu-doc.html
  ---

at which point Jekyll's build process will automatically pull in the
standard web page template, which gives us the consistent styling and
navbar layout so it seemlessly fits into qemu.org

With this in mind, I'm not convinced we should try to do anything
clever with styling in the main qemu.git repo, as it may create
more scope for conflicts with jekyll's styling.

I see Stefan has volunteered to just apply the change locally when
he generates the site, which seems reasonable  until we get the
content integrated into qemu.org directly.

> 
> diff --git a/Makefile b/Makefile
> index f2947186a4..9cc4dae1a6 100644
> --- a/Makefile
> +++ b/Makefile
> @@ -940,6 +940,8 @@ docs/version.texi: $(SRC_PATH)/VERSION
>  
>  %.html: %.texi docs/version.texi
>  	$(call quiet-command,LC_ALL=C $(MAKEINFO) $(MAKEINFOFLAGS) --no-headers \
> +	--set-customization-variable EXTRA_HEAD="`cat $(SRC_PATH)/docs/texinfo-extra-head.html`" \
> +	--css-include=$(SRC_PATH)/docs/texinfo.css \
>  	--html $< -o $@,"GEN","$@")
>  
>  %.info: %.texi docs/version.texi
> diff --git a/docs/texinfo-extra-head.html b/docs/texinfo-extra-head.html
> new file mode 100644
> index 0000000000..2986b31701
> --- /dev/null
> +++ b/docs/texinfo-extra-head.html
> @@ -0,0 +1,7 @@
> +<link href='https://fonts.googleapis.com/css?family=Roboto+Mono:300,400%7cRoboto:300,400,500' rel='stylesheet' type='text/css'>
> +<!-- these are optional qemu.org resources -->
> +<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png">
> +<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png">
> +<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png">
> +<link rel="manifest" href="/assets/favicons/manifest.json">
> +<link rel="mask-icon" href="/assets/favicons/safari-pinned-tab.svg" color="#5bbad5">
> diff --git a/docs/texinfo.css b/docs/texinfo.css
> new file mode 100644
> index 0000000000..f541ed2cec
> --- /dev/null
> +++ b/docs/texinfo.css
> @@ -0,0 +1,226 @@
> +/* CSS style for QEMU Texinfo documents */
> +/* based on Public domain 2016 sirgazil. All rights waived. */
> +
> +a:link,
> +a:visited {
> +    color: #F03B11;
> +    text-decoration: none;
> +}
> +
> +a:active,
> +a:focus,
> +a:hover {
> +    text-decoration: underline;
> +}
> +
> +abbr,
> +acronym {
> +    cursor: help;
> +}
> +
> +blockquote {
> +    color: #555753;
> +    font-style: oblique;
> +    margin: 30px 0;
> +    padding-left: 3em;
> +}
> +
> +body {
> +    background: url("https://www.qemu.org/assets/images/qemu_head_200.png") no-repeat fixed 2em 80px;
> +    font-family: 'Roboto', sans-serif;
> +    font-size: 11pt;
> +    font-weight: 300;
> +    line-height: 1.75em;
> +    color: #000000;
> +    margin-left: 16.667%;
> +    width: 66.667%;
> +}
> +
> +code,
> +samp,
> +tt,
> +var {
> +    font-family: 'Roboto Mono', monospace;
> +}
> +
> +div.example,
> +div.lisp {
> +    margin: 0;
> +}
> +
> +dl {
> +    margin: 3em 0;
> +}
> +
> +dl dl {
> +    margin: 0;
> +}
> +
> +dt {
> +    background-color: #F5F5F5;
> +    padding: 0.5em;
> +}
> +
> +h1,
> +h2,
> +h2.contents-heading,
> +h3,
> +h4 {
> +    padding: 20px 0 0 0;
> +    font-weight: 300;
> +}
> +
> +h1 {
> +    position: relative;
> +    background: #f03b11;
> +    background: -webkit-linear-gradient(top, #f03b11 0%, #f01139 100%);
> +    background: linear-gradient(to bottom, #f03b11 0%, #f01139 100%);
> +    background-size: cover;
> +    text-align: center;
> +    color: #FFF;
> +    text-decoration: none;
> +    font-weight: 300;
> +    line-height: 1em;
> +    font-size: 3em;
> +}
> +
> +h2 {
> +    font-size: 2.2em;
> +    font-weight: bold;
> +}
> +
> +h3 {
> +    font-size: 1.8em;
> +}
> +
> +h4 {
> +    font-size: 1.4em;
> +}
> +
> +hr {
> +    display: none;
> +}
> +
> +img {
> +    max-width: 100%;
> +}
> +
> +li {
> +    padding: 5px;
> +}
> +
> +pre.display,
> +pre.example,
> +pre.format,
> +pre.lisp,
> +pre.verbatim {
> +    overflow: auto;
> +}
> +
> +pre.example,
> +pre.lisp,
> +pre.verbatim {
> +    background-color: #2D3743;
> +    border-color: #000;
> +    border-style: solid;
> +    border-width: thin;
> +    color: #E1E1E1;
> +    font-size: smaller;
> +    padding: 1em;
> +}
> +
> +table {
> +    border-collapse: collapse;
> +    margin: 40px 0px;
> +}
> +
> +table.index-cp *,
> +table.index-fn *,
> +table.index-ky *,
> +table.index-pg *,
> +table.index-tp *,
> +table.index-vr * {
> +    background-color: inherit;
> +    border-style: none;
> +}
> +
> +td,
> +th {
> +    border-color: silver;
> +    border-style: solid;
> +    border-width: thin;
> +    padding: 10px;
> +}
> +
> +th {
> +    background-color: #F5F5F5;
> +}
> +
> +.contents-heading {
> +    display: none;
> +}
> +
> +.contents {
> +    margin-bottom: 4em;
> +}
> +
> +.float {
> +    margin: 3em 0em;
> +}
> +
> +.float-caption {
> +    font-size: smaller;
> +    text-align: center;
> +}
> +
> +.float>img {
> +    display: block;
> +    margin: auto;
> +}
> +
> +.footnote {
> +    font-size: smaller;
> +    margin: 5em 0em;
> +}
> +
> +.footnote h3 {
> +    display: inline;
> +    font-size: small;
> +}
> +
> +.header {
> +    background-color: #F2F2F2;
> +    font-size: small;
> +    padding: 0.2em 1em;
> +}
> +
> +.key {
> +    display: inline-block;
> +    border: 1px solid #ccc;
> +    border-radius: 4px;
> +    padding: 0.1em 0.5em;
> +    margin: 0 0.2em;
> +    box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
> +    background-color: #f7f7f7;
> +}
> +
> +.menu * {
> +    border-style: none;
> +}
> +
> +.menu td {
> +    padding: 0.5em 0em;
> +}
> +
> +.menu td:last-child {
> +    width: 60%;
> +}
> +
> +.menu th {
> +    background-color: inherit;
> +}
> +
> +.example code,
> +.example var {
> +    color: #E1E1E1;
> +}
> -- 
> 2.20.0.rc1
> 
> 

Regards,
Daniel
-- 
|: https://berrange.com      -o-    https://www.flickr.com/photos/dberrange :|
|: https://libvirt.org         -o-            https://fstop138.berrange.com :|
|: https://entangle-photo.org    -o-    https://www.instagram.com/dberrange :|