💄 images for social

app.py

@@ -1,7 +1,11 @@
 import os
 from datetime import datetime
 from flask import Flask, render_template, abort, jsonify, request
-from comics_data import COMICS, FULL_WIDTH_DEFAULT, PLAIN_DEFAULT, HEADER_IMAGE, FOOTER_IMAGE, COMPACT_FOOTER, USE_COMIC_NAV_ICONS, USE_HEADER_NAV_ICONS
+from comics_data import (
+    COMICS, FULL_WIDTH_DEFAULT, PLAIN_DEFAULT, HEADER_IMAGE, FOOTER_IMAGE,
+    COMPACT_FOOTER, USE_COMIC_NAV_ICONS, USE_HEADER_NAV_ICONS,
+    USE_FOOTER_SOCIAL_ICONS, SOCIAL_INSTAGRAM, SOCIAL_YOUTUBE, SOCIAL_EMAIL
+)
 import markdown
 
 app = Flask(__name__)
@@ -18,7 +22,11 @@ def inject_global_settings():
         'footer_image': FOOTER_IMAGE,
         'compact_footer': COMPACT_FOOTER,
         'use_comic_nav_icons': USE_COMIC_NAV_ICONS,
-        'use_header_nav_icons': USE_HEADER_NAV_ICONS
+        'use_header_nav_icons': USE_HEADER_NAV_ICONS,
+        'use_footer_social_icons': USE_FOOTER_SOCIAL_ICONS,
+        'social_instagram': SOCIAL_INSTAGRAM,
+        'social_youtube': SOCIAL_YOUTUBE,
+        'social_email': SOCIAL_EMAIL
     }
 
 

comics_data.py

@@ -31,6 +31,15 @@ USE_COMIC_NAV_ICONS = True
 # Uses alert.png for Latest, archive.png for Archive, info.png for About
 USE_HEADER_NAV_ICONS = True
 
+# Global setting: Set to True to use icons instead of text for footer social links
+# Uses instagram.png, youtube.png, and mail.png from static/images/icons/
+USE_FOOTER_SOCIAL_ICONS = True
+
+# Social media links - set to None to hide the link
+SOCIAL_INSTAGRAM = None  # e.g., 'https://instagram.com/yourhandle'
+SOCIAL_YOUTUBE = None    # e.g., 'https://youtube.com/@yourchannel'
+SOCIAL_EMAIL = None      # e.g., 'mailto:your@email.com'
+
 COMICS = [
     {
         'number': 1,

static/css/style.css

@@ -617,6 +617,27 @@ footer {
     text-decoration: underline;
 }
 
+.social-icon {
+    height: 1.5rem;
+    width: auto;
+    display: block;
+    transition: opacity var(--transition-speed);
+}
+
+.social-icon:hover {
+    opacity: 0.7;
+}
+
+/* Icon-only social links layout */
+.social-links-icons {
+    flex-direction: row;
+    align-items: center;
+}
+
+.social-links-icons a:hover {
+    text-decoration: none;
+}
+
 .newsletter-form {
     display: flex;
     gap: var(--space-sm);
@@ -706,6 +727,10 @@ footer.compact-footer .social-links {
     gap: var(--space-sm);
 }
 
+footer.compact-footer .social-links-icons {
+    gap: var(--space-md);
+}
+
 footer.compact-footer .social-links a {
     font-size: var(--font-size-sm);
 }

templates/base.html

@@ -79,12 +79,41 @@
             <div class="footer-content">
                 <div class="footer-section">
                     <h3>Follow</h3>
-                    <div class="social-links">
+                    <div class="social-links{% if use_footer_social_icons %} social-links-icons{% endif %}">
-                        <!-- Uncomment and update with your social links -->
+                        {% if social_instagram %}
-                        <!-- <a href="https://twitter.com/yourhandle" target="_blank">Twitter</a> -->
+                            <a href="{{ social_instagram }}" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
-                        <!-- <a href="https://instagram.com/yourhandle" target="_blank">Instagram</a> -->
+                                {% if use_footer_social_icons %}
-                        <!-- <a href="https://mastodon.social/@yourhandle" target="_blank">Mastodon</a> -->
+                                    <img src="{{ url_for('static', filename='images/icons/instagram.png') }}" alt="Instagram" class="social-icon">
-                        <a href="{{ url_for('static', filename='feed.rss') }}">RSS Feed</a>
+                                {% else %}
+                                    Instagram
+                                {% endif %}
+                            </a>
+                        {% endif %}
+                        {% if social_youtube %}
+                            <a href="{{ social_youtube }}" target="_blank" rel="noopener noreferrer" aria-label="YouTube">
+                                {% if use_footer_social_icons %}
+                                    <img src="{{ url_for('static', filename='images/icons/youtube.png') }}" alt="YouTube" class="social-icon">
+                                {% else %}
+                                    YouTube
+                                {% endif %}
+                            </a>
+                        {% endif %}
+                        {% if social_email %}
+                            <a href="{{ social_email }}" aria-label="Email">
+                                {% if use_footer_social_icons %}
+                                    <img src="{{ url_for('static', filename='images/icons/mail .png') }}" alt="Email" class="social-icon">
+                                {% else %}
+                                    Email
+                                {% endif %}
+                            </a>
+                        {% endif %}
+                        <a href="{{ url_for('static', filename='feed.rss') }}" aria-label="RSS Feed">
+                            {% if use_footer_social_icons %}
+                                <img src="{{ url_for('static', filename='images/icons/rss.png') }}" alt="RSS" class="social-icon">
+                            {% else %}
+                                RSS Feed
+                            {% endif %}
+                        </a>
                     </div>
                 </div>