Update header bars to include BYU font, new BYU header logo

byuweb · Nov 18, 2013 · 94b7652 · 94b7652
1 parent 50531d1
commit 94b7652
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 29 deletions.
diff --git a/css/base.css b/css/base.css
diff --git a/css/byu-header-bar.css b/css/byu-header-bar.css
diff --git a/pageheader5.html b/pageheader5.html
@@ -12,6 +12,8 @@
     <meta name="viewport" content="width=device-width, , initial-scale=1">
     <!-- Place favicon.ico and apple-touch-icon.png in the root directory-->
     <link rel="shortcut icon" href="favicon.ico">
+    <!-- Leave this style sheet as is to enable Requiem (official BYU font)-->
+    <link rel="stylesheet" href="//cloud.typography.com/75214/688502/css/fonts.css">
     <!-- Incorporate these styles into your stylesheet.-->
     <link rel="stylesheet" href="css/byu-header-bar.css">
     <!-- Modernizr not required, but SVG support helpful.-->

diff --git a/src/jade/pageheader5.html.jade b/src/jade/pageheader5.html.jade
@@ -13,6 +13,9 @@ block head
 		// Place favicon.ico and apple-touch-icon.png in the root directory
 		link(rel='shortcut icon', href='favicon.ico')
 
+		// Leave this style sheet as is to enable Requiem (official BYU font)
+		link(rel="stylesheet", href="//cloud.typography.com/75214/688502/css/fonts.css")
+
 		// Incorporate these styles into your stylesheet.
 		link(rel="stylesheet", href="css/byu-header-bar.css")
 

diff --git a/src/sass/base.scss b/src/sass/base.scss
@@ -104,9 +104,9 @@ a {
     display: inline-block;
     height: 26px;
     width: 70px;
-    background: transparent url($asset-base + 'img/byu-logo-header-sm.png') 0px 0px no-repeat;
+    background: transparent url($asset-base + 'img/byu-logo-header.png') 0px 0px no-repeat;
     .svg & {
-      background-image: url($asset-base + 'img/byu-logo-header-sm.svg');
+      background-image: url($asset-base + 'img/byu-logo-header.svg');
     }
   }
 

diff --git a/src/sass/byu-header-bar.scss b/src/sass/byu-header-bar.scss
@@ -43,10 +43,10 @@ html, body {
     @include ir();
     display: inline-block;
     height: 26px;
-    width: 90px;
-    background: transparent url($asset-base + "img/byu-logo-sm.png") 0px 0px no-repeat;
+    width: 70px;
+    background: transparent url($asset-base + "img/byu-logo-header.png") 0px 0px no-repeat;
     .svg & {
-      background-image: url($asset-base + "img/byu-logo-sm.svg");
+      background-image: url($asset-base + "img/byu-logo-header.svg");
     }
   }
 
@@ -57,19 +57,18 @@ html, body {
   }
 
   a.parentlink {
-    font-family: "DroidSerif","CreteRound","Palatino","DroidSerif","Droid Serif",Georgia,serif;
+    font-weight: normal;
     text-shadow: 0 0 6px rgba(0,25,72,0.65);
     text-decoration: none;
     text-transform: uppercase;
-    font-size: 15px;
+    font-size: 14px;
     display: inline-block;
     padding: 6px 8px 2px;
-    color: #d1e4f6;
+    color: $blue9;
     line-height: 1.2;
-    height: 26px;
     vertical-align: top;
     &:hover {
-      color: #ffe;
+      color: #fff;
     }
   }
 

diff --git a/src/sass/responsive/_byu-bar.scss b/src/sass/responsive/_byu-bar.scss
@@ -18,7 +18,7 @@ $byubarSearchHeight: 27px;
 	white-space: nowrap;
 
 	.svg & {
-		background-image: url($asset-base + '/img/byu-header-bg.svg'); 
+		background-image: url($asset-base + '/img/byu-header-bg.svg');
 	}
 
 	h2 {
@@ -31,28 +31,27 @@ $byubarSearchHeight: 27px;
 	}
 
 	a.byu {
-		background-image: url($asset-base + '/img/byu-logo.png');
+		background-image: url($asset-base + '/img/byu-logo-header.png');
+		width: 70px;
 	    .svg & {
-	      background-image: url($asset-base + '/img/byu-logo.svg');
+	      background-image: url($asset-base + '/img/byu-logo-header.svg');
 	    }
 	}
 
-	a.byulink {
-		margin-left: 6px;
-	}
-
 	a.parentlink {
+		font-family: $byu-font-stack;
 		width: 100%;
 		white-space: nowrap;
 		display: block;
 		position: absolute;
 		width: 100%;
 		top: 0;
 		left: 0;
-		padding-left: 98px;
+		padding-left: 73px;
 		padding-right: 6px;
 		overflow: hidden;
 		text-overflow: ellipsis;
+		letter-spacing: 2px;
 		@include box-sizing(border-box);
 	}
 
@@ -74,7 +73,7 @@ $byubarSearchHeight: 27px;
 		position: absolute;
 		top: 4px;
     	right: 6px;
-   	    width: 40%;
+   	    width: 60%;
    	    min-width: 120px;
    	    max-width: 400px;
 	}
@@ -102,32 +101,42 @@ $byubarSearchHeight: 27px;
 
 
 
-
 @media all and (min-width:400px) {
 
-	#byu-bar a.byu { width:345px; }
+	#byu-bar {
+		a.byu { width:350px; }
+		#search-container { width: 75% }
+	}
 
 	#byu-bar.search,
 	#byu-bar.button {
 		a.byu {
-			width: 80px;
+			width: 70px;
 		}
 	}
 
 }
 
 @media all and (min-width:500px) {
-	#byu-bar.button a.byu { width:345px; }
-	#byu-bar.search.button a.byu { width: 80px; }
+	#byu-bar.button a.byu { width:350px; }
+	#byu-bar.search.button a.byu { width: 70px; }
 }
 
 @media all and (min-width:600px) {
-	#byu-bar.search a.byu { width:345px; }
-	#byu-bar.search.button a.byu { width: 80px; }
+	#byu-bar.search {
+		a.byu { width:350px; }
+		#search-container { width: 40% }
+	}
+	#byu-bar.search.button {
+		a.byu { width: 70px; }
+		#search-container { width: 35% }
+	}
 }
 
 @media all and (min-width:720px) {
-	#byu-bar.search.button a.byu { width: 345px; }
+	#byu-bar.search.button {
+		a.byu { width: 350px; }
+	}
 }