New file hierarchy.

.gitignore

@@ -0,0 +1,3 @@
+/cards/*.pdf
+/tmp/*.html
+/.sass-cache

Makefile

@@ -1,39 +1,33 @@
-RECIPES = pancakes
-
-MDS = $(RECIPES:=.md)
-JSONS = $(RECIPES:=.json)
-FJSONS = $(RECIPES:=.filtered.json)
-HTMLS = $(RECIPES:=.html)
-PDFS = $(RECIPES:=.pdf)
-
-master: test.md
-	pandoc --standalone --output master.json $<
-	pandoc --standalone --output master.filtered.json --lua-filter recipe.lua $<
-
-test: test.md master
-	pandoc --standalone --output test.json $<
-	php recipe.php < test.json > test.filtered.json
-	pandoc --standalone --template recipe.html --to html5 --output test.html test.filtered.json
-	diff -u master.filtered.json test.filtered.json
+ASSET_DIR = assets
+RECIPE_DIR = recipes
+IMAGES_DIR = images
+TEMP_DIR = tmp
+CARDS_DIR = cards
+
+CSS_NAME = recipe
+SCSS = $(ASSET_DIR)/$(CSS_NAME).scss
+CSS = $(ASSET_DIR)/$(CSS_NAME).css
+FILTER = $(ASSET_DIR)/recipe.php
+CARD_TEMPLATE = $(ASSET_DIR)/recipe.card.html
+IMAGE_PATH = ../$(IMAGES_DIR)
+
+RECIPES = $(wildcard $(RECIPE_DIR)/*.md)
+HTMLS = $(patsubst $(RECIPE_DIR)/%.md,$(TEMP_DIR)/%.html,$(RECIPES))
+PDFS = $(patsubst $(RECIPE_DIR)/%.md,$(CARDS_DIR)/%.pdf,$(RECIPES))
 
 all: $(PDFS)
 
-recipe.css: recipe.scss
+$(CSS): $(SCSS)
 	scss $< $@
 
-%.json: %.md
-	pandoc --standalone --output $@ $<
+$(TEMP_DIR)/%.html: $(RECIPE_DIR)/%.md $(FILTER) $(CARD_TEMPLATE)
+	pandoc --standalone --filter $(FILTER) --template $(CARD_TEMPLATE) --variable image_path:$(IMAGE_PATH) --to html5 --output $@ $<
 
-%.filtered.json: %.json recipe.php
-	php recipe.php < $< > $@
-
-%.html: %.filtered.json recipe.html
-	pandoc --standalone --template recipe.html --to html5 --output $@ $<
-
-%.pdf: %.html recipe.css
-	prince --style recipe.css --output $@ $<
+$(CARDS_DIR)/%.pdf: $(TEMP_DIR)/%.html $(CSS)
+	prince --style $(CSS) --output $@ $<
 
 clean:
-	rm -f $(HTMLS) $(PDFS) $(JSONS) $(FJSONS)
+	rm -f $(HTMLS) $(PDFS)
+
+.PRECIOUS: $(TEMP_DIR)/%.html
 
-.PRECIOUS: %.html %.json %.filtered.json

recipe.html → assets/recipe.card.html

@@ -48,11 +48,11 @@
 $if(title)$
 <header>
 <h1 class="title"><span class="content">$title$</span></h1>
-$if(image)$
 <div class="title-image-container">
-	<img src="$image$" class="title-image $if(image_class)$$image_class$$else$fit-height$endif$"/>
-</div>
+$if(image)$
+	<img src="$image_path$/$image$" class="title-image $if(image_class)$$image_class$$else$fit-height$endif$" $if(image_style)$style="$image_style$"$endif$/>
 $endif$
+</div>
 $if(subtitle)$
 <p class="subtitle">$subtitle$</p>
 $endif$

recipe.scss → assets/recipe.scss

@@ -106,10 +106,16 @@ h1
 
 	table
 	{
+		td
+		{
+			vertical-align: top;
+		}
+
 		tr > td:first-child
 		{
 			padding-right: 0.5em;
 			text-align: center;
+			white-space: nowrap;
 
 			font-weight: $semibold;
 			color: $accent;
@@ -147,7 +153,12 @@ h1
 
 			p
 			{
-				margin: 0;
+				margin: 0.5em 0;
+
+				&:first-child
+				{
+					margin: 0;
+				}
 			}
 		}
 	}