Homepage template and initial styling. Workson #58.

bakerydemo/base/models.py

@@ -200,7 +200,7 @@ class HomePage(Page):
         null=True,
         blank=True,
         help_text='Write some promotional copy'
-    ) 
+    )
 
     featured_section_1_title = models.CharField(
         null=True,

bakerydemo/static/css/main.css

@@ -838,6 +838,91 @@ span.outline {
   }
 }
 
+/* Homepage */
+.homepage .hero {
+  margin: 0;
+  padding: 200px 0 30px 0;
+}
+
+.homepage .home-hero {
+  margin-bottom: 0;
+  padding-bottom: 0;
+  text-align: center;
+}
+.homepage .home-hero .lead {
+  color: #ddd;
+  font-size: 1.6em;
+}
+.homepage .streamfield {
+  background-color: #eee;
+}
+.homepage .streamfield-column {
+  padding: 60px;
+  margin: 0 auto;
+  float: none;
+}
+.homepage .streamfield-column h1,
+.homepage .streamfield-column h2,
+.homepage .streamfield-column h3,
+.homepage .streamfield-column h4,
+.homepage .streamfield-column h5 {
+  text-align: center;
+}
+
+.homepage .promo-row {
+  padding-top: 40px;
+}
+.homepage .promo {
+  text-align: center;
+}
+.homepage .promo figure img {
+  border-radius: 100%;
+  margin: auto;
+  width: auto;
+}
+
+.homepage .feature-1 h2 {
+  margin-top: 0;
+  margin-bottom: 20px;
+}
+
+.homepage .feature-1 .featured-children li {
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  margin-bottom: 10px;
+}
+
+.homepage .feature-1 .featured-children li h3 {
+  margin-top: 40px;
+  font-weight: 300;
+  font-size: 1.4em;
+}
+
+.homepage .feature-2 {
+  padding: 40px 0 20px;
+}
+
+.homepage .feature-2 h2,
+.homepage .feature-3 h2 {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.homepage .feature-2 img {
+  min-height: 210px;
+}
+
+.homepage .feature-3 h3 {
+  color: #fff;
+  font-weight: 300;
+  font-size: 1.8em;
+  margin-bottom: 135px;
+  margin-top: -145px;
+  position: relative;
+  text-align: center;
+  text-shadow: 0px 0px 30px rgba(0, 0, 0, 1);
+  z-index: 1;
+}
 /* No gutters */
 .row.no-gutters {
   margin-right: 0;
@@ -868,3 +953,28 @@ span.outline {
     display: none;
   }
 }
+
+/* From Wagtail core */
+/* Responsive image/video classes */
+.rich-text img {
+    max-width: 100%;
+    height: auto;
+}
+.richtext-image.left{
+    float:left;
+}
+.richtext-image.right{
+    float:right;
+}
+.responsive-object {
+    position: relative;
+}
+.responsive-object iframe,
+.responsive-object object,
+.responsive-object embed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}

bakerydemo/templates/base/home_page.html

@@ -2,6 +2,114 @@
 {% load wagtailimages_tags %}
 
 {% block content %}
+<div class="homepage">
 
-    {{ page.body }}
+{% image page.image fill-1920x600 as image %}
+<div class="container-fluid hero" style="background-image:url('{{ image.url }}')">
+    <div class="hero-gradient-mask"></div>
+    <div class="container">
+        <div class="row">
+            <div class="col-md-12 home-hero">
+                <h1>{{ page.title }}</h1>
+                <p class="lead">{{ page.hero_text }}</p>
+                <a href="{{ page.hero_cta_link }}" class="btn btn-lg btn-success">{{ page.hero_cta }}</a>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+{% if page.body %}
+<div class="container-fluid streamfield">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-7 streamfield-column">
+                {{ page.body }}
+            </div>
+        </div>
+    </div>
+</div>
+{% endif %}
+
+<div class="container">
+    <div class="row promo-row">
+        <div class="col-md-5 promo">
+            {% if page.promo_image or page.promo_title or page.promo_text %}
+                <figure>{% image page.promo_image fill-200x200-c100 %}</figure>
+                <h3>{{ page.promo_title }}</h3>
+                {{ page.promo_text|safe }}
+            {% endif %}
+        </div>
+
+        <div class="col-md-6 col-md-offset-1 feature-1">
+            {% if page.featured_section_1 %}
+            <h2>{{ page.featured_section_1_title }}</h2>
+                <div class="featured-children">
+                    {% for childpage in page.featured_section_1.specific.children|slice:"4" %}
+                        <li>
+                            <div class="row">
+                                <div class="col-md-4">
+                                    <a href="{{childpage.url}}">
+                                        {% image childpage.image fill-300x140-c100 %}
+                                    </a>
+                                </div>
+                                <div class="col-md-8">
+                                    <h3><a href="{{childpage.url}}">{{childpage.title}}</a></h3>
+                                </div>
+                            </div>
+                        </li>
+                    {% endfor %}
+                </div>
+            {% endif %}
+        </div>
+    </div>
+</div>
+
+<div class="container">
+    <div class="row">
+        <div class="col-md-12 feature-2">
+            {% if page.featured_section_2 %}
+            <h2>{{ page.featured_section_2_title }}</h2>
+                <div class="featured-children row">
+                    {% for childpage in page.featured_section_2.specific.children|slice:"3" %}
+                        <li class="col-md-4">
+                            {% image childpage.image height-210 %}
+                            <h3><a href="{{childpage.url}}">{{childpage.title}}</a></h3>
+                            <p>{{ childpage.introduction|truncatewords:15 }}</p>
+                        </li>
+                    {% endfor %}
+                </div>
+            {% endif %}
+        </div>
+    </div>
+</div>
+
+<div class="container">
+    <div class="row">
+        <div class="col-md-12 feature-3">
+            {% if page.featured_section_3 %}
+            <h2>{{ page.featured_section_3_title }}</h2>
+                <div class="featured-children row">
+                    {% for childpage in page.featured_section_3.specific.children|slice:"6" %}
+                        <li class="col-md-4">
+                            <a href="{{childpage.url}}">
+                                {% image childpage.image width-380 %}
+                                <h3>{{childpage.title}}</h3>
+                            </a>
+                        </li>
+                    {% endfor %}
+                </div>
+            {% endif %}
+        </div>
+    </div>
+</div>
+</div>
 {% endblock content %}
+
+HERO
+----
+promo | bread
+-----
+Blog x3
+-----
+Location x 6