Add current page indicators to navigation links

Author: TorstenDittmann

apps/docs/install.html

@@ -1,4 +1,4 @@
-{{#> base title="launch.css" }}
+{{#> base title="launch.css" isInstallPage=true }}
 <main>
 	<section id="getting-started">
 		<h2>Installation</h2>

apps/docs/partials/base.hbs

@@ -13,8 +13,8 @@
 			<nav hx-boost="true" preload="mouseover">
 				<a href="/">launch.css</a>
 				<menu>
-					<li><a href="/install.html">Install</a></li>
-					<li><a href="/docs.html">Examples</a></li>
+					<li><a href="/install.html" {{#if isInstallPage}}aria-current="page"{{/if}}>Install</a></li>
+					<li><a href="/docs.html" {{#if isDocsPage}}aria-current="page"{{/if}}>Examples</a></li>
 					<li><a role="button" href="https://github.com/torstendittmann/launch-css">GitHub</a></li>
 				</menu>
 			</nav>

packages/main/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "launch.css",
 	"type": "module",
-	"version": "1.0.32",
+	"version": "1.0.33",
 	"description": "A classless CSS framework built for speed. Style your website later—build it now.",
 	"homepage": "https://launch-css.dev",
 	"main": "dist/index.css",

packages/main/src/_global.scss

@@ -1,3 +1,6 @@
+@use "sass:map";
+@use "./partials/breakpoints";
+
 html {
 	background-color: var(--background);
 	color: var(--color);
@@ -9,3 +12,12 @@ html {
 	outline-color: var(--color);
 	border-color: var(--border);
 }
+
+@media (max-width: map.get(
+		breakpoints.$breakpoints,
+		"small"
+	)) {
+	body {
+		/* margin: 1rem; */
+	}
+}

packages/main/src/layouts/_website.scss

@@ -52,6 +52,10 @@
 						&:not(:hover) {
 							text-decoration: none;
 						}
+
+						&[aria-current="page"] {
+							text-decoration: underline;
+						}
 					}
 				}
 			}