From 6ea152558389488288ce2b0980268086f0373563 Mon Sep 17 00:00:00 2001 From: Blake Ridgway Date: Wed, 19 Feb 2025 12:26:27 -0600 Subject: [PATCH] feat: Added newsletter secitons --- server.py | 12 ++-- static/css/styles.css | 108 ++++++++++++++++++++++--------- templates/newsletter_detail.html | 4 +- templates/newsletters.html | 75 +++++++++++---------- 4 files changed, 123 insertions(+), 76 deletions(-) diff --git a/server.py b/server.py index eb94851..143f4d8 100644 --- a/server.py +++ b/server.py @@ -65,22 +65,20 @@ def unsubscribe(): else: return f"Email {email} was not found or has already been unsubscribed.", 400 - -NewsItem = namedtuple('NewsItem', ['id', 'subject', 'body', 'sent_at']) - @app.route("/newsletters") def newsletters(): conn = get_connection() cursor = conn.cursor() cursor.execute("SELECT id, subject, body, sent_at FROM newsletters ORDER BY sent_at DESC") - newsletter_records = cursor.fetchall() + results = cursor.fetchall() + newsletters = [ + {"id": rec[0], "subject": rec[1], "body": rec[2], "sent_at": rec[3]} + for rec in results + ] cursor.close() conn.close() - - newsletters = [NewsItem(*rec) for rec in newsletter_records] return render_template("newsletters.html", newsletters=newsletters) - @app.route("/newsletter/") def newsletter_detail(newsletter_id): conn = get_connection() diff --git a/static/css/styles.css b/static/css/styles.css index c644ca1..a27334a 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -39,7 +39,7 @@ header nav a { width: 100%; margin: 0; padding: 0; - overflow: hidden; /* Hide any overflow if the image is larger */ + overflow: hidden; } .hero-content, .hero-text { @@ -50,10 +50,10 @@ header nav a { } .hero-text img { - width: 70%; /* The image will take up 50% of its container's width */ - height: auto; /* Maintain aspect ratio */ - display: block; /* Remove inline spacing if needed */ - margin: 0 auto; /* Center the image within its container if desired */ + width: 70%; + height: auto; + display: block; + margin: 0 auto; } .hero-text h1 { @@ -277,31 +277,77 @@ img { } .newsletter-time { - color: #666; - font-size: 0.9em; + color: #666; + font-size: 0.9em; +} + +.newsletter-detail { + max-width: 800px; + margin: 20px auto; + padding: 20px; + border: 1px solid #ddd; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} +.newsletter-detail h1 { + color: #007bff; +} +.back-link { + margin-top: 20px; + display: inline-block; + color: #007bff; + text-decoration: none; +} +.back-link:hover { + text-decoration: underline; +} + +main h1 { + text-align: center; + margin-bottom: 20px; + color: #007bff; +} + +.cards-container { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 20px; +} + +.newsletter-content { + width: 5000px%; +} + +.newsletter-card { + background: #fff; + border: 1px solid #ddd; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + width: 300px; + display: flex; + flex-direction: column; + padding: 20px; + transition: transform 0.15s ease-in-out; +} + +.newsletter-card:hover { + transform: translateY(-5px); +} + +.newsletter-card h2 { + font-size: 1.5em; + color: #007bff; + margin-bottom: 10px; +} + +.newsletter-card p.newsletter-time { + font-size: 0.8em +} + +.newsletter-main { + max-width: 1200px; + margin: 0 auto; + padding: 20px; } - .newsletter-detail { - max-width: 800px; - margin: 20px auto; - padding: 20px; - border: 1px solid #ddd; - border-radius: 8px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - } - .newsletter-detail h1 { - color: #007bff; - } - .newsletter-time { - color: #666; - font-size: 0.9em; - } - .back-link { - margin-top: 20px; - display: inline-block; - color: #007bff; - text-decoration: none; - } - .back-link:hover { - text-decoration: underline; - } \ No newline at end of file diff --git a/templates/newsletter_detail.html b/templates/newsletter_detail.html index 5e1ba5a..0f5bd51 100644 --- a/templates/newsletter_detail.html +++ b/templates/newsletter_detail.html @@ -17,10 +17,8 @@
-