From 8a130464965a32c8cc5537e08c04676a3313a10f Mon Sep 17 00:00:00 2001
From: Robin Whittleton <robin@reala.net>
Date: Sun, 25 Jul 2021 13:00:21 +0200
Subject: [PATCH] Add basic nav bars to web versions of the books

These are fixed on (portrait) tablet and mobile, static on desktop.
---
 scripts/deploy-ebook-to-www |  8 +++++++-
 www/css/web.css             | 38 +++++++++++++++++++++++++++++++++++--
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/scripts/deploy-ebook-to-www b/scripts/deploy-ebook-to-www
index 94b66176..0fd55603 100755
--- a/scripts/deploy-ebook-to-www
+++ b/scripts/deploy-ebook-to-www
@@ -290,6 +290,9 @@ do
 			# We do this first because the tweaks below shouldn't apply to the single-page file
 			se recompose-epub --xhtml --output "${workDir}"/single-page.xhtml --extra-css-file="${webRoot}/www/css/web.css" "${workDir}"
 
+			# Add a navbar with a link back to the homepage
+			sed --in-place --regexp-extended 's/<body(.*?)>/<body\1><header><nav><ul><li><a href="\/">Standard Ebooks<\/a><\/li><\/ul><\/nav><\/header>/' "${workDir}"/single-page.xhtml
+
 			# Adjust sponsored links in the colophon
 			sed --in-place 's|<p><a href="http|<p><a rel="nofollow" href="http|g' "${workDir}"/single-page.xhtml
 
@@ -298,7 +301,7 @@ do
 			fi
 		fi
 
-		# Make some compatibilty adjustments for the individual XHTML files
+		# Make some compatibility adjustments for the individual XHTML files
 
 		# Remove instances of the .xhtml filename extension in the source text
 		find "${workDir}"/src/epub \( -type d -name .git -prune \) -o -type f -name "*.xhtml" -print0 | xargs -0 sed --in-place 's/\.xhtml//g'
@@ -316,6 +319,9 @@ do
 		workTitle=$(grep --only-matching --extended-regexp "<dc:title id=\"title\">(.+?)</dc:title>" "${workDir}"/src/epub/content.opf | sed --regexp-extended "s/<[^>]+?>//g")
 		find "${workDir}"/src/epub \( -type d -name .git -prune \) -o -type f -name "*.xhtml" -print0 | xargs -0 sed --in-place --regexp-extended "s|<title>|<title>${workTitle} - |g"
 
+		# Add the nav to each page
+		find "${workDir}"/src/epub \( -type d -name .git -prune \) -o -type f -name "*.xhtml" -print0 | xargs -0 sed --in-place --regexp-extended 's/<body(.*?)>/<body\1><header><nav><ul><li><a href="\/">Standard Ebooks<\/a><\/li><li><a href="\.">Table of contents<\/a><\/li><\/ul><\/nav><\/header>/'
+
 		# Adjust sponsored links in the colophon
 		sed --in-place 's|<p><a href="http|<p><a rel="nofollow" href="http|g' "${workDir}"/src/epub/text/colophon.xhtml
 
diff --git a/www/css/web.css b/www/css/web.css
index 2e59ef0c..6e34c70b 100644
--- a/www/css/web.css
+++ b/www/css/web.css
@@ -4,10 +4,42 @@ body{
 	font-family: Georgia, serif;
 	font-size: 18px;
 	padding: 0 3em;
-	margin: 3em auto;
+	margin: 6em auto 3em;
 	max-width: 55ch;
 }
 
+body > header{
+	position: absolute;
+  left: 0;
+	right: 0;
+	top: 0;
+	background: #fff;
+	border-bottom: 1px solid #999;
+	box-shadow: 0 0 3px #ccc;
+}
+
+@media(max-width: 96ch){
+	body > header{
+		position: fixed;
+	}
+}
+
+body > header ul{
+	display: flex;
+	justify-content: space-between;
+	list-style: none;
+	margin: 0;
+	padding: 0.5em 1em;
+}
+
+body > header li:first-child > a{
+	display: block;
+	width: 90px;
+	height: 21px;
+	background: no-repeat center/100% url(/images/logo-full.svg);
+	text-indent: -999em;
+}
+
 body > nav,
 body > section,
 body > article{
@@ -43,7 +75,8 @@ nav[epub|type~="toc"] ol{
 }
 
 @media(prefers-color-scheme: dark){
-	body{
+	body,
+	body > header{
 		background: #222222;
 		color: #ffffff;
 	}
@@ -61,6 +94,7 @@ nav[epub|type~="toc"] ol{
 		color: #dda0dd;
 	}
 
+	body > header li:first-child > a,
 	img[epub|type~="se:image.color-depth.black-on-transparent"]{
 		filter: invert(1);
 	}