update the css to match dartlang.org (#1416)

* refresh dartdoc css

* regen testing package

* review comments

Author: devoncarew

bin/dartdoc.dart

@@ -117,7 +117,8 @@ main(List<String> arguments) async {
   }
 
   PackageMeta packageMeta = sdkDocs
-      ? new PackageMeta.fromSdk(sdkDir, sdkReadmePath: readme)
+      ? new PackageMeta.fromSdk(sdkDir,
+          sdkReadmePath: readme, useCategories: args['use-categories'])
       : new PackageMeta.fromDir(inputDir);
 
   if (!packageMeta.isValid) {

lib/resources/styles.css

@@ -16,13 +16,14 @@ html {
 }
 
 body {
-  font-family: 'Roboto', sans-serif;
-  font-size: 15px;
-  margin-bottom: 60px;
-  -webkit-font-smoothing: antialiased;
   -webkit-text-size-adjust: 100%;
   overflow-x: hidden;
-  color: #212121;
+
+  font-family: "Source Sans Pro", sans-serif;
+  font-size: 16px;
+  line-height: 1.42857143;
+  color: #111111;
+  background-color: #fff;
 }
 
 nav {
@@ -51,13 +52,12 @@ nav .container {
 }
 
 header {
-  background-color: rgb(0, 102, 152);
-  color: white;
-  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
+  background-color: #eeeeee;
+  box-shadow: 0 3px 5px rgba(0,0,0,0.1);
 }
 
 header.header-fixed nav.navbar-fixed-top {
-  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
+  box-shadow: 0 3px 5px rgba(0,0,0,0.1);
 }
 
 header.container-fluid {
@@ -97,17 +97,25 @@ h3,
 h4,
 h5,
 h6 {
-  font-weight: normal;
-  margin: 0;
+  font-family: "Source Sans Pro", sans-serif;
+  font-weight: 400;
+  margin-top: 1.5em;
+  color: #111111;
 }
 
 h1.title {
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+h1 {
+  font-size: 37px;
+  margin-top: 0;
+  margin-bottom: 0.67em;
+}
+
 h2 {
-  font-size: 24px;
+  font-size: 28px;
 }
 
 h5 {
@@ -134,18 +142,18 @@ p {
 }
 
 a, a:hover {
-  color: rgb(0, 102, 152);
+  color: #1155cc;
 }
 
 pre.prettyprint {
   font-family: 'Source Code Pro', monospace;
   color: black;
-  border-radius: 4px;
-  font-size: 14px;
+  border-radius: 0;
+  font-size: 15px;
   word-wrap: normal;
   line-height: 1.4;
-  background: #f7f7f7;
-  border: 1px solid #ddd;
+  background: #eee;
+  border: 0;
   margin: 16px 0 16px 0;
   padding: 8px;
 }
@@ -225,12 +233,11 @@ header a,
 header a:hover,
 header p,
 header li {
-  color: white;
+  color: #111;
 }
 
 header h1 .kind {
-  color: #ddd;
-  text-transform: uppercase;
+  color: #555;
   font-size: 15px;
   display: block;
 }
@@ -261,10 +268,6 @@ dd p {
 }
 
 section.summary h2 {
-  color: #727272;
-  margin-bottom: 16px;
-  padding-bottom: 4px;
-  border-bottom: 1px solid #ddd;
 }
 
 /* indents wrapped lines */
@@ -326,16 +329,16 @@ p.firstline {
 }
 
 footer {
+  color: #fff;
+  line-height: 16px;
+  background-color: #111111;
   padding: 20px;
-  position: absolute;
-  bottom: 0;
   width: 100%;
-  height: 60px;
+  margin: 20px 0 0 0;
 }
 
 footer p {
   margin: 0;
-  color: #555;
 }
 
 footer .no-break {
@@ -348,8 +351,8 @@ footer .container-fluid {
   padding-right: 0;
 }
 
-.copyright a {
-  color: #555;
+footer a, footer a:hover {
+  color: #fff;
 }
 
 .markdown h1 {
@@ -443,7 +446,7 @@ footer .container-fluid {
 }
 
 .self-crumb {
-  color: #ddd;
+  color: #555;
 }
 
 nav .self-name {
@@ -510,7 +513,7 @@ ul.subnav li {
 }
 
 ul.subnav li a {
-  color: #FFFFFF;
+  color: #111;
 }
 
 ul.subnav li {
@@ -529,39 +532,49 @@ ul.subnav li:last-of-type {
 
 /* sidebar styles */
 
-.sidebar-offcanvas-left {
-  background-color: #f7f7f7;
+.sidebar-offcanvas-left,
+.sidebar-offcanvas-right {
   padding: 0;
 }
 
 .sidebar ol {
   list-style: none;
-  font-size: 14px;
-  line-height: 24px;
+  line-height: 22px;
   margin-bottom: 0;
   padding: 0;
 }
 
 .sidebar-offcanvas-left ol {
-  padding: 16px;
+}
+
+.sidebar h5 {
+  color: #727272;
+  font-size: 18px;
+  margin: 0 0 25px 0;
+  white-space: nowrap;
+}
+
+.sidebar h5 a,
+.sidebar h5 a:hover {
+  color: #727272;
 }
 
 .sidebar h5,
 .sidebar ol li {
   text-overflow: ellipsis;
   overflow: hidden;
+  padding: 3px 0;
 }
 
 .sidebar ol li.section-title a {
   color: inherit;
 }
 
 .sidebar ol li.section-title {
-  font-size: 13px;
-  color: #B6B6B6;
+  font-size: 18px;
+  font-weight: normal;
   text-transform: uppercase;
-  line-height: 20px;
-  margin-top: 24px;
+  padding-top: 25px;
 }
 
 .sidebar ol li:first-child {
@@ -605,42 +618,36 @@ button {
   }
 
   .sidebar-offcanvas-left {
-    left:-100%;
-    position:fixed;
+    left: -100%;
+    position: fixed;
     -webkit-transition:all .25s ease-out;
     -o-transition:all .25s ease-out;
     transition:all .25s ease-out;
     z-index: 2000;
-    top:0;
+    top: 0;
     width: 280px; /* works all the way down to an iphone 4 */
     height: 100%;
     background-color: white;
     overflow-y: auto; /* TODO: how to hide scroll bars? */
   }
 
   .sidebar-offcanvas-left.active {
-    left:0; /* this animates our drawer into the page */
+    left: 0; /* this animates our drawer into the page */
   }
 }
 
-.sidebar h5 {
-  color: #727272;
-  padding-bottom: 16px;
-}
-
 .sidebar-offcanvas-left h5 {
-  border-bottom: 1px solid #ddd;
-  padding: 16px;
+  margin-bottom: 10px;
 }
 
 .sidebar-offcanvas-left h5:last-of-type {
   border: 0;
-  padding: 16px 16px 0 16px;
+  margin-bottom: 25px;
 }
 
 /* the right nav disappears out of view when the window shrinks */
 @media screen and (max-width: 992px) {
-  .sidebar-offcanvas-right{
+  .sidebar-offcanvas-right {
      display: none;
    }
 }
@@ -742,6 +749,10 @@ form.search {
   color: gray;
 }
 
+#search-box {
+  background-color: #ffffff;
+}
+
 section#setter {
   border-top: 1px solid #ddd;
   padding-top: 36px;

lib/src/html/template_data.dart

@@ -32,7 +32,12 @@ abstract class TemplateData<T extends Documentable> {
   String get title;
   String get layoutTitle;
   String get metaDescription;
+  String get name => self.name;
+  String get kind => self is ModelElement ? (self as ModelElement).kind : null;
+
   List get navLinks;
+  Documentable get parent => navLinks.isNotEmpty ? navLinks.last : null;
+
   bool get includeVersion => false;
 
   bool get hasSubNav => subnavItems.isNotEmpty;
@@ -83,8 +88,7 @@ class PackageTemplateData extends TemplateData<Package> {
   @override
   Package get self => package;
   @override
-  String get layoutTitle => _layoutTitle(
-      package.name, (useCategories || package.isSdk) ? '' : 'package', false);
+  String get layoutTitle => _layoutTitle(package.name, kind, false);
   @override
   String get metaDescription =>
       '${package.name} API docs, for the Dart programming language.';
@@ -93,6 +97,9 @@ class PackageTemplateData extends TemplateData<Package> {
     return [new Subnav('Libraries', '${package.href}#libraries')];
   }
 
+  @override
+  String get kind => (useCategories || package.isSdk) ? '' : 'package';
+
   /// `null` for packages because they are at the root – not needed
   @override
   String get htmlBase => null;

lib/src/model.dart

@@ -896,6 +896,7 @@ class Constructor extends ModelElement
 /// Bridges the gap between model elements and packages,
 /// both of which have documentation.
 abstract class Documentable implements Warnable {
+  String get name;
   String get documentation;
   String get documentationAsHtml;
   bool get hasDocumentation;
@@ -2432,8 +2433,8 @@ abstract class ModelElement implements Comparable, Nameable, Documentable {
       return HTML_ESCAPE.convert(name);
     }
 
-    var classContent = isDeprecated ? 'class="deprecated" ' : '';
-    return '<a ${classContent}href="${href}">$name</a>';
+    var classContent = isDeprecated ? ' class="deprecated"' : '';
+    return '<a${classContent} href="${href}">$name</a>';
   }
 
   // TODO(keertip): consolidate all the find library methods
@@ -3240,6 +3241,9 @@ class Package implements Nameable, Documentable {
   @override
   String get name => packageMeta.name;
 
+  String get kind =>
+      (packageMeta.useCategories || package.isSdk) ? '' : 'package';
+
   @override
   String get oneLineDoc => '';
 

lib/src/package_meta.dart

@@ -11,12 +11,15 @@ import 'package:yaml/yaml.dart';
 
 abstract class PackageMeta {
   final Directory dir;
+  final bool useCategories;
 
-  PackageMeta(this.dir);
+  PackageMeta(this.dir, {this.useCategories: false});
 
   factory PackageMeta.fromDir(Directory dir) => new _FilePackageMeta(dir);
-  factory PackageMeta.fromSdk(Directory sdkDir, {String sdkReadmePath}) =>
-      new _SdkMeta(sdkDir, sdkReadmePath: sdkReadmePath);
+  factory PackageMeta.fromSdk(Directory sdkDir,
+          {String sdkReadmePath, bool useCategories}) =>
+      new _SdkMeta(sdkDir,
+          sdkReadmePath: sdkReadmePath, useCategories: useCategories);
 
   bool get isSdk;
   bool get needsPubGet => false;
@@ -180,7 +183,8 @@ File _locate(Directory dir, List<String> fileNames) {
 class _SdkMeta extends PackageMeta {
   final String sdkReadmePath;
 
-  _SdkMeta(Directory dir, {this.sdkReadmePath}) : super(dir);
+  _SdkMeta(Directory dir, {this.sdkReadmePath, bool useCategories})
+      : super(dir, useCategories: useCategories);
 
   @override
   bool get isSdk => true;

lib/templates/_footer.html

@@ -10,9 +10,7 @@
         </span>
         &bull;
         <span class="no-break">
-          <a href="https://www.dartlang.org">
-            <img src="static-assets/favicon.png" alt="Dart" title="Dart" width="16" height="16">
-          </a>
+          <a href="https://www.dartlang.org"><img src="static-assets/favicon.png" alt="Dart" title="Dart" width="16" height="16"></a>
         </span>
         &bull;
         <span class="copyright no-break">