Browse Source

Add logo and move menu to top right

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

Change-Id: I527b7c39ea9237ff528dd9fca5b4e11254f2cdea
changes/09/565909/3
James E. Blair 1 year ago
parent
commit
f2d3d40106

+ 34
- 52
www/assets/css/main.css View File

@@ -1414,6 +1414,10 @@ em, i {
1414 1414
 p, ul, ol, dl, table, blockquote {
1415 1415
   margin: 0 0 2em 0; }
1416 1416
 
1417
+#logo {
1418
+  height: 1em;
1419
+  margin-left: 0.75em; }
1420
+
1417 1421
 h1, h2, h3, h4, h5, h6 {
1418 1422
   color: inherit;
1419 1423
   font-weight: 600;
@@ -1769,15 +1773,16 @@ input[type="button"],
1769 1773
 /* Header */
1770 1774
 #header {
1771 1775
   text-align: center;
1772
-  padding: 3em 0 0 0;
1776
+  padding: 2em 0 0 0;
1773 1777
   background-color: #fff;
1774 1778
   background-image: url("images/bg02.png"), url("images/bg02.png"), url("images/bg01.png");
1775 1779
   background-position: top left,					top left,					top left;
1776 1780
   background-size: 100% 6em,					100% 6em,					auto;
1777 1781
   background-repeat: no-repeat,					no-repeat,					repeat; }
1778 1782
   #header h1 {
1779
-    padding: 0 0 2.75em 0;
1780
-    margin: 0; }
1783
+    padding: 0 0 2em 0;
1784
+    margin: 0;
1785
+    text-align: left; }
1781 1786
     #header h1 a {
1782 1787
       font-size: 4em;
1783 1788
       letter-spacing: -0.025em;
@@ -1785,19 +1790,10 @@ input[type="button"],
1785 1790
 
1786 1791
 #nav {
1787 1792
   cursor: default;
1788
-  background-color: #333;
1789
-  background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), url("images/bg01.png");
1790
-  background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), url("images/bg01.png");
1791
-  background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), url("images/bg01.png");
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"); }
1793
+  padding: 0 2.75em 0 0;
1794
+  position: absolute;
1795
+  right: 0;
1796
+  top: 0; }
1801 1797
   #nav > ul {
1802 1798
     margin: 0; }
1803 1799
     #nav > ul > li {
@@ -1805,48 +1801,35 @@ input[type="button"],
1805 1801
       display: inline-block;
1806 1802
       margin-left: 1em; }
1807 1803
       #nav > ul > li a {
1808
-        color: #c0c0c0;
1804
+        color: #071d49;
1809 1805
         text-decoration: none;
1806
+        font-weight: 600;
1810 1807
         border: 0;
1811 1808
         display: block;
1812
-        padding: 1.5em 0.5em 1.35em 0.5em; }
1809
+        padding: 2em 0.5em 0.5em 0.5em; }
1813 1810
       #nav > ul > li:first-child {
1814 1811
         margin-left: 0; }
1815 1812
       #nav > ul > li:hover a {
1816
-        color: #fff; }
1817
-      #nav > ul > li.current {
1818
-        font-weight: 600; }
1819
-        #nav > ul > li.current:before {
1820
-          -moz-transform: rotateZ(45deg);
1821
-          -webkit-transform: rotateZ(45deg);
1822
-          -ms-transform: rotateZ(45deg);
1823
-          transform: rotateZ(45deg);
1824
-          width: 0.75em;
1825
-          height: 0.75em;
1826
-          content: '';
1827
-          display: block;
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; }
1813
+        color: #41b6e6; }
1814
+      #nav > ul > li.current:before {
1815
+        width: 100%;
1816
+        height: 0.15em;
1817
+        content: '';
1818
+        display: block;
1819
+        position: absolute;
1820
+        bottom: 0;
1821
+        background-color: #071d49;
1822
+        background-image: url("images/bg01.png"); }
1823
+      #nav > ul > li.current a {
1824
+        color: #071d49; }
1836 1825
       #nav > ul > li.active a {
1837
-        color: #fff; }
1838
-      #nav > ul > li.active.current:before {
1839
-        opacity: 0; }
1826
+        color: #41b6e6; }
1840 1827
       #nav > ul > li > ul {
1841 1828
         display: none; }
