Add page banners

src/static/styles/main.css

@@ -451,17 +451,13 @@ section:not(:last-child) {
 .site__banner {
     background-color: rgba(0, 0, 0, 0.44);
     background-blend-mode: multiply;
-    background-image: url("/static/images/site_banner.jpg");
     background-size: cover;
     background-position: center;
     color: white;
     text-align: center;
-    padding: 4rem 1rem;
+    padding: 2rem 1rem;
     font-family: 'Vollkorn', serif;
 }
-.site__banner h1 {
-    font-size: 3.5rem;
-}
 
 .site__banner p {
     text-transform: lowercase;
@@ -469,6 +465,19 @@ section:not(:last-child) {
     font-size: 2rem;
 }
 
+.site__banner--site {
+    background-image: url("/static/images/site_banner.jpg");
+}
+.site__banner--fairtrade {
+    background-image: url("/static/images/fairtrade_banner.jpg");
+}
+.site__banner--reviews {
+    background-image: url("/static/images/reviews_banner.jpg");
+}
+.site__banner--about {
+    background-image: url("/static/images/coffee_banner.jpg");
+}
+
 /* Messages
    ========================================================================== */
 .messages {

src/storefront/templates/storefront/about.html

@@ -4,15 +4,10 @@
 {% block head_title %}About | {% endblock %}
 
 {% block content %}
+<div class="site__banner site__banner--about">
+    <h1>About Port Townsend<br>Roasting Co.</h1>
+</div>
 <article>
-    <header>
-        <h1>About PT Coffee</h1>
-    </header>
-    <section>
-        <figure>
-            <img src="{% static 'images/coffee_banner.jpg' %}" alt="Banner">
-        </figure>
-    </section>
     <section>
         <h2>We love coffee!</h2>
         <p><strong>If you’ve found Port Townsend Coffee Roasting Co., you probably love coffee so much that you seek out the best tasting, Certified Fair Trade Organic coffees available.</strong></p>

src/storefront/templates/storefront/contact_form.html

@@ -3,9 +3,11 @@
 {% block head_title %}Contact | {% endblock %}
 
 {% block content %}
+<div class="site__banner site__banner--site">
+    <h1>Contact us</h1>
+</div>
 <article>
     <header>
-        <h1>Contact us</h1>
         <h4>Problem with your online order or have a question?</h4>
         <p>Please contact us, we’re happy to help you.</p>
     </header>

src/storefront/templates/storefront/fairtrade.html

@@ -4,15 +4,10 @@
 {% block head_title %}Fair Trade | {% endblock %}
 
 {% block content %}
+<div class="site__banner site__banner--fairtrade">
+    <h1>Fair Trade & Organic</h1>
+</div>
 <article>
-    <header>
-        <h1>Fair Trade and Organic</h1>
-    </header>
-    <section>
-        <figure>
-            <img src="{% static 'images/fairtrade_banner.jpg' %}" alt="Banner">
-        </figure>
-    </section>
     <section>
         <p>We value fair, guaranteed wages for growers and sustainable stewardship of the land where it’s grown. We pay a steep premium for these beans, which are typically from smaller farms that are organized into co-ops. These farms take pride in their coffees, as the farmers make a living wage and their families are able to live in a healthier, more secure environment than farmers who grow a conventional coffee crop. The quality of our coffee is consistent, in part due to the quality of organic and fair trade beans.</p>
         <figure style="text-align: center;">

src/storefront/templates/storefront/product_list.html

@@ -1,16 +1,16 @@
 {% extends 'base.html' %}
 {% load static %}
 
-{% block head_title %}Coffee | {% endblock %}
+{% block head_title %}Shop | {% endblock %}
 
 {% block head %}
     <script defer src="{% static 'scripts/product_list.js' %}"></script>
 {% endblock %}
 
 {% block content %}
-<div class="site__banner">
-    <h1><em>Better</em>, not <em>Bitter</em></h1>
-    <p>ORGANIC COFFEE, SLOW ROASTED, ITALIAN STYLE</p>
+<div class="site__banner site__banner--site">
+    <h1>Organic Coffee, Slow Roasted, Italian Style</h1>
+    <p><em>Better</em>, not <em>Bitter</em></p>
 </div>
 <article>
     <section class="product__list">

src/storefront/templates/storefront/reviews.html

@@ -4,15 +4,11 @@
 {% block head_title %}Reviews | {% endblock %}
 
 {% block content %}
+<div class="site__banner site__banner--reviews">
+    <h1>Reviews</h1>
+    <p>What people are saying</p>
+</div>
 <article>
-    <header>
-        <h1>Reviews</h1>
-    </header>
-    <section>
-        <figure>
-            <img src="{% static 'images/reviews_banner.jpg' %}" alt="Banner">
-        </figure>
-    </section>
     <section class="review__list">
         <blockquote class="review__item">
             <q>Really good coffee. That's all there is to say. Supposedly the pour over coffee is the best way to go. It is definitely nothing like a Starbucks, and in this case, that's a very good thing!</q>