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 03ff7b4a8592b7daff44781b03e8674e00055fc6..7575b808cc2fcd357ba821747831f02cb42b0b96 100644 (file)
--- 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 (file)
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 (file)
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 (file)
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 (file)
index 0000000..1960ced
Binary files /dev/null and b/fonts/LinBiolinum_RI.ttf differ