Update header to match hugo style guide changes

- update logo - fix header size - update type and vertical spacing
SutraHsing · Oct 17, 2017 · 09bf47f · 09bf47f
1 parent dd25aff
commit 09bf47f
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 74 deletions.
diff --git a/_includes/topnav.html b/_includes/topnav.html
@@ -1,6 +1,9 @@
 <!-- Mobile Side Navigation -->
 <nav class="mobile_expanded">
 	<div class="close-wrap">
+		<a class="logo" href="https://www.cockroachlabs.com/" title="Cockroach Labs">
+			<img src="{{ 'images/CL_Logo_Horizontal.svg' | relative_url }}" width="100%" alt="Cockroach Labs" />
+		</a>
 		<div class="hamburger">
 			<span></span>
 			<span></span>
@@ -45,7 +48,7 @@
     <div class="container">
         <div class="row">
             <a class="logo" href="https://www.cockroachlabs.com/" title="Cockroach Labs">
-                <img src="{{ 'images/CL_Logo_Horizontal.png' | relative_url }}" width="100%" alt="Cockroach Labs" />
+                <img src="{{ 'images/CL_Logo_Horizontal.svg' | relative_url }}" width="100%" alt="Cockroach Labs" />
             </a>
 
             <nav class="desktop" role="navigation">

diff --git a/css/customstyles.css b/css/customstyles.css
diff --git a/css/customstyles.css.map b/css/customstyles.css.map
diff --git a/css/global/_type.scss b/css/global/_type.scss
@@ -103,6 +103,12 @@
   letter-spacing: 1.5px;
 }
 
+@mixin button-text--heavy--large {
+  @include avenir_h(15px);
+  line-height: 25px;
+  letter-spacing: 1.5px;
+}
+
 @mixin caption {
   @include avenir_r(14px);
   line-height: 20px;

diff --git a/css/layouts/_content.scss b/css/layouts/_content.scss
@@ -4,7 +4,7 @@
 	padding-top: 62px;
 	width: 100%;
 	z-index: 1000;
-	@include groovy(all);
+	// @include groovy(all);
 	@include box-shadow(5px, 0, 4px, 0, rgba(0, 0, 0, 0.1));
 	overflow: auto;
 

diff --git a/css/layouts/_header.scss b/css/layouts/_header.scss
@@ -47,12 +47,10 @@ nav.mobile_expanded {
 	overflow:auto;
 	display: none;
 
-	a:not(.mobile-menu-dropdown__parent-link) {
+	a:not(.mobile-menu-dropdown__parent-link):not(.logo) {
 		border-bottom: 1px solid $cl_gray_medium;
-		@include avenir_h(14px);
-		line-height: 20px;
+		@include button-text--heavy--large;
 		text-transform: uppercase;
-		letter-spacing: 1.5px;
 		width:100%;
 		float:left;
 		color: $cl_blue;
@@ -70,8 +68,7 @@ nav.mobile_expanded {
 	.mobile-menu-dropdown {
 		width: 100%;
 		float: left;
-		@include avenir_h(14px);
-		letter-spacing: 1.5px;
+		@include button-text--heavy--large;
 		color: $cl_blue;
 		text-transform: uppercase;
 		padding: 30px 0 30px 20px;
@@ -84,12 +81,11 @@ nav.mobile_expanded {
 		a:not(.mobile-menu-dropdown__parent-link) {
 			position: relative;
 			display: block;
-			@include avenir_r(14px);
-			line-height: 15px;
+			@include type-caption-3;
 			letter-spacing: normal;
 			text-transform: none;
 			border-bottom: none;
-			margin-top: 25px;
+			margin-top: 15px;
 			padding: 0;
 		}
 
@@ -104,8 +100,9 @@ nav.mobile_expanded {
 	}
 
 	.close-wrap {
-		height: 62px;
+		height: 60px;
 		border-bottom: 1px solid #dadada;
+		padding: 15px 0 0 15px;
 	}
 
 	.hamburger {
@@ -159,48 +156,44 @@ nav.mobile_expanded {
 	}
 }
 
+.logo {
+	width: 180px;
+	margin-top: 3px;
+	float:left;
+	line-height: 20px;
+	font-size: 0;
+
+	@include at-query($screen-sm, $screen-md) {
+		line-height: 23px;
+	}
+
+	@include at-query($min, $screen-lg) {
+		width:209px;
+	}
+}
+
 header {
 	width:100%;
 	float:left;
   padding: 15px;
 	background: #FFFFFF;
   border-bottom: 1px solid $cl_gray_medium;
-	height: 62px;
+	height: 60px;
 
 	// there is just not enough room once we hit tablet
 	@include at-query($min, $screen-sm) {
 		padding: 15px 10px;
 	}
 
 	@include at-query($min, $screen-md) {
-		height: 71px;
+		height: 70px;
 	}
 
 	// return to regular padding when there is space
 	@include at-query($min, $screen-sm + 10px) {
 		padding: 15px;
 	}
 
-	.logo {
-		width: 180px;
-		margin-top: 3px;
-		float:left;
-		line-height: 20px;
-		font-size: 0;
-
-		@include at-query($screen-sm, $screen-md) {
-			line-height: 23px;
-		}
-
-		@include at-query($min, $screen-sm) {
-			width: 150px;
-		}
-
-		@include at-query($min, $screen-lg) {
-			width:209px;
-		}
-	}
-
 	.container {
 		position: relative;
 		margin: 0;
@@ -292,8 +285,7 @@ header {
 					}
 
 					&__info {
-						@include avenir_r(14px);
-						line-height: 20px;
+						@include type-caption-3;
 						color: #4d4d4d;
 						text-transform: none;
 						letter-spacing: normal;

diff --git a/css/layouts/_sidebar.scss b/css/layouts/_sidebar.scss
@@ -24,15 +24,15 @@ body.sidenav-open {
   @include at-query($max, $screen-md) {
     position: fixed;
     left: 0;
-    top: 62px;
+    top: 60px;
     width: 100%;
     z-index: 1001;
     @include groovy(margin-left);
     @include groovy(box-shadow);
   }
 
   @include at-query($min, $screen-md) {
-    top: 71px;
+    top: 70px;
   }
 
   @include at-query($min, $screen-md){