Issue 5135 - Reduce font size and padding on smaller screens on acceptableads.com

static/scss/content/_typography.scss

 // This file is part of acceptableads.org.
 // Copyright (C) 2016 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 13 matching lines @@
 }
 
 h1,
 .h1
 {
   margin: $xl 0 $lg 0;
   text-transform: none;
   font-size: $font-size-h1;
   font-weight: 300;
 
   @media (max-width: $tablet-breakpoint)

[juliandoucette, 2017/06/16 18:47:53]

NIT: Regarding all $font-size-N - N calculations: It seems these are all close
to or exactly subtracting one size unit. Why not change font-size-h1 to h2 on
tablets and h3 on mobile, and follow the same pattern for h2 and non-header
sizes when appropriate?

(I'm not sure if you tried this already and chose these exact sizes based on
that or if you considered this and thought that consistently subtracting
specific numbers was a better idea.)

[ire, 2017/06/19 11:51:04]

In some cases, it would work to use a smaller font size variable like you
suggest. However, for some cases, it doesn't work or is too small. For example,
a $font-size-h2 would work for the $tablet-breakpoint here, but a $font-size-h3
would be way too small for the mobile size. So I would have to do the
subtraction method anyway. 

I guess it boils down to if we would prefer to use a combination of the two
methods, or just stick to one. I think I may prefer the former; so I would use
the $font-size-h2 for the $tablet-breakpoint here and do a manual subtraction
for the mobile styles. I think it makes sense to make use of our variables
wherever we can. If you have no objection, I'll go ahead and make this change?

[juliandoucette, 2017/06/20 16:38:36]

I prefer the later actually. I think it's more consistent / easier to
understand.

[ire, 2017/06/22 15:41:44]

Okay, I'll leave it as it is then. 

   {
     font-size: $font-size-h1 - 12px;
     margin-top: $md;
   }
   @media (max-width: $mobile-breakpoint)
   {
     font-size: $font-size-h1 - 16px;
     margin-bottom: $lg - 20px;
   }
 }
@@ skipping 105 matching lines @@
 blockquote,
 p,
 ul,
 ol,
 dl,
 .block
 {
   margin: $sm 0;
 }
 
-.row p:first-child 
-{
-  margin-top: 0;

[ire, 2017/06/15 11:16:23]

I had to override this because it was adding extra padding where there didn't
need to be, and making the space between the page heading and the start of the
content seem larger

[juliandoucette, 2017/06/16 18:47:53]

You should change components/_columns.scss instead.

[ire, 2017/06/19 11:51:04]

Acknowledged.

-}
-
 // Links ///////////////////////////////////////////////////////////////////////
 
 a
 {
   cursor: pointer;
   text-decoration: underline;
   color: $accent;
   font-weight: 400;
 }
 
@@ skipping 255 matching lines @@
   // hr background color is the line color
   background-color: $primary-fg;
 }
 
 // Place hr under h1 or h2 inside hN margin
 h1 + hr,
 h2 + hr
 {
   position: absolute;
   margin: -$md 0 $md 0;
+
+  @media (max-width: $mobile-breakpoint) 
+  {
+    margin-top: -$sm - 5px;

[ire, 2017/07/06 10:31:38]

The $xs size was every so slightly off

+  }
 }
 
 // center hr in centered blocks
 .center hr
 {
   margin: $sm auto;
 }
 
 // Tables //////////////////////////////////////////////////////////////////////
 
@@ skipping 33 matching lines @@
 {
   vertical-align: bottom;
   text-transform: uppercase;
   border-bottom: 2px solid $info;
 }
 
 table tbody + tbody
 {
   border-top: 2px solid $info;
 }