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
 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // GNU General Public License for more details.
 //
 // You should have received a copy of the GNU General Public License
 // along with acceptableads.org.  If not, see <http://www.gnu.org/licenses/>.
 
 // Headings ////////////////////////////////////////////////////////////////////
 
 %headings
 {
   text-transform: uppercase;
   font-weight: 700;
   line-height: 120%;
 }
 
 h1,

[juliandoucette, 2017/07/05 13:28:33]

I think the change to this header margin is miss-aligning the hr on mobile.

https://drive.google.com/open?id=0B9dIRGeSpmZ_SkdXUUt4b2VIYmM

I think the hr should be centered in the space below.

There is room for interpretation here (in the design).

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

Done. I had initially thought of it as an underline, but on second look at it on
desktop you're right it's more of a separator between the heading and content.  

Note: The alignment is very slightly different across the pages due to the
differing spacing we discussed in the other comment (e.g.
http://localhost:5000/en/about vs http://localhost:5000/en/about/criteria). But
I think the difference is slight enough to not be an issue. 

 .h1
 {
   margin: $xl 0 $lg 0;
   text-transform: none;
   font-size: $font-size-h1;
   font-weight: 300;
+
+  @media (max-width: $tablet-breakpoint)
+  {
+    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%;
 }
 
@@ skipping 154 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;
 }