Fixed up Discord callout spacings.

Author: oubiwann

content/_index.md

@@ -592,12 +592,14 @@ channel_url = "https://www.youtube.com/@ErlangSolutions"
 ###   Final Callout-1 Section   ###############################
 
 [extra.callout1]
-title = "![discord logo](/images/discord-logo.png) Join us on<br/>Discord!"
+prefix = "![discord logo](/images/discord-logo.png)"
+title = "Join us on<br/>Discord!"
 content = "https://discord.gg/Uf3PszVHtF"
 
 ###   Final Callout-2 Section   ###############################
 
 [extra.callout2]
+prefix = ""
 title = "Give yourself to the <span style='color: lightskyblue;'>Lisp</span> side of the Force!"
 content = '''
 [img-src]: /images/xkcd-lisp-cycles.png

static/css/site.css

@@ -161,6 +161,19 @@
         @apply mt-20 mb-20;
     }
 
+    .content-section .closing-callout p {
+        font-size: 140%;
+    }
+
+    .content-section .closing-callout .prefix-container {
+        padding-left: 2em;
+    }
+
+    .content-section .closing-callout .button-container {
+        padding-top: 1em;
+        padding-right: 2em;
+    }
+
     footer {
         @apply bg-slate-400 dark:bg-slate-950 border-t border-t-slate-700;
     }

styles/site.css

@@ -9,15 +9,26 @@
         <h1>
           {{ callout2.title | markdown(inline=true) | safe }}
         </h1>
-        <p class="flex align-middle text-center">
-          {{ callout1.title | markdown(inline=true) | safe }}
-          <a href="{{ callout1.content | markdown(inline=true) | safe }}">
+        <div class="grid grid-cols-3 gap-4">
+          <div class="prefix-container">
+            <p class="flex">
+              {{ callout1.prefix | markdown(inline=true) | safe }}
+            </p>
+          </div>
+          <div class="title-container">
+            <p class="flex align-middle text-center">
+              {{ callout1.title | markdown(inline=true) | safe }}
+            </p>
+          </div>
+          <div class="button-container">
+            <a href="{{ callout1.content | markdown(inline=true) | safe }}">
             <button type="button"
                     class="ml-2 mt-2 py-2 px-3 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-yellow-500 text-slate-700 hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">
               Go &raquo;
             </button>
-          </a>
-        </p>
+            </a>
+          </div>
+        </div>
       </div>
     </div>