summaryrefslogtreecommitdiff
path: root/slides/intermediaire/README.md
diff options
context:
space:
mode:
Diffstat (limited to 'slides/intermediaire/README.md')
-rw-r--r--slides/intermediaire/README.md130
1 files changed, 130 insertions, 0 deletions
diff --git a/slides/intermediaire/README.md b/slides/intermediaire/README.md
new file mode 100644
index 0000000..1ba5391
--- /dev/null
+++ b/slides/intermediaire/README.md
@@ -0,0 +1,130 @@
1<style>
2@import "http://fonts.googleapis.com/css?family=Open Sans:regular,semibold,italic,italicsemibold|Inconsolata&amp;v2";
3body {
4 font-family: "Open Sans";
5 margin: 6em 2em 2em 2em;
6}
7body: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}
19h1, h2, h3, h4 {
20 font-weight: 600;
21}
22h1 {
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}
35h1 img {
36 height: 30px;
37 vertical-align: middle;
38 margin-bottom: 8px;
39}
40a { color: navy; }
41pre {
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
53Much of the deck is customized by changing the settings in [`slide_config.js`](slide_config.js).
54Some of the customizations include the title, Analytics tracking ID, speaker
55information (name, social urls, blog), web fonts to load, themes, and other
56general behavior.
57
58### Customizing the `#io12` hash
59
60The bottom of the slides include `#io12` by default. If you'd like to change
61this, please update the variable `$social-tags: '#io12';` in
62[`/theme/scss/default.scss`](theme/scss/default.scss).
63
64See 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
69SCSS/SASS into CSS. We chose SCSS for the new slide deck for maintainability,
70easier browser compatibility, and because...it's the future!
71
72That said, if not comfortable working with SCSS or don't want to learn something
73new, 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.
75However, our recommendation is to use Compass. It's super easy to install and use.
76
77### Installing Compass and making changes
78
79First, install compass:
80
81 sudo gem update --system
82 sudo gem install compass
83
84Next, you'll want to watch for changes to the exiting .scss files in [`/theme/scss`](theme/scss)
85and any new one you add:
86
87 $ cd io-2012-slides
88 $ compass watch
89
90This command automatically recompiles the .scss file when you make a change.
91Its corresponding .css file is output to [`/theme/css`](theme/css). Slick.
92
93By 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,
95run 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
103The slides can be run locally from `file://` making development easy :)
104
105### Running from a web server
106
107If at some point you should need a web server, use [`serve.sh`](serve.sh). It will
108launch 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
113You can also specify a custom port:
114
115 $ ./serve.sh 8080
116
117### Presenter mode
118
119The slides contain a presenter mode feature (beta) to view + control the slides
120from a popup window.
121
122To enable presenter mode, add `presentme=true` to the URL: [http://localhost:8000/template.html?presentme=true](http://localhost:8000/template.html?presentme=true)
123
124To disable presenter mode, hit [http://localhost:8000/template.html?presentme=false](http://localhost:8000/template.html?presentme=false)
125
126Presenter mode is sticky, so refreshing the page will persist your settings.
127
128---
129
130That's all she wrote!