fix things as described in teal#148

app/styles/app/_mixins/mixins.sass

@@ -8,6 +8,22 @@
   background-clip: padding-box
   border-radius 4px
 
+@mixin fadeOut($position, $angle, $color)
+  content: ""
+  display: block
+  position: absolute
+
+  @if $position == bottom
+    bottom: 0
+    width: 100%
+    height: 2em
+  @else if $position == right
+    top: 0
+    right: 0
+    width: 2em
+    height: 100%
+
+  background: linear-gradient($angle, rgba($color, 1) 0%, rgba($color, 0) 100%)
 
 @mixin clearfix
   &:before,

app/styles/app/_mixins/vars.sass

@@ -1,4 +1,7 @@
 
+$font-size-m: 16px
+$line-height-m: 1.3
+
 // colors
 $teal1: #5FA5A4
 $teal2: #63A4A3

app/styles/app/layouts/buildheader.sass

@@ -5,9 +5,8 @@
   .repo-build-status a
     color: $color
 
-
 .repo
-  font-size: $font-size-normal
+  font-size: $font-size-m
   color: $grey
 
 .repo-header
@@ -58,12 +57,12 @@
   @media #{$medium-up}
     .dropdown
       position: absolute
-      top: -1.1em
+      top: -0.8em
       right: 0
       z-index: 50
     .tabnav
       position: absolute
-      top: -0.6em
+      top: -0.4em
     .repo-menu-header
       position: relative
       height: 1.6em
@@ -75,7 +74,7 @@
   small
     margin: 0
     font-weight: 400
-    font-size: $font-size-big
+    font-size: $font-size-m
     color: $grey3
     line-height: 1
   small
@@ -83,6 +82,14 @@
     font-weight: 600
 
 .repo-main-description
+
+  @media #{$medium-up}
+    position: relative
+    max-height: 4.9em
+    overflow: hidden
+    &:after
+      @include fadeOut(bottom, 0deg, $cream-light)
+
   .body
     display: block
     font-size: 13px
@@ -95,10 +102,13 @@
 
 .repo-main-info
   @include resetul
+  position: relative
   padding-right: 2em
   margin-right: 1.4em
   border-right: $cream-dark 1px solid
-  line-height: 1.8
+  line-height: $line-height-m
+  &:after
+    @include fadeOut(right, -90deg, $cream-light)
   a
     color: $grey
     white-space: nowrap
@@ -118,10 +128,11 @@
     &:hover
       background-color: darken($grey, 10)
   .icon
-    width: 1em
+    width: .9em
-    height: 1.4em
-    vertical-align: middle
-  .icon--cancel
     height: 1.1em
+    vertical-align: bottom
+  .icon--cancel
+    width: 1em
+    height: 1.05em
   .icon--codeclimate
     width: 1.2em

app/styles/app/main/log.sass

@@ -75,7 +75,7 @@
 .log-header
   height: 44px
   margin: 0
-  padding: .9em .8em .6em
+  padding: .7em .8em .6em
   text-align: right
   background-color: $log-header-bg
   @extend %border-top-4px

app/styles/app/modules/tabs.sass

@@ -42,7 +42,7 @@
   .tabnav-sub
     @include resetul
     @extend %inline-block
-    overflow: auto
+    overflow: visible
     a
       color: $grey2
       padding: .5em 0

app/styles/app/modules/tiles.sass

@@ -68,7 +68,7 @@
     display: block
     width: 1.1em
     height: 1.2em
-    margin: .8em auto 1.1em
+    margin: .7em auto 1em
   .request-kind
     display: block
     width: 1.4em

app/templates/build.hbs

@@ -41,7 +41,7 @@
         </li>
         <li>
           {{#if build.pullRequest}}
-            <a class="compare" {{bind-attr href="build.commit.compareUrl"}}>#{{build.pullRequestNumber}}: {{build.pullRequestTitle}}</a>
+            <a class="compare" {{bind-attr href="build.commit.compareUrl"}}><span class="icon icon--github"></span> #{{build.pullRequestNumber}}: {{build.pullRequestTitle}}</a>
           {{else}}
             {{#if build.commit.compareUrl}}
               <a class="compare" {{bind-attr href="build.commit.compareUrl"}}>