2 files changed, 46 insertions, 7 deletions

diff --git a/megapixels/app/site/parser.py b/megapixels/app/site/parser.py
index 1e35e977..3700efd1 100644
--- a/megapixels/app/site/parser.py
+++ b/megapixels/app/site/parser.py
@@ -5,6 +5,7 @@ import glob
 import simplejson as json
 import mistune
 from jinja2 import Environment, FileSystemLoader, select_autoescape
+import dateutil
 
 import app.settings.app_cfg as cfg
 import app.site.s3 as s3
@@ -316,15 +317,26 @@ def parse_research_index(research_posts):
       print("No path attribute for post")
       return ""
     s3_path = s3.make_s3_path(cfg.S3_SITE_PATH, post['path'])
+    post_date = dateutil.parser.parse(post['published']).strftime('%d %B %Y')
     if 'image' in post:
       post_image = s3_path + post['image']
     else:
       post_image = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
-    row = "<a href='{}'><section class='wide'><img src='{}' alt='Research post' /><section><h1>{}</h1><h2>{}</h2></section></section></a>".format(
+    row = """
+      <a href='{}'><section class='wide' style='background-image: url({});' />
+        <section>
+          <h4><span class='bgpad'>{}</span></h4>
+          <h2><span class='bgpad'>{}</span></h2>
+          <h3><span class='bgpad'>{}</span></h3>
+          <h4 class='readmore'><span class='bgpad'>Read more...</span></h4>
+        </section>
+      </section></a>
+    """.format(
       post['path'],
       post_image,
-      post['title'],
-      post['tagline'])
+      post_date,
+      post['desc'],
+      post['subdesc'])
     content += row
   content += '</div>'
   return content
diff --git a/site/assets/css/css.css b/site/assets/css/css.css
index 816806f4..2a004e76 100644
--- a/site/assets/css/css.css
+++ b/site/assets/css/css.css
@@ -727,15 +727,29 @@ section.fullwidth .image {
 }
 .research_index h1 {
   margin-top: 20px;
-  text-decoration: underline;
+}
+.research_index .wide {
+  min-height: 33vh;
+  padding: 40px 20px;
 }
 .desktop .research_index section:hover h1 {
   color: #fff;
 }
+.research_index section {
+  padding: 20px;
+}
 .research_index section:hover h2 {
   color: #ddd;
 }
-
+.research_index section h2,
+.research_index section h3,
+.research_index section h4 {
+  max-width: 90%;
+  margin: 30px;
+}
+.research_index .readmore span {
+  border-bottom: 2px solid;
+}
 /* home page */
 
 .hero {
@@ -959,6 +973,7 @@ section.intro_section {
   max-width: 960px;
   margin: 3rem auto;
 }
+.research_index h2,
 .intro_section .hero_desc {
   font-size: 38px;
   line-height: 60px;
@@ -966,14 +981,16 @@ section.intro_section {
   color: #ddd;
   font-weight: 400;
 }
+.mobile .research_index h2,
 .mobile .intro_section .hero_desc{
   font-size: 16px;
   line-height: 32px;
   margin-bottom: 20px;
 }
-.intro_section .hero_desc .dataset-name{
-  color:#fff;
+.intro_section .hero_desc .dataset-name {
+  color: #fff;
 }
+.research_index h3,
 .intro_section .hero_subdesc {
   font-size: 17px;
   line-height: 36px;
@@ -981,27 +998,37 @@ section.intro_section {
   font-weight: 400;
   color: #ddd;
 }
+.mobile .research_index h3,
 .mobile .intro_section .hero_subdesc {
   font-size: 14px;
   line-height: 28px;
 }
+.research_index h2 .bgpad,
 .intro_section .hero_desc .bgpad {
   box-shadow: -10px -10px #181818, 10px -10px #181818, 10px 10px #181818, -10px 10px #181818;
   background: #181818;
 }
+.research_index h3 .bgpad,
 .intro_section .hero_subdesc .bgpad {
   box-shadow: -10px -10px #181818, 10px -10px #181818, 10px 10px #181818, -10px 10px #181818;
   background: #181818;
 }
+.mobile .research_index h2 .bgpad,
 .mobile .intro_section .hero_desc .bgpad {
   box-shadow: -6px -6px #181818, 6px -6px #181818, 6px 6px #181818, -6px 6px #181818;
   background: #181818;
 }
+.mobile .research_index h3 .bgpad,
 .mobile .intro_section .hero_subdesc .bgpad {
   box-shadow: -6px -6px #181818, 6px -6px #181818, 6px 6px #181818, -6px 6px #181818;
   background: #181818;
 }
 
+.research_index h4 .bgpad {
+  box-shadow: -6px -6px #181818, 6px -6px #181818, 6px 6px #181818, -6px 6px #181818;
+  background: #181818;
+  color: #eee;
+}
 
 .firefox .intro_section div > span {
   box-decoration-break: clone;