From 2618230e828bd1b7c3a3e6bd59915d61109c19a6 Mon Sep 17 00:00:00 2001
From: Ben Berry <ben@benberry.dev>
Date: Fri, 12 Sep 2025 12:52:17 -0700
Subject: [PATCH 1/2] feat: Don't break keep-in-touch links at icons

- make mastodon/slack/atom link icons stay in line
- wordsmith links to make them more cohesive
---
 assets/static/style.css | 4 ++++
 templates/home.html     | 9 +++------
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/assets/static/style.css b/assets/static/style.css
index 262fec4..596d972 100644
--- a/assets/static/style.css
+++ b/assets/static/style.css
@@ -171,4 +171,8 @@ img:hover {
     display: flex;
     align-items: center;
     gap: 16px;
+}
+
+a .icon {
+    text-decoration: none;
 }
\ No newline at end of file
diff --git a/templates/home.html b/templates/home.html
index 47dba84..f5636d3 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -64,21 +64,18 @@ <h3 class="title is-3">Keep in touch!</h3>
         </div>
         <div class="columns mt-6">
             <div class="column icon-text">
-                <span class="icon has-text-primary" aria-hidden="true"><span class="fa-brands fa-mastodon fa-2xl">&nbsp;</span></span>
                 <a href="https://hachyderm.io/@pycascades">
-                Follow us on Mastodon
+                <span class="icon has-text-primary" aria-hidden="true"><span class="fa-brands fa-mastodon fa-2xl"></span>&nbsp;&nbsp;&nbsp;</span>Follow us on Mastodon
                 </a>
             </div>
             <div class="column icon-text">
-                <span class="icon has-text-primary" aria-hidden="true"><span class="fa-solid fa-rss fa-2xl">&nbsp;</span></span>
                 <a href="{{ '/news@atom/news'|url }}" type="application/atom+xml" rel="alternate" title="Sitewide Atom feed">
-                Add our news to your RSS feed 
+                <span class="icon has-text-primary" aria-hidden="true"><span class="fa-solid fa-rss fa-2xl"></span>&nbsp;&nbsp;&nbsp;</span>Add us to your RSS feed
                 </a>
             </div>
             <div class="column icon-text">
-                <span class="icon has-text-primary" aria-hidden="true"><span class="fa-brands fa-slack fa-2xl">&nbsp;</span></span>
                 <a href="https://join.slack.com/t/pycascades/shared_invite/zt-1l5libchy-RyQi1Kh0PS8DXCfhxhHZhQ">
-                Join our Slack workspace
+                <span class="icon has-text-primary" aria-hidden="true"><span class="fa-brands fa-slack fa-2xl"></span>&nbsp;&nbsp;&nbsp;</span>Join us on Slack
                 </a>
             </div>
         </div>

From 69ca91f8315904585f0c87fd46883530672cfa6c Mon Sep 17 00:00:00 2001
From: Ben Berry <ben@benberry.dev>
Date: Fri, 12 Sep 2025 14:14:16 -0700
Subject: [PATCH 2/2] feat: More "Keep in Touch" tweaks

- close unclosed `section`
- make icons a little smaller
- fix vertical alignment on icons
- make elements center
- use level instead of column. (mostly just because it's more idiomatic
  for what we're trying to accomplish)
---
 assets/static/style.css |  1 +
 templates/home.html     | 16 ++++++++--------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/assets/static/style.css b/assets/static/style.css
index 596d972..ef4fc5b 100644
--- a/assets/static/style.css
+++ b/assets/static/style.css
@@ -175,4 +175,5 @@ img:hover {
 
 a .icon {
     text-decoration: none;
+    vertical-align: middle;
 }
\ No newline at end of file
diff --git a/templates/home.html b/templates/home.html
index f5636d3..fa83f82 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -33,7 +33,6 @@ <h2 class="subtitle has-text-light is-2">Community PyCon for the PNW</h2>
             </section>
     </section>
 </section>
-
 <section class="hero is-medium">
     <div class="hero-body">
         <div class="mailing-list block">
@@ -62,23 +61,24 @@ <h3 class="title is-3">Keep in touch!</h3>
                 </div>
             </form>
         </div>
-        <div class="columns mt-6">
-            <div class="column icon-text">
+        <div class="level has-text-centered mt-4">
+            <div class="level-item">
                 <a href="https://hachyderm.io/@pycascades">
-                <span class="icon has-text-primary" aria-hidden="true"><span class="fa-brands fa-mastodon fa-2xl"></span>&nbsp;&nbsp;&nbsp;</span>Follow us on Mastodon
+                <span class="icon has-text-primary" aria-hidden="true"><span class="fa-brands fa-mastodon fa-xl" ></span>&nbsp;&nbsp;&nbsp;</span>Follow us on Mastodon
                 </a>
             </div>
-            <div class="column icon-text">
+            <div class="level-item">
                 <a href="{{ '/news@atom/news'|url }}" type="application/atom+xml" rel="alternate" title="Sitewide Atom feed">
-                <span class="icon has-text-primary" aria-hidden="true"><span class="fa-solid fa-rss fa-2xl"></span>&nbsp;&nbsp;&nbsp;</span>Add us to your RSS feed
+                <span class="icon has-text-primary" aria-hidden="true"><span class="fa-solid fa-rss fa-xl"></span>&nbsp;&nbsp;&nbsp;</span>Add us to your RSS feed
                 </a>
             </div>
-            <div class="column icon-text">
+            <div class="level-item"> 
                 <a href="https://join.slack.com/t/pycascades/shared_invite/zt-1l5libchy-RyQi1Kh0PS8DXCfhxhHZhQ">
-                <span class="icon has-text-primary" aria-hidden="true"><span class="fa-brands fa-slack fa-2xl"></span>&nbsp;&nbsp;&nbsp;</span>Join us on Slack
+                <span class="icon has-text-primary" aria-hidden="true"><span class="fa-brands fa-slack fa-xl"></span>&nbsp;&nbsp;&nbsp;</span>Join us on Slack
                 </a>
             </div>
         </div>
     </div>
+</section>
 </main>
 {% endblock %}