🔤 ui/ux

docs/components/example.html.js

@@ -3,9 +3,8 @@ const host= "."+example.name;
 styles.css`
 ${host} {
 	grid-column: full-main;
-	width: 100%;
-	max-width: calc(9/5 * var(--body-max-width));
-	height: calc(3/5 * var(--body-max-width));
+	width: calc(100% - .75em);
+	height: calc(4/6 * var(--body-max-width));
 	margin: 2rem auto;
 	border-radius: var(--border-radius);
 	box-shadow: var(--shadow);
@@ -26,7 +25,6 @@ ${host} .runtime {
 /* Dark mode styles for CodeMirror */
 .CodeMirror, .CodeMirror-gutters {
 	background: var(--code-bg) !important;
-	border: 1px solid var(--border) !important;
 	color: var(--text) !important;
 }
 

docs/global.css.js

@@ -247,17 +247,16 @@ body > main > *, body > main slot > * {
 }
 
 /* Page title with ID anchor for skip link */
-body > main .page-title {
+h2 {
 	margin-top: 0;
 	border-bottom: 1px solid var(--border);
 	padding-bottom: 0.75rem;
 	margin-bottom: 1.5rem;
 	color: var(--primary);
-	position: relative;
 }
 
 /* Section headings with better visual hierarchy */
-body > main h2, body > main h3 {
+body > main h3, body > main h4 {
 	scroll-margin-top: calc(var(--header-height) + 1rem);
 }
 
@@ -297,33 +296,6 @@ body > main h2, body > main h3 {
 .bad-practice {
 	--practice-color: hsl(340, 82%, 52%); }
 
-.example {
-	border: 1px solid var(--border);
-	border-radius: var(--border-radius);
-	margin: 2rem 0;
-	overflow: hidden;
-	box-shadow: var(--shadow-sm);
-	transition: box-shadow 0.2s;
-}
-
-.example:hover {
-	box-shadow: var(--shadow);
-}
-
-.example-header {
-	background-color: var(--bg-sidebar);
-	padding: 0.75rem 1rem;
-	border-bottom: 1px solid var(--border);
-	font-weight: 600;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}
-
-.example-content {
-	padding: 1.25rem;
-}
-
 /* Icon styling */
 .icon {
 	display: inline-block;

docs/index.html.js

@@ -2,6 +2,7 @@ import { t, T } from "./utils/index.js";
 export const info= {
 	href: "./",
 	title: t`Introduction`,
+	fullTitle: t`Vanilla for flavouring — a full-fledged feast for large projects`,
 	description: t`A lightweight, reactive DOM library for creating dynamic UIs with a declarative syntax`,
 };
 
@@ -26,7 +27,6 @@ const references= {
 export function page({ pkg, info }){
 	const page_id= info.id;
 	return el(simplePage, { info, pkg }).append(
-		el("h2", t`Vanilla for flavouring — a full-fledged feast for large projects`),
 		el("p").append(...T`
 			Welcome to Deka DOM Elements (DDE) — a lightweight library for building dynamic UIs with a
 			declarative syntax that stays close to the native DOM API. DDE gives you powerful reactive

docs/layout/head.html.js

@@ -78,18 +78,19 @@ ${host_nav} a {
 	line-height: 1.2;
 }
 
