Skip to content

GitLab

Verified Commit f8681f6e authored by Roberto Bochet's avatar Roberto Bochet
Browse files

Added printable version button

parent f42054ae
Show whitespace changes
Inline Side-by-side
README.md
View file @ f8681f6e
......@@ -59,10 +59,7 @@ Alternatively you can write your slides with pure **html**
## How do I make a PDF out of the slides?
Append `?print-pdf` at the end of the URL.
For instance if you're running the `deploy.py` script locally the URL will be
something like `http://127.0.0.1:8080/?print-pdf`.
Click on the printer symbol in the bottom-left corner to get the printable version of the slides.
Then just use the print function of your browser to make a PDF of the page.
......
index.html
View file @ f8681f6e
......@@ -2,21 +2,21 @@
<head>
<meta charset="utf-8"/>
<meta name="description" content=""/>
<meta name="author" content=""/>
<meta content="" name="description"/>
<meta content="" name="author"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"/>
<!-- reveal.js base stylesheel. Don't remove nor edit this. -->
<link rel="stylesheet" href="./reveal.js/css/reveal.css"/>
<link href="./reveal.js/css/reveal.css" rel="stylesheet"/>
<!-- POuL theme for reveal.js -->
<link rel="stylesheet" href="./poul/css/poul.css" id="theme"/>
<link href="./poul/css/poul.css" id="theme" rel="stylesheet"/>
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="./reveal.js/lib/css_highlight/hopscotch.css"/>
<link href="./reveal.js/lib/css_highlight/hopscotch.css" rel="stylesheet"/>
<!-- Printing and PDF exports -->
<script>
......@@ -89,12 +89,14 @@
<div class="reveal">
<div class="slides">
<section data-markdown="./slides/intro.html"></section>
<section data-markdown="./slides/content.md"
data-charset="utf-8"
<section data-charset="utf-8"
data-markdown="./slides/content.md"
data-separator="^\r?\n---\r?\n$"
data-separator-vertical="^\r?\n----\r?\n$"
data-separator-notes="^Notes:">
data-separator-notes="^Notes:"
data-separator-vertical="^\r?\n----\r?\n$">
</section>
<section data-markdown="./slides/outro.html"></section>
</div>
</div>
<a class="printable-version" href="?print-pdf"></a>
\ No newline at end of file
poul/css/poul.css
View file @ f8681f6e
......@@ -344,3 +344,22 @@ code.input::before, pre.input > code::before {
code.input.root::before, pre.input.root > code::before {
content: "#";
}
/*********************************************
* OTHER
*********************************************/
.printable-version {
position: absolute;
bottom: 3vh;
left: 3vh;
height: 30px;
width: 30px;
display: block;
z-index: 100;
opacity: 0.2;
transition: opacity 0.3s;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 52 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23A2A2A2'%3E%3Cpath d='M11.96 50h28.09V32H11.96v18zm6.854-13.003h14.189v2H18.814v-2zm0 6h14.189v2H18.814v-2zM16 20h20v-.003h1.003v-2H36V2H16v15.997h-.997v2H16z'/%3E%3Cpath d='M43.03 10H38v5.997h1.003v6H38V22H14v-.003h-.997v-6H14V10H8.97C5.13 10 2 13.12 2 16.97V40h7.96V30h32.09v10H50V16.97A6.97 6.97 0 0043.03 10z'/%3E%3C/g%3E%3C/svg%3E");
}
.printable-version:hover {
opacity: 1;
}
\ No newline at end of file
poul/css/print/pdf.css
View file @ f8681f6e
@import url("../../../reveal.js/css/print/pdf.css");
.reveal x-section-title {
.reveal x-section-title, .printable-version {
display: none;
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment