Incognito NTP style tweaks

chrome/browser/resources/ntp4/incognito_and_guest_tab.css

 /* Copyright 2014 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  *
  * Incognito and guest mode NTP shared CSS.
  */
 
 h1 {
   font-size: 200%;
-  font-weight: normal;
-  margin-bottom: 1.33em;
+  font-weight: 300;
+  margin-bottom: 1.33333em;
 }
 
 p {
-  line-height: 1.7;
+  line-height: 1.5;
   margin-bottom: 2em;
   text-align: start;
 }
 
 a {
   font-size: 108.3%;
   text-decoration: none;
   text-transform: uppercase;
 }
 
 a:hover {
   text-decoration: underline;
 }
 
 .content {
   box-sizing: border-box;
   margin: 3.5em auto 0;
+  max-width: 420px;
+  min-width: 300px;

[Evan Stade, 2015/12/15 19:25:14]

I still don't think this needs to change. The current sizing is intentional and
works fine. A horizontal scrollbar for a very narrow window is quite reasonable.
I prefer simpler CSS over more complicated CSS because it's very easy for some
CSS to have no effect after you make some change and for it to not be apparent
what situation, if any, a particular line of CSS is relevant to.

[edwardjung, 2015/12/17 13:32:57]

I disagree, since most horizontal scrolling on web pages is poor UX. It just
feels unpolished and like we don't know anything about responsive design
techniques. 

The code isn't too complicated  (I can add comments in the relevant media query
section if that helps for future maintenance). I'll defer to bettes@ and
sgabriel@ is whether they are okay with horizontal scrolling in the bug. 

Agreed that on very narrow widths (sub 270px) the single word on a line column
is silly but the min-width caters for this.

   padding: 30px 35px;
   text-align: center;
-  width: 420px;
 }
 
 html[hascustombackground='true'] .content {
   border-radius: 2px;
   box-shadow: 0 4px 6px 1px rgba(0, 0, 0, 0.4);
 }
 
 .content > span {
   display: block;
 }
 
 @media (max-width:700px) {
   body {
     margin: 1em 2em 2em;
   }
 }
 
 @media (max-width:400px) {
   body {
     margin: 3em 1.5em 2em;
   }
+
+  .content {
+    padding: 30px 12px;
+  }
 }
 
 @media (max-height:480px) and (max-width:400px) {
   .content {
     margin: auto;
   }
 }