⚡ 🔤 UI enhancements

docs/components/code.html.js

@@ -31,9 +31,11 @@ ${host} {
 	overflow: auto;
 	border-radius: var(--border-radius);
 	font-family: var(--font-mono);
-	font-size: 0.9rem;
+	font-size: 0.8rem;
 	line-height: 1.5;
 	position: relative;
+	margin-block: 1rem;
+	width: 100%;
 }
 
 /* Light mode overrides to match GitHub-like theme */
@@ -113,8 +115,6 @@ html[data-theme="dark"] ${host} {
 ${host}[data-js=todo] {
 	border: 1px solid var(--border);
 	border-radius: var(--border-radius);
-	margin-bottom: 1.5rem;
-	margin-top: 1rem;
 	padding: 1rem;
 	background-color: var(--code-bg);
 	position: relative;
@@ -137,8 +137,13 @@ ${host}[data-js=todo]::before {
 /* All code blocks should have consistent font and sizing */
 ${host} code {
 	font-family: var(--font-mono);
-	font-size: 0.9rem;
+	font-size: inherit;
 	line-height: 1.5;
+	padding: 0;
+}
+${host} pre {
+	margin-block: 0;
+	font-size: inherit;
 }
 
 /* Ensure line numbers (if added) are styled appropriately */

docs/components/example.html.js

@@ -19,7 +19,7 @@ ${host} .runtime {
 .CodeMirror {
 	height: 100% !important;
 	font-family: var(--font-mono) !important;
-	font-size: 0.95rem !important;
+	font-size: 0.8rem !important;
 	line-height: 1.5 !important;
 }
 

docs/components/pageUtils.html.js

@@ -9,12 +9,13 @@ ${host} {
 	padding-top: 1.5rem;
 	border-top: 1px solid var(--border);
 	gap: 1rem;
+	width: 100%;
 }
 
 ${host} a {
 	display: flex;
 	align-items: center;
-	padding: 0.75rem 1.25rem;
+	padding: 0.5rem 0.75rem;
 	border-radius: var(--border-radius);
 	background-color: var(--primary-dark); /* Darker background for better contrast */
 	color: white;
@@ -59,7 +60,6 @@ ${host} a:only-child {
 
 @media (max-width: 640px) {
 	${host} a {
-		padding: 0.5rem 0.75rem;
 		font-size: 0.9rem;
 	}
 }
@@ -72,7 +72,7 @@ import { el } from "../../index.js";
  * */
 export function h3({ textContent, id }){
 		if(!id) id= "h-"+textContent.toLowerCase().replaceAll(/\s/g, "-").replaceAll(/[^a-z-]/g, "");
-		return el("h3", { id, className: "section-heading" }).append(
+		return el("h3", { id }).append(
 				el("a", {
 						className: "heading-anchor",
 						href: "#"+id,

docs/global.css.js

@@ -1,41 +1,35 @@
 import { styles } from "./ssr.js";
 styles.css`
-/* Modern custom styling with reddish color scheme and high contrast */
 :root {
-	/* Color variables - reddish theme with increased contrast */
+	--primary: #b71c1c;
-	--primary: #b71c1c;       /* Darker red for better contrast on white */
+	--primary-light: #f05545;
-	--primary-light: #f05545; /* Lighter but still contrasting red */
+	--primary-dark: #7f0000;
-	--primary-dark: #7f0000;  /* Very dark red for maximum contrast */
+	--primary-rgb: 183, 28, 28;
-	--primary-rgb: 183, 28, 28; /* RGB values for rgba operations */
+	--secondary: #700037;
-	--secondary: #700037;     /* Darker purple for better contrast */
+	--secondary-light: #ae1357;
-	--secondary-light: #ae1357; /* More saturated magenta for visibility */
+	--secondary-dark: #4a0027;
-	--secondary-dark: #4a0027;  /* Very dark purple */
+	--secondary-rgb: 112, 0, 55;
-	--secondary-rgb: 112, 0, 55; /* RGB values for rgba operations */
 
-	/* Typography */
 	--font-main: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 	--font-mono: 'Fira Code', 'JetBrains Mono', 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
 
-	/* Layout */
+	--body-max-width: 40rem;
-	--body-max-width: 50rem;
+	--sidebar-width: 20rem;
-	--sidebar-width: 16rem;
 	--header-height: 4rem;
 	--border-radius: 0.375rem;
 
-	/* Colors light mode - enhanced contrast */
 	--bg: #ffffff;
 	--bg-sidebar: #fff5f5;
-	--text: #1a1313;          /* Near-black text for high contrast */
+	--text: #1a1313;
-	--text-light: #555050;    /* Darker gray text that meets contrast requirements */
+	--text-light: #555050;
 	--code-bg: #f9f2f2;
-	--code-text: #9a0000;     /* Darker red for code text */
+	--code-text: #9a0000;
 	--border: #d8c0c0;
 	--selection: rgba(183, 28, 28, 0.15);
 	--marked: #b71c1c;
 	--accent: var(--secondary);
 	--shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
 
-	/* Contrast improvements for components */
 	--link-color: #9a0000;
 	--link-hover: #7f0000;
 	--button-text: #ffffff;
@@ -43,32 +37,29 @@ styles.css`
 
 @media (prefers-color-scheme: dark) {
 	:root {
-		--bg: #121212;           /* Pure dark background */
+		--bg: #121212;
-		--bg-sidebar: #1a1212;   /* Slightly lighter sidebar */
+		--bg-sidebar: #1a1212;
-		--text: #ffffff;         /* Pure white text for highest contrast */
+		--text: #ffffff;
-		--text-light: #cccccc;   /* Light gray that still meets contrast requirements */
+		--text-light: #cccccc;
 		--code-bg: #2c2020;
-		--code-text: #ff9e80;    /* Slightly more orange for better visibility */
+		--code-text: #ff9e80;
 		--border: #4d3939;
 		--selection: rgba(255, 99, 71, 0.25);
-		--primary: #b74141;      /* Brighter red for better visibility on dark */
+		--primary: #b74141;
-		--primary-light: #ff867f; /* Even brighter highlight red */
+		--primary-light: #ff867f;
-		--primary-dark: #c62828; /* Darker red that still has good contrast */
+		--primary-dark: #c62828;
-		--secondary: #f02b47;    /* Brighter magenta for better visibility */
+		--secondary: #f02b47;
-		--secondary-light: #ff6090; /* Bright pink with good contrast */
+		--secondary-light: #ff6090;
-		--secondary-dark: #b0003a; /* Darker but still visible pink */
+		--secondary-dark: #b0003a;
 		--accent: var(--secondary);
 
-		/* Contrast improvements for dark mode components */
 		--link-color: #ff5252;
 		--link-hover: #ff867f;
 		--button-text: #ffffff;
 
-		/* Navigation current page - darker for better contrast */
 		--nav-current-bg: #aa2222;
 		--nav-current-text: #ffffff;
 
-		/* RGB values for rgba operations in dark mode */
 		--primary-rgb: 255, 82, 82;
 		--secondary-rgb: 233, 30, 99;
 	}
@@ -131,15 +122,6 @@ html {
 	transform: translateX(0);
 }
 
-@media (prefers-reduced-motion: reduce) {
-	*, *::before, *::after {
-		animation-duration: 0.01ms !important;
-		animation-iteration-count: 1 !important;
-		transition-duration: 0.01ms !important;
-		scroll-behavior: auto !important;
-	}
-}
-
 body {
 	font-family: var(--font-main);
 	background-color: var(--bg);
@@ -163,27 +145,31 @@ body {
 h1, h2, h3, h4, h5, h6 {
 	margin-bottom: 1rem;
 	margin-top: 2rem;
-	font-weight: 700; /* Bolder for better contrast */
+	font-weight: 700;
 	line-height: 1.25;
 	color: var(--text);
 }
 
 h1 {
-	font-size: 2.25rem; /* Slightly larger for better hierarchy */
+	font-size: 2.25rem;
 	margin-top: 0;
-	color: var(--primary-dark); /* Distinctive color for main headings */
+	color: var(--primary-dark);
+}
+h1 > a {
+	font-weight: unset;
+	color: unset;
 }
 
 h2 {
 	font-size: 1.5rem;
-	border-bottom: 2px solid var(--border); /* Thicker border for better visibility */
+	border-bottom: 2px solid var(--border);
 	padding-bottom: 0.5rem;
-	color: var(--primary); /* Color for better hierarchy */
+	color: var(--primary);
 }
 
 h3 {
 	font-size: 1.25rem;
-	color: var(--secondary); /* Different color for tertiary headings */
+	color: var(--secondary);
 }
 
 p {
@@ -192,21 +178,16 @@ p {
 
 a {
 	color: var(--link-color, var(--primary));
-	text-decoration: none;
 	transition: color 0.2s ease;
-	font-weight: 500; /* Slightly bolder for better contrast */
+	font-weight: 500;
-	text-decoration: underline;
 	text-underline-offset: 3px;
 	transition: color 0.2s ease, text-underline-offset 0.2s ease;
 }
-
-/* Ensure visited links maintain high contrast */
 a:visited {
-	color: var(--secondary, #700037);
+	--link-color: var(--secondary, #700037);
 }
-
 a:hover {
-	color: var(--link-hover, var(--primary-light));
+	--link-color: var(--link-hover, var(--primary-light));
 	text-underline-offset: 5px;
 }
 
@@ -252,12 +233,18 @@ body > main {
 	padding: 2rem;
 	max-width: 100%;
 	overflow-x: hidden;
+	display: grid;
+	grid-template-columns:
+	[full-main-start] 1fr
+	[main-start] min(var(--body-max-width), 90%) [main-end]
+	1fr [full-main-end];
 }
 
 body > main > *, body > main slot > * {
-	max-width: calc(var(--body-max-width) - var(--sidebar-width));
+	width: 100%;
-	margin-left: auto;
+	max-width: 100%;
-	margin-right: auto;
+	margin-inline: auto;
+	grid-column: main;
 }
 
 /* Page title with ID anchor for skip link */
@@ -278,24 +265,23 @@ body > main h2, body > main h3 {
 
 body > main h3 {
 	border-left: 3px solid var(--primary);
-	padding-left: 0.75rem;
+	position: relative;
-	margin-left: -0.75rem;
+	left: -1.5rem;
+	padding-inline-start: 1em;
 }
 
 /* Make clickable heading links for better navigation */
-body > main h2 .heading-anchor,
+.heading-anchor {
-body > main h3 .heading-anchor {
 	position: absolute;
 	color: var(--text-light);
-	left: -1rem;
+	left: -2rem;
 	text-decoration: none;
 	font-weight: normal;
 	opacity: 0;
 	transition: opacity 0.2s;
 }
-
+h2:hover .heading-anchor,
-body > main h2:hover .heading-anchor,
+h3:hover .heading-anchor {
-body > main h3:hover .heading-anchor {
 	opacity: 0.8;
 }
 
@@ -303,9 +289,12 @@ body > main h3:hover .heading-anchor {
 	body > main {
 		padding: 1.5rem 1rem;
 	}
-
+	body > main h2, body > main h3 {
-	body > main > *, body > main slot > * {
+		left: 1rem;
-		max-width: 100%;
+		width: calc(100% - 1rem);
+	}
+	.heading-anchor {
+		opacity: 0.4;
 	}
 }
 
@@ -342,7 +331,6 @@ body > main h3:hover .heading-anchor {
 	display: inline-block;
 	width: 1em;
 	height: 1em;
-	margin-right: 0.5rem;
 	vertical-align: -0.125em;
 	stroke-width: 0;
 	stroke: currentColor;

docs/layout/head.html.js

@@ -40,7 +40,9 @@ ${host} .version-badge {
 }
 
 ${host} p {
-	display: none;
+	display: block;
+	font-size: 0.875rem;
+	opacity: 0.9;
 	margin: 0;
 }
 
@@ -53,7 +55,6 @@ ${host} .github-link {
 	padding: 0.375rem 0.75rem;
 	border-radius: var(--border-radius);
 	background-color: rgba(0, 0, 0, 0.2);
-	margin-left: 1rem;
 	text-decoration: none;
 	transition: background-color 0.2s;
 }
@@ -63,14 +64,6 @@ ${host} .github-link:hover {
 	text-decoration: none;
 }
 
-@media (min-width: 768px) {
-	${host} p {
-		display: block;
-		font-size: 0.875rem;
-		opacity: 0.9;
-	}
-}
-
 /* Navigation */
 ${host_nav} {
 	grid-area: sidebar;
@@ -185,7 +178,18 @@ export function header({ info: { href, title, description }, pkg }){
 		// Header section with accessibility support
 		el("header", { role: "banner", className: header.name }).append(
 			el("div", { className: "header-title" }).append(
-				el("h1", pkg.name),
+				el("a", {
+					href: pkg.homepage,
+					className: "github-link",
+					"aria-label": "View on GitHub",
+					target: "_blank",
+					rel: "noopener noreferrer"
+				}).append(
+					el(iconGitHub),
+				),
+				el("h1").append(
+					el("a", { href: pages[0].href, textContent: pkg.name, title: "Go to documentation homepage" }),
+				),
 				el("span", {
 					className: "version-badge",
 					"aria-label": "Version",
@@ -193,16 +197,6 @@ export function header({ info: { href, title, description }, pkg }){
 				})
 			),
 			el("p", description),
-			el("a", {
-				href: pkg.homepage,
-				className: "github-link",
-				"aria-label": "View on GitHub",
-				target: "_blank",
-				rel: "noopener noreferrer"
-			}).append(
-				el(iconGitHub),
-				"GitHub"
-			)
 		),
 
 		// Navigation between pages