]> git.plutz.net Git - clickslide/blob - clickslide.css
174384b54e3d653f893f2db87b2347a16e2af7e1
[clickslide] / clickslide.css
1 * {
2   box-sizing: border-box;
3   margin: 0; padding: 0;
4   background-position: center;
5   background-repeat: no-repeat;
6   background-size: cover;
7 }
8
9 /*  min-height: 240px */     body { font-size:  9px; }
10 @media(min-height: 320px)  { body { font-size: 12px; } }
11 @media(min-height: 480px)  { body { font-size: 19px; } }
12 @media(min-height: 720px)  { body { font-size: 28px; } }
13 @media(min-height: 768px)  { body { font-size: 30px; } }
14 @media(min-height: 800px)  { body { font-size: 32px; } }
15 @media(min-height: 960px)  { body { font-size: 38px; } }
16 @media(min-height: 1024px) { body { font-size: 41px; } }
17 @media(min-height: 1080px) { body { font-size: 43px; } }
18 @media(min-height: 2160px) { body { font-size: 86px; } }
19
20 body {
21   font-family: sans-serif;
22   padding: 2em 1em 6em 1em;
23   background-color: #555;
24   text-align: center;
25   overflow-x: hidden;
26 }
27 body * { text-align: left; }
28
29 body:after {
30   position: fixed;
31   bottom: 0; left: 0;
32   width: 100%;
33   background-color: #EEE;
34   height: 1.25em;
35   content: ' ';
36 }
37
38 a.previous, a.next ,a.toplevel {
39   text-decoration: none;
40 }
41
42 footer {
43   position: fixed;
44   bottom: 0; left: 0;
45   width: 100%;
46   font-size: .75em;
47   padding: .5em 4em .5em 12em;
48   text-align: center;
49   color: #888;
50   z-index: 4;
51 }
52 footer:before {
53   content: ' ';
54   position: absolute;
55   top: 0; left: 0;
56   bottom: 1.5em;
57   width: 100%;
58   background-color: #EEE;
59   z-index: -1;
60 }
61
62 body a.toplevel {
63   position: fixed;
64   bottom: 0; left: 8em;
65   width: 2ex; overflow: hidden;
66   font-size: .875em;
67   padding-bottom: .25em;
68   color: #EEE;
69   z-index: 5;
70 }
71 body a.toplevel:before {
72   color: #888;
73   content: '\2ba4'
74 }
75
76 body span.count {
77   position: fixed;
78   bottom: 0; left: 6.25em;
79   font-size: .875em;
80   padding-bottom: .125em;
81   color: #888;
82   z-index: 5;
83 }
84
85 /* ==== Overview Screen ==== */
86
87 div.slide, a.nextslide {
88   font-size: .15625em;
89 }
90
91 div.slide {
92   position: relative;
93   display: inline-block;
94   overflow: hidden;
95   width: 48em; height: 30em;
96   margin-left: -48em;
97   border: 1px solid black;
98 }
99
100 div.slide + a { display: none; }
101 a.nextslide {
102   display: inline-block;
103   position: relative;
104   vertical-align: top;
105   width: 48em; line-height: 30em;
106   color: rgba(0, 0, 0, 0);
107   z-index: 2;
108 }
109 #div.slide:nth-of-type(1) { margin-right: .5em; }
110
111 /* ==== Slide Appearance ==== */
112
113 div.slide {
114   background: #FFF no-repeat center;
115   text-align: center;
116   line-height: 1.5em;
117 }
118
119 div.slide:after {
120   position: absolute;
121   bottom: 0; left: 0;
122   width: 100%;
123   font-size: .875em;
124   line-height: 1.5em;
125   text-align: left;
126   content: attr(count) " /";
127   padding-left: 4em;
128   background-color: #EEE;
129   color: #888;
130 }
131
132 div.slide > * {
133   margin-top: 1em;
134   max-width: 85%;
135   z-index: 1;
136 }
137
138 div.slide > *:first-child:last-child,
139 div.slide > h2:first-child + :last-child {
140   margin-top: 20%;
141   transform: translate(0, -50%);
142 }
143
144 div.slide h1, div.slide h2 {
145   display: block;
146   background-color: #EEE;
147   text-align: center;
148   font-size: 1.5em;
149   margin-top: 0;
150   margin-bottom: 1em;
151   width: 100%; max-width: 100%;
152 }
153
154 div.slide h1,
155 div.slide > h1:first-child:last-child {
156   margin-top: 25%;
157   margin-bottom: 0;
158   padding: .5em 2em;
159 }
160
161 div.slide h2 {
162   padding: .25em 1em;
163 }
164
165 div.slide ul ul, div.slide ul ol,
166 div.slide ol ul, div.slide ol ol {
167   margin-left: 1em;
168 }
169
170 div.slide > ul,
171 div.slide > ol {
172   width: fit-content;
173   margin: .25em auto;
174 }
175
176 div.slide pre {
177   background-color: rgba(192,192,192,128);
178   padding: 1ex;
179   text-align: left;
180   font-family: monospace;
181 }
182
183 /* ==== Slide Display ==== */
184
185 div.slide:target {
186   position: fixed;
187   z-index: 3;
188   top: 0; bottom: 0; left: 0; right: 0;
189   width: auto; height: 100%;
190   margin: 0;
191   border: none;
192   font-size: inherit;
193 }
194 div.slide:target + a,
195 div.slide:target + a + a {
196   position: static;
197   display: block;
198   font-size: inherit;
199   line-height: 1em;
200   color: #888;
201 }
202 :target + a:before, :target + a + a:before {
203   display: block;
204   position: fixed;
205   bottom: 0;
206   color: #888;
207   padding: 0 1em .25em 1em;
208   z-index: 4;
209 }
210 :target + a:before { left:  0; }
211 :target + a:before { content: '\22d8'; }
212 :target + a + a:before { right: 0; }
213 :target + a + a:before { content: '\22d9'; }
214
215 .uncover[type="checkbox"] + * { opacity: .2; }
216 .uncover[type="checkbox"]:checked + * { opacity: 1; }
217
218 .uncover[type="checkbox"] {
219   position: fixed;
220   top: 0; bottom: 0; left: 0; right: 0;
221   width: 100%; height: 100%;
222   opacity: 0;
223   z-index: 1;
224 }
225
226 .uncover[type="checkbox"] + * + .uncover[type="checkbox"] { display: none; }
227 .uncover[type="checkbox"]:checked + * + .uncover[type="checkbox"] { display: inline; }
228 .uncover[type="checkbox"]:checked + * + .uncover[type="checkbox"]:checked,
229 .uncover[type="checkbox"]:checked { display: none; }
230