Make nav better on narrower viewports. Closes #44

themes/static-kalbag/static/css/style.css

@@ -455,34 +455,39 @@ figcaption, .site-footer p, .site-footer small, .note {
 .navigation-menu ul {
 	background: hsla(var(--tab-five), 0.1);
 	display: flex;
-	flex-direction: row;
     flex-wrap: wrap;
-	justify-content: center;
-	align-content: stretch;
-	align-items: stretch;
+	grid-template-columns: repeat(7, 1fr);
 	list-style-type: none;
 	margin: 0;
-	padding: 0;
+	padding: 0 0 0.5em 0.5em;
 }
 
-.navigation-menu ul li {
-	background: hsl(var(--secondary-bg));
+@media screen and (min-width: 37em) {
+	.navigation-menu ul {
+		/* 7 = number of columns = number of links in nav */
+		display: grid;
+		grid-template-columns: repeat(7, auto);
+		padding: 0;
+	}
 }
 
 .navigation-menu ul a {
+	border-radius: 0.75em;
 	display: block;
-	padding: calc(var(--layout-unit)/3) var(--layout-unit);
+	margin: 0.5em 0.5em 0 0;
+	padding: calc(var(--layout-unit)/3) calc(var(--layout-unit)/2);
 	text-align: center;
 	text-decoration: none;
 }
 
-@media screen and (min-width: 35em) {
+@media screen and (min-width: 37em) {
 	.navigation-menu ul a {
-		padding: calc(var(--layout-unit)/3) var(--layout-unit);
+		border-radius: 0;
+		display: block;
+		margin: 0;
 	}
 }
 
-
 /* set active navigation link background colour */
 .navigation-menu li.active a, body.blog .navigation-menu a[href="/posts/"], body.latest .navigation-menu a[href="/latest/"] {
 	background: rgba(255,255,255,0.85);