Boostrap 2.1

app/assets/stylesheets/album-track.css.scss

@@ -1,10 +1,11 @@
 .artist-page .album .tracks {
-  margin-left: 265px;
+  margin: 0 0 10px 0;
 
   & > li {
     position: relative;
     display: block;
-    width: 100%;
+    margin: 0 0 0 -5px;
+    width: 625px;
     height: 38px;
     list-style: none;
     font-family: "Source Sans Pro", $helvetica;
@@ -15,7 +16,7 @@
     &:after {
       content: "";
       display: block;
-      width: 627px;
+      width: 578px;
       float: right;
       border-bottom: #e0e0e0 1px solid;
       margin: 0 5px 0 0;
@@ -54,12 +55,12 @@
     }
 
     .btn-round {
-      width: 10px;
+      width: 2px;
       height: 22px;
       border-radius: 50px;
 
       i {
-        margin: 6px 0 0 -2px;
+        margin: 5px 0 0 -6px;
       }
     }
 
@@ -82,11 +83,11 @@
       top: 5px;
       left: 42px;
       height: 28px;
-      max-width: 580px;
+      max-width: 530px;
       overflow: hidden;
 
       .inner {
-        width: 1000px;
+        width: 10000px;
 
         .track-link {
           color: #303030;
@@ -135,7 +136,7 @@
       display: none;
 
       i {
-        margin-left: -3px;
+        margin-left: -7px;
       }
     }
 

app/assets/stylesheets/application.css.scss

@@ -9,7 +9,7 @@
 @import "album-track";
 @import "player";
 @import "playlist";
-@import "auth";
+@import "preferences";
 @import "popup";
 @import "tour";
 
@@ -27,6 +27,7 @@ body {
 .navbar {
   background-color: #0a3a82;
   background: url($blue_noise);
+  @include box-shadow(0 0 5px rgba(0, 0, 0, .5));
 
   .navbar-inner {
     background: none;
@@ -37,10 +38,11 @@ body {
     }
   }
   a.brand {
-    margin-top: 1px;
+    margin-top: -1px;
     font-family: "Lobster Two", $helvetica;
     font-style: italic;
     font-size: 24px;
+    line-height: 24px;
     color: #fafafa;
     letter-spacing: 1px;
     text-shadow: 1px 1px 0 rgba(255, 255, 255, .2);
@@ -51,11 +53,12 @@ body {
     }
   }
   .navbar-search {
-    margin-top: 8px;
+    margin: 6px;
 
     input {
-      width: 99px;
+      width: 133px;
       line-height: 16px;
+      color: #ffffff;
 
       border-color: rgba(0, 0, 0, .4);
       background-color: rgba(0, 0, 0, .3);

app/assets/stylesheets/artist.css.scss

@@ -5,20 +5,19 @@
       weight: 700;
       size: 42px;
     }
-    line-height: 64px;
+    line-height: 48px;
     letter-spacing: 1px;
     text-shadow: 0 0 1px rgba(0, 0, 0, .3);
   }
 
   .artist-info {
-    min-height: 250px;
+    min-height: 300px;
     margin-bottom: 20px;
 
     .pic {
-      float: left;
 
       img {
-        width: 250px;
+        width: 100%;
         margin-top: 5px;
         border: {
           size: 1px;
@@ -30,7 +29,6 @@
       }
     }
     .bio {
-      margin-left: 270px;
       font-family: "Source Sans Pro", $helvetica;
       font-size: 22px;
       line-height: 26px;
@@ -46,19 +44,17 @@
       font: {
         family: "Lobster Two", $helvetica;
         weight: 700;
-        size: 26px;
+        size: 28px;
       }
+      margin: 5px 0;
       text-shadow: 0 0 1px rgba(0, 0, 0, .3);
     }
     .pic {
-      float: left;
-      height: 300px;
       text-align: center;
 
       img {
         background-color: #a0a0a0;
-        width: 250px;
-        height: 250px;
+        width: 100%;
         margin-top: 5px;
         border: {
           size: 1px;

app/assets/stylesheets/autocomplete.css.scss

@@ -1,25 +1,24 @@
 .autocomplete-w1 {
-  margin: 10px 0 0 0;
-  width: 268px;
+  margin: 8px 0 0 0;
+  width: 274px;
   background: {
-    color: #f0f0f0;
-    color: rgba(240, 243, 246, .95);
+    color: #124ba8;
+    color: rgba(18, 75, 158, .95);
   }
   @include box-shadow(5px 14px 5px rgba(0, 0, 0, .15));
 
   .autocomplete {
+    max-height: 330px !important;
+
     div {
-      width: 258px;
+      width: 264px;
       padding: 5px 5px;
       border: {
         color: transparent;
         style: solid;
         width: 1px;
       }
-      background: {
-        color: #f0f0f0;
-        color: rgba(240, 243, 246, .95);
-      }
+      color: #f0f0f0;
 
       &:last-child {
         border-bottom: {
@@ -30,8 +29,7 @@
 
       &.selected {
         color: #ffffff;
-        background-color: #49AFCD;
-        background-color: rgba(73, 175, 205, .95);
+        background-color: rgba(255, 255, 255, .3);
         border-radius: 5px;
       }
     }

app/assets/stylesheets/player.css.scss

@@ -1,13 +1,13 @@
 .player {
-  width: 518px;
+  width: 467px;
 
   .controls {
     float: left;
-    margin: 3px 0 0 -96px;
+    margin: 1px 0 0 -109px;
 
     a {
       @include inline-block;
-      margin: 11px 2px 0 0;
+      margin: 11px 6px 0 0;
       font-size: 22px;
       color: #e0e0e0;
       text-shadow: 0 0 2px rgba(255, 255, 255, .6);
@@ -26,8 +26,8 @@
   .progress-bar {
     position: relative;
     width: 100%;
-    height: 26px;
-    margin: 8px 0 0;
+    height: 28px;
+    margin: 6px 0 0;
     background-color: rgba(0, 0, 0, .3);
     border: {
       style: solid;
@@ -40,7 +40,7 @@
     .bar {
       position: absolute;
       width: 0%;
-      height: 26px;
+      height: 28px;
       background-color: rgba(255, 255, 255, .1);
       @include box-shadow(inset 0 0 2px rgba(255, 255, 255, .2));
       @include border-radius(4px 0px 0px 4px);
@@ -52,7 +52,7 @@
         family: "Source Sans Pro", $helvetica;
         size: 14px;
       }
-      line-height: 24px;
+      line-height: 26px;
       color: #ffffff;
       text-shadow: 1px 1px 0 rgba(80, 80, 80, .4);
     }

app/assets/stylesheets/playlist.css.scss

@@ -1,9 +1,9 @@
 .playlist {
   display: none;
-  position: absolute;
+  position: fixed;
   top: 41px;
   right: 50%;
-  width: 618px;
+  width: 578px;
   margin-right: -430px;
   padding: 7px 0 3px 0;
   background-color: #124ba8;
@@ -45,7 +45,7 @@
       }
       .length {
         position: absolute;
-        right: 9391px;
+        right: 9431px;
       }
     }
   }

app/assets/stylesheets/preferences.css.scss

@@ -1,6 +1,6 @@
 .navbar {
   .preferences {
-    margin: 14px 10px 0 15px;
+    margin: 12px 10px 0 15px;
 
     .toggle-button {
       @include inline-block;