Website improvements for book (#137)

.gitignore

@@ -10,6 +10,8 @@
 *.bcf
 *.blg
 *.run.xml
+*.html
+*.dlog
 book/book.out
 .vscode/
 book/book.synctex*
@@ -55,6 +57,6 @@ book_sans_serif/
 book_serif/
 release_sans_serif/
 book/book_sans_serif-epub/
-book/static_website_html/
+book/static_website_html/*
 epub/
 *.opf

book/book.mk4

@@ -4,5 +4,15 @@ local removeWidth = function(s) return s:gsub('width="%d+"', '') end
 local removeMaxWidth = function(s) return s:gsub(' max-width: %d+px;', '') end
 local removeFixedSettings = function(s) return removeMaxWidth(removeWidth(removeHeight(s))) end
 local process = filter{removeFixedSettings}
+local domfilter = require "make4ht-domfilter"
+
+
+filter_settings "collapsetoc" {
+  toc_query = "nav.TOC"
+}
+
+local domprocess = domfilter{"collapsetoc"}
 Make:latexmk {}
+-- Make:htlatex {}
 Make:match("html$",process)
+Make:match("html$",domprocess)

book/book.tex

@@ -9,7 +9,6 @@
 \usepackage{float}
 \usepackage[T1]{fontenc}
 \usepackage{tocloft}
-\usepackage{tex4ebook}
 \usepackage{chemformula}
 \usepackage{booktabs}
 \usepackage{makecell}
@@ -79,6 +78,7 @@
 
 \begin{document}
 
+\frontmatter
 % Title page
 \begin{titlepage}
 \begin{center}
@@ -88,9 +88,9 @@
 \end{center}
 \end{titlepage}
 
-\frontmatter
 
-\tableofcontents
+% \tableofcontents
+\ifdefined\HCode\else\tableofcontents\fi
 
 \chapter{Foreword}
 \input{intro/foreword}

book/makefile

@@ -225,8 +225,8 @@ website:
 		cowsay "baking the website";\
 	fi
 	rm -rf $(WEBSITE_DIR)
-	make4ht -uf html5+tidy+common_domfilters -d $(WEBSITE_DIR) book.tex
+	make4ht -c website.cfg -a debug -uf html5+tidy+common_domfilters+dvisvgm_hashes -d $(WEBSITE_DIR) book.tex
-	mv $(WEBSITE_DIR)/bookli1.html $(WEBSITE_DIR)/index.html
+	mv $(WEBSITE_DIR)/book.html $(WEBSITE_DIR)/index.html
 
 # Debug Stuff from now on
 .PHONY: show_tools_version

book/style.css

@@ -0,0 +1,166 @@
+/* 
+Color scheme 
+#bab5a9;
+#d5e3c6 
+
+ */
+
+/* ************** */
+/* *** Fonts  *** */
+/* ************** */
+
+/* Font size tricks from https://www.madebymike.com.au/writing/precise-control-responsive-typography/ 
+ * The font size will be adjusted to the screen size.
+ * */
+:root{
+  font-size: 16px;
+}
+
+/* the min width is calculated as:
+ * font-size / ( number of viewport units / 100 )
+ * it means 16 / (1.5/100)
+ */
+@media (min-width: 1200px){
+  :root {
+    font-size: 1.5vw;
+  }
+}
+
+/* Maximal font size should be 24px, so stop font scalling at some point (24 / (1.5/100)) */
+
+@media (min-width: 1500px){
+  :root {
+    font-size: 20px;
+  }
+}
+
+/* ************** */
+/* *** Layout *** */
+/* ************** */
+
+body{
+  /* max-width:52rem; */
+  margin:0;
+  padding:0;
+  /* display:grid; */
+  /* grid-auto-rows: auto; */
+}
+
+@media screen and (min-width: 57rem) {
+  body{
+    display:grid;
+    grid-template-columns: 15rem 1fr;
+  }
+  main.main-content, main.titlepage, div.footnotes{max-width:40rem;grid-column: 2}
+  main.titlepage {grid-row: 1;}
+  nav.TOC{
+    grid-row:1;
+    grid-column: 1;
+    min-height:100vh;
+  }
+}
+
+
+/* ****************** */
+/* *** Formatting *** */
+/* ****************** */
+
+main.main-content,main.titlepage,div.footnotes{
+  padding:1rem;
+}
+
+p.indent, p.noindent{text-indent:0}
+/* code{font-size:1.4rem;} */
+/* figure pre.listings{font-size: 1.4rem;} */
+figure.texsource, figure.shellcommand, figure.htmlsource, figure.luasource, figure.textsource{
+  margin:0.5rem 0; 
+  padding-left:0.5rem; 
+  overflow:auto;
+}
+figure pre.listings{font-size: 1em;}
+
+.chapterToc, .sectionToc, .subsectionToc{margin:0;padding:0;}
+nav.TOC{
+  padding:0.5rem;
+  font-size:0; /* trick to remove vertical space above TOC entries */
+}
+
+ .chapterToc ~ .likesectionToc, .chapterToc ~ .sectionToc, .likechapterToc ~ .likesectionToc, .likechapterToc ~ .sectionToc {padding-left:2em;margin-left:0}
+ .chapterToc ~ .likesectionToc ~ .likesubsectionToc, .chapterToc ~ .likesectionToc ~ .subsectionToc, .chapterToc ~ .sectionToc ~ .likesubsectionToc, .chapterToc ~ .sectionToc ~ .subsectionToc, .likechapterToc ~ .likesectionToc ~ .likesubsectionToc, .likechapterToc ~ .likesectionToc ~ .subsectionToc, .likechapterToc ~ .sectionToc ~ .likesubsectionToc, .likechapterToc ~ .sectionToc ~ .subsectionToc {padding-left:4em;margin-left:0;}
+
+nav.TOC span{
+  display:block;
+  margin-top:0;
+  font-size:0.8rem;
+}
+
+nav.TOC a, nav.TOC a:visited{
+  text-decoration:none;
+}
+
+/* ************** */
+/* *** Colors *** */
+/* ************** */
+
+
+/* body{background-color:#dce8d0;} */
+/* It seems that dark background is better to my eyes */
+body{background-color:#B8CDA3;} 
+
+main.main-content, div.footnotes, main.titlepage{
+  background-color:white;
+}
+
+nav.TOC,nav.TOC a, nav.TOC a:visited{
+  background-color:#22211f;
+  color:#cec1aa;
+}
+
+nav.TOC span:hover, nav.TOC span:hover *{
+  background-color:#66635d;
+}
+
+
+
+figure.texsource, figure.shellcommand, figure.htmlsource, figure.luasource, figure.textsource{
+  border:1px solid #cec1aa; 
+  background-color:#d5e3c6;
+}
+
+/* ***************** */
+/* *** Dark mode *** */
+/* ***************** */
+
+/* Code from https://ar.al/2021/08/24/implementing-dark-mode-in-a-handful-of-lines-of-css-with-css-filters/ */
+
+@media (prefers-color-scheme: dark) {
+  /* Invert all elements on the body while attempting to not alter the hue substantially. */
+  body {
+    filter: invert(100%) hue-rotate(180deg);
+  }
+
+  /* Workarounds and optical adjustments. */
+
+  /* Firefox workaround: Set the background colour for the html
+     element separately because, unlike other browsers, Firefox
+     doesn’t apply the filter to the root element’s background. */
+  html {
+    background-color: #111;
+  }
+
+  /* Do not invert media (revert the invert). */
+  img, video, iframe {
+    filter: invert(100%) hue-rotate(180deg);
+  }
+
+
+  /* Re-enable code block backgrounds. */
+  pre {
+    filter: invert(6%);
+  }
+
+  /* Improve contrast on list item markers. */
+  li::marker {
+    color: #666;
+  }
+}

book/website.cfg

@@ -0,0 +1,37 @@
+\Preamble{xhtml,2,sec-filename,fn-in,fonts,svg,mathml,mathjax,nostyle}
+\DeclareGraphicsExtensions{.png,.svg,.jpg,.jpeg,.JPG,.eps,.pdf,.mps}
+% fix rendering of degree celsius
+\DeclareSIUnit\degreeCelsius{\text{°C}}
+\Configure{Gin-dim}{} 
+\Css{img { 
+    max-width: 100\%; 
+    height: auto; 
+}} 
+
+\Configure{AddCss}{style.css}
+\ConfigureEnv{titlepage}{\ifvmode\IgnorePar\fi\EndP\HCode{<main class="titlepage">}}{\ifvmode\IgnorePar\fi\EndP\HCode{</main>}}{}{}
+
+% Mini TOC
+\Configure{crosslinks+}{%
+  \bgroup
+  % container for the page toc
+  \Configure{tableofcontents}{\IgnorePar\EndP\HCode{<nav class="TOC">}\IgnorePar}
+  {\HCode{\Hnewline}}{\IgnorePar\HCode{</nav>\Hnewline}\ShowPar}{}{}%
+  \TableOfContents[chapter,section,subsection]% Print table of contents before crosslinks
+  \egroup
+  \ifvmode\IgnorePar\fi\EndP%
+  \HCode{<main class="main-content">\Hnewline<nav class="crosslinks-top">} }
+  {\HCode{</nav>\Hnewline}}
+{\ifvmode\IgnorePar\fi\EndP%
+  \HCode{<nav class="crosslinks-bottom">}}{\HCode{</nav>}}{}{}
+
+% configuration for TOC on the main page
+\Configure{tableofcontents}{\IgnorePar\EndP\HCode{<nav class="TOC">}\IgnorePar}
+{}{\IgnorePar\HCode{</nav>\Hnewline<main class="main-content">\Hnewline}\ShowPar}{}{}%
+
+% close the <main> element started in \Configure{crosslinks+}
+\Configure{@/BODY}{\ifvmode\IgnorePar\fi\EndP\HCode{</main>}}
+% Goatcounter counting
+
+\begin{document}
+\EndPreamble