larger headings for background sections

This commit is contained in:
Hakim El Hattab 2017-04-27 16:42:24 +02:00 committed by GitHub
parent caccf67d3a
commit 9f4ed56bb3

View File

@ -559,7 +559,7 @@ Reveal.addEventListener( 'somestate', function() {
Slides are contained within a limited portion of the screen by default to allow them to fit any display and scale uniformly. You can apply full page backgrounds outside of the slide area by adding a ```data-background``` attribute to your ```<section>``` elements. Four different types of backgrounds are supported: color, image, video and iframe. Slides are contained within a limited portion of the screen by default to allow them to fit any display and scale uniformly. You can apply full page backgrounds outside of the slide area by adding a ```data-background``` attribute to your ```<section>``` elements. Four different types of backgrounds are supported: color, image, video and iframe.
##### Color Backgrounds #### Color Backgrounds
All CSS color formats are supported, like rgba() or hsl(). All CSS color formats are supported, like rgba() or hsl().
```html ```html
<section data-background-color="#ff0000"> <section data-background-color="#ff0000">
@ -567,7 +567,7 @@ All CSS color formats are supported, like rgba() or hsl().
</section> </section>
``` ```
##### Image Backgrounds #### Image Backgrounds
By default, background images are resized to cover the full page. Available options: By default, background images are resized to cover the full page. Available options:
| Attribute | Default | Description | | Attribute | Default | Description |
@ -585,7 +585,7 @@ By default, background images are resized to cover the full page. Available opti
</section> </section>
``` ```
##### Video Backgrounds #### Video Backgrounds
Automatically plays a full size video behind the slide. Automatically plays a full size video behind the slide.
| Attribute | Default | Description | | Attribute | Default | Description |
@ -601,7 +601,7 @@ Automatically plays a full size video behind the slide.
</section> </section>
``` ```
##### Iframe Backgrounds #### Iframe Backgrounds
Embeds a web page as a slide background that covers 100% of the reveal.js width and height. The iframe is in the background layer, behind your slides, and as such it's not possible to interact with it by default. To make your background interactive, you can add the `data-background-interactive` attribute. Embeds a web page as a slide background that covers 100% of the reveal.js width and height. The iframe is in the background layer, behind your slides, and as such it's not possible to interact with it by default. To make your background interactive, you can add the `data-background-interactive` attribute.
```html ```html
<section data-background-iframe="https://slides.com" data-background-interactive> <section data-background-iframe="https://slides.com" data-background-interactive>
@ -609,7 +609,7 @@ Embeds a web page as a slide background that covers 100% of the reveal.js width
</section> </section>
``` ```
##### Background Transitions #### Background Transitions
Backgrounds transition using a fade animation by default. This can be changed to a linear sliding transition by passing ```backgroundTransition: 'slide'``` to the ```Reveal.initialize()``` call. Alternatively you can set ```data-background-transition``` on any section with a background to override that specific transition. Backgrounds transition using a fade animation by default. This can be changed to a linear sliding transition by passing ```backgroundTransition: 'slide'``` to the ```Reveal.initialize()``` call. Alternatively you can set ```data-background-transition``` on any section with a background to override that specific transition.