Finish responsive layout; several bug fixes

new/docs/index.html

@@ -18,6 +18,16 @@
 		<main>
 			<div class="docs wrapper">
 				<nav>
+					<div id="docs-menu">
+						<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-menu-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+							<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+							<path d="M4 6l16 0"></path>
+							<path d="M4 12l16 0"></path>
+							<path d="M4 18l16 0"></path>
+						</svg>
+						Pages
+					</div>
+					<div id="docs-menu-container">
 						<ul>
 							<li class="heading">Get Caddy</li>
 							<li>
@@ -29,7 +39,9 @@
 								</ul>
 							</li>
 							<li><a href="/docs/build">Build from source</a></li>
+						</ul>
 						
+						<ul>
 							<li class="heading">Tutorials</li>
 							<li><a href="/docs/basics">Caddy basics</a></li>
 							<li><a href="/docs/troubleshooting">How to fix problems</a></li>
@@ -37,7 +49,9 @@
 							<li><a href="/docs/reverse-proxy">Reverse proxy</a></li>
 							<li><a href="/docs/reverse-proxy">Custom domains</a></li>
 							<li><a href="/docs/reverse-proxy">Automate mTLS</a></li>
+						</ul>
 
+						<ul>
 							<li class="heading">Reference</li>
 							<li><a href="/docs/command-line">Command line</a></li>
 							<li><a href="/docs/api">API</a></li>
@@ -55,7 +69,9 @@
 							<!-- <li><a href="/docs/caddyfile">Caddyfile</a></li> -->
 							<li><a href="/docs/automatic-https">Automatic HTTPS</a></li>
 							<li><a href="/docs/automatic-https">Modules</a></li>
+						</ul>
 
+						<ul>
 							<li class="heading">Articles</li>
 							<!-- <li><a href="/docs/v2-upgrade">Upgrading to Caddy 2</a></li> -->
 							<li><a href="/docs/conventions">Conventions</a></li>
@@ -65,12 +81,14 @@
 							<li><a href="/docs/architecture">Caddy Architecture</a></li>
 							<li><a href="/docs/running">Keep Caddy Running</a></li>
 							<li><a href="/docs/signature-verification">Verifying Asset Signatures</a></li>
+						</ul>
 
+						<ul>
 							<li class="heading">Develop</li>
 							<li><a href="/docs/architecture">Caddy architecture</a></li>
 							<li><a href="/docs/contribute">Contribute</a></li>
 							<li><a href="/docs/extend">Write a module</a></li>
-						
+						</ul>
 					</ul>
 				</nav>
 

new/includes/header.html

@@ -1,7 +1,6 @@
 <header class="{{index .Args 0}}">
 	<div class="topbar">
 		<div class="wrapper">
-			<div style="flex: 1;"></div>
 			<a href="https://zerossl.com">
 				A ZeroSSL Project
 			</a>

new/resources/css/common.css

@@ -4,6 +4,8 @@
 	--text-color: #222;
 	--header-bg: rgba(118, 179, 194, 0.11);
 	--header-border-color: #ebf0f2;
+	--topbar-link-color-hover: black;
+	--topbar-link-bg-hover: rgb(244, 249, 251);
 	--main-nav-link-color: #546c75;
 	--main-nav-link-hover-color: #01324b;
 	--link-color: #0097f2;
@@ -27,6 +29,8 @@
 	--text-color: #cbe2e4; /* #a4c0c2 */
 	--header-bg: rgba(44, 130, 164, 0.11);
 	--header-border-color: transparent;
+	--topbar-link-color-hover: white;
+	--topbar-link-bg-hover: rgb(255 255 255 / .1);
 	--main-nav-link-color: #86a7b1;
 	--main-nav-link-hover-color: #e2e9ec;
 	--link-color: #34a1e4;
@@ -168,8 +172,8 @@ header nav>ul {
 }
 
 .topbar a:hover {
-	background: rgb(0 0 0 / .05);
+	background: var(--topbar-link-bg-hover);
-	color: black;
+	color: var(--topbar-link-color-hover);
 }
 
 .navbar {
@@ -479,3 +483,38 @@ header nav ul {
 		padding-right: 20px;
 	}
 }
