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