Better mobile nav

config.toml

@@ -21,7 +21,6 @@ nav = [
 	{title = "Index", path = "/"},
 	{title = "About", path = "/about/"},
 	{title = "Search", path = "/posts/"},
-	{title = "Categories", path = "/categories/", mobile_only = true}
 ]
 latest_posts_count = 3
 repository_url = "https://git.0x45.cz/em/em.0x45.cz"

sass/style.scss

@@ -102,7 +102,6 @@ nav {
 				text-decoration: none;
 			}
 		}
-		li.mobile-only { display: none }
 	}
 }
 
@@ -216,19 +215,21 @@ a {
 
 	.grid { grid-template-columns: auto }
 
+	header { margin-bottom: 0 }
+
 	nav {
 		position: initial;
+		margin-bottom: 1rem;
 		ul { display: none }
 		ul.main {
 			display: flex;
 			justify-content: center;
 			flex-wrap: wrap;
+			border: 1px solid #43494c;
+			padding: .25rem 0;
 		}
-		ul li.mobile-only { display: list-item }
 		span.title { display: none }
 	}
-
-	header, nav { margin-bottom: 3rem }
 }
 
 @media (prefers-color-scheme: dark) {

templates/index.html

@@ -26,11 +26,7 @@
 			<span class="title">Navigation</span>
 			<ul class="main">
 				{% for item in config.extra.nav %}
-					<li
+					<li><a href="{{ get_url(path=item.path, trailing_slash=true) }}">{{ item.title }}</a></li>
-						{% if item.mobile_only %}
-							class="mobile-only"
-						{% endif %}
-					><a href="{{ get_url(path=item.path, trailing_slash=true) }}">{{ item.title }}</a></li>
 				{% endfor %}
 			</ul>
 			<span class="title">Categories</span>