Workshop material.
commit
5bfea4421f
@ -0,0 +1,83 @@
|
|||||||
|
@page {
|
||||||
|
/* width and height. In this case for an A5 */
|
||||||
|
size: 148.5mm 210mm;
|
||||||
|
/* OR */
|
||||||
|
/* size: A5 portrait; */
|
||||||
|
padding: 0;
|
||||||
|
marks: crop;
|
||||||
|
bleed: 5mm;
|
||||||
|
margin: 25mm;
|
||||||
|
/* Bigger bleed as weasyprint draws the cropmarks within the bleed*/
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@page {
|
||||||
|
@bottom-center {
|
||||||
|
/**
|
||||||
|
On every page display the value of the page counter at the bottom center.
|
||||||
|
The page counter is a special counter created by weasyprint.
|
||||||
|
*/
|
||||||
|
content: counter(page);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@page:right {
|
||||||
|
/**
|
||||||
|
Use a pseudo-selector on the page to display page numbers on right pages
|
||||||
|
on the right.
|
||||||
|
*/
|
||||||
|
@bottom-right {
|
||||||
|
content: counter(page);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@page:left {
|
||||||
|
/**
|
||||||
|
Use a pseudo-selector on the page to display page numbers on left pages
|
||||||
|
on the left.
|
||||||
|
*/
|
||||||
|
@bottom-left {
|
||||||
|
content: counter(page);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@page:first {
|
||||||
|
/**
|
||||||
|
Selects the first page of the documents. Allows for example for hiding
|
||||||
|
the page numbers on the cover and / or different page margins there.
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@page:empty {
|
||||||
|
/**
|
||||||
|
According to the standards this selector should select empty pages.
|
||||||
|
In my experience it doesn't always work.
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Running headers */
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
/**
|
||||||
|
When a header 1 is encoutered set the value of the string
|
||||||
|
running-header to the value of the header
|
||||||
|
*/
|
||||||
|
string-set: running-header content(text);
|
||||||
|
}
|
||||||
|
|
||||||
|
@page {
|
||||||
|
@bottom-center {
|
||||||
|
/**
|
||||||
|
On every page display the value of running-header at
|
||||||
|
that moment
|
||||||
|
*/
|
||||||
|
content: string(running-header);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#toc li a::after {
|
||||||
|
float: right;
|
||||||
|
content: target-counter(attr(href), page);
|
||||||
|
}
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Hello world</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>
|
||||||
|
Hello world.
|
||||||
|
</h1>
|
||||||
|
<p>This document started as a website.</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
from weasyprint import HTML
|
||||||
|
|
||||||
|
# Let weasyprint deal with reading the files and give the filenames
|
||||||
|
HTML(filename='hello-world.html').write_pdf('hello-world.pdf')
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
@ -0,0 +1,320 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Presentation Session 1</title>
|
||||||
|
<link rel="stylesheet" href="static/slidy.css">
|
||||||
|
<style>
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: Belgika;
|
||||||
|
src: url(static/fonts/belgika/belgika-40th-webfont.ttf) format('truetype');
|
||||||
|
font-weight: 200;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: Belgika;
|
||||||
|
src: url(static/fonts/belgika/belgika-16th-webfont.ttf) format('truetype');
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: Belgika;
|
||||||
|
src: url(static/fonts/belgika/belgika-8th-webfont.ttf) format('truetype');
|
||||||
|
font-weight: 600;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: Belgika;
|
||||||
|
src: url(static/fonts/belgika/belgika-5th-webfont.ttf) format('truetype');
|
||||||
|
font-weight: 800;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.slide {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.slide img {
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.slide.text {
|
||||||
|
display: block;
|
||||||
|
padding: 4vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
body, html {
|
||||||
|
font-family: Belgika;
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
a, a:active, a:visited, a:hover, a:link {
|
||||||
|
color: currentColor;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
p, pre, ul, ol, blockquote, h2, h3, h4, h5, h6, dl, table {
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<!-- <div class="slide">
|
||||||
|
<img src="../Tools-shapes-practice-shapes-tools-osp.png" />
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<div class="slide text">
|
||||||
|
<h1>Html-to-print as a lay-out tool</h1>
|
||||||
|
<p>
|
||||||
|
Pad: <a href="https://pad.constantvzw.org/p/prado_workshop_weasyprint">pad.constantvzw.org/p/prado_workshop_weasyprint</a><br>
|
||||||
|
Repository: <a href="https://gitlab.constantvzw.org/algolit/prado-weasyprint-workshop">gitlab.constantvzw.org/algolit/prado-weasyprint-workshop</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="slide text">
|
||||||
|
<h1>Anaïs Berck</h1>
|
||||||
|
<a href="https://www.anaisberck.be/">anaisberck.be</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="slide text">
|
||||||
|
<h1>Open Source Publishing</h1>
|
||||||
|
<p>Graphic design collective using only Free/Libre Open Source Software.</p>
|
||||||
|
<a href="http://osp.kitchen">osp.kitchen</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="slide">
|
||||||
|
<img src="images/Tools-shapes-practice-shapes-tools-osp.png" style="filter: invert(1);" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="slide text">
|
||||||
|
<h1>Algolit</h1>
|
||||||
|
<p>Research group exploring the potential of algorithmic literature.</p>
|
||||||
|
<a href="https://algolit.net">algolit.net</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Examples ? -->
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Algoliterary encounter
|
||||||
|
|
||||||
|
PDF: https://gitlab.constantvzw.org/algolit/algolit/-/raw/master/algoliterary_encounter/catalog/pdf/catalog.en.pagenumbers.pdf
|
||||||
|
Repo: https://gitlab.constantvzw.org/algolit/algolit/-/tree/master/algoliterary_encounter/catalog
|
||||||
|
-->
|
||||||
|
<div class="slide text">
|
||||||
|
<h1>Algoliterary encounter</h1>
|
||||||
|
<a href="https://gitlab.constantvzw.org/algolit/algolit/-/raw/master/algoliterary_encounter/catalog/pdf/catalog.en.pagenumbers.pdf">PDF of the publication</a><br />
|
||||||
|
<a href="https://gitlab.constantvzw.org/algolit/algolit/-/tree/master/algoliterary_encounter/catalog">Git repository</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Dataworkers
|
||||||
|
|
||||||
|
Plain text to PDF
|
||||||
|
|
||||||
|
PDF: https://www.algolit.net/images/4/47/Data-workers.en.publication.pdf
|
||||||
|
Repo: https://git.vvvvvvaria.org/mb/data-workers-publication
|
||||||
|
-->
|
||||||
|
<div class="slide text">
|
||||||
|
<h1>Data Workers</h1>
|
||||||
|
<a href="https://www.algolit.net/images/4/47/Data-workers.en.publication.pdf">PDF of the publication</a><br />
|
||||||
|
<a href="https://git.vvvvvvaria.org/mb/data-workers-publication">Git repository</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
|
||||||
|
DiVersions
|
||||||
|
|
||||||
|
Html 2 pdf
|
||||||
|
|
||||||
|
Web: https://diversions.constantvzw.org/
|
||||||
|
PDF: https://diversions.constantvzw.org/publication/diversions_v2.pdf
|
||||||
|
Web PDF Preview: https://diversions.constantvzw.org/wiki/index.php?title=PublicationUnfolded&paged=pagedðerstyles=etherstyles
|
||||||
|
Repo: https://gitlab.constantvzw.org/osp/work.diversions
|
||||||
|
|
||||||
|
-->
|
||||||
|
<div class="slide text">
|
||||||
|
<h1>Data Workers</h1>
|
||||||
|
<a href="https://diversions.constantvzw.org/">diversions.constantvzw.org</a><br />
|
||||||
|
<a href="https://diversions.constantvzw.org/publication/diversions_v2.pdf">PDF of the publication</a><br />
|
||||||
|
<a href="https://diversions.constantvzw.org/wiki/index.php?title=PublicationUnfolded&paged=pagedðerstyles=etherstyles">Run it online</a><br />
|
||||||
|
<a href="https://gitlab.constantvzw.org/osp/work.diversions">Git repository</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Graph with publishing flows -->
|
||||||
|
|
||||||
|
<!-- Directly from the browser? -->
|
||||||
|
|
||||||
|
<!-- Weasyprint -->
|
||||||
|
<div class="slide text">
|
||||||
|
<h1>Tools of today</h1>
|
||||||
|
<ul>
|
||||||
|
<li>HTML + CSS</li>
|
||||||
|
<li>Python</li>
|
||||||
|
<li>Terminal / shell / command line</li>
|
||||||
|
<li>Weasyprint</li>
|
||||||
|
<li>Code editor.<br />It's not F/LOSS, but I like Microsoft VS Code: <a href="https://code.visualstudio.com">code.visualstudio.com</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="slide text">
|
||||||
|
<h1>HTML + CSS</h1>
|
||||||
|
<p>A web browser!</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="slide text">
|
||||||
|
<h1>Python</h1>
|
||||||
|
<p>Scripting language.</p>
|
||||||
|
<p>To see if it's installed: open a terminal and type:</p>
|
||||||
|
<code><pre>python3 --version</pre></code>
|
||||||
|
<p>Expected output, a number like: <code><pre>Python 3.6.9</pre></code></p>
|
||||||
|
<p>If you don't have python installed it might be: <code><pre>Command not found</pre></code></p>
|
||||||
|
<p>Download python: <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="slide text">
|
||||||
|
<h1>Weasyprint</h1>
|
||||||
|
<p>Python library to convert HTML + CSS to a PDF</p>
|
||||||
|
<p>Install through the terminal:</p>
|
||||||
|
<code><pre>pip3 install weasyprint</pre></code>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Possible to automate and better support for paged media -->
|
||||||
|
<div class="slide text">
|
||||||
|
<h1>Directly from commandline</h1>
|
||||||
|
<code><pre>weasyprint http://weasyprint.org weasyprint-website.pdf</pre></code>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="slide text">
|
||||||
|
<h1>As library in a script</h1>
|
||||||
|
<code><pre>from weasyprint import HTML
|
||||||
|
|
||||||
|
HTML(filename=html_filename).write_pdf(output_pdf_filename)</pre></code>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="slide text">
|
||||||
|
<h1>CSS: Control page size</h2>
|
||||||
|
<code>
|
||||||
|
<pre>@page {
|
||||||
|
/* width and height. In this case for an A5 */
|
||||||
|
size: 148.5mm 210mm;
|
||||||
|
/* OR */
|
||||||
|
/* size: A5 portrait; */
|
||||||
|
padding: 0;
|
||||||
|
marks: crop;
|
||||||
|
bleed: 5mm;
|
||||||
|
margin: 25mm;
|
||||||
|
/* Bigger bleed as weasyprint draws the cropmarks within the bleed*/
|
||||||
|
}</pre>
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<!-- Specific problems with paged media? -->
|
||||||
|
|
||||||
|
<div class="slide text">
|
||||||
|
<h1>CSS: Page numbers</h2>
|
||||||
|
<code>
|
||||||
|
<pre>@page {
|
||||||
|
@bottom-center {
|
||||||
|
/**
|
||||||
|
On every page display the value of the page counter at the bottom center.
|
||||||
|
The page counter is a special counter created by weasyprint.
|
||||||
|
*/
|
||||||
|
content: counter(page);
|
||||||
|
}
|
||||||
|
}</pre>
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="slide text">
|
||||||
|
<h1>CSS: Fancy page numbers</h2>
|
||||||
|
<code>
|
||||||
|
<pre>@page:right {
|
||||||
|
/**
|
||||||
|
Use a pseudo-selector on the page to display page numbers on right pages
|
||||||
|
on the right.
|
||||||
|
*/
|
||||||
|
@bottom-right {
|
||||||
|
content: counter(page);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@page:left {
|
||||||
|
/**
|
||||||
|
Use a pseudo-selector on the page to display page numbers on left pages
|
||||||
|
on the left.
|
||||||
|
*/
|
||||||
|
@bottom-left {
|
||||||
|
content: counter(page);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</pre></code>
|
||||||
|
|
||||||
|
<div class="slide text">
|
||||||
|
<h1>CSS: Special pages</h2>
|
||||||
|
<code>
|
||||||
|
<pre>@page:first {
|
||||||
|
/**
|
||||||
|
Selects the first page of the documents. Allows for example for hiding
|
||||||
|
the page numbers on the cover and / or different page margins there.
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@page:empty {
|
||||||
|
/**
|
||||||
|
According to the standards this selector should select empty pages.
|
||||||
|
In my experience it doesn't always work.
|
||||||
|
*/
|
||||||
|
}</pre>
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="slide text">
|
||||||
|
<h1>CSS: Running headers</h2>
|
||||||
|
<code>
|
||||||
|
<pre>h1 {
|
||||||
|
/**
|
||||||
|
When a header 1 is encoutered set the value of the string
|
||||||
|
running-header to the value of the header
|
||||||
|
*/
|
||||||
|
string-set: running-header content(text);
|
||||||
|
}
|
||||||
|
|
||||||
|
@page {
|
||||||
|
@bottom-center {
|
||||||
|
/**
|
||||||
|
On every page display the value of running-header at
|
||||||
|
that moment
|
||||||
|
*/
|
||||||
|
content: string(running-header);
|
||||||
|
}
|
||||||
|
}</pre>
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="static/slidy.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
All content of this directory are for reference only.
|
||||||
|
They are all owned by their specific right-holders.
|
||||||
|
You can watch them for inspiration as well but cannot re-use them without contacting the concerned persons.
|
||||||
@ -0,0 +1,93 @@
|
|||||||
|
Copyright (c) 2014-2015, Pierre Huyghebaert (pierre@speculoos.com),
|
||||||
|
with Reserved Font Names Balgica and Balgika (see http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web_fonts_and_RFNs#14cbfd4a).
|
||||||
|
|
||||||
|
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||||
|
This license is copied below, and is also available with a FAQ at:
|
||||||
|
http://scripts.sil.org/OFL
|
||||||
|
|
||||||
|
-----------------------------------------------------------
|
||||||
|
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||||
|
-----------------------------------------------------------
|
||||||
|
|
||||||
|
PREAMBLE
|
||||||
|
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||||
|
development of collaborative font projects, to support the font creation
|
||||||
|
efforts of academic and linguistic communities, and to provide a free and
|
||||||
|
open framework in which fonts may be shared and improved in partnership
|
||||||
|
with others.
|
||||||
|
|
||||||
|
The OFL allows the licensed fonts to be used, studied, modified and
|
||||||
|
redistributed freely as long as they are not sold by themselves. The
|
||||||
|
fonts, including any derivative works, can be bundled, embedded,
|
||||||
|
redistributed and/or sold with any software provided that any reserved
|
||||||
|
names are not used by derivative works. The fonts and derivatives,
|
||||||
|
however, cannot be released under any other type of license. The
|
||||||
|
requirement for fonts to remain under this license does not apply
|
||||||
|
to any document created using the fonts or their derivatives.
|
||||||
|
|
||||||
|
DEFINITIONS
|
||||||
|
"Font Software" refers to the set of files released by the Copyright
|
||||||
|
Holder(s) under this license and clearly marked as such. This may
|
||||||
|
include source files, build scripts and documentation.
|
||||||
|
|
||||||
|
"Reserved Font Name" refers to any names specified as such after the
|
||||||
|
copyright statement(s).
|
||||||
|
|
||||||
|
"Original Version" refers to the collection of Font Software components as
|
||||||
|
distributed by the Copyright Holder(s).
|
||||||
|
|
||||||
|
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||||
|
or substituting -- in part or in whole -- any of the components of the
|
||||||
|
Original Version, by changing formats or by porting the Font Software to a
|
||||||
|
new environment.
|
||||||
|
|
||||||
|
"Author" refers to any designer, engineer, programmer, technical
|
||||||
|
writer or other person who contributed to the Font Software.
|
||||||
|
|
||||||
|
PERMISSION & CONDITIONS
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining
|
||||||
|
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||||
|
redistribute, and sell modified and unmodified copies of the Font
|
||||||
|
Software, subject to the following conditions:
|
||||||
|
|
||||||
|
1) Neither the Font Software nor any of its individual components,
|
||||||
|
in Original or Modified Versions, may be sold by itself.
|
||||||
|
|
||||||
|
2) Original or Modified Versions of the Font Software may be bundled,
|
||||||
|
redistributed and/or sold with any software, provided that each copy
|
||||||
|
contains the above copyright notice and this license. These can be
|
||||||
|
included either as stand-alone text files, human-readable headers or
|
||||||
|
in the appropriate machine-readable metadata fields within text or
|
||||||
|
binary files as long as those fields can be easily viewed by the user.
|
||||||
|
|
||||||
|
3) No Modified Version of the Font Software may use the Reserved Font
|
||||||
|
Name(s) unless explicit written permission is granted by the corresponding
|
||||||
|
Copyright Holder. This restriction only applies to the primary font name as
|
||||||
|
presented to the users.
|
||||||
|
|
||||||
|
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||||
|
Software shall not be used to promote, endorse or advertise any
|
||||||
|
Modified Version, except to acknowledge the contribution(s) of the
|
||||||
|
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||||
|
permission.
|
||||||
|
|
||||||
|
5) The Font Software, modified or unmodified, in part or in whole,
|
||||||
|
must be distributed entirely under this license, and must not be
|
||||||
|
distributed under any other license. The requirement for fonts to
|
||||||
|
remain under this license does not apply to any document created
|
||||||
|
using the Font Software.
|
||||||
|
|
||||||
|
TERMINATION
|
||||||
|
This license becomes null and void if any of the above conditions are
|
||||||
|
not met.
|
||||||
|
|
||||||
|
DISCLAIMER
|
||||||
|
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||||
|
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||||
|
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||||
|
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||||
|
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||||
|
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||||
|
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||||
|
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||||
|
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,403 @@
|
|||||||
|
/* slidy.css
|
||||||
|
|
||||||
|
Copyright (c) 2005-2010 W3C (MIT, ERCIM, Keio), All Rights Reserved.
|
||||||
|
W3C liability, trademark, document use and software licensing
|
||||||
|
rules apply, see:
|
||||||
|
|
||||||
|
http://www.w3.org/Consortium/Legal/copyright-documents
|
||||||
|
http://www.w3.org/Consortium/Legal/copyright-software
|
||||||
|
*/
|
||||||
|
body
|
||||||
|
{
|
||||||
|
margin: 0 0 0 0;
|
||||||
|
padding: 0 0 0 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: black;
|
||||||
|
background-color: white;
|
||||||
|
font-family: "Gill Sans MT", "Gill Sans", GillSans, sans-serif;
|
||||||
|
font-size: 14pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.toolbar {
|
||||||
|
position: fixed; z-index: 200;
|
||||||
|
top: auto; bottom: 0; left: 0; right: 0;
|
||||||
|
height: 1.2em; text-align: right;
|
||||||
|
padding-left: 1em;
|
||||||
|
padding-right: 1em;
|
||||||
|
font-size: 60%;
|
||||||
|
color: red;
|
||||||
|
background-color: rgb(240,240,240);
|
||||||
|
border-top: solid 1px rgb(180,180,180);
|
||||||
|
}
|
||||||
|
|
||||||
|
div.toolbar span.copyright {
|
||||||
|
color: black;
|
||||||
|
margin-left: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.initial_prompt {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1000;
|
||||||
|
bottom: 1.2em;
|
||||||
|
width: 100%;
|
||||||
|
background-color: rgb(200,200,200);
|
||||||
|
opacity: 0.35;
|
||||||
|
background-color: rgba(200,200,200, 0.35);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.initial_prompt p.help {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.initial_prompt p.close {
|
||||||
|
text-align: right;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.slidy_toc {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 300;
|
||||||
|
width: 60%;
|
||||||
|
max-width: 30em;
|
||||||
|
height: 30em;
|
||||||
|
overflow: auto;
|
||||||
|
top: auto;
|
||||||
|
right: auto;
|
||||||
|
left: 4em;
|
||||||
|
bottom: 4em;
|
||||||
|
padding: 1em;
|
||||||
|
background: rgb(240,240,240);
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 2px;
|
||||||
|
font-size: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.slidy_toc .toc_heading {
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-bottom-color: rgb(180,180,180);
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.slide {
|
||||||
|
z-index: 20;
|
||||||
|
margin: 0 0 0 0;
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-right: 20px;
|
||||||
|
border-width: 0;
|
||||||
|
clear: both;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
line-height: 120%;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.background {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.handout {
|
||||||
|
margin-left: 20px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.slide.titlepage {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.slide.titlepage h1 {
|
||||||
|
padding-top: 10%;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.slide h1 {
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 20pt;
|
||||||
|
padding-top: 4pt;
|
||||||
|
padding-bottom: 4pt;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 60pt;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
display: block;
|
||||||
|
font-size: 160%;
|
||||||
|
line-height: 1.2em;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-device-width: 1024px)
|
||||||
|
{
|
||||||
|
div.slide { font-size: 100%; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-device-width: 800px)
|
||||||
|
{
|
||||||
|
div.slide { font-size: 200%; }
|
||||||
|
div.slidy_toc {
|
||||||
|
top: 1em;
|
||||||
|
left: 1em;
|
||||||
|
right: auto;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 180%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div.toc-heading {
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: solid 1px rgb(180,180,180);
|
||||||
|
margin-bottom: 1em;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
image-rendering: optimize-quality;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
font-size: 80%;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 120%;
|
||||||
|
padding-top: 0.2em;
|
||||||
|
padding-bottom: 0.2em;
|
||||||
|
padding-left: 1em;
|
||||||
|
padding-right: 1em;
|
||||||
|
border-style: solid;
|
||||||
|
border-left-width: 1em;
|
||||||
|
border-top-width: thin;
|
||||||
|
border-right-width: thin;
|
||||||
|
border-bottom-width: thin;
|
||||||
|
border-color: #95ABD0;
|
||||||
|
color: #00428C;
|
||||||
|
background-color: #E4E5E7;
|
||||||
|
}
|
||||||
|
|
||||||
|
li pre { margin-left: 0; }
|
||||||
|
|
||||||
|
blockquote { font-style: italic }
|
||||||
|
|
||||||
|
img { background-color: transparent }
|
||||||
|
|
||||||
|
p.copyright { font-size: smaller }
|
||||||
|
|
||||||
|
.center { text-align: center }
|
||||||
|
.footnote { font-size: smaller; margin-left: 2em; }
|
||||||
|
|
||||||
|
a img { border-width: 0; border-style: none }
|
||||||
|
|
||||||
|
a:visited { color: navy }
|
||||||
|
a:link { color: navy }
|
||||||
|
a:hover { color: red; text-decoration: underline }
|
||||||
|
a:active { color: red; text-decoration: underline }
|
||||||
|
|
||||||
|
a {text-decoration: none}
|
||||||
|
.toolbar a:link {color: blue}
|
||||||
|
.toolbar a:visited {color: blue}
|
||||||
|
.toolbar a:active {color: red}
|
||||||
|
.toolbar a:hover {color: red}
|
||||||
|
|
||||||
|
ul { list-style-type: square; }
|
||||||
|
ul ul { list-style-type: disc; }
|
||||||
|
ul ul ul { list-style-type: circle; }
|
||||||
|
ul ul ul ul { list-style-type: disc; }
|
||||||
|
li { margin-left: 0.5em; margin-top: 0.5em; }
|
||||||
|
li li { font-size: 85%; font-style: italic }
|
||||||
|
li li li { font-size: 85%; font-style: normal }
|
||||||
|
|
||||||
|
div dt
|
||||||
|
{
|
||||||
|
margin-left: 0;
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
div dd
|
||||||
|
{
|
||||||
|
margin-left: 2em;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
p,pre,ul,ol,blockquote,h2,h3,h4,h5,h6,dl,table {
|
||||||
|
margin-left: 1em;
|
||||||
|
margin-right: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
p.subhead { font-weight: bold; margin-top: 2em; }
|
||||||
|
|
||||||
|
.smaller { font-size: smaller }
|
||||||
|
.bigger { font-size: 130% }
|
||||||
|
|
||||||
|
td,th { padding: 0.2em }
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin: 0.5em 1.5em 0.5em 1.5em;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol {
|
||||||
|
margin: 0.5em 1.5em 0.5em 1.5em;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul { list-style-type: square; }
|
||||||
|
ul ul { list-style-type: disc; }
|
||||||
|
ul ul ul { list-style-type: circle; }
|
||||||
|
ul ul ul ul { list-style-type: disc; }
|
||||||
|
|
||||||
|
ul li {
|
||||||
|
list-style: square;
|
||||||
|
margin: 0.1em 0em 0.6em 0;
|
||||||
|
padding: 0 0 0 0;
|
||||||
|
line-height: 140%;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol li {
|
||||||
|
margin: 0.1em 0em 0.6em 1.5em;
|
||||||
|
padding: 0 0 0 0px;
|
||||||
|
line-height: 140%;
|
||||||
|
list-style-type: decimal;
|
||||||
|
}
|
||||||
|
|
||||||
|
li ul li {
|
||||||
|
font-size: 85%;
|
||||||
|
font-style: italic;
|
||||||
|
list-style-type: disc;
|
||||||
|
background: transparent;
|
||||||
|
padding: 0 0 0 0;
|
||||||
|
}
|
||||||
|
li li ul li {
|
||||||
|
font-size: 85%;
|
||||||
|
font-style: normal;
|
||||||
|
list-style-type: circle;
|
||||||
|
background: transparent;
|
||||||
|
padding: 0 0 0 0;
|
||||||
|
}
|
||||||
|
li li li ul li {
|
||||||
|
list-style-type: disc;
|
||||||
|
background: transparent;
|
||||||
|
padding: 0 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li ol li {
|
||||||
|
list-style-type: decimal;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
li li ol li {
|
||||||
|
list-style-type: decimal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
setting class="outline on ol or ul makes it behave as an
|
||||||
|
ouline list where blocklevel content in li elements is
|
||||||
|
hidden by default and can be expanded or collapsed with
|
||||||
|
mouse click. Set class="expand" on li to override default
|
||||||
|
*/
|
||||||
|
|
||||||
|
ol.outline li:hover { cursor: pointer }
|
||||||
|
ol.outline li.nofold:hover { cursor: default }
|
||||||
|
|
||||||
|
ul.outline li:hover { cursor: pointer }
|
||||||
|
ul.outline li.nofold:hover { cursor: default }
|
||||||
|
|
||||||
|
ol.outline { list-style:decimal; }
|
||||||
|
ol.outline ol { list-style-type:lower-alpha }
|
||||||
|
|
||||||
|
ol.outline li.nofold {
|
||||||
|
padding: 0 0 0 20px;
|
||||||
|
background: transparent url(../graphics/nofold-dim.gif) no-repeat 0px 0.5em;
|
||||||
|
}
|
||||||
|
ol.outline li.unfolded {
|
||||||
|
padding: 0 0 0 20px;
|
||||||
|
background: transparent url(../graphics/fold-dim.gif) no-repeat 0px 0.5em;
|
||||||
|
}
|
||||||
|
ol.outline li.folded {
|
||||||
|
padding: 0 0 0 20px;
|
||||||
|
background: transparent url(../graphics/unfold-dim.gif) no-repeat 0px 0.5em;
|
||||||
|
}
|
||||||
|
ol.outline li.unfolded:hover {
|
||||||
|
padding: 0 0 0 20px;
|
||||||
|
background: transparent url(../graphics/fold.gif) no-repeat 0px 0.5em;
|
||||||
|
}
|
||||||
|
ol.outline li.folded:hover {
|
||||||
|
padding: 0 0 0 20px;
|
||||||
|
background: transparent url(../graphics/unfold.gif) no-repeat 0px 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.outline li.nofold {
|
||||||
|
padding: 0 0 0 20px;
|
||||||
|
background: transparent url(../graphics/nofold-dim.gif) no-repeat 0px 0.5em;
|
||||||
|
}
|
||||||
|
ul.outline li.unfolded {
|
||||||
|
padding: 0 0 0 20px;
|
||||||
|
background: transparent url(../graphics/fold-dim.gif) no-repeat 0px 0.5em;
|
||||||
|
}
|
||||||
|
ul.outline li.folded {
|
||||||
|
padding: 0 0 0 20px;
|
||||||
|
background: transparent url(../graphics/unfold-dim.gif) no-repeat 0px 0.5em;
|
||||||
|
}
|
||||||
|
ul.outline li.unfolded:hover {
|
||||||
|
padding: 0 0 0 20px;
|
||||||
|
background: transparent url(../graphics/fold.gif) no-repeat 0px 0.5em;
|
||||||
|
}
|
||||||
|
ul.outline li.folded:hover {
|
||||||
|
padding: 0 0 0 20px;
|
||||||
|
background: transparent url(../graphics/unfold.gif) no-repeat 0px 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* for slides with class "title" in table of contents */
|
||||||
|
a.titleslide { font-weight: bold; font-style: italic }
|
||||||
|
|
||||||
|
/*
|
||||||
|
hide images for work around for save as bug
|
||||||
|
where browsers fail to save images used by CSS
|
||||||
|
*/
|
||||||
|
img.hidden { display: none; visibility: hidden }
|
||||||
|
div.initial_prompt { display: none; visibility: hidden }
|
||||||
|
|
||||||
|
div.slide {
|
||||||
|
visibility: visible;
|
||||||
|
position: inherit;
|
||||||
|
}
|
||||||
|
div.handout {
|
||||||
|
border-top-style: solid;
|
||||||
|
border-top-width: thin;
|
||||||
|
border-top-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen {
|
||||||
|
.hidden { display: none; visibility: visible }
|
||||||
|
|
||||||
|
div.slide.hidden { display: block; visibility: visible }
|
||||||
|
div.handout.hidden { display: block; visibility: visible }
|
||||||
|
div.background { display: none; visibility: hidden }
|
||||||
|
body.single_slide div.initial_prompt { display: block; visibility: visible }
|
||||||
|
body.single_slide div.background { display: block; visibility: visible }
|
||||||
|
body.single_slide div.background.hidden { display: none; visibility: hidden }
|
||||||
|
body.single_slide .invisible { visibility: hidden }
|
||||||
|
body.single_slide .hidden { display: none; visibility: hidden }
|
||||||
|
body.single_slide div.slide { position: absolute }
|
||||||
|
body.single_slide div.handout { display: none; visibility: hidden }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
.hidden { display: block; visibility: visible }
|
||||||
|
|
||||||
|
div.slide pre { font-size: 60%; padding-left: 0.5em; }
|
||||||
|
div.toolbar { display: none; visibility: hidden; }
|
||||||
|
div.slidy_toc { display: none; visibility: hidden; }
|
||||||
|
div.background { display: none; visibility: hidden; }
|
||||||
|
div.slide { page-break-before: always }
|
||||||
|
/* :first-child isn't reliable for print media */
|
||||||
|
div.slide.first-slide { page-break-before: avoid }
|
||||||
|
}
|
||||||
|
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue