Create Blog Page with Post About Missed Fines

src/layouts/Default.vue

@@ -112,6 +112,13 @@ export default class Default extends Vue {
             About
           </g-link>
 
+          <g-link
+            class="nav-link"
+            to="/blog"
+          >
+            Blog
+          </g-link>
+
           <form class="search-form">
             <div class="input-cont">
               <input

src/pages/Blog.vue

@@ -0,0 +1,64 @@
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+import NewTabIcon from '~/components/NewTabIcon.vue';
+import { LatestDataYear } from '../constants/globals.vue';
+
+// TODO: Figure out a way to get metaInfo working without any
+// https://github.com/xerebede/gridsome-starter-typescript/issues/37
+@Component<any>({
+  components: {
+    NewTabIcon,
+  },
+  metaInfo() {
+    return { title:  'Blog' };
+  },
+})
+export default class About extends Vue {
+  readonly LatestDataYear: number = LatestDataYear;
+}
+</script>
+<template>
+  <DefaultLayout>
+    <div class="layout-constrained blog-page">
+      <h1
+        id="main-content"
+        tabindex="-1"
+      >
+        Electrify Chicago Blog
+      </h1>
+
+      <ul>
+        <li>
+          <h2>
+            <g-link to="/blog/millions-in-missed-fines">
+              The City Of Chicago Didn't Enforce The Building Benchmarking Ordinance, Failing to
+              Collect $30 Million In Potential Fines
+            </g-link>
+          </h2>
+
+          <p>
+            The City of Chicago didn't fully enforce the benchmarking ordinance that requires the
+            owners of large building to report their emissions - and based on the fine amounts laid
+            out in the ordinance, we calculated the city missed out on millions and harmed
+            transparency and accountability.
+          </p>
+        </li>
+      </ul>
+    </div>
+  </DefaultLayout>
+</template>
+<style lang="scss">
+.blog-page {
+  ul {
+    list-style: none;
+    padding: 0;
+  }
+
+  h2 a {
+    text-decoration: none;
+
+    &:hover, &:focus { text-decoration: underline; }
+  }
+}
+</style>

src/pages/Index.vue

@@ -90,6 +90,10 @@ export default class BiggestBuildings extends Vue {
         Electrify Chicago
       </h1>
 
+      <p class="tagline">
+        An independent tool for viewing City of Chicago building data
+      </p>
+
       <div class="row">
         <div>
           <p class="constrained -wide">
@@ -104,7 +108,7 @@ export default class BiggestBuildings extends Vue {
             </a>,
             a whopping <strong>69% of Chicago's emissions come from buildings</strong>, making it
             our biggest challenge and <em>our biggest opportunity</em> as a city to tackle
-            change. At Electrify Chicago we want to showcase some of the best and worst performing
+            change. At Electrify Chicago, we want to showcase some of the best and worst performing
             buildings in the city using publicly available data and manual annotations to add
             building photographs and label multi-building owners like universities.
           </p>
@@ -208,12 +212,17 @@ export default class BiggestBuildings extends Vue {
 .homepage {
   h1 { margin-bottom: 0; }
 
+  .tagline {
+    font-weight: bold;
+    margin-bottom: 1rem;
+  }
+
   .row {
     display: flex;
     justify-content: space-between;
     gap: 2rem;
 
-    p.constrained { font-size: 1.25rem; }
+    p.constrained { font-size: 1.125rem; }
   }
 
   .emissions-breakdown {

src/pages/blog/MillionsInMissedFines.vue

@@ -0,0 +1,179 @@
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+import NewTabIcon from '~/components/NewTabIcon.vue';
+
+// TODO: Figure out a way to get metaInfo working without any
+// https://github.com/xerebede/gridsome-starter-typescript/issues/37
+@Component<any>({
+  components: {
+    NewTabIcon,
+  },
+  metaInfo() {
+    return { title:  'Chicago Failed to Collect Potentially $30 Million in Fines' };
+  },
+})
+export default class MillionsInMissedFine extends Vue {
+  readonly NotifLetterUrl = 'https://www.chicago.gov/content/dam/city/progs/env/EnergyBenchmark/sample_notification_letter.pdf';
+
+  /** Buildings from 2018 - 2022 that didn't report */
+  readonly NonReportingBuildingsDataUrl = 'https://data.cityofchicago.org/Environment-Sustainable-Development/Chicago-Energy-Benchmarking/xq83-jr8c/explore/query/SELECT%0A%20%20%60data_year%60%2C%0A%20%20%60id%60%2C%0A%20%20%60property_name%60%2C%0A%20%20%60reporting_status%60%2C%0A%20%20%60address%60%2C%0A%20%20%60zip_code%60%2C%0A%20%20%60chicago_energy_rating%60%2C%0A%20%20%60exempt_from_chicago_energy_rating%60%2C%0A%20%20%60community_area%60%2C%0A%20%20%60primary_property_type%60%2C%0A%20%20%60gross_floor_area_buildings_sq_ft%60%2C%0A%20%20%60year_built%60%2C%0A%20%20%60of_buildings%60%2C%0A%20%20%60water_use_kgal%60%2C%0A%20%20%60energy_star_score%60%2C%0A%20%20%60electricity_use_kbtu%60%2C%0A%20%20%60natural_gas_use_kbtu%60%2C%0A%20%20%60district_steam_use_kbtu%60%2C%0A%20%20%60district_chilled_water_use_kbtu%60%2C%0A%20%20%60all_other_fuel_use_kbtu%60%2C%0A%20%20%60site_eui_kbtu_sq_ft%60%2C%0A%20%20%60source_eui_kbtu_sq_ft%60%2C%0A%20%20%60weather_normalized_site_eui_kbtu_sq_ft%60%2C%0A%20%20%60weather_normalized_source_eui_kbtu_sq_ft%60%2C%0A%20%20%60total_ghg_emissions_metric_tons_co2e%60%2C%0A%20%20%60ghg_intensity_kg_co2e_sq_ft%60%2C%0A%20%20%60latitude%60%2C%0A%20%20%60longitude%60%2C%0A%20%20%60location%60%2C%0A%20%20%60row_id%60%2C%0A%20%20%60%3A%40computed_region_43wa_7qmu%60%2C%0A%20%20%60%3A%40computed_region_vrxf_vc4k%60%2C%0A%20%20%60%3A%40computed_region_6mkv_f3dw%60%2C%0A%20%20%60%3A%40computed_region_bdys_3d7i%60%2C%0A%20%20%60%3A%40computed_region_awaf_s7ux%60%0AWHERE%0A%20%20%28%60data_year%60%20IN%20%28%222019%22%2C%20%222020%22%2C%20%222021%22%2C%20%222022%22%2C%20%222018%22%29%29%0A%20%20AND%20caseless_one_of%28%60reporting_status%60%2C%20%22Not%20Submitted%22%29/page/filter';
+}
+</script>
+<template>
+  <DefaultLayout>
+    <div class="layout-constrained millions-in-fines">
+      <g-link
+        to="/blog"
+        class="back-link grey-link"
+      >
+        Back to Blog
+      </g-link>
+
+      <h1
+        id="main-content"
+        tabindex="-1"
+      >
+        The City Of Chicago Didn't Enforce The Building Benchmarking Ordinance, Failing to
+        Collect $30 Million In Potential Fines
+      </h1>
+      <p class="constrained bold">
+        Not Enforcing The Benchmarking Ordinance's Fines From 2018 - 2022 Reduced Accountability
+      </p>
+
+      <p class="constrained">
+        Electrify Chicago has analyzed the last five years of city benchmark data, and found
+        3,325 instances of building owners not submitting data. Based on the
+        <a
+          :href="NotifLetterUrl"
+          target="_blank"
+          rel="noopener"
+        >
+          latest (2024) official notification letter <NewTabIcon />
+        </a> fines for non-compliance could total up to $9,200 per year.
+      </p>
+
+      <img
+        src="/blog/millions-in-missed-fines/max-fine-quote.webp"
+        class="blog-img"
+        alt="A selection of text with a title 'Failure to comply is more expensive than you
+          think', with details of fines and a highlight saying 'These fines could total $9,200 /
+          year'"
+      >
+
+      <p class="caption">
+        A screenshot of the energy benchmarking notification letter's section on fines, as of
+        Feb. 2024 (<a
+          :href="NotifLetterUrl"
+          target="_blank"
+          rel="noopener"
+        >source <NewTabIcon /></a>)
+      </p>
+
+      <p>
+        With a maximum of $9,200 of fines multiplied by 3,325 instances of non-compliance
+        (<a
+          href="NonReportingBuildingsDataUrl"
+          target="_blank"
+          rel="noopener"
+        >source - City of Chicago data portal <NewTabIcon /></a>), that
+        means a whopping <strong>$30,590,000 dollars of fines could have been collected</strong>
+        by the city's commissioner of business affairs and consumer protection (who is given this
+        responsibility in the
+        <a href="https://www.chicago.gov/content/dam/city/progs/env/EnergyBenchmark/BenchmarkingOrdinance11SEP2013.pdf">
+          original ordinance
+        </a>).
+      </p>
+
+      <img
+        src="/blog/millions-in-missed-fines/non-reporting-buildings-query.webp"
+        class="blog-img"
+        alt="A screenshot of the city data portal showing a view of buildings filtered by the
+          years 2018, 2019, 2020, 2021, and 2022, and a reporting status of 'Not Reporting',
+          with the total results returned of 3,325 underlined in red"
+      >
+
+      <img
+        src="/blog/millions-in-missed-fines/zoomed-non-reporting-count.webp"
+        class="blog-img"
+        width="400"
+        alt="A screenshot of text that reads 'Showing rows 1-100 of 3325'"
+      >
+
+      <p class="caption">
+        The full data portal screenshot, and a zoomed in view of the query result count (
+        <a :href="NonReportingBuildingsDataUrl">
+          target="_blank" rel="noopener">source <NewTabIcon /></a>
+        )
+      </p>
+
+      <p>
+        Through a FOIA request, the city reported that they had no recorded instances of
+        enforcement. We believe it's extremely unlikely the city levied and then collected fines
+        without any record, and thus believe that no fines were levied in this time.
+      </p>
+
+      <h2>Why This Matters</h2>
+
+      <p>
+        Without consequences for non-reporting, building owners who perform poorly can simply opt
+        out of reporting their data. Some owners of very large and culturally significant buildings
+        have consistently not submitted. As an example, view
+        <a
+          href="https://data.cityofchicago.org/Environment-Sustainable-Development/Chicago-Energy-Benchmarking/xq83-jr8c/explore/query/SELECT%0A%20%20%60data_year%60%2C%0A%20%20%60id%60%2C%0A%20%20%60property_name%60%2C%0A%20%20%60reporting_status%60%2C%0A%20%20%60address%60%2C%0A%20%20%60zip_code%60%2C%0A%20%20%60chicago_energy_rating%60%2C%0A%20%20%60exempt_from_chicago_energy_rating%60%2C%0A%20%20%60community_area%60%2C%0A%20%20%60primary_property_type%60%2C%0A%20%20%60gross_floor_area_buildings_sq_ft%60%2C%0A%20%20%60year_built%60%2C%0A%20%20%60of_buildings%60%2C%0A%20%20%60water_use_kgal%60%2C%0A%20%20%60energy_star_score%60%2C%0A%20%20%60electricity_use_kbtu%60%2C%0A%20%20%60natural_gas_use_kbtu%60%2C%0A%20%20%60district_steam_use_kbtu%60%2C%0A%20%20%60district_chilled_water_use_kbtu%60%2C%0A%20%20%60all_other_fuel_use_kbtu%60%2C%0A%20%20%60site_eui_kbtu_sq_ft%60%2C%0A%20%20%60source_eui_kbtu_sq_ft%60%2C%0A%20%20%60weather_normalized_site_eui_kbtu_sq_ft%60%2C%0A%20%20%60weather_normalized_source_eui_kbtu_sq_ft%60%2C%0A%20%20%60total_ghg_emissions_metric_tons_co2e%60%2C%0A%20%20%60ghg_intensity_kg_co2e_sq_ft%60%2C%0A%20%20%60latitude%60%2C%0A%20%20%60longitude%60%2C%0A%20%20%60location%60%2C%0A%20%20%60row_id%60%2C%0A%20%20%60%3A%40computed_region_43wa_7qmu%60%2C%0A%20%20%60%3A%40computed_region_vrxf_vc4k%60%2C%0A%20%20%60%3A%40computed_region_6mkv_f3dw%60%2C%0A%20%20%60%3A%40computed_region_bdys_3d7i%60%2C%0A%20%20%60%3A%40computed_region_awaf_s7ux%60%0AWHERE%0A%20%20caseless_one_of%28%60reporting_status%60%2C%20%22Not%20Submitted%22%29%0A%20%20AND%20%28%60data_year%60%20IN%20%28%222022%22%29%29%0AORDER%20BY%20%60gross_floor_area_buildings_sq_ft%60%20DESC%20NULL%20LAST/page/filter"
+          target="_blank"
+          rel="noopener"
+        >
+          2023's largest non reporting buildings in the data portal <NewTabIcon />
+        </a>. Not having all building owners report means the goals of the ordinance aren't being
+        met, and the public loses out on valuable information for buildings that could be emitting
+        the most or be the least efficient.
+      </p>
+
+      <h2>Next Steps</h2>
+
+      <p>
+        An older version of the energy benchmarking notification (<a
+          href="https://web.archive.org/web/20221214211117/https://www.chicago.gov/content/dam/city/progs/env/EnergyBenchmark/2020_Sample_Notification_Letter.pdf"
+          target="_blank"
+          rel="noopener"
+        >source - WayBackMachine <NewTabIcon /></a>)
+        did not contain any information of potential fines, and just this recent update to make
+        sure building owners are aware of the consequences for not reporting should improve
+        reporting. However we believe it is crucial the city then follow through and fine any
+        owners who choose to ignore repeated requests to report their energy use, in keeping
+        with the original ordinance. We also believe that larger fines may be necessary to get the
+        owners of very large and inefficient buildings to report their emissions, who may want to
+        obscure their  pollution from the public.
+      </p>
+    </div>
+  </DefaultLayout>
+</template>
+<style lang="scss">
+.millions-in-fines {
+  h1 {
+    margin-bottom: 0;
+    line-height: 1.25;
+
+    + p { margin: 0.25rem 0 0.5rem 0; }
+  }
+
+  a.back-link {
+    margin: 1rem 0 0 0;
+    display: inline-block;
+    font-weight: 600;
+  }
+
+  img.blog-img {
+    margin-top: 1rem;
+    box-shadow: 0.1rem 0.1rem 0.25rem $box-shadow-main;
+    border: solid $border-thin $grey-dark;
+  }
+
+  p.caption {
+    font-size: 0.825rem;
+    margin-top: 0.25rem;
+    color: $text-light;
+  }
+}
+</style>

src/scss/colors.scss

@@ -11,6 +11,7 @@ $black: #000;
 $white: #fff;
 
 $text-main: #000;
+$text-light: #737373;
 $link-blue: #2136ab;
 
 $chicago-blue: #41B6E6;

src/scss/global.scss

@@ -20,13 +20,32 @@ body {
 
 a { color: $link-blue; }
 
+a.grey-link {
+  background-color: $grey-light;
+  color: $black;
+  border-radius: $brd-rad-small;
+  padding: 0.25rem 1rem;
+  text-decoration: none;
+
+  &:hover, &:focus { background-color: $grey; }
+}
+
 h1, h2, h3, h4, h5, h6 {
    &:focus {
     border-bottom: solid 0.5rem $chicago-blue;
     outline: none;
   }
+
+  // Drop margin for the first paragraph after a heading
+  + p { margin-top: 0; }
 }
 
+h1 { margin: 1.5rem 0 0.5rem 0; }
+h2 { margin: 1rem 0 0.5rem 0; }
+
+p.-no-margin, p:first-of-type { margin: 0; }
+
+
 /**
  * Default Form Styling
  */
@@ -74,8 +93,9 @@ summary:focus { outline-offset: 0; }
 img { max-width: 100%; }
 
 img.-shadowed {
+  margin-top: 1rem;
   border: solid $border-thin $grey;
-  box-shadow: 0.125rem 0.125rem 0.125rem $box-shadow-main;
+  box-shadow: 0.125rem 0.125rem 0.25rem $box-shadow-main;
 }
 
 .large-text { font-size: 1.3em; }
@@ -140,7 +160,7 @@ form.search-form {
   border-radius: 1rem;
   border: solid 0.25rem #ff5454;
   background: #ffdce8;
-  border-top-width: 3rem;
+  border-top-width: 2rem;
   max-width: 40rem;
 
   h2 { margin-top: 0; }