added introduction chapter
This commit is contained in:
mhjensen
@@ -38,7 +38,8 @@
|
||||
.share-reveal,
|
||||
.state-background,
|
||||
.reveal .progress,
|
||||
.reveal .backgrounds {
|
||||
.reveal .backgrounds,
|
||||
.reveal .slide-number {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@@ -141,7 +142,7 @@
|
||||
.reveal .slides section {
|
||||
visibility: visible !important;
|
||||
position: static !important;
|
||||
width: 100% !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
display: block !important;
|
||||
overflow: visible !important;
|
||||
@@ -199,4 +200,4 @@
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,15 +1,9 @@
|
||||
/* 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. */
|
||||
|
||||
|
||||
/* 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 */
|
||||
/**
|
||||
* This stylesheet is used to print reveal.js
|
||||
* presentations to PDF.
|
||||
*
|
||||
* https://github.com/hakimel/reveal.js#pdf-export
|
||||
*/
|
||||
|
||||
* {
|
||||
-webkit-print-color-adjust: exact;
|
||||
@@ -29,12 +23,10 @@ html {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* SECTION 2: Remove any elements not needed in print.
|
||||
This would include navigation, ads, sidebars, etc. */
|
||||
/* Remove any elements not needed in print. */
|
||||
.nestedarrow,
|
||||
.reveal .controls,
|
||||
.reveal .progress,
|
||||
.reveal .slide-number,
|
||||
.reveal .playback,
|
||||
.reveal.overview,
|
||||
.fork-reveal,
|
||||
@@ -43,16 +35,7 @@ html {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* SECTION 3: Set body font face, size, and color.
|
||||
Consider using a serif font for readability. */
|
||||
body, p, td, li, div {
|
||||
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
text-shadow: 0 0 0 #000 !important;
|
||||
}
|
||||
|
||||
@@ -61,8 +44,6 @@ h1,h2,h3,h4,h5,h6 {
|
||||
font-family: Courier, 'Courier New', monospace !important;
|
||||
}
|
||||
|
||||
|
||||
/* SECTION 5: more reveal.js specific additions by @skypanther */
|
||||
ul, ol, div, p {
|
||||
visibility: visible;
|
||||
position: static;
|
||||
@@ -79,8 +60,9 @@ ul, ol, div, p {
|
||||
}
|
||||
.reveal .slides {
|
||||
position: static;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
zoom: 1 !important;
|
||||
|
||||
left: auto;
|
||||
top: auto;
|
||||
@@ -100,13 +82,19 @@ ul, ol, div, p {
|
||||
-ms-perspective-origin: 50% 50%;
|
||||
perspective-origin: 50% 50%;
|
||||
}
|
||||
.reveal .slides section {
|
||||
page-break-after: always !important;
|
||||
|
||||
.reveal .slides .pdf-page {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
|
||||
page-break-after: always;
|
||||
}
|
||||
|
||||
.reveal .slides section {
|
||||
visibility: visible !important;
|
||||
position: relative !important;
|
||||
display: block !important;
|
||||
position: relative !important;
|
||||
position: absolute !important;
|
||||
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
@@ -125,33 +113,66 @@ ul, ol, div, p {
|
||||
-ms-transform: none !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 section .slide-background {
|
||||
.reveal .slide-background {
|
||||
display: block !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
/* All elements should be above the slide-background */
|
||||
.reveal section>* {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
/*!
|
||||
* reveal.js
|
||||
* http://lab.hakim.se/reveal-js
|
||||
* http://revealjs.com
|
||||
* MIT licensed
|
||||
*
|
||||
* Copyright (C) 2015 Hakim El Hattab, http://hakim.se
|
||||
* Copyright (C) 2017 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
|
||||
@@ -23,7 +23,7 @@ html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal i
|
||||
.reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed,
|
||||
.reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup,
|
||||
.reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary,
|
||||
.reveal time, .reveal mark, .reveal audio, video {
|
||||
.reveal time, .reveal mark, .reveal audio, .reveal video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
@@ -69,13 +69,13 @@ body {
|
||||
|
||||
&.visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
visibility: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.reveal .slides section .fragment.grow {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
visibility: inherit;
|
||||
|
||||
&.visible {
|
||||
transform: scale( 1.3 );
|
||||
@@ -84,7 +84,7 @@ body {
|
||||
|
||||
.reveal .slides section .fragment.shrink {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
visibility: inherit;
|
||||
|
||||
&.visible {
|
||||
transform: scale( 0.7 );
|
||||
@@ -101,7 +101,7 @@ body {
|
||||
|
||||
.reveal .slides section .fragment.fade-out {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
visibility: inherit;
|
||||
|
||||
&.visible {
|
||||
opacity: 0;
|
||||
@@ -111,29 +111,62 @@ body {
|
||||
|
||||
.reveal .slides section .fragment.semi-fade-out {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
visibility: inherit;
|
||||
|
||||
&.visible {
|
||||
opacity: 0.5;
|
||||
visibility: visible;
|
||||
visibility: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.reveal .slides section .fragment.strike {
|
||||
opacity: 1;
|
||||
visibility: inherit;
|
||||
|
||||
&.visible {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
.reveal .slides section .fragment.fade-up {
|
||||
transform: translate(0, 20%);
|
||||
|
||||
&.visible {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.reveal .slides section .fragment.fade-down {
|
||||
transform: translate(0, -20%);
|
||||
|
||||
&.visible {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.reveal .slides section .fragment.fade-right {
|
||||
transform: translate(-20%, 0);
|
||||
|
||||
&.visible {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.reveal .slides section .fragment.fade-left {
|
||||
transform: translate(20%, 0);
|
||||
|
||||
&.visible {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.reveal .slides section .fragment.current-visible {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
|
||||
&.current-fragment {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
visibility: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -144,7 +177,7 @@ body {
|
||||
.reveal .slides section .fragment.highlight-blue,
|
||||
.reveal .slides section .fragment.highlight-current-blue {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
visibility: inherit;
|
||||
}
|
||||
.reveal .slides section .fragment.highlight-red.visible {
|
||||
color: #ff2c2d
|
||||
@@ -202,88 +235,279 @@ body {
|
||||
* CONTROLS
|
||||
*********************************************/
|
||||
|
||||
@keyframes bounce-right {
|
||||
0%, 10%, 25%, 40%, 50% {transform: translateX(0);}
|
||||
20% {transform: translateX(10px);}
|
||||
30% {transform: translateX(-5px);}
|
||||
}
|
||||
|
||||
@keyframes bounce-down {
|
||||
0%, 10%, 25%, 40%, 50% {transform: translateY(0);}
|
||||
20% {transform: translateY(10px);}
|
||||
30% {transform: translateY(-5px);}
|
||||
}
|
||||
|
||||
$controlArrowSize: 3.6em;
|
||||
$controlArrowSpacing: 1.4em;
|
||||
$controlArrowLength: 2.6em;
|
||||
$controlArrowThickness: 0.5em;
|
||||
$controlsArrowAngle: 45deg;
|
||||
$controlsArrowAngleHover: 40deg;
|
||||
$controlsArrowAngleActive: 36deg;
|
||||
|
||||
@mixin controlsArrowTransform( $angle ) {
|
||||
&:before {
|
||||
transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( $angle );
|
||||
}
|
||||
|
||||
&:after {
|
||||
transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( -$angle );
|
||||
}
|
||||
}
|
||||
|
||||
.reveal .controls {
|
||||
$spacing: 12px;
|
||||
|
||||
display: none;
|
||||
position: fixed;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
z-index: 30;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.reveal .controls div {
|
||||
position: absolute;
|
||||
opacity: 0.05;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 12px solid transparent;
|
||||
transform: scale(.9999);
|
||||
transition: all 0.2s ease;
|
||||
top: auto;
|
||||
bottom: $spacing;
|
||||
right: $spacing;
|
||||
left: auto;
|
||||
z-index: 1;
|
||||
color: #000;
|
||||
pointer-events: none;
|
||||
font-size: 10px;
|
||||
|
||||
-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
|
||||
button {
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
color: currentColor;
|
||||
transform: scale(.9999);
|
||||
transition: color 0.2s ease,
|
||||
opacity 0.2s ease,
|
||||
transform 0.2s ease;
|
||||
z-index: 2; // above slides
|
||||
pointer-events: auto;
|
||||
font-size: inherit;
|
||||
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
|
||||
-webkit-appearance: none;
|
||||
-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
|
||||
}
|
||||
|
||||
.controls-arrow:before,
|
||||
.controls-arrow:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: $controlArrowLength;
|
||||
height: $controlArrowThickness;
|
||||
border-radius: $controlArrowThickness/2;
|
||||
background-color: currentColor;
|
||||
|
||||
transition: all 0.15s ease, background-color 0.8s ease;
|
||||
transform-origin: floor(($controlArrowThickness/2)*10)/10 50%;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.controls-arrow {
|
||||
position: relative;
|
||||
width: $controlArrowSize;
|
||||
height: $controlArrowSize;
|
||||
|
||||
@include controlsArrowTransform( $controlsArrowAngle );
|
||||
|
||||
&:hover {
|
||||
@include controlsArrowTransform( $controlsArrowAngleHover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include controlsArrowTransform( $controlsArrowAngleActive );
|
||||
}
|
||||
}
|
||||
|
||||
.navigate-left {
|
||||
right: $controlArrowSize + $controlArrowSpacing*2;
|
||||
bottom: $controlArrowSpacing + $controlArrowSize/2;
|
||||
transform: translateX( -10px );
|
||||
}
|
||||
|
||||
.navigate-right {
|
||||
right: 0;
|
||||
bottom: $controlArrowSpacing + $controlArrowSize/2;
|
||||
transform: translateX( 10px );
|
||||
|
||||
.controls-arrow {
|
||||
transform: rotate( 180deg );
|
||||
}
|
||||
|
||||
&.highlight {
|
||||
animation: bounce-right 2s 50 both ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
.navigate-up {
|
||||
right: $controlArrowSpacing + $controlArrowSize/2;
|
||||
bottom: $controlArrowSpacing*2 + $controlArrowSize;
|
||||
transform: translateY( -10px );
|
||||
|
||||
.controls-arrow {
|
||||
transform: rotate( 90deg );
|
||||
}
|
||||
}
|
||||
|
||||
.navigate-down {
|
||||
right: $controlArrowSpacing + $controlArrowSize/2;
|
||||
bottom: 0;
|
||||
transform: translateY( 10px );
|
||||
|
||||
.controls-arrow {
|
||||
transform: rotate( -90deg );
|
||||
}
|
||||
|
||||
&.highlight {
|
||||
animation: bounce-down 2s 50 both ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
// Back arrow style: "faded":
|
||||
// Deemphasize backwards navigation arrows in favor of drawing
|
||||
// attention to forwards navigation
|
||||
&[data-controls-back-arrows="faded"] .navigate-left.enabled,
|
||||
&[data-controls-back-arrows="faded"] .navigate-up.enabled {
|
||||
opacity: 0.3;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Back arrow style: "hidden":
|
||||
// Never show arrows for backwards navigation
|
||||
&[data-controls-back-arrows="hidden"] .navigate-left.enabled,
|
||||
&[data-controls-back-arrows="hidden"] .navigate-up.enabled {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// Any control button that can be clicked is "enabled"
|
||||
.enabled {
|
||||
visibility: visible;
|
||||
opacity: 0.9;
|
||||
cursor: pointer;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
// Any control button that leads to showing or hiding
|
||||
// a fragment
|
||||
.enabled.fragmented {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.enabled:hover,
|
||||
.enabled.fragmented:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.reveal .controls div.enabled {
|
||||
opacity: 0.7;
|
||||
cursor: pointer;
|
||||
// Adjust the layout when there are no vertical slides
|
||||
.reveal:not(.has-vertical-slides) .controls .navigate-left {
|
||||
bottom: $controlArrowSpacing;
|
||||
right: 0.5em + $controlArrowSpacing + $controlArrowSize;
|
||||
}
|
||||
|
||||
.reveal .controls div.enabled:active {
|
||||
margin-top: 1px;
|
||||
.reveal:not(.has-vertical-slides) .controls .navigate-right {
|
||||
bottom: $controlArrowSpacing;
|
||||
right: 0.5em;
|
||||
}
|
||||
|
||||
.reveal .controls div.navigate-left {
|
||||
top: 42px;
|
||||
// Adjust the layout when there are no horizontal slides
|
||||
.reveal:not(.has-horizontal-slides) .controls .navigate-up {
|
||||
right: $controlArrowSpacing;
|
||||
bottom: $controlArrowSpacing + $controlArrowSize;
|
||||
}
|
||||
.reveal:not(.has-horizontal-slides) .controls .navigate-down {
|
||||
right: $controlArrowSpacing;
|
||||
bottom: 0.5em;
|
||||
}
|
||||
|
||||
border-right-width: 22px;
|
||||
border-right-color: #000;
|
||||
}
|
||||
.reveal .controls div.navigate-left.fragmented {
|
||||
opacity: 0.3;
|
||||
// Invert arrows based on background color
|
||||
.reveal.has-dark-background .controls {
|
||||
color: #fff;
|
||||
}
|
||||
.reveal.has-light-background .controls {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
// Disable active states on touch devices
|
||||
.reveal.no-hover .controls .controls-arrow:hover,
|
||||
.reveal.no-hover .controls .controls-arrow:active {
|
||||
@include controlsArrowTransform( $controlsArrowAngle );
|
||||
}
|
||||
|
||||
// Edge aligned controls layout
|
||||
@media screen and (min-width: 500px) {
|
||||
|
||||
$spacing: 8px;
|
||||
|
||||
.reveal .controls[data-controls-layout="edges"] {
|
||||
& {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.reveal .controls div.navigate-right {
|
||||
left: 74px;
|
||||
top: 42px;
|
||||
|
||||
border-left-width: 22px;
|
||||
border-left-color: #000;
|
||||
}
|
||||
.reveal .controls div.navigate-right.fragmented {
|
||||
opacity: 0.3;
|
||||
.navigate-left,
|
||||
.navigate-right,
|
||||
.navigate-up,
|
||||
.navigate-down {
|
||||
bottom: auto;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.reveal .controls div.navigate-up {
|
||||
left: 42px;
|
||||
|
||||
border-bottom-width: 22px;
|
||||
border-bottom-color: #000;
|
||||
}
|
||||
.reveal .controls div.navigate-up.fragmented {
|
||||
opacity: 0.3;
|
||||
.navigate-left {
|
||||
top: 50%;
|
||||
left: $spacing;
|
||||
margin-top: -$controlArrowSize/2;
|
||||
}
|
||||
|
||||
.reveal .controls div.navigate-down {
|
||||
left: 42px;
|
||||
top: 74px;
|
||||
|
||||
border-top-width: 22px;
|
||||
border-top-color: #000;
|
||||
}
|
||||
.reveal .controls div.navigate-down.fragmented {
|
||||
opacity: 0.3;
|
||||
.navigate-right {
|
||||
top: 50%;
|
||||
right: $spacing;
|
||||
margin-top: -$controlArrowSize/2;
|
||||
}
|
||||
|
||||
.navigate-up {
|
||||
top: $spacing;
|
||||
left: 50%;
|
||||
margin-left: -$controlArrowSize/2;
|
||||
}
|
||||
|
||||
.navigate-down {
|
||||
bottom: $spacing;
|
||||
left: 50%;
|
||||
margin-left: -$controlArrowSize/2;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
|
||||
.reveal .progress {
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
display: none;
|
||||
height: 3px;
|
||||
width: 100%;
|
||||
@@ -292,21 +516,22 @@ body {
|
||||
z-index: 10;
|
||||
|
||||
background-color: rgba( 0, 0, 0, 0.2 );
|
||||
color: #fff;
|
||||
}
|
||||
.reveal .progress:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
top: -20px;
|
||||
top: -10px;
|
||||
}
|
||||
.reveal .progress span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 0px;
|
||||
|
||||
background-color: #000;
|
||||
background-color: currentColor;
|
||||
transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
}
|
||||
|
||||
@@ -317,11 +542,19 @@ body {
|
||||
.reveal .slide-number {
|
||||
position: fixed;
|
||||
display: block;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
opacity: 0.5;
|
||||
right: 8px;
|
||||
bottom: 8px;
|
||||
z-index: 31;
|
||||
font-family: Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
background-color: rgba( 0, 0, 0, 0.4 );
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.reveal .slide-number-delimiter {
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
@@ -336,6 +569,16 @@ body {
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
// Mobile Safari sometimes overlays a header at the top
|
||||
// of the page when in landscape mode. Using fixed
|
||||
// positioning ensures that reveal.js reduces its height
|
||||
// when this header is visible.
|
||||
@media only screen and (orientation : landscape) {
|
||||
.reveal.ua-iphone {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
|
||||
.reveal .slides {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
@@ -345,6 +588,7 @@ body {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
pointer-events: none;
|
||||
|
||||
overflow: visible;
|
||||
z-index: 1;
|
||||
@@ -363,9 +607,10 @@ body {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding: 20px 0px;
|
||||
pointer-events: auto;
|
||||
|
||||
z-index: 10;
|
||||
transform-style: preserve-3d;
|
||||
transform-style: flat;
|
||||
transition: transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
|
||||
transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
|
||||
visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
|
||||
@@ -400,6 +645,13 @@ body {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.reveal .slides>section:empty,
|
||||
.reveal .slides>section>section:empty,
|
||||
.reveal .slides>section[data-background-interactive],
|
||||
.reveal .slides>section>section[data-background-interactive] {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.reveal.center,
|
||||
.reveal.center .slides,
|
||||
.reveal.center .slides section {
|
||||
@@ -432,8 +684,14 @@ body {
|
||||
*********************************************/
|
||||
|
||||
@mixin transition-global($style) {
|
||||
.reveal .slides>section[data-transition=#{$style}],
|
||||
.reveal.#{$style} .slides>section:not([data-transition]) {
|
||||
.reveal .slides section[data-transition=#{$style}],
|
||||
.reveal.#{$style} .slides section:not([data-transition]) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin transition-stack($style) {
|
||||
.reveal .slides section[data-transition=#{$style}].stack,
|
||||
.reveal.#{$style} .slides section.stack {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@@ -496,6 +754,10 @@ body {
|
||||
*********************************************/
|
||||
|
||||
@each $stylename in default, convex {
|
||||
@include transition-stack(#{$stylename}) {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
@include transition-horizontal-past(#{$stylename}) {
|
||||
transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
|
||||
}
|
||||
@@ -514,6 +776,10 @@ body {
|
||||
* CONCAVE TRANSITION
|
||||
*********************************************/
|
||||
|
||||
@include transition-stack(concave) {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
@include transition-horizontal-past(concave) {
|
||||
transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
|
||||
}
|
||||
@@ -553,6 +819,10 @@ body {
|
||||
|
||||
/*********************************************
|
||||
* CUBE TRANSITION
|
||||
*
|
||||
* WARNING:
|
||||
* this is deprecated and will be removed in a
|
||||
* future version.
|
||||
*********************************************/
|
||||
|
||||
.reveal.cube .slides {
|
||||
@@ -564,6 +834,7 @@ body {
|
||||
min-height: 700px;
|
||||
backface-visibility: hidden;
|
||||
box-sizing: border-box;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.reveal.center.cube .slides section {
|
||||
min-height: 0;
|
||||
@@ -624,6 +895,10 @@ body {
|
||||
|
||||
/*********************************************
|
||||
* PAGE TRANSITION
|
||||
*
|
||||
* WARNING:
|
||||
* this is deprecated and will be removed in a
|
||||
* future version.
|
||||
*********************************************/
|
||||
|
||||
.reveal.page .slides {
|
||||
@@ -635,6 +910,7 @@ body {
|
||||
padding: 30px;
|
||||
min-height: 700px;
|
||||
box-sizing: border-box;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.reveal.page .slides section.past {
|
||||
z-index: 12;
|
||||
@@ -807,6 +1083,7 @@ body {
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
overflow: hidden;
|
||||
|
||||
background-color: rgba( 0, 0, 0, 0 );
|
||||
background-position: 50% 50%;
|
||||
@@ -823,6 +1100,7 @@ body {
|
||||
.reveal .slide-background.present {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.print-pdf .reveal .slide-background {
|
||||
@@ -839,7 +1117,11 @@ body {
|
||||
max-height: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
object-fit: cover;
|
||||
}
|
||||
.reveal .slide-background[data-background-size="contain"] video {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* Immediate transition style */
|
||||
.reveal[data-background-transition=none]>.backgrounds .slide-background,
|
||||
@@ -969,8 +1251,15 @@ body {
|
||||
perspective-origin: 50% 50%;
|
||||
perspective: 700px;
|
||||
|
||||
.slides {
|
||||
// Fixes overview rendering errors in FF48+, not applied to
|
||||
// other browsers since it degrades performance
|
||||
-moz-transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.slides section {
|
||||
height: 700px;
|
||||
height: 100%;
|
||||
top: 0 !important;
|
||||
opacity: 1 !important;
|
||||
overflow: hidden;
|
||||
visibility: visible !important;
|
||||
@@ -1000,6 +1289,10 @@ body {
|
||||
|
||||
.backgrounds {
|
||||
perspective: inherit;
|
||||
|
||||
// Fixes overview rendering errors in FF48+, not applied to
|
||||
// other browsers since it degrades performance
|
||||
-moz-transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.backgrounds .slide-background {
|
||||
@@ -1010,6 +1303,10 @@ body {
|
||||
outline: 10px solid rgba(150,150,150,0.1);
|
||||
outline-offset: 10px;
|
||||
}
|
||||
|
||||
.backgrounds .slide-background.stack {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
// Disable transitions transitions while we're activating
|
||||
@@ -1024,10 +1321,6 @@ body {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.reveal.overview-animated .slides {
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* RTL SUPPORT
|
||||
@@ -1125,6 +1418,7 @@ body {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 36px;
|
||||
padding: 0 10px;
|
||||
float: right;
|
||||
opacity: 0.6;
|
||||
@@ -1152,6 +1446,7 @@ body {
|
||||
|
||||
.reveal .overlay .viewport {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
top: 40px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
@@ -1175,6 +1470,23 @@ body {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.reveal .overlay.overlay-preview.loaded .viewport-inner {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
top: 45%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
.reveal .overlay.overlay-preview .x-frame-error {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease 0.3s;
|
||||
}
|
||||
.reveal .overlay.overlay-preview.loaded .x-frame-error {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.reveal .overlay.overlay-preview.loaded .spinner {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
@@ -1188,8 +1500,8 @@ body {
|
||||
|
||||
.reveal .overlay.overlay-help .viewport .viewport-inner {
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 60px;
|
||||
margin: auto;
|
||||
padding: 20px 20px 80px 20px;
|
||||
text-align: center;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
@@ -1201,13 +1513,13 @@ body {
|
||||
.reveal .overlay.overlay-help .viewport .viewport-inner table {
|
||||
border: 1px solid #fff;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.reveal .overlay.overlay-help .viewport .viewport-inner table th,
|
||||
.reveal .overlay.overlay-help .viewport .viewport-inner table td {
|
||||
width: 200px;
|
||||
padding: 10px;
|
||||
padding: 14px;
|
||||
border: 1px solid #fff;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -1224,12 +1536,13 @@ body {
|
||||
*********************************************/
|
||||
|
||||
.reveal .playback {
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
bottom: 15px;
|
||||
bottom: 20px;
|
||||
z-index: 30;
|
||||
cursor: pointer;
|
||||
transition: all 400ms ease;
|
||||
-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
|
||||
}
|
||||
|
||||
.reveal.overview .playback {
|
||||
@@ -1288,10 +1601,97 @@ body {
|
||||
* SPEAKER NOTES
|
||||
*********************************************/
|
||||
|
||||
// Hide on-page notes
|
||||
.reveal aside.notes {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// An interface element that can optionally be used to show the
|
||||
// speaker notes to all viewers, on top of the presentation
|
||||
.reveal .speaker-notes {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 25vw;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
padding: 14px 18px 14px 18px;
|
||||
z-index: 1;
|
||||
font-size: 18px;
|
||||
line-height: 1.4;
|
||||
border: 1px solid rgba( 0, 0, 0, 0.05 );
|
||||
color: #222;
|
||||
background-color: #f5f5f5;
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
font-family: Helvetica, sans-serif;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
.notes-placeholder {
|
||||
color: #ccc;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: 'Speaker notes';
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.reveal.show-notes {
|
||||
max-width: 75vw;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.reveal.show-notes .speaker-notes {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1600px) {
|
||||
.reveal .speaker-notes {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.reveal.show-notes {
|
||||
border-left: 0;
|
||||
max-width: none;
|
||||
max-height: 70%;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.reveal.show-notes .speaker-notes {
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: (30/0.7)*1%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.reveal.show-notes {
|
||||
max-height: 60%;
|
||||
}
|
||||
|
||||
.reveal.show-notes .speaker-notes {
|
||||
top: 100%;
|
||||
height: (40/0.6)*1%;
|
||||
}
|
||||
|
||||
.reveal .speaker-notes {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* ZOOM PLUGIN
|
||||
@@ -1315,5 +1715,3 @@ body {
|
||||
.zoomed .reveal .roll span:after {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
## Dependencies
|
||||
|
||||
Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Make sure that you have the reveal.js development environment including the Grunt dependencies installed before proceding: https://github.com/hakimel/reveal.js#full-setup
|
||||
Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Make sure that you have the reveal.js development environment including the Grunt dependencies installed before proceeding: https://github.com/hakimel/reveal.js#full-setup
|
||||
|
||||
## Creating a Theme
|
||||
|
||||
To create your own theme, start by duplicating any ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source) and adding it to the compilation list in the [Gruntfile](https://github.com/hakimel/reveal.js/blob/master/Gruntfile.js).
|
||||
To create your own theme, start by duplicating a ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source). It will be automatically compiled by Grunt from Sass to CSS (see the [Gruntfile](https://github.com/hakimel/reveal.js/blob/master/Gruntfile.js)) when you run `npm run build -- css-themes`.
|
||||
|
||||
Each theme file does four things in the following order:
|
||||
|
||||
@@ -19,5 +19,3 @@ This is where you override the default theme. Either by specifying variables (se
|
||||
|
||||
4. **Include [/css/theme/template/theme.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss)**
|
||||
The template theme file which will generate final CSS output based on the currently defined variables.
|
||||
|
||||
When you are done, run `grunt css-themes` to compile the Sass file to CSS and you are ready to use your new theme.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/**
|
||||
* Black theme for reveal.js. This is the opposite of the 'white' theme.
|
||||
*
|
||||
* Copyright (C) 2015 Hakim El Hattab, http://hakim.se
|
||||
* By Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
|
||||
@@ -21,7 +21,7 @@ $backgroundColor: #222;
|
||||
$mainColor: #fff;
|
||||
$headingColor: #fff;
|
||||
|
||||
$mainFontSize: 38px;
|
||||
$mainFontSize: 42px;
|
||||
$mainFont: 'Source Sans Pro', Helvetica, sans-serif;
|
||||
$headingFont: 'Source Sans Pro', Helvetica, sans-serif;
|
||||
$headingTextShadow: none;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/**
|
||||
* White theme for reveal.js. This is the opposite of the 'black' theme.
|
||||
*
|
||||
* Copyright (C) 2015 Hakim El Hattab, http://hakim.se
|
||||
* By Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
|
||||
@@ -21,7 +21,7 @@ $backgroundColor: #fff;
|
||||
$mainColor: #222;
|
||||
$headingColor: #222;
|
||||
|
||||
$mainFontSize: 38px;
|
||||
$mainFontSize: 42px;
|
||||
$mainFont: 'Source Sans Pro', Helvetica, sans-serif;
|
||||
$headingFont: 'Source Sans Pro', Helvetica, sans-serif;
|
||||
$headingTextShadow: none;
|
||||
|
||||
Reference in New Issue
Block a user