aboutsummaryrefslogtreecommitdiffhomepage
path: root/css
diff options
context:
space:
mode:
Diffstat (limited to 'css')
-rw-r--r--css/reveal.css161
-rw-r--r--css/theme/beige.css24
-rw-r--r--css/theme/default.css24
-rw-r--r--css/theme/serif.css24
-rw-r--r--css/theme/simple.css24
-rw-r--r--css/theme/sky.css24
-rw-r--r--css/theme/template/theme.scss24
7 files changed, 174 insertions, 131 deletions
diff --git a/css/reveal.css b/css/reveal.css
index 412e8ec..7879bb6 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -48,7 +48,6 @@ html,
body {
width: 100%;
height: 100%;
- min-height: 600px;
overflow: hidden;
}
@@ -58,14 +57,20 @@ body {
}
::selection {
- background:#FF5E99;
- color:#fff;
+ background: #FF5E99;
+ color: #fff;
text-shadow: none;
}
-@media screen and (max-width: 900px) {
- .reveal {
- font-size: 30px;
+@media screen and (max-width: 900px), (max-height: 600px) {
+ .reveal .slides {
+ font-size: 0.82em;
+ }
+}
+
+@media screen and (max-width: 700px), (max-height: 400px) {
+ .reveal .slides {
+ font-size: 0.66em;
}
}
@@ -164,11 +169,6 @@ body {
* DEFAULT ELEMENT STYLES
*********************************************/
-.reveal .slides section {
- line-height: 1.2em;
- font-weight: normal;
-}
-
.reveal img {
/* preserve aspect ratio and scale image so it's bound within the section */
max-width: 100%;
@@ -238,6 +238,10 @@ body {
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
}
+ .reveal blockquote p:first-child,
+ .reveal blockquote p:last-child {
+ display: inline-block;
+ }
.reveal blockquote:before {
content: '\201C';
}
@@ -346,14 +350,14 @@ body {
margin-top: 1px;
}
-.reveal .controls div.left {
+.reveal .controls div.navigate-left {
top: 42px;
border-right-width: 22px;
border-right-color: #eee;
}
-.reveal .controls div.right {
+.reveal .controls div.navigate-right {
left: 74px;
top: 42px;
@@ -361,14 +365,14 @@ body {
border-left-color: #eee;
}
-.reveal .controls div.up {
+.reveal .controls div.navigate-up {
left: 42px;
border-bottom-width: 22px;
border-bottom-color: #eee;
}
-.reveal .controls div.down {
+.reveal .controls div.navigate-down {
left: 42px;
top: 74px;
@@ -495,18 +499,23 @@ body {
* SLIDES
*********************************************/
+.reveal {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ min-height: 640px; /* min height + 40 to account for padding */
+}
+
.reveal .slides {
position: absolute;
max-width: 900px;
+ min-height: 600px;
width: 80%;
- height: 60%;
left: 50%;
top: 50%;
- margin-top: -320px;
- padding: 20px 0px;
+
overflow: visible;
z-index: 1;
-
text-align: center;
-webkit-transition: -webkit-perspective .4s ease;
@@ -520,10 +529,10 @@ body {
-ms-perspective: 600px;
perspective: 600px;
- -webkit-perspective-origin: 0% 25%;
- -moz-perspective-origin: 0% 25%;
- -ms-perspective-origin: 0% 25%;
- perspective-origin: 0% 25%;
+ -webkit-perspective-origin: 0px -100px;
+ -moz-perspective-origin: 0px -100px;
+ -ms-perspective-origin: 0px -100px;
+ perspective-origin: 0px -100px;
}
.reveal .slides>section,
@@ -531,33 +540,58 @@ body {
display: none;
position: absolute;
width: 100%;
- min-height: 600px;
+ padding: 20px 0px;
z-index: 10;
+ line-height: 1.2em;
+ font-weight: normal;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
- -webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
- -moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
- -ms-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
- -o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
- transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ -webkit-transition: -webkit-transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+ -webkit-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+ visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+ opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ -moz-transition: -moz-transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+ -moz-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+ visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+ opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ -ms-transition: -ms-transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+ -ms-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+ visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+ opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ -o-transition: -o-transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+ -o-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+ visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+ opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ 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),
+ opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+}
+
+.reveal .slides>section {
+ left: -50%;
+ top: -50%;
}
-.reveal .slides>section.present {
+.reveal .slides>section.present,
+.reveal .slides>section>section.present {
display: block;
z-index: 11;
opacity: 1;
}
-.reveal .slides>section {
- margin-left: -50%;
+.reveal.center,
+.reveal.center .slides {
+ min-height: auto;
}
+
/*********************************************
* DEFAULT TRANSITION
*********************************************/
@@ -585,19 +619,19 @@ body {
display: block;
opacity: 0;
- -webkit-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
- -moz-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
- -ms-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
- transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
+ -webkit-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
+ -moz-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
+ -ms-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
+ transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
}
.reveal .slides>section>section.future {
display: block;
opacity: 0;
- -webkit-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
- -moz-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
- -ms-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
- transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
+ -webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
+ -moz-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
+ -ms-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
+ transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
}
@@ -636,15 +670,6 @@ body {
* ZOOM TRANSITION
*********************************************/
-.reveal.zoom .slides>section,
-.reveal.zoom .slides>section>section {
- -webkit-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
- -moz-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
- -ms-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
- -o-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
- transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-}
-
.reveal.zoom .slides>section.past {
opacity: 0;
visibility: hidden;
@@ -722,11 +747,6 @@ body {
*********************************************/
.reveal.cube .slides {
- -webkit-perspective-origin: 0% 25%;
- -moz-perspective-origin: 0% 25%;
- -ms-perspective-origin: 0% 25%;
- perspective-origin: 0% 25%;
-
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
-ms-perspective: 1300px;
@@ -735,6 +755,7 @@ body {
.reveal.cube .slides section {
padding: 30px;
+ min-height: 600px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
@@ -745,6 +766,9 @@ body {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
+ .reveal.center.cube .slides section {
+ min-height: auto;
+ }
.reveal.cube .slides section:not(.stack):before {
content: '';
position: absolute;
@@ -1031,8 +1055,7 @@ body {
}
.reveal.overview .slides section {
- padding: 20px 0;
- max-height: 600px;
+ height: 600px;
overflow: hidden;
opacity: 1!important;
visibility: visible!important;
@@ -1053,13 +1076,12 @@ body {
.reveal.overview .slides section:hover {
background: rgba(0,0,0,0.3);
}
-
.reveal.overview .slides section.present {
background: rgba(0,0,0,0.3);
}
.reveal.overview .slides>section.stack {
- background: none;
padding: 0;
+ background: none;
overflow: visible;
}
@@ -1099,13 +1121,22 @@ body {
overflow-y: auto;
}
+.no-transforms .slides {
+ top: 0;
+ left: 50%;
+ margin: 0;
+ text-align: center;
+}
+
.no-transforms .slides section {
display: block!important;
opacity: 1!important;
position: relative!important;
height: auto;
min-height: auto;
- margin-bottom: 100px;
+ top: 0;
+ left: -50%;
+ margin: 70px 0;
-webkit-transform: none;
-moz-transform: none;
@@ -1113,6 +1144,18 @@ body {
transform: none;
}
+.no-transforms .slides section section {
+ left: 0;
+}
+
+.no-transition {
+ -webkit-transition: none;
+ -moz-transition: none;
+ -ms-transition: none;
+ -o-transition: none;
+ transition: none;
+}
+
/*********************************************
* BACKGROUND STATES
diff --git a/css/theme/beige.css b/css/theme/beige.css
index 5e40883..c8d38f2 100644
--- a/css/theme/beige.css
+++ b/css/theme/beige.css
@@ -110,39 +110,39 @@ body {
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
-.reveal .controls div.left,
-.reveal .controls div.left.enabled {
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
border-right-color: #8b743d;
}
-.reveal .controls div.right,
-.reveal .controls div.right.enabled {
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
border-left-color: #8b743d;
}
-.reveal .controls div.up,
-.reveal .controls div.up.enabled {
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
border-bottom-color: #8b743d;
}
-.reveal .controls div.down,
-.reveal .controls div.down.enabled {
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
border-top-color: #8b743d;
}
-.reveal .controls div.left.enabled:hover {
+.reveal .controls div.navigate-left.enabled:hover {
border-right-color: #c0a86e;
}
-.reveal .controls div.right.enabled:hover {
+.reveal .controls div.navigate-right.enabled:hover {
border-left-color: #c0a86e;
}
-.reveal .controls div.up.enabled:hover {
+.reveal .controls div.navigate-up.enabled:hover {
border-bottom-color: #c0a86e;
}
-.reveal .controls div.down.enabled:hover {
+.reveal .controls div.navigate-down.enabled:hover {
border-top-color: #c0a86e;
}
diff --git a/css/theme/default.css b/css/theme/default.css
index 28ed7d3..30d7463 100644
--- a/css/theme/default.css
+++ b/css/theme/default.css
@@ -110,39 +110,39 @@ body {
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
-.reveal .controls div.left,
-.reveal .controls div.left.enabled {
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
border-right-color: #13daec;
}
-.reveal .controls div.right,
-.reveal .controls div.right.enabled {
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
border-left-color: #13daec;
}
-.reveal .controls div.up,
-.reveal .controls div.up.enabled {
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
border-bottom-color: #13daec;
}
-.reveal .controls div.down,
-.reveal .controls div.down.enabled {
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
border-top-color: #13daec;
}
-.reveal .controls div.left.enabled:hover {
+.reveal .controls div.navigate-left.enabled:hover {
border-right-color: #71e9f4;
}
-.reveal .controls div.right.enabled:hover {
+.reveal .controls div.navigate-right.enabled:hover {
border-left-color: #71e9f4;
}
-.reveal .controls div.up.enabled:hover {
+.reveal .controls div.navigate-up.enabled:hover {
border-bottom-color: #71e9f4;
}
-.reveal .controls div.down.enabled:hover {
+.reveal .controls div.navigate-down.enabled:hover {
border-top-color: #71e9f4;
}
diff --git a/css/theme/serif.css b/css/theme/serif.css
index ece6124..3d406af 100644
--- a/css/theme/serif.css
+++ b/css/theme/serif.css
@@ -97,39 +97,39 @@ body {
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
-.reveal .controls div.left,
-.reveal .controls div.left.enabled {
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
border-right-color: #51483d;
}
-.reveal .controls div.right,
-.reveal .controls div.right.enabled {
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
border-left-color: #51483d;
}
-.reveal .controls div.up,
-.reveal .controls div.up.enabled {
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
border-bottom-color: #51483d;
}
-.reveal .controls div.down,
-.reveal .controls div.down.enabled {
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
border-top-color: #51483d;
}
-.reveal .controls div.left.enabled:hover {
+.reveal .controls div.navigate-left.enabled:hover {
border-right-color: #8b7c69;
}
-.reveal .controls div.right.enabled:hover {
+.reveal .controls div.navigate-right.enabled:hover {
border-left-color: #8b7c69;
}
-.reveal .controls div.up.enabled:hover {
+.reveal .controls div.navigate-up.enabled:hover {
border-bottom-color: #8b7c69;
}
-.reveal .controls div.down.enabled:hover {
+.reveal .controls div.navigate-down.enabled:hover {
border-top-color: #8b7c69;
}
diff --git a/css/theme/simple.css b/css/theme/simple.css
index 6d0771a..cf4f042 100644
--- a/css/theme/simple.css
+++ b/css/theme/simple.css
@@ -99,39 +99,39 @@ body {
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
-.reveal .controls div.left,
-.reveal .controls div.left.enabled {
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
border-right-color: darkblue;
}
-.reveal .controls div.right,
-.reveal .controls div.right.enabled {
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
border-left-color: darkblue;
}
-.reveal .controls div.up,
-.reveal .controls div.up.enabled {
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
border-bottom-color: darkblue;
}
-.reveal .controls div.down,
-.reveal .controls div.down.enabled {
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
border-top-color: darkblue;
}
-.reveal .controls div.left.enabled:hover {
+.reveal .controls div.navigate-left.enabled:hover {
border-right-color: #0000f1;
}
-.reveal .controls div.right.enabled:hover {
+.reveal .controls div.navigate-right.enabled:hover {
border-left-color: #0000f1;
}
-.reveal .controls div.up.enabled:hover {
+.reveal .controls div.navigate-up.enabled:hover {
border-bottom-color: #0000f1;
}
-.reveal .controls div.down.enabled:hover {
+.reveal .controls div.navigate-down.enabled:hover {
border-top-color: #0000f1;
}
diff --git a/css/theme/sky.css b/css/theme/sky.css
index 18a4863..43bb4f4 100644
--- a/css/theme/sky.css
+++ b/css/theme/sky.css
@@ -103,39 +103,39 @@ body {
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
-.reveal .controls div.left,
-.reveal .controls div.left.enabled {
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
border-right-color: #3b759e;
}
-.reveal .controls div.right,
-.reveal .controls div.right.enabled {
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
border-left-color: #3b759e;
}
-.reveal .controls div.up,
-.reveal .controls div.up.enabled {
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
border-bottom-color: #3b759e;
}
-.reveal .controls div.down,
-.reveal .controls div.down.enabled {
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
border-top-color: #3b759e;
}
-.reveal .controls div.left.enabled:hover {
+.reveal .controls div.navigate-left.enabled:hover {
border-right-color: #74a7cb;
}
-.reveal .controls div.right.enabled:hover {
+.reveal .controls div.navigate-right.enabled:hover {
border-left-color: #74a7cb;
}
-.reveal .controls div.up.enabled:hover {
+.reveal .controls div.navigate-up.enabled:hover {
border-bottom-color: #74a7cb;
}
-.reveal .controls div.down.enabled:hover {
+.reveal .controls div.navigate-down.enabled:hover {
border-top-color: #74a7cb;
}
diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss
index 6a80b62..a818ec2 100644
--- a/css/theme/template/theme.scss
+++ b/css/theme/template/theme.scss
@@ -106,39 +106,39 @@ body {
* NAVIGATION CONTROLS
*********************************************/
-.reveal .controls div.left,
-.reveal .controls div.left.enabled {
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
border-right-color: $linkColor;
}
-.reveal .controls div.right,
-.reveal .controls div.right.enabled {
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
border-left-color: $linkColor;
}
-.reveal .controls div.up,
-.reveal .controls div.up.enabled {
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
border-bottom-color: $linkColor;
}
-.reveal .controls div.down,
-.reveal .controls div.down.enabled {
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
border-top-color: $linkColor;
}
-.reveal .controls div.left.enabled:hover {
+.reveal .controls div.navigate-left.enabled:hover {
border-right-color: $linkColorHover;
}
-.reveal .controls div.right.enabled:hover {
+.reveal .controls div.navigate-right.enabled:hover {
border-left-color: $linkColorHover;
}
-.reveal .controls div.up.enabled:hover {
+.reveal .controls div.navigate-up.enabled:hover {
border-bottom-color: $linkColorHover;
}
-.reveal .controls div.down.enabled:hover {
+.reveal .controls div.navigate-down.enabled:hover {
border-top-color: $linkColorHover;
}