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