Mercurial > hg > Members > taiki > slides
comparison seminar/io2012slides/README.md @ 3:fea44bb81877 default tip
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&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! |