Style project home page

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

app/assets/stylesheets/generic/avatar.scss

@@ -27,6 +27,7 @@
   &.s48 { width: 48px; height: 48px; margin-right: 10px; }
   &.s60 { width: 60px; height: 60px; margin-right: 12px; }
   &.s90 { width: 90px; height: 90px; margin-right: 15px; }
+  &.s140 { width: 140px; height: 140px; margin-right: 20px; }
   &.s160 { width: 160px; height: 160px; margin-right: 20px; }
 }
 
@@ -40,5 +41,6 @@
   &.s32 { font-size: 22px; line-height: 32px; }
   &.s60 { font-size: 32px; line-height: 60px; }
   &.s90 { font-size: 36px; line-height: 90px; }
-  &.s160 { font-size: 96px; line-height: 1.33; }
+  &.s140 { font-size: 72px; line-height: 140px; }
+  &.s160 { font-size: 96px; line-height: 160px; }
 }

app/assets/stylesheets/generic/blocks.scss

@@ -27,6 +27,11 @@
   border-bottom: 1px solid #e7e9ed;
   color: $gl-gray;
 
+  &.footer-block {
+    margin-top: 0;
+    margin-bottom: -$gl-padding;
+  }
+
   .title {
     color: $gl-text-color;
   }

app/assets/stylesheets/pages/projects.scss

@@ -16,6 +16,10 @@
 
 .project-home-panel {
   text-align: center;
+  background: #f7f8fa;
+  margin: -$gl-padding;
+  padding: $gl-padding;
+  padding-top: 40px;
 
   .project-identicon-holder {
     margin-bottom: 15px;
@@ -37,14 +41,13 @@
   .project-home-desc {
     h1 {
       margin: 0;
-      margin-bottom: 10px;
-      font-size: 26px;
-      font-weight: bold;
+      margin-bottom: 5px;
+      font-size: 23px;
+      font-weight: normal;
     }
 
     p {
-      font-size: 18px;
-      color: #666;
+      color: #7f8fa4;
       display: inline;
     }
   }
@@ -68,11 +71,12 @@
     .btn {
       @extend .btn-info;
 
+      text-transform: uppercase;
+      font-size: 15px;
+      line-height: 20px;
+      padding: 10px 16px;
+      border-radius: 3px;
       margin-left: 10px;
-      font-weight: bold;
-      font-size: 14px;
-      line-height: 16px;
-      padding: 8px 12px;
 
       .count {
         padding-left: 7px;
@@ -232,10 +236,23 @@ table.table.protected-branches-list tr.no-border {
 
 .project-stats {
   text-align: center;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 5px;
+  padding-bottom: 0;
 
-  ul.nav-pills { display:inline-block; }
-  li { display:inline; }
-  a { float:left; }
+  ul.nav-pills {
+    display:inline-block;
+  }
+
+  li {
+    display:inline;
+  }
+
+  a {
+    float:left;
+    font-size: 17px;
+  }
 
   li.missing a {
     color: #bbb;

app/views/projects/_home_panel.html.haml

 - empty_repo = @project.empty_repo?
 .project-home-panel.clearfix{:class => ("empty-project" if empty_repo)}
   .project-identicon-holder
-    = project_icon(@project, alt: '', class: 'project-avatar avatar s90')
+    = project_icon(@project, alt: '', class: 'project-avatar avatar s140')
   .project-home-desc
     %h1= @project.name
     - if @project.description.present?

app/views/projects/show.html.haml

@@ -11,7 +11,7 @@
 
 = render "home_panel"
 
-.project-stats
+.project-stats.gray-content-block
   %ul.nav.nav-pills
     %li
       = link_to namespace_project_commits_path(@project.namespace, @project, @ref || @repository.root_ref) do
@@ -63,7 +63,6 @@
       = icon("exclamation-triangle fw")
       Archived project! Repository is read-only
 
-%hr
 %section
   - if prefer_readme?
     = render 'projects/readme'
@@ -74,8 +73,8 @@
 - if current_user
   - access = user_max_access_in_project(current_user, @project)
   - if access
-    %hr
-    %p.light
+    .prepend-top-20
+      .gray-content-block.footer-block.center
         You have #{access} access to this project.
         - if @project.project_member_by_id(current_user)
           = link_to leave_namespace_project_project_members_path(@project.namespace, @project),