css: Render org exported HTML more nicely.
[software/elephly-net.git] / static / css / screen.css
1 @font-face {
2 font-family: 'droid_serifregular';
3 src: url('DroidSerif-webfont.woff') format('woff');
4 font-weight: normal;
5 font-style: normal;
6 }
7
8 html, body {
9 font-family: "droid_serifregular", serif;
10 text-rendering: optimizelegibility;
11 -moz-font-feature-settings: "liga";
12 line-height: 140%;
13 color: #333;
14 background: #fcfbf3; }
15
16 @media all {html {font-size: 24px;}}
17 @media all and (max-width:1000px){html {font-size: 24px;}}
18 @media all and (max-width:960px){html {font-size: 23px;}}
19 @media all and (max-width:920px){html {font-size: 22px;}}
20 @media all and (max-width:880px){html {font-size: 21px;}}
21 @media all and (max-width:840px){html {font-size: 20px;}}
22 @media all and (max-width:800px){html {font-size: 19px;}}
23 @media all and (max-width:760px){html {font-size: 18px;}}
24
25 body {
26 margin: 0 auto; }
27 body .elephly {
28 background: #bdc0ac; }
29
30 #index {
31 padding: 1rem;
32 margin-left: 2rem; }
33 #index img {
34 border: 3px solid white;
35 border-radius: 50%;
36 box-shadow: 1px 2px 2px 0 #888;
37 float: left;
38 height: 4rem; }
39
40 @media screen and (max-width: 600px) {
41 #index {
42 text-align: center; }
43 #index img {
44 float: none; }}
45
46 #page ul {
47 list-style: square outside;
48 margin-top: 0.5rem;
49 margin-bottom: 0.5rem; }
50
51 div.time {
52 color: #9ba0a7;
53 margin-top: -2.8rem;
54 margin-bottom: 2.5rem;
55 font-size: 0.9rem;
56 font-weight: normal; }
57
58 div.figure {
59 text-align: center;
60 background: #fff;
61 box-sizing: border-box;
62 box-shadow: 0 0 0.4em 0 #888;
63 margin: 1rem;
64 padding: 1rem; }
65 @media screen and (min-width: 600px) {
66 div.figure {
67 float: right; }}
68 @media screen and (max-width: 600px) {
69 div.figure {
70 float: none;
71 clear: both; }}
72 div#page div.figure p.caption {
73 width: auto;
74 text-align: center;
75 font-size: 0.8rem; }
76
77 h2.footnotes {
78 font-size: 1rem; }
79 div.footnotes, #footnotes {
80 margin-top: 1rem;
81 padding-top: 1rem;
82 font-size: 0.9rem;
83 border-top: 1px dotted #aaaaaa; }
84
85 div.footpara {
86 display: inline; }
87
88 iframe {
89 margin-top: 1rem;
90 margin-bottom: 1rem; }
91
92 h1 {
93 color: #000;
94 clear: both;
95 line-height: 125%;
96 margin-top: 1.3rem;
97 margin-bottom: .3rem;
98 display: block;
99 font-family: "droid sans", sans-serif;
100 font-size: 1.2rem;
101 font-weight: 800; }
102
103 h1:first-child {
104 font-size: 1.8rem;
105 margin-bottom: 3rem;
106 margin-top: 3rem; }
107
108 @media screen and (max-width: 600px) {
109 h1:first-child {
110 margin-top: 1rem; }}
111
112 * + h2, * + h3 {
113 margin-top: 1.5rem; }
114
115 .outline-2 {
116 margin-top: 1.5rem; }
117
118 h2, h3 {
119 color: #333;
120 margin-bottom: 0.5em;
121 clear: both;
122 letter-spacing: -0.04em;
123 font-size: 1.2rem;
124 font-weight: 700;
125 font-family: "Droid Sans", Arial, sans-serif; }
126
127 h3 {
128 font-size: 1.2rem; }
129
130 a {
131 color: #389;
132 text-decoration: none; }
133 a:visited {
134 color: #167; }
135 a:hover {
136 color: #000;
137 background: #eeede5; }
138
139 strong {
140 font-weight: bold; }
141
142 div#page {
143 overflow: visible;
144 max-width: 32rem;
145 padding-left: 2rem;
146 margin-right: 1rem;
147 margin-bottom: 100px; }
148 @media only screen and (min-width: 600px) {
149 div#page {
150 margin-left: 10rem;
151 margin-right: 4rem; }}
152 div#page ul {
153 max-width: 32rem; }
154 div#page p {
155 margin-bottom: 0;
156 text-align: justify;
157 max-width: 32rem; }
158 div#page p img, div#page p video {
159 display: inline;
160 float: right;
161 margin-left: 0.8rem;
162 -moz-border-radius: 15px;
163 border-radius: 15px; }
164 div#page p.back {
165 margin-top: 1.5rem;
166 width: 50%; }
167 div#page blockquote {
168 margin-left: 3rem;
169 margin-right: 3rem;
170 margin-top: 1rem;
171 margin-bottom: 1rem;
172 font-size: 0.9rem;
173 font-style: italic; }
174 div#page img.full {
175 width: 100%;
176 margin-top: 0.5rem;
177 margin-bottom: 1rem;
178 margin-left: 0;
179 margin-right: 0;
180 position: static;
181 float: none;
182 clear: both;
183 padding: 0;
184 display: block;
185 -moz-border-radius: 15px;
186 border-radius: 15px; }
187 div#page img.stretch {
188 width: 100%; }
189 div#page div.fineprint {
190 font-size: .7rem;
191 text-indent: 0;
192 line-height: 1rem;
193 margin-top: 1rem;
194 padding-top: 1rem;
195 border-top: 1px dotted #aaaaaa;
196 width: 100%;
197 color: #666;
198 clear: both;
199 display: block; }
200 div#page div.fineprint div.license {
201 display: block;
202 clear: both; }
203 div#page div.fineprint img {
204 display: block;
205 float: left;
206 margin-right: .5rem; }
207
208 p + p, div.figure + p {
209 text-indent: .5rem;
210 margin-top: 0.4rem; }
211
212 warning {
213 clear: both;
214 margin: 1rem;
215 padding: 1rem;
216 background: #ffffaa;
217 border: 2px dashed #dddd88;
218 border-radius: 3px;
219 display: block; }
220
221 pre, .org-src-container {
222 margin: 1rem;
223 padding: 1rem;
224 display: inline-block;
225 border-radius: 3px;
226 background: #444; }
227
228 pre.lyrics {
229 margin: 0;
230 padding: 0rem;
231 background: transparent; }
232
233 .org-src-container, pre.example {
234 color: #aaff00;
235 display: block;
236 overflow-x: auto;
237 font-size: .85rem; }
238
239 pre code, .org-src-container pre {
240 color: #aaff00;
241 background: transparent; }
242
243 .org-src-container pre {
244 margin: 0;
245 padding: 0; }
246
247 img.flickr {
248 position: relative;
249 display: block;
250 margin: 0 auto;
251 width: 100%; }
252
253 img.undecorated {
254 margin: 0;
255 padding: 0; }
256
257 img.headline {
258 margin: 0;
259 margin-right: 1rem;
260 padding: 0;
261 vertical-align: text-bottom; }
262
263 img.feed-icon {
264 vertical-align: middle;
265 padding-left: 0.2rem; }
266
267 div#columns {
268 overflow: hidden;
269 margin-bottom: 1rem; }
270 div#columns ul {
271 list-style: none outside none;
272 margin: 0;
273 float: left;
274 width: 50%; }
275
276 span.code, code {
277 font-family: "Envy Code R", "Inconsolata", "Consolas", "Courier New", monospace;
278 color: #111;
279 background: #dedede; }
280
281 span.code {
282 font-size: 0.85rem;
283 border-bottom: #888;
284 padding: .15rem; }
285
286 br {
287 clear: left; }
288
289 em {
290 font-style: italic; }
291
292 .item + .item {
293 margin-top: 1rem; }
294
295 ul.list {
296 list-style-type: square; }
297 ul.list li {
298 margin-bottom: .4rem; }
299 ul.list li .description {
300 font-size: .8rem; }
301
302 div.download {
303 float: left;
304 width: 45%;
305 margin-right: 1rem;
306 margin-bottom: 1.5rem; }
307 div.download a {
308 display: block;
309 width: 100%;
310 text-align: center;
311 padding: 0.5em 0;
312 font-family: sans-serif;
313 background: #fff;
314 color: #888;
315 border-radius: 2rem;
316 -moz-border-radius: 2rem; }
317 div.download a:hover {
318 background: #888;
319 color: #fff; }
320 div.download table {
321 font-size: .8rem;
322 line-height: 1rem;
323 border-collapse: collapse;
324 margin-bottom: 1rem;
325 clear: both; }
326 div.download table th {
327 color: #999;
328 font-weight: 400;
329 padding-right: 1rem;
330 border-right: 1px solid #ffaa00;
331 text-align: right; }
332 div.download table td {
333 color: #777;
334 margin: 0;
335 padding: 0;
336 padding-left: 1rem;
337 text-align: left; }
338
339 table {
340 font-size: 0.9rem;
341 margin-top: 0.5rem;
342 margin-bottom: 0.5rem; }
343 table thead {
344 border-bottom: 2px solid #ffaa00; }
345 table thead tr.header {
346 font-weight: bold; }
347 table tr.odd {
348 background-color: #fafafa; }
349 table th + th, table td + td {
350 padding-left: 1rem; }
351
352 h1.year {
353 border-bottom: 4px solid #eeede5;
354 width: 50%; }
355
356 h2.month {
357 font-weight: normal; }
358
359 ul.archive {
360 margin-left: 1rem; }
361
362 ul.tags {
363 list-style: none;
364 margin-left: 1rem; }
365 ul.tags li {
366 margin-right: 1rem;
367 white-space: nowrap;
368 display: inline-block; }
369
370 #page ul.tree {
371 margin: 1rem;
372 font-family: monospace;
373 display: block;
374 list-style: none; }
375
376 #page ul.tree li { line-height: 1.3rem; }
377 #page ul.tree .NORM { color: black; background-color: transparent;}
378 #page ul.tree .FIFO { color: purple; background-color: transparent;}
379 #page ul.tree .CHAR { color: yellow; background-color: transparent;}
380 #page ul.tree .DIR { color: blue; background-color: transparent;}
381 #page ul.tree .BLOCK { color: yellow; background-color: transparent;}
382 #page ul.tree .LINK { color: aqua; background-color: transparent;}
383 #page ul.tree .SOCK { color: fuchsia;background-color: transparent;}
384 #page ul.tree .EXEC { color: green; background-color: transparent;}
385
386 #comments {
387 margin-top: 1rem;
388 font-size: 0.7rem;
389 padding: 0 1em 1rem;
390 border-top: 5px solid #999999;
391 }
392
393 /* DISQUS */
394 h1.disqus {
395 margin-top: 1rem;
396 float: left; }
397
398 div#disqus_thread {
399 border-top: 5px solid #999999;
400 padding: 0 1em 1rem;
401 background: #eeede5;
402 margin-top: 1rem;
403 -moz-border-radius: 0 0 15px 15px;
404 border-radius: 0 0 15px 15px;
405 font-size: 14px; }
406 div#disqus_thread ul {
407 width: auto; }
408 div#disqus_thread #dsq-global-toolbar {
409 margin: 0.5em 0; }
410 div#disqus_thread #dsq-reply {
411 margin-top: 0.5rem; }
412 div#disqus_thread h3 {
413 clear: none; }