Skip to content

Commit fde5502

Browse files
brandonvkaragozianbrandonvkaragozian
authored
Merge pull request #102 from code4policy/belen-impact-vibe
format changes to impact page
2 parents db4fe26 + 2078f68 commit fde5502

2 files changed

Lines changed: 107 additions & 60 deletions

File tree

‎impacts.html‎

Lines changed: 68 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -34,67 +34,78 @@ <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>
57-
<div class="method-banner">
58-
<button class="method-toggle" aria-expanded="false">What Are These Numbers? <span class="chev">▾</span></button>
59-
<div class="method-content" hidden>
60-
<h4>Terminology</h4>
61-
<ul>
62-
<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>
63-
<li><strong>Municipal Solid Waste:</strong> Trash and recyclables collected through Boston's municipal waste management program.</li>
64-
<li><strong>Household:</strong> A residential unit participating in Boston's municipal trash program. 322,000 households participated in 2024.</li>
65-
<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>
66-
</ul>
67-
<h4>Formulas</h4>
68-
<p><strong>Variables:</strong></p>
69-
<ul>
70-
<li><em>T</em> = Total tonnage disposed by Boston = 186,305 tons</li>
71-
<li><em>H</em> = Number of participating households = 322,000</li>
72-
<li><em>F</em> = Tipping fee per ton = $103.38</li>
73-
</ul>
74-
<p><strong>Calculations:</strong></p>
75-
<ul>
76-
<li><strong>Total pounds of trash:</strong> <em>T</em> × 2,000 lbs/ton = 186,305 × 2,000 = 372,610,000 pounds</li>
77-
<li><strong>Tons per household:</strong> <em>T</em> ÷ <em>H</em> = 186,305 ÷ 322,000 = 0.579 tons per household</li>
78-
<li><strong>Total incineration cost:</strong> <em>T</em> × <em>F</em> = 186,305 × $103.38 = $19,260,210.90</li>
79-
</ul>
80-
</div>
60+
<div class="impact-column">
61+
<div class="sectionbanner">With Pay as You Throw (by 2031):</div>
62+
<div class="stat-blocks stack">
63+
<div class="stat-block">
64+
<h3 class="block-title">Boston could reduce household trash disposal by</h3>
65+
<p class="block-reduction"><span class="reduction-percent">44.95%</span></p>
66+
<p class="block-description">over 5 years</p>
67+
</div>
68+
<div class="stat-block">
69+
<h3 class="block-title">Progressing Boston's Zero Waste Goals</h3>
70+
</div>
71+
<div class="stat-block">
72+
<h3 class="block-title">This could save Boston</h3>
73+
<p class="block-reduction"><span class="reduction-percent">$1,729,131.19</span></p>
74+
<p class="block-description">in annual trash costs</p>
8175
</div>
82-
</div>
83-
<!-- Section: If Boston Implemented PAYT -->
84-
<div class="sectionbanner">With Pay as You Throw</div>
85-
<div class="stat-blocks">
86-
<div class="stat-block">
87-
<h3 class="block-title">Boston could reduce household trash disposal by</h3>
88-
<p class="block-reduction"><span class="reduction-percent">44.95%</span></p>
89-
<p class="block-description">over 5 years</p>
90-
</div>
91-
<div class="stat-block">
92-
<h3 class="block-title">This could save Boston</h3>
93-
<p class="block-reduction"><span class="reduction-percent">$1,729,131.19</span></p>
94-
<p class="block-description">in annual trash costs</p>
9576
</div>
9677
</div>
97-
<div class="two-column-divider">
78+
</div>
79+
80+
<div class="method-banner">
81+
<button class="method-toggle" aria-expanded="false">What Are These Numbers? <span class="chev">▾</span></button>
82+
<div class="method-content" hidden>
83+
<h4>Terminology</h4>
84+
<ul>
85+
<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>
86+
<li><strong>Municipal Solid Waste:</strong> Trash and recyclables collected through Boston's municipal waste management program.</li>
87+
<li><strong>Household:</strong> A residential unit participating in Boston's municipal trash program. 322,000 households participated in 2024.</li>
88+
<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>
89+
</ul>
90+
<h4>Formulas</h4>
91+
<p><strong>Variables:</strong></p>
92+
<ul>
93+
<li><em>T</em> = Total tonnage disposed by Boston = 186,305 tons</li>
94+
<li><em>H</em> = Number of participating households = 322,000</li>
95+
<li><em>F</em> = Tipping fee per ton = $103.38</li>
96+
</ul>
97+
<p><strong>Calculations:</strong></p>
98+
<ul>
99+
<li><strong>Total pounds of trash:</strong> <em>T</em> × 2,000 lbs/ton = 186,305 × 2,000 = 372,610,000 pounds</li>
100+
<li><strong>Tons per household:</strong> <em>T</em> ÷ <em>H</em> = 186,305 ÷ 322,000 = 0.579 tons per household</li>
101+
<li><strong>Total incineration cost:</strong> <em>T</em> × <em>F</em> = 186,305 × $103.38 = $19,260,210.90</li>
102+
</ul>
103+
</div>
104+
</div>
105+
106+
<!-- Section: Case Study of Malden -->
107+
<div class="sectionbanner">Potential Revenue from PAYT: A Case Study of Malden</div>
108+
<div class="two-column-divider">
98109
<div class="column-left">
99110
<h3>
100111
<img src="images/trash.jpg" alt="PAYT trash bag" class="column-image">
@@ -166,7 +177,7 @@ <h3 class="block-title">Harvard</h3>
166177
</figure>
167178
</div>
168179

169-
<!-- Methodology Banner -->
180+
<!-- Methodology Banner -->
170181
<div class="method-banner">
171182
<button class="method-toggle" aria-expanded="false">What Are These Numbers?<span class="chev">▾</span></button>
172183
<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)