Merge pull request #2 from pycascades/bb/contact-us-links

feat: Don't break keep-in-touch links at icons

Author: bengerman13

assets/static/style.css

@@ -171,4 +171,9 @@ img:hover {
     display: flex;
     align-items: center;
     gap: 16px;
+}
+
+a .icon {
+    text-decoration: none;
+    vertical-align: middle;
 }

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,26 +61,24 @@ <h3 class="title is-3">Keep in touch!</h3>
                 </div>
             </form>
         </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>
+        <div class="level has-text-centered mt-4">
+            <div class="level-item">
                 <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-xl" ></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>
+            <div class="level-item">
                 <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-xl"></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>
+            <div class="level-item"> 
                 <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-xl"></span>&nbsp;&nbsp;&nbsp;</span>Join us on Slack
                 </a>
             </div>
         </div>
     </div>
+</section>
 </main>
 {% endblock %}