Skip to content

Commit da7a27d

Browse files
bartazbartaz
committed
impressive demo content added
1 parent 3a67355 commit da7a27d

File tree

3 files changed

+314
-39
lines changed

3 files changed

+314
-39
lines changed

‎css/style.css‎

Lines changed: 268 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -63,50 +63,304 @@ body {
6363
-webkit-font-smoothing: antialiased;
6464
}
6565

66+
b, strong { font-weight: bold }
67+
68+
a {
69+
color: inherit;
70+
text-decoration: none;
71+
padding: 0 0.1em;
72+
background: rgba(255,255,255,0.5);
73+
text-shadow: -1px -1px 2px rgba(100,100,100,0.9);
74+
border-radius: 0.2em;
75+
76+
-webkit-transition: 0.5s;
77+
-moz-transition: 0.5s;
78+
-ms-transition: 0.5s;
79+
-o-transition: 0.5s;
80+
transition: 0.5s;
81+
}
82+
83+
a:hover {
84+
background: rgba(255,255,255,1);
85+
text-shadow: -1px -1px 2px rgba(100,100,100,0.5);
86+
}
87+
88+
/* COMMON STEP STYLES */
6689

6790
.step {
6891
width: 900px;
69-
padding: 40px 60px;
92+
padding: 40px;
7093

7194
-webkit-box-sizing: border-box;
7295
-moz-box-sizing: border-box;
96+
-ms-box-sizing: border-box;
7397
-o-box-sizing: border-box;
7498
box-sizing: border-box;
7599

76-
font-family: 'Crimson Text', georgia, times, serif;
77-
font-size: 32px;
78-
line-height: 42px;
100+
font-family: 'PT Serif', georgia, serif;
101+
102+
font-size: 48px;
103+
line-height: 1.5;
79104
}
80105

81-
b, strong { font-weight: bold }
106+
/* fade out inactive slides */
82107

83-
a { color: inherit; }
108+
.step {
109+
-webkit-transition: opacity 1s;
110+
-moz-transition: opacity 1s;
111+
-ms-transition: opacity 1s;
112+
-o-transition: opacity 1s;
113+
transition: opacity 1s;
114+
}
84115

116+
.step:not(.active) {
117+
opacity: 0.3;
118+
}
85119

86-
/* step specific styles */
120+
/* STEP SPECIFIC STYLES */
87121

88-
#title { padding: 0; }
122+
/* impress.js title */
89123

90-
#title .try {
124+
#title {
125+
padding: 0;
126+
}
91127

128+
#title .try {
92129
font-size: 64px;
93-
line-height: 1.3;
94130
position: absolute;
95131
top: -0.5em;
96132
left: 1.5em;
133+
134+
-webkit-transform: translateZ(20px);
135+
-moz-transform: translateZ(20px);
136+
-ms-transform: translateZ(20px);
137+
-o-transform: translateZ(20px);
138+
transform: translateZ(20px);
97139
}
98140

99141
#title h1 {
100142
font-size: 190px;
143+
144+
-webkit-transform: translateZ(50px);
145+
-moz-transform: translateZ(50px);
146+
-ms-transform: translateZ(50px);
147+
-o-transform: translateZ(50px);
148+
transform: translateZ(50px);
149+
}
150+
151+
#title .footnote {
152+
font-size: 32px;
153+
}
154+
155+
/* big thoughts */
156+
157+
#big {
158+
width: 600px;
159+
text-align: center;
160+
font-size: 60px;
161+
line-height: 1;
162+
}
163+
164+
#big b {
165+
display: block;
166+
font-size: 250px;
101167
line-height: 250px;
102168
}
103169

