1 files changed, 130 insertions, 38 deletions

diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index a3690e40e28..edef336481d 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -10,7 +10,7 @@
   margin-bottom: 0;
 }
 .new_project,
-.edit_project {
+.edit-project {
   fieldset.features {
     .control-label {
       font-weight: normal;
@@ -26,8 +26,13 @@
 }
 
 .project-home-panel {
-  padding-bottom: 40px;
-  border-bottom: 1px solid $border-color;
+  background: $white-light;
+  text-align: left;
+  padding: 24px 0;
+
+  .container-fluid {
+    position: relative;
+  }
 
   .cover-controls {
     .project-settings-dropdown {
@@ -43,21 +48,55 @@
     }
   }
 
-  .project-identicon-holder {
-    margin-bottom: 16px;
+  .cover-title {
+    margin-bottom: 0;
+  }
+
+  .project-image-container {
+    @include make-sm-column(1);
+    max-width: 86px;
+    min-width: 86px;
+    padding-right: 0;
+    margin: 11px 0;
 
-    .avatar, .identicon {
-      margin: 0 auto;
-      float: none;
+    @media (max-width: $screen-md-max) {
+      padding-left: 0;
+      margin: 0 0 10px;
+      max-width: none;
+      min-width: none;
+
+      .avatar.s70 {
+        margin: auto;
+      }
     }
+  }
 
-    .identicon {
-      @include border-radius(50%);
+  .project-info {
+    @include make-sm-column(10);
+
+    h1 {
+      font-size: 24px;
+      font-weight: normal;
+      margin: 0;
+    }
+
+    .project-home-desc {
+      p {
+        margin: 0;
+      }
     }
   }
 
+  .identicon {
+    float: left;
+    @include border-radius(50%);
+  }
+
+  .avatar {
+    float: none;
+  }
+
   .notifications-btn {
-    margin-top: -28px;
 
     .fa-bell {
       margin-right: 6px;
@@ -69,28 +108,45 @@
   }
 
   .project-repo-buttons {
-    margin-top: 20px;
-    margin-bottom: 0;
+    font-size: 0;
 
-    .count-buttons {
-      display: block;
-      margin-bottom: 20px;
-    }
+    .btn {
+      @include btn-gray;
+      padding: 3px 10px;
+      text-transform: none;
+      background-color: $background-color;
 
-    .clone-row {
-      .split-repo-buttons,
-      .project-clone-holder {
-        display: inline-block;
+      .fa {
+        color: $layout-link-gray;
       }
 
-      .split-repo-buttons {
-        margin: 0 12px;
+      .fa-caret-down {
+        margin-left: 3px;
       }
     }
 
-    .btn {
-      @include btn-gray;
-      text-transform: none;
+    .btn-group:not(:first-child):not(:last-child) > .btn {
+      border-top-right-radius: 3px;
+      border-bottom-right-radius: 3px;
+    }
+
+    form {
+      margin-left: 10px;
+    }
+
+    .count-buttons {
+      display: inline-block;
+      vertical-align: top;
+      margin-top: 16px;
+    }
+
+    .project-clone-holder {
+      display: inline-block;
+      margin-top: 16px;
+
+      input {
+        height: 29px;
+      }
     }
 
     .count-with-arrow {
@@ -140,14 +196,18 @@
         line-height: 13px;
         padding: $gl-vert-padding $gl-padding;
         letter-spacing: .4px;
-        padding: 10px 14px;
+        padding: 7px 14px;
         text-align: center;
         vertical-align: middle;
         touch-action: manipulation;
         cursor: pointer;
         background-image: none;
         white-space: nowrap;
-        margin: 0 11px 0 4px;
+        margin: 0 10px 0 4px;
+
+        a {
+          color: inherit;
+        }
 
         &:hover {
           background: #fff;
@@ -155,13 +215,37 @@
       }
     }
   }
+
+  .project-right-buttons {
+    position: absolute;
+    right: 16px;
+    bottom: 0;
+
+    .btn {
+      padding: 3px 10px;
+      background-color: $background-color;
+    }
+
+    @media (max-width: 1304px) {
+      top: 0;
+    }
+  }
+
+  @media (max-width: $screen-md-max) {
+    text-align: center;
+
+    .project-info,
+    .project-image-container {
+      width: 100%;
+    }
+  }
 }
 
 .split-one {
   display: inline-table;
   margin-right: 12px;
 
-  a {
+  > a {
     margin: -1px;
   }
 }
@@ -285,11 +369,11 @@ a.deploy-project-label {
 }
 
 .project-stats {
-  text-align: center;
   margin-top: $gl-padding;
   margin-bottom: 0;
-  padding-top: 10px;
-  padding-bottom: 4px;
+  padding: 16px 0;
+  background-color: $white-light;
+  font-size: 0;
 
   ul.nav {
     display: inline-block;
@@ -300,12 +384,11 @@ a.deploy-project-label {
   }
 
   .nav > li > a {
-    @include btn-default;
-    @include btn-gray;
-
     background-color: transparent;
-    border: 1px solid #f7f8fa;
-    margin-left: 12px;
+    margin-right: 12px;
+    padding: 0 10px;
+    font-size: 15px;
+    color: $notes-light-color;
   }
 
   li {
@@ -325,6 +408,10 @@ a.deploy-project-label {
       background-color: #f0f2f5;
     }
   }
+
+  &.row-content-block.second-block {
+    margin-top: 0;
+  }
 }
 
 pre.light-well {
@@ -442,9 +529,14 @@ pre.light-well {
   border-top: 0;
 
   .edit-project-readme {
-    z-index: 100;
+    z-index: 2;
     position: relative;
   }
+
+  .wiki h1 {
+    border-bottom: none;
+    padding: 0;
+  }
 }
 
 .git-clone-holder {