Begin the redesign process, starting with the navbar.

stylesheets/style.scss

-@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700|Montserrat:400,700);
+@import url(https://fonts.googleapis.com/css?family=Roboto:300,400|Montserrat:400,700);
 
 @import "compass/reset";
 @import "compass/typography/text/replacement";
 
-@import "syntax";
+@import "partials/variables";
+@import "partials/syntax";
 
-$baseFontSize: 14px;
-$baseLineHeight: 24px;
-
-$sansFontFamily: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-
-$iconSpritePath: 'img/glyphicons-halflings.png';
-$iconWhiteSpritePath: 'img/glyphicons-halflings-white.png';
-
-@import "compass_twitter_bootstrap";
+@import "bootstrap/theme";
+@import "bootstrap";
 
 // Don't require nasty <table class="table"> that bootstrap expects.
 table {
   @extend .table;
 }
 
+// TODO(amouravski): chuck these when everything else has been updated.
+//$sansFontFamily: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+//
+//$iconWhiteSpritePath: 'img/glyphicons-halflings-white.png';
+
+// Navbar
+// -------------------------
+
+$navbar-font-family: "Montserrat", sans-serif;
+
+.navbar {
+  border: none;
+  $shadow: 0 2px 2px rgba(50, 50, 50, 0.15);
+  @include box-shadow($shadow);
+}
+
+.navbar-brand {
+  font-family: $navbar-font-family;
+}
+
+.navbar-nav > li > a {
+  padding-top: 25px;
+  font-family: $navbar-font-family;
+  font-size: $font-size-small;
+  text-transform: uppercase;
+}
+
+// Body
+// -------------------------
+
 body {
   // Account for the fixed navbar height.
-  padding-top: 60px;
+  padding-top: 65px;
+
+  -webkit-font-smoothing: antialiased;
 }
-
 // Don't word wrap inline code.
 code {
   white-space: nowrap;
 }
 
 pre code {
   white-space: inherit;
 }
 
 pre b {
   font-weight: bold;
 }
 
 a.permalink {
   margin-left: 0.5em;
   display: none;
 }
 
 article {
-  @extend .span8;
+  @extend .col-md-8;
 
   position: relative;
 
   h2, h3, h4 {
     // Ensure that the headers don't get covered up by the navbar when the user
     // clicks on the permalink.
     padding-top: 40px;
     margin-top: -40px;
 
     &:hover a.permalink {
       display: inline;
     }
   }
 }
 
-.navbar-search {
-  margin-top: 4px;
-
-  .search-query {
-    border-radius: 4px;
-    -moz-border-radius: 4px;
-    -webkit-border-radius: 4px;
-    height: 20px;
-    line-height: inherit;
-  }
-}
-
 .has-permalink:hover > a.permalink {
   display:inline;
 }
 
-// Don't make tab bars so huge.
-.nav-tabs > li > a {
-  padding-top: 4px;
-  padding-bottom: 4px;
-}
-
-.nav {
-  margin-bottom: 8px;
-}
-
 .package-sidebar {
   padding-top: 50px;
 }
 
-tt {
-  font-family: $monoFontFamily;
-  padding: 0 3px;
-}
-
 footer {
   @extend .well;
-  @extend .well-small;
+  @extend .well-sm;
   font-size: 13px;
   text-align: center;
 
   .login, .logout {
     display: inline-block;
     float: right;
     // #f5f5f5 is the background-color of the footer, which isn't a variable
     // for some reason.
     color: scale-color(#f5f5f5, $lightness: -15%);
   }
 }
 
-form#private-key textarea {
-  width: 550px;
-  height: 420px;
-  font-family: $monoFontFamily;
-}
-
-// We have two brands: the dart logo and "pub.dartlang.org". This keeps them
-// from being too spread out.
-.brand + .brand {
-  padding-left: 10px;
-}
-
-// Highlight the brand text on hover. This matches other navbar buttons and
-// makes it clearer that the logo links to something different.
-a.brand:hover {
-  color: white;
-}
+// TODO(amouravski): add this back in?
+//form#private-key textarea {
+//  width: 550px;
+//  height: 420px;
+//  font-family: $monoFontFamily;
+//}
 
 .dart-logo {
-  @include replace-text("/static/img/dart.png", 0, 0);
-  width: 21px;
+  @include replace-text-with-dimensions("dart.png", 0, 0);
 }
 
 .intro {
   @extend .well;
 }
 
 .get-started {
   @extend .btn;
   @extend .btn-primary;
 }
@@ skipping 22 matching lines @@
   margin: 3px 0 0 2px;
 }
 
 .author {
   white-space: nowrap;
 }
 
 .learn-more {
   a {
     @extend .btn;
-    @extend .btn-small;
+    @extend .btn-sm;
 
-    color: $linkColor;
+    color: $link-color;
 
     float: right;
     position: absolute;
     width: 270px;
     right: -320px;
 
     display: inline-block;
   }
 }
 
@@ skipping 13 matching lines @@
     font-size: 13px;
     line-height: 21px;
   }
 }
 
 .toc:before {
   @extend h3;
   content: "Contents";
 }
 
-.pagination {
-  @extend .pagination-centered;
-}
-
 .progress {
   @extend .progress-striped;
 }
 
 [class^="icon-"], [class*=" icon-"] {
   @include hide-text;
 }
 
 ul ul {
   list-style-type: circle;
 }
 
-.admin {
-  @extend .tabbable, .tabs-left;
-
-  > ul {
-    @extend .nav, .nav-tabs;
-  }
-
-  > div {
-    @extend .tab-content;
-
-    > div {
-      @extend .tab-pane, .container-fluid;
-    }
-  }
-
-  form button {
-    @extend .btn;
-  }
-}
+// TODO(amouravski): Fix admin page.
+//.admin {
+//  @extend .tabbable, .tabs-left;
+//
+//  > ul {
+//    @extend .nav, .nav-tabs;
+//  }
+//
+//  > div {
+//    @extend .tab-content;
+//
+//    > div {
+//      @extend .tab-pane, .container;
+//    }
+//  }
+//
+//  form button {
+//    @extend .btn;
+//  }
+//}