Use the new home page from docs.gitlab.com, but with responsive design.

7 files changed, 205 insertions, 27 deletions

diff --git a/README.md b/README.md
index b2a4baef2..c819be073 100644
--- a/README.md
+++ b/README.md
@@ -11,6 +11,8 @@ To set up the site locally:
 
 This will host the site at `localhost:3000`. Changes will be reloaded automatically using [Guard Nanoc](https://github.com/guard/guard-nanoc).
 
+To pull down the documentation content, run `rake pull_repos`. If you want to force-delete the `tmp/` and `content/` folders so the task will run without manual intervention, run `RAKE_FORCE_DELETE=true rake pull_repos`.
+
 ## Examples and Resources
 
 ### Open Source Nanoc Sites
@@ -32,6 +34,7 @@ This will host the site at `localhost:3000`. Changes will be reloaded automatica
 - [Heroku](https://devcenter.heroku.com/)
 - [Slack](https://get.slack.help/hc/en-us)
 - [Slack API](https://api.slack.com/)
+- [Kong](https://getkong.org/docs/)
 
 ## Requirements/Goals
 
diff --git a/Rakefile b/Rakefile
index 2891b071b..d42852d17 100644
--- a/Rakefile
+++ b/Rakefile
@@ -1,6 +1,6 @@
 # By default won't delete any directories, requires all relevant directories
-# be empty. Run `RAKE_FORCE_DELETE=true rake pull_repos` to force directory
-# deletion without any confirmation.
+# be empty. Run `RAKE_FORCE_DELETE=true rake pull_repos` to have directories
+# deleted.
 desc 'Pulls down the CE, EE, and Omnibus git repos and merges the content of their doc directories into the nanoc site'
 task :pull_repos do
   force_delete = ENV['RAKE_FORCE_DELETE']
@@ -39,7 +39,11 @@ task :pull_repos do
       `rm -rf #{dir}`
     end
   else
-    puts "NOTE: The following directories must be empty otherwise this task will fail: #{dirs.join(', ')}"
+    puts "NOTE: The following directories must be empty otherwise this task" +
+      "will fail:\n#{dirs.join(', ')}"
+    puts "If you want to force-delete the `tmp/` and `content/` folders so \n" +
+      "the task will run without manual intervention, run \n" +
+      "`RAKE_FORCE_DELETE=true rake pull_repos`."
   end
   
   products.each do |product|
diff --git a/Rules b/Rules
index a26937855..103c1db25 100644
--- a/Rules
+++ b/Rules
@@ -22,7 +22,7 @@ end
 
 compile '/index.*' do
   filter :erb
-  layout '/default.*'
+  layout '/home.*'
   write '/index.html'
 end
 
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index 8ce748083..ba96d356b 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -14,6 +14,7 @@ body {
   background: #fff;
   margin: 0;
   padding: 0;
+  line-height: 1.6;
 }
 
 a {
@@ -129,3 +130,145 @@ hr {
     margin: 0 10px;
   }
 }
+
+body.landing {
+  background-color: #f9f9f9;
+
+  .landing-header {
+    padding: 75px 35px 200px 35px;
+    background-color: #34373c;
+    text-align: center;
+    color: #fff;
+
+    input {
+      margin-top: 50px;
+      border-radius: 0;
+      font-size: 20px;
+    }
+  }
+
+  h1 {
+    font-size: 36px;
+    font-weight: 300;
+    margin-top: 20px;
+   
+    a {
+      color: #fff;
+      text-decoration: none;
+    }
+  }
+
+  .st-ui-search-input, .st-default-search-input {
+    width: 300px !important;
+    height: 35px !important;
+    padding: 15px 15px 15px 40px !important;
+  }
+
+  .st-ui-search-input, .st-default-search-input, span.st-ui-search-icon {
+    background-size: 16px 16px !important;
+    background-position: 15px 25px !important;
+  }
+}
+
+.topics {
+  text-align: center;
+  position: relative;
+  display: flex;
+  flex-flow: row wrap;
+  top: -100px;
+  max-width: 1100px;
+  margin: auto;
+  -webkit-padding-start: 0;
+
+  li {
+    display: inline-block;
+    background-color: #fff;
+    border: 1px solid rgb(215, 215, 215);
+    border-radius: 2px;
+    margin: 15px;
+    flex: 1;
+    min-width: 300px;
+
+    @media all and (max-width: $mobile-width) {
+      width: 100%;
+      min-width: auto;
+      flex: initial;
+      margin: 20px;
+    }
+
+    a p, a:visited p {
+      color: #553a3a;
+      vertical-align: bottom;
+    }
+
+    .wrapper {
+      padding: 0 35px 40px;
+
+      @media all and (max-width: $mobile-width) {
+        padding: 0 15px 15px;
+      }
+    }
+
+    h2 {
+      text-align: center;
+      font-size: 21px;
+    }
+
+    a, a:visited {
+      text-decoration: none;
+
+      h2 {
+        height: 70px;
+        margin-bottom: 25px;
+        
+        @media all and (max-width: $mobile-width) {
+          height: auto;
+        }
+      }
+    }
+  }
+}
+
+.circle {
+  border-radius: 50%;
+  width: 56px;
+  height: 56px;
+  text-align: center;
+  font-size: 24px;
+  font-weight: 900;
+  line-height: 2.35;
+  color: #fff;
+  position: relative;
+  margin: auto;
+  top: -28px;
+}
+
+.topic-ce {
+  .circle {
+    background-color: rgb(1, 136, 101);
+  }
+
+  h2 {
+    color: rgb(1, 120, 85);
+  }
+}
+
+.topic-ee {
+  .circle {
+    background-color: rgb(25, 112, 169);
+  }
+
+  h2 {
+    color: rgb(9, 96, 153);
+  }
+}
+
+.topic-omnibus {
+  .circle {
+    background-color: rgb(107, 79, 187);
+  }
+
+  h2 {
+    color: rgb(107, 79, 187);
+  }
+}
diff --git a/content/index.erb b/content/index.erb
index eae323858..13702ac9c 100644
--- a/content/index.erb
+++ b/content/index.erb
@@ -2,26 +2,32 @@
 title: GitLab Documentation
 ---
 
-<h2>Community Edition</h2>
-
-<ul>
-  <% @items.find_all("/ce/*/README.md").each do |item| %>
-    <li><%= link_to item.attributes.include?(:title) ? item[:title] : item.identifier.without_ext, item %></li>
-  <% end %>
-</ul>
-
-<h2>Enterprise Edition</h2>
-
-<ul>
-  <% @items.find_all("/ee/**/*.md").each do |item| %>
-    <li><%= link_to item.attributes.include?(:title) ? item[:title] : item.identifier.without_ext, item %></li>
-  <% end %>
-</ul>
-
-<h2>Omnibus</h2>
-
-<ul>
-  <% @items.find_all("/omnibus/**/*.md").each do |item| %>
-    <li><%= link_to item.attributes.include?(:title) ? item[:title] : item.identifier.without_ext, item %></li>
-  <% end %>
+<ul class="topics">
+  <li class="topic-ce">
+    <a href="<%= @items['/ce/README.*'].path %>">
+      <div class="wrapper">
+        <div class="circle">CE</div>
+        <h2>GitLab Community Edition</h2>
+        <p>Browse user and administraction documentation and guides for GitLab Community Edition.</p>
+      </div>
+    </a>
+  </li>
+  <li class="topic-ee">
+    <a href="<%= @items['/ee/README.*'].path %>">
+      <div class="wrapper">
+        <div class="circle">EE</div>
+        <h2>GitLab Enterprise Edition<br>and GitLab.com</h2>
+        <p>Browse user and administraction documentation and guides for GitLab Enterprise Edition and GitLab.com.</p>
+      </div>
+    </a>
+  </li>
+  <li class="topic-omnibus">
+    <a href="<%= @items['/omnibus/README.*'].path %>">
+      <div class="wrapper">
+        <div class="circle">OM</div>
+        <h2>Omnibus GitLab</h2>
+        <p>Browse installation, configuration, maintenance and troubleshooting documentation for Omnibus GitLab.</p>
+      </div>
+    </a>
+  </li>
 </ul>
diff --git a/layouts/default.html b/layouts/default.html
index 9fabd61ef..ba830c73c 100644
--- a/layouts/default.html
+++ b/layouts/default.html
@@ -5,7 +5,7 @@
     <title><%= @item.attributes.include?(:title) ? "#{item[:title]} - GitLab Documentation" : "GitLab Documentation" %></title>
     <link rel="stylesheet" href="<%= @items['/assets/stylesheets/stylesheet.*'].path %>">
     <link rel="stylesheet" href="<%= @items['/assets/stylesheets/highlight.*'].path %>">
-    <link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic' rel='stylesheet' type='text/css'>
+    <link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,400italic' rel='stylesheet' type='text/css'>
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 
     <!-- you don't need to keep this, but it's cool for stats! -->
diff --git a/layouts/home.html b/layouts/home.html
new file mode 100644
index 000000000..b690a1ec5
--- /dev/null
+++ b/layouts/home.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>GitLab Documentation</title>
+    <link rel="stylesheet" href="<%= @items['/assets/stylesheets/stylesheet.*'].path %>">
+    <link rel="stylesheet" href="<%= @items['/assets/stylesheets/highlight.*'].path %>">
+    <link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,400italic' rel='stylesheet' type='text/css'>
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+
+    <!-- you don't need to keep this, but it's cool for stats! -->
+    <meta name="generator" content="Nanoc <%= Nanoc::VERSION %>">
+  </head>
+  <body class="landing">
+    <div class="landing-header">
+      <svg width="280" height="88" viewBox="0 0 1231 342" xmlns="http://www.w3.org/2000/svg" class="nav-logo"> <g fill="none" fill-rule="evenodd"> <g fill="#fff" class="wordmark"> <path d="M764.367 94.13h-20.803l.066 154.74h84.155v-19.136h-63.352l-.066-135.603zM907.917 221.7c-5.2 5.434-13.946 10.87-25.766 10.87-15.838 0-22.22-7.797-22.22-17.957 0-15.354 10.637-22.678 33.332-22.678 4.255 0 11.11.472 14.655 1.18v28.586zm-21.51-93.787c-16.8 0-32.208 5.952-44.23 15.858l7.352 12.73c8.51-4.962 18.91-9.924 33.802-9.924 17.02 0 24.585 8.742 24.585 23.39v7.56c-3.31-.71-10.164-1.184-14.42-1.184-36.404 0-54.842 12.757-54.842 39.454 0 23.86 14.656 35.908 36.876 35.908 14.97 0 29.314-6.852 34.278-17.954l3.782 15.118h14.657v-79.14c0-25.04-10.874-41.815-41.84-41.815zM995.368 233.277c-7.802 0-14.657-.945-19.858-3.308v-71.58c7.093-5.908 15.84-10.16 26.95-10.16 20.092 0 27.893 14.174 27.893 37.09 0 32.6-12.53 47.957-34.985 47.957m8.742-105.364c-18.592 0-28.6 12.64-28.6 12.64V120.59l-.066-26.458H955.116l.066 150.957c10.164 4.25 24.11 6.613 39.24 6.613 38.768 0 57.442-24.804 57.442-67.564 0-33.783-17.26-56.227-47.754-56.227M538.238 110.904c18.438 0 30.258 6.142 38.06 12.285l8.938-15.477c-12.184-10.678-28.573-16.417-46.053-16.417-44.204 0-75.17 26.932-75.17 81.267 0 56.935 33.407 79.14 71.624 79.14 19.148 0 35.46-4.488 46.096-8.976l-.435-60.832V162.76h-56.734v19.135h36.167l.437 46.184c-4.727 2.362-13 4.252-24.11 4.252-30.73 0-51.297-19.32-51.297-60.006 0-41.34 21.275-61.422 52.478-61.422M684.534 94.13h-20.33l.066 25.988v89.771c0 25.04 10.874 41.814 41.84 41.814 4.28 0 8.465-.39 12.53-1.126v-18.245c-2.943.45-6.083.707-9.455.707-17.02 0-24.585-8.74-24.585-23.387v-61.895h34.04v-17.01H684.6l-.066-36.617zM612.62 248.87h20.33V130.747h-20.33v118.12zM612.62 114.448h20.33V94.13h-20.33v20.318z"></path> </g> <path d="M185.398 341.13l68.013-209.322H117.39L185.4 341.13z" fill="#E24329" class="logo-svg-shape logo-dark-orange-shape"></path> <path d="M185.398 341.13l-68.013-209.322h-95.32L185.4 341.128z" fill="#FC6D26" class="logo-svg-shape logo-orange-shape"></path> <path d="M22.066 131.808l-20.67 63.61c-1.884 5.803.18 12.16 5.117 15.744L185.398 341.13 22.066 131.807z" fill="#FCA326" class="logo-svg-shape logo-light-orange-shape"></path> <path d="M22.066 131.808h95.32L76.42 5.735c-2.107-6.487-11.284-6.487-13.39 0L22.065 131.808z" fill="#E24329" class="logo-svg-shape logo-dark-orange-shape"></path> <path d="M185.398 341.13l68.013-209.322h95.32L185.4 341.128z" fill="#FC6D26" class="logo-svg-shape logo-orange-shape"></path> <path d="M348.73 131.808l20.67 63.61c1.884 5.803-.18 12.16-5.117 15.744L185.398 341.13 348.73 131.807z" fill="#FCA326" class="logo-svg-shape logo-light-orange-shape"></path> <path d="M348.73 131.808h-95.32L294.376 5.735c2.108-6.487 11.285-6.487 13.392 0l40.963 126.073z" fill="#E24329" class="logo-svg-shape logo-dark-orange-shape"></path> </g> </svg>
+      <h1>Welcome to our Documentation Portal</h1>
+      <input type="text" class="st-default-search-input" placeholder="How can we help you?">
+    </div>
+    <%= yield %>
+  </body>
+</html>