Skip to content
Snippets Groups Projects
Commit 7f0ba244 authored by Sid Sijbrandij's avatar Sid Sijbrandij
Browse files

Merge branch '75-update-outdated-style' into 'master' 

New design

Created a new design. I asked some of the designers for input but they were busy at the time so I went ahead and did this quickly.

![Screen_Shot_2016-10-10_at_15.01.40](/uploads/dcc3af29c222018ceaf8005a27d82a8a/Screen_Shot_2016-10-10_at_15.01.40.png)

Closes #75

See merge request !38
parents d248ed39 c8cab599
No related branches found
No related tags found
1 merge request!38New design
Hide whitespace changes
Inline Side-by-side
index.html
+ 64
− 22
View file @ 7f0ba244
<!doctype html>
<html>
<head>
<title>GitLab Documentation</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>GitLab Documentation</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="stylesheet" href="/stylesheets/styles.css">
<link rel="stylesheet" href="/stylesheets/pygment_trac.css">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<h1>
<a href="https://docs.gitlab.com/">GitLab Documentation</a>
<input type="text" class="st-default-search-input" style="float: right;">
</h1>
<hr/>
<h2 id="the-gitlab-documentation-covers-the-following-subjects">The GitLab Documentation website has documentation for</h2>
<ul class="software-tiles">
<li class="software-ce"><a href="/ce/">GitLab Community Edition (CE)</a></li>
<li class="software-ee"><a href="/ee/">GitLab Enterprise Edition (EE) and GitLab.com</a></li>
<li class="software-ci"><a href="/ce/ci/">GitLab Continuous Integration (CI)</a></li>
<li class="software-omnibus"><a href="/omnibus/">Omnibus GitLab</a></li>
<div id="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>
<a href="https://docs.gitlab.com/">Welcome to our Documentation Portal</a>
</h1>
<input type="text" class="st-default-search-input" placeholder="How can we help you?">
</div>
<ul class="topics">
<li class="topic-ce">
<a href="/ce/">
<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="/ee/">
<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="/omnibus/">
<div class="wrapper">
<div class="circle">OM</div>
<h2>GitLab Omnibus</h2>
<p>
Browse installation, configuration, maintenance and troubleshooting
documentation for GitLab Omnibus.
</p>
</div>
</a>
</li>
</ul>
</div>
 
<script type="text/javascript">
(function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
(w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
})(window,document,'script','//s.swiftypecdn.com/install/v2/st.js','_st');
(function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
(w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
})(window,document,'script','//s.swiftypecdn.com/install/v2/st.js','_st');
 
_st('install','sSywtTjozQxL11PWiwA7','2.0.0');
_st('install','sSywtTjozQxL11PWiwA7','2.0.0');
</script>
 
<script>
@@ -48,10 +93,8 @@
 
ga('create', 'UA-37019925-1', 'auto');
ga('send', 'pageview');
</script>
 
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
@@ -65,7 +108,6 @@
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=1689559637958103&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
 
