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