From 0f76a0a23a7697585dff76cae031f762dff4b8ab Mon Sep 17 00:00:00 2001 From: Ed Ward Date: Tue, 30 Jul 2019 16:17:43 +0200 Subject: [PATCH] Added files for PDF generation --- onepage-template.html | 47 +++++++ page-template.html | 82 +++++++++++ pdf-template.html | 32 +++++ source/css/common.css | 209 ++++++++++++++++++++++++++++ source/css/pdf.css | 151 ++++++++++++++++++++ source/css/screen.css | 252 ++++++++++++++++++++++++++++++++++ source/images/ardour_logo.svg | 82 +++++++++++ 7 files changed, 855 insertions(+) create mode 100644 onepage-template.html create mode 100644 page-template.html create mode 100644 pdf-template.html create mode 100644 source/css/common.css create mode 100644 source/css/pdf.css create mode 100644 source/css/screen.css create mode 100644 source/images/ardour_logo.svg diff --git a/onepage-template.html b/onepage-template.html new file mode 100644 index 0000000..fdc8e39 --- /dev/null +++ b/onepage-template.html @@ -0,0 +1,47 @@ + + + + + {{page.page_title}} + + + + + + + + + + + +
+
+ + +
+ + {{ content }} + +
+
+
+ + + + + + diff --git a/page-template.html b/page-template.html new file mode 100644 index 0000000..bc4a100 --- /dev/null +++ b/page-template.html @@ -0,0 +1,82 @@ + + + + + {{page.page_title}} + + + + + + + +{% if page.style %} + +{% endif %} + + + +
+
+
+ +

The Ardour Manual

+ + + + {% tree %} + +
+ +
+ + {% breadcrumbs %} + {% githubedit %} + +

{{ page.title }}

+ + {{ content }} + +
+ + {% prevnext %} + +
+
+
+ + + + + + diff --git a/pdf-template.html b/pdf-template.html new file mode 100644 index 0000000..18389c8 --- /dev/null +++ b/pdf-template.html @@ -0,0 +1,32 @@ + + + + + + + {{page.page_title}} + + + + + + + + +
+ + + +
+ +
+

Table of contents

