Merge pull request #4 from datalets/frontend-corrections-beta

Frontend corrections beta

publichealth/home/templates/home/article_content.html

@@ -28,7 +28,7 @@
 </div>
 
 <!-- Infoblocks -->
-<div class="row">
+<div class="row infoblocks">
 {% for block in page.trans_body %}
   {% if block.block_type == 'info' %}
   <article class="col-md-4">

publichealth/home/templates/home/page_content.html

@@ -6,7 +6,7 @@
 </div>
 {% endif %}
 
-<h2>{{ page.trans_title }}</h2>
+<h1 class="title">{{ page.trans_title }}</h1>
 
 <p class="lead">{{ page.trans_intro|richtext }}</p>
 
@@ -28,7 +28,7 @@
 </div>
 
 <!-- Infoblocks -->
-<div class="row">
+<div class="row infoblocks">
   {% for block in page.trans_body %}
   {% if block.block_type == 'info' %}
   <article class="col-md-4">

publichealth/home/templates/infos.html

@@ -2,7 +2,7 @@
 
 <section id="three" class="wrapper align-center">
 	<div class="container">
-		<div class="row">
+		<div class="row infoblocks">
     	{% for block in page.trans_infos %}
 			<article class="col-md-4">
 				<div class="image">
@@ -19,4 +19,4 @@
     	{% endfor %}
 		</div>
 	</div>
-</section>
+</section>

publichealth/static/css/modules/_articles.scss

@@ -5,18 +5,32 @@ section {
     background-color: $gray-lighter;
   }
 
-  h2 {
+  h1 {
+    font-size: 40px;
     text-align: center;
     margin-bottom: 1.5em;
     text-transform: uppercase;
   }
 }
 
+.article-body {
+  h2 { font-size: 35px; }
+  h3 { font-size: 30px; }
+  h4 { font-size: 25px; }
+  h5 { font-size: 22px; }
+
+  line-height: 1.5;
+}
+
 // Article content blocks
 .article-body > div {
   clear: both;
 }
 
+.infoblocks article:nth-child(4) {
+    clear: both;
+}
+
 // Responsive image/video classes
 .rich-text img {
     max-width: 100%;

publichealth/static/mockup/assets/css/main.css

@@ -8569,16 +8569,37 @@ section {
 section:nth-child(odd) {
   background-color: #eeeeee;
 }
-section h2 {
+section h1 {
+  font-size: 40px;
   text-align: center;
   margin-bottom: 1.5em;
   text-transform: uppercase;
 }
 
+.article-body {
+  line-height: 1.5;
+}
+.article-body h2 {
+  font-size: 35px;
+}
+.article-body h3 {
+  font-size: 30px;
+}
+.article-body h4 {
+  font-size: 25px;
+}
+.article-body h5 {
+  font-size: 22px;
+}
+
 .article-body > div {
   clear: both;
 }
 
+.infoblocks article:nth-child(4) {
+  clear: both;
+}
+
 .rich-text img {
   max-width: 100%;
   height: auto;