From: Esteban Manchado Velázquez <emanchado@demiurgo.org>
Date: Sun, 24 May 2020 07:24:29 +0000 (+0200)
Subject: Improve the look of the HTML version
X-Git-Tag: 20200524.01^2^2^2
X-Git-Url: https://jxself.org/git/?a=commitdiff_plain;h=18f7c1584b3e8c5d73a561089c8950189b8c9d19;p=themediocreprogrammer.git

Improve the look of the HTML version

Add a CSS file and some fonts, so that the HTML version looks
reasonably similar to the PDF version: same font, decent margins,
larger text.
---

diff --git a/Makefile b/Makefile
index 03ff7b4..7575b80 100644
--- a/Makefile
+++ b/Makefile
@@ -7,6 +7,7 @@ CHAPTERS = intro.md chapter01.md chapter02.md chapter03.md chapter04.md chapter0
 TOC = --toc --toc-depth=2
 COVER_IMAGE = images/cover_ebook_1600x2400.png
 LATEX_CLASS = book
+FONTS = fonts/LinBiolinum_R.ttf fonts/LinBiolinum_RI.ttf fonts/LinBiolinum_RB.ttf
 
 all: book
 
@@ -17,7 +18,11 @@ clean:
 
 epub: $(BUILD)/epub/$(BOOKNAME).epub
 
-html: $(BUILD)/html/$(BOOKNAME).html
+html: $(BUILD)/html/$(BOOKNAME).html fonts css
+
+fonts: $(patsubst %,$(BUILD)/html/%,$(FONTS))
+
+css: $(BUILD)/html/css/$(BOOKNAME).css
 
 pdf: $(BUILD)/pdf/$(BOOKNAME).pdf
 
@@ -27,11 +32,19 @@ $(BUILD)/epub/$(BOOKNAME).epub: $(TITLE) $(CHAPTERS) $(METADATA_YAML)
 
 $(BUILD)/html/$(BOOKNAME).html: $(CHAPTERS) $(METADATA_YAML)
 	mkdir -p $(BUILD)/html
-	pandoc -s $(TOC) --chapters --number-offset=0 --standalone --to=html5 -o $@ $^
+	pandoc -s $(TOC) --chapters --number-offset=0 --standalone --to=html5 --css=css/$(BOOKNAME).css -o $@ $^
+
+$(BUILD)/html/fonts/%: fonts/%
+	mkdir -p $(BUILD)/html/fonts
+	cp $< $@
+
+$(BUILD)/html/css/%: css/%
+	mkdir -p $(BUILD)/html/css
+	cp $< $@
 
 $(BUILD)/pdf/$(BOOKNAME).pdf: $(CHAPTERS) $(METADATA_YAML)
 	mkdir -p $(BUILD)/pdf
 	# pandoc $(TOC) --chapters --number-offset=0 --latex-engine=pdflatex -V documentclass=$(LATEX_CLASS) -V papersize=6x9 -o $@ $^
 	pandoc -s $(TOC) --chapters --number-offset=0 --template=Pandoc/templates/cs-6x9-pdf.latex --latex-engine=xelatex  -o $@ $^
 
-.PHONY: all book clean epub html pdf
+.PHONY: all book clean epub html fonts css pdf
diff --git a/css/the_mediocre_programmer.css b/css/the_mediocre_programmer.css
new file mode 100644
index 0000000..112b96d
--- /dev/null
+++ b/css/the_mediocre_programmer.css
@@ -0,0 +1,24 @@
+@font-face {
+    font-family: "Linux Biolinum";
+    src: url("../fonts/LinBiolinum_RB.ttf");
+    font-weight: bold;
+}
+
+@font-face {
+    font-family: "Linux Biolinum";
+    src: url("../fonts/LinBiolinum_RI.ttf");
+    font-style: italic, oblique;
+}
+
+@font-face {
+    font-family: "Linux Biolinum";
+    src: url("../fonts/LinBiolinum_R.ttf");
+}
+
+body {
+    font-family: "Linux Biolinum";
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 40em;
+    font-size: 120%;
+}
diff --git a/fonts/LinBiolinum_R.ttf b/fonts/LinBiolinum_R.ttf
new file mode 100644
index 0000000..47ba16c
Binary files /dev/null and b/fonts/LinBiolinum_R.ttf differ
diff --git a/fonts/LinBiolinum_RB.ttf b/fonts/LinBiolinum_RB.ttf
new file mode 100644
index 0000000..1149f14
Binary files /dev/null and b/fonts/LinBiolinum_RB.ttf differ
diff --git a/fonts/LinBiolinum_RI.ttf b/fonts/LinBiolinum_RI.ttf
new file mode 100644
index 0000000..1960ced
Binary files /dev/null and b/fonts/LinBiolinum_RI.ttf differ