Mercurial > hg > Members > innparusu > slides
comparison 2015_06_02/s6/projection.css @ 0:47676a16ed13
Add Slides
| author | Tatsuki IHA <e125716@ie.u-ryukyu.ac.jp> |
|---|---|
| date | Tue, 14 Jul 2015 17:23:04 +0900 |
| parents | |
| children |
comparison
equal
deleted
inserted
replaced
| -1:000000000000 | 0:47676a16ed13 |
|---|---|
| 1 /********************************* | |
| 2 * CSS @media projection rules (not print or screen) | |
| 3 * | |
| 4 * 1) projection -> slideshow mode (display one slide at-a-time; hide all others) | |
| 5 * 2) screen -> outline mode (display all slides-at-once on screen) | |
| 6 * 3) print -> print (and print preview) | |
| 7 * | |
| 8 * toogle between slideshow/outline mode using t-key | |
| 9 */ | |
| 10 | |
| 11 html, | |
| 12 body, | |
| 13 .presentation { margin: 0; padding: 0; } | |
| 14 | |
| 15 | |
| 16 .slide { display: none; | |
| 17 position: absolute; | |
| 18 top: 0; left: 0; | |
| 19 margin: 0; | |
| 20 padding: 2% 4% 0% 4%; /* css note: order is => top right bottom left */ | |
| 21 width: 92%; height: 95%; /* css note: to get to 100% add padding/border/margin */ | |
| 22 overflow-x: hidden; overflow-y: auto; | |
| 23 z-index: 2; | |
| 24 } | |
| 25 | |
| 26 #slide1 { display: block; } | |
| 27 | |
| 28 .notes { display: none; } /* handout notes/note (use note? handout? notes? */ | |
| 29 | |
| 30 | |
| 31 /********* format layout block | |
| 32 * | |
| 33 * .layout | |
| 34 * > #header | |
| 35 * > #footer | |
| 36 * > #controls (holding navigation controls) | |
| 37 * > #navLinks | |
| 38 * > #toggle | |
| 39 * > #navList | |
| 40 * > #jumplist | |
| 41 * > #currentSlide (e.g. 1/7) | |
| 42 * | |
| 43 */ | |
| 44 | |
| 45 .layout { display: block; } | |
| 46 | |
| 47 #header { position: fixed; | |
| 48 top: 0; left: 0; | |
| 49 width: 100%; height: 0.5em; | |
| 50 z-index: 1; | |
| 51 } | |
| 52 | |
| 53 #footer { position: fixed; | |
| 54 top: auto; bottom: 0; | |
| 55 padding: 1em 0; /* css note: order is => 1st top,bottom; 2nd right,left */ | |
| 56 width: 100%; height: 1em; | |
| 57 z-index: 5; | |
| 58 | |
| 59 /* todo: move font-size and font-style to blank.css */ | |
| 60 font-size: 100%; font-weight: bold; | |
| 61 } | |
| 62 | |
| 63 /* todo: move font-size and font-style to blank.css */ | |
| 64 | |
| 65 #footer h1 { display: block; margin: 0; padding: 0 1em; font-size: 0.5em; } | |
| 66 #footer h2 { display: block; margin: 0; padding: 0 1em; font-size: 0.5em; font-style: italic; } | |
| 67 | |
| 68 | |
| 69 /************************* | |
| 70 * format for navigation controls | |
| 71 */ | |
| 72 | |
| 73 | |
| 74 #controls { position: fixed; | |
| 75 left: 60%; bottom: 0; | |
| 76 width: 40%; | |
| 77 z-index: 100; | |
| 78 text-align: right; | |
| 79 font: bold 1.2em Verdana, Helvetica, sans-serif; | |
| 80 } | |
| 81 | |
| 82 #controls :focus { outline: 1px dotted white;} | |
| 83 | |
| 84 #controls #navLinks { text-align: right; margin: 0; visibility: hidden; } | |
| 85 | |
| 86 #controls #navLinks a { padding: 0; margin: 0 0.5em; cursor: pointer; border: none; } | |
| 87 | |
| 88 #controls #navLinks :link, | |
| 89 #controls #navLinks :visited {text-decoration: none; } | |
| 90 | |
| 91 #controls #navList #jumplist { background: white; color: black; } | |
| 92 | |
| 93 /************************* | |
| 94 * format for | |
| 95 * currentSlide block ( e.g. 2/20 ) | |
| 96 */ | |
| 97 | |
| 98 #currentSlide { position: fixed; | |
| 99 left: 45%; bottom: 1em; | |
| 100 width: 10%; | |
| 101 z-index: 10; | |
| 102 text-align: center; | |
| 103 font-size: 0.8em; | |
| 104 } | |
| 105 | |
| 106 #currentSlide :link, | |
| 107 #currentSlide :visited { text-decoration: none; } | |
| 108 | |
| 109 |