Issue 5102 - Replaced semantically incorrect <hr> elements with :after styles

static/scss/content/_typography.scss

 // This file is part of acceptableads.org.
 // Copyright (C) 2016-present eyeo GmbH
 //
 // acceptableads.org is free software: you can redistribute it and/or modify
 // it under the terms of the GNU General Public License as published by
 // the Free Software Foundation, either version 3 of the License, or
 // (at your option) any later version.
 //
 // acceptableads.org is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 398 matching lines @@
 }
 
 pre
 {
   overflow: scroll;
   margin: 0;
 }
 
 // Horizontal rules ////////////////////////////////////////////////////////////
 
-hr
+hr,

[ire, 2017/09/07 09:20:17]

NIT: We aren't using the hr element anywhere else. Maybe we should remove the
selector?

[juliandoucette, 2017/09/11 16:24:14]

Acknowledged.

I should have checked.

+.outer h1:after
 {
+  display: block;
   width: $sm + $xs;
   height: 3px;
   margin: $sm 0;
   border: none;
-  // hr background color is the line color
   background-color: $primary-fg;
 }
 
 // Place hr under h1 or h2 inside hN margin
-h1 + hr,
-h2 + hr
+h2 + hr,

[ire, 2017/09/07 09:20:18]

The h2 + hr selector isn't relevant anymore

[juliandoucette, 2017/09/11 16:24:14]

Acknowledged.

I should have checked.

+h1:after

[ire, 2017/09/07 09:20:18]

This should be `.outer h1:after`. Also, all three of these selectors targeting
`h1:after` could be grouped and conflicting styles resolved (e.g. the margins)

[juliandoucette, 2017/09/11 16:24:14]

Acknowledged.

If you are correct about hr and h2 above; yes.

 {
+  content: "";
   position: absolute;
   margin: -$md 0 $md 0;
 
-  @media (max-width: $mobile-breakpoint) 
+  @media (max-width: $mobile-breakpoint)
   {
     margin-top: -$sm - 5px;
   }
 }
 
+.outer h1:after
+{
+  margin-top: 32px;

[ire, 2017/09/07 09:20:18]

This style seems to be overriding the mobile style above and messing up the
spacing on mobile

[juliandoucette, 2017/09/11 16:24:14]

Good catch.

+}
+
 // center hr in centered blocks
 .center hr

[ire, 2017/09/07 09:20:18]

NIT: See comment above. I don't think this is relevant anymore

[juliandoucette, 2017/09/11 16:24:14]

Acknowledged.

 {
   margin: $sm auto;
 }
 
 // Tables //////////////////////////////////////////////////////////////////////
 
 // !important here because browsers will override otherwise.
 
 table
 {
@@ skipping 29 matching lines @@
 {
   vertical-align: bottom;
   text-transform: uppercase;
   border-bottom: 2px solid $info;
 }
 
 table tbody + tbody
 {
   border-top: 2px solid $info;
 }