Issue 4514 - Font readability on acceptableads.com

static/scss/content/_buttons.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 11 matching lines @@
   box-sizing: border-box;
   min-width: 150px;
   padding: 0 $sm;
   cursor: pointer;
   text-align: center;
   white-space: nowrap;
   text-decoration: none;
   text-transform: uppercase;
   border: 1px solid;
   border-radius: 0px !important;
-  font-size: $font-size-xs;
+  font-size: $font-size-md;
   font-weight: 700;
-  line-height: $md;
-  height: 34px;
+  line-height: $md + 10px;

[ire, 2017/07/25 13:36:22]

I'm not sure if it's better to represent this number the way it is, or just as
42px. Because we want this number to be relative to the height of the button,
minus 2px for alignment. I'm concerned that representing it as `$md + 10px`
doesn't make this clear

[juliandoucette, 2017/07/25 15:29:59]

I think 42px is better.

[ire, 2017/07/26 08:44:22]

Done.

+  height: 44px;
 }
 
 @media(max-width: $mobile-breakpoint)
 {
   %buttons
   {
     display: block;
     float: none;
     margin: $sm 0;
     width: 100%;
@@ skipping 90 matching lines @@
     margin-top: $md;
     margin-bottom: $md;
   }
 
   @media (min-width: $tablet-breakpoint)
   {
     margin-top: $lg;
     margin-bottom: $lg;
   }
 }