Mercurial > hg > Members > taiki > slides

comparison seminar/io2012slides/README.md @ 3:fea44bb81877 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
many change
author taiki
date Tue, 10 Dec 2013 15:31:33 +0900
parents
children
comparison
equal deleted inserted replaced
2:7f4128b2369a 3:fea44bb81877
1 <style>
2 @import "http://fonts.googleapis.com/css?family=Open Sans:regular,semibold,italic,italicsemibold|Inconsolata&amp;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!