Initial styling of location index page

bakerydemo/static/css/main.css

@@ -496,3 +496,42 @@ li.has-submenu a.allow-toggle {
   background-color: #fff;
 }
 
+.location-list {
+  text-align: center;
+}
+.location-list-title {
+  line-height: 270px;
+  height: 270px;
+}
+.location-list-title img {
+  background-color: rgba(233,228,221,1);
+  height: 270px;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.location-list-title img:hover {
+  opacity: 0.3;
+}
+.location-list-title span.title {
+  color: white;
+  display: inline-block;
+  font-weight: 300;
+  position: relative;
+}
+.location-list-title:hover {
+  background-color: #eb7400;
+}
+.location-list address {
+  font-weight: 300;
+  font-family: 'Lato', sans-serif;
+  font-size: 1.6em;
+}
+.location-list-title .hero-gradient-mask {
+  left: 0;
+}
+.location-list-title .hero-gradient-mask:hover {
+  display: none;
+}
+

bakerydemo/templates/locations/locations_index_page.html

@@ -1,12 +1,35 @@
 {% extends "base.html" %}
-{% load wagtailcore_tags %}
+{% load wagtailcore_tags navigation_tags wagtailimages_tags %}
 
 {% block content-header %}
-    {{ page.title }}
+<div class="container">
+    <div class="row">
+        <div class="col-md-12">
+            {{ page.title }}
+        </div>
+    </div>
+</div>
 {% endblock content-header %}
 
 {% block content-body %}
-    {% for location in locations %}
-        <div><a href="{% pageurl location %}">{{ location.title }}</a></div>
-    {% endfor %}
-{% endblock content-body %}
+<div class="container">
+    <div class="row">
+        {% for location in locations %}
+            <div class="col-md-6 location-list">
+                <a href="{% pageurl location %}">
+                <h1 class="location-list-title">
+                
+        
+                    {% image location.image fill-480x270 as image %}
+                    <img src="{{ image.url }}" width="{{ image.width }}" height="{{ image.height }}" alt="{{ image.alt }}" class="img-thumbnail" />
+                    <span class="hero-gradient-mask"></span>
+                    <span class="title">{{ location.title }}</span>
+                
+                </h1></a>
+                    <address>{{ location.address }}</address>
+                    <a href="https://google.com/maps/?q={{ location.lat_long }}" class="btn">Map</a>
+            </div>
+        {% endfor %}
+    </div>
+</div>
+{% endblock content-body %}