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” ↩