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 12 matching lines @@
   line-height: 120%;
 }
 
 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%;
 }
 
 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 134 matching lines @@
 dd
 {
   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;
   text-transform: uppercase;
   font-size: $font-size-lg;
@@ skipping 13 matching lines @@
 
 html .center blockquote
 {
   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
 {
   font-size: $font-size-sm;
@@ skipping 108 matching lines @@
 {
   vertical-align: bottom;
   text-transform: uppercase;
   border-bottom: 2px solid $info;
 }
 
 table tbody + tbody
 {
   border-top: 2px solid $info;
 }