Issue 5723 - Implement new abp.org content style guide

static/css/main.css

Index: static/css/main.css
===================================================================
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,100 +1,8 @@
-/*******************************************************************************
- * Base styles
- ******************************************************************************/
-html {
-  color: #212121;
-  background-color: #fff;
-  font-family: sans-serif;
-  line-height: 1.5; }
-
-/**
- * Stretch content full-width
- */
-.full-width {
-  display: block;
-  width: 100%;
-  margin: 1em 0px; }
-
-/**
- * Center content within a (responsive) fixed width
- */
-.container {
-  width: auto;
-  max-width: 100%;
-  margin: 0px auto;
-  padding: 0px 1em; }
-
-@media (min-width: 768px) {
-  .container {
-    width: 720px; } }
-
-@media (min-width: 1200px) {
-  .container {
-    width: 1170px; } }
-
-/*******************************************************************************
- * Grid component
- ******************************************************************************/
-/**
- * - .row contains one or more .column(s)
- * - .row clears .column(s)
- * - .row negates the left & right padding of it's left-most & right-most
- *   .column(s) while preserving consistent padding between .column(s)
- */
-.row {
-  margin: 0px -1em; }
-
-.row:after {
-  display: block;
-  clear: both;
-  content: ""; }
-
-/**
- * - .column is 100% width by default
- * - Modifier classes are applied to .column to change it's width
- * - Modifier classes behave differently on different device widths
- */
-.column {
-  position: relative;
-  width: 100%;
-  min-height: 1px;
-  padding: 0px 1em; }
-
-/* - .column(s) within .row .reverse appear in reverse order
- * - .column(s) within [dir=rtl] appear in reverse order respectively
- */
-.column,
-[dir="rtl"] .reverse .column {
-  float: left; }
-
-.row,
-.column {
-  box-sizing: border-box; }
-
-.reverse .column,
-[dir="rtl"] .column {
-  float: right; }
-
-@media (min-width: 768px) {
-  .one-half,
-  .one-fourth {
-    width: 50%; } }
-
-@media (min-width: 1200px) {
-  .one-third {
-    width: 33.333333%; }
-  .two-thirds {
-    width: 66.666667%; }
-  .one-fourth {
-    width: 25%; }
-  .three-fourths {
-    width: 75%; } }
-
 *
 {
   font-family: Arial, sans;
   font-size: 16px;
 }
 
 body
 {
@@ -200,32 +108,16 @@
 #logo
 {
   position: absolute;
   width: 128px;
   height: 128px;
   background-position: -83px -83px;
 }
 
-#content h1
-{
-  font-size: 30px;
-}
-
-#content h2
-{
-  font-weight: bold;
-  font-size: 25px;
-}
-
-#content h3
-{
-  font-size: 20px;
-}
-
 #adblock-browser-notification
 {
   text-align: center;
 }
 
 #adblock-browser-notification a
 {
   font-weight: bold;
@@ -377,8 +269,35 @@
 {
   border-left: 5px solid #d14841;
 }
 
 [dir="rtl"] .alert
 {
   border-right: 5px solid #d14841;
 }
+
+/*******************************************************************************
+ * .content
+ ******************************************************************************/
+
+.content h5,
+.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

+{
+  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: 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;
+}