Added mobile navigation.

components/header/header.vue

@@ -159,7 +159,8 @@ async function logout() {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	z-index: 1000; /* make sure shadow shows up above content */
+	position: relative;
+	z-index: 100; /* make sure shadow shows up above content */
 	box-shadow: 0 0 3px var(--shadow-weak-10);
 }
 
@@ -192,6 +193,7 @@ async function logout() {
 
 	&:hover {
 		text-decoration: none;
+		color: var(--primary);
 	}
 }
 
@@ -223,6 +225,10 @@ async function logout() {
 		border: none;
 		margin: 0;
 		background: none;
+
+		&:placeholder-shown {
+			text-overflow: ellipsis;
+		}
 	}
 
 	.search-button {
@@ -321,7 +327,7 @@ async function logout() {
 
 @media(--small) {
 	.search .input {
-		width: 10rem;
+		width: 12rem;
 	}
 }
 
@@ -329,5 +335,18 @@ async function logout() {
 	.nav-list {
 		display: none;
 	}
+
+	.header-section {
+		flex-grow: 1;
+	}
+
+	.search {
+		flex-grow: 1;
+	}
+
+	.search .input {
+		width: 0;
+		flex-grow: 1;
+	}
 }
 </style>