Make the newsletter more visible

* Remove my social media links from my contact page
* Create a new "subscribe" page with ways to follow me
* Add the newsletter sign up to the homepage

src/_includes/footer.html

@@ -12,17 +12,27 @@
       </p>
     </div>
 
-    <form
-      action="https://buttondown.com/api/emails/embed-subscribe/alexwlchan"
-      method="post"
-      target="popupwindow"
-      onsubmit="window.open('https://buttondown.com/alexwlchan', 'popupwindow')"
-    >
-      <p>
-        <label for="bd-email">Want a monthly digest of what I’m up to?</label>
-        <input type="email" name="email" id="bd-email" placeholder="Email address" />
-        <input type="submit" value="Subscribe" />
-      </p>
-    </form>
+    {% if page.footer.exclude_newsletter %}
+      <style>
+        #footer_inner {
+          grid-template-columns: auto;
+        }
+      </style>
+    {% endif %}
+
+    {% unless page.footer.exclude_newsletter %}
+      <form
+        action="https://buttondown.com/api/emails/embed-subscribe/alexwlchan"
+        method="post"
+        target="popupwindow"
+        onsubmit="window.open('https://buttondown.com/alexwlchan', 'popupwindow')"
+      >
+        <p>
+          <label for="bd-email">Want a monthly digest of what I’m up to?</label>
+          <input type="email" name="email" id="bd-email" placeholder="Email address" required />
+          <input type="submit" value="Subscribe" />
+        </p>
+      </form>
+    {% endunless %}
   </div>
 </footer>

src/_includes/newsletter.html

@@ -0,0 +1,44 @@
+<style>
+  #buttondown {
+    text-align: center;
+  }
+
+  #buttondown input[type="email"] {
+    padding: 10px;
+    font-size: 1.5em;
+    border-radius: 5px;
+    border: 3px solid var(--primary-color);
+  }
+
+  #buttondown input[type="submit"] {
+    background: var(--primary-color);
+    font-size: 1.2em;
+    color: white;
+    padding: 6px 10px;
+    border-radius: 5px;
+    border: none;
+  }
+
+  #buttondown input[type="submit"]:active {
+    transform: translate(0, 2px);
+  }
+</style>
+
+If you want to stay up-to-date with what I'm doing, you can subscribe to my monthly newsletter:
+
+<form
+  id="buttondown"
+  action="https://buttondown.com/api/emails/embed-subscribe/alexwlchan"
+  method="post"
+  target="popupwindow"
+  onsubmit="window.open('https://buttondown.com/alexwlchan', 'popupwindow')"
+>
+  <input type="email" name="email" id="bd-email" placeholder="Email address" required />
+  <input type="submit" value="Subscribe" />
+</form>
+
+I'll send you an email at the end of every month, with a short summary of what I've been up to, links to stuff I've written, and a list of things I've enjoyed recently.
+
+Check out [the archives](https://buttondown.com/alexwlchan/archive/) if you want to see what you'll be getting.
+
+I won't spam you, I won't sell your email address, and you can unsubscribe whenever you like.

src/_layouts/default.html

@@ -61,6 +61,6 @@
       {{ parsed_content.html }}
     </main>
 
-    {% include_cached footer.html %}
+    {% include footer.html %}
   </body>
 </html>

src/_scss/components/footer.css

@@ -27,8 +27,10 @@ footer #bd-email {
   margin-top:    5px;
   margin-bottom: 5px;
 
-  padding:      1px;
-  border-width: 2px;
+  padding: 5px;
+  border: none;
+  border-radius: 5px;
+  font-size: 1.2em;
 
   width: calc(100% - 6px);  /* offset the padding/border */
 }

src/contact.md

@@ -3,21 +3,11 @@ layout: page
 title: Contact
 nav_section: contact
 ---
-I love it when people tell me they enjoyed something I made!
+I love it when people tell me they enjoyed something I made.
 A nice message can make my day!
 
-The best way to get in touch with me is by email: **<a href="mailto:{{ site.email }}">{{ site.email }}</a>**.
-(I'm bad at replying to emails in a timely manner, but I'm trying to get better!)
+The best way to get in touch with me is by email: <a href="mailto:{{ site.email }}">{{ site.email }}</a>
 
-I use the handle **alexwlchan** fairly consistently on the rest of the web.
-(This is a username my aunt suggested for my first Hotmail address in 2004, and I've stuck with it ever since.
-The "w" and "l" are my middle initials, but I'm not going to tell you what they stand for.)
+(I'm slow at replying to emails, but I'm trying to get better!)
 
-The best way to stay up-to-date is to [subscribe to my RSS feed](/atom.xml), or I link to new posts from my social media accounts:
-
-*   Mastodon: <https://social.alexwlchan.net/@alex>
-*   LinkedIn: <https://www.linkedin.com/in/alexwlchan/>
-*   GitHub: <https://github.com/alexwlchan/>
-*   Instagram: <https://www.instagram.com/alexwlchan/>
-
-I read my notifications and private messages, but less often than emails.
+I'm fairly checked out of social media right now, so I may not see messages sent to me there.

src/index.md

@@ -4,6 +4,8 @@ title: ""
 colors:
   css_light: "#17823e"
   css_dark:  "#26d967"
+footer:
+  exclude_newsletter: true
 ---
 
 <style type="x-text/scss">
@@ -149,11 +151,4 @@ Here are some of the topics I write about:
 
 ---
 
-
-
-## Get in touch
-
-The best way to get in touch with me is by email: **<{{ site.email }}>**, or you can [follow me on social media](/contact/).
-
-If you like something I've made, perhaps [say thanks](/say-thanks/)?
-I love hearing from readers! ☺️
+{% include newsletter.html %}

src/subscribe.md

@@ -0,0 +1,27 @@
+---
+layout: page
+title: Subscribe!
+nav_section: subscribe
+footer:
+  exclude_newsletter: true
+---
+{% include newsletter.html %}
+
+## Social media
+
+I have a limited presence on social media, where I post my "edited highlights" -- links to stuff I've made that I think is particularly interesting or notable.
+Follow me at:
+
+*   Mastodon: <https://social.alexwlchan.net/@alex>
+*   Bluesky: <https://bsky.app/profile/alexwlchan.bsky.social/>
+*   LinkedIn: <https://www.linkedin.com/in/alexwlchan/>
+*   Instagram: <https://www.instagram.com/alexwlchan/>
+
+(I used to have a Twitter account, but I no longer post there.)
+
+## RSS feeds
+
+If you're an old-school nerd like me, you can subscribe to an RSS feed of my writing on this site:
+
+*   Articles: <https://alexwlchan.net/atom.xml>
+*   Today I Learned posts: <https://alexwlchan.net/til/atom.xml>