Add logo and move menu to top right

This is an attempt to match James Cole's mockup.

Change-Id: I527b7c39ea9237ff528dd9fca5b4e11254f2cdea
This commit is contained in:
James E. Blair 2018-05-02 15:53:12 -07:00
parent 362d931c8f
commit f2d3d40106
7 changed files with 99 additions and 100 deletions

View File

@ -1414,6 +1414,10 @@ em, i {
p, ul, ol, dl, table, blockquote {
margin: 0 0 2em 0; }
#logo {
height: 1em;
margin-left: 0.75em; }
h1, h2, h3, h4, h5, h6 {
color: inherit;
font-weight: 600;
@ -1769,15 +1773,16 @@ input[type="button"],
/* Header */
#header {
text-align: center;
padding: 3em 0 0 0;
padding: 2em 0 0 0;
background-color: #fff;
background-image: url("images/bg02.png"), url("images/bg02.png"), url("images/bg01.png");
background-position: top left, top left, top left;
background-size: 100% 6em, 100% 6em, auto;
background-repeat: no-repeat, no-repeat, repeat; }
#header h1 {
padding: 0 0 2.75em 0;
margin: 0; }
padding: 0 0 2em 0;
margin: 0;
text-align: left; }
#header h1 a {
font-size: 4em;
letter-spacing: -0.025em;
@ -1785,19 +1790,10 @@ input[type="button"],
#nav {
cursor: default;
background-color: #333;
background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), url("images/bg01.png");
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), url("images/bg01.png");
background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), url("images/bg01.png");
background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), url("images/bg01.png");
padding: 0; }
#nav:after {
content: '';
display: block;
width: 100%;
height: 0.75em;
background-color: #37c0fb;
background-image: url("images/bg01.png"); }
padding: 0 2.75em 0 0;
position: absolute;
right: 0;
top: 0; }
#nav > ul {
margin: 0; }
#nav > ul > li {
@ -1805,48 +1801,35 @@ input[type="button"],
display: inline-block;
margin-left: 1em; }
#nav > ul > li a {
color: #c0c0c0;
color: #071d49;
text-decoration: none;
font-weight: 600;
border: 0;
display: block;
padding: 1.5em 0.5em 1.35em 0.5em; }
padding: 2em 0.5em 0.5em 0.5em; }
#nav > ul > li:first-child {
margin-left: 0; }
#nav > ul > li:hover a {
color: #fff; }
#nav > ul > li.current {
font-weight: 600; }
#nav > ul > li.current:before {
-moz-transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
transform: rotateZ(45deg);
width: 0.75em;
height: 0.75em;
content: '';
display: block;
position: absolute;
bottom: -0.5em;
left: 50%;
margin-left: -0.375em;
background-color: #37c0fb;
background-image: url("images/bg01.png"); }
#nav > ul > li.current a {
color: #fff; }
color: #41b6e6; }
#nav > ul > li.current:before {
width: 100%;
height: 0.15em;
content: '';
display: block;
position: absolute;
bottom: 0;
background-color: #071d49;
background-image: url("images/bg01.png"); }
#nav > ul > li.current a {
color: #071d49; }
#nav > ul > li.active a {
color: #fff; }
#nav > ul > li.active.current:before {
opacity: 0; }
color: #41b6e6; }
#nav > ul > li > ul {
display: none; }
/* Dropotron */
.dropotron {
background-color: #333;
background-image: -moz-linear-gradient(top, rgba(0,0,0,0.3), rgba(0,0,0,0)), url("images/bg01.png");
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.3), rgba(0,0,0,0)), url("images/bg01.png");
background-image: -ms-linear-gradient(top, rgba(0,0,0,0.3), rgba(0,0,0,0)), url("images/bg01.png");
background-image: linear-gradient(top, rgba(0,0,0,0.3), rgba(0,0,0,0)), url("images/bg01.png");
background-color: white;
border-radius: 5px;
color: #fff;
min-width: 10em;
@ -1857,11 +1840,12 @@ input[type="button"],
line-height: 2em;
padding: 0 1.1em 0 1em; }
.dropotron > li > a {
color: #c0c0c0;
color: #071d49;
text-decoration: none;
font-weight: 600;
border: 0; }
.dropotron > li.active > a, .dropotron > li:hover > a {
color: #fff; }
color: #41b6e6; }
.dropotron.level-0 {
border-radius: 0 0 5px 5px;
font-size: 0.9em;
@ -1987,9 +1971,9 @@ input[type="button"],
/* Header */
#header {
padding: 2em 0 0 0; }
padding: 1em 0 0 0; }
#header h1 {
padding: 0 0 1.75em 0; }
padding: 0 0 1em 0; }
/* Banner */
#banner {
@ -2322,5 +2306,3 @@ input[type="button"],
#footer {
padding: 2em 20px;
text-align: left; } }
/*# sourceMappingURL=main.css.map */

