diff --git a/README.md b/README.md index 4cb15eb5..ef3e406c 100644 --- a/README.md +++ b/README.md @@ -186,6 +186,19 @@ It's easy to link between slides. The first example below targets the index of a Link Link ``` + +You can also add relative navigation links, similar to the built in reveal.js controls, by appending one of the following classes on any element. Note that each element is automatically given an ```enabled``` class when its a valid navigation route based on the current slide. + +```html + + + + + + +``` + + ### Fullscreen mode Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode. diff --git a/css/reveal.css b/css/reveal.css index 2e72aca9..c4c2991b 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -346,14 +346,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 +361,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; diff --git a/css/theme/beige.css b/css/theme/beige.css index 5e408832..c8d38f26 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 28ed7d3b..30d7463d 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 ece6124f..3d406af2 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 6d0771ab..cf4f042c 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 18a48639..43bb4f49 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 6a80b623..a818ec29 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; } diff --git a/index.html b/index.html index 82570f34..426b8cfa 100644 --- a/index.html +++ b/index.html @@ -61,9 +61,9 @@

Vertical Slides

Slides can be nested inside of other slides, - try pressing down. + try pressing down.

- + Down arrow @@ -181,20 +181,20 @@ will be added as a class to the document element when the slide is open. This lets you apply broader style changes, like switching the background.

- + Down arrow

"blackout"

- + Down arrow

"soothe"

- - Up arrow + + Up arrow
@@ -340,7 +340,7 @@ function linkify( selector ) { - +