@cryptotaxi247 / kubo / commits / 514701ab0

Adds meta viewport to enable responsive behavior; starts rearranging css for clarity

Jessica Schilling committed Apr 30, 2020 at 17:15 UTC 514701ab06f3f7a83353426801296db9f37d6105
1 file changed +234 -239
dir-index.html
+234 -239
@@ -2,248 +2,11 @@
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <!-- helper to construct this is here: https://github.com/cryptix/exp/blob/master/imgesToCSSData/convert.go -->
7 <style>
8
8 -html {
9 - font-family: sans-serif;
10 - -webkit-text-size-adjust: 100%;
11 - -ms-text-size-adjust: 100%
12 -}
13 -
14 -body {
15 - margin: 0
16 -}
17 -
18 -a {
19 - background-color: transparent
20 -}
21 -
22 -a:active,
23 -a:hover {
24 - outline: 0
25 -}
26 -
27 -strong {
28 - font-weight: 700
29 -}
30 -
31 -button::-moz-focus-inner,
32 -input::-moz-focus-inner {
33 - padding: 0;
34 - border: 0
35 -}
36 -
37 -table {
38 - border-spacing: 0;
39 - border-collapse: collapse
40 -}
41 -
42 -td {
43 - padding: 0
44 -}
45 -
46 -
47 -/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
48 -
49 -@media print {
50 - *,
51 - :after,
52 - :before {
53 - color: #000!important;
54 - text-shadow: none!important;
55 - background: 0 0!important;
56 - -webkit-box-shadow: none!important;
57 - box-shadow: none!important
58 - }
59 - a,
60 - a:visited {
61 - text-decoration: underline
62 - }
63 - a[href]:after {
64 - content: " (" attr(href) ")"
65 - }
66 - tr {
67 - page-break-inside: avoid
68 - }
69 - .table {
70 - border-collapse: collapse!important
71 - }
72 - .table td {
73 - background-color: #fff!important
74 - }
75 -}
76 -
77 -@font-face {
78 - font-family: 'Glyphicons Halflings';
79 - src: url(../fonts/glyphicons-halflings-regular.eot);
80 - src: url(../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'), url(../fonts/glyphicons-halflings-regular.woff2) format('woff2'), url(../fonts/glyphicons-halflings-regular.woff) format('woff'), url(../fonts/glyphicons-halflings-regular.ttf) format('truetype'), url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')
81 -}
82 -
83 -* {
84 - -webkit-box-sizing: border-box;
85 - -moz-box-sizing: border-box;
86 - box-sizing: border-box
87 -}
88 -
89 -:after,
90 -:before {
91 - -webkit-box-sizing: border-box;
92 - -moz-box-sizing: border-box;
93 - box-sizing: border-box
94 -}
95 -
96 -html {
97 - font-size: 10px;
98 - -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
99 -}
100 -
101 -body {
102 - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
103 - font-size: 14px;
104 - line-height: 1.42857143;
105 - color: #333;
106 - background-color: #fff
107 -}
108 -
109 -a {
110 - color: #337ab7;
111 - text-decoration: none
112 -}
113 -
114 -a:focus,
115 -a:hover {
116 - color: #23527c;
117 - text-decoration: underline
118 -}
119 -
120 -a:focus {
121 - outline: thin dotted;
122 - outline: 5px auto -webkit-focus-ring-color;
123 - outline-offset: -2px
124 -}
125 -
126 -.row {
127 - margin-right: -15px;
128 - margin-left: -15px
129 -}
130 -
131 -.col-xs-12,
132 -.col-xs-2 {
133 - position: relative;
134 - min-height: 1px;
135 - padding-right: 15px;
136 - padding-left: 15px
137 -}
138 -
139 -.col-xs-12,
140 -.col-xs-2 {
141 - float: left
142 -}
143 -
144 -.col-xs-12 {
145 - width: 100%
146 -}
147 -
148 -.col-xs-2 {
149 - width: 16.66666667%
150 -}
151 -
152 -table {
153 - background-color: transparent
154 -}
155 -
156 -.table {
157 - width: 100%;
158 - max-width: 100%;
159 - margin-bottom: 20px
160 -}
161 -
162 -.table>tbody>tr>td {
163 - padding: 8px;
164 - line-height: 1.42857143;
165 - vertical-align: top;
166 - border-top: 1px solid #ddd
167 -}
168 -
169 -.table-striped>tbody>tr:nth-of-type(odd) {
170 - background-color: #f9f9f9
171 -}
172 -
173 -.form-control::-moz-placeholder {
174 - color: #999;
175 - opacity: 1
176 -}
177 -
178 -.form-control:-ms-input-placeholder {
179 - color: #999
180 -}
181 -
182 -.panel {
183 - margin-bottom: 20px;
184 - background-color: #fff;
185 - border: 1px solid transparent;
186 - border-radius: 4px;
187 - -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
188 - box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
189 -}
190 -
191 -.panel-heading {
192 - padding: 10px 15px;
193 - border-bottom: 1px solid transparent;
194 - border-top-left-radius: 3px;
195 - border-top-right-radius: 3px
196 -}
197 -
198 -.panel>.table {
199 - margin-bottom: 0
200 -}
201 -
202 -.panel>.table:last-child {
203 - border-bottom-right-radius: 3px;
204 - border-bottom-left-radius: 3px
205 -}
206 -
207 -.panel>.table:last-child>tbody:last-child>tr:last-child {
208 - border-bottom-right-radius: 3px;
209 - border-bottom-left-radius: 3px
210 -}
211 -
212 -.panel>.table:last-child>tbody:last-child>tr:last-child td:first-child {
213 - border-bottom-left-radius: 3px
214 -}
215 -
216 -.panel>.table:last-child>tbody:last-child>tr:last-child td:last-child {
217 - border-bottom-right-radius: 3px
218 -}
219 -
220 -.panel>.table>tbody:first-child>tr:first-child td {
221 - border-top: 0
222 -}
223 -
224 -.panel-default {
225 - border-color: #ddd
226 -}
227 -
228 -.panel-default>.panel-heading {
229 - color: #333;
230 - background-color: #f5f5f5;
231 - border-color: #ddd
232 -}
233 -
234 -.row:after,
235 -.row:before {
236 - display: table;
237 - content: " "
238 -}
239 -
240 -.row:after {
241 - clear: both
242 -}
243 -
244 -@-ms-viewport {
245 - width: device-width
246 -}
9 +/* ICONS AS INLINE DATA */
10
11 .ipfs-_blank {
12 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAWBJREFUeNqEUj1LxEAQnd1MVA4lyIEWx6UIKEGUExGsbC3tLfwJ/hT/g7VlCnubqxXBwg/Q4hQP/LhKL5nZuBsvuGfW5MGyuzM7jzdvVuR5DgYnZ+f99ai7Vt5t9K9unu4HLweI3qWYxI6PDosdy0fhcntxO44CcOBzPA7mfEyuHwf7ntQk4jcnywOxIlfxOCNYaLVgb6cXbkTdhJXq2SIlNMC0xIqhHczDbi8OVzpLSUa0WebRfmigLHqj1EcPZnwf7gbDIrYVRyEinurj6jTBHyI7pqVrFQqEbt6TEmZ9v1NRAJNC1xTYxIQh/MmRUlmFQE3qWOW1nqB2TWk1/3tgJV0waVvkFIEeZbHq4ElyKzAmEXOx6gnEVJuWBzmkRJBRPYGZBDsVaOlpSgVJE2yVaAe/0kx/3azBRO0VsbMFZE3CDSZKweZfYIVg+DZ6v7h9GDVOwZPw/PoxKu/fAgwALbDAXf7DdQkAAAAASUVORK5CYII=');
@@ -630,6 +393,238 @@ table {
393 background-size: contain
394 }
395
396 +/* REGULAR CSS STYLING STUFF */
397 +
398 +html {
399 + font-family: sans-serif;
400 + -webkit-text-size-adjust: 100%;
401 + -ms-text-size-adjust: 100%;
402 + font-size: 10px;
403 + -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
404 +}
405 +
406 +body {
407 + margin: 0;
408 + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
409 + font-size: 14px;
410 + line-height: 1.42857143;
411 + color: #333;
412 + background-color: #fff;
413 +}
414 +
415 +a {
416 + background-color: transparent;
417 +}
418 +
419 +a:active,
420 +a:hover {
421 + outline: 0;
422 +}
423 +
424 +strong {
425 + font-weight: 700;
426 +}
427 +
428 +button::-moz-focus-inner,
429 +input::-moz-focus-inner {
430 + padding: 0;
431 + border: 0;
432 +}
433 +
434 +table {
435 + border-spacing: 0;
436 + border-collapse: collapse;
437 +}
438 +
439 +td {
440 + padding: 0;
441 +}
442 +
443 +
444 +/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
445 +
446 +@media print {
447 + *,
448 + :after,
449 + :before {
450 + color: #000!important;
451 + text-shadow: none!important;
452 + background: 0 0!important;
453 + -webkit-box-shadow: none!important;
454 + box-shadow: none!important;
455 + }
456 + a,
457 + a:visited {
458 + text-decoration: underline;
459 + }
460 + a[href]:after {
461 + content: " (" attr(href) ")"
462 + }
463 + tr {
464 + page-break-inside: avoid;
465 + }
466 + .table {
467 + border-collapse: collapse!important
468 + }
469 + .table td {
470 + background-color: #fff!important
471 + }
472 +}
473 +
474 +* {
475 + -webkit-box-sizing: border-box;
476 + -moz-box-sizing: border-box;
477 + box-sizing: border-box;
478 +}
479 +
480 +:after,
481 +:before {
482 + -webkit-box-sizing: border-box;
483 + -moz-box-sizing: border-box;
484 + box-sizing: border-box;
485 +}
486 +
487 +
488 +
489 +
490 +
491 +a {
492 + color: #337ab7;
493 + text-decoration: none;
494 +}
495 +
496 +a:focus,
497 +a:hover {
498 + color: #23527c;
499 + text-decoration: underline;
500 +}
501 +
502 +a:focus {
503 + outline: thin dotted;
504 + outline: 5px auto -webkit-focus-ring-color;
505 + outline-offset: -2px;
506 +}
507 +
508 +.row {
509 + margin-right: -15px;
510 + margin-left: -15px;
511 +}
512 +
513 +.col-xs-12,
514 +.col-xs-2 {
515 + float: left;
516 + position: relative;
517 + min-height: 1px;
518 + padding-right: 15px;
519 + padding-left: 15px;
520 +}
521 +
522 +.col-xs-12 {
523 + width: 100%;
524 +}
525 +
526 +.col-xs-2 {
527 + width: 16.66666667%;
528 +}
529 +
530 +table {
531 + background-color: transparent;
532 +}
533 +
534 +.table {
535 + width: 100%;
536 + max-width: 100%;
537 + margin-bottom: 20px;
538 +}
539 +
540 +.table>tbody>tr>td {
541 + padding: 8px;
542 + line-height: 1.42857143;
543 + vertical-align: top;
544 + border-top: 1px solid #ddd;
545 +}
546 +
547 +.table-striped>tbody>tr:nth-of-type(odd) {
548 + background-color: #f9f9f9;
549 +}
550 +
551 +.form-control::-moz-placeholder {
552 + color: #999;
553 + opacity: 1;
554 +}
555 +
556 +.form-control:-ms-input-placeholder {
557 + color: #999;
558 +}
559 +
560 +.panel {
561 + margin-bottom: 20px;
562 + background-color: #fff;
563 + border: 1px solid transparent;
564 + border-radius: 4px;
565 + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
566 + box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
567 +}
568 +
569 +.panel-heading {
570 + padding: 10px 15px;
571 + border-bottom: 1px solid transparent;
572 + border-top-left-radius: 3px;
573 + border-top-right-radius: 3px;
574 +}
575 +
576 +.panel>.table {
577 + margin-bottom: 0;
578 +}
579 +
580 +.panel>.table:last-child {
581 + border-bottom-right-radius: 3px;
582 + border-bottom-left-radius: 3px;
583 +}
584 +
585 +.panel>.table:last-child>tbody:last-child>tr:last-child {
586 + border-bottom-right-radius: 3px;
587 + border-bottom-left-radius: 3px;
588 +}
589 +
590 +.panel>.table:last-child>tbody:last-child>tr:last-child td:first-child {
591 + border-bottom-left-radius: 3px;
592 +}
593 +
594 +.panel>.table:last-child>tbody:last-child>tr:last-child td:last-child {
595 + border-bottom-right-radius: 3px;
596 +}
597 +
598 +.panel>.table>tbody:first-child>tr:first-child td {
599 + border-top: 0;
600 +}
601 +
602 +.panel-default {
603 + border-color: #ddd;
604 +}
605 +
606 +.panel-default>.panel-heading {
607 + color: #333;
608 + background-color: #f5f5f5;
609 + border-color: #ddd;
610 +}
611 +
612 +.row:after,
613 +.row:before {
614 + display: table;
615 + content: " "
616 +}
617 +
618 +.row:after {
619 + clear: both;
620 +}
621 +
622 +@-ms-viewport {
623 + width: device-width;
624 +}
625 +
626 +/* THESE STYLES WERE ADDED LATER */
627 +
628 .narrow {
629 width: 0px;
630 }