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

static/scss/content/_typography.scss

Index: static/scss/content/_typography.scss
===================================================================
--- a/static/scss/content/_typography.scss
+++ b/static/scss/content/_typography.scss
@@ -25,71 +25,123 @@
 
 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;
+  }
 }
 
 h2,
 .h2
 {
   margin: $lg 0 $md 0;
   font-size: $font-size-h2;
   font-weight: 700;
+
+  @media (max-width: $tablet-breakpoint)
+  {
+    font-size: $font-size-h2 - 4px;
+    margin-top: $md;
+  }
+  @media (max-width: $mobile-breakpoint)
+  {
+    font-size: $font-size-h2 - 6px;
+    margin-bottom: $sm;
+  }
 }
 
 h3,
 .h3
 {
   margin: $lg 0 $md 0;
   font-size: $font-size-h3;
   font-weight: 700;
+
+  @media (max-width: $tablet-breakpoint)
+  {
+    font-size: $font-size-h3 - 2px;
+    margin-top: $md;
+  }
+  @media (max-width: $mobile-breakpoint)
+  {
+    margin-bottom: $sm;
+  }
 }
 
 h4,
 .h4
 {
   margin: $md 0 $sm 0;
   font-size: $font-size-h4;
   font-weight: 700;
+
+  @media (max-width: $mobile-breakpoint)
+  {
+    font-size: $font-size-h4 - 2px;
+  }
 }
 
 h5,
 .h5
 {
   margin: $sm 0;
   font-size: $font-size-h5;
+
+  @media (max-width: $mobile-breakpoint)
+  {
+    font-size: $font-size-h5 - 2px;
+  }
 }
 
 h6,
 .h6
 {
   margin: $sm 0;
   font-size: $font-size-h6;
   font-weight: 400;
+
+  @media (max-width: $mobile-breakpoint)
+  {
+    font-size: $font-size-h6 - 2px;
+  }
 }
 
 // Main text ///////////////////////////////////////////////////////////////////
 
 html,
 body
 {
   color: $primary-fg;
   // @see https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
   font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont,
   "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
   "Fira Sans", "Droid Sans", "Helvetica Neue",
   sans-serif;
   font-size: $font-size-lg;
   font-weight: 300;
   line-height: 120%;
+
+  @media (max-width: $mobile-breakpoint)
+  {
+    font-size: $font-size-lg - 2px;
+  }
 }
 
 small,
 .small
 {
   margin-bottom: $xs;
   font-size: 70%;
   line-height: 80%;
@@ -100,16 +152,21 @@
 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;
@@ -254,16 +311,21 @@
   margin: $sm 0 $md 0;
 }
 
 dt
 {
   font-size: $font-size-xl;
   text-transform: uppercase;
   font-weight: 700;
+
+  @media (max-width: $tablet-breakpoint)
+  {
+    font-size: $font-size-xl - 2px;
+  }
 }
 
 // Blockquotes /////////////////////////////////////////////////////////////////
 
 blockquote
 {
   margin: 0;
   padding: 0 $md;
@@ -287,18 +349,24 @@
 {
   border: none;
 }
 
 .center blockquote
 {
   @extend h2;
   margin: 0;
-  padding: $xl 0;
+  padding: $lg 0;
   font-style: normal;
+
+  @media (max-width: $tablet-breakpoint)
+  {
+    font-size: $font-size-h3;
+    padding: $md 0;
+  }
 }
 
 .center blockquote p:last-child
 {
   margin-top: -$xs;
 }
 
 cite