Update nav menu css

3 files changed, 37 insertions, 40 deletions

diff --git a/assets/base.css b/assets/base.css
index b1345da..cb62dec 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -74,14 +74,6 @@
 	--br_violet: #825dc0;
 }
 
-#themes {
-	background-color: var(--bg-0);
-	border: none;
-	color: var(--fg-1);
-	font-size: 0.9em;
-	padding: 14px 16px;
-}
-
 * {
 	box-sizing: border-box;
 }
@@ -138,13 +130,6 @@ ul li {
 h1, h2, h3, h4, h5 {
 	font-family: open, serif;
 }
-@media only screen and (min-width: 60rem) {
-	body {
-		max-width:60rem;
-		margin-left: auto;
-		margin-right: auto;
-	}
-}
 .fullwidth {
 	width: 100%;
 }
@@ -159,12 +144,10 @@ a {
 a:visited {
 	color: var(--orange);
 }
-a:hover {
-	color: var(--red);
-}
 h1,
 body header nav ul li a,
-body header nav ul li a:visited {
+body header nav ul li a:visited,
+a:hover {
 	color: var(--red);
 }
 h2, h3, h4, h5, h6 {
diff --git a/assets/header.css b/assets/header.css
index d4091be..94d3ca9 100644
--- a/assets/header.css
+++ b/assets/header.css
@@ -1,40 +1,47 @@
 header {
 	background-color: var(--bg-0);
 }
-header nav ul {
+header nav {
+	align-items: center;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+}
+header nav ol {
 	list-style-type: none;
 	margin: 0;
 	padding: 0;
-	overflow: hidden;
-	font-size: 1.25rem;
 }
-header nav ul li {
-	display: inline;
-	float: right;
-	margin-bottom: 0;
-}
-header nav ul li a {
+header nav ol li a {
 	display: block;
+	font-size: 1.25rem;
+	padding: 4px 16px 14px 16px;
 	text-align: center;
-	padding: 14px 16px;
 	text-decoration: none;
 }
-header nav ul li a:hover {
+header nav ol li a:hover {
 	background-color: var(--bg-1);
 }
+#nav-menu {
+	align-items: baseline;
+	display: flex;
+	flex-wrap: nowrap;
+}
+#nav-menu li {
+	flex-direction: column;
+}
 .nav-menu-active {
 	background-color: var(--bg-1);
 }
-.nav-menu-title {
-	float: left;
-	text-transform: uppercase;
+#title {
 	font-weight: 700;
-	margin-right: 4px;
-}
-.nav-menu-margin-left {
-	margin-left: 4px;
+	text-transform: uppercase;
 }
-.nav-menu-margins-left-and-right {
-	margin-left: 4px;
-	margin-right: 4px;
+#themes {
+	background-color: var(--bg-0);
+	border: none;
+	color: var(--fg-1);
+	font-size: 1.25rem;
+	margin: 0;
+	padding: 0;
 }
diff --git a/assets/responsive.css b/assets/responsive.css
new file mode 100644
index 0000000..d192217
--- /dev/null
+++ b/assets/responsive.css
@@ -0,0 +1,7 @@
+@media only screen and (min-width: 60rem) {
+	body {
+		max-width:60rem;
+		margin-left: auto;
+		margin-right: auto;
+	}
+}