+
+@media (max-width: 950px) {
+	header nav ul {
+		justify-content: space-evenly;
+	}
+
+	.topbar .wrapper {
+		justify-content: center;
+		flex-wrap: wrap;
+		gap: 0;
+	}
+
+	.logo {
+		height: 3em;
+	}
+
+	.navbar {
+		flex-direction: column;
+		gap: 0;
+		padding: 1em 0;
+	}
+
+	.navbar nav {
+		margin: .5em 0;
+	}
+
+	.navbar .actions {
+		margin: 0 auto;
+	}
+
+	.navbar nav > ul > li > a {
+		padding-top: 10px;
+		padding-bottom: 10px;
+	}
+}

new/resources/css/docs.css

@@ -11,6 +11,7 @@
 	--pagenav-hover-bg: #f4f7f9;
 	--cmd-bg: #333;
 	--tip-color: #5c50bb;
+	--menu-toggle-bg: #e4f1f2;
 }
 
 .dark {
@@ -26,6 +27,7 @@
 	--pagenav-hover-bg: #18262f;
 	--cmd-bg: black;
 	--tip-color: #a6b2f7;
+	--menu-toggle-bg: #274d5c;
 }
 
 
@@ -89,7 +91,12 @@ main {
 	min-width: 250px;
 }
 
-
+#docs-menu {
+	background: var(--menu-toggle-bg);
+	padding: 1em;
+	cursor: pointer;
+	display: none;
+}
 
 
 
@@ -189,7 +196,7 @@ main nav .heading {
 	letter-spacing: 1px;
 }
 
-main nav .heading:not(:first-child) {
+main nav ul:not(:first-child) > .heading {
 	margin-top: 2.5em;
 }
 
@@ -359,9 +366,9 @@ article h5 {
 	font-size: .6em;
 	border-radius: 10px;
 	padding: .3em .5em;
-	margin-left: .25em;
 	position: absolute;
 	top: 5px;
+	left: 0;
 	text-decoration: none;
 }
 
@@ -579,7 +586,7 @@ td code {
 
 #autonav {
 	position: absolute;
-	visibility: hidden;
+	display: none;
 	left: 80%;
 	top: 0;
 	background: var(--autonav-bg);
@@ -597,8 +604,8 @@ td code {
 	font-size: 14px;
 }
 
-main nav > ul > li:hover #autonav {
+main nav ul > li:hover #autonav {
-	visibility: visible;
+	display: block;
 }
 
 #autonav .heading {
@@ -655,3 +662,34 @@ main nav > ul > li:hover #autonav {
 		display: none;
 	}
 }
+
+@media (max-width: 950px) {
+	#autonav {
+		display: none !important;
+	}
+
+	.docs {
+		flex-direction: column;
+	}
+
+	#docs-menu {
+		display: block;
+	}
+
+	#docs-menu-container {
+		height: 0;
+		overflow: hidden;
+		transition: height 250ms ease-out;
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	.docs nav ul {
+		min-width: 250px;
+		flex: 1;
+	}
+
+	main nav ul .heading {
+		margin-top: 2.5em !important;
+	}
+}

new/resources/js/common.js

@@ -53,66 +53,9 @@ ready(function() {
 	// on page load, immediately set the configured theme
 	setTheme(getTheme());
 
-	const autonav = $('#autonav');
 	
-	// when a left-side-nav-link is hovered, show the in-page nav in a popout to the side
-	on('mouseover', 'main nav li a:not(#autonav a)', async e => {
-		const response = await fetch("/temporary-markdown-proxy"+e.target.getAttribute('href'));
-		const markdown = await response.text();
-		const tokens = marked.lexer(markdown);
-
-		autonav.replaceChildren();
-		
-		let seenH1 = false;
-		for (const tkn of tokens) {
-			if (tkn.type != "heading") continue;
-			if (tkn.depth == 1) {
-				seenH1 = true;
-			}
-			if (!seenH1 || tkn.depth != 2) continue;
-
-			// this includes HTML entities like < (i.e. not user-facing text), but
-			// that's how the server-side markdown renderer does it too ¯\_(ツ)_/¯
-			const anchor = anchorID(tkn.text);
-
-			const a = document.createElement('a');
-			a.classList.add('autonav-link');
-			a.innerHTML = marked.parseInline(tkn.text);
-			a.href = `${e.target.href}#${anchor}`;
-			autonav.append(a);
-		}
-		
-		if ($('#autonav *')) {
-			const sections = document.createElement('div')
-			sections.classList.add('heading');
-			sections.innerText = 'Sections';
-			autonav.prepend(sections);
-			e.target.closest('li').append(autonav);
-		} else {
-			// no links, so remove it from nav so as not to display an empty box
-			$('body').append(autonav);
-		}
-
-	});
-
-	const spacingMS = 50;
-	let delay = spacingMS;
-	$$('main article h2').forEach(elem => {
-		const a = document.createElement('a');
-		a.innerText = elem.innerText;
-		a.href = `#${elem.id}`;
-		setTimeout(function() {
-			$('#pagenav').append(a);
-		}, delay);
-		delay += spacingMS;
-	});
 });
 
