Docs: link to the most visited docs from the docs home page

3 files changed, 107 insertions, 30 deletions

diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss
index d3351399..f8fd4035 100644
--- a/content/assets/stylesheets/_variables.scss
+++ b/content/assets/stylesheets/_variables.scss
@@ -24,6 +24,8 @@ $topic-border: rgb(215, 215, 215);
 $topic-ee-header-color: rgb(107, 79, 187);
 $topic-omnibus-header-color: rgb(9, 96, 153);
 $topic-runner-header-color: rgb(203, 88, 15);
+$subtopic-color: rgba(0, 0, 0, .6);
+$subtopic-border-color: rgb(79, 172, 225);
 
 // Other colors
 $toc-bg-color: rgba(244, 247, 248, .7);
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index b5885a0a..6764ec77 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -1,5 +1,5 @@
 ---
-version: 24
+version: 25
 ---
 
 @import "variables";
@@ -507,7 +507,6 @@ h6 {
 }
 // scss-lint:enable ImportantRule
 
-
 .topics {
   text-align: center;
   position: relative;
@@ -517,7 +516,6 @@ h6 {
   max-width: 1350px;
   margin: auto;
   padding-right: 40px;
-  -webkit-padding-start: 0;
 
   li {
     display: inline-block;
@@ -567,6 +565,43 @@ h6 {
   }
 }
 
+.topic {
+  border: 1px solid $white;
+
+  &:hover {
+    box-shadow: 5px 5px 10px $subtopic-color;
+    border: 1px solid $subtopic-border-color;
+    transition: all .2s ease-in-out;
+  }
+
+  h2 {
+    color: $link-color-hover;
+  }
+}
+
+.subtopic {
+  border: 1px solid $white;
+
+  &:hover {
+    box-shadow: 5px 5px 10px $subtopic-color;
+    border: 1px solid $subtopic-border-color;
+    transition: all .2s ease-in-out;
+
+    h2 {
+      color: $link-color-hover;
+    }
+  }
+
+  a {
+    color: $subtopic-color;
+  }
+
+  h2 {
+    font-size: 20px;
+    text-transform: uppercase;
+  }
+}
+
 .topic-ee {
   h2 {
     color: $topic-ee-header-color;
diff --git a/content/index.erb b/content/index.erb
index 67e0c990..3b8134b2 100644
--- a/content/index.erb
+++ b/content/index.erb
@@ -1,33 +1,73 @@
 ---
 title: GitLab Documentation
 ---
-
-<ul class="topics" itemscope itemtype="http://www.schema.org/SiteNavigationElement">
-  <% if ENV['NANOC_ENV'] == 'production' %>
-    <% @config[:products].each do |name, product| %>
-      <% if product[:expose] == true %>
-        <li class="topic-<%= product[:slug] %>">
-          <a href="<%= @items["/#{product[:slug]}/#{product[:index_file]}"].path %>">
-            <div class="wrapper">
-              <h2><%= product[:full_name] %></h2>
-              <p><%= product[:description] %></p>
-            </div>
-          </a>
-        </li>
+<div class="row">
+  <ul class="topics" itemscope itemtype="http://www.schema.org/SiteNavigationElement">
+    <% if ENV['NANOC_ENV'] == 'production' %>
+      <% @config[:products].each do |name, product| %>
+        <% if product[:expose] == true %>
+          <li class="topic topic-<%= product[:slug] %>">
+            <a href="<%= @items["/#{product[:slug]}/#{product[:index_file]}"].path %>">
+              <div class="wrapper">
+                <h2><%= product[:full_name] %></h2>
+                <p><%= product[:description] %></p>
+              </div>
+            </a>
+          </li>
+        <% end %>
       <% end %>
-    <% end %>
-  <% else %>
-    <% @config[:products].each do |name, product| %>
-      <% if Dir.exist?("#{@config[:content_dir]}/#{product[:slug]}")%>
-        <li class="topic-<%= product[:slug] %>">
-          <a href="<%= @items["/#{product[:slug]}/#{product[:index_file]}"].path %>">
-            <div class="wrapper">
-              <h2><%= product[:full_name] %></h2>
-              <p><%= product[:description] %></p>
-            </div>
-          </a>
-        </li>
+    <% else %>
+      <% @config[:products].each do |name, product| %>
+        <% if Dir.exist?("#{@config[:content_dir]}/#{product[:slug]}")%>
+          <li class="topic topic-<%= product[:slug] %>">
+            <a href="<%= @items["/#{product[:slug]}/#{product[:index_file]}"].path %>">
+              <div class="wrapper">
+                <h2><%= product[:full_name] %></h2>
+                <p><%= product[:description] %></p>
+              </div>
+            </a>
+          </li>
+        <% end %>
       <% end %>
     <% end %>
-  <% end %>
-</ul>
+  </ul>
+</div>
+<div class="row">
+  <ul class="topics">
+    <li class="subtopic topic-ci">
+      <a href="ee/ci/yaml/">
+        <div class="wrapper">
+          <h2>GitLab CI/CD YAML</h2>
+          <p>Learn how to configure <code>.gitlab-ci.yml</code> for your project.
+          </p>
+        </div>
+      </a>
+    </li>
+      <li class="subtopic topic-ssh">
+      <a href="ee/ssh/">
+        <div class="wrapper">
+          <h2>SSH</h2>
+          <p>Learn how to create an SSH key pair and configure GitLab to
+             authenticate via SSH from your local computer.
+          </p>
+        </div>
+      </a>
+    </li>
+      <li class="subtopic topic-pages">
+      <a href="ee/user/project/pages/">
+        <div class="wrapper">
+          <h2>GitLab Pages</h2>
+          <p>Learn how to publish a static website directly from GitLab.</p>
+        </div>
+      </a>
+    </li>
+      <li class="subtopic topic-api">
+      <a href="ee/api/">
+        <div class="wrapper">
+          <h2>GitLab API</h2>
+          <p>Automate GitLab via a simple and powerful API.</p>
+        </div>
+      </a>
+    </li>
+  </ul>
+</div>