Improve and release menu styling.

2 files changed, 41 insertions, 68 deletions

diff --git a/style.scss b/style.scss
index ac7a92a..79006db 100644
--- a/style.scss
+++ b/style.scss
@@ -158,7 +158,6 @@ body {
 	margin: 0;
 	padding: 1.5em 0;
 	background-color: lightblue;
-	text-align: center;
 	text-transform: uppercase;
 	letter-spacing: 1px;
 //	position: absolute;
@@ -176,25 +175,54 @@ body {
 }
 
 .topbar p {
-	float: left;
 	margin-top: 0;
 	margin-bottom: 0;
 }
 
-.topbar a {
-	font-weight: bold;
-	&:hover {
-		text-decoration: none;
-	}
-}
-
+// main menu
 .topbar ul {
-	@include inline-block-list(20px);
-}
-
-.topbar li {
+	@include inline-block-list;
+	position: absolute;
+	top: 6.25em;
+	height: 4em;
+	width: 100%;
 	font-size: 1.25em;
 	line-height: 2em;
+	text-align: center;
+	li {
+		a,
+		.selflink {
+			@include inline-block;
+			width: 8em;
+			padding: 1em .5em;
+			background-color: #6699cc;
+			color: white;
+			font-weight: bold;
+			&:hover {
+				background-color: lightblue;
+				color: #336699;
+				text-decoration: none;
+			}
+		}
+	}
+	@media screen and (max-width: 480px) {
+		top: 9em;
+		font-size: inherit;
+	}
+	@media screen and (min-width: 701px) {
+		right: 6em;
+		width: auto;
+		li {
+			padding-left: .2em;
+			padding-right: .2em;
+			text-align: center;
+			a,
+			.selflink {
+				width: 10em;
+				padding: 1em;
+			}
+		}
+	}
 }
 
 .topbar img {
diff --git a/test.scss b/test.scss
index e3ffb50..e3a02e1 100644
--- a/test.scss
+++ b/test.scss
@@ -1,70 +1,15 @@
 @import 'h5bp/helpers';
 @import 'compass/css3';
 
-.topbar {
-	padding: 1.5em 0;
-	text-align: center;
-	@media screen and (min-width: 701px) {
-		padding: 1.5em 6em 1.5em 0;
-		text-align: right;
-	}
-}
-
 .topbar .footer {
 	background-color: #336699;
 }
 
-.topbar p,
-.topbar .imgframe p {
-	float: left;
-}
-
 //.topbar ul {
 //	display: block;
 //	margin: 3em 0;
 //}
 
-.topbar ul {
-	position: relative;
-	top: 1.8em;
-	clear: left;
-	@media screen and (max-width: 480px) {
-		top: 3.2em;
-		font-size: 10px;
-	}
-}
-
-.topbar li {
-	text-align: center;
-}
-
-.topbar ul li a,
-.topbar ul li .selflink {
-	@include inline-block;
-	width: 8em;
-	padding: 1em .5em;
-	background-color: #6699cc;
-	color: white;
-	&:hover {
-		background-color: lightblue;
-		color: #336699;
-	}
-	@media screen and (min-width: 701px) {
-		width: 10em;
-		padding: 1em;
-	}
-}
-
-// FIXME: change topbar inline-block-list padding instead
-.topbar ul li {
-	padding-left: 0;
-	padding-right: 0;
-	@media screen and (min-width: 701px) {
-		padding-left: .2em;
-		padding-right: .2em;
-	}
-}
-
 #content {
 	width: 96%;
 	max-width: none;