-function anchorID(text) {
-	return text.trim().toLowerCase().replace(/\s/g, '-').replace(/[^\w-]/g, '');
-}
-
-
 // when the system theme changes, apply that to our site if system theme is configured
 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({ matches }) => {
 	if (getTheme() == "system") {

new/resources/js/docs.js

@@ -11,6 +11,19 @@ ready(function() {
 	}
 	currentPageLink?.classList?.add('current');
 
+	// generate in-page nav before adding anchor links to headings
+	const spacingMS = 50;
+	let delay = spacingMS;
+	$$('main article h2').forEach(elem => {
+		const a = document.createElement('a');
+		a.innerText = elem.innerText;
+		a.href = `#${elem.id}`;
+		setTimeout(function() {
+			$('#pagenav').append(a);
+		}, delay);
+		delay += spacingMS;
+	});
+
 	// add anchor links, inspired by https://github.com/bryanbraun/anchorjs
 	$$('article > h2[id], article > h3[id], article > h4[id], article > h5[id], article > h6[id]').forEach(function(elem) {
 		const anchor = document.createElement('a');
@@ -20,4 +33,66 @@ ready(function() {
 		anchor.innerText = '🔗';
 		elem.append(anchor);
 	});
+
+	const autonav = $('#autonav');
+
+	// when a left-side-nav-link is hovered, show the in-page nav in a popout to the side
+	on('mouseover', 'main nav li a:not(#autonav a)', async e => {
+		// only show the pop-out nav if not on mobile/narrow screen
+		if ($('#docs-menu').offsetParent != null) {
+			return;
+		}
+
+		const response = await fetch("/temporary-markdown-proxy"+e.target.getAttribute('href'));
+		const markdown = await response.text();
+		const tokens = marked.lexer(markdown);
+
+		// empty the container
+		autonav.replaceChildren();
+		
+		let seenH1 = false;
+		for (const tkn of tokens) {
+			if (tkn.type != "heading") continue;
+			if (tkn.depth == 1) {
+				seenH1 = true;
+			}
+			if (!seenH1 || tkn.depth != 2) continue;
+
+			// this includes HTML entities like < (i.e. not user-facing text), but
+			// that's how the server-side markdown renderer does it too ¯\_(ツ)_/¯
+			const anchor = anchorID(tkn.text);
+
+			const a = document.createElement('a');
+			a.classList.add('autonav-link');
+			a.innerHTML = marked.parseInline(tkn.text);
+			a.href = `${e.target.href}#${anchor}`;
+			autonav.append(a);
+		}
+		
+		if ($('#autonav *')) {
+			const sections = document.createElement('div')
+			sections.classList.add('heading');
+			sections.innerText = 'Sections';
+			autonav.prepend(sections);
+			e.target.closest('li').append(autonav);
+			autonav.style.display = ''; // unhide the container
+		} else {
+			// no links; hide the container so we don't see an empty box
+			autonav.style.display = 'none';
+		}
+
+	});
 });
+
+on('click', '#docs-menu', e => {
+	const nav = $('#docs-menu-container');
+	if (!nav.offsetHeight) {
+		nav.style.height = `${nav.scrollHeight}px`;
+	} else {
+		nav.style.height = 0;
+	}
+});
+
+function anchorID(text) {
+	return text.trim().toLowerCase().replace(/\s/g, '-').replace(/[^\w-]/g, '');
+}