Update screenshots using phantomjs, update readme

Author: mixu

Makefile

@@ -26,15 +26,26 @@ screenshots: build
 	rm ./screenshots/montage.png || true
 	montage -tile 4x -label '%t'  -geometry 120x120\>+20+5  ./screenshots/*.png  ./screenshots/montage.png
 
+phantomjs:
+	rm -f ./screenshots/*.png
+	for name in `find ./output -mindepth 1 -maxdepth 1 -type d | sed -e 's/.\/output\///'` ; do \
+				phantomjs ./screenshots/screenshot.js --url=file://$(CURDIR)/output/$$name/index.html --out=./screenshots/$$name.png ; \
+				convert ./screenshots/$$name.png -resize "800x" -crop 800x600+0+0  +repage ./screenshots/$$name-cropped.png ; \
+				rm ./screenshots/$$name.png ; \
+				mv ./screenshots/$$name-cropped.png ./screenshots/$$name.png ; \
+	done
+	rm ./screenshots/montage.png || true
+	montage -tile 4x -label '%t'  -geometry 120x120\>+20+5  ./screenshots/*.png  ./screenshots/montage.png
+
 montage:
 	rm ./screenshots/montage.png || true
 	montage -tile 4x -label '%t'  -geometry 120x120\>+20+5  ./screenshots/*.png  ./screenshots/montage.png
 
 # Download google fonts for cutycapt
 get-fonts:
-	node font-download.js
+	node screenshots/font-download.js
 
-.PHONY: build screenshots get-fonts
+.PHONY: build screenshots get-fonts montage
 
 lint:
 	fixjsstyle $(GJSLINT) -r .

layouts/github/assets/css/github-markdown.css

@@ -3,6 +3,10 @@
   src: url(data:font/woff;charset=utf-8;base64,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) format('woff');
 }
 
+body {
+  background-color: white;
+}
+
 .markdown-body {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;

layouts/mixu-book/assets/style.css

@@ -36,6 +36,7 @@ a, ins {
 
 body {
   font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
+  background-color: white;
 }
 
 a {

layouts/witex/assets/css/style.css

@@ -48,8 +48,8 @@ https://github.com/AndrewBelt/WiTeX
 /* Page Layout */
 
 body {
-	background: none;
-	font-size: 13pt;
+  background-color: white;
+  font-size: 13pt;
 }
 
 body {

readme.md

@@ -289,7 +289,11 @@ I'd like to thank the following people for either contributing to markdown-style
 
 ## Screenshots of the layouts
 
-Note: these screenshots are generate via cutycapt, so they look worse than they do in a real browser.
+Note: these screenshots are generated via phantomjs, so they look worse than they do in a real browser because the font rendering is just bad and lacks webfont support. For example, WiTeX actually uses the Latin Modern Roman font from TeX but the screenshots show the fallback font.
+
+### github
+
+![github](https://github.com/mixu/markdown-styles/raw/master/screenshots/github.png)
 
 ### github
 
@@ -372,3 +376,9 @@ You also need to install the web fonts locally so that cutycapt will find them,
 Finally, run:
 
     make screenshots
+
+If you have phantomjs installed, run:
+
+    make phantomjs
+
+which will use a phantomjs script to capture the screenshots.