Add mailing list sign up form to blog

_includes/mail-form.html

@@ -0,0 +1,36 @@
+<div class="card">
+  <div class="subscribe-form">
+    <div class="row clearfix">
+      <div class="column full">
+        <h3>Subscribe to my future posts</h3>
+      </div>
+    </div>
+    <form action="http://list.hallada.net/subscribe" method="POST" accept-charset="utf-8">
+      <div class="row clearfix">
+        <div class="column half">
+          <label for="name">Name (optional)</label><br/>
+          <input type="text" name="name" id="name"/>
+        </div>
+        <div class="column half">
+          <label for="email">Email</label><br/>
+          <input type="email" name="email" id="email"/>
+        </div>
+      </div>
+      <div class="row clearfix">
+        <div style="display:none;">
+          <label for="hp">HP</label><br/>
+          <input type="text" name="hp" id="hp"/>
+        </div>
+        <input type="hidden" name="list" value="Q7JrUBzeCeftZqwDtxsQ9w"/>
+        <div class="column half">
+          <input type="submit" name="submit" id="submit"/>
+        </div>
+        <div class="column half">
+          <span class="form-rss">Or subscribe to my <a href="/feed.xml">RSS feed</a></span>
+        </div>
+      </div>
+    </form>
+    <div class="row clearfix">
+    </div>
+  </div>
+</div>

_layouts/post.html

@@ -16,3 +16,5 @@ layout: default
     </div>
   </div>
 </div>
+
+{% include mail-form.html %}

blog/index.html

@@ -43,3 +43,5 @@ title: Tyler Hallada - Blog
     {% endif %}
   </div>
 </div>
+
+{% include mail-form.html %}

css/main.css

@@ -263,7 +263,7 @@ div.more-row {
 
 div.pagination {
   text-align: center;
-  margin-bottom: 10px;
+  margin-bottom: 20px;
 }
 
 div.rss {
@@ -366,6 +366,31 @@ a.rss img {
   }
 }
 
+/*****************************************************************************/
+/*
+/* Subscribe form
+/*
+/*****************************************************************************/
+
+.subscribe-form h3 {
+  margin-top: 10px;
+  margin-left: 10px;
+}
+
+.subscribe-form input {
+  margin: 10px;
+}
+
+.subscribe-form label {
+  margin-left: 10px;
+}
+
+.subscribe-form span.form-rss {
+  display: block;
+  margin-top: 20px;
+  margin-left: 10px;
+}
+
 /*****************************************************************************/
 /*
 /* Homepage