View File

@ -51,7 +51,7 @@
$(
'<div id="titleBar">' +
'<a href="#navPanel" class="toggle"></a>' +
'<span class="title">' + $('#logo').html() + '</span>' +
'<span class="title">Zuul</span>' +
'</div>'
)
.appendTo($body);
@ -83,4 +83,4 @@
});
})(jQuery);
})(jQuery);

View File

@ -26,6 +26,9 @@
fg-light: #999,
border: #e0e0e0,
light-blue: #41b6e6,
dark-blue: #071d49,
accent: (
bg: #37c0fb,
fg: #fff

View File

@ -103,6 +103,11 @@
margin: 0 0 2em 0;
}
#logo {
height: 1em;
margin-left: 0.75em;
}
h1, h2, h3, h4, h5, h6 {
color: inherit;
font-weight: 600;
@ -565,7 +570,7 @@
#header {
text-align: center;
padding: 3em 0 0 0;
padding: 2em 0 0 0;
background-color: #fff;
background-image: url('images/bg02.png'), url('images/bg02.png'), url('images/bg01.png');
background-position: top left, top left, top left;
@ -573,8 +578,9 @@
background-repeat: no-repeat, no-repeat, repeat;
h1 {
padding: 0 0 2.75em 0;
padding: 0 0 2em 0;
margin: 0;
text-align: left;
a {
font-size: 4em;
@ -586,18 +592,10 @@
#nav {
cursor: default;
background-color: #333;
@include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3))', 'url("images/bg01.png")'));
padding: 0;
&:after {
content: '';
display: block;
width: 100%;
height: 0.75em;
background-color: _palette(accent, bg);
background-image: url("images/bg01.png");
}
padding: 0 2.75em 0 0;
position: absolute;
right: 0;
top: 0;
> ul {
margin: 0;
@ -608,11 +606,12 @@
margin-left: 1em;
a {
color: #c0c0c0;
color: _palette(dark-blue);
text-decoration: none;
font-weight: 600;
border: 0;
display: block;
padding: 1.5em 0.5em 1.35em 0.5em;
padding: 2em 0.5em 0.5em 0.5em;
}
&:first-child {
@ -621,41 +620,30 @@
&:hover {
a {
color: #fff;
color: _palette(light-blue);
}
}
&.current {
font-weight: 600;
&:before {
@include vendor('transform', 'rotateZ(45deg)');
width: 0.75em;
height: 0.75em;
width: 100%;
height: 0.15em;
content: '';
display: block;
position: absolute;
bottom: -0.5em;
left: 50%;
margin-left: -0.375em;
background-color: _palette(accent, bg);
bottom: 0;
background-color: _palette(dark-blue);
background-image: url("images/bg01.png");
}
a {
color: #fff;
color: _palette(dark-blue);
}
}
&.active {
a {
color: #fff;
}
&.current {
&:before {
opacity: 0;
}
color: _palette(light-blue);
}
}
@ -669,8 +657,7 @@
/* Dropotron */
.dropotron {
background-color: #333;
@include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.3), rgba(0,0,0,0))', 'url("images/bg01.png")'));
background-color: white;
border-radius: _size(radius);
color: #fff;
min-width: 10em;
@ -683,15 +670,16 @@
padding: 0 1.1em 0 1em;
> a {
color: #c0c0c0;
color: _palette(dark-blue);
text-decoration: none;
font-weight: 600;
border: 0;
}
&.active,
&:hover {
> a {
color: #fff;
color: _palette(light-blue);
}
}
}
@ -897,10 +885,10 @@
/* Header */
#header {
padding: 2em 0 0 0;
padding: 1em 0 0 0;
h1 {
padding: 0 0 1.75em 0;
padding: 0 0 1em 0;
}
}

View File

