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

Added printable version button

parent f42054ae
...@@ -59,10 +59,7 @@ Alternatively you can write your slides with pure **html** ...@@ -59,10 +59,7 @@ Alternatively you can write your slides with pure **html**
## How do I make a PDF out of the slides? ## How do I make a PDF out of the slides?
Append `?print-pdf` at the end of the URL. Click on the printer symbol in the bottom-left corner to get the printable version of the slides.
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`.
Then just use the print function of your browser to make a PDF of the page. Then just use the print function of your browser to make a PDF of the page.
......
<!doctype html> <!doctype html>
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta name="description" content=""/> <meta content="" name="description"/>
<meta name="author" content=""/> <meta content="" name="author"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<meta name="apple-mobile-web-app-capable" content="yes"/> <meta content="yes" name="apple-mobile-web-app-capable"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/> <meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"/>
<!-- reveal.js base stylesheel. Don't remove nor edit this. --> <!-- 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 --> <!-- 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 --> <!-- 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 --> <!-- Printing and PDF exports -->
<script> <script>
let link = document.createElement('link'); let link = document.createElement('link');
link.rel = 'stylesheet'; link.rel = 'stylesheet';
link.href = window.location.search.match(/print-pdf/gi) link.href = window.location.search.match(/print-pdf/gi)
? './poul/css/print/pdf.css' : './poul/css/print/paper.css'; ? './poul/css/print/pdf.css' : './poul/css/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link); document.getElementsByTagName('head')[0].appendChild(link);
</script> </script>
<script src="./reveal.js/lib/js/head.min.js"></script> <script src="./reveal.js/lib/js/head.min.js"></script>
<script src="./reveal.js/js/reveal.js"></script> <script src="./reveal.js/js/reveal.js"></script>
<!-- Init Reveal.js --> <!-- Init Reveal.js -->
<script> <script>
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
Reveal.initialize({ Reveal.initialize({
controls: false, controls: false,
...@@ -83,18 +83,20 @@ ...@@ -83,18 +83,20 @@
] ]
}); });
}); });
</script> </script>
</head> </head>
<div class="reveal"> <div class="reveal">
<div class="slides"> <div class="slides">
<section data-markdown="./slides/intro.html"></section> <section data-markdown="./slides/intro.html"></section>
<section data-markdown="./slides/content.md" <section data-charset="utf-8"
data-charset="utf-8" data-markdown="./slides/content.md"
data-separator="^\r?\n---\r?\n$" 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>
<section data-markdown="./slides/outro.html"></section> <section data-markdown="./slides/outro.html"></section>
</div> </div>
</div> </div>
<a class="printable-version" href="?print-pdf"></a>
\ No newline at end of file
...@@ -343,4 +343,23 @@ code.input::before, pre.input > code::before { ...@@ -343,4 +343,23 @@ code.input::before, pre.input > code::before {
} }
code.input.root::before, pre.input.root > code::before { code.input.root::before, pre.input.root > code::before {
content: "#"; 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
@import url("../../../reveal.js/css/print/pdf.css"); @import url("../../../reveal.js/css/print/pdf.css");
.reveal x-section-title { .reveal x-section-title, .printable-version {
display: none; 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