Skip to content

Commit e0b1cdb

Browse files
bhercehabherceha
authored
Merge branch 'main' into impact
2 parents 073963b + fde5502 commit e0b1cdb

2 files changed

Lines changed: 107 additions & 36 deletions

File tree

‎impacts.html‎

Lines changed: 68 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -34,24 +34,27 @@ <h1>Pay as You Throw in Boston</h1>
3434

3535
<p class="intro-text">How will PAYT effect the City of Boston? How does PAYT compare in other Massachusetts municipalities?</p>
3636
<div class="squiggle" aria-hidden="true"></div>
37-
<!-- Section: Boston 2024 Results -->
38-
<div class="sectionbanner">Boston in 2024</div>
39-
<!-- Result Cards Row -->
40-
<div class="stat-blocks">
41-
<div class="stat-block">
42-
<h3 class="block-title">Bostonians disposed of</h3>
43-
<p class="block-reduction"><span class="reduction-percent">186,305 tons of trash</span> </p>
44-
<p class="block-description">*This includes household and bulky waste</p>
45-
</div>
46-
<div class="stat-block">
47-
<h3 class="block-title">Each household disposed of</h3>
48-
<p class="block-reduction"><span class="reduction-percent">0.68 tons of trash</span> </p>
49-
<p class="block-description">*This is an average per household</p>
50-
</div>
51-
<div class="stat-block">
52-
<h3 class="block-title">Boston spent</h3>
53-
<p class="block-reduction"><span class="reduction-percent">$19,260,210.90</span></p>
54-
<p class="block-description">to incinerate trash</p>
37+
<!-- Section: Boston 2024 vs PAYT side-by-side -->
38+
<div class="impact-compare">
39+
<div class="impact-column">
40+
<div class="sectionbanner">Without Pay As You Throw (in 2024):</div>
41+
<!-- Result Cards Column -->
42+
<div class="stat-blocks stack">
43+
<div class="stat-block">
44+
<h3 class="block-title">Bostonians disposed of</h3>
45+
<p class="block-reduction"><span class="reduction-percent">186,305 tons of trash</span> </p>
46+
<p class="block-description">*This includes household and bulky waste</p>
47+
</div>
48+
<div class="stat-block">
49+
<h3 class="block-title">Each household disposed of</h3>
50+
<p class="block-reduction"><span class="reduction-percent">0.68 tons of trash</span> </p>
51+
<p class="block-description">*This is an average per household</p>
52+
</div>
53+
<div class="stat-block">
54+
<h3 class="block-title">Boston spent</h3>
55+
<p class="block-reduction"><span class="reduction-percent">$19,260,210.90</span></p>
56+
<p class="block-description">to incinerate trash</p>
57+
</div>
5558
</div>
5659
</div>
5760
<div class="method-banner">
@@ -69,23 +72,55 @@ <h4>Terminology</h4>
6972
</ul>
7073
<p style="margin-top: 15px; font-size: 14px;">For more information on the methodology, visit the <a href="method.html">Methodology Tab</a>.</p>
7174
</div>
75+
<div class="impact-column">
76+
<div class="sectionbanner">With Pay as You Throw (by 2031):</div>
77+
<div class="stat-blocks stack">
78+
<div class="stat-block">
79+
<h3 class="block-title">Boston could reduce household trash disposal by</h3>
80+
<p class="block-reduction"><span class="reduction-percent">44.95%</span></p>
81+
<p class="block-description">over 5 years</p>
82+
</div>
83+
<div class="stat-block">
84+
<h3 class="block-title">Progressing Boston's Zero Waste Goals</h3>
85+
</div>
86+
<div class="stat-block">
87+
<h3 class="block-title">This could save Boston</h3>
88+
<p class="block-reduction"><span class="reduction-percent">$1,729,131.19</span></p>
89+
<p class="block-description">in annual trash costs</p>
7290
</div>
73-
</div>
74-
<!-- Section: If Boston Implemented PAYT -->
75-
<div class="sectionbanner">With Pay as You Throw</div>
76-
<div class="stat-blocks">
77-
<div class="stat-block">
78-
<h3 class="block-title">Boston could reduce household trash disposal by</h3>
79-
<p class="block-reduction"><span class="reduction-percent">44.95%</span></p>
80-
<p class="block-description">over 5 years</p>
81-
</div>
82-
<div class="stat-block">
83-
<h3 class="block-title">This could save Boston</h3>
84-
<p class="block-reduction"><span class="reduction-percent">$1,729,131.19</span></p>
85-
<p class="block-description">in annual trash costs</p>
8691
</div>
8792
</div>
88-
<div class="two-column-divider">
93+
</div>
94+
95+
<div class="method-banner">
96+
<button class="method-toggle" aria-expanded="false">What Are These Numbers? <span class="chev">▾</span></button>
97+
<div class="method-content" hidden>
98+
<h4>Terminology</h4>
99+
<ul>
100+
<li><strong>Tipping Fee:</strong> The cost per ton that municipalities pay to dispose of trash at incineration or landfill facilities. Boston's tipping fee is $103.38 per ton.</li>
101+
<li><strong>Municipal Solid Waste:</strong> Trash and recyclables collected through Boston's municipal waste management program.</li>
102+
<li><strong>Household:</strong> A residential unit participating in Boston's municipal trash program. 322,000 households participated in 2024.</li>
103+
<li><strong>Tonnage:</strong> The total weight of trash disposed, measured in tons. Boston disposed of 186,305 tons in 2024, which converts to 372,610,000 pounds.</li>
104+
</ul>
105+
<h4>Formulas</h4>
106+
<p><strong>Variables:</strong></p>
107+
<ul>
108+
<li><em>T</em> = Total tonnage disposed by Boston = 186,305 tons</li>
109+
<li><em>H</em> = Number of participating households = 322,000</li>
110+
<li><em>F</em> = Tipping fee per ton = $103.38</li>
111+
</ul>
112+
<p><strong>Calculations:</strong></p>
113+
<ul>
114+
<li><strong>Total pounds of trash:</strong> <em>T</em> × 2,000 lbs/ton = 186,305 × 2,000 = 372,610,000 pounds</li>
115+
<li><strong>Tons per household:</strong> <em>T</em> ÷ <em>H</em> = 186,305 ÷ 322,000 = 0.579 tons per household</li>
116+
<li><strong>Total incineration cost:</strong> <em>T</em> × <em>F</em> = 186,305 × $103.38 = $19,260,210.90</li>
117+
</ul>
118+
</div>
119+
</div>
120+
121+
<!-- Section: Case Study of Malden -->
122+
<div class="sectionbanner">Potential Revenue from PAYT: A Case Study of Malden</div>
123+
<div class="two-column-divider">
89124
<div class="column-left">
90125
<h3>
91126
<img src="images/trash.jpg" alt="PAYT trash bag" class="column-image">
@@ -164,7 +199,7 @@ <h3 class="block-title">Harvard</h3>
164199
</figure>
165200
</div>
166201

