mdpress 0.0.8 → 0.0.9

Sign up to get free protection for your applications and to get access to all the features.
Binary file
Binary file
@@ -1,102 +1,207 @@
1
- html { overflow: hidden; }
2
- body { font-family: 'Open Sans', sans-serif; line-height: .8; font-size: 45px; }
1
+ html {
2
+ overflow: hidden;
3
+ }
4
+
5
+ body {
6
+ font-family: 'Open Sans', sans-serif;
7
+ line-height: .8;
8
+ font-size: 45px;
9
+ }
3
10
 
4
11
  body {
12
+ min-height: 740px;
5
13
  background: -moz-radial-gradient(50% 50%, farthest-side, #fff, #efefef);
6
14
  background: -webkit-gradient(radial, 50% 50%, 250, 50% 50%, 750, from(#fff), to(#efefef));
7
- }
15
+ background: -ms-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
16
+ background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
17
+ background: radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
18
+ pointer-events: none; /* Fix Body Click */
19
+ }
8
20
 
9
21
  .step {
10
- width: 1100px;
11
- height: 700px;
22
+ width: 1060px;
23
+ padding: 40px 0;
24
+ -webkit-box-sizing: border-box;
25
+ -moz-box-sizing: border-box;
26
+ -ms-box-sizing: border-box;
27
+ -o-box-sizing: border-box;
28
+ box-sizing: border-box;
29
+ -webkit-transition: opacity 1s;
30
+ -moz-transition: opacity 1s;
31
+ -ms-transition: opacity 1s;
32
+ -o-transition: opacity 1s;
33
+ transition: opacity 1s;
34
+ }
35
+
36
+ .impress-enabled .step {
37
+ margin: 0;
38
+ opacity: 0.3;
39
+ -webkit-transition: opacity 1s;
40
+ -moz-transition: opacity 1s;
41
+ -ms-transition: opacity 1s;
42
+ -o-transition: opacity 1s;
43
+ transition: opacity 1s;
44
+ }
12
45
 
13
- -webkit-box-sizing: border-box;
14
- -moz-box-sizing: border-box;
15
- -ms-box-sizing: border-box;
16
- -o-box-sizing: border-box;
17
- box-sizing: border-box;
18
-
19
- -webkit-transition: opacity 1s;
20
- -moz-transition: opacity 1s;
21
- -ms-transition: opacity 1s;
22
- -o-transition: opacity 1s;
23
- transition: opacity 1s;
24
- text-shadow: rgba(0,0,0,.01) 0 0 1px; /* Chrome @font-face anti-aliasing fix */
46
+ .step:not(.active) {
47
+ opacity: 0.0;
25
48
  }
26
49
 
27
- .step:not(.active) { opacity: 0.0; }
50
+ .impress-enabled .step.active {
51
+ opacity: 1
52
+ }
28
53
 
29
54
  strong {
30
- font-weight: 800;
55
+ font-weight: 800;
56
+ font-weight: bold
31
57
  }
32
58
 
33
59
  em {
34
- font-style: italic;
60
+ font-style: italic;
35
61
  }
36
62
 
37
63
  h1, h2 {
38
- //font-family: 'Raleway', serif;
39
- font-weight: normal;
64
+ font-weight: normal;
40
65
  }
41
66
 
42
67
  h1 {
43
- font-size: 120px;
44
- margin: 20px 0;
45
- line-height: 130px;
68
+ font-size: 120px;
69
+ margin: 20px 0;
70
+ line-height: 130px;
46
71
  }
47
72
 
48
73
  h2 {
49
- font-weight: 300;
50
- letter-spacing: .1em;
51
- text-transform: uppercase;
52
- line-height: 72px;
53
- margin: 10px 0;
74
+ font-weight: 300;
75
+ letter-spacing: .1em;
76
+ text-transform: uppercase;
77
+ line-height: 72px;
78
+ margin: 10px 0;
54
79
  }
55
80
 
56
81
  .light {
57
- font-weight: 300;
58
- letter-spacing: .1em;
82
+ font-weight: 300;
83
+ letter-spacing: .1em;
59
84
  }
60
85
 
61
86
  blockquote {
62
- text-align: justify;
63
- font-weight: 300;
64
- font-style: italic;
65
- line-height: 1.4;
66
- margin: 20px 0;
67
- padding: 10px 0;
68
- border-top: 1px solid #aaa;
69
- border-bottom: 1px solid #aaa;
87
+ text-align: justify;
88
+ font-weight: 300;
89
+ font-style: italic;
90
+ line-height: 1.4;
91
+ margin: 20px 0;
92
+ padding: 10px 0;
93
+ border-top: 1px solid #aaa;
94
+ border-bottom: 1px solid #aaa;
95
+ width: 1060px;
96
+ }
97
+ table {
98
+ width:100%;
99
+ }
100
+ .present a {
101
+ pointer-events: auto; /* Enable Click on link */
70
102
  }
71
103
 
72
- a, a:hover, a:visited {
73
- text-decoration: none;
74
- font-style: normal;
75
- color: #666;
76
- cursor: pointer;
104
+ a {
105
+ pointer-events: none; /* Fix Body Click */
106
+ color: inherit;
107
+ text-decoration: none;
108
+ text-shadow: -1px -1px 2px rgba(100,100,100,0.9);
109
+ -webkit-transition: 0.5s;
110
+ -moz-transition: 0.5s;
111
+ -ms-transition: 0.5s;
112
+ -o-transition: 0.5s;
113
+ transition: 0.5s;
114
+ font-weight:bold;
77
115
  }
78
116
 
79
- a:hover { color: #333;}
117
+ a:hover {
118
+ color: #333;
119
+ text-shadow: -1px -1px 2px rgba(100,100,100,0.5);
120
+ }
80
121
 
81
122
  p {
82
- font-weight: 400;
83
- line-height: 60px;
123
+ font-weight: 400;
124
+ line-height: 60px;
125
+ text-align: center;
84
126
  }
85
127
 
86
- ol{
87
- margin: 20px 0 20px 70px;
128
+ ol {
129
+ margin: 20px 0 20px 70px;
88
130
  }
89
131
 
90
132
  ul {
91
- margin: 20px 0 20px 50px;
133
+ margin: 20px 0 20px 50px;
92
134
  }
93
135
 
94
-
95
136
  li {
96
- margin: 20px 0;
97
- line-height: 40px;
137
+ margin: 10px 0;
138
+ line-height: 50px;
139
+ list-style: none;
98
140
  }
99
141
 
100
- a {
142
+ td,th {
143
+ vertical-align: top;
144
+ line-height: 44px;
145
+ }
146
+
147
+ .fallback-message {
148
+ font-family: sans-serif;
149
+ line-height: 1.3;
150
+ width: 780px;
151
+ padding: 10px 10px 0;
152
+ margin: 20px auto;
153
+ border: 1px solid #E4C652;
154
+ border-radius: 10px;
155
+ background: #EEDC94;
156
+ }
101
157
 
158
+ .fallback-message p {
159
+ margin-bottom: 10px;
102
160
  }
161
+
162
+ .impress-supported .fallback-message {
163
+ display: none;
164
+ }
165
+
166
+ span,strong {
167
+ -webkit-transition: 0.5s;
168
+ -moz-transition: 0.5s;
169
+ -ms-transition: 0.5s;
170
+ -o-transition: 0.5s;
171
+ transition: 0.5s;
172
+ display: inline-block;
173
+ }
174
+
175
+ .present .positioning {
176
+ -webkit-transform: translateY(-10px);
177
+ -moz-transform: translateY(-10px);
178
+ -ms-transform: translateY(-10px);
179
+ -o-transform: translateY(-10px);
180
+ transform: translateY(-10px);
181
+ }
182
+
183
+ .present .rotating {
184
+ -webkit-transform: rotate(-10deg);
185
+ -moz-transform: rotate(-10deg);
186
+ -ms-transform: rotate(-10deg);
187
+ -o-transform: rotate(-10deg);
188
+ transform: rotate(-10deg);
189
+ -webkit-transition-delay: 0.25s;
190
+ -moz-transition-delay: 0.25s;
191
+ -ms-transition-delay: 0.25s;
192
+ -o-transition-delay: 0.25s;
193
+ transition-delay: 0.25s;
194
+ }
195
+
196
+ .present .scaling {
197
+ -webkit-transform: scale(0.7);
198
+ -moz-transform: scale(0.7);
199
+ -ms-transform: scale(0.7);
200
+ -o-transform: scale(0.7);
201
+ transform: scale(0.7);
202
+ -webkit-transition-delay: 0.5s;
203
+ -moz-transition-delay: 0.5s;
204
+ -ms-transition-delay: 0.5s;
205
+ -o-transition-delay: 0.5s;
206
+ transition-delay: 0.5s;
207
+ }
@@ -1,6 +1,6 @@
1
1
  /* the style used in impress.js's intro presentation */
2
2
 
3
- /* http://meyerweb.com/eric/tools/css/reset/
3
+ /* http://meyerweb.com/eric/tools/css/reset/
4
4
  v2.0 | 20110126
5
5
  License: none (public domain)
6
6
  */
@@ -14,8 +14,8 @@ b, u, i, center,
14
14
  dl, dt, dd, ol, ul, li,
15
15
  fieldset, form, label, legend,
16
16
  table, caption, tbody, tfoot, thead, tr, th, td,
17
- article, aside, canvas, details, embed,
18
- figure, figcaption, footer, header, hgroup,
17
+ article, aside, canvas, details, embed,
18
+ figure, figcaption, footer, header, hgroup,
19
19
  menu, nav, output, ruby, section, summary,
20
20
  time, mark, audio, video {
21
21
  margin: 0;
@@ -27,7 +27,7 @@ time, mark, audio, video {
27
27
  }
28
28
 
29
29
  /* HTML5 display-role reset for older browsers */
30
- article, aside, details, figcaption, figure,
30
+ article, aside, details, figcaption, figure,
31
31
  footer, header, hgroup, menu, nav, section {
32
32
  display: block;
33
33
  }
@@ -65,7 +65,7 @@ table {
65
65
 
66
66
  body {
67
67
  font-family: 'PT Sans', sans-serif;
68
-
68
+
69
69
  min-height: 740px;
70
70
 
71
71
  background: rgb(215, 215, 215);
@@ -88,7 +88,7 @@ a {
88
88
  -moz-border-radius: 10px;
89
89
  border-radius: 10px;
90
90
  background: #C9E7EA;
91
-
91
+
92
92
  -webkit-transition: 0.5s;
93
93
  -moz-transition: 0.5s;
94
94
  -ms-transition: 0.5s;
@@ -97,7 +97,7 @@ a {
97
97
  }
98
98
 
99
99
  a:hover {
100
- background: #86D6EA;
100
+ background: #86D6EA;
101
101
  text-shadow: -1px -1px 2px rgba(100,100,100,0.5);
102
102
  }
103
103
 
@@ -196,3 +196,23 @@ code.inline {
196
196
  padding: 5px 10px;
197
197
  margin: -5px 0 0 0;
198
198
  }
199
+ .fallback-message {
200
+ font-family: sans-serif;
201
+ line-height: 1.3;
202
+
203
+ width: 780px;
204
+ padding: 10px 10px 0;
205
+ margin: 20px auto;
206
+
207
+ border: 1px solid #E4C652;
208
+ border-radius: 10px;
209
+ background: #EEDC94;
210
+ }
211
+
212
+ .fallback-message p {
213
+ margin-bottom: 10px;
214
+ }
215
+
216
+ .impress-supported .fallback-message {
217
+ display: none;
218
+ }
@@ -34,6 +34,11 @@ class ImpressRenderer < Redcarpet::Render::HTML
34
34
  <html>
35
35
  <head>
36
36
  <link href="css/reset.css" rel="stylesheet" />
37
+ <meta charset="utf-8" />
38
+ <meta name="viewport" content="width=1024" />
39
+ <meta name="apple-mobile-web-app-capable" content="yes" />
40
+ <link rel="shortcut icon" href="css/favicon.png" />
41
+ <link rel="apple-touch-icon" href="css/apple-touch-icon.png" />
37
42
  <!-- Code Prettifier: -->
38
43
  <link href="css/prettify.css" type="text/css" rel="stylesheet" />
39
44
  <script type="text/javascript" src="js/prettify.js"></script>
@@ -42,6 +47,10 @@ class ImpressRenderer < Redcarpet::Render::HTML
42
47
  </head>
43
48
 
44
49
  <body onload="prettyPrint()">
50
+ <div class="fallback-message">
51
+ <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
52
+ <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
53
+ </div>
45
54
  <div id="impress">
46
55
  <div class='step' #{@@attrs[0]}>
47
56
  }
@@ -51,7 +60,7 @@ class ImpressRenderer < Redcarpet::Render::HTML
51
60
  %{
52
61
  </div>
53
62
  <script src="js/impress.js"></script>
54
- <script>impress();</script>
63
+ <script>impress().init();</script>
55
64
  </body>
56
65
  </html>
57
66
  }