Refactored article CSS, added clear breaks

publichealth/home/templates/home/article_index_page.html

@@ -32,6 +32,9 @@
     {% endfor %}
     </div>
   </section>
+
+{% else %}
+  No articles here.
 {% endif %}
 
 {% if subcategories %}

publichealth/static/css/main.scss

@@ -4,51 +4,9 @@
 @import '../libs/bootstrap-sass/assets/stylesheets/bootstrap';
 @import 'paper/bootswatch';
 
-
 // Modules
 @import "modules/modules";
 
 body {
   margin-top: 104px;
 }
-
-section {
-  padding: 6em 0;
-  &:nth-child(odd) {
-    background-color: $gray-lighter;
-  }
-  
-  h2 {
-    text-align: center;
-    margin-bottom: 1.5em;
-    text-transform: uppercase;
-  }
-}
-
-/* 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%;
-}
-
-article footer .btn {
-  margin-bottom: 1em;
-}

publichealth/static/css/modules/_articles.scss

@@ -0,0 +1,42 @@
+// Article sections
+section {
+  padding: 6em 0;
+  &:nth-child(odd) {
+    background-color: $gray-lighter;
+  }
+
+  h2 {
+    text-align: center;
+    margin-bottom: 1.5em;
+    text-transform: uppercase;
+  }
+}
+
+// Article content blocks
+.article-body > div {
+  clear: both;
+}
+
+// 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%;
+}

publichealth/static/css/modules/_footer.scss

@@ -15,3 +15,7 @@ footer#footer {
   text-align: center;
   font-size: 70%;
 }
+
+article footer .btn {
+  margin-bottom: 1em;
+}

publichealth/static/css/modules/_modules.scss

@@ -4,3 +4,4 @@
 @import "footer";
 @import "news";
 @import "forms";
+@import "articles";

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

@@ -8411,6 +8411,10 @@ footer#footer a {
   font-size: 70%;
 }
 
+article footer .btn {
+  margin-bottom: 1em;
+}
+
 #news .panel-default {
   font-size: 90%;
   padding-top: 75%;
@@ -8559,10 +8563,6 @@ footer#footer a {
   padding-top: 0.5em;
 }
 
-body {
-  margin-top: 104px;
-}
-
 section {
   padding: 6em 0;
 }
@@ -8575,7 +8575,10 @@ section h2 {
   text-transform: uppercase;
 }
 
-/* Responsive image/video classes */
+.article-body > div {
+  clear: both;
+}
+
 .rich-text img {
   max-width: 100%;
   height: auto;
@@ -8603,6 +8606,6 @@ section h2 {
   height: 100%;
 }
 
-article footer .btn {
-  margin-bottom: 1em;
+body {
+  margin-top: 104px;
 }