1842 1829
 
1843 1830
 /* Dropotron */
1844 1831
 .dropotron {
1845
-  background-color: #333;
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");
1832
+  background-color: white;
1850 1833
   border-radius: 5px;
1851 1834
   color: #fff;
1852 1835
   min-width: 10em;
@@ -1857,11 +1840,12 @@ input[type="button"],
1857 1840
     line-height: 2em;
1858 1841
     padding: 0 1.1em 0 1em; }
1859 1842
     .dropotron > li > a {
1860
-      color: #c0c0c0;
1843
+      color: #071d49;
1861 1844
       text-decoration: none;
1845
+      font-weight: 600;
1862 1846
       border: 0; }
1863 1847
     .dropotron > li.active > a, .dropotron > li:hover > a {
1864
-      color: #fff; }
1848
+      color: #41b6e6; }
1865 1849
   .dropotron.level-0 {
1866 1850
     border-radius: 0 0 5px 5px;
1867 1851
     font-size: 0.9em;
@@ -1987,9 +1971,9 @@ input[type="button"],
1987 1971
 
1988 1972
   /* Header */
1989 1973
   #header {
1990
-    padding: 2em 0 0 0; }
1974
+    padding: 1em 0 0 0; }
1991 1975
     #header h1 {
1992
-      padding: 0 0 1.75em 0; }
1976
+      padding: 0 0 1em 0; }
1993 1977
 
1994 1978
   /* Banner */
1995 1979
   #banner {
@@ -2322,5 +2306,3 @@ input[type="button"],
2322 2306
   #footer {
2323 2307
     padding: 2em 20px;
2324 2308
     text-align: left; } }
2325
-
2326
-/*# sourceMappingURL=main.css.map */

+ 2
- 2
www/assets/js/main.js View File

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

+ 3
- 0
www/assets/sass/libs/_vars.scss View File

@@ -26,6 +26,9 @@
26 26
 		fg-light: #999,
27 27
 		border: #e0e0e0,
28 28
 
29
+		light-blue: #41b6e6,
30
+		dark-blue: #071d49,
31
+
29 32
 		accent: (
30 33
 			bg: #37c0fb,
31 34
 			fg: #fff

+ 28
- 40
www/assets/sass/main.scss View File

@@ -103,6 +103,11 @@
103 103
 		margin: 0 0 2em 0;
104 104
 	}
105 105
 
106
+	#logo {
107
+	        height: 1em;
108
+		margin-left: 0.75em;
109
+	}
110
+
106 111
 	h1, h2, h3, h4, h5, h6 {
107 112
 		color: inherit;
108 113
 		font-weight: 600;
@@ -565,7 +570,7 @@
565 570
 
566 571
 	#header {
567 572
 		text-align: center;
568
-		padding: 3em 0 0 0;
573
+		padding: 2em 0 0 0;
569 574
 		background-color: #fff;
570 575
 		background-image:			url('images/bg02.png'),		url('images/bg02.png'),		url('images/bg01.png');
571 576
 		background-position:		top left,					top left,					top left;
@@ -573,8 +578,9 @@
573 578
 		background-repeat:			no-repeat,					no-repeat,					repeat;
574 579
 
575 580
 		h1 {
576
-			padding: 0 0 2.75em 0;
581
+			padding: 0 0 2em 0;
577 582
 			margin: 0;
583
+			text-align: left;
578 584
 
579 585
 			a {
580 586
 				font-size: 4em;
@@ -586,18 +592,10 @@
586 592
 
587 593
 	#nav {
588 594
 		cursor: default;
589
-		background-color: #333;
590
-		@include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3))', 'url("images/bg01.png")'));
591
-		padding: 0;
592
-
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
-		}
595
+		padding: 0 2.75em 0 0;
596
+		position: absolute;
597
+		right: 0;
598
+		top: 0;
601 599
 
