summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJames E. Blair <jeblair@redhat.com>2018-05-02 15:53:12 -0700
committerJames E. Blair <jeblair@redhat.com>2018-05-03 09:00:51 -0700
commitf2d3d4010626023d77195a29c638e657e9a5b57e (patch)
treebba6c76ad7436402f7a14fd4691e327f95577a32
parent362d931c8fb346ec2cacafe43f620ea74acba487 (diff)
Add logo and move menu to top right
This is an attempt to match James Cole's mockup. Change-Id: I527b7c39ea9237ff528dd9fca5b4e11254f2cdea
Notes
Notes (review): Code-Review+2: Monty Taylor <mordred@inaugust.com> Code-Review+2: Tobias Henkel <tobias.henkel@bmw.de> Code-Review+2: Jesse Keating <jkeating@j2solutions.net> Workflow+1: Jesse Keating <jkeating@j2solutions.net> Verified+2: Zuul Submitted-by: Zuul Submitted-at: Wed, 09 May 2018 17:53:53 +0000 Reviewed-on: https://review.openstack.org/565909 Project: openstack-infra/zuul-website Branch: refs/heads/master
-rw-r--r--www/assets/css/main.css86
-rw-r--r--www/assets/js/main.js4
-rw-r--r--www/assets/sass/libs/_vars.scss3
-rw-r--r--www/assets/sass/main.scss68
-rw-r--r--www/docs/index.html8
-rw-r--r--www/images/logo.svg22
-rw-r--r--www/index.html8
7 files changed, 99 insertions, 100 deletions
diff --git a/www/assets/css/main.css b/www/assets/css/main.css
index 99b05c5..2648c84 100644
--- a/www/assets/css/main.css
+++ b/www/assets/css/main.css
@@ -1414,6 +1414,10 @@ em, i {
1414p, ul, ol, dl, table, blockquote { 1414p, ul, ol, dl, table, blockquote {
1415 margin: 0 0 2em 0; } 1415 margin: 0 0 2em 0; }
1416 1416
1417#logo {
1418 height: 1em;
1419 margin-left: 0.75em; }
1420
1417h1, h2, h3, h4, h5, h6 { 1421h1, h2, h3, h4, h5, h6 {
1418 color: inherit; 1422 color: inherit;
1419 font-weight: 600; 1423 font-weight: 600;
@@ -1769,15 +1773,16 @@ input[type="button"],
1769/* Header */ 1773/* Header */
1770#header { 1774#header {
1771 text-align: center; 1775 text-align: center;
1772 padding: 3em 0 0 0; 1776 padding: 2em 0 0 0;
1773 background-color: #fff; 1777 background-color: #fff;
1774 background-image: url("images/bg02.png"), url("images/bg02.png"), url("images/bg01.png"); 1778 background-image: url("images/bg02.png"), url("images/bg02.png"), url("images/bg01.png");
1775 background-position: top left, top left, top left; 1779 background-position: top left, top left, top left;
1776 background-size: 100% 6em, 100% 6em, auto; 1780 background-size: 100% 6em, 100% 6em, auto;
1777 background-repeat: no-repeat, no-repeat, repeat; } 1781 background-repeat: no-repeat, no-repeat, repeat; }
1778 #header h1 { 1782 #header h1 {
1779 padding: 0 0 2.75em 0; 1783 padding: 0 0 2em 0;
1780 margin: 0; } 1784 margin: 0;
1785 text-align: left; }
1781 #header h1 a { 1786 #header h1 a {
1782 font-size: 4em; 1787 font-size: 4em;
1783 letter-spacing: -0.025em; 1788 letter-spacing: -0.025em;
@@ -1785,19 +1790,10 @@ input[type="button"],
1785 1790
1786#nav { 1791#nav {
1787 cursor: default; 1792 cursor: default;
1788 background-color: #333; 1793 padding: 0 2.75em 0 0;
1789 background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), url("images/bg01.png"); 1794 position: absolute;
1790 background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), url("images/bg01.png"); 1795 right: 0;
1791 background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), url("images/bg01.png"); 1796 top: 0; }
1792 background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), url("images/bg01.png");
1793 padding: 0; }
1794 #nav:after {
1795 content: '';
1796 display: block;
1797 width: 100%;
1798 height: 0.75em;
1799 background-color: #37c0fb;
1800 background-image: url("images/bg01.png"); }
1801 #nav > ul { 1797 #nav > ul {
1802 margin: 0; } 1798 margin: 0; }
1803 #nav > ul > li { 1799 #nav > ul > li {
@@ -1805,48 +1801,35 @@ input[type="button"],
1805 display: inline-block; 1801 display: inline-block;
1806 margin-left: 1em; } 1802 margin-left: 1em; }
1807 #nav > ul > li a { 1803 #nav > ul > li a {
1808 color: #c0c0c0; 1804 color: #071d49;
1809 text-decoration: none; 1805 text-decoration: none;
1806 font-weight: 600;
1810 border: 0; 1807 border: 0;
1811 display: block; 1808 display: block;
1812 padding: 1.5em 0.5em 1.35em 0.5em; } 1809 padding: 2em 0.5em 0.5em 0.5em; }
1813 #nav > ul > li:first-child { 1810 #nav > ul > li:first-child {
1814 margin-left: 0; } 1811 margin-left: 0; }
1815 #nav > ul > li:hover a { 1812 #nav > ul > li:hover a {
1816 color: #fff; } 1813 color: #41b6e6; }
1817 #nav > ul > li.current { 1814 #nav > ul > li.current:before {
1818 font-weight: 600; } 1815 width: 100%;
1819 #nav > ul > li.current:before { 1816 height: 0.15em;
1820 -moz-transform: rotateZ(45deg); 1817 content: '';
1821 -webkit-transform: rotateZ(45deg); 1818 display: block;
1822 -ms-transform: rotateZ(45deg); 1819 position: absolute;
1823 transform: rotateZ(45deg); 1820 bottom: 0;
1824 width: 0.75em; 1821 background-color: #071d49;
1825 height: 0.75em; 1822 background-image: url("images/bg01.png"); }
1826 content: ''; 1823 #nav > ul > li.current a {
1827 display: block; 1824 color: #071d49; }
1828 position: absolute;
1829 bottom: -0.5em;
1830 left: 50%;
1831 margin-left: -0.375em;
1832 background-color: #37c0fb;
1833 background-image: url("images/bg01.png"); }
1834 #nav > ul > li.current a {
1835 color: #fff; }
1836 #nav > ul > li.active a { 1825 #nav > ul > li.active a {
1837 color: #fff; } 1826 color: #41b6e6; }
1838 #nav > ul > li.active.current:before {
1839 opacity: 0; }
1840 #nav > ul > li > ul { 1827 #nav > ul > li > ul {
1841 display: none; } 1828 display: none; }
1842 1829
1843/* Dropotron */ 1830/* Dropotron */
1844.dropotron { 1831.dropotron {
1845 background-color: #333; 1832 background-color: white;
1846 background-image: -moz-linear-gradient(top, rgba(0,0,0,0.3), rgba(0,0,0,0)), url("images/bg01.png");
1847 background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.3), rgba(0,0,0,0)), url("images/bg01.png");
1848 background-image: -ms-linear-gradient(top, rgba(0,0,0,0.3), rgba(0,0,0,0)), url("images/bg01.png");
1849 background-image: linear-gradient(top, rgba(0,0,0,0.3), rgba(0,0,0,0)), url("images/bg01.png");
1850 border-radius: 5px; 1833 border-radius: 5px;
1851 color: #fff; 1834 color: #fff;
1852 min-width: 10em; 1835 min-width: 10em;
@@ -1857,11 +1840,12 @@ input[type="button"],
1857 line-height: 2em; 1840 line-height: 2em;
1858 padding: 0 1.1em 0 1em; } 1841 padding: 0 1.1em 0 1em; }
1859 .dropotron > li > a { 1842 .dropotron > li > a {
1860 color: #c0c0c0; 1843 color: #071d49;
1861 text-decoration: none; 1844 text-decoration: none;
1845 font-weight: 600;
1862 border: 0; } 1846 border: 0; }
1863 .dropotron > li.active > a, .dropotron > li:hover > a { 1847 .dropotron > li.active > a, .dropotron > li:hover > a {
1864 color: #fff; } 1848 color: #41b6e6; }
1865 .dropotron.level-0 { 1849 .dropotron.level-0 {
1866 border-radius: 0 0 5px 5px; 1850 border-radius: 0 0 5px 5px;
1867 font-size: 0.9em; 1851 font-size: 0.9em;
@@ -1987,9 +1971,9 @@ input[type="button"],
1987 1971
1988 /* Header */ 1972 /* Header */
1989 #header { 1973 #header {
1990 padding: 2em 0 0 0; } 1974 padding: 1em 0 0 0; }
1991 #header h1 { 1975 #header h1 {
1992 padding: 0 0 1.75em 0; } 1976 padding: 0 0 1em 0; }
1993 1977
1994 /* Banner */ 1978 /* Banner */
1995 #banner { 1979 #banner {
@@ -2322,5 +2306,3 @@ input[type="button"],
2322 #footer { 2306 #footer {
2323 padding: 2em 20px; 2307 padding: 2em 20px;
2324 text-align: left; } } 2308 text-align: left; } }
2325
2326/*# sourceMappingURL=main.css.map */
diff --git a/www/assets/js/main.js b/www/assets/js/main.js
index b9f64d1..d2cd39f 100644
--- a/www/assets/js/main.js
+++ b/www/assets/js/main.js
@@ -51,7 +51,7 @@
51 $( 51 $(
52 '<div id="titleBar">' + 52 '<div id="titleBar">' +
53 '<a href="#navPanel" class="toggle"></a>' + 53 '<a href="#navPanel" class="toggle"></a>' +
54 '<span class="title">' + $('#logo').html() + '</span>' + 54 '<span class="title">Zuul</span>' +
55 '</div>' 55 '</div>'
56 ) 56 )
57 .appendTo($body); 57 .appendTo($body);
@@ -83,4 +83,4 @@
83 83
84 }); 84 });
85 85
86})(jQuery); \ No newline at end of file 86})(jQuery);
diff --git a/www/assets/sass/libs/_vars.scss b/www/assets/sass/libs/_vars.scss
index 1181ed1..b4f218f 100644
--- a/www/assets/sass/libs/_vars.scss
+++ b/www/assets/sass/libs/_vars.scss
@@ -26,6 +26,9 @@
26 fg-light: #999, 26 fg-light: #999,
27 border: #e0e0e0, 27 border: #e0e0e0,
28 28
29 light-blue: #41b6e6,
30 dark-blue: #071d49,
31
29 accent: ( 32 accent: (
30 bg: #37c0fb, 33 bg: #37c0fb,
31 fg: #fff 34 fg: #fff
diff --git a/www/assets/sass/main.scss b/www/assets/sass/main.scss
index 5d32dab..8ccf95c 100644
--- a/www/assets/sass/main.scss
+++ b/www/assets/sass/main.scss
@@ -103,6 +103,11 @@
103 margin: 0 0 2em 0; 103 margin: 0 0 2em 0;
104 } 104 }
105 105
106 #logo {
107 height: 1em;
108 margin-left: 0.75em;
109 }
110
106 h1, h2, h3, h4, h5, h6 { 111 h1, h2, h3, h4, h5, h6 {
107 color: inherit; 112 color: inherit;
108 font-weight: 600; 113 font-weight: 600;
@@ -565,7 +570,7 @@
565 570
566 #header { 571 #header {
567 text-align: center; 572 text-align: center;
568 padding: 3em 0 0 0; 573 padding: 2em 0 0 0;
569 background-color: #fff; 574 background-color: #fff;
570 background-image: url('images/bg02.png'), url('images/bg02.png'), url('images/bg01.png'); 575 background-image: url('images/bg02.png'), url('images/bg02.png'), url('images/bg01.png');
571 background-position: top left, top left, top left; 576 background-position: top left, top left, top left;
@@ -573,8 +578,9 @@
573 background-repeat: no-repeat, no-repeat, repeat; 578 background-repeat: no-repeat, no-repeat, repeat;
574 579
575 h1 { 580 h1 {
576 padding: 0 0 2.75em 0; 581 padding: 0 0 2em 0;
577 margin: 0; 582 margin: 0;
583 text-align: left;
578 584
579 a { 585 a {
580 font-size: 4em; 586 font-size: 4em;
@@ -586,18 +592,10 @@
586 592
587 #nav { 593 #nav {
588 cursor: default; 594 cursor: default;
589 background-color: #333; 595 padding: 0 2.75em 0 0;
590 @include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3))', 'url("images/bg01.png")')); 596 position: absolute;
591 padding: 0; 597 right: 0;
592 598 top: 0;
593 &:after {
594 content: '';
595 display: block;
596 width: 100%;
597 height: 0.75em;
598 background-color: _palette(accent, bg);
599 background-image: url("images/bg01.png");
600 }
601 599
602 > ul { 600 > ul {
603 margin: 0; 601 margin: 0;
@@ -608,11 +606,12 @@
608 margin-left: 1em; 606 margin-left: 1em;
609 607
610 a { 608 a {
611 color: #c0c0c0; 609 color: _palette(dark-blue);
612 text-decoration: none; 610 text-decoration: none;
611 font-weight: 600;
613 border: 0; 612 border: 0;
614 display: block; 613 display: block;
615 padding: 1.5em 0.5em 1.35em 0.5em; 614 padding: 2em 0.5em 0.5em 0.5em;
616 } 615 }
617 616
618 &:first-child { 617 &:first-child {
@@ -621,41 +620,30 @@
621 620
622 &:hover { 621 &:hover {
623 a { 622 a {
624 color: #fff; 623 color: _palette(light-blue);
625 } 624 }
626 } 625 }
627 626
628 &.current { 627 &.current {
629 font-weight: 600;
630
631 &:before { 628 &:before {
632 @include vendor('transform', 'rotateZ(45deg)'); 629 width: 100%;
633 width: 0.75em; 630 height: 0.15em;
634 height: 0.75em;
635 content: ''; 631 content: '';
636 display: block; 632 display: block;
637 position: absolute; 633 position: absolute;
638 bottom: -0.5em; 634 bottom: 0;
639 left: 50%; 635 background-color: _palette(dark-blue);
640 margin-left: -0.375em;
641 background-color: _palette(accent, bg);
642 background-image: url("images/bg01.png"); 636 background-image: url("images/bg01.png");
643 } 637 }
644 638
645 a { 639 a {
646 color: #fff; 640 color: _palette(dark-blue);
647 } 641 }
648 } 642 }
649 643
650 &.active { 644 &.active {
651 a { 645 a {
652 color: #fff; 646 color: _palette(light-blue);
653 }
654
655 &.current {
656 &:before {
657 opacity: 0;
658 }
659 } 647 }
660 } 648 }
661 649
@@ -669,8 +657,7 @@
669/* Dropotron */ 657/* Dropotron */
670 658
671 .dropotron { 659 .dropotron {
672 background-color: #333; 660 background-color: white;
673 @include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.3), rgba(0,0,0,0))', 'url("images/bg01.png")'));
674 border-radius: _size(radius); 661 border-radius: _size(radius);
675 color: #fff; 662 color: #fff;
676 min-width: 10em; 663 min-width: 10em;
@@ -683,15 +670,16 @@
683 padding: 0 1.1em 0 1em; 670 padding: 0 1.1em 0 1em;
684 671
685 > a { 672 > a {
686 color: #c0c0c0; 673 color: _palette(dark-blue);
687 text-decoration: none; 674 text-decoration: none;
675 font-weight: 600;
688 border: 0; 676 border: 0;
689 } 677 }
690 678
691 &.active, 679 &.active,
692 &:hover { 680 &:hover {
693 > a { 681 > a {
694 color: #fff; 682 color: _palette(light-blue);
695 } 683 }
696 } 684 }
697 } 685 }
@@ -897,10 +885,10 @@
897 /* Header */ 885 /* Header */
898 886
899 #header { 887 #header {
900 padding: 2em 0 0 0; 888 padding: 1em 0 0 0;
901 889
902 h1 { 890 h1 {
903 padding: 0 0 1.75em 0; 891 padding: 0 0 1em 0;
904 } 892 }
905 } 893 }
906 894
diff --git a/www/docs/index.html b/www/docs/index.html
index 603dc97..2d3b8f3 100644
--- a/www/docs/index.html
+++ b/www/docs/index.html
@@ -21,14 +21,16 @@
21 <div id="header"> 21 <div id="header">
22 22
23 <!-- Logo --> 23 <!-- Logo -->
24 <h1><a href="index.html" id="logo">Zuul</a></h1> 24 <h1>
25 <a href="/"><img id="logo" src="../images/logo.svg" alt="Zuul"/></a>
26 </h1>
25 27
26 <!-- Nav --> 28 <!-- Nav -->
27 <nav id="nav"> 29 <nav id="nav">
28 <ul> 30 <ul>
29 <li><a href="/">Home</a></li> 31 <li><a href="/">Home</a></li>
30 <li class="current"> 32 <li class="current">
31 <a href=".">Docs</a> 33 <a href=".">Documentation</a>
32 <ul> 34 <ul>
33 <li><a href="zuul/">Zuul</a></li> 35 <li><a href="zuul/">Zuul</a></li>
34 <li><a href="nodepool/">Nodepool</a></li> 36 <li><a href="nodepool/">Nodepool</a></li>
@@ -109,7 +111,7 @@
109 <!-- Copyright --> 111 <!-- Copyright -->
110 <div class="copyright"> 112 <div class="copyright">
111 <ul class="menu"> 113 <ul class="menu">
112 <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> 114 <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>
113 </ul> 115 </ul>
114 </div> 116 </div>
115 117
diff --git a/www/images/logo.svg b/www/images/logo.svg
new file mode 100644
index 0000000..ded6d34
--- /dev/null
+++ b/www/images/logo.svg
@@ -0,0 +1,22 @@
1<?xml version="1.0" encoding="utf-8"?>
2<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3<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"
4 viewBox="0 0 144 144" style="enable-background:new 0 0 144 144;" xml:space="preserve">
5<style type="text/css">
6 .st0{fill:#071D49;}
7</style>
8<g>
9 <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
10 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
11 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
12 H58.9L72,12z M100.9,40.7l-0.9,1.2V45H44v-3.2l-0.9-1.2H100.9z"/>
13 <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
14 "/>
15 <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
16 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"/>
17 <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
18 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"/>
19 <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
20 12.7,137.3 "/>
21</g>
22</svg>
diff --git a/www/index.html b/www/index.html
index 293ec6d..f918728 100644
--- a/www/index.html
+++ b/www/index.html
@@ -21,19 +21,21 @@
21 <div id="header"> 21 <div id="header">
22 22
23 <!-- Logo --> 23 <!-- Logo -->
24 <h1><a href="/" id="logo">Zuul</a></h1> 24 <h1>
25 <a href="/"><img id="logo" src="images/logo.svg" alt="Zuul"/></a>
26 </h1>
25 27
26 <!-- Nav --> 28 <!-- Nav -->
27 <nav id="nav"> 29 <nav id="nav">
28 <ul> 30 <ul>
29 <li class="current"><a href="index.html">Home</a></li> 31 <li class="current"><a href="index.html">Home</a></li>
30 <li> 32 <li>
31 <a href="docs/">Docs</a> 33 <a href="docs/">Documentation</a>
32 <ul> 34 <ul>
33 <li><a href="docs/zuul/">Zuul</a></li> 35 <li><a href="docs/zuul/">Zuul</a></li>
34 <li><a href="docs/nodepool">Nodepool</a></li> 36 <li><a href="docs/nodepool">Nodepool</a></li>
35 <li><a href="docs/zuul-jobs">Zuul Jobs</a></li> 37 <li><a href="docs/zuul-jobs">Zuul Jobs</a></li>
36 <li><a href="docs/zuul-base-jobs">Base Jobs</a></li> 38 <li><a href="docs/zuul-base-jobs">Base Jobs</a></li>
37 </ul> 39 </ul>
38 </li> 40 </li>
39 </ul> 41 </ul>