team-rockstars-it / rockstarsrevealtheme

A theme to be used with reveal.js to create reusable presentations.

Team Rockstars IT theme for Reveal-js presentations

An attempt to create a reusable theme for Reveal presentations. This theme can be used with reveal-js or reveal-md and even with reveal in Docker: reveal.js on steroids. With this theme it is possible to create reusable presentations in the Team Rockstars IT layout.

Preview

See the demo in action here.

Most important keyboard shortcuts:

• <ESC>: An overview of the presentation
• <S>: Speaker deck with notes (dual screen support)
• <ARROW>-keys: next/previous/up/down

Screenshots

Getting started

Install sass

npm install -g sass

• Generate new theme

sass --watch theme/source/rockstars.scss theme/rockstars.css

• Test the template

docker run --rm -p 1948:1948 -p 35729:35729 -v $(pwd)/example:/slides -v $(pwd)/theme:/slides/theme webpronl/reveal-md:latest /slides --theme theme/rockstars.css --watch

Using it for your own presentations

Create a separate repository where you store your presentations. Add this repository as a submodule and generate a new theme css file. Include it in your docker command or reveal installation. More documentation will come here!

Ideas

• Add blocks from the website to create links
• Better tables
• Different color-schemes (She's a rockstar pink?)

Sources

• Creating Custom Presentation Themes for Reveal.js

rockstarsrevealtheme's Issues

Deployments

Investigate if it is possible to use deployments to generate a css file and include it in reveal as a raw url to the css file on github.

Howto

Document how to use the theme with different presentations and different reveal implementations.

• reveal.js
• reveal-md
• reveal-md in Docker
• ox-reveal / emacs

Reveal info

Add links to reveal documentation so people who don't know reveal can learn and try this template too.

Better class name for alternative page

Currently the class for a yellow page has the name yellow in it. When using different themes for the same presentation a more general name makes more sense.

Suggestion: accent?

Make it responsive for mobile

Let's try to make a responsive version, so the audience can view the presentation on their mobile device.

Styling of code block

As you can see in the example presentation, the layout of code blocks is not working correctly.