Issue 5723 - Implement new abp.org content style guide

static/css/main.css

 *
 {
   font-family: Arial, sans;
   font-size: 16px;
 }
 
 body
 {
   margin: 0;
   line-height: 1.5;
@@ skipping 257 matching lines @@
 [dir="ltr"] .alert
 {
   border-left: 5px solid #d14841;
 }
 
 [dir="rtl"] .alert
 {
   border-right: 5px solid #d14841;
 }
 
-/*******************************************************************************
+/******************************************************************************
  * .content
- ******************************************************************************/
-
-.content h5,
+ *****************************************************************************/
+
+.content h1,
+.content h2,
+.content h3,
 .content h4,
-.content h3,
-.content h2,
-.content h1

[ire, 2017/10/09 12:28:48]

NIT (feel free to ignore if you don't agree): I think the selectors should be
ordered in descending order (i.e. h1 first)

[juliandoucette, 2017/10/09 23:28:53]

I agree :D

+.content h5
 {
   font-weight: bold;
-  margin: 30px 0px;

[juliandoucette, 2017/10/07 15:50:07]

(fallback in-case rem is not supported - this size may change based on the base
font-size we decide on. The default font-size is usually 30px - so I probably
should have made this 32px)

[ire, 2017/10/09 12:28:48]

Acknowledged.

+  margin: 32px 0px;
   margin: 2rem 0rem;
 }
 
-.content h5 {font-size: 1.1em;}

[ire, 2017/10/09 12:28:48]

There should be spaces between the "{" and the style inside

[juliandoucette, 2017/10/09 23:28:53]

Acknowledged. (Doh)

-.content h4 {font-size: 1.2em;}
-.content h3 {font-size: 1.3em;}
-.content h2 {font-size: 1.6em;}
-.content h1 {font-size: 2.4em;}
-
-.content footer,

[juliandoucette, 2017/10/07 15:50:08]

I could have excluded this from this review as it only really applies to the
footer (which includes this style or similar already).

[ire, 2017/10/09 12:28:48]

I think it should only be applied to the #site-footer element. We may want to
use the footer element elsewhere and not necessarily have this font-size
applied.

[juliandoucette, 2017/10/09 23:28:53]

Agreed. The styleguide does specify this. But the design doesn't include many
<footer>s with smaller text; anyway. I should have known better.

-.content small
-{
-  font-size: 0.9em;
-}
+.content h1 { font-size: 2.4em; }
+.content h2 { font-size: 1.6em; }
+.content h3 { font-size: 1.3em; }
+.content h4 { font-size: 1.2em; }
+.content h5 { font-size: 1.1em; }