logo

1-pixel-wealth

Source code for <https://mkorostoff.github.io/1-pixel-wealth/>: Wealth shown to scale

main.css (16084B)


  1. body, html {
  2. margin: 0;
  3. }
  4. body,
  5. html,
  6. .wealth-wrapper-outer
  7. .wealth-row {
  8. min-height: 100%;
  9. }
  10. .title-screen {
  11. width: 100vw;
  12. }
  13. h1 {
  14. text-align: center;
  15. font-size: 60px;
  16. line-height: 0.9;
  17. width: 100%;
  18. margin-top: 100px;
  19. }
  20. .scroll-this-way {
  21. align-self: flex-end;
  22. width: 360px;
  23. height: 165px;
  24. position: absolute;
  25. right: 0;
  26. bottom: 0;
  27. padding-top: 42px;
  28. padding-left: 48px;
  29. font-size: 30px;
  30. color: #00000033;
  31. background-image: url(img/right.svg);
  32. background-repeat: no-repeat;
  33. background-size: 50%;
  34. background-position: 50px 40px;
  35. animation-name: bouncy-arrow;
  36. animation-delay: 0;
  37. animation-iteration-count: infinite;
  38. animation-direction: forward;
  39. animation-duration: 3s;
  40. }
  41. .footer {
  42. position: absolute;
  43. bottom: 40px;
  44. text-align: center;
  45. font-size: 12px;
  46. width: 100%;
  47. }
  48. @media (max-width: 450px) {
  49. .scroll-this-way {
  50. right: -35vw;
  51. }
  52. }
  53. @keyframes bouncy-arrow {
  54. 0% {background-position: 50px 40px;}
  55. 20% {background-position: 50px 40px;}
  56. 25% {background-position: 70px 40px;}
  57. 30% {background-position: 45px 40px;}
  58. 35% {background-position: 70px 40px;}
  59. 40% {background-position: 50px 40px;}
  60. 100% {background-position: 50px 40px;}
  61. }
  62. .wealth-wrapper-outer {
  63. font-family: sans-serif;
  64. overflow: visible;
  65. display: inline-block;
  66. }
  67. .center-sticky {
  68. position: sticky;
  69. left: 50%;
  70. transform: translate(-50%, 0);
  71. }
  72. .navigation {
  73. position: fixed;
  74. bottom: 15px;
  75. left: 50%;
  76. transform: translate(-50%, 0);
  77. display: flex;
  78. }
  79. .navigation .button {
  80. color: rgba(0,0,0,0);
  81. width: 20px;
  82. display: block;
  83. height: 20px;
  84. border-radius: 100%;
  85. background-position: 5px;
  86. background-color: #d8d8d8;
  87. box-shadow: inset 1px 6px 12px #e2e2e2, inset -1px -10px 5px #a9a9a9, 1px 2px 1px #797979;
  88. overflow: hidden;
  89. margin: 4px;
  90. }
  91. .navigation .button-inner {
  92. background-repeat: no-repeat;
  93. background-size: 8px;
  94. height: 100%;
  95. background-position: 5px;
  96. }
  97. .navigation .prev-button .button-inner {
  98. background-image: url(img/prev.svg);
  99. }
  100. .navigation .next-button .button-inner {
  101. background-image: url(img/next.svg);
  102. background-position: 7px 5px;
  103. }
  104. .navigation .home-button .button-inner {
  105. background-image: url(img/house.svg);
  106. background-size: 12px;
  107. background-position: 4px 4px;
  108. }
  109. .navigation .about-button .button-inner {
  110. color: #999999;
  111. font-weight: bold;
  112. text-decoration: none;
  113. text-indent: 5px;
  114. line-height: 22px;
  115. }
  116. .wealth-row {
  117. display: inline-flex;
  118. }
  119. .arrow {
  120. margin-left: -6px;
  121. margin-top: 5px;
  122. }
  123. .wealth-wrapper {
  124. margin: 1em 3em;
  125. }
  126. .wealth {
  127. background-color: black;
  128. align-items: center;
  129. display: flex;
  130. }
  131. .title {
  132. margin-bottom: 5px;
  133. }
  134. .billion .wealth > .wealth-title {
  135. flex-basis: 110px;
  136. position: static;
  137. }
  138. .four-hundred .wealth > .wealth-title {
  139. flex-basis: 420px;
  140. }
  141. .four-hundred .infobox.intro {
  142. margin-left: 0;
  143. position: relative;
  144. width: auto;
  145. width: 10000px;
  146. }
  147. .wealth > .wealth-title {
  148. flex-basis: 1%;
  149. padding: 10px;
  150. }
  151. @media (max-width: 450px) {
  152. .wealth-title {
  153. font-size: 19px;
  154. }
  155. }
  156. .wealth-title {
  157. align-self: flex-start;
  158. position: sticky;
  159. left: 0;
  160. margin-bottom: 5px;
  161. color: black;
  162. margin-top: 0;
  163. }
  164. .text-infobox .title,
  165. .infobox .chart {
  166. max-width: 450px;
  167. }
  168. .infobox .chart img {
  169. max-width: 100%;
  170. }
  171. .infobox .chart,
  172. .infobox .title-square-wrapper,
  173. .infobox .title {
  174. font-weight: normal;
  175. line-height: 1.4;
  176. width: 96vw;
  177. max-width: 600px;
  178. }
  179. @media (max-width: 450px) {
  180. .infobox .midtext,
  181. .infobox .title {
  182. width: 90vw;
  183. }
  184. }
  185. .infobox.year-veteran .title {
  186. position: sticky;
  187. left: 0;
  188. }
  189. .infobox .chart,
  190. .infobox .piechart,
  191. .infobox .worldchart,
  192. .infobox .chart-outer,
  193. .infobox .midtext,
  194. .infobox .title-square-wrapper,
  195. .text-infobox .title {
  196. position: sticky;
  197. left: 50%;
  198. transform: translate(-50%);
  199. }
  200. @media (max-width: 450px) {
  201. .infobox.line-chart .chart-outer {
  202. left: 5px;
  203. width: 98vw;
  204. }
  205. .infobox .square,
  206. .infobox .title-square-wrapper,
  207. .infobox .piechart,
  208. .infobox .chart-outer,
  209. .infobox .midtext,
  210. .infobox .title {
  211. left: 10px;
  212. transform: none;
  213. }
  214. }
  215. .sub-infobox .square,
  216. .sub-infobox .midtext,
  217. .sub-infobox .title {
  218. position: static;
  219. }
  220. .infobox {
  221. z-index: 1;
  222. margin-left: 8000px;
  223. width: 15000px;
  224. }
  225. .four-hundred .infobox {
  226. width: 4000px;
  227. }
  228. .flex {
  229. display: flex;
  230. }
  231. .infobox.first {
  232. margin-left: 30000px;
  233. }
  234. .infobox.first .title {
  235. max-width: 390px;
  236. }
  237. .infobox.coming-up .title,
  238. .infobox.five-pixels .title {
  239. max-width: 280px;
  240. }
  241. .infobox-half {
  242. margin-left: 4000px;
  243. }
  244. .infobox-quarter {
  245. margin-left: 2000px;
  246. }
  247. .infobox-close {
  248. margin-left: 500px;
  249. }
  250. .sub-infobox {
  251. margin: 0 40px;
  252. }
  253. .sub-infobox .title {
  254. width: 430px;
  255. }
  256. .midtext-wrapper {
  257. display: flex;
  258. justify-content: space-around;
  259. margin-top: 150px;
  260. width: 60%;
  261. }
  262. .column-infobox .sub-infobox {
  263. margin-bottom: 20px;
  264. }
  265. .one-thousand {
  266. width: 1px;
  267. height: 1px;
  268. margin-top: 5px;
  269. }
  270. .median {
  271. width: 320px;
  272. }
  273. .median .wealth {
  274. width: 7.94px;
  275. height: 7.94px;
  276. }
  277. .explainer {
  278. font-size: 16px;
  279. font-weight: normal;
  280. }
  281. .million {
  282. width: 150px;
  283. }
  284. .million .wealth {
  285. width: 31.62px;
  286. height: 31.62px;
  287. background-color: #4CAF50;
  288. }
  289. .billion .wealth {
  290. width: 2000px;
  291. height: 500px;
  292. background-color: #03A9F4;
  293. }
  294. @media (max-width: 450px) {
  295. .billion .wealth {
  296. border-bottom: 3px dotted #007fb7;
  297. }
  298. }
  299. .bezos .wealth {
  300. width: 370000px;
  301. height: 500px;
  302. background-color: orange;
  303. }
  304. .four-hundred .wealth {
  305. margin-left: 100px;
  306. width: 6401200px;
  307. height: 500px;
  308. background-color: #03A9F4;
  309. }
  310. .ruler {
  311. background-image: url('img/ruler.svg');
  312. background-repeat: repeat-x;
  313. background-position: 0 470px;
  314. }
  315. .key {
  316. position: absolute;
  317. top: 450px;
  318. width: 170px;
  319. background-image: url(img/scale.svg);
  320. background-repeat: no-repeat;
  321. background-position: 0px 4px;
  322. display: flex;
  323. justify-content: center;
  324. }
  325. .key > span {
  326. display: inline-block;
  327. }
  328. .bezos .key > span {
  329. background-color: orange;
  330. }
  331. .four-hundred .key > span {
  332. background-color: #03A9F4;
  333. }
  334. .shadow {
  335. box-shadow: -3px 5px 10px;
  336. }
  337. .counter {
  338. align-self: flex-end;
  339. left: 10px;
  340. position: sticky;
  341. transform: translate(0, 27px);
  342. color: black;
  343. padding: 5px;
  344. min-width: 140px;
  345. }
  346. .lifetime .square {
  347. width: 41.23px;
  348. height: 41.23px;
  349. background-color: blue;
  350. }
  351. .healthcare .square {
  352. width: 4.96px;
  353. height: 4.96px;
  354. background-color: blue;
  355. }
  356. .amazon-year .square {
  357. width: 5.4px;
  358. height: 5.4px;
  359. background-color: blue;
  360. }
  361. .year-veteran .square {
  362. height: 400px;
  363. width: 1186px;
  364. margin-top: 5px;
  365. background-color: #8BC34A;
  366. }
  367. .year-veteran .title {
  368. width: auto;
  369. padding: 10px;
  370. max-width: 380px;
  371. left: 0;
  372. }
  373. .year-veteran .square {
  374. position: static;
  375. }
  376. @media (max-width: 450px) {
  377. .year-veteran .title {
  378. max-width: 210px;
  379. }
  380. .year-veteran .square {
  381. border-bottom: 4px dashed #75a23e;
  382. }
  383. }
  384. .year-chemo {
  385. width: auto;
  386. }
  387. .year-chemo .square {
  388. height: 400px;
  389. width: 22500px;
  390. background-color: #03A9F4;
  391. border: 5px dashed #0078af;
  392. box-sizing: border-box;
  393. }
  394. .year-chemo .square .title {
  395. padding: 10px;
  396. position: sticky;
  397. left: 1px;
  398. display: inline-block;
  399. }
  400. .year-chemo .key {
  401. top: 310px;
  402. }
  403. .year-chemo .key > span {
  404. background-color: #03A9F4;
  405. }
  406. .celebrities {
  407. display: flex;
  408. width: auto;
  409. }
  410. .beyonce .square {
  411. height: 350px;
  412. width: 1142px;
  413. background-color: #406994;
  414. }
  415. .goldman .square {
  416. width: 223px;
  417. height: 223px;
  418. background-color: #64A8F0;
  419. }
  420. .tim-cook .square {
  421. width: 1785px;
  422. height: 350px;
  423. background-color: #71889e;
  424. }
  425. .doctor .square {
  426. width: 81.8px;
  427. height: 81.8px;
  428. background-color: #0661b9;
  429. }
  430. .lawyer .square {
  431. width: 63.2px;
  432. height: 63.2px;
  433. background-color: #00478a;
  434. }
  435. .hedgefund .square {
  436. width: 289.8px;
  437. height: 289.8px;
  438. background-color: #9daebf;
  439. }
  440. .line-chart .chart-outer {
  441. width: 720px;
  442. max-width: 100vw;
  443. text-align: center;
  444. }
  445. .line-chart .chart-inner {
  446. height: 200px;
  447. overflow: hidden;
  448. margin-bottom: 5px;
  449. }
  450. .zoom.line-chart .chart-inner {
  451. transition: box-shadow .8s;
  452. box-shadow: inset 0 0 10px #00000042;
  453. }
  454. .zoom.line-chart svg {
  455. transition: all 1.5s;
  456. width: 940%;
  457. height: auto;
  458. margin-top: -102%;
  459. margin-left: -20%;
  460. }
  461. @media (max-width: 450px) {
  462. .line-chart .chart-inner .zero,
  463. .line-chart .chart-inner .two-hundred-million,
  464. .line-chart .chart-inner .zuck-name {
  465. font-size: 28px;
  466. }
  467. .zuck-wealth {
  468. font-size: 20px;
  469. }
  470. .line-chart .zero-outer {
  471. transform: translate(160px, 356px);
  472. }
  473. .desktop-zuck {
  474. display: none;
  475. }
  476. .zoom.line-chart svg {
  477. width: 1200%;
  478. margin-top: -120%;
  479. margin-left: -16%;
  480. }
  481. }
  482. @media (min-width: 451px) {
  483. .mobile-zuck {
  484. display: none;
  485. }
  486. }
  487. .zoom-out,
  488. .zoom .zoom-in {
  489. display: none;
  490. }
  491. .zoom .zoom-out {
  492. display: inline;
  493. }
  494. .no-single-human {
  495. margin-left: 18000px;
  496. }
  497. .no-single-human .title {
  498. max-width: 390px;
  499. }
  500. .people {
  501. background-image: url('img/person.svg');
  502. background-size: 20px;
  503. }
  504. .people.first {
  505. margin-top: -1040px;
  506. }
  507. .people-wrapper-outer h2 {
  508. font-size: 16px;
  509. font-weight: normal;
  510. text-align: center;
  511. margin: 5px;
  512. }
  513. .people-wrapper {
  514. width: 800px;
  515. height: 400px;
  516. overflow-y: auto;
  517. overflow-x: hidden;
  518. }
  519. .four-hundred-people .people {
  520. width: 800px;
  521. height: 400px;
  522. }
  523. .sixty-percent-people .people {
  524. width: 800px;
  525. height: 1974000px;
  526. }
  527. .sixty-percent-people .people-wrapper {
  528. box-shadow: inset 0 0 10px #000000;
  529. }
  530. .bubble {
  531. border-radius: 10px;
  532. font-weight: bold;
  533. box-shadow: 4px 4px 5px;
  534. font-size: 28px;
  535. background-color: white;
  536. text-align: center;
  537. padding: 10px;
  538. }
  539. .people-label {
  540. position: absolute;
  541. top: 40%;
  542. left: 39%;
  543. }
  544. .scroll-indicator {
  545. position: absolute;
  546. top: 40%;
  547. left: 260px;
  548. font-size: 18px;
  549. max-width: 240px;
  550. }
  551. .people-sub-label {
  552. font-weight: normal;
  553. font-style: italic;
  554. font-size: 14px;
  555. margin-top: 4px;
  556. }
  557. .people-wrapper .percent {
  558. background-color: rgb(255, 255, 255);
  559. font-size: 20px;
  560. font-weight: bold;
  561. display: inline-block;
  562. border-radius: 10px;
  563. box-shadow: 4px 4px 5px;
  564. padding: 10px;
  565. position: -webkit-sticky;
  566. position: sticky;
  567. margin-top: 1000px;
  568. top: 160px;
  569. margin-left: 350px;
  570. }
  571. @media (max-width: 450px) {
  572. .people {
  573. background-size: 10px;
  574. }
  575. .people-wrapper {
  576. width: 200px;
  577. height: 400px;
  578. }
  579. .four-hundred-people .people {
  580. width: 200px;
  581. height: 400px;
  582. }
  583. .sixty-percent-people .people {
  584. width: 200px;
  585. height: 1974000px;
  586. }
  587. .people-label {
  588. left: 35px;
  589. font-size: 20px;
  590. }
  591. .people-wrapper .percent {
  592. margin-left: 66px;
  593. }
  594. }
  595. .ninety-wrapper {
  596. width: 590px;
  597. max-width: 96vw;
  598. }
  599. .plane-wrapper {
  600. width: 480px;
  601. max-width: 96vw;
  602. }
  603. .ninety-wrapper img,
  604. .plane-wrapper img {
  605. width: 100%;
  606. height: auto;
  607. }
  608. .what-could-we-do.title {
  609. width: 330px;
  610. text-align: center;
  611. font-size: 25px;
  612. font-weight: bold;
  613. }
  614. .piechart {
  615. position: relative;
  616. }
  617. .piechart .piechart-outer {
  618. width: 300px;
  619. height: 300px;
  620. transform: rotate(-50deg);
  621. background: yellowgreen;
  622. border-radius: 50%;
  623. }
  624. .piechart .piechart-inner {
  625. fill: yellowgreen;
  626. stroke: #655;
  627. stroke-width: 32;
  628. }
  629. @media (max-width: 450px) {
  630. .piechart.piechart h2 {
  631. font-size: 17px;
  632. }
  633. }
  634. .point-zero-three-percent .piechart-inner {
  635. stroke-dasharray: .03 100;
  636. }
  637. .two-point-seven-percent .piechart-inner {
  638. stroke-dasharray: 2.7 100;
  639. }
  640. .three-percent .piechart-inner {
  641. stroke-dasharray: 3 100;
  642. }
  643. .five-percent .piechart-inner {
  644. stroke-dasharray: 5 100;
  645. }
  646. .five-point-three-percent .piechart-inner {
  647. stroke-dasharray: 5.3 100;
  648. }
  649. .six-percent .piechart-inner {
  650. stroke-dasharray: 6 100;
  651. }
  652. .seven-point-five-percent .piechart-inner {
  653. stroke-dasharray: 7.5 100;
  654. }
  655. .six-percent .piechart-outer {
  656. transform: rotate(-45deg);
  657. }
  658. .six-point-eight-percent .piechart-inner {
  659. stroke-dasharray: 6.8 100;
  660. }
  661. .three-percent .piechart-outer,
  662. .two-point-five-percent .piechart-outer,
  663. .two-point-seven-percent .piechart-outer,
  664. .two-point-eight-percent .piechart-outer {
  665. transform: rotate(-38deg);
  666. }
  667. .five-percent .piechart-outer,
  668. .four-percent .piechart-outer {
  669. transform: rotate(-43deg);
  670. }
  671. .four-tenths-percent .piechart-outer {
  672. transform: rotate(-34deg);
  673. }
  674. .seven-point-five-percent .piechart-outer,
  675. .six-point-three-percent .piechart-outer {
  676. transform: rotate(-46deg);
  677. }
  678. .four-tenths-percent .piechart-inner {
  679. stroke-dasharray: .4 100;
  680. }
  681. .two-point-five-percent .piechart-inner {
  682. stroke-dasharray: 2.5 100;
  683. }
  684. .two-point-eight-percent .piechart-inner {
  685. stroke-dasharray: 2.8 100;
  686. }
  687. .four-point-three-percent .piechart-inner {
  688. stroke-dasharray: 4.3 100;
  689. }
  690. .six-point-three-percent .piechart-inner {
  691. stroke-dasharray: 6.3 100;
  692. }
  693. .four-point-eight-percent .piechart-inner {
  694. stroke-dasharray: 4.8 100;
  695. }
  696. .forty-percent .piechart-inner {
  697. stroke-dasharray: 40 100;
  698. }
  699. .piechart .dotted-line {
  700. position: absolute;
  701. width: 80px;
  702. height: 0;
  703. top: 40px;
  704. left: 270px;
  705. border-top: 2px dashed black;
  706. transform: rotate(-38deg);
  707. }
  708. .piechart .label {
  709. position: absolute;
  710. left: 347px;
  711. top: -7px;
  712. font-size: 24px;
  713. }
  714. .piechart h2 {
  715. font-size: 20px;
  716. }
  717. @media (max-width: 450px) {
  718. .piechart .label {
  719. left: 277px;
  720. top: 43px;
  721. font-size: 18px;
  722. }
  723. .piechart .dotted-line {
  724. display: none;
  725. }
  726. }
  727. .piechart .description {
  728. width: 300px;
  729. text-align: center;
  730. }
  731. .about {
  732. visibility: hidden;
  733. transition: opacity .7s;
  734. opacity: 0;
  735. position: fixed;
  736. top: 0;
  737. left: 0;
  738. height: 100vh;
  739. width: 100vw;
  740. background-color: rgba(0, 0, 0, 0.65);
  741. }
  742. .about.open {
  743. visibility: visible;
  744. opacity: 1;
  745. }
  746. .modal-inner {
  747. opacity: 1;
  748. position: fixed;
  749. top: 15px;
  750. left: 50%;
  751. transform: translate(-50%, 0);
  752. height: 0;
  753. width: 0;
  754. overflow: scroll;
  755. transition: height .7s, width .7s;
  756. background-color: white;
  757. }
  758. .modal-text {
  759. width: calc(90vw - 40px);
  760. height: calc(95vh - 40px);
  761. overflow: visible;
  762. padding: 20px;
  763. }
  764. .about.open .modal-inner,
  765. .about.open .modal-inner {
  766. height: 95vh;
  767. width: 90vw;
  768. }
  769. .malaria .babies {
  770. height: 8800320px;
  771. background-size: 160px;
  772. background-image: url(img/baby.svg);
  773. }
  774. .malaria .babies-wrapper {
  775. box-shadow: inset 0 0 10px #00000042;
  776. width: 800px;
  777. height: 320px;
  778. overflow-y: scroll;
  779. overflow-x: hidden;
  780. }
  781. .baby-counter {
  782. top: 127px;
  783. position: sticky;
  784. display: inline-block;
  785. left: 350px;
  786. margin-top: 1800px;
  787. }
  788. @media (max-width: 450px) {
  789. .malaria .babies-wrapper {
  790. max-width: 340px;
  791. height: 340px;
  792. }
  793. .malaria .babies {
  794. background-size: 68px;
  795. height: 3740340px;
  796. }
  797. .scroll-indicator {
  798. top: 38%;
  799. left: 40px;
  800. }
  801. .baby-counter {
  802. left: 135px;
  803. }
  804. }
  805. .infectious {
  806. display: flex;
  807. align-items: center;
  808. }
  809. .ebola-bar {
  810. max-width: 300px;
  811. }
  812. .ebola-bar .title {
  813. max-width: 100%;
  814. }
  815. .ebola-bar .square {
  816. height: 122px;
  817. width: 122px;
  818. background-color: #00bb42;
  819. }
  820. .corona-bar .title,
  821. .malaria-bar .title {
  822. width: 100%;
  823. max-width: 100%;
  824. margin: 0;
  825. text-align: center;
  826. }
  827. .malaria-bar .square {
  828. height: 400px;
  829. width: 1022px;
  830. background-color: #66c35a;
  831. display: flex;
  832. box-sizing: border-box;
  833. align-items: center;
  834. }
  835. .corona-bar .square {
  836. height: 400px;
  837. width: 500px;
  838. background-color: green;
  839. display: flex;
  840. box-sizing: border-box;
  841. align-items: center;
  842. }
  843. .corona-bar,
  844. .malaria-bar,
  845. .ebola-bar {
  846. color: black;
  847. margin: 50px;
  848. padding: 15px;
  849. box-sizing: border-box;
  850. font-size: 14px;
  851. }
  852. @media (max-width: 450px) {
  853. h3 {
  854. font-size: 14px;
  855. }
  856. }
  857. .cares .chart {
  858. text-align: center;
  859. }
  860. .worldchart-wrapper {
  861. display: flex;
  862. }
  863. .worldchart {
  864. text-align: center;
  865. width: 320px;
  866. }
  867. .worldchart img {
  868. max-width: 100%;
  869. }
  870. .worldchart-wrapper .description {
  871. text-align: center;
  872. }
  873. .all-of-them .title {
  874. width: 370px;
  875. }
  876. @media (max-width: 450px) {
  877. .all-of-them .title {
  878. width: 340px;
  879. }
  880. }
  881. .instructions {
  882. transition: opacity 300ms;
  883. margin-top: 40px;
  884. max-width: 80%;
  885. color: black;
  886. font-size: 14px;
  887. opacity: 0;
  888. }
  889. .instructions.show {
  890. opacity: 1;
  891. }
  892. @media (max-width: 450px) {
  893. .instructions {
  894. display: none;
  895. }
  896. }
  897. .medical-chart {
  898. text-align: center;
  899. }