From: Esteban Manchado Velázquez 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