Begin the redesign process, starting with the navbar.

stylesheets/style.scss

Index: stylesheets/style.scss
diff --git a/css/sass/style.scss b/stylesheets/style.scss
old mode 100644
new mode 100755
similarity index 50%
rename from css/sass/style.scss
rename to stylesheets/style.scss
index 66a54f760867c1033b6b6683af138df3798e601e..a741e2860008508571137ee0885ea735f0abc81c
--- a/css/sass/style.scss
+++ b/stylesheets/style.scss
@@ -1,30 +1,60 @@
-@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;
+@import "bootstrap/theme";
+@import "bootstrap";
 
-$sansFontFamily: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+//// Don't require nasty <table class="table"> that bootstrap expects.

[Bob Nystrom, 2013/11/26 19:00:11]

Why ////?

[Andrei Mouravski, 2013/11/29 21:21:21]

:g/^/norm i//

+table {
+  @extend .table;
+}
 
-$iconSpritePath: 'img/glyphicons-halflings.png';
-$iconWhiteSpritePath: 'img/glyphicons-halflings-white.png';
 
-@import "compass_twitter_bootstrap";
+// 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';

[Bob Nystrom, 2013/11/26 19:00:11]

If they're commented out, can you chuck them now?

[Andrei Mouravski, 2013/11/29 21:21:21]

Not yet, since I want to make sure the new stuff works first.

[Bob Nystrom, 2013/12/02 22:46:55]

If the new stuff doesn't work, then you shouldn't land this patch yet, right?

 
-// Don't require nasty <table class="table"> that bootstrap expects.
-table {
-  @extend .table;
+// 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;
 }
 
+// TODO(amouravski): Fix up brand to match dartlang.org.
+// TODO(amouravski): Upload bigger image and retina-ize it.
+// TODO(amouravski): Spruce up search box.

[Bob Nystrom, 2013/11/26 19:00:11]

These are distinct enough that it probably makes more sense just to file bugs
for them.

[Andrei Mouravski, 2013/11/29 21:21:21]

Done.

+
+// 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;
@@ -44,7 +74,7 @@ a.permalink {
 }
 
 article {
-  @extend .span8;
+  @extend .col-md-8;
 
   position: relative;
 
@@ -60,44 +90,39 @@ article {
   }
 }
 
-.navbar-search {
-  margin-top: 4px;
-
-  .search-query {
-    border-radius: 4px;
-    -moz-border-radius: 4px;
-    -webkit-border-radius: 4px;
-    height: 20px;
-    line-height: inherit;
-  }
-}
+//.navbar-form {
+//  .search-query {
+//    @include border-radius(4px, 4px);
+//  }
+//}

[Bob Nystrom, 2013/11/26 19:00:11]

Delete all this commented out stuff.

[Andrei Mouravski, 2013/11/29 21:21:21]

Done.

 
 .has-permalink:hover > a.permalink {
   display:inline;
 }
 
-// Don't make tab bars so huge.
-.nav-tabs > li > a {
-  padding-top: 4px;
-  padding-bottom: 4px;
-}
+//// Don't make tab bars so huge.
+//.nav-tabs > li > a {
+//  padding-top: 4px;
+//  padding-bottom: 4px;
+//}
 
-.nav {
-  margin-bottom: 8px;
-}
+//.nav {
+//  margin-bottom: 8px;
+//}
 
 .package-sidebar {
   padding-top: 50px;
 }
 
-tt {
-  font-family: $monoFontFamily;
-  padding: 0 3px;
-}
+// TODO(amouravski): add this back in?
+//tt {
+//  font-family: $monoFontFamily;
+//  padding: 0 3px;
+//}
 
 footer {
   @extend .well;
-  @extend .well-small;
+  @extend .well-sm;
   font-size: 13px;
   text-align: center;
 
@@ -110,27 +135,15 @@ footer {
   }
 }
 
-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 {
@@ -173,9 +186,9 @@ td.archive, th.archive {
 .learn-more {
   a {
     @extend .btn;
-    @extend .btn-small;
+    @extend .btn-sm;
 
-    color: $linkColor;
+    color: $link-color;
 
     float: right;
     position: absolute;
@@ -209,10 +222,6 @@ ol.toc {
   content: "Contents";
 }
 
-.pagination {
-  @extend .pagination-centered;
-}
-
 .progress {
   @extend .progress-striped;
 }
@@ -224,23 +233,23 @@ ol.toc {
 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;
+//  }
+//}

[Bob Nystrom, 2013/11/26 19:00:11]

You should fix this before the patch goes in. I know the admin page matters
less, but there's no rush so we may as well not regress functionality.

[Andrei Mouravski, 2013/11/29 21:21:21]

Well, this is on the dev branch. I just want to make my changes more atomic.

[Bob Nystrom, 2013/12/02 22:46:55]

Ah, OK. Are you planning to work in a branch for a while before merging into
master then? If so, that's great.

What I want to ensure is that we can deploy from master at any point in time.