Stereopticon

A reveal.js theme slightly inspired by LaTeX/Beamer and compatible with asciidoctor-revealjs.

Demo available here.

Installation and usage

It is recommended to organise your presentation website as follows:

• Download the latest stereopticon release, and extract it which will create a stereopticon folder.

• Download the proper Reveal.js release and extract it as a folder reveal.js next to the stereopticon folder.

• Prepare your slides in a Reveal.js index.html file at the root of your website, and make sure to prefix all Reveal.js includes with reveal.js, and to include the stereopticon theme as stereopticon/stereopticon.css. As an example, look at our demo source code.

Requirements

• The supported Reveal.js version is 4.5.0 ;

• For the theme to work correctly, the following reveal.js options must be set:

  center: false,
  display: 'flex',
  width: 1920,
  height: 1080,

• The option margin: 0 is not mandatory but can be used to remove the dark gray frame around slides ;

• If asciidoctor-revealjs is used, the supported version is 5.1.0.

Compilation

The theme is written in SCSS, and can be compiled into CSS using the setup that already exists for compiling the official Reveal.js themes.

Instructions:

• Clone this repository.

• Download the proper Reveal.js release and extract it as reveal.js.

• Copy the src/css folder of the stereopticon repository inside reveal.js, and say yes when asking to merge the folders.

• Go in the reveal.js folder and run: npm install && npm run build -- css-themes, which will produce reveal.js/css/theme/stereopticon.css.

• Now this reveal.js folder has a new theme called stereopticon which can be used as any other theme.