diff --git a/static/css/style.css b/static/css/style.css index f2dddb9..aa2ad6f 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -342,12 +342,88 @@ main { /* Footer */ footer { border-top: 3px solid #000; - text-align: center; padding: 2rem 0; margin-top: 3rem; } -footer p { +.footer-content { + display: flex; + justify-content: space-around; + gap: 2rem; + margin-bottom: 2rem; + flex-wrap: wrap; +} + +.footer-section { + flex: 1; + min-width: 200px; +} + +.footer-section h3 { + color: #000; + font-size: 0.9rem; + text-transform: uppercase; + letter-spacing: 1px; + margin-bottom: 1rem; +} + +.social-links { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.social-links a { + color: #000; + text-decoration: none; + font-size: 0.85rem; +} + +.social-links a:hover { + text-decoration: line-through; +} + +.newsletter-form { + display: flex; + gap: 0.5rem; +} + +.newsletter-form input[type="email"] { + flex: 1; + padding: 0.5rem; + border: 2px solid #000; + font-family: 'Courier New', Courier, monospace; + font-size: 0.85rem; +} + +.newsletter-form button { + padding: 0.5rem 1rem; + background-color: #000; + color: #fff; + border: 2px solid #000; + cursor: pointer; + font-family: 'Courier New', Courier, monospace; + font-size: 0.85rem; + text-transform: uppercase; +} + +.newsletter-form button:hover { + background-color: #fff; + color: #000; +} + +.newsletter-placeholder { + font-size: 0.85rem; + color: #666; +} + +.footer-bottom { + text-align: center; + padding-top: 1.5rem; + border-top: 2px solid #000; +} + +.footer-bottom p { margin: 0; color: #000; font-size: 0.85rem; diff --git a/templates/base.html b/templates/base.html index 424004b..6eba9bb 100644 --- a/templates/base.html +++ b/templates/base.html @@ -5,6 +5,7 @@ {% block title %}{{ title }}{% endblock %} - Sunday Comics + {% block extra_css %}{% endblock %} @@ -31,7 +32,32 @@