67 | 68 |
69 |
72 |
79 |
Swipe to the right to reveal the left menu.
4 |(On desktop click and drag from left to right)
5 |
25 |
30 |
35 |
40 |
45 |
Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps.
5 |Built with Sass and optimized for AngularJS.
6 |7 | Tabs Nav Stack 8 |
9 |Banging your head against a wall uses 150 calories an hour.
4 |Dogs have four toes on their hind feet, and five on their front feet.
5 |The ant can lift 50 times its own weight, can pull 30 times its own weight and always falls over on its right side when intoxicated.
6 |A cockroach will live nine days without it's head, before it starves to death.
7 |Polar bears are left handed.
8 |9 | Home 10 | More Facts 11 |
12 |111,111,111 x 111,111,111 = 12,345,678,987,654,321
4 |1 in every 4 Americans has appeared on T.V.
5 |11% of the world is left-handed.
6 |1 in 8 Americans has worked at a McDonalds restaurant.
7 |$283,200 is the absolute highest amount of money you can win on Jeopardy.
8 |101 Dalmatians, Peter Pan, Lady and the Tramp, and Mulan are the only Disney cartoons where both parents are present and don't die throughout the movie.
9 |10 | Home 11 | Scientific Facts 12 |
13 |Example of Ionic tabs. Navigate to each tab, and 4 | navigate to child views of each tab and notice how 5 | each tab has its own navigation history.
6 |7 | Scientific Facts 8 |
9 |
6 | Page 2 7 |
8 | 9 | 10 | 11 |Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps.
5 |Built with Sass and optimized for AngularJS.
6 |7 | Tabs Nav Stack 8 |
9 |Banging your head against a wall uses 150 calories an hour.
4 |Dogs have four toes on their hind feet, and five on their front feet.
5 |The ant can lift 50 times its own weight, can pull 30 times its own weight and always falls over on its right side when intoxicated.
6 |A cockroach will live nine days without it's head, before it starves to death.
7 |Polar bears are left handed.
8 |9 | Home 10 | More Facts 11 |
12 |111,111,111 x 111,111,111 = 12,345,678,987,654,321
4 |1 in every 4 Americans has appeared on T.V.
5 |11% of the world is left-handed.
6 |1 in 8 Americans has worked at a McDonalds restaurant.
7 |$283,200 is the absolute highest amount of money you can win on Jeopardy.
8 |101 Dalmatians, Peter Pan, Lady and the Tramp, and Mulan are the only Disney cartoons where both parents are present and don't die throughout the movie.
9 |10 | Home 11 | Scientific Facts 12 |
13 |4 | Scientific Facts 5 |
6 |
';
163 | dom.wrapper.appendChild( searchElement );
164 | }
165 |
166 | document.getElementById("searchbutton").addEventListener( 'click', function(event) {
167 | doSearch();
168 | }, false );
169 |
170 | document.getElementById("searchinput").addEventListener( 'keyup', function( event ) {
171 | switch (event.keyCode) {
172 | case 13:
173 | event.preventDefault();
174 | doSearch();
175 | searchboxDirty = false;
176 | break;
177 | default:
178 | searchboxDirty = true;
179 | }
180 | }, false );
181 |
182 | // Open the search when the 's' key is hit (yes, this conflicts with the notes plugin, disabling for now)
183 | /*
184 | document.addEventListener( 'keydown', function( event ) {
185 | // Disregard the event if the target is editable or a
186 | // modifier is present
187 | if ( document.querySelector( ':focus' ) !== null || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return;
188 |
189 | if( event.keyCode === 83 ) {
190 | event.preventDefault();
191 | openSearch();
192 | }
193 | }, false );
194 | */
195 | return { open: openSearch };
196 | })();
197 |
--------------------------------------------------------------------------------
/plugin/zoom-js/zoom.js:
--------------------------------------------------------------------------------
1 | // Custom reveal.js integration
2 | (function(){
3 | var isEnabled = true;
4 |
5 | document.querySelector( '.reveal' ).addEventListener( 'mousedown', function( event ) {
6 | var modifier = ( Reveal.getConfig().zoomKey ? Reveal.getConfig().zoomKey : 'alt' ) + 'Key';
7 |
8 | var zoomPadding = 20;
9 | var revealScale = Reveal.getScale();
10 |
11 | if( event[ modifier ] && isEnabled ) {
12 | event.preventDefault();
13 |
14 | var bounds = event.target.getBoundingClientRect();
15 |
16 | zoom.to({
17 | x: ( bounds.left * revealScale ) - zoomPadding,
18 | y: ( bounds.top * revealScale ) - zoomPadding,
19 | width: ( bounds.width * revealScale ) + ( zoomPadding * 2 ),
20 | height: ( bounds.height * revealScale ) + ( zoomPadding * 2 ),
21 | pan: false
22 | });
23 | }
24 | } );
25 |
26 | Reveal.addEventListener( 'overviewshown', function() { isEnabled = false; } );
27 | Reveal.addEventListener( 'overviewhidden', function() { isEnabled = true; } );
28 | })();
29 |
30 | /*!
31 | * zoom.js 0.3 (modified for use with reveal.js)
32 | * http://lab.hakim.se/zoom-js
33 | * MIT licensed
34 | *
35 | * Copyright (C) 2011-2014 Hakim El Hattab, http://hakim.se
36 | */
37 | var zoom = (function(){
38 |
39 | // The current zoom level (scale)
40 | var level = 1;
41 |
42 | // The current mouse position, used for panning
43 | var mouseX = 0,
44 | mouseY = 0;
45 |
46 | // Timeout before pan is activated
47 | var panEngageTimeout = -1,
48 | panUpdateInterval = -1;
49 |
50 | // Check for transform support so that we can fallback otherwise
51 | var supportsTransforms = 'WebkitTransform' in document.body.style ||
52 | 'MozTransform' in document.body.style ||
53 | 'msTransform' in document.body.style ||
54 | 'OTransform' in document.body.style ||
55 | 'transform' in document.body.style;
56 |
57 | if( supportsTransforms ) {
58 | // The easing that will be applied when we zoom in/out
59 | document.body.style.transition = 'transform 0.8s ease';
60 | document.body.style.OTransition = '-o-transform 0.8s ease';
61 | document.body.style.msTransition = '-ms-transform 0.8s ease';
62 | document.body.style.MozTransition = '-moz-transform 0.8s ease';
63 | document.body.style.WebkitTransition = '-webkit-transform 0.8s ease';
64 | }
65 |
66 | // Zoom out if the user hits escape
67 | document.addEventListener( 'keyup', function( event ) {
68 | if( level !== 1 && event.keyCode === 27 ) {
69 | zoom.out();
70 | }
71 | } );
72 |
73 | // Monitor mouse movement for panning
74 | document.addEventListener( 'mousemove', function( event ) {
75 | if( level !== 1 ) {
76 | mouseX = event.clientX;
77 | mouseY = event.clientY;
78 | }
79 | } );
80 |
81 | /**
82 | * Applies the CSS required to zoom in, prefers the use of CSS3
83 | * transforms but falls back on zoom for IE.
84 | *
85 | * @param {Object} rect
86 | * @param {Number} scale
87 | */
88 | function magnify( rect, scale ) {
89 |
90 | var scrollOffset = getScrollOffset();
91 |
92 | // Ensure a width/height is set
93 | rect.width = rect.width || 1;
94 | rect.height = rect.height || 1;
95 |
96 | // Center the rect within the zoomed viewport
97 | rect.x -= ( window.innerWidth - ( rect.width * scale ) ) / 2;
98 | rect.y -= ( window.innerHeight - ( rect.height * scale ) ) / 2;
99 |
100 | if( supportsTransforms ) {
101 | // Reset
102 | if( scale === 1 ) {
103 | document.body.style.transform = '';
104 | document.body.style.OTransform = '';
105 | document.body.style.msTransform = '';
106 | document.body.style.MozTransform = '';
107 | document.body.style.WebkitTransform = '';
108 | }
109 | // Scale
110 | else {
111 | var origin = scrollOffset.x +'px '+ scrollOffset.y +'px',
112 | transform = 'translate('+ -rect.x +'px,'+ -rect.y +'px) scale('+ scale +')';
113 |
114 | document.body.style.transformOrigin = origin;
115 | document.body.style.OTransformOrigin = origin;
116 | document.body.style.msTransformOrigin = origin;
117 | document.body.style.MozTransformOrigin = origin;
118 | document.body.style.WebkitTransformOrigin = origin;
119 |
120 | document.body.style.transform = transform;
121 | document.body.style.OTransform = transform;
122 | document.body.style.msTransform = transform;
123 | document.body.style.MozTransform = transform;
124 | document.body.style.WebkitTransform = transform;
125 | }
126 | }
127 | else {
128 | // Reset
129 | if( scale === 1 ) {
130 | document.body.style.position = '';
131 | document.body.style.left = '';
132 | document.body.style.top = '';
133 | document.body.style.width = '';
134 | document.body.style.height = '';
135 | document.body.style.zoom = '';
136 | }
137 | // Scale
138 | else {
139 | document.body.style.position = 'relative';
140 | document.body.style.left = ( - ( scrollOffset.x + rect.x ) / scale ) + 'px';
141 | document.body.style.top = ( - ( scrollOffset.y + rect.y ) / scale ) + 'px';
142 | document.body.style.width = ( scale * 100 ) + '%';
143 | document.body.style.height = ( scale * 100 ) + '%';
144 | document.body.style.zoom = scale;
145 | }
146 | }
147 |
148 | level = scale;
149 |
150 | if( document.documentElement.classList ) {
151 | if( level !== 1 ) {
152 | document.documentElement.classList.add( 'zoomed' );
153 | }
154 | else {
155 | document.documentElement.classList.remove( 'zoomed' );
156 | }
157 | }
158 | }
159 |
160 | /**
161 | * Pan the document when the mosue cursor approaches the edges
162 | * of the window.
163 | */
164 | function pan() {
165 | var range = 0.12,
166 | rangeX = window.innerWidth * range,
167 | rangeY = window.innerHeight * range,
168 | scrollOffset = getScrollOffset();
169 |
170 | // Up
171 | if( mouseY < rangeY ) {
172 | window.scroll( scrollOffset.x, scrollOffset.y - ( 1 - ( mouseY / rangeY ) ) * ( 14 / level ) );
173 | }
174 | // Down
175 | else if( mouseY > window.innerHeight - rangeY ) {
176 | window.scroll( scrollOffset.x, scrollOffset.y + ( 1 - ( window.innerHeight - mouseY ) / rangeY ) * ( 14 / level ) );
177 | }
178 |
179 | // Left
180 | if( mouseX < rangeX ) {
181 | window.scroll( scrollOffset.x - ( 1 - ( mouseX / rangeX ) ) * ( 14 / level ), scrollOffset.y );
182 | }
183 | // Right
184 | else if( mouseX > window.innerWidth - rangeX ) {
185 | window.scroll( scrollOffset.x + ( 1 - ( window.innerWidth - mouseX ) / rangeX ) * ( 14 / level ), scrollOffset.y );
186 | }
187 | }
188 |
189 | function getScrollOffset() {
190 | return {
191 | x: window.scrollX !== undefined ? window.scrollX : window.pageXOffset,
192 | y: window.scrollY !== undefined ? window.scrollY : window.pageYOffset
193 | }
194 | }
195 |
196 | return {
197 | /**
198 | * Zooms in on either a rectangle or HTML element.
199 | *
200 | * @param {Object} options
201 | * - element: HTML element to zoom in on
202 | * OR
203 | * - x/y: coordinates in non-transformed space to zoom in on
204 | * - width/height: the portion of the screen to zoom in on
205 | * - scale: can be used instead of width/height to explicitly set scale
206 | */
207 | to: function( options ) {
208 |
209 | // Due to an implementation limitation we can't zoom in
210 | // to another element without zooming out first
211 | if( level !== 1 ) {
212 | zoom.out();
213 | }
214 | else {
215 | options.x = options.x || 0;
216 | options.y = options.y || 0;
217 |
218 | // If an element is set, that takes precedence
219 | if( !!options.element ) {
220 | // Space around the zoomed in element to leave on screen
221 | var padding = 20;
222 | var bounds = options.element.getBoundingClientRect();
223 |
224 | options.x = bounds.left - padding;
225 | options.y = bounds.top - padding;
226 | options.width = bounds.width + ( padding * 2 );
227 | options.height = bounds.height + ( padding * 2 );
228 | }
229 |
230 | // If width/height values are set, calculate scale from those values
231 | if( options.width !== undefined && options.height !== undefined ) {
232 | options.scale = Math.max( Math.min( window.innerWidth / options.width, window.innerHeight / options.height ), 1 );
233 | }
234 |
235 | if( options.scale > 1 ) {
236 | options.x *= options.scale;
237 | options.y *= options.scale;
238 |
239 | magnify( options, options.scale );
240 |
241 | if( options.pan !== false ) {
242 |
243 | // Wait with engaging panning as it may conflict with the
244 | // zoom transition
245 | panEngageTimeout = setTimeout( function() {
246 | panUpdateInterval = setInterval( pan, 1000 / 60 );
247 | }, 800 );
248 |
249 | }
250 | }
251 | }
252 | },
253 |
254 | /**
255 | * Resets the document zoom state to its default.
256 | */
257 | out: function() {
258 | clearTimeout( panEngageTimeout );
259 | clearInterval( panUpdateInterval );
260 |
261 | magnify( { x: 0, y: 0 }, 1 );
262 |
263 | level = 1;
264 | },
265 |
266 | // Alias
267 | magnify: function( options ) { this.to( options ) },
268 | reset: function() { this.out() },
269 |
270 | zoomLevel: function() {
271 | return level;
272 | }
273 | }
274 |
275 | })();
276 |
277 |
278 |
279 |
--------------------------------------------------------------------------------
/scss/ionic.scss:
--------------------------------------------------------------------------------
1 |
2 | // Default mixins and settings -----------------
3 | @import "theme/mixins";
4 | @import "theme/settings";
5 | // ---------------------------------------------
6 |
7 |
8 | // Include theme-specific fonts
9 | @import url(../../lib/font/source-sans-pro/source-sans-pro.css);
10 |
11 |
12 | // Override theme settings
13 |
14 | // Classic Ionic Blue
15 | //$backgroundColor: #3374de;
16 | // Modern Ionic Dark Blue
17 | $backgroundColor: #2D303E;
18 |
19 | $mainColor: #fff;
20 | $headingColor: #fff;
21 |
22 | $mainFontSize: 32px;
23 | $mainFont: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
24 | $headingFont: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
25 | $headingTextShadow: 1px 1px 15px rgba(0, 0, 0, .2);
26 | $headingLetterSpacing: normal;
27 | $headingTextTransform: none;
28 | $headingFontWeight: 200;
29 | $linkColor: white;
30 | $linkColorHover: white;
31 | $selectionBackgroundColor: lighten( $linkColor, 25% );
32 |
33 | $heading1Size: 2.0em;
34 | $heading2Size: 1.6em;
35 | $heading3Size: 1.3em;
36 | $heading4Size: 1.0em;
37 |
38 | section.has-light-background {
39 | &, h1, h2, h3, h4, h5, h6 {
40 | color: #222;
41 | }
42 | }
43 |
44 |
45 | // Theme template ------------------------------
46 | @import "theme/theme";
47 | // ---------------------------------------------
48 |
49 | .reveal {
50 |
51 | h1, h2, h3, h4 {
52 | text-transform: uppercase;
53 | }
54 |
55 | p, th, td, ol, ul, li {
56 | text-shadow: $headingTextShadow;
57 | }
58 |
59 | section img {
60 | background: transparent;
61 | border: 0;
62 | box-shadow: none;
63 | }
64 |
65 | blockquote {
66 | display: block;
67 | position: relative;
68 | width: 70%;
69 | margin: 20px auto;
70 | padding: 5px;
71 | font-style: italic;
72 | background: transparent;
73 | box-shadow: none;
74 | }
75 |
76 | table {
77 | td, th {
78 | border: 0;
79 | background: rgba(0,0,0,.15);
80 | }
81 |
82 | th {
83 | text-transform: uppercase;
84 | background: rgba(0,0,0,.4);
85 | }
86 | }
87 |
88 | a {
89 | color: inherit;
90 | text-decoration: underline;
91 | }
92 |
93 | .dark-shadow {
94 | text-shadow: 5px 0 10px black;
95 | }
96 |
97 | .left {
98 | text-align: left;
99 | }
100 |
101 | .me {
102 | margin: 30px 0 0 130px;
103 | font-size:1.2em;
104 | line-height: 2em;
105 | list-style-type: none;
106 |
107 | li {
108 | padding: 0 0 0 70px;
109 | }
110 | }
111 |
112 | strong {
113 | font-weight: 900;
114 | }
115 |
116 | .native-logos {
117 |
118 | img {
119 | width: 100px;
120 | margin: 40px 20px 0 20px;
121 | }
122 |
123 | }
124 |
125 | .stack {
126 | width: 330px;
127 | margin: 0 350px 0 0;
128 | list-style-type: none;
129 |
130 | li {
131 | margin: 8px;
132 | padding: 5px 6px 7px 12px;
133 | }
134 | }
135 |
136 | .ionic-blue,
137 | .ionic-blue * {
138 | text-shadow: none;
139 | color: #3374de;
140 | }
141 |
142 | .col {
143 | float: left;
144 | width: 50%;
145 | }
146 | .col.preview {
147 | width: 35%;;
148 | }
149 | .col.code {
150 | width: 65%;
151 | text-align: left;
152 | }
153 | .col.code > * {
154 | margin-left: 40px;
155 | }
156 |
157 | .demo-frame {
158 | background: url('../img/demo-bg.png') no-repeat;
159 | background-size: 340px;
160 | height: 700px;
161 | margin-top: 0;
162 | margin-left: -15px;
163 | min-width: 345px;
164 | }
165 |
166 | .demo-frame iframe {
167 | position: absolute;
168 | left: 7px;
169 | top: 98px;
170 | width: 296px;
171 | height: 527px
172 | }
173 |
174 | }
175 |
--------------------------------------------------------------------------------
/scss/main.scss:
--------------------------------------------------------------------------------
1 | @import "reveal";
2 | @import "ionic";
3 |
--------------------------------------------------------------------------------
/scss/theme/mixins.scss:
--------------------------------------------------------------------------------
1 | @mixin vertical-gradient( $top, $bottom ) {
2 | background: $top;
3 | background: -moz-linear-gradient( top, $top 0%, $bottom 100% );
4 | background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom) );
5 | background: -webkit-linear-gradient( top, $top 0%, $bottom 100% );
6 | background: -o-linear-gradient( top, $top 0%, $bottom 100% );
7 | background: -ms-linear-gradient( top, $top 0%, $bottom 100% );
8 | background: linear-gradient( top, $top 0%, $bottom 100% );
9 | }
10 |
11 | @mixin horizontal-gradient( $top, $bottom ) {
12 | background: $top;
13 | background: -moz-linear-gradient( left, $top 0%, $bottom 100% );
14 | background: -webkit-gradient( linear, left top, right top, color-stop(0%,$top), color-stop(100%,$bottom) );
15 | background: -webkit-linear-gradient( left, $top 0%, $bottom 100% );
16 | background: -o-linear-gradient( left, $top 0%, $bottom 100% );
17 | background: -ms-linear-gradient( left, $top 0%, $bottom 100% );
18 | background: linear-gradient( left, $top 0%, $bottom 100% );
19 | }
20 |
21 | @mixin radial-gradient( $outer, $inner, $type: circle ) {
22 | background: $outer;
23 | background: -moz-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
24 | background: -webkit-gradient( radial, center center, 0px, center center, 100%, color-stop(0%,$inner), color-stop(100%,$outer) );
25 | background: -webkit-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
26 | background: -o-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
27 | background: -ms-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
28 | background: radial-gradient( center, $type cover, $inner 0%, $outer 100% );
29 | }
--------------------------------------------------------------------------------
/scss/theme/settings.scss:
--------------------------------------------------------------------------------
1 | // Base settings for all themes that can optionally be
2 | // overridden by the super-theme
3 |
4 | // Background of the presentation
5 | $backgroundColor: #2b2b2b;
6 |
7 | // Primary/body text
8 | $mainFont: 'Lato', sans-serif;
9 | $mainFontSize: 36px;
10 | $mainColor: #eee;
11 |
12 | // Vertical spacing between blocks of text
13 | $blockMargin: 20px;
14 |
15 | // Headings
16 | $headingMargin: 0 0 $blockMargin 0;
17 | $headingFont: 'League Gothic', Impact, sans-serif;
18 | $headingColor: #eee;
19 | $headingLineHeight: 1.2;
20 | $headingLetterSpacing: normal;
21 | $headingTextTransform: uppercase;
22 | $headingTextShadow: none;
23 | $headingFontWeight: normal;
24 | $heading1TextShadow: $headingTextShadow;
25 |
26 | $heading1Size: 3.77em;
27 | $heading2Size: 2.11em;
28 | $heading3Size: 1.55em;
29 | $heading4Size: 1.00em;
30 |
31 | // Links and actions
32 | $linkColor: #13DAEC;
33 | $linkColorHover: lighten( $linkColor, 20% );
34 |
35 | // Text selection
36 | $selectionBackgroundColor: #FF5E99;
37 | $selectionColor: #fff;
38 |
39 | // Generates the presentation background, can be overridden
40 | // to return a background image or gradient
41 | @mixin bodyBackground() {
42 | background: $backgroundColor;
43 | }
--------------------------------------------------------------------------------
/scss/theme/theme.scss:
--------------------------------------------------------------------------------
1 | // Base theme template for reveal.js
2 |
3 | /*********************************************
4 | * GLOBAL STYLES
5 | *********************************************/
6 |
7 | body {
8 | @include bodyBackground();
9 | background-color: $backgroundColor;
10 | }
11 |
12 | .reveal {
13 | font-family: $mainFont;
14 | font-size: $mainFontSize;
15 | font-weight: normal;
16 | color: $mainColor;
17 | }
18 |
19 | ::selection {
20 | color: $selectionColor;
21 | background: $selectionBackgroundColor;
22 | text-shadow: none;
23 | }
24 |
25 | .reveal .slides>section,
26 | .reveal .slides>section>section {
27 | line-height: 1.3;
28 | font-weight: inherit;
29 | }
30 |
31 | /*********************************************
32 | * HEADERS
33 | *********************************************/
34 |
35 | .reveal h1,
36 | .reveal h2,
37 | .reveal h3,
38 | .reveal h4,
39 | .reveal h5,
40 | .reveal h6 {
41 | margin: $headingMargin;
42 | color: $headingColor;
43 |
44 | font-family: $headingFont;
45 | font-weight: $headingFontWeight;
46 | line-height: $headingLineHeight;
47 | letter-spacing: $headingLetterSpacing;
48 |
49 | text-transform: $headingTextTransform;
50 | text-shadow: $headingTextShadow;
51 |
52 | word-wrap: break-word;
53 | }
54 |
55 | .reveal h1 {font-size: $heading1Size; }
56 | .reveal h2 {font-size: $heading2Size; }
57 | .reveal h3 {font-size: $heading3Size; }
58 | .reveal h4 {font-size: $heading4Size; }
59 |
60 | .reveal h1 {
61 | text-shadow: $heading1TextShadow;
62 | }
63 |
64 |
65 | /*********************************************
66 | * OTHER
67 | *********************************************/
68 |
69 | .reveal p {
70 | margin: $blockMargin 0;
71 | line-height: 1.3;
72 | }
73 |
74 | /* Ensure certain elements are never larger than the slide itself */
75 | .reveal img,
76 | .reveal video,
77 | .reveal iframe {
78 | max-width: 95%;
79 | max-height: 95%;
80 | }
81 | .reveal strong,
82 | .reveal b {
83 | font-weight: bold;
84 | }
85 |
86 | .reveal em {
87 | font-style: italic;
88 | }
89 |
90 | .reveal ol,
91 | .reveal dl,
92 | .reveal ul {
93 | display: inline-block;
94 |
95 | text-align: left;
96 | margin: 0 0 0 1em;
97 | }
98 |
99 | .reveal ol {
100 | list-style-type: decimal;
101 | }
102 |
103 | .reveal ul {
104 | list-style-type: disc;
105 | }
106 |
107 | .reveal ul ul {
108 | list-style-type: square;
109 | }
110 |
111 | .reveal ul ul ul {
112 | list-style-type: circle;
113 | }
114 |
115 | .reveal ul ul,
116 | .reveal ul ol,
117 | .reveal ol ol,
118 | .reveal ol ul {
119 | display: block;
120 | margin-left: 40px;
121 | }
122 |
123 | .reveal dt {
124 | font-weight: bold;
125 | }
126 |
127 | .reveal dd {
128 | margin-left: 40px;
129 | }
130 |
131 | .reveal q,
132 | .reveal blockquote {
133 | quotes: none;
134 | }
135 |
136 | .reveal blockquote {
137 | display: block;
138 | position: relative;
139 | width: 70%;
140 | margin: $blockMargin auto;
141 | padding: 5px;
142 |
143 | font-style: italic;
144 | background: rgba(255, 255, 255, 0.05);
145 | box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
146 | }
147 | .reveal blockquote p:first-child,
148 | .reveal blockquote p:last-child {
149 | display: inline-block;
150 | }
151 |
152 | .reveal q {
153 | font-style: italic;
154 | }
155 |
156 | .reveal pre {
157 | display: block;
158 | position: relative;
159 | width: 90%;
160 | margin: $blockMargin auto;
161 |
162 | text-align: left;
163 | font-size: 0.55em;
164 | font-family: monospace;
165 | line-height: 1.2em;
166 |
167 | word-wrap: break-word;
168 |
169 | box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
170 | }
171 | .reveal code {
172 | font-family: monospace;
173 | }
174 |
175 | .reveal pre code {
176 | display: block;
177 | padding: 5px;
178 | overflow: auto;
179 | max-height: 400px;
180 | word-wrap: normal;
181 | background: #3F3F3F;
182 | color: #DCDCDC;
183 | }
184 |
185 | .reveal table {
186 | margin: auto;
187 | border-collapse: collapse;
188 | border-spacing: 0;
189 | }
190 |
191 | .reveal table th {
192 | font-weight: bold;
193 | }
194 |
195 | .reveal table th,
196 | .reveal table td {
197 | text-align: left;
198 | padding: 0.2em 0.5em 0.2em 0.5em;
199 | border-bottom: 1px solid;
200 | }
201 |
202 | .reveal table tr:last-child td {
203 | border-bottom: none;
204 | }
205 |
206 | .reveal sup {
207 | vertical-align: super;
208 | }
209 | .reveal sub {
210 | vertical-align: sub;
211 | }
212 |
213 | .reveal small {
214 | display: inline-block;
215 | font-size: 0.6em;
216 | line-height: 1.2em;
217 | vertical-align: top;
218 | }
219 |
220 | .reveal small * {
221 | vertical-align: top;
222 | }
223 |
224 |
225 | /*********************************************
226 | * LINKS
227 | *********************************************/
228 |
229 | .reveal a {
230 | color: $linkColor;
231 | text-decoration: none;
232 |
233 | -webkit-transition: color .15s ease;
234 | -moz-transition: color .15s ease;
235 | transition: color .15s ease;
236 | }
237 | .reveal a:hover {
238 | color: $linkColorHover;
239 |
240 | text-shadow: none;
241 | border: none;
242 | }
243 |
244 | .reveal .roll span:after {
245 | color: #fff;
246 | background: darken( $linkColor, 15% );
247 | }
248 |
249 |
250 | /*********************************************
251 | * IMAGES
252 | *********************************************/
253 |
254 | .reveal section img {
255 | margin: 15px 0px;
256 | background: rgba(255,255,255,0.12);
257 | border: 4px solid $mainColor;
258 |
259 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
260 | }
261 |
262 | .reveal a img {
263 | -webkit-transition: all .15s linear;
264 | -moz-transition: all .15s linear;
265 | transition: all .15s linear;
266 | }
267 |
268 | .reveal a:hover img {
269 | background: rgba(255,255,255,0.2);
270 | border-color: $linkColor;
271 |
272 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
273 | }
274 |
275 |
276 | /*********************************************
277 | * NAVIGATION CONTROLS
278 | *********************************************/
279 |
280 | .reveal .controls div.navigate-left,
281 | .reveal .controls div.navigate-left.enabled {
282 | border-right-color: $linkColor;
283 | }
284 |
285 | .reveal .controls div.navigate-right,
286 | .reveal .controls div.navigate-right.enabled {
287 | border-left-color: $linkColor;
288 | }
289 |
290 | .reveal .controls div.navigate-up,
291 | .reveal .controls div.navigate-up.enabled {
292 | border-bottom-color: $linkColor;
293 | }
294 |
295 | .reveal .controls div.navigate-down,
296 | .reveal .controls div.navigate-down.enabled {
297 | border-top-color: $linkColor;
298 | }
299 |
300 | .reveal .controls div.navigate-left.enabled:hover {
301 | border-right-color: $linkColorHover;
302 | }
303 |
304 | .reveal .controls div.navigate-right.enabled:hover {
305 | border-left-color: $linkColorHover;
306 | }
307 |
308 | .reveal .controls div.navigate-up.enabled:hover {
309 | border-bottom-color: $linkColorHover;
310 | }
311 |
312 | .reveal .controls div.navigate-down.enabled:hover {
313 | border-top-color: $linkColorHover;
314 | }
315 |
316 |
317 | /*********************************************
318 | * PROGRESS BAR
319 | *********************************************/
320 |
321 | .reveal .progress {
322 | background: rgba(0,0,0,0.2);
323 | }
324 | .reveal .progress span {
325 | background: $linkColor;
326 |
327 | -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
328 | -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
329 | transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
330 | }
331 |
332 | /*********************************************
333 | * SLIDE NUMBER
334 | *********************************************/
335 | .reveal .slide-number {
336 | color: $linkColor;
337 | }
338 |
339 |
340 |
--------------------------------------------------------------------------------
/test/examples/assets/image1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ionic-team/ionic-present/6141805226c6b7ed19e23ecba8b804d1873175ad/test/examples/assets/image1.png
--------------------------------------------------------------------------------
/test/examples/assets/image2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ionic-team/ionic-present/6141805226c6b7ed19e23ecba8b804d1873175ad/test/examples/assets/image2.png
--------------------------------------------------------------------------------
/test/examples/barebones.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 
26 |