|
3
|
1 <style>
|
|
|
2 @import "http://fonts.googleapis.com/css?family=Open Sans:regular,semibold,italic,italicsemibold|Inconsolata&v2";
|
|
|
3 body {
|
|
|
4 font-family: "Open Sans";
|
|
|
5 margin: 6em 2em 2em 2em;
|
|
|
6 }
|
|
|
7 body:before {
|
|
|
8 content: '';
|
|
|
9 position: fixed;
|
|
|
10 top: 2%;
|
|
|
11 right: 3%;
|
|
|
12 height: 100px;
|
|
|
13 width: 100px;
|
|
|
14 background: url(http://www.html5rocks.com/static/images/identity/HTML5_Badge_128.png) no-repeat 50% 50%;
|
|
|
15 background-size: contain;
|
|
|
16 z-index: 10;
|
|
|
17 opacity: 0.1;
|
|
|
18 }
|
|
|
19 h1, h2, h3, h4 {
|
|
|
20 font-weight: 600;
|
|
|
21 }
|
|
|
22 h1 {
|
|
|
23 position: fixed;
|
|
|
24 background: -webkit-linear-gradient(top, white 65%, rgba(255,255,255,0));
|
|
|
25 background: -moz-linear-gradient(top, white 65%, rgba(255,255,255,0));
|
|
|
26 background: -ms-linear-gradient(top, white 65%, rgba(255,255,255,0));
|
|
|
27 background: -o-linear-gradient(top, white 65%, rgba(255,255,255,0));
|
|
|
28 width: 100%;
|
|
|
29 height: 80px;
|
|
|
30 padding: 10px 10px 10px 1em;
|
|
|
31 left: 0;
|
|
|
32 top: 0;
|
|
|
33 margin: 0;
|
|
|
34 }
|
|
|
35 h1 img {
|
|
|
36 height: 30px;
|
|
|
37 vertical-align: middle;
|
|
|
38 margin-bottom: 8px;
|
|
|
39 }
|
|
|
40 a { color: navy; }
|
|
|
41 pre {
|
|
|
42 background: #eee;
|
|
|
43 margin-left: 2em;
|
|
|
44 padding: 5px;
|
|
|
45 border-left: 3px solid #ccc;
|
|
|
46 }
|
|
|
47 </style>
|
|
|
48
|
|
|
49 <h1><img src="images/io2012_logo.png"> HTML5 Slide Template</h1>
|
|
|
50
|
|
|
51 ## Configuring the slides
|
|
|
52
|
|
|
53 Much of the deck is customized by changing the settings in [`slide_config.js`](slide_config.js).
|
|
|
54 Some of the customizations include the title, Analytics tracking ID, speaker
|
|
|
55 information (name, social urls, blog), web fonts to load, themes, and other
|
|
|
56 general behavior.
|
|
|
57
|
|
|
58 ### Customizing the `#io12` hash
|
|
|
59
|
|
|
60 The bottom of the slides include `#io12` by default. If you'd like to change
|
|
|
61 this, please update the variable `$social-tags: '#io12';` in
|
|
|
62 [`/theme/scss/default.scss`](theme/scss/default.scss).
|
|
|
63
|
|
|
64 See the next section on "Editing CSS" before you go editing things.
|
|
|
65
|
|
|
66 ## Editing CSS
|
|
|
67
|
|
|
68 [Compass](http://compass-style.org/install/) is a CSS preprocessor used to compile
|
|
|
69 SCSS/SASS into CSS. We chose SCSS for the new slide deck for maintainability,
|
|
|
70 easier browser compatibility, and because...it's the future!
|
|
|
71
|
|
|
72 That said, if not comfortable working with SCSS or don't want to learn something
|
|
|
73 new, not a problem. The generated .css files can already be found in
|
|
|
74 (see [`/theme/css`](theme/css)). You can just edit those and bypass SCSS altogether.
|
|
|
75 However, our recommendation is to use Compass. It's super easy to install and use.
|
|
|
76
|
|
|
77 ### Installing Compass and making changes
|
|
|
78
|
|
|
79 First, install compass:
|
|
|
80
|
|
|
81 sudo gem update --system
|
|
|
82 sudo gem install compass
|
|
|
83
|
|
|
84 Next, you'll want to watch for changes to the exiting .scss files in [`/theme/scss`](theme/scss)
|
|
|
85 and any new one you add:
|
|
|
86
|
|
|
87 $ cd io-2012-slides
|
|
|
88 $ compass watch
|
|
|
89
|
|
|
90 This command automatically recompiles the .scss file when you make a change.
|
|
|
91 Its corresponding .css file is output to [`/theme/css`](theme/css). Slick.
|
|
|
92
|
|
|
93 By default, [`config.rb`](config.rb) in the main project folder outputs minified
|
|
|
94 .css. It's a best practice after all! However, if you want unminified files,
|
|
|
95 run watch with the style output flag:
|
|
|
96
|
|
|
97 compass watch -s expanded
|
|
|
98
|
|
|
99 *Note:* You should not need to edit [`_base.scss`](theme/scss/_base.scss).
|
|
|
100
|
|
|
101 ## Running the slides
|
|
|
102
|
|
|
103 The slides can be run locally from `file://` making development easy :)
|
|
|
104
|
|
|
105 ### Running from a web server
|
|
|
106
|
|
|
107 If at some point you should need a web server, use [`serve.sh`](serve.sh). It will
|
|
|
108 launch a simple one and point your default browser to [`http://localhost:8000/template.html`](http://localhost:8000/template.html):
|
|
|
109
|
|
|
110 $ cd io-2012-slides
|
|
|
111 $ ./serve.sh
|
|
|
112
|
|
|
113 You can also specify a custom port:
|
|
|
114
|
|
|
115 $ ./serve.sh 8080
|
|
|
116
|
|
|
117 ### Presenter mode
|
|
|
118
|
|
|
119 The slides contain a presenter mode feature (beta) to view + control the slides
|
|
|
120 from a popup window.
|
|
|
121
|
|
|
122 To enable presenter mode, add `presentme=true` to the URL: [http://localhost:8000/template.html?presentme=true](http://localhost:8000/template.html?presentme=true)
|
|
|
123
|
|
|
124 To disable presenter mode, hit [http://localhost:8000/template.html?presentme=false](http://localhost:8000/template.html?presentme=false)
|
|
|
125
|
|
|
126 Presenter mode is sticky, so refreshing the page will persist your settings.
|
|
|
127
|
|
|
128 ---
|
|
|
129
|
|
|
130 That's all she wrote!
|