+ + {% tree %} + +
+ + {{ content }} + + + diff --git a/source/css/common.css b/source/css/common.css new file mode 100644 index 0000000..e4716fb --- /dev/null +++ b/source/css/common.css @@ -0,0 +1,209 @@ +kbd { + display: inline-block; + min-width: 1em; + padding: .2em .3em; + font: normal .8em/1 sans-serif; + text-align: center; + text-decoration: none; + border-radius: .3em; + background: rgb(250, 250, 250); + background: linear-gradient(to top, rgb(210, 210, 210), rgb(255, 255, 255)); + color: rgb(50, 50, 50); + white-space:nowrap; + text-transform:capitalize; +} + +kbd.def { + font-weight:bolder; + margin-right:.2em; +} + +kbd.input, +kbd.cmd, +kbd.osc { + font-family:mono; + border-width:0; + text-transform:none; +} + +kbd.input { + background:none; + border-radius: 0; +} + +kbd.cmd { + display:block; + width:100%; + margin-bottom:1ex; + text-transform:none; + background: rgb(220, 220, 220); + text-align:left; +} + +kbd.cmd.lin:before { + content: 'user@linux:~ '; + color:#999999; +} + +kbd.cmd.mac:before { + content: 'MacBook:~/Desktop User\$ '; + color:#999999; +} + +kbd.cmd.win:before { + content: 'C:\\Users\\myAccount> '; + color:#999999; +} + +kbd.optoff, +kbd.option { + border:none; + background:none; +} + +kbd.optoff:before { + content:url('/images/checkbox-unchecked.png'); + margin: 0 1em 0 0; + vertical-align:middle; +} + +kbd.option:before { + content:url('/images/checkbox-checked.png'); + margin: 0 1em 0 0; + vertical-align:middle; +} + +kbd.menu { + border:none; + background:none; + font-weight:bold; + font-stretch:extra-condensed; + white-space:normal; +} + +kbd.osc { + border:none; + background: rgb(208, 208, 243); + font-stretch:extra-condensed; + white-space: nowrap; + text-align:left; +} + +kbd.fader, +kbd.knob, +kbd.button { + background: rgb(174, 174, 217); + background: linear-gradient(to top, rgb(174, 174, 217), rgb(221, 221, 255)); + color:#000044; +} + +kbd.fader { + border-width: 1px 1px 9px 9px; +} + +kbd.knob { + border-radius:12px; + border-width: 1px 1px 9px 9px; +} + +kbd.button { + border-radius:8px; + border-width: 1px 1px 3px 3px; +} + +kbd.mouse { + border-radius:10px; +} + +samp { + font-family:mono; + color:#666666; + background-color:#EBEBEB; + margin-left: .5em; + margin-right: .5em; +} + +#content dfn { + font-weight: bold; + font-style: normal; +} + +.note, +.warning, +.fixme { + min-height: 1.5ex; + padding: 1em; + margin-bottom: 1em; + border-style: solid; + border-width: 1px 1px 1px 8px; +} + +code { + font-size: .9em; + color: #555; +} + +.note { + border-color: #e3e3e3; + background-color: #f5f5f5; +} + +.warning { + border-color: #995555; + background-color: #ffeeee; +} + +.fixme { + border-color: #999944; + background-color: #f0f0e0; + font-weight:bold; +} + +.fixme:before { + content:'FIXME: '; + font-style: italic; + font-size:2em; +} + + +/* Keyboard modifiers */ +.mod1:before { content: "Ctrl ";} +.mod2:before { content: "Alt ";} +.mod3:before { content: "Shift ";} +.mod4:before { content: "Win ";} +.mod12:before { content: "Ctrl Alt ";} +.mod13:before { content: "Ctrl Shift ";} +.mod14:before { content: "Ctrl Win ";} +.mod23:before { content: "Alt Shift ";} +.kp:before { content: "Keypad ";} +/* Variants *without* space after them (yes, these are needed!) */ +.mod1n:before { content: "Ctrl";} +.mod2n:before { content: "Alt";} +.mod3n:before { content: "Shift";} +.mod4n:before { content: "Win";} +.mod12n:before { content: "Ctrl Alt";} +.mod13n:before { content: "Ctrl Shift";} +.mod14n:before { content: "Ctrl Win";} +.mod23n:before { content: "Alt Shift";} +/* Automagic translation for Mac based display */ +.mac .mod1:before { content: "Cmd ";} +.mac .mod2:before { content: "Ctrl ";} +.mac .mod3:before { content: "Shift ";} +.mac .mod4:before { content: "Opt ";} +.mac .mod12:before { content: "Cmd Ctrl ";} +.mac .mod13:before { content: "Cmd Shift ";} +.mac .mod14:before { content: "Cmd Opt ";} +.mac .mod23:before { content: "Ctrl Shift ";} +/* No space variants (Mac based) */ +.mac .mod1n:before { content: "Cmd";} +.mac .mod2n:before { content: "Ctrl";} +.mac .mod3n:before { content: "Shift";} +.mac .mod4n:before { content: "Opt";} +.mac .mod12n:before { content: "Cmd Ctrl";} +.mac .mod13n:before { content: "Cmd Shift";} +.mac .mod14n:before { content: "Cmd Opt";} +.mac .mod23n:before { content: "Ctrl Shift";} + +/* for images sliced in divs, as in http://manual.ardour.org/ardours-interface/about/ */ +.container { position: relative; border: none; } +.hoverimg { position: absolute; border: none; } diff --git a/source/css/pdf.css b/source/css/pdf.css new file mode 100644 index 0000000..4b31564 --- /dev/null +++ b/source/css/pdf.css @@ -0,0 +1,151 @@ +/* this stylesheet is used when generating a PDF */ +/* define a page */ +@page { + size: A4; + margin: 1.5cm 1.5cm 1.5cm 1.5cm; +} + +@page :first { + size: A4; + margin: 1.5cm 1.5cm 1.5cm 1.5cm; + background: url("../images/ardour_logo.svg") no-repeat center; + background-size: contain; +} + +img { + max-width: 100%; +} + +div.frontcover { + page-break-after: always; +} + +/* styles for the right hand spread + Bottom left we display the title of the book, bottom right the page using a CSS + counter, top right the content of the current chapter +*/ +@page:right { + @bottom-left { + margin: 10pt 0 30pt 0; + /*border-top: .25pt solid #666;*/ + content: "The Ardour Manual"; + font-size: 7pt; + color: #333; + } + @bottom-right { + margin: 10pt 0 30pt 0; + /*border-top: .25pt solid #666;*/ + content: counter(page); + font-size: 7pt; + } + @top-right { + content: string(doctitle); + margin: 30pt 0 10pt 0; + font-size: 7pt; + color: #333; + } +} + +/* styles for the left hand spread + Bottom right book title, bottom left current page +*/ +@page:left { + @bottom-right { + margin: 10pt 0 30pt 0; + /*border-top: .25pt solid #666;*/ + content: "The Ardour Manual"; + font-size: 7pt; + color: #333; + } + @bottom-left { + margin: 10pt 0 30pt 0; + /*border-top: .25pt solid #666;*/ + content: counter(page); + font-size: 7pt; + } +} + +/* first page */ +@page:first { + @bottom-right { + content: normal; + margin: 0; + } + + @bottom-left { + content: normal; + margin: 0; + } +} + +/* reset chapter and figure counters on the body */ +body { + counter-reset: chapternum figurenum; + font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif; + line-height: 1.2; + font-size: 9pt; +} + +/* get the title of the current chapter - this will be the content of the h1 +reset figure counter as figures start from 1 in each chapter */ +h1 { + string-set: doctitle content(); + page-break-before: always; + counter-reset: figurenum; + line-height: 1.3; + counter-increment: chapternum; +} + +h1:first-of-type { /* the ToC should not count...*/ + content: none; + counter-reset: chapternum; +} + +/* increment and display figure counter */ +figcaption:before { + counter-increment: figurenum; + content: counter(chapternum) "-" counter(figurenum) ". "; +} + +h1,h2,h3,h4,h5 { + font-weight: bold; + page-break-after: avoid; + page-break-inside:avoid; +} + +h1+p, h2+p, h3+p { + page-break-before: avoid; +} + +table, figure { + page-break-inside: avoid; +} + +ul.toc { + list-style: none; + margin: 0; + padding: 0; +} + +/* create page numbers using target-counter in the TOC */ +ul.toc a::after { + content: target-counter(attr(href), page); + float: right; +} + +ul.toc li { + line-height: 2; +} + +ul.toc li a { + text-decoration: none; +} + +a { + color: #000; +} + +/* add page number to cross references */ +a.xref:after { + content: " (page " target-counter(attr(href, url), page) ")"; +} diff --git a/source/css/screen.css b/source/css/screen.css new file mode 100644 index 0000000..0d6486f --- /dev/null +++ b/source/css/screen.css @@ -0,0 +1,252 @@ +@font-face { + font-family: 'junge-regular'; + src: url('junge-regular-webfont.woff2') format('woff2'), + url('junge-regular-webfont.woff') format('woff'), + url('junge-regular-webfont.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +body { + font-family: 'junge-regular'; + font-size: 16px; + line-height: 2ex; +} + +.clear { + clear:both; +} + +#tree { + background-color: #212A30; + line-height: 1.8ex; + height: 100%; + overflow: scroll; + position: fixed; + top: 0; + bottom: 0; + left: 0; + width: 20em; + padding: 1em 1em 2em 1.5em; +} + +#tree h1 { + font-size: 1.75em; + margin-bottom: 1em; + font-weight: normal; +} + +#tree ul { + padding-left: 1em; + list-style-type: none; +} + +#tree a { + display: inline !important; + font-size: 0.88em; + line-height: 2em; + color: #E4E4E4; + border-bottom: 1px solid transparent; +} + +#tree a:hover { + text-decoration: none; + border-bottom: 1px solid #aaa; +} + +#tree .active > a { + display: inline; + color: #FF8080; +} + +#content { + padding: 1em 2em 2ex 21em; + margin-left: 0; + line-height: 2em; +} + +#content h1, +#content h2, +#content h3, +#content h4 { + font-weight: normal; + padding-bottom: .3ex; +} + +#content h1 { + font-size: 1.8em; + margin: 0 0 2ex 0; + padding-bottom: .8ex; + border-bottom: 2px solid #ccc; +} + +#content h2 { + font-size: 1.3em; + margin: 2ex 0 1ex 0; + border-bottom: 2px solid #ddd; +} + +#content h3 { + font-size: 1.2em; + margin: 1.5ex 0 1ex 0; + border-bottom: 1px solid #eee; +} + +#content h4 { + font-size: 1.1em; + margin: 1.5ex 0 .5ex 0; + border-bottom: 1px solid #eee; +} + +#content table { + width:100%; + margin: 1em 0; + padding: 0; + font-weight: normal; + text-align: left; +} + +#content table tr { + border-bottom: 2px solid #eeeeee; +} + +#content table tr:nth-child(odd){ + background-color: white; +} + +#content table tr:nth-child(even){ + background-color: #f5f5f5; +} + +#content table tr:hover { + background-color: #F2F9FF; +} + +#content table td, +#content table th { + margin: 0; + padding: .5em; +} + +#content table th { + font-weight: bold; +} + +#content table th.sub1 { + padding-left: 2em; +} + +#content table th.sub2 { + padding-left: 4em; +} + +#content table thead { + font-weight:bold; +} + +#content table.dl th { + /* dl class (definition list) is for 2-columns tables that describe properties: + maximmizes the width of the 2nd (description) column */ + vertical-align: top; + min-width: 20%; + white-space:nowrap +} + +#content table.dl td { + vertical-align: top; + width: 100%; +} + +#content ul, +#content ol { + overflow: hidden; +} + +#content figure { + display: table; +} + +#content figcaption { + display: table-caption; + caption-side: bottom; + font-style: italic; + padding-top: 0.5em; + padding-bottom: 1em; +} + +#content figcaption.center { + text-align: center; +} + +#content figcaption.titleover { + text-align: center; + caption-side: top ; +} + +#content figure.right { + margin: 0 0 1em 1em; + float: right; + clear: right; +} + +#content figure.left { + margin: 0 1em 1em 0; + float: left; + clear: left; +} + +#content figure.center { + margin: 1em auto 1em auto; + clear: both; +} + +#content img.mini { + width: 200px; +} + +#content img.mini:hover { + width: 100%; +} + +kbd { + text-shadow: 0 0 2px rgb(255, 255, 255); + box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9); +} + + +kbd.cmd { + text-shadow: none; + box-shadow: none; +} + +#content p.center { + text-align:center; +} + +@media (max-width: 800px) { + #tree { + position: relative; + height: 250px; + width: 100%; + margin-top: 20px; + } + #content { + padding-left: 20px; + margin-top: 0px; + } +} + +/* for the TOC */ +#content p.chapter, +#content p.subchapter, +#content p.section, +#content p.subsection { + line-height:1em; +} +#content p.chapter { padding-top: 1em; padding-left: 1em; padding-bottom:1em; } +#content p.subchapter { padding-left: 4em; } +#content p.section { padding-left: 6em; } +#content p.subsection { padding-left: 8em; } + +/* for images sliced in divs, as in http://manual.ardour.org/ardours-interface/about/ */ +.hoverimg:hover{ z-index:100; box-shadow: 0 0 .2em .2em lightgreen; } diff --git a/source/images/ardour_logo.svg b/source/images/ardour_logo.svg new file mode 100644 index 0000000..0938435 --- /dev/null +++ b/source/images/ardour_logo.svg @@ -0,0 +1,82 @@ + + + + + + image/svg+xml + + + + + + + + +