diff --git a/app.py b/app.py index bad4480..c8352d2 100644 --- a/app.py +++ b/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 } diff --git a/comics_data.py b/comics_data.py index 6744f1e..8e89f8f 100644 --- a/comics_data.py +++ b/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, diff --git a/static/css/style.css b/static/css/style.css index fabdd3a..840ccc4 100644 --- a/static/css/style.css +++ b/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); } diff --git a/static/images/icons/instagram.png b/static/images/icons/instagram.png new file mode 100644 index 0000000..afb35d9 --- /dev/null +++ b/static/images/icons/instagram.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d9f9541a7fe679d7f704de4cad04ac214575491cbda67dda69e0c59079a8a41d +size 2132 diff --git a/static/images/icons/mail .png b/static/images/icons/mail .png new file mode 100644 index 0000000..f26a538 --- /dev/null +++ b/static/images/icons/mail .png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:e9228136dff364919708d7fa1890cd1a9ce9ce05c838e1f6fbf3a385ea4bad6e +size 1355 diff --git a/static/images/icons/rss.png b/static/images/icons/rss.png new file mode 100644 index 0000000..782f3cb --- /dev/null +++ b/static/images/icons/rss.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:92b7e3b7fe314a747fb0eb9b4443749da6fcc5bf5b85021a899afa1026edcb80 +size 1764 diff --git a/static/images/icons/youtube.png b/static/images/icons/youtube.png new file mode 100644 index 0000000..b60b265 --- /dev/null +++ b/static/images/icons/youtube.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a973dceb731e3897e60f5243a90b0e622d6edd3bc36167c97e91538fbdda5569 +size 1167 diff --git a/templates/base.html b/templates/base.html index 6c74c02..b7bcb90 100644 --- a/templates/base.html +++ b/templates/base.html @@ -79,12 +79,41 @@

Follow

-