Create Blog Page with Post About Missed Fines

src/components/EmissionsBreakdownGraph.vue

@@ -18,6 +18,7 @@ export default class EmissionsBreakdownGraph extends Vue {
       src="/chicago-2017-ghg-emissions.png"
       width="167"
       height="400"
+      class="-shadowed"
       alt="2017 GHG Emissions -
         31M metric tons CO2 equivalent
         69% buildings

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">
+              City Of Chicago Failed to Collect $30 Million In Potential Fines from Building
+              Benchmarking Ordinance
+            </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 @@
         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,11 +108,10 @@
             </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>
-          <EmissionsBreakdownGraph class="-mobile" />
 
           <p class="constrained -wide">
             You can start by looking at Chicago's buildings with the highest greenhouse gas
@@ -117,27 +120,48 @@
             buildings on this metric.
           </p>
 
-          <div class="announce-panel">
-            <h2>Legislative update! 🎉</h2>
-
-            <p>
-              As of late January 2024, legislation is being introduced to require new buildings use
-              more efficient forms of water and space heating, via the Clean And Affordable
-              Buildings Ordinance (CABO), which will reduce the number of highly polluting and
-              inefficient buildings that end up on this site.
-            </p>
-
-            <p class="bold">
-              If you're in Chicago,
-
-              <a
-                href="https://act.sierraclub.org/actions/illinois?actionid=ar0395755&id=70131000001iOuIAAU"
-                target="_blank"
-                rel="noopener"
-              >
-                write to your alderman to support the CABO! <NewTabIcon />
-              </a>
-            </p>
+          <div class="announcements">
+            <div class="announce-panel -orange">
+              <h2>
+                <div class="regular-text-size">New Article</div>
+                📰 $30 Million In Missed Fines
+              </h2>
+
+              <p>
+                The City Of Chicago failed to collect $30 million in potential fines from
+                the building benchmarking ordinance, reducing transparency and accountability.
+              </p>
+
+              <p>
+                <a
+                  href="/blog/millions-in-missed-fines"
+                  class="bold"
+                >Read Our Full Blog Post On Millions in Missed Fines</a>.
+              </p>
+            </div>
+
+            <div class="announce-panel">
+              <h2>Legislative update! 🎉</h2>
+
+              <p>
+                As of late January 2024, legislation is being introduced to require new
+                use more efficient forms of water and space heating, via the Clean And Affordable
+                Buildings Ordinance (CABO), which will reduce the number of highly polluting and
+                inefficient buildings that end up on this site.
+              </p>
+
+              <p class="bold">
+                If you're in Chicago,
+
+                <a
+                  href="https://act.sierraclub.org/actions/illinois?actionid=ar0395755&id=70131000001iOuIAAU"
+                  target="_blank"
+                  rel="noopener"
+                >
+                  write to your alderman to support the CABO! <NewTabIcon />
+                </a>
+              </p>
+            </div>
           </div>
 
 
@@ -208,12 +232,25 @@
 .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; }
+  }
+
+  .announcements {
+    display: flex;
+    gap: 1rem;
+    align-items: flex-start;
+
+    > * { flex-basis: 100%; }
   }
 
   .emissions-breakdown {
@@ -256,13 +293,14 @@
   }
 
   @media (max-width: $mobile-max-width) {
+    .announcements { flex-direction: column; }
+
     .row { display: block; }
 
     .emissions-breakdown {
       width: 100%;
       text-align: center;
 
-      &.-mobile { display: block; }
       &.-desktop { display: none; }
     }