diff --git a/.gitignore b/.gitignore index 03413a1..8a10bc2 100644 --- a/.gitignore +++ b/.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 diff --git a/book/book.mk4 b/book/book.mk4 index 1a203bf..83932a0 100644 --- a/book/book.mk4 +++ b/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) diff --git a/book/book.tex b/book/book.tex index 67092b5..1efa72e 100644 --- a/book/book.tex +++ b/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} diff --git a/book/makefile b/book/makefile index e76c4c0..2bce14c 100644 --- a/book/makefile +++ b/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 - mv $(WEBSITE_DIR)/bookli1.html $(WEBSITE_DIR)/index.html + make4ht -c website.cfg -a debug -uf html5+tidy+common_domfilters+dvisvgm_hashes -d $(WEBSITE_DIR) book.tex + mv $(WEBSITE_DIR)/book.html $(WEBSITE_DIR)/index.html # Debug Stuff from now on .PHONY: show_tools_version diff --git a/book/style.css b/book/style.css new file mode 100644 index 0000000..5913f21 --- /dev/null +++ b/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; + } +} diff --git a/book/website.cfg b/book/website.cfg new file mode 100644 index 0000000..e26eb13 --- /dev/null +++ b/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{
}}{\ifvmode\IgnorePar\fi\EndP\HCode{
}}{}{} + +% Mini TOC +\Configure{crosslinks+}{% + \bgroup + % container for the page toc + \Configure{tableofcontents}{\IgnorePar\EndP\HCode{\Hnewline}\ShowPar}{}{}% + \TableOfContents[chapter,section,subsection]% Print table of contents before crosslinks + \egroup + \ifvmode\IgnorePar\fi\EndP% + \HCode{
\Hnewline\Hnewline}} +{\ifvmode\IgnorePar\fi\EndP% + \HCode{}}{}{} + +% configuration for TOC on the main page +\Configure{tableofcontents}{\IgnorePar\EndP\HCode{\Hnewline
\Hnewline}\ShowPar}{}{}% + +% close the
element started in \Configure{crosslinks+} +\Configure{@/BODY}{\ifvmode\IgnorePar\fi\EndP\HCode{
}} +% Goatcounter counting + +\begin{document} +\EndPreamble