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
parent
362d931c8f
commit
f2d3d40106
@ -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 */
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -26,6 +26,9 @@
|
||||
fg-light: #999,
|
||||
border: #e0e0e0,
|
||||
|
||||
light-blue: #41b6e6,
|
||||
dark-blue: #071d49,
|
||||
|
||||
accent: (
|
||||
bg: #37c0fb,
|
||||
fg: #fff
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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>© 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>© 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
22
www/images/logo.svg
Normal 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 |
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user