Skip to content

Commit 8be7817

Browse files
ilbonzoilbonzo
committed
Merge pull request #4 from francescolaffi/template-io-2012
io2012 template + mod embed vecchio template
2 parents 96d4be7 + e92b5dd commit 8be7817

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+5499
-0
lines changed

‎.gitignore

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Compiled source #
2+
###################
3+
*.com
4+
*.class
5+
*.dll
6+
*.exe
7+
*.o
8+
*.so
9+
*.pyc
10+
*.min.css
11+
#*.min.js
12+
.sass-cache/*
13+
14+
# Packages #
15+
############
16+
# it's better to unpack these files and commit the raw source
17+
# git has its own built in compression methods
18+
*.7z
19+
*.dmg
20+
*.gz
21+
*.iso
22+
*.rar
23+
*.tar
24+
*.zip
25+
26+
# Logs and databases #
27+
######################
28+
*.log
29+
*.sql
30+
*.sqlite
31+
32+
# OS generated files #
33+
######################
34+
.DS_Store*
35+
ehthumbs.db
36+
Icon?
37+
Thumbs.db
38+
*~

‎Template/GoogleHTML5/pugbo/index.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,51 @@
2323
<script>hljs.initHighlightingOnLoad();</script>
2424
</head>
2525

26+
<script>
27+
var initElasticity = function() {
28+
var slidesEl = document.getElementsByClassName('slides')[0];
29+
30+
var margin = 20;
31+
32+
if (slidesEl.className.match(/\blayout(-faux)?-widescreen\b/)) {
33+
var minWidth = 1100 + 2*margin;
34+
} else {
35+
var minWidth = 900 + 2*margin;
36+
}
37+
38+
var minHeight = 700 + 2*margin;
39+
40+
slidesEl.style.width = minWidth+"px";
41+
slidesEl.style.height = minHeight+"px";
42+
slidesEl.style.marginLeft = -minWidth/2 +"px";
43+
slidesEl.style.marginTop = -minHeight/2 +"px";
44+
slidesEl.style.left = '50%';
45+
slidesEl.style.top = '50%';
46+
47+
var resize = function() {
48+
if (window.innerWidth < minWidth || window.innerHeight < minHeight) {
49+
var sx = window.innerWidth / minWidth;
50+
var sy = window.innerHeight / minHeight;
51+
var transform = "scale(" + Math.min(sx, sy) + ")";
52+
} else {
53+
var transform = "none";
54+
}
55+
56+
slidesEl.style.MozTransform = transform;
57+
slidesEl.style.WebkitTransform = transform;
58+
slidesEl.style.OTransform = transform;
59+
slidesEl.style.msTransform = transform;
60+
slidesEl.style.transform = transform;
61+
}
62+
63+
resize();
64+
window.onresize = resize;
65+
};
66+
67+
window.addEventListener("load", initElasticity);
68+
69+
</script>
70+
2671
<style>
2772
.pugbo.slides.template-default > article:not(.nobackground):not(.biglogo) {
2873
background-image: url(images/logo-pug-th.png), url(images/logo_grusp.png);

‎Template/elastic-google-io-slides/README.html

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
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+
<h2>Configuring the slides</h2>
52+
<p>Much of the deck is customized by changing the settings in <a href="slide_config.js"><code>slide_config.js</code></a>.
53+
Some of the customizations include the title, Analytics tracking ID, speaker
54+
information (name, social urls, blog), web fonts to load, themes, and other
55+
general behavior.</p>
56+
<h3>Customizing the <code>#io12</code> hash</h3>
57+
<p>The bottom of the slides include <code>#io12</code> by default. If you'd like to change
58+
this, please update the variable <code>$social-tags: '#io12';</code> in
59+
<a href="theme/scss/default.scss"><code>/theme/scss/default.scss</code></a>.</p>
60+
<p>See the next section on "Editing CSS" before you go editing things.</p>
61+
<h2>Editing CSS</h2>
62+
<p><a href="http://compass-style.org/install/">Compass</a> is a CSS preprocessor used to compile
63+
SCSS/SASS into CSS. We chose SCSS for the new slide deck for maintainability,
64+
easier browser compatibility, and because...it's the future!</p>
65+
<p>That said, if not comfortable working with SCSS or don't want to learn something
66+
new, not a problem. The generated .css files can already be found in
67+
(see <a href="theme/css"><code>/theme/css</code></a>). You can just edit those and bypass SCSS altogether.
68+
However, our recommendation is to use Compass. It's super easy to install and use.</p>
69+
<h3>Installing Compass and making changes</h3>
70+
<p>First, install compass:</p>
71+
<pre><code>sudo gem update --system
72+
sudo gem install compass
73+
</code></pre>
74+
<p>Next, you'll want to watch for changes to the exiting .scss files in <a href="theme/scss"><code>/theme/scss</code></a>
75+
and any new one you add:</p>
76+
<pre><code>$ cd io-2012-slides
77+
$ compass watch
78+
</code></pre>
79+
<p>This command automatically recompiles the .scss file when you make a change.
80+
Its corresponding .css file is output to <a href="theme/css"><code>/theme/css</code></a>. Slick.</p>
81+
<p>By default, <a href="config.rb"><code>config.rb</code></a> in the main project folder outputs minified
82+
.css. It's a best practice after all! However, if you want unminified files,
83+
run watch with the style output flag:</p>
84+
<pre><code>compass watch -s expanded
85+
</code></pre>
86+
<p><em>Note:</em> You should not need to edit <a href="theme/scss/_base.scss"><code>_base.scss</code></a>.</p>
87+
<h2>Running the slides</h2>
88+
<p>The slides can be run locally from <code>file://</code> making development easy :)</p>
89+
<h3>Running from a web server</h3>
90+
<p>If at some point you should need a web server, use <a href="serve.sh"><code>serve.sh</code></a>. It will
91+
launch a simple one and point your default browser to <a href="http://localhost:8000/template.html"><code>http://localhost:8000/template.html</code></a>:</p>
92+
<pre><code>$ cd io-2012-slides
93+
$ ./serve.sh
94+
</code></pre>
95+
<p>You can also specify a custom port:</p>
96+
<pre><code>$ ./serve.sh 8080
97+
</code></pre>
98+
<h3>Presenter mode</h3>
99+
<p>The slides contain a presenter mode feature (beta) to view + control the slides
100+
from a popup window.</p>
101+
<p>To enable presenter mode, add <code>presentme=true</code> to the URL: <a href="http://localhost:8000/template.html?presentme=true">http://localhost:8000/template.html?presentme=true</a></p>
102+
<p>To disable presenter mode, hit <a href="http://localhost:8000/template.html?presentme=false">http://localhost:8000/template.html?presentme=false</a></p>
103+
<p>Presenter mode is sticky, so refreshing the page will persist your settings.</p>
104+
<hr />
105+
<p>That's all she wrote!</p>

‎Template/elastic-google-io-slides/README.md

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
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!

‎Template/elastic-google-io-slides/app.yaml

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
application: my-io-talk
2+
version: 1
3+
runtime: python27
4+
api_version: 1
5+
threadsafe: yes
6+
7+
handlers:
8+
- url: /
9+
static_files: template.html
10+
upload: template\.html
11+
12+
- url: /slide_config\.js
13+
static_files: slide_config.js
14+
upload: slide_config\.js
15+
16+
- url: /js
17+
static_dir: js
18+
19+
- url: /theme
20+
static_dir: theme
21+
22+
- url: /images
23+
static_dir: images

‎Template/elastic-google-io-slides/config.rb

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Require any additional compass plugins here.
2+
3+
# Set this to the root of your project when deployed:
4+
http_path = "/"
5+
css_dir = "theme/css"
6+
sass_dir = "theme/scss"
7+
images_dir = "images"
8+
javascripts_dir = "js"
9+
10+
# You can select your preferred output style here (can be overridden via the command line):
11+
output_style = :compressed #:expanded or :nested or :compact or :compressed
12+
13+
# To enable relative paths to assets via compass helper functions. Uncomment:
14+
# relative_assets = true
15+
16+
# To disable debugging comments that display the original location of your selectors. Uncomment:
17+
# line_comments = false
18+
19+
20+
# If you prefer the indented syntax, you might want to regenerate this
21+
# project again passing --syntax sass, or you can uncomment this:
22+
# preferred_syntax = :sass
23+
# and then run:
24+
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

‎Template/elastic-google-io-slides/images/barchart.png

17.2 KB
Loading

‎Template/elastic-google-io-slides/images/chart.png

92.5 KB
Loading

‎Template/elastic-google-io-slides/images/google_developers_logo_white.png

6.94 KB
Loading

‎Template/elastic-google-io-slides/images/logo-pug-128.png

21.5 KB
Loading

0 commit comments

Comments
 (0)