Improve and release menu styling.

1 files changed, 41 insertions, 13 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 {