Add subscribe form to second edition index page

blog/static/css/main.css

@@ -54,6 +54,10 @@ main img {
   border: 2px solid #999;
 }
 
+.posts.subscribe {
+  border: 2px solid #aaa;
+}
+
 .posts.bare-bones {
   border: 2px solid #66f;
 }
@@ -248,3 +252,25 @@ div.warning {
   border-radius: 5px;
   background-color: #ffa50022;
 }
+
+form.subscribe {
+  margin: 1rem;
+}
+
+div.subscribe-fields {
+  display: flex;
+}
+
+form.subscribe input {
+  padding: .5rem;
+  border: 1px solid #e5e5e5;
+}
+
+form.subscribe input[type=email] {
+  flex: 1;
+}
+
+form.subscribe input[type=submit] {
+  padding: .25rem .5rem;
+  cursor: pointer;
+}

blog/templates/second-edition/index.html

@@ -30,6 +30,24 @@
     {{ macros::post_link(page=posts.2) }}
 </div>
 
+<div class="posts subscribe">
+    <h2 class="post-title">Subscribe</h2>
+    Receive notifications about new posts and other major changes.
+    <form
+    action="https://buttondown.email/api/emails/embed-subscribe/phil-opp"
+    method="post"
+    target="popupwindow"
+    onsubmit="window.open('https://buttondown.email/phil-opp', 'popupwindow')"
+    class="embeddable-buttondown-form subscribe"
+    >
+    <div class="subscribe-fields">
+        <input type="email" name="email" id="bd-email" placeholder="Enter your email">
+        <input type="hidden" value="1" name="embed"/>
+        <input type="submit" value="Subscribe" />
+    </div>
+    </form>
+</div>
+
 <aside id="recent-updates">
     <h2>Recent Updates</h2>
     {% include "recent-updates.html" %}