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)
+  {
+    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;
 }
 
+.p-container

[ire, 2017/06/27 08:36:31]

Note: I couldn't really figure out where else to put this class. If you have any
better suggestions, let me know. 

[juliandoucette, 2017/07/03 23:12:38]

I don't like the name of this class because it's too specific (it contains more
than *just* paragraphs).

I'm also confused about it's usage. It seems to do the same thing as .section
except only margin-bottom. But, at least in the case of h1, hr, [p]N, why not
just wrap the group in a .section (the header margin should collapse)?

That this class is necessary so often suggest to me that something is wrong with
our structure or defaults.

[ire, 2017/07/04 11:03:11]

Yeah you'e right it could have a better name. 

I tried to use the .section but it wasn't quite right. What I was going for with
this class was more a container for:

1. The main pargraphs on the page. e.g. in pages/committee/apply.md, the class
is applied only around that part of the page
2. The main section of the page. e.g. in pages/solutions/publishers.md, the
class is applied around basically the whole content area of the page. 

In these cases the .section class didn't really work. But perhaps there is
another class, similar to .section we can extend? Or rename this .p-container
class with something that is more general like .section is?

[juliandoucette, 2017/07/04 15:33:08]

This is what I had in mind.

But it's not clear:
- Why .section didn't work
- Whether or not .section could/should work (if modified)

I don't have a strong opinion on using .section or not. Rather, I just want
*whatever-it-is* to be straightforward. So that when I create another page I
know whether or not to use this class and why.

If you see https://acceptableads.com/en/styleguide (a hidden and depricated
page) you can get the idea about what .section was meant for at the bottom.
There were 3 different colour sections [primary, secondary, accent] and they all
had xl margin and padding and their margins would collapse if they appeared
after each other.

The class that you seem to be proposing seems something like a .content-section
or .content-container - a container (that provides spacing) meant for content
within .section-s and/or columns. But it's not entirely clear me to yet (what it
is or should be or why).

I hope that this comment is clear and I'm not repeating myself :D - thank you
for your patience.

[ire, 2017/07/05 10:33:09]

Ah I see what you mean! The .section class *should* work in this case, and I
think with some refactoring it could. In fact, the margin-top on the .section
class is almost almost collapsed, so we may be able to refactor it to only
applying a margin on the bottom without having to change too much. I'll make the
change in the next patch. 

[ire, 2017/07/05 10:53:50]

Done.

+{
+  margin-bottom: $md;
+
+  @media (min-width: $mobile-breakpoint)
+  {
+    margin-bottom: $lg;
+  }
+
+  @media (min-width: $tablet-breakpoint)
+  {
+    margin-bottom: $xl;
+  }
+}
+
+.p-container p:first-child 

[ire, 2017/06/27 08:36:32]

This is a change from the `.row p:first-child` selector. Let me know if a
comment is still needed.

+{
+  margin-top: 0;
+}
+
 // 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;
 }