-${host_nav} a.current,
 ${host_nav} a[aria-current=page] {
 	background-color: hsl(var(--primary-hs), 40%);
 	color: whitesmoke;
 	font-weight: 600;
 	box-shadow: var(--shadow);
+	text-decoration: none;
 }
 
 ${host_nav} a:hover {
 	background-color: hsl(var(--primary-hs), 45%);
 	color: whitesmoke;
 	transform: translateY(-1px);
+	text-decoration: none;
 }
 
 ${host_nav} a .nav-number {
@@ -192,7 +193,6 @@ function nav({ href, pkg }){
 				href: isIndex ? "./" : p.href,
 				title: p.description || `Go to ${p.title}`,
 				"aria-current": isCurrent ? "page" : null,
-				classList: { current: isCurrent }
 			}).append(
 				el("span", {
 					className: "nav-number",

docs/layout/simplePage.html.js

@@ -19,8 +19,7 @@ export function simplePage({ pkg, info }){
 
 		// Main content area
 		el("main", { id: "main-content", role: "main" }).append(
-			// Page title as an h1
-			el("h1", { className: "page-title", textContent: info.title }),
+			el("h2", { textContent: info.fullTitle || info.title }),
 
 			// Main content from child elements
 			el("slot"),

docs/p02-elements.html.js

@@ -1,6 +1,7 @@
 import { T, t } from "./utils/index.js";
 export const info= {
 	title: t`Elements`,
+	fullTitle: t`Declarative DOM Element Creation`,
 	description: t`Building user interfaces with declarative DOM element creation.`,
 };
 
@@ -48,7 +49,6 @@ const references= {
 export function page({ pkg, info }){
 	const page_id= info.id;
 	return el(simplePage, { info, pkg }).append(
-		el("h2", t`Declarative DOM Element Creation`),
 		el("p").append(...T`
 			Building user interfaces in JavaScript often involves creating and manipulating DOM elements.
 			DDE provides a simple yet powerful approach to element creation that is declarative, chainable,

docs/p03-events.html.js

@@ -1,6 +1,7 @@
 import { T, t } from "./utils/index.js";
 export const info= {
 	title: t`Events and Addons`,
+	fullTitle: t`Declarative Event Handling and Addons`,
 	description: t`Using events and addons for declarative UI interactions.`,
 };
 
@@ -45,7 +46,6 @@ const references= {
 export function page({ pkg, info }){
 	const page_id= info.id;
 	return el(simplePage, { info, pkg }).append(
-		el("h2", t`Declarative Event Handling and Addons`),
 		el("p").append(...T`
 			Events are at the core of interactive web applications. DDE provides a clean, declarative approach to
 			handling DOM events and extends this pattern with a powerful Addon system to incorporate additional

docs/p04-signals.html.js

@@ -1,6 +1,7 @@
 import { T, t } from "./utils/index.js";
 export const info= {
 	title: t`Signals and Reactivity`,
+	fullTitle: t`Building Reactive UIs with Signals`,
 	description: t`Managing reactive UI state with signals.`,
 };
 
@@ -43,7 +44,6 @@ const references= {
 export function page({ pkg, info }){
 	const page_id= info.id;
 	return el(simplePage, { info, pkg }).append(
-		el("h2", t`Building Reactive UIs with Signals`),
 		el("p").append(...T`
 			Signals provide a simple yet powerful way to create reactive applications with DDE. They handle the
 			fundamental challenge of keeping your UI in sync with changing data in a declarative, efficient way.

docs/p05-scopes.html.js

@@ -1,6 +1,7 @@
 import { T, t } from "./utils/index.js";
 export const info= {
 	title: t`Scopes and Components`,
+	fullTitle: t`Building Maintainable UIs with Scopes and Components`,
 	description: t`Organizing UI into reusable, manageable components`,
 };
 
@@ -28,7 +29,6 @@ const references= {
 export function page({ pkg, info }){
 	const page_id= info.id;
 	return el(simplePage, { info, pkg }).append(
-		el("h2", t`Building Maintainable UIs with Scopes and Components`),
 		el("p").append(...T`
 			For state-less components we can use functions as UI components (see “Elements” page). But in real life,
 			we may need to handle the component live-cycle and provide JavaScript the way to properly use

docs/p06-customElement.html.js

@@ -1,6 +1,7 @@
 import { T, t } from "./utils/index.js";
 export const info= {
 	title: t`Web Components`,
+	fullTitle: t`Using Web Components with DDE: Better Together`,
 	description: t`Using custom elements in combinantion with DDE`,
 };
 
@@ -53,7 +54,6 @@ const references= {
 export function page({ pkg, info }){
 	const page_id= info.id;
 	return el(simplePage, { info, pkg }).append(
-		el("h2", t`Using Web Components with DDE: Better Together`),
 		el("p").append(...T`
 			DDE pairs powerfully with ${el("a", references.mdn_web_components).append(el("strong", t`Web Components`))}
 			to create reusable, encapsulated custom elements with all the benefits of DDE's declarative DOM

docs/p07-debugging.html.js

@@ -1,6 +1,7 @@
 import { T, t } from "./utils/index.js";
 export const info= {
 	title: t`Debugging`,
+	fullTitle: t`Debugging applications with deka-dom-el`,
 	description: t`Techniques for debugging applications using deka-dom-el, especially signals.`,
 };
 
@@ -16,7 +17,6 @@ const fileURL= url=> new URL(url, import.meta.url);
 export function page({ pkg, info }){
 	const page_id= info.id;
 	return el(simplePage, { info, pkg }).append(
-		el("h2", t`Debugging applications with deka-dom-el`),
 		el("p").append(...T`
 			Debugging is an essential part of application development. This guide provides techniques
 			and best practices for debugging applications built with deka-dom-el, with a focus on signals.

docs/p08-ssr.html.js

@@ -1,6 +1,7 @@
 import { T, t } from "./utils/index.js";
 export const info= {
 	title: t`Server-Side Rendering (SSR)`,
+	fullTitle: t`Server-Side Rendering with deka-dom-el`,
 	description: t`Using deka-dom-el for server-side rendering with jsdom to generate static HTML.`,
 };
 
@@ -15,7 +16,6 @@ const fileURL= url=> new URL(url, import.meta.url);
 export function page({ pkg, info }){
 	const page_id= info.id;
 	return el(simplePage, { info, pkg }).append(
-		el("h2", t`Server-Side Rendering with deka-dom-el`),
 		el("p").append(...T`
 			deka-dom-el isn't limited to browser environments. Thanks to its flexible architecture,
 			it can be used for server-side rendering (SSR) to generate static HTML files.

docs/types.d.ts

@@ -4,6 +4,7 @@ export type Info= {
 	id: string,
 	href: string,
 	title: string,
+	fullTitle: string,
 	description: string,
 }
 export type Pages=Info[];