602 600
 		> ul {
603 601
 			margin: 0;
@@ -608,11 +606,12 @@
608 606
 				margin-left: 1em;
609 607
 
610 608
 				a {
611
-					color: #c0c0c0;
609
+					color: _palette(dark-blue);
612 610
 					text-decoration: none;
611
+					font-weight: 600;
613 612
 					border: 0;
614 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 617
 				&:first-child {
@@ -621,41 +620,30 @@
621 620
 
622 621
 				&:hover {
623 622
 					a {
624
-						color: #fff;
623
+						color: _palette(light-blue);
625 624
 					}
626 625
 				}
627 626
 
628 627
 				&.current {
629
-					font-weight: 600;
630
-
631 628
 					&:before {
632
-						@include vendor('transform', 'rotateZ(45deg)');
633
-						width: 0.75em;
634
-						height: 0.75em;
629
+						width: 100%;
630
+						height: 0.15em;
635 631
 						content: '';
636 632
 						display: block;
637 633
 						position: absolute;
638
-						bottom: -0.5em;
639
-						left: 50%;
640
-						margin-left: -0.375em;
641
-						background-color: _palette(accent, bg);
634
+						bottom: 0;
635
+						background-color: _palette(dark-blue);
642 636
 						background-image: url("images/bg01.png");
643 637
 					}
644 638
 
645 639
 					a {
646
-						color: #fff;
640
+						color: _palette(dark-blue);
647 641
 					}
648 642
 				}
649 643
 
650 644
 				&.active {
651 645
 					a {
652
-						color: #fff;
653
-					}
654
-
655
-					&.current {
656
-						&:before {
657
-							opacity: 0;
658
-						}
646
+						color: _palette(light-blue);
659 647
 					}
660 648
 				}
661 649
 
@@ -669,8 +657,7 @@
669 657
 /* Dropotron */
670 658
 
671 659
 	.dropotron {
672
-		background-color: #333;
673
-		@include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.3), rgba(0,0,0,0))', 'url("images/bg01.png")'));
660
+		background-color: white;
674 661
 		border-radius: _size(radius);
675 662
 		color: #fff;
676 663
 		min-width: 10em;
@@ -683,15 +670,16 @@
683 670
 			padding: 0 1.1em 0 1em;
684 671
 
685 672
 			> a {
686
-				color: #c0c0c0;
673
+				color: _palette(dark-blue);
687 674
 				text-decoration: none;
675
+				font-weight: 600;
688 676
 				border: 0;
689 677
 			}
690 678
 
691 679
 			&.active,
692 680
 			&:hover {
693 681
 				> a {
694
-					color: #fff;
682
+					color: _palette(light-blue);
695 683
 				}
696 684
 			}
697 685
 		}
@@ -897,10 +885,10 @@
897 885
 		/* Header */
898 886
 
899 887
 			#header {
900
-				padding: 2em 0 0 0;
888
+				padding: 1em 0 0 0;
901 889
 
902 890
 				h1 {
903
-					padding: 0 0 1.75em 0;
891
+					padding: 0 0 1em 0;
904 892
 				}
905 893
 			}
906 894
 

+ 5
- 3
www/docs/index.html View File

@@ -21,14 +21,16 @@
21 21
         <div id="header">
22 22
 
23 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 28
           <!-- Nav -->
27 29
             <nav id="nav">
28 30
               <ul>
29 31
                 <li><a href="/">Home</a></li>
30 32
                 <li class="current">
31
-                  <a href=".">Docs</a>
33
+                  <a href=".">Documentation</a>
32 34
                   <ul>
33 35
                     <li><a href="zuul/">Zuul</a></li>
34 36
                     <li><a href="nodepool/">Nodepool</a></li>
@@ -109,7 +111,7 @@
109 111
           <!-- Copyright -->
110 112
             <div class="copyright">
111 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 115
               </ul>
114 116
             </div>
115 117
 

+ 22
- 0
www/images/logo.svg View File

@@ -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>

+ 5
- 3
www/index.html View File

@@ -21,19 +21,21 @@
21 21
         <div id="header">
22 22
 
23 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 28
           <!-- Nav -->
27 29
             <nav id="nav">
28 30
               <ul>
29 31
                 <li class="current"><a href="index.html">Home</a></li>
30 32
                 <li>
31
-                  <a href="docs/">Docs</a>
33
+                  <a href="docs/">Documentation</a>
32 34
                   <ul>
33 35
                     <li><a href="docs/zuul/">Zuul</a></li>
34 36
                     <li><a href="docs/nodepool">Nodepool</a></li>
35 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 39
                   </ul>
38 40
                 </li>
39 41
               </ul>

Loading…
Cancel
Save