blog: Redesign the newsletter box

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/templates/blog/index.html b/src/templates/blog/index.html
index dfde853ca41cacfbc60164bca6e7447e96f124f5..3d883e1304ac50531798907e7bd82ff56bc405d0 100644 (file)
--- a/src/templates/blog/index.html
+++ b/src/templates/blog/index.html
@@ -44,30 +44,50 @@
                                        {% module BlogList(posts, latest=latest_post) %}
                                </div>
 
-                               <div class="column is-one-quarter">
-                                       {# Show a button to sign up for anonymous users #}
-                                       {% if not current_user %}
-                                               <div class="block">
-                                                       <a class="button is-primary is-large is-fullwidth wrap-text" href="/join">
-                                                               <span class="icon">
-                                                                       <i class="fa-solid fa-envelope"></i>
-                                                               </span>
-                                                               <span>{{ _("Join Now & Subscribe to our Newsletter") }}</span>
-                                                       </a>
-                                               </div>
+                               {# Encourage people to subscribe #}
+                               {% if not current_user or not current_user.consents_to_promotional_emails %}
+                                       <div class="column is-one-quarter">
+                                               <div class="card">
+                                                       <div class="card-content">
+                                                               <div class="block">
+                                                                       <p class="heading">
+                                                                               Newsletter
+                                                                       </p>
+
+                                                                       <p>
+                                                                               <small>
+                                                                                       Get new posts and release notes delivered
+                                                                                       straight to your inbox. No spam.
+                                                                               </small>
+                                                                       </p>
+                                                               </div>
+
+                                                               {# Show a button to sign up for anonymous users #}
+                                                               {% if not current_user %}
+                                                                       <div class="block">
+                                                                               <a class="button is-primary is-small is-fullwidth wrap-text" href="/join">
+                                                                                       <span class="icon">
+                                                                                               <i class="fa-solid fa-envelope"></i>
+                                                                                       </span>
+                                                                                       <span>{{ _("Join Now & Subscribe") }}</span>
+                                                                               </a>
+                                                                       </div>
 
-                                       {# Show a button to subscribe if users are logged in, but not yet subscribed #}
-                                       {% elif current_user and not current_user.consents_to_promotional_emails %}
-                                               <div class="block">
-                                                       <a class="button is-success is-large is-fullwidth wrap-text" href="/subscribe">
-                                                               <span class="icon">
-                                                                       <i class="fa-solid fa-envelope"></i>
-                                                               </span>
-                                                               <span>{{ _("Subscribe to our Newsletter") }}</span>
-                                                       </a>
+                                                               {# Show a button to subscribe if users are logged in, but not yet subscribed #}
+                                                               {% elif current_user and not current_user.consents_to_promotional_emails %}
+                                                                       <div class="block">
+                                                                               <a class="button is-success is-fullwidth" href="/subscribe">
+                                                                                       <span class="icon">
+                                                                                               <i class="fa-solid fa-envelope"></i>
+                                                                                       </span>
+                                                                                       <span>{{ _("Subscribe") }}</span>
+                                                                               </a>
+                                                                       </div>
+                                                               {% end %}
+                                                       </div>
                                                </div>
-                                       {% end %}
-                               </div>
+                                       </div>
+                               {% end %}
                        </div>
 
                        {# Show links to older years... #}