<script type="text/javascript">
(function() {
stylesheets/styles.css
+ 128
− 278
View file @ 7f0ba244
@import url(https://fonts.googleapis.com/css?family=Roboto:300,700,300italic,700italic,400,400italic);
 
body {
padding: 50px;
font: 15px/1.4 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #514b4b;
font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
color: #222;
margin: 0 0 20px;
}
p, ul, ol, table, pre, dl {
margin: 0 0 20px;
}
h1, h2, h3 {
line-height: 1.1;
}
h1 {
font-size: 28px;
}
h2 {
color: #393939;
}
h3, h4, h5, h6 {
color: #494949;
}
a {
color: #39c;
font-weight: 400;
text-decoration: none;
}
a:hover {
color: #069;
}
a small {
font-size: 11px;
color: #777;
margin-top: -0.6em;
display: block;
}
a:hover small {
color: #777;
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
.wrapper {
width: 860px;
margin: 0 auto;
body {
line-height: 1;
}
blockquote {
border-left: 1px solid #e5e5e5;
margin: 0;
padding: 0 0 0 20px;
font-style: italic;
ol, ul {
list-style: none;
}
code, pre {
font-family: 'Menlo', 'Liberation Mono', 'Consolas', 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;
color: #333;
font-size: 14px;
blockquote, q {
quotes: none;
}
pre {
padding: 8px 15px;
background: #f8f8f8;
border-radius: 5px;
border: 1px solid #e5e5e5;
overflow-x: auto;
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
text-align: left;
padding: 5px 10px;
border-bottom: 1px solid #e5e5e5;
border-collapse: collapse;
border-spacing: 0;
}
 
dt {
color: #444;
font-weight: 700;
}
/* docs.gitlab.com */
 
th {
color: #444;
}
img {
max-width: 100%;
border: 1px solid rgb(240, 240, 240);
padding: 5px;
margin: 5px;
body {
font-family: "Source Sans Pro", sans-serif;
font-size: 16px;
line-height: 1.6;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
background-color: #f9f9f9;
}
#header {
padding: 75px 35px 200px 35px;
background-color: #34373c;
text-align: center;
color: #fff;
}
 
header {
width: 270px;
float: left;
position: fixed;
h1 {
font-size: 36px;
font-weight: 300;
margin-top: 20px;
}
 
header ul {
list-style: none;
height: 40px;
padding: 0;
background: #eee;
background: linear-gradient(top, #f8f8f8 0%, #ddd 100%);
border-radius: 5px;
border: 1px solid #d2d2d2;
box-shadow: inset #fff 0 1px 0, inset rgba(0,0,0,0.03) 0 -1px 0;
width: 270px;
h1 a {
color: #fff;
text-decoration: none;
}
 
header li {
width: 89px;
float: left;
border-right: 1px solid #d2d2d2;
height: 40px;
#header input {
margin-top: 50px;
font-family: "Source Sans Pro", sans-serif;
border-radius: 0px;
webkit-border-radius: 0px;
-moz-border-radius: 0px;
font-size: 20px;
}
 
header li:first-child a {
border-radius: 5px 0 0 5px;
.st-ui-search-input, .st-default-search-input {
width: 300px !important;
height: 35px !important;
padding: 15px 15px 15px 40px !important;
}
 
header li:last-child a {
border-radius: 0 5px 5px 0;
.st-ui-search-input, .st-default-search-input, span.st-ui-search-icon {
background-size: 16px 16px !important;
background-position: 15px 25px !important;
}
 
header ul a {
line-height: 1;
font-size: 11px;
color: #999;
display: block;
.topics {
text-align: center;
padding-top: 6px;
height: 34px;
}
header ul a:hover {
color: #999;
background: linear-gradient(top, #fff 0%, #ddd 100%);
}
header ul a:active {
box-shadow: inset 0 2px 2px 0 #ddd;
}
strong {
color: #222;
font-weight: 700;
position: relative;
top: -100px;
margin: 0 35px;
}
 
header ul li + li {
width: 88px;
border-left: 1px solid #fff;
.topics li {
display: inline-block;
background-color: #fff;
border: 1px solid rgb(215, 215, 215);
vertical-align: top;
margin-bottom: 50px;
}
 
header ul li + li + li {
border-right: none;
width: 89px;
.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;
top: -28px;
left: 112px;
}
 
header ul a strong {
font-size: 14px;
display: block;
color: #222;
.topic-ee {
margin: 0 20px;
}
 
section {
width: 500px;
float: right;
padding-bottom: 50px;
.topic-ce .circle {
background-color: rgb(1, 136, 101);
}
 
small {
font-size: 11px;
.topic-ee .circle {
background-color: rgb(25, 112, 169);
}
 
hr {
border: 0;
background: #e5e5e5;
height: 1px;
margin: 0 0 20px;
.topic-omnibus .circle {
background-color: rgb(107, 79, 187);
}
 
footer {
width: 270px;
float: left;
position: fixed;
bottom: 50px;
.topics li a, .topics li a:visited {
text-decoration: none;
}
 
@media print, screen and (max-width: 960px) {
div.wrapper {
width: auto;
margin: 0;
}
header, section, footer {
float: none;
position: static;
width: auto;
}
header {
padding-right: 320px;
}
section {
border: 1px solid #e5e5e5;
border-width: 1px 0;
padding: 20px 0;
margin: 0 0 20px;
}
header a small {
display: inline;
}
header ul {
position: absolute;
right: 50px;
top: 52px;
}
.topics li a h2, .topics li a:visited h2 {
height: 70px;
margin-bottom: 25px;
}
 
@media print, screen and (max-width: 720px) {
body {
word-wrap: break-word;
}
header {
padding: 0;
}
header ul, header p.view {
position: static;
}
pre, code {
word-wrap: normal;
}
.topic-ce h2 {
color: rgb(1, 120, 85);
}
 
@media print, screen and (max-width: 480px) {
body {
padding: 15px;
}
header ul {
display: none;
}
.topic-ee h2 {
color: rgb(9, 96, 153);
}
 
@media print {
body {
padding: 0.4in;
font-size: 12pt;
color: #444;
}
.topic-omnibus h2 {
color: rgb(107, 79, 187);
}
 
img.profile {
padding: 5px;
background: white;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
width: 210px;
height: 210px;
border: 1px solid #DDD;
.topics li a p, .topics li a:visited p {
color: #553a3a;
vertical-align: bottom;
}
 
.software-tiles {
margin: 0;
padding: 0;
.topics li .wrapper {
padding: 0px 35px 40px;
width: 280px;
height: 240px;
}
 
.software-tiles li {
list-style-type: none;
margin: 0;
display: table-cell;
width: 1%;
.topics li h2 {
text-align: center;
background: #444;
border: 2px solid #fff;
}
.software-tiles li a {
padding: 120px 20px;
font-size: 24px;
color: #fff;
letter-spacing: -1px;
display: inline-block;
font-weight: 300;
}
.software-tiles .software-ce {
background: #56f;
}
.software-tiles .software-ee {
background: #f64;
}
.software-tiles .software-ci {
background: #4B5;
}
.software-tiles .software-omnibus {
background: #548;
}
.software-tiles li:hover {
background-color: #63a;
transition: background-color 300ms linear;
font-size: 21px;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment