comparison presen/s6/themes/projection.css @ 10:86f6bb9be40a

add
author mir3636
date Wed, 15 Feb 2017 18:20:07 +0900
parents
children
comparison
equal deleted inserted replaced
9:11ad5b3e7b85 10:86f6bb9be40a
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 }