Make the header look nice, more like the under-construction page.

1 files changed, 23 insertions, 13 deletions

diff --git a/style.scss b/style.scss
index 1cbb5b8..bb767c6 100644
--- a/style.scss
+++ b/style.scss
@@ -35,29 +35,36 @@ $light-blue     : #1E90FF;
 body {
 	background-color: $background-blue;		
 	#page {
-		box-shadow: 0 .1em 0 #AAAAFF inset;
+		$border-width: 0.1em;
 		border: {
 			style: solid;
-			width: 0.1em;
-			color: #000099;
+			width: $border-width;
+			color: black;
 			radius: 2em 2em 0 0;
 		}
 		header#branding {
-			border: none;
+			border: none;/* override inherit from twentyeleven */
 			hgroup {
-				margin: 0;
-				
-				min-height: 175px;
+				margin: -$border-width;
+				margin-bottom: 0;
+				border: {
+					style: solid;
+					width: $border-width;
+					color: #000099;
+					radius: 2em 2em 0 0;
+					bottom: none
+				}
+
+				overflow: hidden;
+				box-shadow: 0 .15em 0 #AAAAFF inset;
+				height: 175px;
+				padding: 25px 50% 0 3em;
 				background: {
-					//color: $background-blue;
+					color: $light-blue;
 					image: url('img/swoosh.png');
 					repeat: no-repeat;
 					position: right bottom;
 				}
-				
-				padding: 2em 50% 0 3em;
-				overflow: hidden;
-				/* border: solid 1px red; */
 				a {
 					text-decoration: inherit;
 					color: inherit;
@@ -82,8 +89,11 @@ body {
 		}
 		#access {
 			box-shadow: none;
-			border-top: solid 0.2em $yellow;
+			border-top: solid 0.3em $yellow;
 			@include gradient($light-blue, $highlight-blue);
+			li:hover > a, a:focus {
+				@include gradient($yellow, darken($yellow, 10%));
+			}
 		}
 	}	
 }