104-
#its { font-size: 48px; line-height: 62px; }
170+
#big .thoughts {
171+
font-size: 90px;
172+
line-height: 150px;
173+
}
174+
175+
/* tiny ideas */
176+
177+
#tiny {
178+
width: 500px;
179+
text-align: center;
180+
}
181+
182+
#ing {
183+
width: 500px;
184+
}
185+
186+
#ing b {
187+
display: inline-block;
188+
-webkit-transition: 0.5s;
189+
-moz-transition: 0.5s;
190+
-ms-transition: 0.5s;
191+
-o-transition: 0.5s;
192+
transition: 0.5s;
193+
}
194+
195+
#ing.active .positioning {
196+
-webkit-transform: translateY(-10px);
197+
-moz-transform: translateY(-10px);
198+
-ms-transform: translateY(-10px);
199+
-o-transform: translateY(-10px);
200+
transform: translateY(-10px);
201+
202+
-webkit-transition-delay: 1s;
203+
-moz-transition-delay: 1s;
204+
-ms-transition-delay: 1s;
205+
-o-transition-delay: 1s;
206+
transition-delay: 1s;
207+
}
208+
209+
#ing.active .rotating {
210+
-webkit-transform: rotate(-10deg);
211+
-moz-transform: rotate(-10deg);
212+
-ms-transform: rotate(-10deg);
213+
-o-transform: rotate(-10deg);
214+
transform: rotate(-10deg);
215+
216+
-webkit-transition-delay: 1.5s;
217+
-moz-transition-delay: 1.5s;
218+
-ms-transition-delay: 1.5s;
219+
-o-transition-delay: 1.5s;
220+
transition-delay: 1.5s;
221+
}
222+
223+
#ing.active .scaling {
224+
-webkit-transform: scale(0.7);
225+
-moz-transform: scale(0.7);
226+
-ms-transform: scale(0.7);
227+
-o-transform: scale(0.7);
228+
transform: scale(0.7);
229+
230+
-webkit-transition-delay: 2s;
231+
-moz-transition-delay: 2s;
232+
-ms-transition-delay: 2s;
233+
-o-transition-delay: 2s;
234+
transition-delay: 2s;
235+
236+
}
237+
238+
/* imagination */
239+
240+
#imagination {
241+
width: 600px;
242+
}
243+
244+
#imagination .imagination {
245+
font-size: 78px;
246+
}
247+
248+
/* use the source, Luke */
249+
250+
#source {
251+
width: 700px;
252+
padding-bottom: 300px;
253+
254+
/* Yoda Icon :: Pixel Art from Star Wars http://www.pixeljoint.com/pixelart/1423.htm */
255+
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAEYCAMAAACwUBm+AAAAAXNSR0IArs4c6QAAAKtQTFRFsAAAvbWSLUUrLEQqY1s8UYJMqJ1vNTEgOiIdIzYhjIFVLhsXZ6lgSEIsP2U8JhcCVzMsSXZEgXdOO145XJdWOl03LzAYMk4vSXNExr+hwcuxRTs1Qmk+RW9Am49eFRANQz4pUoNMQWc+OSMDTz0wLBsCNVMxa2NBOyUDUoNNSnlEWo9VRGxAVzYFl6tXCggHbLNmMUIcHhwTXkk5f3VNRT8wUT8xAAAACQocRBWFFwAAAAF0Uk5TAEDm2GYAAAPCSURBVHja7d3JctNAFIZRMwRCCGEmzPM8z/D+T8bu/ptbXXJFdij5fMt2Wuo+2UgqxVmtttq5WVotLzBgwIABAwYMGDCn0qVqbo69psPqVpWx+1XG5iaavF8wYMCAAQMGDBgwi4DJ6Y6qkxB1HNlcN3a92gbR5P2CAQMGDBgwYMCAWSxMlrU+UY5yu2l9okfV4bAxUVbf7TJnAwMGDBgwYMCAAbMLMHeqbGR82Zy+VR1Ht81nVca6R+UdTLaU24Ruzd3qM/e4yjnAgAEDBgwYMGDA7AJMd1l/3NRdVGcj3eX/2WEhCmDGxnM7yqygu8XIPjJj8iN/MGDAgAEDBgwYMAuDGb8q0RGlLCHLv1t9qDKWn3vdNHVuEI6HPaxO9Jo3GDBgwIABAwYMmIXBdC9ShGgMk+XnkXUeuGcsP/e1+lhNnZsL/G5Vs3OAAQMGDBgwYMCAWSxMR3SzOmraG5atdy9wZKzb+vg16qyqe2FltbnAgAEDBgwYMGDALAxmTJSuN3WA76rnVca6GTnemGN1WoEBAwYMGDBgwIBZGMxUomy4+xO899V4LAg5Xnc2MGDAgAEDBgwYMGA218Wq+2K1LDqvY9xZu8zN8fICdM6btYABAwYMGDBgwIABMzfH0+pGU5afze2tXebmeAfVz+p8BQYMGDBgwIABAwbMPBzZ+oWmfJrln1273FhkbHzee9WWbw7AgAEDBgwYMGDALAKm43hcdctKgblcPamOhuXnXlY5Xs6bsW4FGyQCAwYMGDBgwIABswiYMceZKgvMo+h8mrHLTdn676rj+FEFoTtHd8MwOxEYMGDAgAEDBgyYRcBM5UhXqiymW3R3c9ARhWO/OmjqfjVZy+xEYMCAAQMGDBgwYBYG073OnCV0RFNhMhaOa9WfKmOB6XjHMN1tQmaAAQMGDBgwYMCA2VWY7vXjz1U4croAzgPztwIDBgwYMGDAgAEDZhswh035NBw59Dww3RgYMGDAgAEDBgwYMJuD6f4tXT7NUqfCdBvZLkxXdgQGDBgwYMCAAQNmt2DGj8WzwAfV/w7T/aq7mxwwYMCAAQMGDBgwuwqTOo7uTwTngflSzQ3TdaJvAwEDBgwYMGDAgAED5gSvgbyo5oHZ4Pc+gwEDBgwYMGDAgAEzhOm+5G0qTGaAAQMGDBgwYMCAAXNaMOcnls3tNwWm+zRzp54NDBgwYMCAAQMGDJh5YNL36k1TLuGvVq+qnKMbS5n7tulT9asCAwYMGDBgwIABA2ZumKuztLnjgQEDBgwYMGDAgNl5mH/4/ltKA6vBNAAAAABJRU5ErkJggg==);
256+
background-position: bottom right;
257+
background-repeat: no-repeat;
258+
}
259+
260+
#source q {
261+
font-size: 60px;
262+
}
263+
264+
/* it's in 3D */
265+
266+
#its-in-3d span,
267+
#its-in-3d b {
268+
display: inline-block;
269+
-webkit-transform: translateZ(40px);
270+
-moz-transform: translateZ(40px);
271+
-ms-transform: translateZ(40px);
272+
-o-transform: translateZ(40px);
273+
transform: translateZ(40px);
274+
275+
-webkit-transition: 0.5s;
276+
-moz-transition: 0.5s;
277+
-ms-transition: 0.5s;
278+
-o-transition: 0.5s;
279+
transition: 0.5s;
280+
}
281+
282+
#its-in-3d .have {
283+
-webkit-transform: translateZ(-40px);
284+
-moz-transform: translateZ(-40px);
285+
-ms-transform: translateZ(-40px);
286+
-o-transform: translateZ(-40px);
287+
transform: translateZ(-40px);
288+
}
289+
290+
#its-in-3d .you {
291+
-webkit-transform: translateZ(20px);
292+
-moz-transform: translateZ(20px);
293+
-ms-transform: translateZ(20px);
294+
-o-transform: translateZ(20px);
295+
transform: translateZ(20px);
296+
}
297+
298+
#its-in-3d .noticed {
299+
-webkit-transform: translateZ(-40px);
300+
-moz-transform: translateZ(-40px);
301+
-ms-transform: translateZ(-40px);
302+
-o-transform: translateZ(-40px);
303+
transform: translateZ(-40px);
304+
}
305+
306+
#its-in-3d .its {
307+
-webkit-transform: translateZ(60px);
308+
-moz-transform: translateZ(60px);
309+
-ms-transform: translateZ(60px);
310+
-o-transform: translateZ(60px);
311+
transform: translateZ(60px);
312+
}
313+
314+
#its-in-3d .in {
315+
-webkit-transform: translateZ(-10px);
316+
-moz-transform: translateZ(-10px);
317+
-ms-transform: translateZ(-10px);
318+
-o-transform: translateZ(-10px);
319+
transform: translateZ(-10px);
320+
}
321+
322+
#its-in-3d .footnote {
323+
font-size: 32px;
324+
325+
-webkit-transform: translateZ(-10px);
326+
-moz-transform: translateZ(-10px);
327+
-ms-transform: translateZ(-10px);
328+
-o-transform: translateZ(-10px);
329+
transform: translateZ(-10px);
330+
}
331+
332+
#its-in-3d.active span,
333+
#its-in-3d.active b {
334+
-webkit-transform: translateZ(0px);
335+
-moz-transform: translateZ(0px);
336+
-ms-transform: translateZ(0px);
337+
-o-transform: translateZ(0px);
338+
transform: translateZ(0px);
339+
340+
-webkit-transition-delay: 1s;
341+
-moz-transition-delay: 1s;
342+
-ms-transition-delay: 1s;
343+
-o-transition-delay: 1s;
344+
transition-delay: 1s;
345+
}
346+
347+
/* overview step */
348+
349+
#overview {
350+
z-index: -1;
351+
}
352+
353+
/* on overview step everything is visible */
354+
355+
#impress.step-overview .step {
356+
opacity: 1;
357+
}
105358

