Minimalistic slides
Because I can't do something without doing something else first (Carl Sagan1 said something about that).
I first have to write presentation software before I can create slides.
The key tricks here are:
- using flex box to put slides side-by-side
- using scroll snap to snap a slide
- the keyboard navigation (using cursor keys ◀ and ▶) works because of the
tabindex
andautofocus
attributes
AFAIK the slide speed cannot be set and even worse: it differs from browser to browser (slow in Chrome, fast in Firefox).
Steve Job's slides are bloated
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Minimalistic slides</title> <link href="minimalistic-slides.css" rel="stylesheet"> </head> <body tabindex="0" autofocus> <section> <p>Use <kbd>▶</kbd> for the next slide</p> </section> <section> <p>Use <kbd>◀</kbd> for the previous slide</p> </section> <!-- add more slides here --> </body> </html>
* { box-sizing: border-box } html, body { height: 100%; overflow: hidden } body { background: #ce5127; color: white; display: flex; font: 9vmin monospace; outline: none; overflow: auto hidden; scroll-snap-type: x mandatory } body > section { align-items: center; display: flex; flex: 0 0 100%; justify-content: center; scroll-snap-align: center }
-
“If you wish to make apple pie from scratch, you must first create the universe”↩