Package paper and pdf style sheets and apply them conditionally

This commit is contained in:
quilicicf 2020-03-10 14:03:30 +01:00
parent 5a5a5c9a6c
commit 499dc68536
No known key found for this signature in database
GPG Key ID: 0561A23A57B55DE1
13 changed files with 660 additions and 686 deletions

2
.gitignore vendored
View File

@ -9,5 +9,3 @@ log/*.log
tmp/** tmp/**
node_modules/ node_modules/
.sass-cache .sass-cache
css/reveal.min.css
js/reveal.min.js

View File

@ -1,203 +0,0 @@
/* Default Print Stylesheet Template
by Rob Glazebrook of CSSnewbie.com
Last Updated: June 4, 2008
Feel free (nay, compelled) to edit, append, and
manipulate this file as you see fit. */
@media print {
/* SECTION 1: Set default width, margin, float, and
background. This prevents elements from extending
beyond the edge of the printed page, and prevents
unnecessary background images from printing */
html {
background: #fff;
width: auto;
height: auto;
overflow: visible;
}
body {
background: #fff;
font-size: 20pt;
width: auto;
height: auto;
border: 0;
margin: 0 5%;
padding: 0;
overflow: visible;
float: none !important;
}
/* SECTION 2: Remove any elements not needed in print.
This would include navigation, ads, sidebars, etc. */
.nestedarrow,
.controls,
.fork-reveal,
.share-reveal,
.state-background,
.reveal .progress,
.reveal .backgrounds,
.reveal .slide-number {
display: none !important;
}
/* SECTION 3: Set body font face, size, and color.
Consider using a serif font for readability. */
body, p, td, li, div {
font-size: 20pt!important;
font-family: Georgia, "Times New Roman", Times, serif !important;
color: #000;
}
/* SECTION 4: Set heading font face, sizes, and color.
Differentiate your headings from your body text.
Perhaps use a large sans-serif for distinction. */
h1,h2,h3,h4,h5,h6 {
color: #000!important;
height: auto;
line-height: normal;
font-family: Georgia, "Times New Roman", Times, serif !important;
text-shadow: 0 0 0 #000 !important;
text-align: left;
letter-spacing: normal;
}
/* Need to reduce the size of the fonts for printing */
h1 { font-size: 28pt !important; }
h2 { font-size: 24pt !important; }
h3 { font-size: 22pt !important; }
h4 { font-size: 22pt !important; font-variant: small-caps; }
h5 { font-size: 21pt !important; }
h6 { font-size: 20pt !important; font-style: italic; }
/* SECTION 5: Make hyperlinks more usable.
Ensure links are underlined, and consider appending
the URL to the end of the link for usability. */
a:link,
a:visited {
color: #000 !important;
font-weight: bold;
text-decoration: underline;
}
/*
.reveal a:link:after,
.reveal a:visited:after {
content: " (" attr(href) ") ";
color: #222 !important;
font-size: 90%;
}
*/
/* SECTION 6: more reveal.js specific additions by @skypanther */
ul, ol, div, p {
visibility: visible;
position: static;
width: auto;
height: auto;
display: block;
overflow: visible;
margin: 0;
text-align: left !important;
}
.reveal pre,
.reveal table {
margin-left: 0;
margin-right: 0;
}
.reveal pre code {
padding: 20px;
border: 1px solid #ddd;
}
.reveal blockquote {
margin: 20px 0;
}
.reveal .slides {
position: static !important;
width: auto !important;
height: auto !important;
left: 0 !important;
top: 0 !important;
margin-left: 0 !important;
margin-top: 0 !important;
padding: 0 !important;
zoom: 1 !important;
overflow: visible !important;
display: block !important;
text-align: left !important;
-webkit-perspective: none;
-moz-perspective: none;
-ms-perspective: none;
perspective: none;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
.reveal .slides section {
visibility: visible !important;
position: static !important;
width: auto !important;
height: auto !important;
display: block !important;
overflow: visible !important;
left: 0 !important;
top: 0 !important;
margin-left: 0 !important;
margin-top: 0 !important;
padding: 60px 20px !important;
z-index: auto !important;
opacity: 1 !important;
page-break-after: always !important;
-webkit-transform-style: flat !important;
-moz-transform-style: flat !important;
-ms-transform-style: flat !important;
transform-style: flat !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
transform: none !important;
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
transition: none !important;
}
.reveal .slides section.stack {
padding: 0 !important;
}
.reveal section:last-of-type {
page-break-after: avoid !important;
}
.reveal section .fragment {
opacity: 1 !important;
visibility: visible !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
transform: none !important;
}
.reveal section img {
display: block;
margin: 15px 0px;
background: rgba(255,255,255,1);
border: 1px solid #666;
box-shadow: none;
}
.reveal section small {
font-size: 0.8em;
}
}

202
css/print/paper.scss Normal file
View File

@ -0,0 +1,202 @@
/* Default Print Stylesheet Template
by Rob Glazebrook of CSSnewbie.com
Last Updated: June 4, 2008
Feel free (nay, compelled) to edit, append, and
manipulate this file as you see fit. */
@media print {
html:not(.print-pdf) {
/* SECTION 1: Set default width, margin, float, and
background. This prevents elements from extending
beyond the edge of the printed page, and prevents
unnecessary background images from printing */
background: #fff;
width: auto;
height: auto;
overflow: visible;
body {
background: #fff;
font-size: 20pt;
width: auto;
height: auto;
border: 0;
margin: 0 5%;
padding: 0;
overflow: visible;
float: none !important;
}
/* SECTION 2: Remove any elements not needed in print.
This would include navigation, ads, sidebars, etc. */
.nestedarrow,
.controls,
.fork-reveal,
.share-reveal,
.state-background,
.reveal .progress,
.reveal .backgrounds,
.reveal .slide-number {
display: none !important;
}
/* SECTION 3: Set body font face, size, and color.
Consider using a serif font for readability. */
body, p, td, li, div {
font-size: 20pt!important;
font-family: Georgia, "Times New Roman", Times, serif !important;
color: #000;
}
/* SECTION 4: Set heading font face, sizes, and color.
Differentiate your headings from your body text.
Perhaps use a large sans-serif for distinction. */
h1,h2,h3,h4,h5,h6 {
color: #000!important;
height: auto;
line-height: normal;
font-family: Georgia, "Times New Roman", Times, serif !important;
text-shadow: 0 0 0 #000 !important;
text-align: left;
letter-spacing: normal;
}
/* Need to reduce the size of the fonts for printing */
h1 { font-size: 28pt !important; }
h2 { font-size: 24pt !important; }
h3 { font-size: 22pt !important; }
h4 { font-size: 22pt !important; font-variant: small-caps; }
h5 { font-size: 21pt !important; }
h6 { font-size: 20pt !important; font-style: italic; }
/* SECTION 5: Make hyperlinks more usable.
Ensure links are underlined, and consider appending
the URL to the end of the link for usability. */
a:link,
a:visited {
color: #000 !important;
font-weight: bold;
text-decoration: underline;
}
/*
.reveal a:link:after,
.reveal a:visited:after {
content: " (" attr(href) ") ";
color: #222 !important;
font-size: 90%;
}
*/
/* SECTION 6: more reveal.js specific additions by @skypanther */
ul, ol, div, p {
visibility: visible;
position: static;
width: auto;
height: auto;
display: block;
overflow: visible;
margin: 0;
text-align: left !important;
}
.reveal pre,
.reveal table {
margin-left: 0;
margin-right: 0;
}
.reveal pre code {
padding: 20px;
border: 1px solid #ddd;
}
.reveal blockquote {
margin: 20px 0;
}
.reveal .slides {
position: static !important;
width: auto !important;
height: auto !important;
left: 0 !important;
top: 0 !important;
margin-left: 0 !important;
margin-top: 0 !important;
padding: 0 !important;
zoom: 1 !important;
overflow: visible !important;
display: block !important;
text-align: left !important;
-webkit-perspective: none;
-moz-perspective: none;
-ms-perspective: none;
perspective: none;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
.reveal .slides section {
visibility: visible !important;
position: static !important;
width: auto !important;
height: auto !important;
display: block !important;
overflow: visible !important;
left: 0 !important;
top: 0 !important;
margin-left: 0 !important;
margin-top: 0 !important;
padding: 60px 20px !important;
z-index: auto !important;
opacity: 1 !important;
page-break-after: always !important;
-webkit-transform-style: flat !important;
-moz-transform-style: flat !important;
-ms-transform-style: flat !important;
transform-style: flat !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
transform: none !important;
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
transition: none !important;
}
.reveal .slides section.stack {
padding: 0 !important;
}
.reveal section:last-of-type {
page-break-after: avoid !important;
}
.reveal section .fragment {
opacity: 1 !important;
visibility: visible !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
transform: none !important;
}
.reveal section img {
display: block;
margin: 15px 0px;
background: rgba(255,255,255,1);
border: 1px solid #666;
box-shadow: none;
}
.reveal section small {
font-size: 0.8em;
}
}
}

View File

@ -1,165 +0,0 @@
/**
* This stylesheet is used to print reveal.js
* presentations to PDF.
*
* https://github.com/hakimel/reveal.js#pdf-export
*/
* {
-webkit-print-color-adjust: exact;
}
body {
margin: 0 auto !important;
border: 0;
padding: 0;
float: none !important;
overflow: visible;
}
html {
width: 100%;
height: 100%;
overflow: visible;
}
/* Remove any elements not needed in print. */
.nestedarrow,
.reveal .controls,
.reveal .progress,
.reveal .playback,
.reveal.overview,
.fork-reveal,
.share-reveal,
.state-background {
display: none !important;
}
h1, h2, h3, h4, h5, h6 {
text-shadow: 0 0 0 #000 !important;
}
.reveal pre code {
overflow: hidden !important;
font-family: Courier, 'Courier New', monospace !important;
}
ul, ol, div, p {
visibility: visible;
position: static;
width: auto;
height: auto;
display: block;
overflow: visible;
margin: auto;
}
.reveal {
width: auto !important;
height: auto !important;
overflow: hidden !important;
}
.reveal .slides {
position: static;
width: 100% !important;
height: auto !important;
zoom: 1 !important;
pointer-events: initial;
left: auto;
top: auto;
margin: 0 !important;
padding: 0 !important;
overflow: visible;
display: block;
perspective: none;
perspective-origin: 50% 50%;
}
.reveal .slides .pdf-page {
position: relative;
overflow: hidden;
z-index: 1;
page-break-after: always;
}
.reveal .slides section {
visibility: visible !important;
display: block !important;
position: absolute !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
min-height: 1px;
opacity: 1 !important;
transform-style: flat !important;
transform: none !important;
}
.reveal section.stack {
position: relative !important;
margin: 0 !important;
padding: 0 !important;
page-break-after: avoid !important;
height: auto !important;
min-height: auto !important;
}
.reveal img {
box-shadow: none;
}
.reveal .roll {
overflow: visible;
line-height: 1em;
}
/* Slide backgrounds are placed inside of their slide when exporting to PDF */
.reveal .slide-background {
display: block !important;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: auto !important;
}
/* Display slide speaker notes when 'showNotes' is enabled */
.reveal.show-notes {
max-width: none;
max-height: none;
}
.reveal .speaker-notes-pdf {
display: block;
width: 100%;
height: auto;
max-height: none;
top: auto;
right: auto;
bottom: auto;
left: auto;
z-index: 100;
}
/* Layout option which makes notes appear on a separate page */
.reveal .speaker-notes-pdf[data-layout="separate-page"] {
position: relative;
color: inherit;
background-color: transparent;
padding: 20px;
page-break-after: always;
border: 0;
}
/* Display slide numbers when 'slideNumber' is enabled */
.reveal .slide-number-pdf {
display: block;
position: absolute;
font-size: 14px;
}

167
css/print/pdf.scss Normal file
View File

@ -0,0 +1,167 @@
/**
* This stylesheet is used to print reveal.js
* presentations to PDF.
*
* https://github.com/hakimel/reveal.js#pdf-export
*/
html.print-pdf {
* {
-webkit-print-color-adjust: exact;
}
& {
width: 100%;
height: 100%;
overflow: visible;
}
body {
margin: 0 auto !important;
border: 0;
padding: 0;
float: none !important;
overflow: visible;
}
/* Remove any elements not needed in print. */
.nestedarrow,
.reveal .controls,
.reveal .progress,
.reveal .playback,
.reveal.overview,
.fork-reveal,
.share-reveal,
.state-background {
display: none !important;
}
h1, h2, h3, h4, h5, h6 {
text-shadow: 0 0 0 #000 !important;
}
.reveal pre code {
overflow: hidden !important;
font-family: Courier, 'Courier New', monospace !important;
}
ul, ol, div, p {
visibility: visible;
position: static;
width: auto;
height: auto;
display: block;
overflow: visible;
margin: auto;
}
.reveal {
width: auto !important;
height: auto !important;
overflow: hidden !important;
}
.reveal .slides {
position: static;
width: 100% !important;
height: auto !important;
zoom: 1 !important;
pointer-events: initial;
left: auto;
top: auto;
margin: 0 !important;
padding: 0 !important;
overflow: visible;
display: block;
perspective: none;
perspective-origin: 50% 50%;
}
.reveal .slides .pdf-page {
position: relative;
overflow: hidden;
z-index: 1;
page-break-after: always;
}
.reveal .slides section {
visibility: visible !important;
display: block !important;
position: absolute !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
min-height: 1px;
opacity: 1 !important;
transform-style: flat !important;
transform: none !important;
}
.reveal section.stack {
position: relative !important;
margin: 0 !important;
padding: 0 !important;
page-break-after: avoid !important;
height: auto !important;
min-height: auto !important;
}
.reveal img {
box-shadow: none;
}
.reveal .roll {
overflow: visible;
line-height: 1em;
}
/* Slide backgrounds are placed inside of their slide when exporting to PDF */
.reveal .slide-background {
display: block !important;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: auto !important;
}
/* Display slide speaker notes when 'showNotes' is enabled */
.reveal.show-notes {
max-width: none;
max-height: none;
}
.reveal .speaker-notes-pdf {
display: block;
width: 100%;
height: auto;
max-height: none;
top: auto;
right: auto;
bottom: auto;
left: auto;
z-index: 100;
}
/* Layout option which makes notes appear on a separate page */
.reveal .speaker-notes-pdf[data-layout="separate-page"] {
position: relative;
color: inherit;
background-color: transparent;
padding: 20px;
page-break-after: always;
border: 0;
}
/* Display slide numbers when 'slideNumber' is enabled */
.reveal .slide-number-pdf {
display: block;
position: absolute;
font-size: 14px;
}
}

View File

@ -18,17 +18,12 @@
<link rel="stylesheet" href="dist/reveal.css"> <link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/black.css" id="theme"> <link rel="stylesheet" href="dist/theme/black.css" id="theme">
<!-- Print on paper or PDF -->
<link rel="stylesheet" href="dist/print/paper.css">
<link rel="stylesheet" href="dist/print/pdf.css">
<!-- Theme used for syntax highlighting of code --> <!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/monokai.css"> <link rel="stylesheet" href="lib/css/monokai.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'dist/print/pdf.css' : 'dist/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head> </head>
<body> <body>

106
dist/print/paper.css vendored
View File

@ -5,16 +5,36 @@
Feel free (nay, compelled) to edit, append, and Feel free (nay, compelled) to edit, append, and
manipulate this file as you see fit. */ manipulate this file as you see fit. */
@media print { @media print {
html:not(.print-pdf) {
/* SECTION 1: Set default width, margin, float, and /* SECTION 1: Set default width, margin, float, and
background. This prevents elements from extending background. This prevents elements from extending
beyond the edge of the printed page, and prevents beyond the edge of the printed page, and prevents
unnecessary background images from printing */ unnecessary background images from printing */
html {
background: #fff; background: #fff;
width: auto; width: auto;
height: auto; height: auto;
overflow: visible; } overflow: visible;
body { /* SECTION 2: Remove any elements not needed in print.
This would include navigation, ads, sidebars, etc. */
/* SECTION 3: Set body font face, size, and color.
Consider using a serif font for readability. */
/* SECTION 4: Set heading font face, sizes, and color.
Differentiate your headings from your body text.
Perhaps use a large sans-serif for distinction. */
/* Need to reduce the size of the fonts for printing */
/* SECTION 5: Make hyperlinks more usable.
Ensure links are underlined, and consider appending
the URL to the end of the link for usability. */
/*
.reveal a:link:after,
.reveal a:visited:after {
content: " (" attr(href) ") ";
color: #222 !important;
font-size: 90%;
}
*/
/* SECTION 6: more reveal.js specific additions by @skypanther */ }
html:not(.print-pdf) body {
background: #fff; background: #fff;
font-size: 20pt; font-size: 20pt;
width: auto; width: auto;
@ -24,27 +44,20 @@
padding: 0; padding: 0;
overflow: visible; overflow: visible;
float: none !important; } float: none !important; }
/* SECTION 2: Remove any elements not needed in print. html:not(.print-pdf) .nestedarrow,
This would include navigation, ads, sidebars, etc. */ html:not(.print-pdf) .controls,
.nestedarrow, html:not(.print-pdf) .fork-reveal,
.controls, html:not(.print-pdf) .share-reveal,
.fork-reveal, html:not(.print-pdf) .state-background,
.share-reveal, html:not(.print-pdf) .reveal .progress,
.state-background, html:not(.print-pdf) .reveal .backgrounds,
.reveal .progress, html:not(.print-pdf) .reveal .slide-number {
.reveal .backgrounds,
.reveal .slide-number {
display: none !important; } display: none !important; }
/* SECTION 3: Set body font face, size, and color. html:not(.print-pdf) body, html:not(.print-pdf) p, html:not(.print-pdf) td, html:not(.print-pdf) li, html:not(.print-pdf) div {
Consider using a serif font for readability. */
body, p, td, li, div {
font-size: 20pt !important; font-size: 20pt !important;
font-family: Georgia, "Times New Roman", Times, serif !important; font-family: Georgia, "Times New Roman", Times, serif !important;
color: #000; } color: #000; }
/* SECTION 4: Set heading font face, sizes, and color. html:not(.print-pdf) h1, html:not(.print-pdf) h2, html:not(.print-pdf) h3, html:not(.print-pdf) h4, html:not(.print-pdf) h5, html:not(.print-pdf) h6 {
Differentiate your headings from your body text.
Perhaps use a large sans-serif for distinction. */
h1, h2, h3, h4, h5, h6 {
color: #000 !important; color: #000 !important;
height: auto; height: auto;
line-height: normal; line-height: normal;
@ -52,39 +65,26 @@
text-shadow: 0 0 0 #000 !important; text-shadow: 0 0 0 #000 !important;
text-align: left; text-align: left;
letter-spacing: normal; } letter-spacing: normal; }
/* Need to reduce the size of the fonts for printing */ html:not(.print-pdf) h1 {
h1 {
font-size: 28pt !important; } font-size: 28pt !important; }
h2 { html:not(.print-pdf) h2 {
font-size: 24pt !important; } font-size: 24pt !important; }
h3 { html:not(.print-pdf) h3 {
font-size: 22pt !important; } font-size: 22pt !important; }
h4 { html:not(.print-pdf) h4 {
font-size: 22pt !important; font-size: 22pt !important;
font-variant: small-caps; } font-variant: small-caps; }
h5 { html:not(.print-pdf) h5 {
font-size: 21pt !important; } font-size: 21pt !important; }
h6 { html:not(.print-pdf) h6 {
font-size: 20pt !important; font-size: 20pt !important;
font-style: italic; } font-style: italic; }
/* SECTION 5: Make hyperlinks more usable. html:not(.print-pdf) a:link,
Ensure links are underlined, and consider appending html:not(.print-pdf) a:visited {
the URL to the end of the link for usability. */
a:link,
a:visited {
color: #000 !important; color: #000 !important;
font-weight: bold; font-weight: bold;
text-decoration: underline; } text-decoration: underline; }
/* html:not(.print-pdf) ul, html:not(.print-pdf) ol, html:not(.print-pdf) div, html:not(.print-pdf) p {
.reveal a:link:after,
.reveal a:visited:after {
content: " (" attr(href) ") ";
color: #222 !important;
font-size: 90%;
}
*/
/* SECTION 6: more reveal.js specific additions by @skypanther */
ul, ol, div, p {
visibility: visible; visibility: visible;
position: static; position: static;
width: auto; width: auto;
@ -93,16 +93,16 @@
overflow: visible; overflow: visible;
margin: 0; margin: 0;
text-align: left !important; } text-align: left !important; }
.reveal pre, html:not(.print-pdf) .reveal pre,
.reveal table { html:not(.print-pdf) .reveal table {
margin-left: 0; margin-left: 0;
margin-right: 0; } margin-right: 0; }
.reveal pre code { html:not(.print-pdf) .reveal pre code {
padding: 20px; padding: 20px;
border: 1px solid #ddd; } border: 1px solid #ddd; }
.reveal blockquote { html:not(.print-pdf) .reveal blockquote {
margin: 20px 0; } margin: 20px 0; }
.reveal .slides { html:not(.print-pdf) .reveal .slides {
position: static !important; position: static !important;
width: auto !important; width: auto !important;
height: auto !important; height: auto !important;
@ -123,7 +123,7 @@
-moz-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%;
perspective-origin: 50% 50%; } perspective-origin: 50% 50%; }
.reveal .slides section { html:not(.print-pdf) .reveal .slides section {
visibility: visible !important; visibility: visible !important;
position: static !important; position: static !important;
width: auto !important; width: auto !important;
@ -150,22 +150,22 @@
-moz-transition: none !important; -moz-transition: none !important;
-ms-transition: none !important; -ms-transition: none !important;
transition: none !important; } transition: none !important; }
.reveal .slides section.stack { html:not(.print-pdf) .reveal .slides section.stack {
padding: 0 !important; } padding: 0 !important; }
.reveal section:last-of-type { html:not(.print-pdf) .reveal section:last-of-type {
page-break-after: avoid !important; } page-break-after: avoid !important; }
.reveal section .fragment { html:not(.print-pdf) .reveal section .fragment {
opacity: 1 !important; opacity: 1 !important;
visibility: visible !important; visibility: visible !important;
-webkit-transform: none !important; -webkit-transform: none !important;
-moz-transform: none !important; -moz-transform: none !important;
-ms-transform: none !important; -ms-transform: none !important;
transform: none !important; } transform: none !important; }
.reveal section img { html:not(.print-pdf) .reveal section img {
display: block; display: block;
margin: 15px 0px; margin: 15px 0px;
background: white; background: white;
border: 1px solid #666; border: 1px solid #666;
box-shadow: none; } box-shadow: none; }
.reveal section small { html:not(.print-pdf) .reveal section small {
font-size: 0.8em; } } font-size: 0.8em; } }

88
dist/print/pdf.css vendored
View File

@ -4,40 +4,39 @@
* *
* https://github.com/hakimel/reveal.js#pdf-export * https://github.com/hakimel/reveal.js#pdf-export
*/ */
* { html.print-pdf {
/* Remove any elements not needed in print. */
/* Slide backgrounds are placed inside of their slide when exporting to PDF */
/* Display slide speaker notes when 'showNotes' is enabled */
/* Layout option which makes notes appear on a separate page */
/* Display slide numbers when 'slideNumber' is enabled */ }
html.print-pdf * {
-webkit-print-color-adjust: exact; } -webkit-print-color-adjust: exact; }
html.print-pdf {
body { width: 100%;
height: 100%;
overflow: visible; }
html.print-pdf body {
margin: 0 auto !important; margin: 0 auto !important;
border: 0; border: 0;
padding: 0; padding: 0;
float: none !important; float: none !important;
overflow: visible; } overflow: visible; }
html.print-pdf .nestedarrow,
html { html.print-pdf .reveal .controls,
width: 100%; html.print-pdf .reveal .progress,
height: 100%; html.print-pdf .reveal .playback,
overflow: visible; } html.print-pdf .reveal.overview,
html.print-pdf .fork-reveal,
/* Remove any elements not needed in print. */ html.print-pdf .share-reveal,
.nestedarrow, html.print-pdf .state-background {
.reveal .controls,
.reveal .progress,
.reveal .playback,
.reveal.overview,
.fork-reveal,
.share-reveal,
.state-background {
display: none !important; } display: none !important; }
html.print-pdf h1, html.print-pdf h2, html.print-pdf h3, html.print-pdf h4, html.print-pdf h5, html.print-pdf h6 {
h1, h2, h3, h4, h5, h6 {
text-shadow: 0 0 0 #000 !important; } text-shadow: 0 0 0 #000 !important; }
html.print-pdf .reveal pre code {
.reveal pre code {
overflow: hidden !important; overflow: hidden !important;
font-family: Courier, 'Courier New', monospace !important; } font-family: Courier, 'Courier New', monospace !important; }
html.print-pdf ul, html.print-pdf ol, html.print-pdf div, html.print-pdf p {
ul, ol, div, p {
visibility: visible; visibility: visible;
position: static; position: static;
width: auto; width: auto;
@ -45,17 +44,16 @@ ul, ol, div, p {
display: block; display: block;
overflow: visible; overflow: visible;
margin: auto; } margin: auto; }
html.print-pdf .reveal {
.reveal {
width: auto !important; width: auto !important;
height: auto !important; height: auto !important;
overflow: hidden !important; } overflow: hidden !important; }
html.print-pdf .reveal .slides {
.reveal .slides {
position: static; position: static;
width: 100% !important; width: 100% !important;
height: auto !important; height: auto !important;
zoom: 1 !important; zoom: 1 !important;
pointer-events: initial;
left: auto; left: auto;
top: auto; top: auto;
margin: 0 !important; margin: 0 !important;
@ -64,14 +62,12 @@ ul, ol, div, p {
display: block; display: block;
perspective: none; perspective: none;
perspective-origin: 50% 50%; } perspective-origin: 50% 50%; }
html.print-pdf .reveal .slides .pdf-page {
.reveal .slides .pdf-page {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
z-index: 1; z-index: 1;
page-break-after: always; } page-break-after: always; }
html.print-pdf .reveal .slides section {
.reveal .slides section {
visibility: visible !important; visibility: visible !important;
display: block !important; display: block !important;
position: absolute !important; position: absolute !important;
@ -82,24 +78,19 @@ ul, ol, div, p {
opacity: 1 !important; opacity: 1 !important;
transform-style: flat !important; transform-style: flat !important;
transform: none !important; } transform: none !important; }
html.print-pdf .reveal section.stack {
.reveal section.stack {
position: relative !important; position: relative !important;
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
page-break-after: avoid !important; page-break-after: avoid !important;
height: auto !important; height: auto !important;
min-height: auto !important; } min-height: auto !important; }
html.print-pdf .reveal img {
.reveal img {
box-shadow: none; } box-shadow: none; }
html.print-pdf .reveal .roll {
.reveal .roll {
overflow: visible; overflow: visible;
line-height: 1em; } line-height: 1em; }
html.print-pdf .reveal .slide-background {
/* Slide backgrounds are placed inside of their slide when exporting to PDF */
.reveal .slide-background {
display: block !important; display: block !important;
position: absolute; position: absolute;
top: 0; top: 0;
@ -107,13 +98,10 @@ ul, ol, div, p {
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: auto !important; } z-index: auto !important; }
html.print-pdf .reveal.show-notes {
/* Display slide speaker notes when 'showNotes' is enabled */
.reveal.show-notes {
max-width: none; max-width: none;
max-height: none; } max-height: none; }
html.print-pdf .reveal .speaker-notes-pdf {
.reveal .speaker-notes-pdf {
display: block; display: block;
width: 100%; width: 100%;
height: auto; height: auto;
@ -123,18 +111,14 @@ ul, ol, div, p {
bottom: auto; bottom: auto;
left: auto; left: auto;
z-index: 100; } z-index: 100; }
html.print-pdf .reveal .speaker-notes-pdf[data-layout="separate-page"] {
/* Layout option which makes notes appear on a separate page */
.reveal .speaker-notes-pdf[data-layout="separate-page"] {
position: relative; position: relative;
color: inherit; color: inherit;
background-color: transparent; background-color: transparent;
padding: 20px; padding: 20px;
page-break-after: always; page-break-after: always;
border: 0; } border: 0; }
html.print-pdf .reveal .slide-number-pdf {
/* Display slide numbers when 'slideNumber' is enabled */
.reveal .slide-number-pdf {
display: block; display: block;
position: absolute; position: absolute;
font-size: 14px; } font-size: 14px; }

2
dist/reveal.css vendored
View File

@ -1,5 +1,5 @@
/*! /*!
* reveal.js 4.0.0-dev (Tue Mar 10 2020) * reveal.js 4.0.0-dev (Wed Mar 11 2020)
* https://revealjs.com * https://revealjs.com
* MIT licensed * MIT licensed
* *

2
dist/reveal.min.js vendored

File diff suppressed because one or more lines are too long

View File

@ -10,17 +10,12 @@
<link rel="stylesheet" href="dist/reveal.css"> <link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/black.css"> <link rel="stylesheet" href="dist/theme/black.css">
<!-- Print on paper or PDF -->
<link rel="stylesheet" href="dist/print/paper.css">
<link rel="stylesheet" href="dist/print/pdf.css">
<!-- Theme used for syntax highlighting of code --> <!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/monokai.css"> <link rel="stylesheet" href="lib/css/monokai.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'dist/print/pdf.css' : 'dist/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head> </head>
<body> <body>
<div class="reveal"> <div class="reveal">

View File

@ -368,7 +368,7 @@ export default function( revealElement, options ) {
// Limit the size of certain elements to the dimensions of the slide // Limit the size of certain elements to the dimensions of the slide
createStyleSheet( '.reveal section>img, .reveal section>video, .reveal section>iframe{max-width: '+ slideWidth +'px; max-height:'+ slideHeight +'px}' ); createStyleSheet( '.reveal section>img, .reveal section>video, .reveal section>iframe{max-width: '+ slideWidth +'px; max-height:'+ slideHeight +'px}' );
document.body.classList.add( 'print-pdf' ); document.querySelector('html').classList.add( 'print-pdf' );
document.body.style.width = pageWidth + 'px'; document.body.style.width = pageWidth + 'px';
document.body.style.height = pageHeight + 'px'; document.body.style.height = pageHeight + 'px';

View File

@ -7,7 +7,8 @@
<title>reveal.js - Test PDF exports</title> <title>reveal.js - Test PDF exports</title>
<link rel="stylesheet" href="../dist/reveal.css"> <link rel="stylesheet" href="../dist/reveal.css">
<link rel="stylesheet" href="../css/print/pdf.css"> <link rel="stylesheet" href="../dist/print/paper.css">
<link rel="stylesheet" href="../dist/print/pdf.css">
<link rel="stylesheet" href="qunit-2.5.0.css"> <link rel="stylesheet" href="qunit-2.5.0.css">
<script src="qunit-2.5.0.js"></script> <script src="qunit-2.5.0.js"></script>
</head> </head>