@ -21,14 +21,16 @@
<div id="header">
<!-- Logo -->
<h1><a href="index.html" id="logo">Zuul</a></h1>
<h1>
<a href="/"><img id="logo" src="../images/logo.svg" alt="Zuul"/></a>
</h1>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="/">Home</a></li>
<li class="current">
<a href=".">Docs</a>
<a href=".">Documentation</a>
<ul>
<li><a href="zuul/">Zuul</a></li>
<li><a href="nodepool/">Nodepool</a></li>
@ -109,7 +111,7 @@
<!-- Copyright -->
<div class="copyright">
<ul class="menu">
<li>&copy; Zuul Contributors. Licensed under Creative Commons Attribution 3.0</li><li>Title image by James E. Blair</li><li>Design based on Arcana from: <a href="http://html5up.net">HTML5 UP</a></li><li><a href="https://git.zuul-ci.org/cgit/zuul-website/tree/">Browse page source</a></li>
<li>&copy; Zuul Contributors. Licensed under Creative Commons Attribution 3.0</li><li>Design based on Arcana from: <a href="http://html5up.net">HTML5 UP</a></li><li><a href="https://git.zuul-ci.org/cgit/zuul-website/tree/">Browse page source</a></li>
</ul>
</div>

22
www/images/logo.svg Normal file
View File

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 144 144" style="enable-background:new 0 0 144 144;" xml:space="preserve">
<style type="text/css">
.st0{fill:#071D49;}
</style>
<g>
<path class="st0" d="M12.8,102.6h118.5L106,58.8v-15l7-9.2H92L72,0L52,34.7H31.1l7,9.2v15L12.8,102.6z M38,96.6H23.1L38,70.8V96.6z
M48.4,96.6H44V61.3h4.3V96.6z M48.4,55.3H44V51h4.3V55.3z M69,96.6H54.3V61.3H69V96.6z M89.7,96.6H75V61.3h14.7V96.6z M89.7,55.3
H54.3V51h35.3V55.3z M100,96.6h-4.3V61.3h4.3V96.6z M100,55.3h-4.3V51h4.3V55.3z M106,70.8l14.9,25.8H106V70.8z M72,12l13.1,22.7
H58.9L72,12z M100.9,40.7l-0.9,1.2V45H44v-3.2l-0.9-1.2H100.9z"/>
<polygon class="st0" points="138.2,137.3 125.1,137.3 125.1,114.6 119.1,118.1 119.1,137.3 119.1,139.6 119.1,143.3 141.6,143.3
"/>
<path class="st0" d="M99.1,131.5L99.1,131.5L99.1,131.5c0,3.6-2.9,6.5-6.5,6.5c-3.6,0-6.5-2.9-6.5-6.5v0h0v-16.9l-6,3.5v13.5v0
c0,6.9,5.6,12.5,12.5,12.5c6.9,0,12.5-5.6,12.5-12.5v0v-16.9l-6,3.5V131.5z"/>
<path class="st0" d="M60.2,131.5L60.2,131.5L60.2,131.5c0,3.6-2.9,6.5-6.5,6.5c-3.6,0-6.5-2.9-6.5-6.5v0h0v-16.9l-6,3.5v13.5v0
c0,6.9,5.6,12.5,12.5,12.5c6.9,0,12.5-5.6,12.5-12.5v0v-16.9l-6,3.5V131.5z"/>
<polygon class="st0" points="25.8,114.6 25.4,114.6 18.9,114.6 5.8,114.6 2.4,120.6 15.5,120.6 2.4,143.3 23.8,143.3 27.3,137.3
12.7,137.3 "/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -21,19 +21,21 @@
<div id="header">
<!-- Logo -->
<h1><a href="/" id="logo">Zuul</a></h1>
<h1>
<a href="/"><img id="logo" src="images/logo.svg" alt="Zuul"/></a>
</h1>
<!-- Nav -->
<nav id="nav">
<ul>
<li class="current"><a href="index.html">Home</a></li>
<li>
<a href="docs/">Docs</a>
<a href="docs/">Documentation</a>
<ul>
<li><a href="docs/zuul/">Zuul</a></li>
<li><a href="docs/nodepool">Nodepool</a></li>
<li><a href="docs/zuul-jobs">Zuul Jobs</a></li>
<li><a href="docs/zuul-base-jobs">Base Jobs</a></li>
<li><a href="docs/zuul-base-jobs">Base Jobs</a></li>
</ul>
</li>
</ul>