Skip to content

GitLab

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

Added printable version button

parent f42054ae
Hide whitespace changes
Inline Side-by-side
Showing with 53 additions and 35 deletions
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
<!doctype html>
<head>
<meta charset="utf-8"/>
<meta name="description" content=""/>
<meta name="author" content=""/>
<meta charset="utf-8"/>
<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"/>
<!-- reveal.js base stylesheel. Don't remove nor edit this. -->
<link href="./reveal.js/css/reveal.css" rel="stylesheet"/>
<!-- POuL theme for reveal.js -->
<link rel="stylesheet" href="./poul/css/poul.css" id="theme"/>
<!-- POuL theme for reveal.js -->
<link href="./poul/css/poul.css" id="theme" rel="stylesheet"/>
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="./reveal.js/lib/css_highlight/hopscotch.css"/>
<!-- Code syntax highlighting -->
<link href="./reveal.js/lib/css_highlight/hopscotch.css" rel="stylesheet"/>
<!-- Printing and PDF exports -->
<script>
<!-- Printing and PDF exports -->
<script>
let link = document.createElement('link');
link.rel = 'stylesheet';
link.href = window.location.search.match(/print-pdf/gi)
? './poul/css/print/pdf.css' : './poul/css/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
</script>
<script src="./reveal.js/lib/js/head.min.js"></script>
<script src="./reveal.js/js/reveal.js"></script>
<script src="./reveal.js/lib/js/head.min.js"></script>
<script src="./reveal.js/js/reveal.js"></script>
<!-- Init Reveal.js -->
<script>
<!-- Init Reveal.js -->
<script>
document.addEventListener("DOMContentLoaded", () => {
Reveal.initialize({
controls: false,
......@@ -83,18 +83,20 @@
]
});
});
</script>
</script>
</head>
<div class="reveal">
<div class="slides">
<section data-markdown="./slides/intro.html"></section>
<section data-markdown="./slides/content.md"
data-charset="utf-8"
data-separator="^\r?\n---\r?\n$"
data-separator-vertical="^\r?\n----\r?\n$"
data-separator-notes="^Notes:">
</section>
<section data-markdown="./slides/outro.html"></section>
</div>
<div class="slides">
<section data-markdown="./slides/intro.html"></section>
<section data-charset="utf-8"
data-markdown="./slides/content.md"
data-separator="^\r?\n---\r?\n$"
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
......@@ -343,4 +343,23 @@ 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