diff options
author | Connor Shea <connor.james.shea@gmail.com> | 2016-10-17 02:36:21 +0300 |
---|---|---|
committer | Connor Shea <connor.james.shea@gmail.com> | 2016-10-17 02:36:21 +0300 |
commit | ac2d5b8d21c02ba018468a27955f98df60ddc388 (patch) | |
tree | 50c38dda4ea65be8c80658df1126818a0b1bf461 | |
parent | c7a96d18e4e11169d4356bce608f6bb7294bf3ba (diff) |
Use the new home page from docs.gitlab.com, but with responsive design.
-rw-r--r-- | README.md | 3 | ||||
-rw-r--r-- | Rakefile | 10 | ||||
-rw-r--r-- | Rules | 2 | ||||
-rw-r--r-- | content/assets/stylesheets/stylesheet.scss | 143 | ||||
-rw-r--r-- | content/index.erb | 50 | ||||
-rw-r--r-- | layouts/default.html | 2 | ||||
-rw-r--r-- | layouts/home.html | 22 |
7 files changed, 205 insertions, 27 deletions
@@ -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 @@ -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| @@ -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> |