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