167-
<!-- Methodology Banner -->
202+
<!-- Methodology Banner -->
168203
<div class="method-banner">
169204
<button class="method-toggle" aria-expanded="false">What Are These Numbers?<span class="chev">▾</span></button>
170205
<div class="method-content" hidden>

‎styles/styles.css‎

Lines changed: 39 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -911,6 +911,38 @@ img {
911911
.site-nav { justify-content: center; }
912912
}
913913

914+
.impact-compare {
915+
display: grid;
916+
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
917+
gap: 24px;
918+
align-items: start;
919+
margin: 24px 0 12px;
920+
}
921+
922+
.impact-column {
923+
display: flex;
924+
flex-direction: column;
925+
gap: 12px;
926+
}
927+
928+
.impact-compare .sectionbanner {
929+
margin-bottom: 0; /* keep banner and cards tightly stacked */
930+
}
931+
932+
.impact-compare .stat-blocks {
933+
margin: 10px 0 10px; /* cap space under banner at ~10px */
934+
padding: 0; /* remove padding so cards extend to match banner width */
935+
}
936+
937+
.impact-compare .stat-blocks.stack {
938+
grid-auto-rows: 1fr; /* make each row the same height within a column */
939+
gap: 16px;
940+
}
941+
942+
.impact-compare .stat-blocks.stack .stat-block {
943+
min-height: 180px; /* normalize heights to the tallest card */
944+
}
945+
914946
/* Stat Blocks - Boston.gov style card layout */
915947
.stat-blocks {
916948
display: grid;
@@ -923,6 +955,10 @@ img {
923955
padding: 0 20px;
924956
}
925957

958+
.stat-blocks.stack {
959+
grid-template-columns: 1fr;
960+
}
961+
926962
.stat-block {
927963
background: #ffffff;
928964
border: 1px solid #ddd;
@@ -946,7 +982,7 @@ img {
946982
font-size: 20px;
947983
font-weight: 700;
948984
color: var(--brand-navy);
949-
margin: 0 0 12px 0;
985+
margin: 0 0 10px 0;
950986
font-family: var(--font-heading);
951987
text-transform: uppercase;
952988
text-decoration: none;
@@ -955,7 +991,7 @@ img {
955991
.block-reduction {
956992
font-size: 18px;
957993
color: var(--optimistic-blue);
958-
margin: 8px 0;
994+
margin: 10px 0;
959995
font-weight: 500;
960996
}
961997

@@ -967,7 +1003,7 @@ img {
9671003
.block-description {
9681004
font-size: 14px;
9691005
color: #666;
970-
margin: 12px 0 0 0;
1006+
margin: 10px 0 0 0;
9711007
line-height: 1.5;
9721008
}
9731009

0 commit comments

Comments
 (0)