Update reader mode viewer according to specs

components/dom_distiller/core/css/distilledpage.css

Index: components/dom_distiller/core/css/distilledpage.css
diff --git a/components/dom_distiller/core/css/distilledpage.css b/components/dom_distiller/core/css/distilledpage.css
index e1b42ff0a4218e84ba211b5811399ad098efabe1..0f7281c97f3f6907d379b519e32dde233f22295e 100644
--- a/components/dom_distiller/core/css/distilledpage.css
+++ b/components/dom_distiller/core/css/distilledpage.css
@@ -68,7 +68,7 @@ table {
 
 td,
 th {
-  padding: 0;
+  padding: 0.1rem;
 }
 
 /* Base typography. */
@@ -95,12 +95,12 @@ body {
  * and with CSS class constants in viewer.cc */
 
 .light {

[cjhopman, 2015/06/19 23:21:18]

These themes don't seem to be in line with the recommendations at
http://www.google.com/design/spec/style/color.html

[wychen, 2015/06/23 18:41:29]

Updated, but not exactly the same as the recommendations.

-  color: #333;
+  color: #424242;
   background-color: #FFF;
 }
 
 .dark {
-  color: #DDD;
+  color: #E0E0E0;
   background-color: #000;
 }
 
@@ -114,7 +114,7 @@ body {
 }
 
 .sans-serif {
-  font-family: 'Open Sans', sans-serif;
+  font-family: 'Roboto', sans-serif;
 }
 
 .monospace {
@@ -141,16 +141,17 @@ table,
 td,
 th,
 ul {
-  margin-bottom: 1rem;
+  margin-bottom: 1.143rem;
 }
 
+h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   line-height: 1.296;
-  margin-bottom: 0.444rem;
+  margin: 1em 0;
 }
 
 /* Content. */
@@ -162,10 +163,9 @@ h6 {
   border-top: 1px solid #E0E0E0;
   color: #4285F4;
   flex: 0 0 auto;
-  font-family: 'Roboto-Medium', 'Open Sans', sans-serif;
+  font-family: 'Roboto', sans-serif;
   font-weight: 700;
   line-height: 14px;
-  margin-top: 24px;
   padding: 24px 16px;
   font-size: 14px;
   text-align: right;
@@ -175,47 +175,27 @@ h6 {
 }
 
 #content {
-  margin: 0.2rem 2.2%;
+  margin: 24px 16px 24px 16px;
 }
 
 #mainContent {
   flex: 1 1 auto;
   margin: 0px auto;
-  max-width: 800px;
+  max-width: 45em;
   width: 100%;
 }
 
 #articleHeader {
-  background-color: rgb(73, 73, 73);
-  color: white;
-  min-height: 90px;
+  margin-top: 24px;
   width: 100%;
 }
 
-#titleCollapse  {
-  display: block;
-  overflow: hidden;
-}
-
-#titleCollapse .verticalCenterOuter {
-  min-height: 90px;
-}
-
 #titleHolder {
-  padding: 10px 30px;
-}
-
-.verticalCenterOuter {
-  display: table;
-  height: 100%;
+  font-size: 1.714rem;
+  line-height: 1.333;
+  margin: 0 16px;
 }
 
-.verticalCenterInner {
-  display: table-cell;
-  vertical-align: middle;
-}
-
-
 /* Link colors for light, dark and sepia themes */
 
 .light a:link,
@@ -237,12 +217,12 @@ h6 {
 }
 
 blockquote {
-  border-left: 4px solid #eee;
+  border-left: 4px solid #888;
   padding-left: 1em;
 }
 
 cite {
-  opacity: .54;
+  opacity: .8;
   font-style: italic;
 }
 
@@ -253,11 +233,6 @@ hr {
   width: 75%;
 }
 
-h1 {
-  font-size: 1.7rem;
-  line-height: 1.296;
-  margin-bottom: 0.444rem;
-}
 
 q {
   opacity: .8;
@@ -279,7 +254,7 @@ video {
 img {
   display: block;
   height: auto;
-  margin: 0 auto 0.6rem auto;
+  margin: 0.6rem auto 0.6rem auto;
 }
 
 /* TODO(nyquist): set these classes directly in the dom distiller. */
@@ -289,10 +264,11 @@ figcaption,
 img+[class*='caption'],
 object+[class*='caption'],
 video+[class*='caption'] {
-  opacity: .54;
+  opacity: .8;
   display: table;
-  font-style: italic;
-  margin: 0 auto;
+  margin-bottom: 1rem;
+  font-size: 0.857rem;
+  line-height: 1.667;
 }
 
 ol,
@@ -301,30 +277,36 @@ ul {
 }
 
 .light code,

[cjhopman, 2015/06/19 23:21:18]

Should the colorscheme stuff be all together?

[wychen, 2015/06/23 18:41:29]

Done.

-.light pre,
+.light pre {
+  background-color: #EEE;
+  border-color: #AAA;
+}
+
 .sepia code,
 .sepia pre {
-  background-color: #f8f8f8;
-  border: 1px solid #eee;
-  border-radius: 2px;
+  background-color: rgb(217, 196, 175);
+  border-color: #AAA;
 }
 
 .dark code,
 .dark pre {
   background-color: #333;
-  border: 1px solid #555;
+  border-color: #555;
+}
+
+code, pre {
+  border: 1px solid;
   border-radius: 2px;
 }
 
 pre code {
   border: none;
-  padding: 0;
 }
 
 pre {
   line-height: 1.296;
-  overflow-x: scroll;
   padding: .5em;
+  white-space: pre-wrap;
 }
 
 .hidden {