]> nos-oignons.net Git - website.git/blob - local.css
ed36403ce3132c844599625409568bb63fe6d3cb
[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: 'Inconsolata';
29   font-style: normal;
30   font-weight: 400;
31   src: local('Inconsolata'), local('Inconsolata-Regular'), url(assets/Inconsolata/Inconsolata.otf) format('opentype');
32 }
33
34 /* http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
35 /* apply a natural box layout model to all elements, but allowing components to change */
36 html {
37   box-sizing: border-box;
38 }
39 *, *:before, *:after {
40   box-sizing: inherit;
41 }
42
43 img,
44 table {
45   max-width: 100%;
46   height: auto;
47 }
48
49
50 html {
51         /*overflow: auto;*/
52 }
53
54 body {
55         margin: 0;
56         padding: 0;
57         font-family: "Open Sans", sans-serif;
58         color: #111;
59         background: #fff url(assets/tile.png) fixed;
60 }
61
62 code,
63 pre {
64         font-family: "Inconsolata", monospace;
65         font-size-adjust: 0.535;
66 }
67
68 dt {
69         font-weight: bold;
70 }
71
72 thead td {
73         text-decoration: underline;
74 }
75
76
77 .body-wrapper {
78         max-width: 70em;
79         margin: 0 auto 0 auto;
80         box-shadow: 0 0 0.2em 0 #333366;
81   background: white;
82 }
83 @media screen and (min-width: 45em) {
84   .menu,
85   .main {
86     display: table-cell;
87     vertical-align: top;
88   }
89   .menu {
90     width: 20%;
91     max-width: 15em;
92     min-width: 11em;
93   }
94   .main {
95   }
96 }
97
98
99 .body-wrapper > header {
100     padding: 1em 0;
101     border-bottom: solid 1px #ccc;
102 }
103 @media screen and (min-width: 400px) {
104   .body-wrapper > header {
105     background: url("assets/filet.png") no-repeat scroll 99% 105px #FFF;
106   }
107 }
108
109
110 #logo {
111     display: block;
112         width: 394px; /* same as .pageheader .header:margin-left */
113         height: 104px;
114   max-width: 100%;
115         background: url(assets/logo-nos-oignons-blanc.png) no-repeat top left;
116   background-size: 100%;
117 }
118
119 #logo span {
120         display: none;
121 }
122
123 /* {{{ .actions */
124 .actions {
125         font-size: 0.8em;
126         text-align: right;
127 }
128 .actions ul {
129   margin: 0;
130   padding: 0.5em;
131   height: auto;
132   list-style-type: none;
133 }
134
135 .breadcrumb,
136 .breadcrumb  a {
137   text-decoration: none;
138   color: #b3b3b3;
139 }
140 .breadcrumb  a:first-child {display: none;}
141 .breadcrumb a:hover {
142   text-decoration: none;
143   color: #57075f;
144 }
145 .breadcrumb  a + a:before {
146   content:"▸";
147   display: inline-block;
148   vertical-align: top;
149   margin: -1px 0.5em 0;
150   color: #b3b3b3;
151 }
152 .breadcrumb  a + a:hover:before {}
153
154 /* .actions }}} */
155 /* {{{ #otherlanguages */
156 #otherlanguages {
157   float: right;
158   font-size: 0.9em;
159 }
160 .translationstatus,
161 .langstatus {display: none;}
162 @media screen and (max-width: 400px) {
163 #otherlanguages {float: none;}
164 }
165 #otherlanguages,
166 #otherlanguages a {
167         color: #b3b3b3;
168         /*background: white;*/
169 }
170 #otherlanguages a:hover {
171   color: #57075f;
172 }
173
174 #otherlanguages ul {
175   padding: 0;
176   margin: 0;
177   list-style: none;
178 }
179 #otherlanguages ul li {
180         /*margin-left: 1em;*/
181 }
182 #otherlanguages .langstatus {
183         /*display: none;*/
184 }
185
186
187 main {
188         background: white url(assets/background.png) no-repeat bottom center;
189       background-size: 50%;
190         color: #111;
191 }
192
193
194 .menu {
195         padding: 1em 0;
196         border: none;
197         background: #f5f5f5;
198 }
199 @media screen and (max-width: 45em) {
200   .menu {
201         border-bottom: solid 1px #ccc;
202   }
203 }
204
205 .menu ul {
206         margin: 0;
207 }
208
209 .menu ul {
210         padding: 0;
211         list-style: none;
212         background: transparent;
213 }
214
215 .menu li {
216         text-align: left;
217 }
218
219 .menu ul li .selflink {
220         color: #57075f;
221         font-weight: bold;
222 }
223
224 .menu ul li > span,
225 .menu ul li > a {
226         display: block;
227         padding: 0.3em 0.5em;
228         text-decoration: none;
229         border: 1px solid #f5f5f5;
230   color: #a756af;
231   background: transparent;
232   font-weight: normal;
233   font-size: 1em;
234 }
235
236
237 .menu a:hover {
238   color: #57075f;
239   background: #eeeeee;
240   text-decoration: none;
241 }
242
243 .menu select {
244   margin: 0.5em 2%;
245   width: 94%;
246   max-width: 94%;
247   background: #fff;
248   border: 1px solid #ccc;
249         color: #57075F;
250   font-size: 1.2em;
251   display: none;
252 }
253
254 @media screen and (max-width: 45em) {
255   .js .menu ul {display: none;}
256   .js .menu select {display: block;}
257 }
258
259
260 main {
261         padding: 1em;
262 }
263
264 main a {
265         color: #57075f;
266         text-decoration: underline;
267 }
268
269 main a:hover {
270         text-decoration: underline;
271 }
272
273 main p {
274         margin: 1em 0 1em 0;
275 }
276
277 main hr {
278         border: none;
279         border-bottom: dotted 2px #bbbbbb;
280         margin: 2em auto;
281 }
282
283 main h1 {
284         font-size: 1.8em;
285         font-weight: bold;
286   /*text-shadow: 2px 2px 1px #444;*/
287   color: #57075F;
288 }
289 main h1.title {
290   margin-top: 0em;
291   font-size: 2em;
292         color: #ffa430;
293 }
294
295 main h2 {
296   /*color: #ffa430*/
297   color: #57075F;
298 }
299 main h3 {
300   color: #57075F;
301 }
302
303 main h2,
304 main .header {
305         font-size: 1.4em;
306         font-weight: bold;
307 }
308
309 main h2 + p {
310         margin-top: 0.75em;
311 }
312
313 main h3 {
314         font-size: 1.2em;
315         font-weight: bold;
316         margin-bottom: 0;
317         padding-bottom: 0;
318 }
319
320 main h3 + p {
321         margin-top: 0.5em;
322 }
323 h2 sup,
324 h3 sup {
325   font-weight: normal;
326 }
327
328 main blockquote {
329   border-left: 2px solid #A756AF;
330   margin: 0.5em 0;
331   padding: 0.5em 0 0.5em 1em;
332 }
333 main blockquote p {margin: 0;}
334 main blockquote p + p {margin-top: 1em;}
335
336
337 main table {
338         border-top: solid 1px #aaa;
339         border-bottom: solid 1px #aaa;
340         border-collapse: collapse;
341 }
342
343 main table th {
344         background: #fafafa;
345         padding: 0.1em 0.5em;
346         border-bottom: solid 1px #aaaaaa;
347         color: #555555;
348 }
349
350 main table td {
351         padding: 0.1em 0.5em;
352         border-top: solid 1px #ccc;
353 }
354
355 main .header a {
356         text-decoration: none;
357 }
358
359 main .feedlink a {
360         text-decoration: none;
361 }
362
363 main .feedlink {
364         text-align: right;
365         margin-top: -2.8em;
366         min-height: 2.8em;
367 }
368 main .feedlink .feedbutton {
369         font-size: 0.8em;
370         color: #57075f !important;
371         background: transparent;
372         border: none;
373 }
374 main .feedlink .feedbutton:hover {
375         color: #57075f !important;
376         background: transparent;
377         text-decoration: underline;
378 }
379
380 main .footnotes {
381         font-size: 0.8em;
382 }
383
384 .half-section {
385   display: inline-block;
386   vertical-align: top;
387   width: 49.5%;
388 }
389
390 /* main }}} */
391
392
393 .graph {
394   display: inline-block;
395   vertical-align: top;
396   width: 45%;
397   margin: 1em 1%;
398   min-width: 20em;
399   text-align: center;
400 }
401
402 #bandwidth {text-align: center;}
403 #bandwidth svg {text-align: left;}
404
405 /* Tor nodes table */
406 .tor-nodes {}
407 .tor-nodes th {
408   text-align: left;
409 }
410
411
412 /* Paypal donation forms */
413 .paypal-donation {
414         display: inline-block;
415         vertical-align: top;
416         width:45%;
417         padding-right: 4%;
418       min-width: 20em;
419 }
420 .paypal-donation h4 {
421         margin: 0 0 0.5em 0;
422 }
423 .paypal-donation select {
424         display: inline-block;
425         vertical-align: top;
426         margin-right: 1em;
427         min-height:26px;
428 }
429 .paypal-donation .cancel {
430         font-size: small;
431 }
432
433
434 /* Progress bar */
435 .progress-bar-wrapper {
436   margin: 2em auto;
437   height: 85px;
438   width: 600px;
439   background: lightGrey url(assets/progress_bar.png) top left repeat-x;
440   border: 1px solid #ccc;
441   border-bottom: 0;
442   position: relative;
443 }
444   .progress-bar-wrapper .progress-bar {
445     position: absolute;
446     height: 85px;
447     background: grey url(assets/progress_bar.png) left -85px repeat-x;
448     z-index: 2;
449     /* animate progress bar */
450     -webkit-animation: progress-bar 1.5s;
451     -moz-animation: progress-bar 1.5s;
452     animation: progress-bar 1.5s;
453   }
454   .progress-bar-wrapper .progress-bar-promises {
455     background: grey url(assets/progress_bar.png) left bottom repeat-x;
456     z-index: 1;
457   }
458
459   /* progress bar animation*/
460   @-webkit-keyframes progress-bar { 0% { width: 0; } }
461   @-moz-keyframes progress-bar { 0% { width: 0; } }
462   keyframes progress-bar { 0% { width: 0; } }
463
464   /* Current amount */
465   .progress-bar-wrapper .progress-bar:after {
466     content: attr(data-current);
467     display: block;
468     position: absolute;
469     top: -22px;
470     right: 0;
471     background: #fff;
472     color: #ccc;
473     font-size: 0.9em;
474   }
475   /* Promises amount */
476   .progress-bar-wrapper .progress-bar-promises:after {
477   }
478
479   /* Temperature bar */
480   .progress-bar-wrapper:before {
481     content: " ";
482     display: block;
483     position: absolute;
484     z-index: 3;
485     bottom: -5px;
486     left: -1px;
487     height: 5px;
488     width: 100%;
489     border: 1px solid #ccc;
490     border-top: 0;
491     background: -moz-linear-gradient(left, #ff0000 0%, #66ff00 100%); /* FF3.6+ */
492     background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0000), color-stop(100%,#66ff00)); /* Chrome,Safari4+ */
493     background: -webkit-linear-gradient(left, #ff0000 0%,#66ff00 100%); /* Chrome10+,Safari5.1+ */
494     background: -o-linear-gradient(left, #ff0000 0%,#66ff00 100%); /* Opera 11.10+ */
495     background: -ms-linear-gradient(left, #ff0000 0%,#66ff00 100%); /* IE10+ */
496     background: linear-gradient(to right, #ff0000 0%,#66ff00 100%); /* W3C */
497     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#66ff00',GradientType=1 ); /* IE6-9 */
498   }
499
500   /* Annual budget */
501   .progress-bar-wrapper:after {
502     content: attr(data-total);
503     display: block;
504     position: absolute;
505     top: -22px;
506     right: 0;
507     background: #fff;
508     color: #ccc;
509     font-size: 0.9em;
510   }
511
512
513
514 /* FDN Form */
515 .fdn-form {}
516   .fdn-form select,
517   .fdn-form input {
518     display: inline-block;
519     vertical-align: top;
520     margin-right: 1em;
521     height: 26px;
522   }
523   .fdn-form #custom-amount {
524     display:none;
525     height: 22px;
526   }
527
528
529 /* Paymium Bitcoin */
530 .paymium-btns {padding-left: 0;}
531 .paymium-btns li {
532   list-style: none;
533   display: inline-block;
534   margin: 0 0.5em 0.5em 0;
535 }
536
537 .paymium-btn {
538   display: inline-block;
539   min-width: 10em;
540   padding: 4px 44px 4px 10px;
541   padding-right: 44px;
542   background: #4d7b99 url(assets/paymium_btc.png) right center no-repeat;
543   border-radius: 4px;
544   text-align: center;
545   color: #fff;
546   text-decoration: none;
547   font-weight: bold;
548 }
549 .paymium-btn:hover{
550   background-color:#5081a0;
551   text-decoration: none;
552 }
553 /* override over weighted selector*/
554 #content .paymium-btn {color: #fff;text-decoration: none;}
555 #content .paymium-btn:hover {color: #fff;text-decoration: none;}
556
557
558 /* {{{ .inlinepage */
559
560 .inlinepage {
561         padding: 0;
562         border: none;
563         margin-bottom: 1em;
564 }
565
566 .inlinepage .header {
567         border-bottom: solid #ccc 1px;
568 }
569
570 .inlinepage .inlineheader .pagedate {
571         margin-top: 0;
572         font-size: 0.8em;
573         font-style: normal;
574         color: #666;
575 }
576
577 /* .inlinepage }}} */
578
579 /* {{{ #footer */
580 #footer {
581         margin: 0;
582         padding: 0.5em 0;
583         text-align: center;
584         color: white;
585         background: #57075f;
586 }
587 @media screen and (max-width: 400px) {
588   #footer {
589     font-size: 0.85em;
590     padding: 0.5em 1em;
591   }
592 }
593 #footer > div {
594     margin-top: 1em;
595 }
596
597
598 #footer a {
599         color: white;
600   text-decoration: none;
601 }
602
603 #footer a:hover {
604         text-decoration: underline;
605 }
606
607 #backlinks {
608         font-size: 0.8em;
609         margin-top: 0;
610 }
611
612 #footer #pageinfo div {
613         font-size: 0.8em;
614         margin-top: 0;
615         margin-bottom: 0;
616 }
617 /* #footer }}} */
618
619 /* {{{ @media print */
620 @media print {
621         .menu,
622         .actions,
623         .feedlink,
624         #backlinks,
625         #otherlanguages {
626                 display: none;
627         }
628
629         #footer,
630         #footer #pageinfo,
631         .page,
632         .pageheader,
633         #pagebody {
634             margin: 0;
635             padding: 0;
636             border: none;
637             box-shadow: none;
638         }
639
640         .page,
641         .pageheader {
642                 border-radius: 0;
643         }
644
645         .pageheader {
646                 position: static;
647                 height: auto;
648         }
649
650         .pageheader .header {
651                 margin-left: 0;
652                 padding-top: 2em;
653                 padding-bottom: 1em;
654         }
655
656         .pageheader .header > span,
657         .parentlinks .parentlinksep {
658                 display: inline;
659                 height: auto;
660         }
661
662         .pageheader a,
663         .pageheader .parentlinks a {
664                 color: #111;
665         }
666
667         .pageheader,
668         .parentlinks a,
669         .parentlinks .parentlinksep + a + .parentlinksep + a {
670                 background: none;
671         }
672
673         .pageheader .parentlinks {
674                 display: inline;
675         }
676
677         .pageheader .title,
678         .parentlinks > a {
679                 position: static;
680         }
681
682         .parentlinks > a span {
683                 display: inline;
684         }
685
686   main h1 {
687     color: #111;
688     text-shadow: none;
689     border-bottom: solid #ccc 1px;
690   }
691
692         main a:link:after,
693         main a:visited:after {
694                 content:" [" attr(href) "] ";
695         }
696
697         #footer {
698                 margin-top: 2em;
699                 text-align: left;
700         }
701 }
702 /* @media print }}} */