Mercurial > public > dvcs_intro_brownbag

comparison my_theme/css/screen.css @ 12:727c48601d66

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Copied default theme to my_theme so that the generated relative HTML can find the CSS and Javascript if I present on a different computer that doesn't have landslide installed. I also fixed a small typo in the presentation.
author Brian Neal <bgneal@gmail.com>
date Wed, 30 Nov 2011 18:44:44 -0600
parents
children
comparison
equal deleted inserted replaced
11:6d067ae303f3 12:727c48601d66
1 body {
2 font: 14px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
3 background: #778;
4 padding: 0;
5 margin: 0;
6 overflow: hidden;
7 }
8
9 div.presentation {
10 position: absolute;
11 width: 100%;
12 display: table-cell;
13 vertical-align: middle;
14 height: 100%;
15 background: inherit;
16 }
17
18 div.presentation > h1 {
19 display: none;
20 }
21
22 div.slides, body.expose div.slides.nocontext {
23 width: 100%;
24 height: 100%;
25 left: 0;
26 top: 0;
27 position: absolute;
28 display: block;
29 }
30
31 div.slides.nocontext {
32 width: 900px;
33 margin: 0 auto;
34 overflow: hidden;
35 position: relative;
36 left: auto;
37 top: auto;
38 }
39
40 div.slide {
41 display: inline;
42 position: absolute;
43 overflow: hidden;
44 width: 900px;
45 height: 700px;
46 margin-top: -350px;
47 margin-left: -400px;
48 left: 50%;
49 top: 50%;
50 background: -webkit-gradient(linear, left bottom, left top, from(#bbd), to(#fff));
51 background-color: #eee;
52 background: -moz-linear-gradient(bottom, #bbd, #fff);
53 -webkit-transition: margin 0.25s ease-in-out;
54 -moz-transition: margin 0.25s ease-in-out;
55 -o-transition: margin 0.25s ease-in-out;
56 border-top-left-radius: 20px;
57 -moz-border-radius-topleft: 20px;
58 -webkit-border-top-left-radius: 20px;
59 border-top-right-radius: 20px;
60 -moz-border-radius-topright: 20px;
61 -webkit-border-top-right-radius: 20px;
62 border-bottom-right-radius: 20px;
63 -moz-border-radius-bottomright: 20px;
64 -webkit-border-bottom-right-radius: 20px;
65 border-bottom-left-radius: 20px;
66 -moz-border-radius-bottomleft: 20px;
67 -webkit-border-bottom-left-radius: 20px;
68 }
69
70 /* Expose */
71
72 body.expose div.slides {
73 float: left;
74 position: relative;
75 overflow: auto;
76 margin-bottom: 10px;
77 }
78
79 body.expose div.slide {
80 display: block;
81 float: left;
82 position: relative;
83 left: auto !important;
84 top: auto !important;
85 margin: 10px !important;
86 -webkit-transition: none;
87 -moz-transition: none;
88 -o-transition: none;
89 -moz-transform: scale(.33, .33);
90 -moz-transform-origin: 0 0;
91 -webkit-transform: scale(.33, .33);
92 -webkit-transform-origin: 0 0;
93 -o-transform: scale(.33, .33);
94 -o-transform-origin: 0 0;
95 -webkit-transition: none;
96 -moz-transition: none;
97 -o-transition: none;
98 cursor: pointer;
99 }
100
101 body.expose div.slide:hover {
102 background: -webkit-gradient(linear, left bottom, left top, from(#bdd), to(#fff));
103 background-color: #eee;
104 background: -moz-linear-gradient(bottom, #bdd, #fff);
105 }
106
107 body.expose .slide-wrapper {
108 float: left;
109 position: relative;
110 margin: .5%;
111 width: 300px;
112 height: 233px;
113 }
114
115 body.expose .slide footer {
116 }
117
118 body.expose .slide .inner {
119 }
120
121 body.expose .slide.far-past,
122 body.expose .slide.past,
123 body.expose .slide.future,
124 body.expose .slide.far-future {
125 margin-left: 0;
126 }
127
128 body.expose .slide.current {
129 background: -webkit-gradient(linear, left bottom, left top, from(#ddb), to(#fff));
130 background-color: #eee;
131 background: -moz-linear-gradient(bottom, #ddb, #fff);
132 border: 16px solid #fff;
133 -moz-transform: scale(.315, .315);
134 -moz-transform-origin: 0 0;
135 -webkit-transform: scale(.315, .315);
136 -webkit-transform-origin: 0 0;
137 -o-transform: scale(.315, .315);
138 -o-transform-origin: 0 0;
139 }
140
141 /* Presenter Mode */
142
143 body.presenter_view div.slide {
144 display: inline;
145 position: absolute;
146 overflow: hidden;
147 -moz-transform: scale(.5, .5);
148 -moz-transform-origin: 0 0;
149 -webkit-transform: scale(.5, .5);
150 -webkit-transform-origin: 0 0;
151 -o-transform: scale(.5, .5);
152 -o-transform-origin: 0 0;
153 margin-top: -300px;
154 }
155
156 body.presenter_view .slide.far-past {
157 display: block;
158 margin-left: -1500px;
159 }
160
161 body.presenter_view .slide.past {
162 display: block;
163 margin-left: -975px;
164 }
165
166 body.presenter_view .slide.current {
167 display: block;
168 margin-left: -475px;
169 border: 8px solid maroon;
170 z-index: 2;
171 }
172
173 body.presenter_view .slide.future {
174 display: block;
175 margin-left: 25px;
176 z-index: 1;
177 }
178
179 body.presenter_view .slide.far-future {
180 display: block;
181 margin-left: 525px;
182 }
183
184 body.presenter_view div#current_presenter_notes {
185 visibility: visible;
186 display: block;
187 position: absolute;
188 overflow: auto;
189 vertical-align: middle;
190 left: 50%;
191 top: 50%;
192 margin-left: -475px;
193 margin-top: 100px;
194 z-index: 2;
195 width: 950px;
196 border-style: solid;
197 height: 30%;
198 background-color: silver;
199 }
200
201 body.presenter_view div#current_presenter_notes section {
202 font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
203 color: black;
204 text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
205 display: block;
206 overflow: visible;
207 position: relative;
208 background-color: #fffeff;
209 height: 120px;
210 margin-right: 30px;
211 margin-top: 60px;
212 margin-left: 30px;
213 padding-right: 10px;
214 padding-left: 10px;
215 padding-top: 10px;
216 }
217
218 body.presenter_view div#current_presenter_notes section p {
219 margin: 0;
220 }
221
222 body.presenter_view div#current_presenter_notes h1 {
223 font-size: 50%;
224 display: block;
225 }
226
227 div#current_presenter_notes {
228 display: none;
229 }
230
231 div.slide div.presenter_notes, div.slides div.presenter_notes {
232 display: none;
233 }
234
235 /* Slide styles */
236
237 div.slide p {
238 font-size: 20px;
239 }
240
241 .slide.far-past {
242 display: block;
243 margin-left: -2400px;
244 }
245
246 .slide.past {
247 display: block;
248 margin-left: -1400px;
249 }
250
251 .slide.current {
252 display: block;
253 margin-left: -450px;
254 }
255
256 .slide.future {
257 display: block;
258 margin-left: 500px;
259 }
260
261 .slide.far-future {
262 display: block;
263 margin-left: 1500px;
264 }
265
266 body.three-d div.slides {
267 -webkit-transform: translateX(50px) scale(0.8) rotateY(10deg);
268 -moz-transform: translateX(50px) scale(0.8) rotateY(10deg);
269 -o-transform: translateX(50px) scale(0.8) rotateY(10deg);
270 }
271
272
273 /* Content */
274
275 header:not(:only-child) {
276 font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
277 font-weight: normal;
278 font-size: 50px;
279 letter-spacing: -.05em;
280 color: black;
281 text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
282 position: absolute;
283 left: 30px;
284 top: 25px;
285 margin: 0;
286 padding: 0;
287 }
288
289 header h1, header h2, header h3, header h4, header h5, header h6 {
290 display: inline;
291 font-size: 100%;
292 font-weight: normal;
293 padding: 0;
294 margin: 0;
295 }
296
297 header h2:first-child {
298 margin-top: 0;
299 }
300
301 section, .slide header:only-child h1 {
302 font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
303 color: #3f3f3f;
304 text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
305 margin-left: 30px;
306 margin-right: 30px;
307 margin-top: 100px;
308 display: block;
309 overflow: hidden;
310 }
311
312 img { display: block; margin: auto; }
313
314 section img.align-center {
315 display: block;
316 margin-left: auto;
317 margin-right: auto;
318 }
319
320 section img.align-right {
321 display: block;
322 margin-left: auto;
323 margin-right: 0;
324 }
325
326 section img.align-left {
327 display: block;
328 margin-right: auto;
329 margin-left: 0;
330 }
331
332 a {
333 color: inherit;
334 display: inline-block;
335 text-decoration: none;
336 line-height: 110%;
337 border-bottom: 2px solid #3f3f3f;
338 }
339
340 pre {
341 font-size: 16px;
342 font-family: Monaco, Courier, monospace;
343 }
344
345 li {
346 padding: 10px 0;
347 font-size: 20px;
348 }
349
350 .slide header:only-child h1 {
351 line-height: 180%;
352 text-align: center;
353 display: table-cell;
354 vertical-align: middle;
355 height: 700px;
356 width: 900px;
357 font-size: 50px;
358 margin-top:100px;
359 margin-bottom:100px;
360 }
361
362 .sidebar {
363 clear: both;
364 background: -webkit-gradient(linear, top right, bottom right, from(#dde), to(#fff));
365 -webkit-transition: margin 0.25s ease-in-out;
366 background-color: #eee;
367 background: -moz-linear-gradient(right, #dde, #fff);
368 border-right: 5px solid #ccd;
369 z-index: 9999999;
370 height: 100%;
371 overflow: hidden;
372 top: 0;
373 position: absolute;
374 display: block;
375 margin: 0;
376 margin-left: -400px;
377 padding: 10px 16px;
378 overflow: auto;
379 -webkit-transition: margin 0.2s ease-in-out;
380 -moz-transition: margin 0.2s ease-in-out;
381 -o-transition: margin 0.2s ease-in-out;
382 }
383
384 .sidebar h2 {
385 text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
386 margin: 0 0 16px;
387 padding: 0;
388 }
389
390 .sidebar table {
391 width: 100%;
392 margin: 0;
393 padding: 0;
394 border-collapse: collapse;
395 }
396
397 .sidebar table caption {
398 display: none;
399 }
400
401 .sidebar tr {
402 margin: 2px 0;
403 border-bottom: 1px solid #ccc;
404 }
405
406 .sidebar th {
407 text-align: left;
408 font-weight: normal;
409 max-width: 300px;
410 overflow: hidden;
411 }
412
413 .sidebar tr.sub th {
414 text-indent: 20px;
415 }
416
417 .sidebar td {
418 text-align: right;
419 min-width: 20px;
420 }
421
422 .sidebar a {
423 display: block;
424 text-decoration: none;
425 border-bottom: none;
426 padding: 4px 0;
427 }
428
429 .sidebar tr.active {
430 background: #ff0;
431 }
432
433 aside {
434 display: none;
435 }
436 aside.source {
437 position: absolute;
438 bottom: 6px;
439 left: 10px;
440 text-indent: 10px;
441 }
442 aside.page_number {
443 position: absolute;
444 bottom: 6px;
445 right: 10px;
446 text-indent: 10px;
447 }
448
449 .notes {
450 display: none;
451 padding: 10px;
452 background: #ccc;
453 border-radius: 10px;
454 -moz-border-radius: 10px;
455 -webkit-border-radius: 10px;
456 }
457 div.slide p.notes {
458 font-size: 90%;
459 }
460
461 /* Pygments default theme */
462 .hll { background-color: #ffffcc }
463 .c { color: #408080; font-style: italic } /* Comment */
464 .err { border: 1px solid #FF0000 } /* Error */
465 .k { color: #008000; font-weight: bold } /* Keyword */
466 .o { color: #666666 } /* Operator */
467 .cm { color: #408080; font-style: italic } /* Comment.Multiline */
468 .cp { color: #BC7A00 } /* Comment.Preproc */
469 .c1 { color: #408080; font-style: italic } /* Comment.Single */
470 .cs { color: #408080; font-style: italic } /* Comment.Special */
471 .gd { color: #A00000 } /* Generic.Deleted */
472 .ge { font-style: italic } /* Generic.Emph */
473 .gr { color: #FF0000 } /* Generic.Error */
474 .gh { color: #000080; font-weight: bold } /* Generic.Heading */
475 .gi { color: #00A000 } /* Generic.Inserted */
476 .go { color: #808080 } /* Generic.Output */
477 .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
478 .gs { font-weight: bold } /* Generic.Strong */
479 .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
480 .gt { color: #0040D0 } /* Generic.Traceback */
481 .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
482 .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
483 .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
484 .kp { color: #008000 } /* Keyword.Pseudo */
485 .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
486 .kt { color: #B00040 } /* Keyword.Type */
487 .m { color: #666666 } /* Literal.Number */
488 .s { color: #BA2121 } /* Literal.String */
489 .na { color: #7D9029 } /* Name.Attribute */
490 .nb { color: #008000 } /* Name.Builtin */
491 .nc { color: #0000FF; font-weight: bold } /* Name.Class */
492 .no { color: #880000 } /* Name.Constant */
493 .nd { color: #AA22FF } /* Name.Decorator */
494 .ni { color: #999999; font-weight: bold } /* Name.Entity */
495 .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
496 .nf { color: #0000FF } /* Name.Function */
497 .nl { color: #A0A000 } /* Name.Label */
498 .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
499 .nt { color: #008000; font-weight: bold } /* Name.Tag */
500 .nv { color: #19177C } /* Name.Variable */
501 .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
502 .w { color: #bbbbbb } /* Text.Whitespace */
503 .mf { color: #666666 } /* Literal.Number.Float */
504 .mh { color: #666666 } /* Literal.Number.Hex */
505 .mi { color: #666666 } /* Literal.Number.Integer */
506 .mo { color: #666666 } /* Literal.Number.Oct */
507 .sb { color: #BA2121 } /* Literal.String.Backtick */
508 .sc { color: #BA2121 } /* Literal.String.Char */
509 .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
510 .s2 { color: #BA2121 } /* Literal.String.Double */
511 .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
512 .sh { color: #BA2121 } /* Literal.String.Heredoc */
513 .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
514 .sx { color: #008000 } /* Literal.String.Other */
515 .sr { color: #BB6688 } /* Literal.String.Regex */
516 .s1 { color: #BA2121 } /* Literal.String.Single */
517 .ss { color: #19177C } /* Literal.String.Symbol */
518 .bp { color: #008000 } /* Name.Builtin.Pseudo */
519 .vc { color: #19177C } /* Name.Variable.Class */
520 .vg { color: #19177C } /* Name.Variable.Global */
521 .vi { color: #19177C } /* Name.Variable.Instance */
522 .il { color: #666666 } /* Literal.Number.Integer.Long */
523
524 #blank {
525 position: absolute;
526 top: 0;
527 left: 0;
528 background-color: black;
529 width: 100%;
530 height: 100%;
531 z-index: 64;
532 display: none;
533 }