├── public
├── images
│ ├── weixin.jpg
│ └── weixinpay_head.jpg
└── css
│ └── css.css
├── package.json
├── README.md
├── Dockerfile
├── server.js
└── views
├── index.html
└── weixin.html
/public/images/weixin.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/malaohu/Ali-Weixin-QRPay/HEAD/public/images/weixin.jpg
--------------------------------------------------------------------------------
/public/images/weixinpay_head.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/malaohu/Ali-Weixin-QRPay/HEAD/public/images/weixinpay_head.jpg
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Ali-Weixin-QRPay",
3 | "version": "0.0.1",
4 | "author": "malaohu",
5 | "description": "将支付宝微信付款码合并成一个二维码",
6 | "dependencies": {
7 | "express" : "4.*",
8 | "ejs" : "*"
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 支付宝微信付款码合二为一
2 |
3 | ## 使用必读
4 | 使用前请做以下修改
5 | 1. 修改server.js 文件,alipay_link 替换成你自己的支付宝付款码的链家。
6 | 2. 替换图片 public/images/weixin.jpg 图片,换成你自己的微信二维码,为了美观最好保持默认大小。
7 |
8 |
9 | ## 部署向导
10 | 需要Nodejs 0.12.0(含) +
11 |
12 | 推荐使用NVM安装 http://51.ruyo.net/p/3214.html#3
13 |
14 | ```
15 | git clone https://github.com/malaohu/Ali-Weixin-QRPay.git
16 | cd Ali-Weixin-QRPay
17 | npm install
18 | node server.js
19 | ```
20 |
21 | ## 在线演示
22 | http://onepay.jike.info/
23 |
--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM readytalk/nodejs
2 |
3 | WORKDIR /app
4 | WORKDIR /app/views
5 | WORKDIR /app/public
6 | WORKDIR /app/public/css
7 | WORKDIR /app/public/images
8 | COPY server.js /app/
9 | COPY package.json /app/
10 | COPY views/index.html /app/views
11 | COPY views/weixin.html /app/views
12 | COPY public/css/css.css /app/public/css
13 | COPY public/images/weixin.jpg /app/public/images
14 | COPY public/images/weixinpay_head.jpg /app/public/images
15 | RUN npm install
16 | CMD node /app/server.js
17 |
--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
1 | var express = require('express');
2 | var app = express();
3 |
4 | app.use(express.static(__dirname + '/public'));
5 | app.engine('.html', require('ejs').__express);
6 | app.set('views', __dirname + '/views');
7 |
8 | app.get('/', function(req, res) {
9 | res.render('./index.html',{});
10 | });
11 |
12 | //使用前一定要替换以下地址
13 | var alipay_link = 'HTTPS://QR.ALIPAY.COM/FKX030126KTDDQSMUS9AA3';
14 |
15 | app.get('/code',function(req,res){
16 | var ua = req.headers['user-agent'];
17 | if(/MicroMessenger\//.test(ua))
18 | {
19 | res.render('./weixin.html',{});
20 | }else if(/AlipayClient\//.test(ua))
21 | {
22 | res.redirect(alipay_link);
23 | }else
24 | res.send('请使用微信或者支付宝客户端扫码');
25 | });
26 |
27 | app.listen(3999, function () {
28 | console.log('Example app listening on port 3999')
29 | })
30 |
--------------------------------------------------------------------------------
/views/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 收款码合并 - 如有乐享 - 51.RUYO.net
7 |
8 |
9 |
10 |
11 |
12 |
13 |
22 |
23 |
24 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/views/weixin.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 微信支付
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
43 |
44 |
45 |
46 |

47 |
48 |
49 |
50 |

51 |
长按二维码识别,向商家付款
52 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/public/css/css.css:
--------------------------------------------------------------------------------
1 | @media screen and (min-width: 35.5em) {
2 | .u-sm-1,
3 | .u-sm-1-1,
4 | .u-sm-1-2,
5 | .u-sm-1-3,
6 | .u-sm-2-3,
7 | .u-sm-1-4,
8 | .u-sm-3-4,
9 | .u-sm-1-5,
10 | .u-sm-2-5,
11 | .u-sm-3-5,
12 | .u-sm-4-5,
13 | .u-sm-5-5,
14 | .u-sm-1-6,
15 | .u-sm-5-6,
16 | .u-sm-1-8,
17 | .u-sm-3-8,
18 | .u-sm-5-8,
19 | .u-sm-7-8,
20 | .u-sm-1-12,
21 | .u-sm-5-12,
22 | .u-sm-7-12,
23 | .u-sm-11-12,
24 | .u-sm-1-24,
25 | .u-sm-2-24,
26 | .u-sm-3-24,
27 | .u-sm-4-24,
28 | .u-sm-5-24,
29 | .u-sm-6-24,
30 | .u-sm-7-24,
31 | .u-sm-8-24,
32 | .u-sm-9-24,
33 | .u-sm-10-24,
34 | .u-sm-11-24,
35 | .u-sm-12-24,
36 | .u-sm-13-24,
37 | .u-sm-14-24,
38 | .u-sm-15-24,
39 | .u-sm-16-24,
40 | .u-sm-17-24,
41 | .u-sm-18-24,
42 | .u-sm-19-24,
43 | .u-sm-20-24,
44 | .u-sm-21-24,
45 | .u-sm-22-24,
46 | .u-sm-23-24,
47 | .u-sm-24-24 {
48 | display: inline-block;
49 | *display: inline;
50 | zoom: 1;
51 | letter-spacing: normal;
52 | word-spacing: normal;
53 | vertical-align: top;
54 | text-rendering: auto;
55 | }
56 |
57 | .u-sm-1-24 {
58 | width: 4.1667%;
59 | *width: 4.1357%;
60 | }
61 |
62 | .u-sm-1-12,
63 | .u-sm-2-24 {
64 | width: 8.3333%;
65 | *width: 8.3023%;
66 | }
67 |
68 | .u-sm-1-8,
69 | .u-sm-3-24 {
70 | width: 12.5000%;
71 | *width: 12.4690%;
72 | }
73 |
74 | .u-sm-1-6,
75 | .u-sm-4-24 {
76 | width: 16.6667%;
77 | *width: 16.6357%;
78 | }
79 |
80 | .u-sm-1-5 {
81 | width: 20%;
82 | *width: 19.9690%;
83 | }
84 |
85 | .u-sm-5-24 {
86 | width: 20.8333%;
87 | *width: 20.8023%;
88 | }
89 |
90 | .u-sm-1-4,
91 | .u-sm-6-24 {
92 | width: 25%;
93 | *width: 24.9690%;
94 | }
95 |
96 | .u-sm-7-24 {
97 | width: 29.1667%;
98 | *width: 29.1357%;
99 | }
100 |
101 | .u-sm-1-3,
102 | .u-sm-8-24 {
103 | width: 33.3333%;
104 | *width: 33.3023%;
105 | }
106 |
107 | .u-sm-3-8,
108 | .u-sm-9-24 {
109 | width: 37.5000%;
110 | *width: 37.4690%;
111 | }
112 |
113 | .u-sm-2-5 {
114 | width: 40%;
115 | *width: 39.9690%;
116 | }
117 |
118 | .u-sm-5-12,
119 | .u-sm-10-24 {
120 | width: 41.6667%;
121 | *width: 41.6357%;
122 | }
123 |
124 | .u-sm-11-24 {
125 | width: 45.8333%;
126 | *width: 45.8023%;
127 | }
128 |
129 | .u-sm-1-2,
130 | .u-sm-12-24 {
131 | width: 50%;
132 | *width: 49.9690%;
133 | }
134 |
135 | .u-sm-13-24 {
136 | width: 54.1667%;
137 | *width: 54.1357%;
138 | }
139 |
140 | .u-sm-7-12,
141 | .u-sm-14-24 {
142 | width: 58.3333%;
143 | *width: 58.3023%;
144 | }
145 |
146 | .u-sm-3-5 {
147 | width: 60%;
148 | *width: 59.9690%;
149 | }
150 |
151 | .u-sm-5-8,
152 | .u-sm-15-24 {
153 | width: 62.5000%;
154 | *width: 62.4690%;
155 | }
156 |
157 | .u-sm-2-3,
158 | .u-sm-16-24 {
159 | width: 66.6667%;
160 | *width: 66.6357%;
161 | }
162 |
163 | .u-sm-17-24 {
164 | width: 70.8333%;
165 | *width: 70.8023%;
166 | }
167 |
168 | .u-sm-3-4,
169 | .u-sm-18-24 {
170 | width: 75%;
171 | *width: 74.9690%;
172 | }
173 |
174 | .u-sm-19-24 {
175 | width: 79.1667%;
176 | *width: 79.1357%;
177 | }
178 |
179 | .u-sm-4-5 {
180 | width: 80%;
181 | *width: 79.9690%;
182 | }
183 |
184 | .u-sm-5-6,
185 | .u-sm-20-24 {
186 | width: 83.3333%;
187 | *width: 83.3023%;
188 | }
189 |
190 | .u-sm-7-8,
191 | .u-sm-21-24 {
192 | width: 87.5000%;
193 | *width: 87.4690%;
194 | }
195 |
196 | .u-sm-11-12,
197 | .u-sm-22-24 {
198 | width: 91.6667%;
199 | *width: 91.6357%;
200 | }
201 |
202 | .u-sm-23-24 {
203 | width: 95.8333%;
204 | *width: 95.8023%;
205 | }
206 |
207 | .u-sm-1,
208 | .u-sm-1-1,
209 | .u-sm-5-5,
210 | .u-sm-24-24 {
211 | width: 100%;
212 | }
213 | }
214 |
215 | @media screen and (min-width: 48em) {
216 | .u-md-1,
217 | .u-md-1-1,
218 | .u-md-1-2,
219 | .u-md-1-3,
220 | .u-md-2-3,
221 | .u-md-1-4,
222 | .u-md-3-4,
223 | .u-md-1-5,
224 | .u-md-2-5,
225 | .u-md-3-5,
226 | .u-md-4-5,
227 | .u-md-5-5,
228 | .u-md-1-6,
229 | .u-md-5-6,
230 | .u-md-1-8,
231 | .u-md-3-8,
232 | .u-md-5-8,
233 | .u-md-7-8,
234 | .u-md-1-12,
235 | .u-md-5-12,
236 | .u-md-7-12,
237 | .u-md-11-12,
238 | .u-md-1-24,
239 | .u-md-2-24,
240 | .u-md-3-24,
241 | .u-md-4-24,
242 | .u-md-5-24,
243 | .u-md-6-24,
244 | .u-md-7-24,
245 | .u-md-8-24,
246 | .u-md-9-24,
247 | .u-md-10-24,
248 | .u-md-11-24,
249 | .u-md-12-24,
250 | .u-md-13-24,
251 | .u-md-14-24,
252 | .u-md-15-24,
253 | .u-md-16-24,
254 | .u-md-17-24,
255 | .u-md-18-24,
256 | .u-md-19-24,
257 | .u-md-20-24,
258 | .u-md-21-24,
259 | .u-md-22-24,
260 | .u-md-23-24,
261 | .u-md-24-24 {
262 | display: inline-block;
263 | *display: inline;
264 | zoom: 1;
265 | letter-spacing: normal;
266 | word-spacing: normal;
267 | vertical-align: top;
268 | text-rendering: auto;
269 | }
270 |
271 | .u-md-1-24 {
272 | width: 4.1667%;
273 | *width: 4.1357%;
274 | }
275 |
276 | .u-md-1-12,
277 | .u-md-2-24 {
278 | width: 8.3333%;
279 | *width: 8.3023%;
280 | }
281 |
282 | .u-md-1-8,
283 | .u-md-3-24 {
284 | width: 12.5000%;
285 | *width: 12.4690%;
286 | }
287 |
288 | .u-md-1-6,
289 | .u-md-4-24 {
290 | width: 16.6667%;
291 | *width: 16.6357%;
292 | }
293 |
294 | .u-md-1-5 {
295 | width: 20%;
296 | *width: 19.9690%;
297 | }
298 |
299 | .u-md-5-24 {
300 | width: 20.8333%;
301 | *width: 20.8023%;
302 | }
303 |
304 | .u-md-1-4,
305 | .u-md-6-24 {
306 | width: 25%;
307 | *width: 24.9690%;
308 | }
309 |
310 | .u-md-7-24 {
311 | width: 29.1667%;
312 | *width: 29.1357%;
313 | }
314 |
315 | .u-md-1-3,
316 | .u-md-8-24 {
317 | width: 33.3333%;
318 | *width: 33.3023%;
319 | }
320 |
321 | .u-md-3-8,
322 | .u-md-9-24 {
323 | width: 37.5000%;
324 | *width: 37.4690%;
325 | }
326 |
327 | .u-md-2-5 {
328 | width: 40%;
329 | *width: 39.9690%;
330 | }
331 |
332 | .u-md-5-12,
333 | .u-md-10-24 {
334 | width: 41.6667%;
335 | *width: 41.6357%;
336 | }
337 |
338 | .u-md-11-24 {
339 | width: 45.8333%;
340 | *width: 45.8023%;
341 | }
342 |
343 | .u-md-1-2,
344 | .u-md-12-24 {
345 | width: 50%;
346 | *width: 49.9690%;
347 | }
348 |
349 | .u-md-13-24 {
350 | width: 54.1667%;
351 | *width: 54.1357%;
352 | }
353 |
354 | .u-md-7-12,
355 | .u-md-14-24 {
356 | width: 58.3333%;
357 | *width: 58.3023%;
358 | }
359 |
360 | .u-md-3-5 {
361 | width: 60%;
362 | *width: 59.9690%;
363 | }
364 |
365 | .u-md-5-8,
366 | .u-md-15-24 {
367 | width: 62.5000%;
368 | *width: 62.4690%;
369 | }
370 |
371 | .u-md-2-3,
372 | .u-md-16-24 {
373 | width: 66.6667%;
374 | *width: 66.6357%;
375 | }
376 |
377 | .u-md-17-24 {
378 | width: 70.8333%;
379 | *width: 70.8023%;
380 | }
381 |
382 | .u-md-3-4,
383 | .u-md-18-24 {
384 | width: 75%;
385 | *width: 74.9690%;
386 | }
387 |
388 | .u-md-19-24 {
389 | width: 79.1667%;
390 | *width: 79.1357%;
391 | }
392 |
393 | .u-md-4-5 {
394 | width: 80%;
395 | *width: 79.9690%;
396 | }
397 |
398 | .u-md-5-6,
399 | .u-md-20-24 {
400 | width: 83.3333%;
401 | *width: 83.3023%;
402 | }
403 |
404 | .u-md-7-8,
405 | .u-md-21-24 {
406 | width: 87.5000%;
407 | *width: 87.4690%;
408 | }
409 |
410 | .u-md-11-12,
411 | .u-md-22-24 {
412 | width: 91.6667%;
413 | *width: 91.6357%;
414 | }
415 |
416 | .u-md-23-24 {
417 | width: 95.8333%;
418 | *width: 95.8023%;
419 | }
420 |
421 | .u-md-1,
422 | .u-md-1-1,
423 | .u-md-5-5,
424 | .u-md-24-24 {
425 | width: 100%;
426 | }
427 | }
428 |
429 | @media screen and (min-width: 58em) {
430 | .u-lg-1,
431 | .u-lg-1-1,
432 | .u-lg-1-2,
433 | .u-lg-1-3,
434 | .u-lg-2-3,
435 | .u-lg-1-4,
436 | .u-lg-3-4,
437 | .u-lg-1-5,
438 | .u-lg-2-5,
439 | .u-lg-3-5,
440 | .u-lg-4-5,
441 | .u-lg-5-5,
442 | .u-lg-1-6,
443 | .u-lg-5-6,
444 | .u-lg-1-8,
445 | .u-lg-3-8,
446 | .u-lg-5-8,
447 | .u-lg-7-8,
448 | .u-lg-1-12,
449 | .u-lg-5-12,
450 | .u-lg-7-12,
451 | .u-lg-11-12,
452 | .u-lg-1-24,
453 | .u-lg-2-24,
454 | .u-lg-3-24,
455 | .u-lg-4-24,
456 | .u-lg-5-24,
457 | .u-lg-6-24,
458 | .u-lg-7-24,
459 | .u-lg-8-24,
460 | .u-lg-9-24,
461 | .u-lg-10-24,
462 | .u-lg-11-24,
463 | .u-lg-12-24,
464 | .u-lg-13-24,
465 | .u-lg-14-24,
466 | .u-lg-15-24,
467 | .u-lg-16-24,
468 | .u-lg-17-24,
469 | .u-lg-18-24,
470 | .u-lg-19-24,
471 | .u-lg-20-24,
472 | .u-lg-21-24,
473 | .u-lg-22-24,
474 | .u-lg-23-24,
475 | .u-lg-24-24 {
476 | display: inline-block;
477 | *display: inline;
478 | zoom: 1;
479 | letter-spacing: normal;
480 | word-spacing: normal;
481 | vertical-align: top;
482 | text-rendering: auto;
483 | }
484 |
485 | .u-lg-1-24 {
486 | width: 4.1667%;
487 | *width: 4.1357%;
488 | }
489 |
490 | .u-lg-1-12,
491 | .u-lg-2-24 {
492 | width: 8.3333%;
493 | *width: 8.3023%;
494 | }
495 |
496 | .u-lg-1-8,
497 | .u-lg-3-24 {
498 | width: 12.5000%;
499 | *width: 12.4690%;
500 | }
501 |
502 | .u-lg-1-6,
503 | .u-lg-4-24 {
504 | width: 16.6667%;
505 | *width: 16.6357%;
506 | }
507 |
508 | .u-lg-1-5 {
509 | width: 20%;
510 | *width: 19.9690%;
511 | }
512 |
513 | .u-lg-5-24 {
514 | width: 20.8333%;
515 | *width: 20.8023%;
516 | }
517 |
518 | .u-lg-1-4,
519 | .u-lg-6-24 {
520 | width: 25%;
521 | *width: 24.9690%;
522 | }
523 |
524 | .u-lg-7-24 {
525 | width: 29.1667%;
526 | *width: 29.1357%;
527 | }
528 |
529 | .u-lg-1-3,
530 | .u-lg-8-24 {
531 | width: 33.3333%;
532 | *width: 33.3023%;
533 | }
534 |
535 | .u-lg-3-8,
536 | .u-lg-9-24 {
537 | width: 37.5000%;
538 | *width: 37.4690%;
539 | }
540 |
541 | .u-lg-2-5 {
542 | width: 40%;
543 | *width: 39.9690%;
544 | }
545 |
546 | .u-lg-5-12,
547 | .u-lg-10-24 {
548 | width: 41.6667%;
549 | *width: 41.6357%;
550 | }
551 |
552 | .u-lg-11-24 {
553 | width: 45.8333%;
554 | *width: 45.8023%;
555 | }
556 |
557 | .u-lg-1-2,
558 | .u-lg-12-24 {
559 | width: 50%;
560 | *width: 49.9690%;
561 | }
562 |
563 | .u-lg-13-24 {
564 | width: 54.1667%;
565 | *width: 54.1357%;
566 | }
567 |
568 | .u-lg-7-12,
569 | .u-lg-14-24 {
570 | width: 58.3333%;
571 | *width: 58.3023%;
572 | }
573 |
574 | .u-lg-3-5 {
575 | width: 60%;
576 | *width: 59.9690%;
577 | }
578 |
579 | .u-lg-5-8,
580 | .u-lg-15-24 {
581 | width: 62.5000%;
582 | *width: 62.4690%;
583 | }
584 |
585 | .u-lg-2-3,
586 | .u-lg-16-24 {
587 | width: 66.6667%;
588 | *width: 66.6357%;
589 | }
590 |
591 | .u-lg-17-24 {
592 | width: 70.8333%;
593 | *width: 70.8023%;
594 | }
595 |
596 | .u-lg-3-4,
597 | .u-lg-18-24 {
598 | width: 75%;
599 | *width: 74.9690%;
600 | }
601 |
602 | .u-lg-19-24 {
603 | width: 79.1667%;
604 | *width: 79.1357%;
605 | }
606 |
607 | .u-lg-4-5 {
608 | width: 80%;
609 | *width: 79.9690%;
610 | }
611 |
612 | .u-lg-5-6,
613 | .u-lg-20-24 {
614 | width: 83.3333%;
615 | *width: 83.3023%;
616 | }
617 |
618 | .u-lg-7-8,
619 | .u-lg-21-24 {
620 | width: 87.5000%;
621 | *width: 87.4690%;
622 | }
623 |
624 | .u-lg-11-12,
625 | .u-lg-22-24 {
626 | width: 91.6667%;
627 | *width: 91.6357%;
628 | }
629 |
630 | .u-lg-23-24 {
631 | width: 95.8333%;
632 | *width: 95.8023%;
633 | }
634 |
635 | .u-lg-1,
636 | .u-lg-1-1,
637 | .u-lg-5-5,
638 | .u-lg-24-24 {
639 | width: 100%;
640 | }
641 | }
642 |
643 | @media screen and (min-width: 75em) {
644 | .u-xl-1,
645 | .u-xl-1-1,
646 | .u-xl-1-2,
647 | .u-xl-1-3,
648 | .u-xl-2-3,
649 | .u-xl-1-4,
650 | .u-xl-3-4,
651 | .u-xl-1-5,
652 | .u-xl-2-5,
653 | .u-xl-3-5,
654 | .u-xl-4-5,
655 | .u-xl-5-5,
656 | .u-xl-1-6,
657 | .u-xl-5-6,
658 | .u-xl-1-8,
659 | .u-xl-3-8,
660 | .u-xl-5-8,
661 | .u-xl-7-8,
662 | .u-xl-1-12,
663 | .u-xl-5-12,
664 | .u-xl-7-12,
665 | .u-xl-11-12,
666 | .u-xl-1-24,
667 | .u-xl-2-24,
668 | .u-xl-3-24,
669 | .u-xl-4-24,
670 | .u-xl-5-24,
671 | .u-xl-6-24,
672 | .u-xl-7-24,
673 | .u-xl-8-24,
674 | .u-xl-9-24,
675 | .u-xl-10-24,
676 | .u-xl-11-24,
677 | .u-xl-12-24,
678 | .u-xl-13-24,
679 | .u-xl-14-24,
680 | .u-xl-15-24,
681 | .u-xl-16-24,
682 | .u-xl-17-24,
683 | .u-xl-18-24,
684 | .u-xl-19-24,
685 | .u-xl-20-24,
686 | .u-xl-21-24,
687 | .u-xl-22-24,
688 | .u-xl-23-24,
689 | .u-xl-24-24 {
690 | display: inline-block;
691 | *display: inline;
692 | zoom: 1;
693 | letter-spacing: normal;
694 | word-spacing: normal;
695 | vertical-align: top;
696 | text-rendering: auto;
697 | }
698 |
699 | .u-xl-1-24 {
700 | width: 4.1667%;
701 | *width: 4.1357%;
702 | }
703 |
704 | .u-xl-1-12,
705 | .u-xl-2-24 {
706 | width: 8.3333%;
707 | *width: 8.3023%;
708 | }
709 |
710 | .u-xl-1-8,
711 | .u-xl-3-24 {
712 | width: 12.5000%;
713 | *width: 12.4690%;
714 | }
715 |
716 | .u-xl-1-6,
717 | .u-xl-4-24 {
718 | width: 16.6667%;
719 | *width: 16.6357%;
720 | }
721 |
722 | .u-xl-1-5 {
723 | width: 20%;
724 | *width: 19.9690%;
725 | }
726 |
727 | .u-xl-5-24 {
728 | width: 20.8333%;
729 | *width: 20.8023%;
730 | }
731 |
732 | .u-xl-1-4,
733 | .u-xl-6-24 {
734 | width: 25%;
735 | *width: 24.9690%;
736 | }
737 |
738 | .u-xl-7-24 {
739 | width: 29.1667%;
740 | *width: 29.1357%;
741 | }
742 |
743 | .u-xl-1-3,
744 | .u-xl-8-24 {
745 | width: 33.3333%;
746 | *width: 33.3023%;
747 | }
748 |
749 | .u-xl-3-8,
750 | .u-xl-9-24 {
751 | width: 37.5000%;
752 | *width: 37.4690%;
753 | }
754 |
755 | .u-xl-2-5 {
756 | width: 40%;
757 | *width: 39.9690%;
758 | }
759 |
760 | .u-xl-5-12,
761 | .u-xl-10-24 {
762 | width: 41.6667%;
763 | *width: 41.6357%;
764 | }
765 |
766 | .u-xl-11-24 {
767 | width: 45.8333%;
768 | *width: 45.8023%;
769 | }
770 |
771 | .u-xl-1-2,
772 | .u-xl-12-24 {
773 | width: 50%;
774 | *width: 49.9690%;
775 | }
776 |
777 | .u-xl-13-24 {
778 | width: 54.1667%;
779 | *width: 54.1357%;
780 | }
781 |
782 | .u-xl-7-12,
783 | .u-xl-14-24 {
784 | width: 58.3333%;
785 | *width: 58.3023%;
786 | }
787 |
788 | .u-xl-3-5 {
789 | width: 60%;
790 | *width: 59.9690%;
791 | }
792 |
793 | .u-xl-5-8,
794 | .u-xl-15-24 {
795 | width: 62.5000%;
796 | *width: 62.4690%;
797 | }
798 |
799 | .u-xl-2-3,
800 | .u-xl-16-24 {
801 | width: 66.6667%;
802 | *width: 66.6357%;
803 | }
804 |
805 | .u-xl-17-24 {
806 | width: 70.8333%;
807 | *width: 70.8023%;
808 | }
809 |
810 | .u-xl-3-4,
811 | .u-xl-18-24 {
812 | width: 75%;
813 | *width: 74.9690%;
814 | }
815 |
816 | .u-xl-19-24 {
817 | width: 79.1667%;
818 | *width: 79.1357%;
819 | }
820 |
821 | .u-xl-4-5 {
822 | width: 80%;
823 | *width: 79.9690%;
824 | }
825 |
826 | .u-xl-5-6,
827 | .u-xl-20-24 {
828 | width: 83.3333%;
829 | *width: 83.3023%;
830 | }
831 |
832 | .u-xl-7-8,
833 | .u-xl-21-24 {
834 | width: 87.5000%;
835 | *width: 87.4690%;
836 | }
837 |
838 | .u-xl-11-12,
839 | .u-xl-22-24 {
840 | width: 91.6667%;
841 | *width: 91.6357%;
842 | }
843 |
844 | .u-xl-23-24 {
845 | width: 95.8333%;
846 | *width: 95.8023%;
847 | }
848 |
849 | .u-xl-1,
850 | .u-xl-1-1,
851 | .u-xl-5-5,
852 | .u-xl-24-24 {
853 | width: 100%;
854 | }
855 | }
856 | * {
857 | -webkit-box-sizing: border-box;
858 | -moz-box-sizing: border-box;
859 | box-sizing: border-box;
860 | }
861 |
862 | *:before,
863 | *:after {
864 | -webkit-box-sizing: border-box;
865 | -moz-box-sizing: border-box;
866 | box-sizing: border-box;
867 | }
868 |
869 | html, button, input, select, textarea,
870 | .pure-g [class *= "pure-u"] {
871 | font-family: sans-serif;
872 | font-weight: 100;
873 | letter-spacing: 0.01em;
874 | }
875 |
876 |
877 | /* --------------------------
878 | * Element Styles
879 | * --------------------------
880 | */
881 |
882 | body {
883 | min-width: 320px;
884 | color: #777;
885 | line-height: 1.6;
886 | }
887 |
888 | h1, h2, h3, h4, h5, h6 {
889 | font-weight: bold;
890 | color: rgb(75, 75, 75);
891 | }
892 | h3 {
893 | font-size: 1.25em;
894 | }
895 | h4 {
896 | font-size: 1.125em;
897 | }
898 |
899 | a {
900 | color: #3b8bba; /* block-background-text-normal */
901 | text-decoration: none;
902 | }
903 |
904 | a:visited {
905 | color: #265778; /* block-normal-text-normal */
906 | }
907 |
908 | dt {
909 | font-weight: bold;
910 | }
911 | dd {
912 | margin: 0 0 10px 0;
913 | }
914 |
915 | aside {
916 | background: #1f8dd6; /* same color as selected state on site menu */
917 | padding: 0.3em 1em;
918 | border-radius: 3px;
919 | color: #fff;
920 | }
921 | aside a, aside a:visited {
922 | color: rgb(169, 226, 255);
923 | }
924 |
925 |
926 | /* --------------------------
927 | * Layout Styles
928 | * --------------------------
929 | */
930 |
931 | /* Navigation Push Styles */
932 | #layout {
933 | position: relative;
934 | padding-left: 0;
935 | }
936 | #layout.active #menu {
937 | left: 160px;
938 | width: 160px;
939 | }
940 |
941 | /* Apply the .box class on the immediate parent of any grid element (pure-u-*) to apply some padding. */
942 | .l-box {
943 | padding: 1em;
944 | }
945 |
946 | .l-wrap {
947 | margin-left: auto;
948 | margin-right: auto;
949 | }
950 | .content .l-wrap {
951 | margin-left: -1em;
952 | margin-right: -1em;
953 | }
954 |
955 |
956 | /* --------------------------
957 | * Header Module Styles
958 | * --------------------------
959 | */
960 |
961 | .header {
962 | font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
963 | max-width: 768px;
964 | margin: 0 auto;
965 | padding: 1em;
966 | text-align: center;
967 | border-bottom: 1px solid #eee;
968 | background: #fff;
969 | letter-spacing: 0.05em;
970 | }
971 | .header h1 {
972 | font-size: 300%;
973 | font-weight: 100;
974 | margin: 0;
975 | }
976 | .header h2 {
977 | font-size: 125%;
978 | font-weight: 100;
979 | line-height: 1.5;
980 | margin: 0;
981 | color: #666;
982 | letter-spacing: -0.02em;
983 | }
984 |
985 |
986 | /* --------------------------
987 | * Content Module Styles
988 | * --------------------------
989 | */
990 |
991 | /* The content div is placed as a wrapper around all the docs */
992 | .content {
993 | margin-left: auto;
994 | margin-right: auto;
995 | padding-left: 1em;
996 | padding-right: 1em;
997 | max-width: 768px;
998 | }
999 |
1000 | .content .content-subhead {
1001 | margin: 2em 0 1em 0;
1002 | font-weight: 300;
1003 | color: #888;
1004 | position: relative;
1005 | }
1006 |
1007 | .content .content-spaced {
1008 | line-height: 1.8;
1009 | }
1010 |
1011 | .content .content-quote {
1012 | font-family: "Georgia", serif;
1013 | color: #666;
1014 | font-style: italic;
1015 | line-height: 1.8;
1016 | border-left: 5px solid #ddd;
1017 | padding-left: 1.5em;
1018 | }
1019 |
1020 | .content-link {
1021 | position: absolute;
1022 | top: 0;
1023 | right: 0;
1024 | display: block;
1025 | height: 100%;
1026 | width: 20px;
1027 | background: transparent url('/img/link-icon.png') no-repeat center center;
1028 | background-size: 20px 20px;
1029 | }
1030 |
1031 | @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
1032 | .content-link {
1033 | background-image: url('/img/link-icon@2x.png');
1034 | }
1035 | }
1036 |
1037 |
1038 | /* --------------------------
1039 | * Code Styles
1040 | * --------------------------
1041 | */
1042 |
1043 | pre,
1044 | code {
1045 | font-family: Consolas, Courier, monospace;
1046 | color: #333;
1047 | background: rgb(250, 250, 250);
1048 | }
1049 |
1050 | code {
1051 | padding: 0.2em 0.4em;
1052 | white-space: nowrap;
1053 | }
1054 | .content p code {
1055 | font-size: 90%;
1056 | }
1057 |
1058 | .code {
1059 | margin-left: -1em;
1060 | margin-right: -1em;
1061 | padding: 1em;
1062 | border: 1px solid #eee;
1063 | border-left-width: 0;
1064 | border-right-width: 0;
1065 | overflow-x: auto;
1066 | -webkit-overflow-scrolling: touch;
1067 | }
1068 | .code code {
1069 | font-size: 95%;
1070 | white-space: pre;
1071 | word-wrap: normal;
1072 | padding: 0;
1073 | background: none;
1074 | }
1075 | .code-wrap code {
1076 | white-space: pre-wrap;
1077 | word-wrap: break-word;
1078 | }
1079 |
1080 | /* --------------------------
1081 | * Footer Module Styles
1082 | * --------------------------
1083 | */
1084 |
1085 | .footer {
1086 | font-size: 87.5%;
1087 | border-top: 1px solid #eee;
1088 | margin-top: 3.4286em;
1089 | padding: 1.1429em;
1090 | background: rgb(250, 250, 250);
1091 | }
1092 |
1093 | .legal {
1094 | line-height: 1.6;
1095 | text-align: center;
1096 | margin: 0 auto;
1097 | }
1098 |
1099 | .legal-license {
1100 | margin-top: 0;
1101 | }
1102 | .legal-links {
1103 | list-style: none;
1104 | padding: 0;
1105 | margin-bottom: 0;
1106 | }
1107 | .legal-copyright {
1108 | margin-top: 0;
1109 | margin-bottom: 0;
1110 | }
1111 |
1112 |
1113 | /* --------------------------
1114 | * Main Navigation Bar Styles
1115 | * --------------------------
1116 | */
1117 |
1118 | /* Add transition to containers so they can push in and out */
1119 | #layout,
1120 | #menu,
1121 | .menu-link {
1122 | -webkit-transition: all 0.2s ease-out;
1123 | -moz-transition: all 0.2s ease-out;
1124 | -ms-transition: all 0.2s ease-out;
1125 | -o-transition: all 0.2s ease-out;
1126 | transition: all 0.2s ease-out;
1127 | }
1128 |
1129 | #layout.active .menu-link {
1130 | left: 160px;
1131 | }
1132 |
1133 | #menu {
1134 | margin-left: -160px; /* "#menu" width */
1135 | width: 160px;
1136 | position: fixed;
1137 | top: 0;
1138 | left: 0;
1139 | bottom: 0;
1140 | z-index: 1000; /* so the menu or its navicon stays above all content */
1141 | background: #191818;
1142 | overflow-y: auto;
1143 | -webkit-overflow-scrolling: touch;
1144 | }
1145 | #menu a {
1146 | color: #999;
1147 | border: none;
1148 | white-space: normal;
1149 | padding: 0.625em 1em;
1150 | }
1151 |
1152 | #menu .pure-menu-open {
1153 | background: transparent;
1154 | border: 0;
1155 | }
1156 |
1157 | #menu .pure-menu ul {
1158 | border: none;
1159 | background: transparent;
1160 | display: block;
1161 | }
1162 |
1163 | #menu .pure-menu ul,
1164 | #menu .pure-menu .menu-item-divided {
1165 | border-top: 1px solid #333;
1166 | }
1167 |
1168 | #menu .pure-menu li a:hover,
1169 | #menu .pure-menu li a:focus {
1170 | background: #333;
1171 | }
1172 |
1173 | .menu-link {
1174 | position: fixed;
1175 | display: block; /* show this only on small screens */
1176 | top: 0;
1177 | left: 0; /* "#menu width" */
1178 | background: #000;
1179 | background: rgba(0,0,0,0.7);
1180 | font-size: 11px; /* change this value to increase/decrease button size */
1181 | z-index: 10;
1182 | width: 4em;
1183 | height: 4em;
1184 | padding: 1em;
1185 | }
1186 |
1187 | .menu-link:hover,
1188 | .menu-link:focus {
1189 | background: #000;
1190 | }
1191 |
1192 | .menu-link span {
1193 | position: relative;
1194 | display: block;
1195 | margin-top: 0.9em;
1196 | }
1197 |
1198 | .menu-link span,
1199 | .menu-link span:before,
1200 | .menu-link span:after {
1201 | background-color: #fff;
1202 | width: 100%;
1203 | height: .2em;
1204 | -webkit-transition: all 0.4s;
1205 | -moz-transition: all 0.4s;
1206 | -ms-transition: all 0.4s;
1207 | -o-transition: all 0.4s;
1208 | transition: all 0.4s;
1209 | }
1210 |
1211 | .menu-link span:before,
1212 | .menu-link span:after {
1213 | position: absolute;
1214 | top: -.55em;
1215 | content: " ";
1216 | }
1217 |
1218 | .menu-link span:after {
1219 | top: .55em;
1220 | }
1221 |
1222 | .menu-link.active span {
1223 | background: transparent;
1224 | }
1225 |
1226 | .menu-link.active span:before {
1227 | -webkit-transform: rotate(45deg) translate(.5em, .4em);
1228 | -moz-transform: rotate(45deg) translate(.5em, .4em);
1229 | -ms-transform: rotate(45deg) translate(.5em, .4em);
1230 | -o-transform: rotate(45deg) translate(.5em, .4em);
1231 | transform: rotate(45deg) translate(.5em, .4em);
1232 | }
1233 |
1234 | .menu-link.active span:after {
1235 | -webkit-transform: rotate(-45deg) translate(.4em, -.3em);
1236 | -moz-transform: rotate(-45deg) translate(.4em, -.3em);
1237 | -ms-transform: rotate(-45deg) translate(.4em, -.3em);
1238 | -o-transform: rotate(-45deg) translate(.4em, -.3em);
1239 | transform: rotate(-45deg) translate(.4em, -.3em);
1240 | }
1241 |
1242 | #menu .pure-menu-heading {
1243 | font-size: 125%;
1244 | font-weight: 300;
1245 | letter-spacing: 0.1em;
1246 | color: #fff;
1247 | margin-top: 0;
1248 | padding: 0.5em 0.8em;
1249 | text-transform: uppercase;
1250 | }
1251 | #menu .pure-menu-heading:hover,
1252 | #menu .pure-menu-heading:focus {
1253 | color: #999;
1254 | }
1255 |
1256 | #menu .pure-menu-selected {
1257 | background: #1f8dd6;
1258 | }
1259 |
1260 | #menu .pure-menu-selected a {
1261 | color: #fff;
1262 | }
1263 |
1264 | #menu li.pure-menu-selected a:hover,
1265 | #menu li.pure-menu-selected a:focus {
1266 | background: none;
1267 | }
1268 |
1269 |
1270 |
1271 | /* ---------------------
1272 | * Smaller Module Styles
1273 | * ---------------------
1274 | */
1275 |
1276 | .pure-img-responsive {
1277 | max-width: 100%;
1278 | height: auto;
1279 | }
1280 |
1281 | .pure-paginator .pure-button {
1282 | -webkit-box-sizing: content-box;
1283 | -moz-box-sizing: content-box;
1284 | box-sizing: content-box;
1285 | }
1286 |
1287 | .pure-button {
1288 | font-family: inherit;
1289 | }
1290 | a.pure-button-primary {
1291 | color: white;
1292 | }
1293 |
1294 |
1295 | /* green call to action button class */
1296 | .notice {
1297 | background-color: #61B842;
1298 | color: white;
1299 | }
1300 |
1301 | .muted {
1302 | color: #ccc;
1303 | }
1304 |
1305 |
1306 |
1307 | /* -------------
1308 | * Table Styles
1309 | * -------------
1310 | */
1311 |
1312 | .pure-table th,
1313 | .pure-table td {
1314 | padding: 0.5em 1em;
1315 | }
1316 |
1317 | .table-responsive {
1318 | margin-left: -1em;
1319 | margin-right: -1em;
1320 | overflow-x: auto;
1321 | -webkit-overflow-scrolling: touch;
1322 | margin-bottom: 1em;
1323 | }
1324 | .table-responsive table {
1325 | width: 100%;
1326 | min-width: 35.5em;
1327 | border-left-width: 0;
1328 | border-right-width: 0;
1329 | }
1330 |
1331 | .table-responsive .mq-table {
1332 | width: 100%;
1333 | min-width: 44em;
1334 | }
1335 | .mq-table th.highlight {
1336 | background-color: rgb(255, 234, 133);
1337 | }
1338 | .mq-table td.highlight {
1339 | background-color: rgb(255, 250, 229);
1340 | }
1341 | .mq-table th.highlight code,
1342 | .mq-table td.highlight code {
1343 | background: rgb(255, 255, 243);
1344 | }
1345 | .mq-table-mq code {
1346 | font-size: 0.875em;
1347 | }
1348 |
1349 | /* ----------------------------
1350 | * Example for full-width Grids
1351 | * ----------------------------
1352 | */
1353 |
1354 | .grids-example {
1355 | background: rgb(250, 250, 250);
1356 | margin: 2em auto;
1357 | border-top: 1px solid #ddd;
1358 | border-bottom: 1px solid #ddd;
1359 | }
1360 |
1361 | /* --------------------------
1362 | * State Rules
1363 | * --------------------------
1364 | */
1365 |
1366 |
1367 | .is-code-full {
1368 | text-align: center;
1369 | }
1370 | .is-code-full .code {
1371 | margin-left: auto;
1372 | margin-right: auto;
1373 | }
1374 |
1375 |
1376 | /* --------------------------
1377 | * Responsive Styles
1378 | * --------------------------
1379 | */
1380 |
1381 | @media screen and (min-width: 35.5em) {
1382 |
1383 | .legal-license {
1384 | text-align: left;
1385 | margin: 0;
1386 | }
1387 | .legal-copyright,
1388 | .legal-links,
1389 | .legal-links li {
1390 | text-align: right;
1391 | margin: 0;
1392 | }
1393 |
1394 | }
1395 |
1396 | @media screen and (min-width: 48em) {
1397 |
1398 | .l-wrap,
1399 | .l-wrap .content {
1400 | padding-left: 1em;
1401 | padding-right: 1em;
1402 | }
1403 | .content .l-wrap {
1404 | margin-left: -2em;
1405 | margin-right: -2em;
1406 | }
1407 |
1408 | .header,
1409 | .content {
1410 | padding-left: 2em;
1411 | padding-right: 2em;
1412 | }
1413 |
1414 | .header h1 {
1415 | font-size: 320%;
1416 | }
1417 | .header h2 {
1418 | font-size: 128%;
1419 | }
1420 |
1421 | .content p {
1422 | font-size: 1.125em;
1423 | }
1424 |
1425 | .code {
1426 | margin-left: auto;
1427 | margin-right: auto;
1428 | border-left-width: 1px;
1429 | border-right-width: 1px;
1430 | }
1431 |
1432 | .table-responsive {
1433 | margin-left: auto;
1434 | margin-right: auto;
1435 | }
1436 | .table-responsive table {
1437 | border-left-width: 1px;
1438 | border-right-width: 1px;
1439 | }
1440 |
1441 | }
1442 |
1443 | @media (max-width: 58em) {
1444 | /* Only apply this when the window is smaller. Otherwise, the following
1445 | case results in extra padding on the left:
1446 | * Make the window small. (Rotate to portrait on a mobile.)
1447 | * Tap the menu to trigger the active state.
1448 | * Make the window large again. (Rotate to landscape on mobile.)
1449 | */
1450 | #layout.active {
1451 | position: relative;
1452 | left: 160px;
1453 | }
1454 | }
1455 |
1456 | @media (min-width: 58em) {
1457 |
1458 | #layout {
1459 | padding-left: 160px; /* left col width "#menu" */
1460 | left: 0;
1461 | }
1462 | #menu {
1463 | left: 160px;
1464 | }
1465 | .menu-link {
1466 | position: fixed;
1467 | left: 160px;
1468 | display: none;
1469 | }
1470 | #layout.active .menu-link {
1471 | left: 160px;
1472 | }
1473 |
1474 | }
1475 |
1476 | /**
1477 | * Baby Blue theme for RainbowJS
1478 | *
1479 | * @author tilomitra
1480 | */
1481 |
1482 | pre .comment {
1483 | color: #999;
1484 | }
1485 |
1486 | pre .tag,
1487 | pre .tag-name,
1488 | pre .support.tag-name {
1489 | color: rgb(85, 85, 85);
1490 | }
1491 |
1492 | pre .keyword,
1493 | pre .css-property,
1494 | pre .vendor-prefix,
1495 | pre .sass,
1496 | pre .class,
1497 | pre .id,
1498 | pre .css-value,
1499 | pre .entity.function,
1500 | pre .storage.function {
1501 | font-weight: bold;
1502 | }
1503 |
1504 | pre .css-property,
1505 | pre .css-value,
1506 | pre .vendor-prefix,
1507 | pre .support.namespace {
1508 | color: #333;
1509 | }
1510 |
1511 | pre .constant.numeric,
1512 | pre .keyword.unit,
1513 | pre .hex-color {
1514 | font-weight: normal;
1515 | color: #099;
1516 | }
1517 |
1518 | pre .attribute,
1519 | pre .variable,
1520 | pre .support {
1521 | color: #757575; /* skinbuilder block-page-text-normal with #1f8dd6 as primary */
1522 | }
1523 |
1524 | pre .string,
1525 | pre .support.value {
1526 | font-weight: normal;
1527 | color: #3b8bba; /* skinbuilder block-mine-text-low with #1f8dd6 as primary */
1528 | }
--------------------------------------------------------------------------------