Styling promo panel and featured articles 1. Workson #58

bakerydemo/static/css/main.css

@@ -903,7 +903,7 @@ span.outline {
 }
 
 .homepage .streamfield {
-  background-color: #eee;
+  background: linear-gradient(45deg, rgba(170,170,170,1) 0%,rgba(238,238,238,1) 44%);
 }
 .homepage .streamfield-column {
   padding: 60px;
@@ -919,11 +919,53 @@ span.outline {
 }
 
 .homepage .promo-row {
-  padding-top: 40px;
+  padding: 40px 0 40px 0;
 }
 .homepage .promo {
+  background: linear-gradient(190deg, rgba(0,4,8,1) 0%,rgba(55,28,25,1) 100%);
+  border-radius: 0px 0px 10px 10px;
+  color: #fff;
+  height: 100%;
+  margin-bottom: 20px;
+  margin-top: -40px;
+  padding: 40px 60px;
   text-align: center;
 }
+.homepage .promo h1,
+.homepage .promo h2,
+.homepage .promo h3,
+.homepage .promo h4 {
+  color: #eb7400;
+  font-weight: 200;
+}
+.homepage .promo p,
+.homepage .promo li {
+  color: #ccc;
+  line-height: 1.6em;
+}
+.homepage .promo a {
+  color: #fff;
+}
+@media (max-width: 970px) {
+  .homepage .promo {
+    padding: 30px 40px;
+  }
+  .homepage .promo figure img {
+    max-width: 120px;
+    height: auto;
+  }
+  .homepage .promo p {
+    color: #fff;
+    font-size: 1em;
+  }
+}
+@media (max-width: 766px) {
+  .homepage .promo {
+    margin-left: 15px;
+    margin-right: 15px;
+  }
+}
+
 .homepage .promo figure img {
   border-radius: 100%;
   margin: auto;
@@ -941,6 +983,16 @@ span.outline {
   margin-bottom: 10px;
 }
 
+.homepage .feature-1 .featured-children li figure {
+  width: 100%;
+  overflow: hidden;
+  margin: 0;
+}
+
+.homepage .feature-1 .featured-children li img {
+  width: auto;
+}
+
 .homepage .feature-1 .featured-children li h3 {
   margin-top: 40px;
   font-weight: 300;

bakerydemo/templates/base/home_page.html

@@ -18,42 +18,33 @@
     </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">
+        <div class="col-sm-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 }}
+                <div class="promo-text">
+                    <h3>{{ page.promo_title }}</h3>
+                    {{ page.promo_text|safe }}
+                </div>
             {% endif %}
         </div>
 
-        <div class="col-md-6 col-md-offset-1 feature-1">
+        <div class="col-sm-6 col-sm-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">
+                                <div class="col-xs-4">
                                     <a href="{{childpage.url}}">
-                                        {% image childpage.image fill-300x140-c100 %}
+                                        <figure>
+                                            {% image childpage.image fill-180x140-c100 %}
+                                        </figure>
                                     </a>
                                 </div>
-                                <div class="col-md-8">
+                                <div class="col-xs-8">
                                     <h3><a href="{{childpage.url}}">{{childpage.title}}</a></h3>
                                 </div>
                             </div>
@@ -65,6 +56,18 @@
     </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">
         <div class="col-md-12 feature-2">