This repository has been archived by the owner on Feb 19, 2022. It is now read-only.
/
index.js
86 lines (77 loc) · 2.48 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
// Import React
import React from "react";
// Import Spectacle Core tags
import {
BlockQuote,
Cite,
Deck,
Heading,
ListItem,
List,
Quote,
Slide,
Text
} from "spectacle";
// Import image preloader util
import preloader from "spectacle/lib/utils/preloader";
// Import theme
import createTheme from "spectacle/lib/themes/default";
// Require CSS
require("normalize.css");
require("spectacle/lib/themes/default/index.css");
const images = {
city: require("../assets/city.jpg"),
kat: require("../assets/kat.png"),
logo: require("../assets/formidable-logo.svg"),
markdown: require("../assets/markdown.png")
};
preloader(images);
const theme = createTheme({
primary: "white",
secondary: "#1F2022",
tertiary: "#03A9FC",
quartenary: "#CECECE"
}, {
primary: "Montserrat",
secondary: "Helvetica"
});
export default class Presentation extends React.Component {
render() {
return (
<Deck transition={["zoom", "slide"]} transitionDuration={500} theme={theme}>
<Slide transition={["zoom"]} bgColor="primary">
<Heading size={1} fit caps lineHeight={1} textColor="secondary">
Spectacle Boilerplate
</Heading>
<Text margin="10px 0 0" textColor="tertiary" size={1} fit bold>
open the presentation/index.js file to get started
</Text>
</Slide>
<Slide transition={["fade"]} bgColor="tertiary">
<Heading size={6} textColor="primary" caps>Typography</Heading>
<Heading size={1} textColor="secondary">Heading 1</Heading>
<Heading size={2} textColor="secondary">Heading 2</Heading>
<Heading size={3} textColor="secondary">Heading 3</Heading>
<Heading size={4} textColor="secondary">Heading 4</Heading>
<Heading size={5} textColor="secondary">Heading 5</Heading>
<Text size={6} textColor="secondary">Standard text</Text>
</Slide>
<Slide transition={["fade"]} bgColor="primary" textColor="tertiary">
<Heading size={6} textColor="secondary" caps>Standard List</Heading>
<List>
<ListItem>Item 1</ListItem>
<ListItem>Item 2</ListItem>
<ListItem>Item 3</ListItem>
<ListItem>Item 4</ListItem>
</List>
</Slide>
<Slide transition={["fade"]} bgColor="secondary" textColor="primary">
<BlockQuote>
<Quote>Example Quote</Quote>
<Cite>Author</Cite>
</BlockQuote>
</Slide>
</Deck>
);
}
}