config.toml

@@ -21,6 +21,7 @@ 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,6 +102,7 @@ nav {
 				text-decoration: none;
 			}
 		}
+		li.mobile-only { display: none }
 	}
 }
 
@@ -215,21 +216,19 @@ 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,7 +26,11 @@
 			<span class="title">Navigation</span>
 			<ul class="main">
 				{% for item in config.extra.nav %}
-					<li><a href="{{ get_url(path=item.path, trailing_slash=true) }}">{{ item.title }}</a></li>
+					<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>