Highlights of CSS tweaks:

(1) The filename of a <pre> block is now hidden until hover. This fixes the data-filename grey box covering code when the first 1-2 lines of code are long.

(2) In <pre> blocks, <b> and <strike> are more visible

(3) Size of text bumped down slightly to fit more code in but still remain legible. 

(4) Text in <pre> blocks no longer wrap and horizontal scroll is enabled when a line of code is too long.

BUG=none

Review URL: https://codereview.chromium.org/269983002

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@268307 0039d316-1c4b-4281-b951-d872f2087c98

chrome/common/extensions/docs/static/sass/_html.scss

@@ -41,14 +41,33 @@ pre {
   background-color: #f7f7f7;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 3px rgba(0, 0, 0, 0.15);
   margin: 1em 0 0 0;
-  overflow: auto;
   padding: .99em;
   position: relative;
+  overflow-x: auto; 
+  word-wrap: normal; 
+  white-space: pre;
+  font-size: 0.95em;
+  line-height: 1.8em;
   a {
     text-decoration: underline!important;
   }
   b {
     background: yellow;
+    font-weight: normal;
+  }
+  strike {
+    text-decoration: none;
+    background-image: -webkit-linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 9px,transparent 9px);
+    background-image:    -moz-linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 9px,transparent 9px);
+    background-image:     -ms-linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 9px,transparent 9px);
+    background-image:      -o-linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 9px,transparent 9px);
+    background-image:         linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 9px,transparent 9px);
+  }
+  &[data-filename]::after {
+    visibility: hidden;
+  }
+  &[data-filename]:hover::after {
+    visibility: visible;
   }
 }
 

chrome/common/extensions/docs/static/sass/_typography.scss

@@ -114,6 +114,10 @@ footer[role="contentinfo"] {
   }
 }
 
+em {
+  padding-right: 2px; /* "kerning" adjustment */
+}
+
 img {
   vertical-align: middle;
 }
@@ -148,6 +152,10 @@ pre {
   //font-size: $monospace-font-size;
 }
 
+a > code {
+  color: $link-color;
+}
+
 pre {
   margin: 2em 0;
   word-wrap: break-word;