zuul/zuul-website
Code Issues Proposed changes

Add logo and move menu to top right

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
www/assets/css/main.css
View File

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

4
www/assets/js/main.js
View File

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

3
www/assets/sass/libs/_vars.scss
View File

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

68
www/assets/sass/main.scss
View File

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

8
www/docs/index.html
View File

@ -21,14 +21,16 @@
<div id="header"> <div id="header">
<!-- Logo --> <!-- 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 -->
<nav id="nav"> <nav id="nav">
<ul> <ul>
<li><a href="/">Home</a></li> <li><a href="/">Home</a></li>
<li class="current"> <li class="current">
<a href=".">Docs</a> <a href=".">Documentation</a>
<ul> <ul>
<li><a href="zuul/">Zuul</a></li> <li><a href="zuul/">Zuul</a></li>
<li><a href="nodepool/">Nodepool</a></li> <li><a href="nodepool/">Nodepool</a></li>
@ -109,7 +111,7 @@
<!-- Copyright --> <!-- Copyright -->
<div class="copyright"> <div class="copyright">
<ul class="menu"> <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> </ul>
</div> </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>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

8
www/index.html
View File

@ -21,19 +21,21 @@
<div id="header"> <div id="header">
<!-- Logo --> <!-- 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 -->
<nav id="nav"> <nav id="nav">
<ul> <ul>
<li class="current"><a href="index.html">Home</a></li> <li class="current"><a href="index.html">Home</a></li>
<li> <li>
<a href="docs/">Docs</a> <a href="docs/">Documentation</a>
<ul> <ul>
<li><a href="docs/zuul/">Zuul</a></li> <li><a href="docs/zuul/">Zuul</a></li>
<li><a href="docs/nodepool">Nodepool</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-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> </ul>
</li> </li>
</ul> </ul>