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