Make whole bread list item a link

bakerydemo/static/css/main.css

@@ -662,10 +662,12 @@ span.outline {
 /* Bread styles */
 /* Bread listview */
 .bread-list-item {
+  display: block;
   border: 1px solid rgba(0,0,0,0.1);
   border-radius: 3px;
   margin: 12px;
   overflow: hidden;
+  color: inherit;
 }
 
 .bread-list-item h2 {

bakerydemo/templates/breads/breads_index_page.html

@@ -14,19 +14,15 @@
     <div class="container">
         <div class="row bread-list">
         {% for bread in breads %}
-            <div class="col-xs-12 col-md-6 bread-list-item">
+            <a href="{% pageurl bread %}" class="col-xs-12 col-md-6 bread-list-item">
                 <div class="row">
                     <div class="col-xs-4 col-sm-4 image">
-                        <a href="{% pageurl bread %}">
-                            {% image bread.image fill-180x180-c100 as image %}
-                            <img src="{{ image.url }}" width="{{ image.width }}"
-                                height="{{ image.height }}" alt="{{ image.alt }}" class="" />
-                        </a>
+                        {% image bread.image fill-180x180-c100 as image %}
+                        <img src="{{ image.url }}" width="{{ image.width }}"
+                            height="{{ image.height }}" alt="{{ image.alt }}" class="" />
                     </div>
                     <div class="col-xs-6 col-sm-7">
-                        <a href="{% pageurl bread %}">
-                            <h2>{{ bread.title }}</h2>
-                        </a>
+                        <h2>{{ bread.title }}</h2>
                         <ul class="bread-meta">
                         {% if bread.origin %}
                             <li><span>Origin</span> {{ bread.origin }}</li>
@@ -37,7 +33,7 @@
                         </ul>
                     </div>
                 </div>
-            </div>
+            </a>
         {% endfor %}
         </div>
     </div>