Fix heading

app.js

@@ -1,4 +1,5 @@
 require('whatwg-fetch')
+require('./styles.scss')
 
 const React = require('react')
 const ReactDOM = require('react-dom')
@@ -20,7 +21,7 @@ class ResourceList extends React.Component {
         return response.json()
       })
       .then(json => {
-        console.log('parsed json', json)
+        console.log('RESPONSE:', json)
         this.setState(
           Object.assign({}, this.state, { items: json, loading: false })
         )

index.html

@@ -22,7 +22,7 @@
 
   <div class="section bg-light text-center">
     <div class="container">
-      <h1 class="display-2">Tubb's Fire Info</h1>
+      <h1 class="main-heading">Tubb's Fire Info</h1>
       <p class="lead">Up-to-date information, resources and news regarding the Tubb's Fire in Sonoma
         County, California.</p>
       <nav class="mt-5">

output.css

@@ -407,7 +407,7 @@ mark,
   font-size: 80%;
   color: #868e96; }
   .blockquote-footer::before {
-    content: "\2014 \00A0"; }
+    content: "\2014   \A0"; }
 
 .img-fluid {
   max-width: 100%;
@@ -5558,3 +5558,9 @@ a.text-dark:focus, a.text-dark:hover {
 
 .hero {
   background: #e9ecef; }
+
+.main-heading {
+  font-size: 4em; }
+  @media (max-width: 991px) {
+    .main-heading {
+      font-size: 2.5em; } }

styles.scss

@@ -2,13 +2,13 @@
 $red: #ea3515;
 
 // Fonts
-$font-family-serif: "Roboto Slab", serif;
-$font-family-sans-serif: "Open Sans", sans-serif;
+$font-family-serif: 'Roboto Slab', serif;
+$font-family-sans-serif: 'Open Sans', sans-serif;
 $headings-font-family: $font-family-serif;
 $font-family-base: $font-family-sans-serif;
 $h2-font-size: 2.6rem;
 
-@import "./node_modules/bootstrap/scss/bootstrap.scss";
+@import './node_modules/bootstrap/scss/bootstrap.scss';
 
 .section,
 .hero {
@@ -18,3 +18,12 @@ $h2-font-size: 2.6rem;
 .hero {
   background: $gray-200;
 }
+
+.main-heading {
+  font-size: 4em;
+  @include media-breakpoint-down(md) {
+    & {
+      font-size: 2.5em;
+    }
+  }
+}