Use separator `div instead of ::after on the home button

CHANGELOG.md

@@ -53,6 +53,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Use more fitting cursors in some contexts.
 - Use PNG instead of GIF for comments QR code to reduce download size.
 - Use relative colors for `-bg` color variants.
+- Use separator `div` instead of `::after` on the home button.
 
 ### Removed
 

sass/_nav.scss

@@ -99,30 +99,7 @@
 			}
 		}
 
-		#home {
-			position: relative;
-			margin-inline-end: 0.625rem;
-
-			&::after {
-				position: absolute;
-				top: -0.125rem;
-				right: -0.5rem;
-				background-color: var(--fg-muted-2);
-				width: max(1px, 0.0625em);
-				height: calc(100% + 0.25rem);
-				content: "";
-
-				:root[dir*="rtl"] & {
-					right: unset;
-					left: -0.5rem;
-				}
-
-				@media only screen and (max-width: 480px) {
-					display: none;
-				}
-			}
-
-			a {
+		#home a {
 			color: var(--fg-muted-5);
 			font-weight: 800;
 
@@ -163,8 +140,14 @@
 			}
 		}
 
+		.divider {
+			align-self: stretch;
+			margin: 0 0.25rem;
+			background-color: var(--fg-muted-2);
+			width: max(1px, 0.0625em);
+
 			@media only screen and (max-width: 480px) {
-				margin-inline-end: 0;
+				display: none;
 			}
 		}
 

templates/partials/nav.html

@@ -15,6 +15,7 @@
 					{{- config.title -}}
 				</a>
 			</li>
+			<div class="divider"></div>
 			{%- for link in config.extra.nav.links %}
 				{%- if link.sublinks and link.sublinks | length > 0 -%}
 					<li>