|
10
|
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 * toggle between projection/screen (that is, slideshow/outline) mode using t-key
|
|
|
9 */
|
|
|
10 html,
|
|
|
11 body,
|
|
|
12 .presentation {
|
|
|
13 margin: 0;
|
|
|
14 padding: 0;
|
|
|
15 }
|
|
|
16 .slide {
|
|
|
17 display: none;
|
|
|
18 /* note: only display current slide in projection mode */
|
|
|
19 position: absolute;
|
|
|
20 top: 0;
|
|
|
21 left: 0;
|
|
|
22 margin: 0;
|
|
|
23 padding: 2% 4% 0% 4%;
|
|
|
24 /* css note: order is => top right bottom left */
|
|
|
25 -moz-box-sizing: border-box;
|
|
|
26 -webkit-box-sizing: border-box;
|
|
|
27 box-sizing: border-box;
|
|
|
28 width: 100%;
|
|
|
29 height: 100%;
|
|
|
30 /* css note: lets use border-box; no need to add padding+border to get to 100% */
|
|
|
31 overflow-x: hidden;
|
|
|
32 overflow-y: auto;
|
|
|
33 z-index: 2;
|
|
|
34 }
|
|
|
35 .slide.current {
|
|
|
36 display: block;
|
|
|
37 }
|
|
|
38 /* note: only display current slide in projection mode */
|
|
|
39 /*****
|
|
|
40 * layout block structure:
|
|
|
41 *
|
|
|
42 * .layout
|
|
|
43 * > #header
|
|
|
44 * > #footer
|
|
|
45 */
|
|
|
46 .layout #header,
|
|
|
47 .layout header {
|
|
|
48 position: fixed;
|
|
|
49 top: 0;
|
|
|
50 left: 0;
|
|
|
51 width: 100%;
|
|
|
52 height: 0.5em;
|
|
|
53 z-index: 1;
|
|
|
54 }
|
|
|
55 .layout #footer,
|
|
|
56 .layout footer {
|
|
|
57 position: fixed;
|
|
|
58 top: auto;
|
|
|
59 bottom: 0;
|
|
|
60 padding: 1em 0;
|
|
|
61 /* css note: order is => 1st top,bottom; 2nd right,left */
|
|
|
62 width: 100%;
|
|
|
63 height: 4em;
|
|
|
64 z-index: 5;
|
|
|
65 /* todo: move font-size and font-style to blank.css */
|
|
|
66 font-size: 100%;
|
|
|
67 font-weight: bold;
|
|
|
68 /* todo: move font-size and font-style to blank.css */
|
|
|
69 }
|
|
|
70 .layout #footer h1,
|
|
|
71 .layout footer h1 {
|
|
|
72 display: block;
|
|
|
73 margin: 0;
|
|
|
74 padding: 0 1em;
|
|
|
75 font-size: 50%;
|
|
|
76 }
|
|
|
77 .layout #footer h2,
|
|
|
78 .layout footer h2 {
|
|
|
79 display: block;
|
|
|
80 margin: 0;
|
|
|
81 padding: 0 1em;
|
|
|
82 font-size: 50%;
|
|
|
83 font-style: italic;
|
|
|
84 }
|
|
|
85 /*********************************
|
|
|
86 * general text-alignment classes
|
|
|
87 */
|
|
|
88 .left {
|
|
|
89 text-align: left;
|
|
|
90 }
|
|
|
91 .center {
|
|
|
92 text-align: center;
|
|
|
93 }
|
|
|
94 .right {
|
|
|
95 text-align: right;
|
|
|
96 }
|
|
|
97 /*********************************
|
|
|
98 * general _absolute_ font-size classes
|
|
|
99 */
|
|
|
100 .small {
|
|
|
101 font-size: 97%;
|
|
|
102 }
|
|
|
103 .x-small {
|
|
|
104 font-size: 88%;
|
|
|
105 }
|
|
|
106 .xx-small {
|
|
|
107 font-size: 82%;
|
|
|
108 }
|
|
|
109 .large {
|
|
|
110 font-size: 103%;
|
|
|
111 }
|
|
|
112 .x-large {
|
|
|
113 font-size: 112%;
|
|
|
114 }
|
|
|
115 .xx-large {
|
|
|
116 font-size: 118%;
|
|
|
117 }
|
|
|
118 /*********************************
|
|
|
119 * general _relative_ font-size classes
|
|
|
120 */
|
|
|
121 .smaller {
|
|
|
122 font-size: 82%;
|
|
|
123 }
|
|
|
124 .larger {
|
|
|
125 font-size: 118%;
|
|
|
126 }
|
