Get rid of the mobile menu

It wasn't as good as I would like it to be

sass/_nav.scss

@@ -6,7 +6,7 @@
 	backdrop-filter: var(--blur);
 	margin: 1rem auto;
 	box-shadow: var(--edge-highlight), 0px 12px 24px -16px rgba(0, 0, 0, 0.5);
-	border-radius: 999px;
+	border-radius: 26px;
 	background-color: var(--nav-bg);
 	max-width: min(var(--container-width), 90%);
 
@@ -29,40 +29,27 @@
 		li {
 			display: inline-flex;
 			list-style: none;
-
-			@media only screen and (max-width: 480px) {
-				&.link {
-					display: none;
-				}
-			}
 		}
 
-		a,
+		a {
-		summary {
 			position: relative;
 			transition-duration: var(--transition);
 			transition-property: box-shadow, background-color, color, transform;
 			border-radius: 999px;
 			padding: 0.325rem 0.75rem;
 			color: var(--fg-muted-4);
+			text-decoration: none;
 
 			&:hover {
 				box-shadow: var(--edge-highlight);
 				background-color: var(--fg-muted-1);
 				color: var(--primary-color);
+				text-decoration: none;
 			}
 
 			&:active {
 				transform: scale(var(--active));
 			}
-		}
-
-		a {
-			text-decoration: none;
-
-			&:hover {
-				text-decoration: none;
-			}
 
 			&.active {
 				&::before {
@@ -130,109 +117,27 @@
 			}
 		}
 
-		#feed a,
+		#feed a {
-		#dropdown summary {
 			padding: 0.325rem 0.625rem;
 
 			&:hover i {
 				background-color: var(--primary-color);
 			}
 
-			span {
-				display: none;
-			}
-		}
-
-		#dropdown {
-			display: none;
-
-			details {
-				position: relative;
-				border-radius: unset;
-				background-color: unset;
-				padding: 0;
-
-				summary {
-					transition-duration: var(--transition);
-					transition-property: box-shadow, background-color, color, transform;
-					border-radius: 999px;
-					background-color: unset;
-					color: var(--fg-muted-4);
-					list-style: none;
-
-					&::marker,
-					&::-webkit-details-marker {
-						display: none;
-					}
-
-					&:hover {
-						box-shadow: var(--edge-highlight);
-						background-color: var(--fg-muted-1);
-						color: var(--primary-color);
-
 			i {
-							background-color: var(--primary-color);
+				$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M1.988 1.988V3c.008.547.453.984 1 .988.004-.004.008-.004.012-.004v.028A8.977 8.977 0 0 1 11.988 13a.991.991 0 0 0 1 .984h1V13h-.004c0-.004 0-.004.004-.008C13.984 7.02 9.184 2.148 3.242 2.02A1.004 1.004 0 0 0 3 1.988v-.004zm0 4V7c.008.547.453.984 1 .988.004-.004.008-.004.012-.004V8a4.985 4.985 0 0 1 4.996 4.844 1.002 1.002 0 0 0 .988 1.145c.008-.005.012-.005.016-.005v.004h.984V13H10c0-3.793-3.047-6.898-6.82-6.992 0-.004-.004-.004-.004-.004A.892.892 0 0 0 3 5.988v-.004zm2 4a1.999 1.999 0 1 0-.002 3.998 1.999 1.999 0 0 0 .002-3.998m0 0'%3E%3C/path%3E%3C/svg%3E");
-						}
+				-webkit-mask-image: $icon;
-					}
-
-					&:active {
-						transform: scale(var(--active));
-					}
-				}
-
-				ul {
-					-webkit-backdrop-filter: var(--blur);
-					position: absolute;
-					left: 50%;
-					transform: translate(-50%, 1rem);
-					z-index: 1;
-					backdrop-filter: var(--blur);
-					box-shadow: var(--edge-highlight), var(--shadow);
-					border-radius: calc(var(--rounded-corner) + 0.25rem);
-					background-color: var(--nav-bg);
-					padding: 0.25rem;
-					text-align: center;
-
-					li {
-						width: 100%;
-
-						a {
-							border-radius: var(--rounded-corner);
-							width: 100%;
-
-							&.active::before {
-								top: 0;
-								border-radius: 0.25rem;
-							}
-						}
-					}
-				}
-			}
-
-			@media only screen and (max-width: 480px) {
-				display: inline-flex;
-			}
-		}
-
-		#feed-icon,
-		#menu-icon {
 				vertical-align: -0.125em;
+				mask-image: $icon;
 				transition: background-color var(--transition);
 				background-color: var(--fg-muted-4);
 				width: 1rem;
 				height: 1rem;
 			}
 
-		#feed-icon {
+			span {
-			$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M1.988 1.988V3c.008.547.453.984 1 .988.004-.004.008-.004.012-.004v.028A8.977 8.977 0 0 1 11.988 13a.991.991 0 0 0 1 .984h1V13h-.004c0-.004 0-.004.004-.008C13.984 7.02 9.184 2.148 3.242 2.02A1.004 1.004 0 0 0 3 1.988v-.004zm0 4V7c.008.547.453.984 1 .988.004-.004.008-.004.012-.004V8a4.985 4.985 0 0 1 4.996 4.844 1.002 1.002 0 0 0 .988 1.145c.008-.005.012-.005.016-.005v.004h.984V13H10c0-3.793-3.047-6.898-6.82-6.992 0-.004-.004-.004-.004-.004A.892.892 0 0 0 3 5.988v-.004zm2 4a1.999 1.999 0 1 0-.002 3.998 1.999 1.999 0 0 0 .002-3.998m0 0'%3E%3C/path%3E%3C/svg%3E");
+				display: none;
-			-webkit-mask-image: $icon;
-			mask-image: $icon;
 			}
-
-		#menu-icon {
-			$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M1 2h14v2H1zm0 5h14v2H1zm0 5h14v2H1zm0 0'/%3E%3C/svg%3E");
-			-webkit-mask-image: $icon;
-			mask-image: $icon;
 		}
 	}
 }

templates/partials/nav.html

@@ -35,42 +35,11 @@
 			{% if config.extra.nav.show_feed %}
 				<li id="feed">
 					<a href="{{ get_url(path=config.feed_filename) | safe }}">
-						<i id="feed-icon" class="icon"></i>
+						<i class="icon"></i>
 						<span>Feed</span>
 					</a>
 				</li>
 			{% endif %}
-			<li id="dropdown">
-				<details>
-					<summary>
-						<i id="menu-icon" class="icon"></i>
-						<span>Menu</span>
-					</summary>
-					<ul>
-						{% for link in config.extra.nav.links %}
-						{%- if link.url is matching('https?://') %}
-							<li>
-								<a href="{{ link.url | safe }}"
-									{% if current_url | default(value='/') | safe == link.url | safe %}
-										class="active"
-									{% endif %}>
-									{{ link.name }}
-								</a>
-							</li>
-						{%- else %}
-							<li>
-								<a href="{{ get_url(path=link.url | safe )}}"
-									{% if current_url | default(value='/') | safe == get_url(path=link.url) | safe %}
-										class="active"
-									{% endif %}>
-									{{ link.name }}
-								</a>
-							</li>
-						{%- endif %}
-					{% endfor %}
-					</ul>
-				</details>
-			</li>
 		</ul>
 	</nav>
 </header>