]> nos-oignons.net Git - website.git/blob - local.css
de4b4295747815336729a433bb3fd6e23b0d91a3
[website.git] / local.css
1 /* vim: set ts=4 sts=4 sw=4 isk+=-,. fen fcl=all fdm=marker fmr={{{,}}} fml=2 : */
2
3 @font-face {
4   font-family: 'Open Sans';
5   font-style: normal;
6   font-weight: 400;
7   src: local('Open Sans'), local('OpenSans'), url(assets/OpenSans/OpenSans.ttf) format('truetype');
8 }
9 @font-face {
10   font-family: 'Open Sans';
11   font-style: normal;
12   font-weight: 700;
13   src: local('Open Sans Bold'), local('OpenSans-Bold'), url(assets/OpenSans/OpenSans-Bold.ttf) format('truetype');
14 }
15 @font-face {
16   font-family: 'Open Sans';
17   font-style: italic;
18   font-weight: 400;
19   src: local('Open Sans Italic'), local('OpenSans-Italic'), url(assets/OpenSans/OpenSans-Italic.ttf) format('truetype');
20 }
21 @font-face {
22   font-family: 'Open Sans';
23   font-style: italic;
24   font-weight: 700;
25   src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(assets/OpenSans/OpenSans-BoldItalic.ttf) format('truetype');
26 }
27 @font-face {
28   font-family: 'Incosolata';
29   font-style: normal;
30   font-weight: 400;
31   src: local('Incosolata'), local('Inconsolata-Regular'), url(assets/Inconsolata/Inconsolata.otf) format('opentype');
32 }
33
34 html {
35         overflow: auto;
36 }
37
38 body {
39         margin: 0;
40         padding: 0;
41         font-family: "Open Sans", sans-serif;
42         color: #b3b3b3;
43         background: url(assets/tile.png) fixed;
44 }
45
46 code,
47 pre {
48         font-family: "Incosolata", monospace;
49 }
50
51 .page {
52         overflow: hidden;
53         max-width: 54em;
54         margin: 0 auto 0 auto;
55         box-shadow: 0 0 0.6em 0 #333366;
56         background: #f5f5f5;
57 }
58
59 /* {{{ .pageheader */
60 .pageheader {
61         position: fixed;
62         width: 54em; /* same as .page:max-width */
63         height: 100px;
64         padding: 0;
65         background: white url(assets/filet.png) no-repeat 99% 90px;
66         box-shadow: 0 10px 15px 0px white;
67         z-index: 120;
68 }
69
70 .pageheader .header {
71         font-size: 120%;
72         margin-left: 394px;
73 }
74
75 .pageheader .header > span {
76         display: block;
77         height: 100px;
78         padding-top: 22px;
79 }
80
81 .pageheader .parentlinks {
82         display: block;
83 }
84
85 .pageheader a,
86 .pageheader .parentlinks a {
87         color: #ffa430; /* was: #eeeeaa */
88         text-decoration: none;
89 }
90
91 .pageheader a:hover {
92         text-decoration: underline;
93 }
94
95 .pageheader .title {
96         position: absolute;
97         bottom: 27px;
98         left: 392px;
99         font-size: 160%;
100         color: black;
101 }
102
103 .pageheader .title .translationstatus {
104         display: none;
105 }
106
107 .parentlinks > a {
108         width: 394px; /* same as .pageheader .header:margin-left */
109         height: 100px;
110         background: url(assets/logo-nos-oignons-blanc.png) no-repeat top left;
111         position: absolute;
112         left: 0;
113         top: 0;
114 }
115
116 .parentlinks > a span {
117         display: none;
118 }
119
120 .parentlinks .parentlinksep + a {
121         width: auto;
122         height: auto;
123         background: transparent;
124         display: inline;
125         position: static;
126 }
127
128 .parentlinks .parentlinksep + a + .parentlinksep + a {
129         background: url(assets/ariane-sep.png) no-repeat 0% 50%;
130         padding-left: 20px;
131 }
132
133 .parentlinks .parentlinksep + a span {
134         display: inline;
135 }
136
137 .parentlinks .parentlinksep {
138         display: none;
139 }
140
141 /* {{{ .actions */
142 .actions {
143         font-size: 80%;
144         text-align: right;
145 }
146
147 /* .actions }}} */
148 /* {{{ #otherlanguages */
149 #otherlanguages,
150 #otherlanguages ul li a {
151         color: #57075f;
152         background: white;
153 }
154
155 #otherlanguages ul li {
156         margin-left: 1em;
157 }
158 #otherlanguages .langstatus {
159         display: none;
160 }
161
162 .pageheader #otherlanguages {
163         border: none;
164         position: absolute;
165         bottom: 1.2em;
166         right: 0;
167         z-index: 300;
168         font-size: 80%;
169 }
170 /* #otherlanguages }}} */
171 /* .pageheader }}} */
172
173 #pagebody {
174         position: relative;
175         min-height: 756px;
176         margin: 0 0 0 11.44em; /* same as .sidebar:width */
177         padding: 100px 2em 1em 2em;
178         z-index: 110;
179         background: white url(assets/background.png) no-repeat bottom center;
180         color: black;
181         border-left: solid 1px #ccc;
182 }
183
184 /* {{{ .sidebar */
185 .sidebar {
186         position: fixed;
187         overflow: hidden;
188         top: 100px; /* same as .header:height */
189         width: 11.44em;
190         margin: 0;
191         padding: 0;
192         border: none;
193         z-index: 200;
194         background: #f5f5f5;
195         border-top: solid 1px #ccc;
196         padding-top: 30px;
197 }
198
199 .sidebar ul {
200         margin: 0;
201 }
202
203 .sidebar ul {
204         padding: 0;
205         list-style: none;
206         background: transparent;
207 }
208
209 .sidebar li {
210         text-align: left;
211 }
212
213 .sidebar ul li .selflink {
214         color: #57075f;
215         font-weight: bold;
216 }
217
218 .sidebar ul li > span,
219 .sidebar ul li > a {
220         display: block;
221         padding: 0.3em 0.5em;
222         text-decoration: none;
223         border: 1px solid #f5f5f5;
224         color: #a756af;
225         background: transparent;
226         font-weight: normal;
227 }
228
229 .sidebar ul li > span,
230 .sidebar ul li > a {
231         font-size: 100%;
232 }
233
234 .sidebar ul li .selflink:hover {
235         border-top: 1px dotted #57075f;
236         border-bottom: 1px dotted #57075f;
237         background: #eeeeee;
238 }
239
240 .sidebar a:hover {
241         border-top: 1px dotted #57075f;
242         border-bottom: 1px dotted #57075f;
243         color: #57075f;
244         background: #eeeeee;
245         text-decoration: none;
246 }
247 /* .sidebar }}} */
248 /* {{{ #content */
249 #content {
250         padding-top: 1em;
251         overflow: auto;
252 }
253
254 #content a {
255         color: #57075f;
256         text-decoration: underline;
257 }
258
259 #content a:hover {
260         text-decoration: underline;
261 }
262
263 #content p {
264         text-align: justify;
265         margin: 1em 0 1em 0;
266 }
267
268 #content hr {
269         border: none;
270         border-bottom: dotted 2px #bbbbbb;
271         margin: 2em auto;
272 }
273
274 #content h1 {
275         font-size: 180%;
276         font-weight: bold;
277         color: #ffa430;
278         text-shadow: 2px 2px 1px #444;
279 }
280
281 #content h2,
282 #content .header {
283         font-size: 140%;
284         font-weight: bold;
285 }
286
287 #content h2 + p {
288         margin-top: 0.75em;
289 }
290
291 #content h3 {
292         font-size: 120%;
293         font-weight: bold;
294         margin-bottom: 0;
295         padding-bottom: 0;
296 }
297
298 #content h3 + p {
299         margin-top: 0.5em;
300 }
301
302 #content table {
303         border-top: solid 1px #aaa;
304         border-bottom: solid 1px #aaa;
305         border-collapse: collapse;
306 }
307
308 #content table th {
309         background: #fafafa;
310         padding: 0.1em 0.5em;
311         border-bottom: solid 1px #aaaaaa;
312         color: #555555;
313 }
314
315 #content table td {
316         padding: 0.1em 0.5em;
317         border-top: solid 1px #ccc;
318 }
319
320 #content .header a {
321         text-decoration: none;
322 }
323
324 #content .feedlink a {
325         text-decoration: none;
326 }
327
328 #content .feedlink {
329         text-align: right;
330         margin-top: -2.8em;
331         min-height: 2.8em;
332 }
333 #content .feedlink .feedbutton {
334         font-size: 80%;
335         color: #57075f !important;
336         background: transparent;
337         border: none;
338 }
339 #content .feedlink .feedbutton:hover {
340         color: #57075f !important;
341         background: transparent;
342         text-decoration: underline;
343 }
344
345 #content .footnotes {
346         font-size: 80%;
347 }
348 /* #content }}} */
349
350 /* {{{ .inlinepage */
351
352 .inlinepage {
353         padding: 0;
354         border: none;
355         margin-bottom: 1em;
356 }
357
358 .inlinepage .header {
359         border-bottom: solid #ccc 1px;
360 }
361
362 .inlinepage .inlineheader .pagedate {
363         margin-top: 0;
364         font-size: 80%;
365         font-style: normal;
366         color: #666;
367 }
368
369 /* .inlinepage }}} */
370
371 /* {{{ #footer */
372 #footer {
373         position: relative;
374         margin: 0;
375         padding: 0.5em 0;
376         text-align: center;
377         color: white;
378         background: #57075f;
379         background: -webkit-linear-gradient(#001030, #57075f);
380         background:    -moz-linear-gradient(#001030, #57075f);
381         background:         linear-gradient(#001030, #57075f);
382         z-index: 400;
383 }
384
385 #footer #pageinfo {
386         position: relative;
387         max-width: 30em;
388         margin: auto;
389         padding: 0.1em 2em;
390         border-top: none;
391 }
392
393 #footer a {
394         color: white;
395 }
396
397 #footer a:hover {
398         text-decoration: underline;
399 }
400
401 #backlinks {
402         font-size: 80%;
403         margin-top: 0;
404 }
405
406 #footer #pageinfo div {
407         font-size: 80%;
408         margin-top: 0.5em;
409         margin-bottom: 0;
410 }
411 /* #footer }}} */
412
413 /* {{{ @media print */
414 @media print {
415         .sidebar,
416         .actions,
417         .feedlink,
418         #backlinks,
419         #otherlanguages {
420                 display: none;
421         }
422
423         #footer,
424         #footer #pageinfo,
425         .page,
426         .pageheader,
427         #pagebody {
428             margin: 0;
429             padding: 0;
430             border: none;
431             box-shadow: none;
432         }
433
434         .page,
435         .pageheader {
436                 border-radius: 0;
437         }
438
439         .pageheader {
440                 position: static;
441                 height: auto;
442         }
443
444         .pageheader .header {
445                 margin-left: 0;
446                 padding-top: 2em;
447                 padding-bottom: 1em;
448         }
449
450         .pageheader .header > span,
451         .parentlinks .parentlinksep {
452                 display: inline;
453                 height: auto;
454         }
455
456         .pageheader a,
457         .pageheader .parentlinks a {
458                 color: black;
459         }
460
461         .pageheader,
462         .parentlinks a,
463         .parentlinks .parentlinksep + a + .parentlinksep + a {
464                 background: none;
465         }
466
467         .pageheader .parentlinks {
468                 display: inline;
469         }
470
471         .pageheader .title,
472         .parentlinks > a {
473                 position: static;
474         }
475
476         .parentlinks > a span {
477                 display: inline;
478         }
479
480         #content h1 {
481                 color: black;
482                 text-shadow: none;
483                 border-bottom: solid #ccc 1px;
484         }
485
486         #footer {
487                 margin-top: 2em;
488                 text-align: left;
489         }
490 }
491 /* @media print }}} */
492