stereopticon

Hello There!

Description

stereopticon is a reveal.js theme slightly inspired by typical LaTeX/Beamer themes.

Some characteristics

• Titles of regular slides are rendered at the top.
• Left-aligned text.
• Fancy fonts:
• Yanone Kaffeesatz for titles,
• Open Sans for regular text.
• Many extra "helper" CSS classes (for columns, blocks, etc.).

Title Page

The elements of a title page can be styled using the following provided CSS classes:

• title, as a class for the reveal/js section (dark background etc.),
• subtitle for the subtitle element (header font, etc.),
• authors for the authors block, with inside:
  • author to declare an author block,
  • name to name an author inside an author block,
  • institution to give the institution inside an author block,
• speaker to tag an author's name as the speaker (dashed underline).

Fragments

Hit the next arrow...

... to step through ...

... a fragmented slide.

Pretty Code

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
					

Code syntax highlighting courtesy of highlight.js.

Longer code snippet

public static void stringMatch(String one, String two) {
    boolean match = false;
    if (one.charAt(0) == two.charAt(0)) {
        System.out.println(match = true);   // returns true
    } else {
        System.out.println(match);       // returns false
    }
    for (int i = 0; i < two.length(); i++) {  
        int temp = i;
        for (int x = 0; x < one.length(); x++) {
            if (two.charAt(temp) == one.charAt(x)) {
                System.out.println(match = true);    //returns true
                i = two.length();
            }
        }
    }
    int num1 = one.length() - 1;
    int num2 = two.length() - 1;
    if (one.charAt(num1) == two.charAt(num2)) {
        System.out.println(match = true);
    } else {
        System.out.println(match = false);
    }
}

Normal List

• No order here
• Or here
• Or here
• Or here, but a sublist:
• with
• different things

Ordered List

1. One is smaller than...
2. Two is smaller than...
3. Three!

Tabular Tables

Block quote

A block quote can be declared with blockquote.

For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.

Columns

• Some utility CSS classes are provided, such as col-X (with X a number between 1 and 12) to declare a column that uses X/12th of the available width.

• Columns must be declared within a container that has the columns class.

• Example with three columns (each a col-4):

More columns

Example with an image:

• On the right is an old stereopticon.
• It is a projector from the mid 19th century.
• It uses two lenses to be able to transition smoothly from one image to another.

Vertical spacing

The CSS class vspace-X (with X a number between 1 and 200) can be applied on an element to add a blank vertical space of X pixels before the element.

It can also be applied to an empty div.

As an example, this paragraph has a vspace-150!

Blocks

The CSS class block can be used to put things in blocks.

References (1)

The CSS class references can be used to put references at the bottom of a slide. Each reference must have the reference class.

However there is no clean way yet to cite a reference in the body of the slide.

References (2)

The identifiers of references keep incrementing accross slides.

Subtitles

A slide can have a subtitle by adding an HTML element with the subtitle CSS class right after the h2 block.