Put images before recipe

byg/src/SiteGenerator.hs

@@ -18,7 +18,7 @@ makeImageHTML :: Token (FilePath, FilePath) -> DepGenM' Text
 makeImageHTML t = do
   (thumbnail, actual) <- untupleDepGenM t
   appendTexts
-    (inject "<p><a href=\"")
+    (inject "<p class=\"image\"><a href=\"")
     (appendTexts
       (toText actual)
       (appendTexts
@@ -48,10 +48,20 @@ handleRecipeDir inputDir outputDir template indexName name = do
   mapDepGenM_
     (\files -> convertImage files $ inject $ ResizeToWidth 800)
     (zipDepGenM imagePaths thumbnailImagePaths)
-  htmlBodyBase <- runPandoc $ readTextFile $ joinPaths dir $ inject "ret.md"
+  md <- readTextFile $ joinPaths dir $ inject "ret.md"
+  ingredienserHeadline <- inject "## Ingredienser"
+  mdTemplate <- makeTemplate md ingredienserHeadline
   htmlBodyImages <- mapDepGenM makeImageHTML $ zipDepGenM thumbnailImageFilenames imageFilenames
   imagesHtml <- concatTexts htmlBodyImages
-  htmlBody <- appendTexts htmlBodyBase imagesHtml
+  md' <- applyTemplate mdTemplate (
+    appendTexts
+      (inject "<p class=\"imagetext\">Opskrift fortsætter efter billedet.</p>\n")
+      (appendTexts
+        imagesHtml
+        (appendTexts
+          (inject "\n\n")
+          ingredienserHeadline)))
+  htmlBody <- runPandoc md'
   html <- applyTemplate template htmlBody
   saveFile html $ joinPaths recipeDirOut indexName
 

style.css

@@ -60,7 +60,7 @@ nav {
 }
 
 section {
-  max-width: 800px;
+  max-width: calc(800px + 2 * 10px);
   margin: 0 auto;
   font-family: bainsley, sans;
 }
@@ -68,3 +68,18 @@ section {
 article {
   padding: 10px;
 }
+
+p.imagetext {
+  font-style: italic;
+  text-align: right;
+  font-size: 0.85em;
+  color: #444444;
+  margin-bottom: 0.1em;
+}
+
+p.image {
+  margin: 0;
+  img {
+    max-width: 100%;
+  }
+}