Article lead formatting

publichealth/home/templates/home/article_index_page.html

@@ -7,7 +7,7 @@
 
 {% if articles|length is 1 %}
 
-  <section id="news-details">
+  <section id="news-details" class="article-index-page">
     <div class="container">
     {% for page in articles %}
       {% include 'home/page_content.html' %}
@@ -17,7 +17,7 @@
 
 {% else %}
 
-  <section id="article-index">
+  <section id="article-index" class="article-index-page">
     <div class="container">
     	<h2>{{ page.trans_title }}</h2>
     	<p class="lead">{{ page.trans_intro|richtext }}</p>

publichealth/home/templates/home/article_page.html

@@ -4,7 +4,7 @@
 {% block body_class %}template-{{ self.get_verbose_name|slugify }}{% endblock %}
 
 {% block content %}
-<section id="news-details">
+<section id="news-details" class="article-page">
   <div class="container">
 
     {% include 'home/page_content.html' %}

publichealth/home/templates/home/page_content.html

@@ -8,7 +8,7 @@
 
 <h1 class="title">{{ page.trans_title }}</h1>
 
-<p class="lead">{{ page.trans_intro|richtext }}</p>
+<div class="lead">{{ page.trans_intro|richtext }}</div>
 
 {% if page.date %}
 <p class="date">{{ page.date }}</p>

publichealth/static/css/modules/_articles.scss

@@ -26,11 +26,15 @@ section {
 .article-body > div {
   clear: both;
 }
-
 .infoblocks article:nth-child(3n+0) {
     clear: both;
 }
 
+// Special article layout
+.article-page .lead {
+  h2,h3,h4,h5 { text-align: center; }
+}
+
 // Responsive image/video classes
 .rich-text img {
     max-width: 100%;