commit: 4b30afabcdf491baea6e77eb11359372a2aea86d
parent ce4f5e530bf32f6f234e1b95f144c1c941a2d80b
Author: Matt Korostoff <MKorostoff@gmail.com>
Date: Mon, 8 Mar 2021 10:58:05 -0500
Change bezos wealth to 176 billion, various style fixes
Diffstat:
3 files changed, 32 insertions(+), 16 deletions(-)
diff --git a/index.html b/index.html
@@ -24,7 +24,7 @@
<meta property="og:description" content="Wealth inequality in the United States is out of control. Here we visualize the issue in a unique way." />
<meta property="og:image" content="https://mkorostoff.github.io/1-pixel-wealth/img/off-the-chart.png" />
- <link rel="stylesheet" type="text/css" href="main.css?version=1.6">
+ <link rel="stylesheet" type="text/css" href="main.css?version=1.7">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
</head>
<body>
@@ -49,8 +49,8 @@
</div>
<div class="wealth-wrapper median">
- <h2 class="wealth-title">$63,179 (Median US household income)</h2>
- <div class="wealth"></div>
+ <h2 class="wealth-title">$68,000 <span class="explainer">(Median US household income)</span></h2>
+ <div class="wealth median-income"></div>
</div>
<div class="wealth-wrapper million">
@@ -58,7 +58,6 @@
<div class="wealth"></div>
</div>
-
<div class="wealth-wrapper billion">
<div class="wealth">
<h2 class="wealth-title">$1 billion</h2>
@@ -67,7 +66,7 @@
<div name="bezos" class="wealth-wrapper bezos">
<div id="bezos" class="wealth ruler">
- <h2 class="wealth-title">$200 billion (wealth of Jeff Bezos)</h2>
+ <h2 class="wealth-title">$176 billion (wealth of Jeff Bezos)</h2>
<div class="counter" id="bezos-counter"></div>
<div class="key">
<span>$80 million</span>
@@ -123,7 +122,7 @@
<div class="infobox infobox-half year-veteran">
<div class="square shadow">
- <div class="title">Annual cost to house every single homeless veteran.</div>
+ <div class="title">Annual cost to house every homeless veteran.</div>
</div>
</div>
@@ -222,12 +221,12 @@
<g id="Graphic_3">
<text class="desktop-zuck" transform="translate(715.2031 353.7383)" fill="black">
<tspan font-family="Arial" font-size="16" font-weight="400" fill="black" x="2.2226562" y="14">Mark Zuckerberg </tspan>
- <tspan class="zuck-wealth" font-family="Arial" font-size="12" font-weight="400" fill="black" x="26.663086" y="28.523438">($82 billion)</tspan>
+ <tspan class="zuck-wealth" font-family="Arial" font-size="12" font-weight="400" fill="black" x="26.663086" y="28.523438">($96 billion)</tspan>
</text>
<text class="mobile-zuck" transform="translate(668 353.7383)" fill="black">
<tspan class="zuck-name" font-family="Arial" font-size="16" font-weight="400" fill="black" x="55.36719" y="14">Mark </tspan>
<tspan class="zuck-name" font-family="Arial" font-size="16" font-weight="400" fill="black" x="12" y="41.523438">Zuckerberg </tspan>
- <tspan class="zuck-wealth" font-family="Arial" font-size="12" font-weight="400" fill="black" x="21.880859" y="67.046875">($82 billion)</tspan>
+ <tspan class="zuck-wealth" font-family="Arial" font-size="12" font-weight="400" fill="black" x="21.880859" y="67.046875">($96 billion)</tspan>
</text>
</g>
<g id="Graphic_5">
@@ -645,6 +644,6 @@
<a class="about-this" target="_blank" href="https://github.com/MKorostoff/1-pixel-wealth/blob/master/README.md">About this page</a>
</div>
-<script type="text/javascript" src="main.js?version=1.5"></script>
+<script type="text/javascript" src="main.js?version=1.7"></script>
</body>
</html>
diff --git a/main.css b/main.css
@@ -153,10 +153,11 @@ h1 {
.four-hundred .wealth > .wealth-title {
flex-basis: 420px;
}
-.four-hundred .intro {
+.four-hundred .infobox.intro {
margin-left: 0;
position: relative;
width: auto;
+ width: 10000px;
}
.wealth > .wealth-title {
flex-basis: 1%;
@@ -282,14 +283,18 @@ h1 {
margin-top: 5px;
}
.median {
- width: 480px;
+ width: 320px;
}
-.median .wealth{
+.median .wealth {
width: 7.94px;
height: 7.94px;
}
+.explainer {
+ font-size: 16px;
+ font-weight: normal;
+}
.million {
- width: 200px;
+ width: 150px;
}
.million .wealth {
width: 31.62px;
@@ -301,8 +306,13 @@ h1 {
height: 500px;
background-color: #03A9F4;
}
+@media (max-width: 450px) {
+ .billion .wealth {
+ border-bottom: 3px dotted #007fb7;
+ }
+}
.bezos .wealth {
- width: 400000px;
+ width: 352000px;
height: 500px;
background-color: orange;
}
@@ -378,6 +388,14 @@ h1 {
.year-veteran .square {
position: static;
}
+@media (max-width: 450px) {
+ .year-veteran .title {
+ max-width: 210px;
+ }
+ .year-veteran .square {
+ border-bottom: 4px dashed #75a23e;
+ }
+}
.year-chemo {
width: auto;
}
diff --git a/main.js b/main.js
@@ -74,12 +74,11 @@ babies.addEventListener('scroll', function(){
baby_counter.innerHTML = thousand.format(Math.floor(babies.scrollTop / bg_size * 5));
})
-//Todo: stop executing once scrolled past
function update_wealth_counter() {
if (bezos_viewable()) {
if (bezos_counter_viewable()) {
let wealth = (window.scrollX - bezos.offsetLeft + 175) * 500000;
- bezos_counter.innerHTML = (wealth < 200000000000) ? money.format(wealth) : "$200,000,000,000";
+ bezos_counter.innerHTML = (wealth < 176000000000) ? money.format(wealth) : "$176,000,000,000";
}
else {
bezos_counter.innerHTML = '';