106359

107360
/*
108-
* Inspired by:
109-
* http://html5slides.googlecode.com/svn/trunk/styles.css
361+
* SLIDE STEP STYLES
362+
*
363+
* inspired by: http://html5slides.googlecode.com/svn/trunk/styles.css
110364
*
111365
* ;)
112366
*/
@@ -119,26 +373,13 @@ a { color: inherit; }
119373

120374
padding: 40px 60px;
121375

122-
box-sizing: border-box;
123-
-o-box-sizing: border-box;
124-
-moz-box-sizing: border-box;
125-
-webkit-box-sizing: border-box;
126-
127376
border-radius: 10px;
128-
-o-border-radius: 10px;
129-
-moz-border-radius: 10px;
130-
-webkit-border-radius: 10px;
131377

132378
background-color: white;
133379

134380
box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
135381
border: 1px solid rgba(0, 0, 0, .3);
136382

137-
transition: transform .3s ease-out;
138-
-o-transition: -o-transform .3s ease-out;
139-
-moz-transition: -moz-transform .3s ease-out;
140-
-webkit-transition: -webkit-transform .3s ease-out;
141-
142383
font-family: 'Open Sans', Arial, sans-serif;
143384

144385
color: rgb(102, 102, 102);
@@ -159,6 +400,6 @@ a { color: inherit; }
159400
}
160401

161402
.slide q strong {
162-
font-size: 65px;
163403
white-space: nowrap;
164404
}
405+

0 commit comments

Comments
 (0)