Noissue - Refactored new abp.org mobile heading sizes

static/css/main.css

 *
 {
   font-family: Arial, sans;
   font-size: 16px;
 }
 
 body
 {
   margin: 0;
   line-height: 1.5;
 }
 
 a img
 {
   border: none;
 }
 
 a:link, a:visited
 {
   color: #555;
 }
 
 button
 {
   cursor: pointer;
 }
 
 code, pre
 {
-  font-family: "Courier New", monospace;
+  font-family: monospace;
 }
 
 pre
 {
-  background: #fff8dc;
-  padding: 10px;
-  border: 1px solid black;
+  background: #ececec;
+  padding: 1em;
   overflow: auto;
 }
 
 .sprite
 {
   display: inline-block;
   font-size: 0px; /* fix for IE6 height bug */
   background-image: url(../img/sprite-main.png);
   background-repeat: no-repeat;
 }
@@ skipping 109 matching lines @@
   margin: 32px 0px;
   margin: 2rem 0rem;
 }
 
 .content h1 { font-size: 1.8em; }
 .content h2 { font-size: 1.4em; }
 .content h3 { font-size: 1.3em; }
 .content h4 { font-size: 1.2em; }
 .content h5 { font-size: 1.1em; }
 
-@media(min-width: 1200px)

[ire, 2017/10/20 07:36:00]

NIT: I think this is too wide? I think the larger sizes could be applied at a
smaller breakpoint (tablet/desktop-width)

[juliandoucette, 2017/10/20 13:52:15]

Agreed. We can use a variable for this purpose.

[juliandoucette, 2017/10/20 14:03:16]

I was thinking about website-defaults :D

+@media(min-width: 768px)
 {
   .content h1 { font-size: 2.4em; }
   .content h2 { font-size: 1.6em; }
+}
+
+.content a,
+.content a:visited
+{
+  color: #c70d2c;
 }
 
 /*******************************************************************************
  * #navbar
  ******************************************************************************/
 
 #navbar
 {
   height: 4em;
   background-color: #c70d2c;
@@ skipping 421 matching lines @@
   {
     display: none;
   }
 
   /* overriding display:none above */
   #footer #social-list
   {
     display: block;
   }
 }