responsive!

compile.zp

@@ -15,10 +15,15 @@
 (define (from-path file)
   (regex:sub r/.md$/ "" (list:last (string:split file "/"))))
 
+(define (treat str)
+  (regex:gsub r/<br \/>/ "</p><p>" (regex:gsub r/<p>/ "<p class='paragraph'>" str)))
+
 (define (render targets)
   (let* ((strs (map read-contents targets))
          (args (make-hash
-                  "poems" (map (curry pandoc:convert "markdown" "html") strs))))
+                  "poems" (map (compose treat
+                                        (curry pandoc:convert "markdown" "html"))
+                                strs))))
     (with-output-file "index.html"
       (curry write (mustache:template tpl args)))))
 

style.css

@@ -20,6 +20,13 @@ body {
   padding-top: 3em;
   display: none;
 }
+p {
+  text-indent: -2em;
+  margin: 0;
+}
+.paragraph {
+  margin-top: 1em;
+}
 #bottom {
   position: absolute;
   bottom: 10px;
@@ -31,3 +38,21 @@ body {
   padding: 10px;
   cursor: pointer;
 }
+@media all and (max-device-width: 1000px) {
+  .poem {
+    font-size: 40px;
+    padding-left: 3em;
+  }
+  #bottom {
+    margin-left: calc(50vw - 185px);
+    border-top: 10px solid;
+  }
+  .nav {
+    font-size: 170px;
+  }
+}
+@media all and (max-width: 1000px) {
+  .poem {
+    padding-left: 3em;
+  }
+}